/* =====================================================================
   REDISEÑO 2026 — bloque SEGURIDAD
   1. Tarjeta 2FA de Cuenta     3. Confirmación de admin
   2. Activar 2FA               4. Zona de riesgo de Cuenta
   Se carga ANTES de rd-global.css: donde rd-global define la misma
   propiedad con el mismo peso se usa selector con id para ganar.
   Todo color sale de design/tokens.css (color-mix deriva de tokens).
   ===================================================================== */

/* ---------- 1. Tarjeta 2FA de Cuenta (.group con una fila) ---------- */
#mfaCard[hidden] { display: none; }
.mfa-row { align-items: flex-start; }
.mfa-icon { background: var(--surface-3); color: var(--text-2); }
.mfa-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.mfa-titleline .row-title { line-height: 1.3; }
#mfaCard .row-sub { margin-top: var(--sp-1); line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.mfa-actions { padding: 0 var(--sp-4) var(--sp-4); }
#mfaCard #mfaActionBtn { min-height: 48px; }

/* insignia: frase corta, sin mayúsculas, con punto de estado */
#mfaCard #mfaStatusBadge {
  flex: none; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--surface-3); color: var(--text-2);
}
#mfaCard #mfaStatusBadge:empty { display: none; }
#mfaCard #mfaStatusBadge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#mfaCard #mfaStatusBadge.admin-badge-active { color: var(--teal-text); }
#mfaCard[data-mfa="on"] .mfa-icon { color: var(--teal-text); }

/* activa: el botón desactiva, así que es destructivo pero sobrio (contorno coral) */
#mfaCard[data-mfa="on"] #mfaActionBtn {
  color: var(--coral-text);
  border-color: color-mix(in srgb, var(--module-advertencia) 45%, transparent);
}
#mfaCard #mfaActionBtn:disabled { opacity: 0.55; cursor: default; }

/* ---------- 2 y 3. Base común de Activar 2FA y Confirmación de admin ---------- */
/* cabecera: atrás de 44 px */
.sec-screen .wiz-top { margin-bottom: var(--sp-6); }
.sec-screen .wiz-back {
  width: var(--hit, 44px); height: var(--hit, 44px); padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); border-color: var(--hairline);
}
.sec-screen .greet-cap { color: var(--text-3); }
.sec-screen h1.app-title { margin-bottom: var(--sp-3); }
.sec-screen .auth-lead { font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); margin-bottom: var(--sp-6); }

/* campos: mismo lenguaje que las pantallas de acceso (52 px, anillo azul al enfocar) */
.sec-screen .field { margin-bottom: var(--sp-4); }
.sec-screen .field[hidden] { display: none; }
.sec-screen .field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: var(--sp-2); }
.sec-screen .field input {
  min-height: 52px; padding: 0 var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.sec-screen .field input::placeholder { color: var(--text-3); }
.sec-screen .field input:focus,
.sec-screen .field input:focus-visible {
  outline: none;
  border-color: var(--performance-blue);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--ring-blue, color-mix(in srgb, var(--performance-blue) 30%, transparent));
}
.sec-screen .field input:disabled { opacity: 0.6; cursor: default; }

/* código de 6 dígitos: un solo input grande, centrado, con tracking amplio */
#screen-mfa-enroll .field input.sec-code,
#screen-admin-gate .field input.sec-code {
  min-height: 60px;
  padding: 0 var(--sp-4) 0 calc(var(--sp-4) + 0.4em); /* compensa el tracking final para centrar de verdad */
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600;
  letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.sec-screen .field input.sec-code::placeholder { color: var(--text-3); font-weight: 500; }

/* botones principales: 52 px, mismo peso que el acceso */
.sec-screen form .btn { display: flex; min-height: 52px; margin-top: var(--sp-2); }
.sec-screen form .btn[hidden] { display: none; }
.sec-screen .auth-link:disabled { opacity: 0.55; cursor: default; }
.sec-screen .auth-banner-error, .sec-screen .auth-banner-ok { margin-bottom: var(--sp-4); overflow-wrap: anywhere; } /* correos largos en el aviso de restablecer */

/* ---------- 2. Activar 2FA: pasos numerados ---------- */
.sec-steps { margin-bottom: var(--sp-4); }
.sec-step { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
.sec-step .row-title { line-height: 1.3; }
.sec-step .row-sub { color: var(--text-2); }
.sec-num {
  background: var(--surface-3); color: var(--performance-blue-text, var(--text-1));
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.sec-body { padding: var(--sp-4); border-top: 1px solid var(--hairline); }
.sec-body > form > .field:last-of-type { margin-bottom: var(--sp-2); }
.sec-qr { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface-2); padding: var(--sp-5) var(--sp-4); }

/* QR: marco claro para contraste; multiply funde el fondo blanco del SVG con el marco */
#screen-mfa-enroll .mfa-qr-frame {
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--bone-white); box-shadow: var(--shadow-1);
  line-height: 0;
}
#screen-mfa-enroll .mfa-qr {
  display: block; width: 176px; height: 176px; max-width: 100%; padding: 0;
  border-radius: var(--r-sm); background: transparent; mix-blend-mode: multiply;
}
.sec-hint { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
#screen-mfa-enroll .mfa-secret {
  box-sizing: border-box; width: 100%; margin: 0; padding: var(--sp-3);
  border-radius: var(--r-sm); background: var(--surface-0); border: 1px solid var(--hairline-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm); line-height: 1.6; letter-spacing: 0.04em; text-wrap: balance;
  color: var(--text-1); overflow-wrap: anywhere; word-break: break-all;
  -webkit-user-select: all; user-select: all;
}
#screen-mfa-enroll .mfa-secret:empty { display: none; }

/* ---------- 3. Confirmación de admin ---------- */
.sec-mark {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-3); color: var(--performance-blue-text, var(--text-1));
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
#screen-admin-gate .auth-link-right { margin-bottom: var(--sp-1); }

/* ---------- 4. Zona de riesgo de Cuenta ---------- */
/* confirmación en línea: panel coral tenue, botones apilados de 48 px */
#deleteConfirmBox {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--module-advertencia);
}
#deleteConfirmBox[hidden] { display: none; }
#deleteConfirmBox .acc-note-alert { margin: 0 0 var(--sp-2); }
#deleteConfirmBox .btn { min-height: 48px; }
#deleteConfirmBox .btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- tintes derivados de tokens (solo si el navegador soporta color-mix) ---------- */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  #mfaCard #mfaStatusBadge.admin-badge-active { background: color-mix(in srgb, var(--recovery-teal) 16%, transparent); }
  #mfaCard[data-mfa="on"] .mfa-icon { background: color-mix(in srgb, var(--recovery-teal) 16%, transparent); }
  .sec-mark {
    background: color-mix(in srgb, var(--performance-blue) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--performance-blue) 32%, transparent);
  }
  .sec-num { background: color-mix(in srgb, var(--performance-blue) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--performance-blue) 28%, transparent); }
  #deleteConfirmBox {
    background: color-mix(in srgb, var(--module-advertencia) 8%, transparent);
    border-color: color-mix(in srgb, var(--module-advertencia) 30%, transparent);
  }
}