/* ══ SDMT ══════════════════════════════════════════════════════════════════════
   Mismo criterio de corrección visual que TOL/WCST/TMT: .screen--center fija
   min-height:80vh, y con contenido más bajo que eso el bloque queda pegado arriba
   con un vacío debajo. SDMT no norma su tiempo visible (el cronómetro de 90s ya
   estaba a la vista antes de este rediseño); aquí solo se restila, sin agregar ni
   quitar información de la tarea. */
.screen--sdmt.screen--center { min-height: calc(100vh - 42px); }
.screen--sdmt { width: 100%; max-width: 760px; }
.sdmt-panel { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }

.sdmt-key {
  display: flex; gap: 2px; flex-wrap: wrap; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
  padding: 16px 10px;
}
.sdmt-key--instr { margin: 18px 0; padding: 16px 4px; }
.sdmt-key--instr .sdmt-key-cell { padding: 2px 7px; }
.sdmt-key-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 2px 12px;
}
.sdmt-key-cell + .sdmt-key-cell { border-left: 1px solid var(--line); }
/* El legend de la pantalla de instrucciones (.sdmt-key--instr) es solo de
   referencia, sin listener — el estilo interactivo queda excluido ahí a
   propósito. En el trial (sdmt.js, renderScreen()) tocar la celda que
   coincide con el símbolo mostrado responde ese dígito: es el único
   camino táctil de SDMT, que antes era 100% teclado. */
.sdmt-key:not(.sdmt-key--instr) .sdmt-key-cell {
  cursor: pointer; border-radius: var(--radius-sm);
  transition: background .12s, transform .08s;
}
.sdmt-key:not(.sdmt-key--instr) .sdmt-key-cell:hover { background: var(--accent-soft); }
.sdmt-key:not(.sdmt-key--instr) .sdmt-key-cell:active { transform: scale(.94); }
@media (pointer: coarse), (hover: none) {
  .sdmt-key:not(.sdmt-key--instr) .sdmt-key-cell { padding: 10px 14px; }
}
.sdmt-key-digit {
  font-size: .9rem; font-weight: 700; color: var(--accent-dark);
  background: var(--accent-soft); border-radius: 100px; min-width: 15px;
  text-align: center; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.sdmt-sym { color: var(--ink); display: block; }

.sdmt-stim-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sdmt-stim-label {
  margin: 0; font-weight: 700; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sdmt-stim-card {
  display: flex; align-items: center; justify-content: center;
  width: 148px; height: 148px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .08);
}
.sdmt-feedback { min-height: 2rem; font-size: 1.5rem; font-weight: 700; }
.sdmt-feedback--ok { color: var(--ok); }
.sdmt-feedback--err { color: var(--danger); }

.sdmt-status-row { display: flex; gap: 10px; justify-content: center; }
.sdmt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 30, 45, .05);
}
.sdmt-chip strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.sdmt-end-message { margin: 0; color: var(--ink-soft); font-size: 1.05rem; font-weight: 500; }