/* ==========================================================================
   RD-GLOBAL — pulido transversal (se carga el ULTIMO)
   1. Tokens auxiliares            5. Cuenta, 2FA y admin (valores fijos)
   2. Areas tactiles >= 44 px      6. Recuperacion
   3. Sistema de movimiento        7. Bienvenida
   4. Autenticacion                8. prefers-reduced-motion (bloque unico)
   Todo color sale de design/tokens.css; los color-mix() derivan de tokens.
   ========================================================================== */

/* ---------- 1. Tokens auxiliares ---------- */
:root {
  --hit: 44px; /* area tactil minima */
  /* azul de marca aclarado para TEXTO pequeno (AA >= 6:1 sobre superficies oscuras) */
  --performance-blue-text: color-mix(in srgb, var(--performance-blue) 78%, var(--bone-white));
  --ring-blue: color-mix(in srgb, var(--performance-blue) 30%, transparent);
}

/* ---------- 2. Areas tactiles >= 44 x 44 ----------
   Sin cambiar el tamano visual: un ::after transparente centrado que mide
   max(100%, 44px) en cada eje. Si el control ya mide >= 44, no sobresale. */
.wiz-back, .account-btn, .rec-exit, .chip, .pro-lock, .admin-refresh-btn, .custom-interval-row button { position: relative; }
.wiz-back::after, .account-btn::after, .rec-exit::after, .chip::after, .pro-lock::after,
.admin-refresh-btn::after, .custom-interval-row button::after,
.timer-fs-btn::after, .close-x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, var(--hit));
  height: max(100%, var(--hit));
  transform: translate(-50%, -50%);
}
/* .timer-fs-btn y .close-x ya son position:absolute: el ::after se ancla a ellos.
   [hidden] perdia contra display:flex (el boton de grabar se mostraba aun oculto) */
.timer-fs-btn[hidden], .auth-link[hidden], .auth-banner-error[hidden], .auth-banner-ok[hidden] { display: none; }

.tab { min-width: var(--hit); min-height: 48px; }
/* zona segura superior (viewport-fit=cover): el shorthand de .screen-pad del bloque REDISENO 2026
   pisa el env(safe-area-inset-top) del media query base; se recupera aqui (0 en escritorio) */
