/* Capas: el tema explícito del usuario siempre gana al del sistema */
@layer base, user;
/* =============================================================================
   Examen de Organogénesis v33 — "Apple Premium Medical"
   Sistema: -apple-system / SF. Superficies blancas, hair-lines, sombras suaves.
   Accesibilidad AA: contraste, focus visible, prefers-reduced-motion, touch 44px.
   ============================================================================= */

:root {
  /* paleta institucional */
  --green-deep: #1F5147;
  --teal: #2E9AA6;
  --navy: #0B2545;
  --aqua: #3FB4C9;
  --green-accent: #30D158;
  --blue-accent: #0A84FF;

  /* superficies y texto (modo claro) */
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #FBFBFD;
  --hairline: rgba(0,0,0,0.1);
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #86868B;
  --danger: #FF3B30;
  --ok: #34C759;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Tema explícito: [data-theme="dark"] gana sobre el sistema; "auto" = sistema */
:root[data-theme="dark"], html[data-theme="dark"] {
  --bg: #0C0C0D; --surface: #1C1C1E; --surface-2: #2C2C2E;
  --hairline: rgba(255,255,255,0.12);
  --text: #F5F5F7; --text-2: #AEAEB2; --text-3: #8E8E93;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  color-scheme: dark;
}


@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C0C0D;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --hairline: rgba(255,255,255,0.12);
    --text: #F5F5F7;
    --text-2: #AEAEB2;
    --text-3: #8E8E93;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* focus visible accesible */
:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 2px; border-radius: 6px; }

