/* Estilos de las superficies de auth (plan 01-04, UI-SPEC).
 *
 * daisyUI cubre los componentes (card, btn, alert, input). Acá viven solo los
 * ajustes que daisyUI no da: el layout print-optimizado de la pantalla de
 * recovery codes (S5) y micro-ajustes de la card de auth.
 */

/* Tema clínico calmo (UI-SPEC § Color). Tokens semánticos, sin hex en templates. */
:root {
  --auth-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.auth-shell {
  /* Respiro vertical en viewports anchos (UI-SPEC § Spacing 3xl). */
  padding-top: 1rem;
}

/* Targets táctiles ≥44px en el flujo phone-first (UI-SPEC § Spacing exception). */
.btn,
.input,
.auth-code-input {
  min-height: 44px;
}

/* Input del código MFA: monospace, ancho, legible (S3). */
.auth-code-input {
  font-family: var(--auth-mono);
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.5rem;
}

/* Grid de recovery codes (S5): celdas mono, gap 8px, padding 12px. */
.recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recovery-grid .code-cell {
  font-family: var(--auth-mono);
  padding: 12px;
  background: var(--color-base-200, #eef1f6);
  border-radius: 0.5rem;
  text-align: center;
  letter-spacing: 0.1em;
}

/* Secreto TOTP bajo el QR (S4): monospace. */
.totp-secret {
  font-family: var(--auth-mono);
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
 * Layout print-optimizado para los recovery codes (S5 / D-08).
 * Al imprimir: fondo blanco, sin cromo de navegación, solo los códigos.
 * ------------------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .auth-shell {
    min-height: auto;
    padding: 0;
    display: block;
  }

  .card {
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
  }

  /* Ocultar todo lo que no sean los códigos en la impresión. */
  .no-print {
    display: none !important;
  }

  .recovery-grid .code-cell {
    background: #ffffff !important;
    border: 1px solid #000000;
  }
}