/* ═══ Percepción de diferencias ══════════════════════════════════════════════ */
.screen--pd.screen--center { min-height: calc(100vh - 42px); }
.pd-face {
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 2px; cursor: pointer; line-height: 0;
}
.pd-face svg { display: block; }
.pd-face:hover { background: #eef4f3; }
.pd-face:focus-visible { outline: none; box-shadow: var(--focus); }
.pd-face--selected {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pd-face--ok { border-color: var(--accent); background: #f0f9f7; }
.pd-face--no { border-color: var(--danger); background: #fbeceb; }
.screen--pd-sheet { display: block; width: 100%; max-width: 920px; margin: 0 auto; }
.pd-sheet__toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 10px 4px; margin-bottom: 4px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.pd-sheet__toolbar h2 { margin: 0 0 2px; font-size: 1.05rem; }
.pd-sheet__toolbar .muted { margin: 0; font-size: 0.82rem; }
.pd-sheet__status { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.pd-countdown {
  font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pd-progress { font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pd-matrix {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; padding: 12px 0;
}
.pd-triad { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 4px; border-radius: 8px; }
.pd-triad__number {
  flex: none; width: 1.8em; text-align: right;
  font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.pd-triad__faces { display: flex; gap: 2px; }
.pd-face--matrix { padding: 1px; }
.pd-practice-faces {
  display: flex; gap: 16px; justify-content: center; margin: 10px 0; flex-wrap: wrap;
}
.pd-face--practice {
  padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface);
}
.pd-face--practice:hover { border-color: var(--accent); background: #f0f9f7; }
@media (max-width: 680px) { .pd-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .pd-matrix { grid-template-columns: 1fr; } }

/* La matriz tiene 60 ítems (180 caras) bajo un contador de tiempo — con un
   dedo (menos preciso que un mouse) el gap de 2px entre caras de la misma
   tríada es el riesgo real de tocar la cara vecina por error. Se agranda
   solo el espaciado táctil, no el tamaño de cada cara (no cambia la tarea
   en sí, solo separa mejor los objetivos). */
@media (pointer: coarse), (hover: none) {
  .pd-face--matrix { padding: 6px; }
  .pd-triad__faces { gap: 8px; }
  .pd-matrix { gap: 14px 18px; }
}