a { color: var(--blue-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 860px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.site-header .inner {
  max-width: 860px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
}
.site-header .brands { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.site-header img.logo { height: 34px; width: auto; display: block; }
.site-header .divider { width: 1px; height: 34px; background: var(--hairline); }
@media (max-width: 640px) {
  .site-header .brands img.logo:last-child { display: none; }
  .site-header .divider { display: none; }
}

/* ---------- hero / portada ---------- */
.hero { padding: 64px 0 40px; text-align: center; }
.hero .kicker {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal); font-weight: 600; font-size: 13px; letter-spacing: 0.4px;
  margin-bottom: 20px;
}
.hero h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.hero h1 .accent { color: var(--teal); }
.hero .subtitle { color: var(--text-2); font-size: 18px; max-width: 620px; margin: 0 auto 28px; }

/* frase inspiradora rotativa */
.quotes-wrap {
  max-width: 640px; margin: 0 auto 36px; min-height: 88px;
  display: flex; align-items: center; justify-content: center;
}
.quote {
  font-size: 19px; font-style: italic; color: var(--text-2);
  transition: opacity 0.5s var(--spring), transform 0.5s var(--spring);
}
.quote .author { display: block; font-style: normal; font-size: 14px; color: var(--text-3); margin-top: 8px; font-weight: 500; }

/* ---------- tarjetas ---------- */
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 28px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.card .hint { color: var(--text-2); font-size: 14px; margin: 0 0 20px; }

/* ---------- formularios ---------- */
.field { margin-bottom: 18px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
input[type=text], input[type=password] {
  width: 100%; padding: 13px 16px; font-size: 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font);
}
input[type=text]:focus, input[type=password]:focus {
  border-color: var(--blue-accent); outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-accent) 20%, transparent);
}
.field-err { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 18px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.18s var(--spring), opacity 0.18s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--green-deep) 88%, #000); }
.btn-accent { background: var(--blue-accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: color-mix(in srgb, var(--blue-accent) 88%, #000); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--hairline); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--hairline); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- área de examen ---------- */
.exam-topbar {
  position: sticky; top: 0; z-index: 15;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.exam-topbar .inner {
  max-width: 860px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
}
.timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px;
  margin-left: auto; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--hairline);
  padding: 6px 14px; border-radius: 999px;
}
.timer.warn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.progress { font-size: 14px; color: var(--text-2); }

.q-card { margin-bottom: 18px; }
.q-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.badge {
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-2);
}
.vignette { font-size: 17px; line-height: 1.6; margin: 0 0 20px; }

/* opciones */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface);
  cursor: pointer; text-align: left; width: 100%;
  font-family: var(--font); font-size: 16px; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s var(--spring);
  min-height: 56px;
}
.option:hover { border-color: var(--aqua); }
.option:active { transform: scale(0.99); }
.option .key {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.option.selected { border-color: var(--blue-accent); background: color-mix(in srgb, var(--blue-accent) 7%, var(--surface)); }
.option.selected .key { background: var(--blue-accent); color: #fff; border-color: var(--blue-accent); }
.option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.option.correct .key { background: var(--ok); color: #fff; border-color: var(--ok); }
.option.incorrect { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.option.incorrect .key { background: var(--danger); color: #fff; border-color: var(--danger); }

/* feedback */
.rationale {
  margin-top: 20px; padding: 20px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--hairline); font-size: 15px; line-height: 1.65;
}
.rationale .verdict { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rationale .lo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 14px; }
.rationale .ref { margin-top: 8px; color: var(--text-3); font-size: 13px; }

/* navegación del examen */
.exam-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.marker { display: flex; align-items: center; gap: 8px; }

/* ---------- pantalla de resultado ---------- */
.result-hero { text-align: center; padding: 60px 0 20px; }
.score-ring {
  width: 180px; height: 180px; border-radius: 50%;
  margin: 0 auto 24px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--teal) calc(var(--pct) * 1%), var(--surface-2) 0);
  box-shadow: var(--shadow-lg);
}
.score-ring .inner {
  width: 148px; height: 148px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-ring .val { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; }
.score-ring .lbl { color: var(--text-2); font-size: 13px; }

.final-quote { font-size: 20px; font-style: italic; color: var(--text-2); text-align: center; margin: 12px 0 28px; }
.final-quote .author { display: block; font-size: 14px; font-style: normal; color: var(--text-3); margin-top: 8px; }

/* breakdown por sistema */
.breakdown { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.bd-item { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 14px; }
.bd-item .name { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.bd-item .bar { height: 8px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.bd-item .fill { height: 100%; background: var(--teal); border-radius: 4px; }
.bd-item .num { font-size: 15px; font-weight: 700; margin-top: 6px; }

/* explicaciones por ítem */
.review-item { margin-bottom: 16px; }
.review-item .q-num { font-weight: 700; color: var(--teal); margin-bottom: 6px; }

/* ---------- utilidades y estado ---------- */
.hidden { display: none !important; }
.muted { color: var(--text-3); }
.center { text-align: center; }
.mt { margin-top: 20px; }
.status-banner {
  padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px;
  font-size: 15px; font-weight: 500;
}
.status-banner.error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.status-banner.info { background: color-mix(in srgb, var(--blue-accent) 10%, var(--surface)); color: var(--blue-accent); border: 1px solid color-mix(in srgb, var(--blue-accent) 30%, transparent); }

/* marca de agua (disuasión) */
/* Marca de agua: marca de identidad sutil, NUNCA sobre el texto de lectura.
   Vive en el borde inferior y encima de un degradado de protección. */
.watermark {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  padding: 14px 16px 10px;
  font-size: 11px; line-height: 1; color: var(--text-3);
  opacity: 0.55; pointer-events: none; text-align: right;
  font-variant-numeric: tabular-nums; user-select: none;
  background: linear-gradient(to top, var(--bg) 55%, transparent);
}

/* Logos: UNA sola variante clara + filtro de inversión en oscuro.
   Se evita duplicar <img> porque @media del sistema y [data-theme] compiten. */
.logo-btn { position: relative; }
:root[data-theme="dark"] .logo-grinker,
:root[data-theme="dark"] .logo-uro { filter: brightness(0) invert(1) opacity(0.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-grinker,
  :root:not([data-theme="light"]) .logo-uro { filter: brightness(0) invert(1) opacity(0.92); }
}
}

/* aria-live para cronómetro */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .quote { transition: none; }
}

/* admin */
table.matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
table.matrix th, table.matrix td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
table.matrix th { color: var(--text-2); font-weight: 600; }


/* Colchón inferior: ningún contenido queda bajo la marca de agua */
body { padding-bottom: 44px; }

/* Botón de tema: píldora de vidrio, 44px de toque */
.theme-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 20;
  height: 44px; min-width: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  color: var(--text-2); font: 600 13px/1 var(--font);
  cursor: pointer; transition: transform .18s var(--spring), color .18s;
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue-accent); outline-offset: 3px; }

@layer user {
  :root[data-theme="dark"] {
    --bg: #0C0C0D !important; --surface: #1C1C1E !important; --surface-2: #2C2C2E !important;
    --hairline: rgba(255,255,255,0.12) !important;
    --text: #F5F5F7 !important; --text-2: #AEAEB2 !important; --text-3: #8E8E93 !important;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4) !important;
    --shadow-md: 0 8px 24px rgba(0,0,0,0.5) !important;
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.6) !important;
    color-scheme: dark;
  }
  
  :root[data-theme="light"] {
    --bg: #F5F5F7 !important; --surface: #FFFFFF !important; --surface-2: #FBFBFD !important;
    --hairline: rgba(0,0,0,0.1) !important;
    --text: #1D1D1F !important; --text-2: #6E6E73 !important; --text-3: #86868B !important;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04) !important;
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06) !important;
    color-scheme: light;
  }
  
}

/* ---------- Correcciones de producción (v33.5) ---------- */
/* El botón de tema no debe chocar con la cabecera ni perderse en el examen */
.site-header { padding-right: 76px; }
@media (max-width: 640px) { .site-header { padding-right: 72px; } }

/* Barra del examen: pegajosa y sin solaparse con la marca de agua */
.exam-bar {
  position: sticky; top: 0; z-index: 8;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--hairline);
}

/* Navegación inferior: pegada al fondo, con espacio para el pulgar */
.exam-nav {
  position: sticky; bottom: 0; z-index: 9;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.exam-nav button { flex: 1 1 auto; min-height: 48px; }
.exam-nav #btn-next { flex: 1 1 46%; }

/* Navegación del examen: dos botones simétricos y siempre visibles */
.exam-nav { flex-wrap: nowrap; }
.exam-nav .btn { min-width: 0; white-space: nowrap; }
.exam-nav #btn-prev { flex: 0 0 40%; }
.exam-nav #btn-next { flex: 1 1 60%; }
@media (max-width: 380px) { .exam-nav .btn { font-size: 14px; padding: 0 10px; } }