.screen-pad { padding-top: calc(var(--sp-6) + env(safe-area-inset-top)); }
.btn { min-height: 48px; }
.admin-select { min-height: var(--hit); padding: 0 var(--sp-3); }
.admin-delete-btn, .admin-delete-confirm-btn { min-height: var(--hit); }
.admin-delete-confirm-actions .chip { padding: 0 var(--sp-3); }
/* filas de 44 px: el area tactil de cada boton (::after) no se solapa con la del vecino, que borra otro intervalo */
.custom-interval-row { min-height: var(--hit); }
.custom-interval-row button { min-width: var(--sp-6); }
.welcome-skip { min-width: var(--hit); min-height: var(--hit); padding: 0 var(--sp-3); top: var(--sp-2); right: var(--sp-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.welcome-skip:hover { color: var(--text-1); }

/* ---------- 3. Sistema de movimiento ---------- */
/* transicion entre pantallas: 220 ms, 8 px */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.screen.active, .wiz-step { animation: screenIn var(--dur-base) var(--ease-out-strong); }

/* listas escalonadas: 40 ms por elemento, tope en el sexto (200 ms) */
.stagger-in > * { animation-duration: 320ms; }
.stagger-in > *:nth-child(n+7) { animation-delay: 200ms; }

/* estado :active coherente: 140 ms, scale .97 */
.btn, .chip, .mode-card, .movement-card, .row-action { touch-action: manipulation; }
.btn { transition: transform var(--dur-fast) var(--ease-out-strong), filter 150ms ease, opacity 150ms ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.chip { transition: transform var(--dur-fast) var(--ease-out-strong), border-color 200ms ease, background 200ms ease, color 150ms ease; }
.mode-card { transition: transform var(--dur-fast) var(--ease-out-strong), border-color 200ms ease, background 200ms ease; }
.movement-card { transition: transform var(--dur-fast) var(--ease-out-strong), border-color 200ms ease, background 200ms ease, color 200ms ease; }
.row-action { transition: transform var(--dur-fast) var(--ease-out-strong), background var(--dur-fast) ease; }
.btn:active, .chip:active, .mode-card:active, .movement-card:active { transform: scale(0.97); }
.row-action:active { transform: scale(0.985); } /* fila de ancho completo: menos escala para no deformar el grupo */
.btn:disabled:active, .btn[disabled]:active { transform: none; }

/* ---------- 4. Autenticacion ---------- */
.auth-screen {
  background:
    radial-gradient(120% 46% at 50% -10%, color-mix(in srgb, var(--performance-blue) 11%, transparent) 0%, transparent 64%),
    var(--surface-0);
}
/* centrado vertical en pantallas altas; el contenido largo simplemente hace scroll */
.auth-screen .auth-pad {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--sp-8) + env(safe-area-inset-top)) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom));
}
#screen-auth-forgot .auth-pad { justify-content: flex-start; } /* lleva boton Atras arriba */
/* fuera de auth-mode (p. ej. enlace de recuperacion con sesion ya abierta) el dock flotante esta visible: dejar su hueco */
.phone:not(.auth-mode) .auth-screen .auth-pad { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.auth-pad-center { text-align: center; }

.auth-logo { gap: var(--sp-2); margin-bottom: var(--sp-8); color: var(--text-1); }
.auth-pad-center .auth-logo { justify-content: center; }
.auth-screen h1.app-title { margin-bottom: var(--sp-6); }
.auth-screen .app-title + .auth-lead { margin-top: calc(var(--sp-3) * -1); }
.auth-screen .greet-cap { color: var(--text-3); }
.auth-screen .wiz-top { margin-bottom: var(--sp-6); }
.auth-screen .auth-lead { font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); margin-bottom: var(--sp-6); }
.auth-screen .auth-lead b { color: var(--text-1); overflow-wrap: anywhere; }

.auth-mark {
  display: block; box-sizing: border-box;
  width: 80px; height: 80px; padding: var(--sp-4);
  margin: 0 auto var(--sp-6);
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--inner-glow), var(--shadow-1);
}

/* campos: 52 px, foco visible con anillo azul */
.auth-screen .field { margin-bottom: var(--sp-4); }
.auth-screen .field label { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--sp-2); }
.auth-screen .field input {
  min-height: 52px;
  padding: 0 var(--sp-4);
  font-size: max(16px, var(--fs-body)); /* 16 px: evita el zoom automatico de iOS al enfocar */
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.auth-screen .field input::placeholder { color: var(--text-3); }
.auth-screen .field input:focus,
.auth-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);
}
.auth-screen .field-hint { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-3); margin: calc(var(--sp-2) * -1) 0 var(--sp-4); }

/* mensajes de error / ok con icono */
.auth-banner-error, .auth-banner-ok {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  text-align: left; line-height: 1.5;
}
.auth-banner-error::before, .auth-banner-ok::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: var(--banner-icon) center / contain no-repeat;
  mask: var(--banner-icon) center / contain no-repeat;
}
.auth-banner-error { --banner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.75V8.5M8 11h.01'/%3E%3C/svg%3E"); }
.auth-banner-ok { --banner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M5.25 8.25 7.25 10.25 10.75 6'/%3E%3C/svg%3E"); }
.auth-pad-center .auth-banner-error, .auth-pad-center .auth-banner-ok { justify-content: center; text-align: center; }

/* botones de 52 px (misma altura que los campos) */
.auth-screen .btn, .btn-google { min-height: 52px; }
.auth-screen .btn { display: flex; } /* en bloque: sin hueco de linea bajo el boton */
.auth-screen .btn[hidden] { display: none; }
.auth-screen form .btn { margin-top: var(--sp-2); }
#resendBtn { margin-bottom: 0; }
/* formularios enviando (setFormBusy / btn.disabled): el estado debe verse */
.auth-screen .btn:disabled, #screen-mfa-enroll .btn:disabled, #screen-admin-gate .btn:disabled, #screen-account .btn:disabled { opacity: 0.55; cursor: default; }
.auth-screen .btn:disabled:active, #screen-mfa-enroll .btn:disabled:active, #screen-admin-gate .btn:disabled:active, #screen-account .btn:disabled:active { transform: none; }
.auth-screen .field input:disabled { opacity: 0.6; cursor: default; }
/* 2FA y confirmacion de admin comparten formulario con auth: mismo espaciado del boton y 16 px (sin zoom de iOS) */
#screen-mfa-enroll form .btn, #screen-admin-gate form .btn { margin-top: var(--sp-2); }
#screen-mfa-enroll .field input, #screen-admin-gate .field input { font-size: max(16px, var(--fs-body)); }

/* Google: mismo peso que el primario, en superficie sobria */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  color: var(--text-1);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out-strong), background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.btn-google:active { transform: scale(0.97); background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .btn-google:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--bone-white) 28%, transparent); }
}

/* separador "o" */
.auth-divider { gap: var(--sp-4); margin: var(--sp-5) 0; color: var(--text-3); font-size: var(--fs-sm); }
.auth-divider::before, .auth-divider::after { background: var(--hairline-strong); }

/* enlaces: 44 px de alto, texto azul aclarado (AA) */
.auth-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit); min-height: var(--hit); padding: 0 var(--sp-1);
  color: var(--performance-blue-text);
}
.auth-link-right { display: flex; width: fit-content; margin: calc(var(--sp-3) * -1) 0 var(--sp-1) auto; padding: 0 var(--sp-2); }
.auth-switch {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: var(--sp-1);
  margin-top: var(--sp-4);
  color: var(--text-3);
}

/* ---------- 5. Cuenta, 2FA y admin: valores fijos -> tokens ---------- */
.card-cap.acc-cap { color: var(--text-3); }
.acc-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.acc-sub { margin: var(--sp-1) 0 0; }
.acc-sub-lg { margin-top: var(--sp-3); }
.acc-note { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); margin: var(--sp-3) 0 0; }
.acc-note-alert { color: var(--coral-text); margin: 0 0 var(--sp-3); }
.acc-danger-confirm { margin-top: var(--sp-3); }
.btn-danger { background: var(--module-advertencia); color: var(--obsidian-black); }
.mfa-qr-card { text-align: center; padding: var(--sp-5); }
.mfa-qr { width: 180px; height: 180px; padding: var(--sp-2); border-radius: var(--r-md); background: var(--bone-white); }
.mfa-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); letter-spacing: 0.05em; overflow-wrap: anywhere; color: var(--performance-blue-text); }
.admin-hero-num { font-size: var(--fs-title); } /* 3 tiles en 312 px: 30 px desbordaria con 4 digitos */
.admin-delete-btn { padding: 0 var(--sp-3); }

/* ---------- 6. Recuperacion ---------- */
.screen-recovery {
  background:
    radial-gradient(110% 40% at 50% -6%, color-mix(in srgb, var(--recovery-teal) 9%, transparent), transparent 66%),
    var(--surface-recovery);
}
.recovery-hero { padding: calc(var(--sp-10) + env(safe-area-inset-top)) var(--sp-5) var(--sp-6); }
.recovery-hero .breath-ring { display: block; margin: 0 auto var(--sp-6); }
.recovery-hero h2 { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--sp-2); color: var(--text-1); }
.recovery-hero p { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); max-width: 30ch; margin: 0 auto; }
.recovery-list { padding-top: 0; }
.recovery-list .group { background: var(--surface-2); margin-bottom: var(--sp-4); }
.rec-row { gap: var(--sp-4); }
.rec-row .row-title { line-height: 1.3; }
.rec-row .r-min { color: var(--teal-text); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.btn-recovery {
  background: var(--recovery-teal); color: var(--obsidian-black);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bone-white) 25%, transparent), 0 8px 22px color-mix(in srgb, var(--recovery-teal) 22%, transparent);
}

/* ---------- 7. Bienvenida ---------- */
.welcome-pad { padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.welcome-card {
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-6) var(--sp-6);
  border-color: var(--hairline-strong);
  box-shadow: var(--inner-glow), var(--shadow-2);
  animation: riseIn var(--dur-slow) var(--ease-out-strong) backwards; /* cada paso se re-renderiza: entra con suavidad */
}
.welcome-icon { width: 56px; height: 56px; border-radius: var(--r-md); margin-bottom: var(--sp-6); }
.welcome-dots { gap: var(--sp-2); margin-bottom: var(--sp-5); }
.welcome-dots i { width: 16px; transition: background var(--dur-base) ease, width var(--dur-base) var(--ease-out-strong); }
.welcome-dots i.active { width: 32px; }
.welcome-card .greet-cap { color: var(--text-3); }
.welcome-card h1.app-title { font-size: var(--fs-screen); line-height: 1.15; margin-bottom: var(--sp-3); }
.welcome-card .auth-lead { color: var(--text-2); line-height: 1.6; margin-bottom: var(--sp-8); }
.welcome-card .btn + .btn { margin-top: var(--sp-3); }
.welcome-types { gap: 0; margin-bottom: var(--sp-8); }
.welcome-card .welcome-types.group { background: var(--surface-2); }
.welcome-type-row { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
.welcome-type-row .row-title { line-height: 1.4; }
.welcome-type-row .row-sub { color: var(--text-2); }
.welcome-type-dot { margin-top: 6px; }

/* ---------- 8. prefers-reduced-motion: UN solo bloque, al final ----------
   Apaga toda animacion y transicion, incluidas las de ::before/::after
   (el selector * no las cubre): glow del hero, respiro del score, esqueletos,
   halos, arco vacio, parpadeo REC, latido de articulaciones, etc.
   Quedan solo cambios de estado instantaneos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* estados finales de animaciones con fill-mode "forwards" (sin animar se quedarian ocultos) */
  .empty-arc path { stroke-dashoffset: 0; }
  .empty-arc circle { opacity: 1; }
  .card-hero::before { opacity: 0.85; }
  /* la guia de respiracion es funcional: solo opacidad lenta, sin escala ni desplazamiento */
  .breath-circle { animation: breatheFade 8s ease-in-out infinite !important; }
}

/* ---- ajustes tras la fusión (verificados en navegador) ---- */
/* campos numéricos del timer: altura táctil de 44 px y sin zoom automático en iOS */
.timer-num-input { min-height: 44px; font-size: max(16px, var(--fs-body)); }
/* azul de marca aclarado para texto pequeño: contraste AA sobre la tarjeta */
#screen-pro .card-cap { color: color-mix(in srgb, var(--performance-blue) 66%, var(--bone-white)) !important; }
/* etiqueta "Pro" en lima: fondo más tenue para llegar a 4,5:1 */
.admin-badge-pro { background: rgba(199, 243, 107, 0.1); }
/* los botones de icono del timer quedan por encima del número superpuesto: su zona táctil de 44 px es completa */
.timer-display-card .timer-fs-btn { z-index: 2; }

/* botón primario: azul de marca ~10% más profundo para que el texto blanco llegue a AA (4,8:1 en el tono más claro) */
.btn-blue {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--performance-blue) 92%, black) 0%,
    color-mix(in srgb, var(--performance-blue) 84%, black) 100%);
}