/* =====================================================================
   SIMULADOR — capa visual v2
   Se carga DESPUÉS de estilos.css y solo la pisa por encima.
   Si algo no gusta, se saca la línea del <link> en app.html y todo
   vuelve al aspecto anterior: no se borró nada.

   Criterio: la cáscara (fondo, cabecera, pestañas, acceso) toma el
   mismo lenguaje cinematográfico de la landing; la hoja de trabajo
   se queda en papel claro, porque ahí se leen textos jurídicos
   contra reloj y el fondo oscuro cansa la vista.
   ===================================================================== */

:root{
  --a2-display:"Fraunces","Source Serif Pro",Georgia,"Iowan Old Style",serif;
  --a2-sand:#C4BA9A;
  --a2-gold:#A9812E;
  --a2-ease:cubic-bezier(.22,.85,.3,1);
}

/* ---------------------------------------------------------------------
   1 · EL FONDO — la misma escena del hero de la landing, quieta
   --------------------------------------------------------------------- */
body.app{
  padding:34px 18px 80px;
  background:
    radial-gradient(120% 85% at 78% 4%,  rgba(169,129,46,.17) 0%, transparent 55%),
    radial-gradient(92% 72% at 8% 97%,   rgba(122,46,51,.24) 0%, transparent 60%),
    linear-gradient(168deg,#132030 0%,#0C1520 46%,#070C12 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* renglones finos, como un pliego */
body.app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,rgba(196,186,154,.06) 0 1px,transparent 1px 46px);
  mask-image:radial-gradient(85% 62% at 50% 26%,#000 18%,transparent 100%);
  -webkit-mask-image:radial-gradient(85% 62% at 50% 26%,#000 18%,transparent 100%);
}
body.app > .frame{position:relative;z-index:1;max-width:820px;}

/* ---------------------------------------------------------------------
   2 · CABECERA
   --------------------------------------------------------------------- */
header.masthead{
  padding:10px 2px 26px;
  border-bottom:1px solid rgba(196,186,154,.2);
  margin-bottom:26px;
}
.masthead .kicker{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--a2-sand);
  margin:0 0 16px;display:flex;align-items:center;gap:13px;
}
.masthead .kicker::before{
  content:"";height:1px;width:40px;background:var(--a2-gold);flex:none;
}
.masthead h1{
  font-family:var(--a2-display);
  font-size:clamp(23px,4.2vw,35px);font-weight:600;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 11px;
  color:var(--paper);max-width:20ch;
}
.masthead p{font-size:13.5px;color:rgba(242,236,221,.55);line-height:1.55;}

.licencia-badge{
  margin-top:16px;border-radius:6px;padding:5px 12px;
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--a2-sand);background:rgba(196,186,154,.09);
  border:1px solid rgba(196,186,154,.28);
}

/* ---------------------------------------------------------------------
   3 · PESTAÑAS
   --------------------------------------------------------------------- */
nav.tabs{gap:4px;}
nav.tabs button{
  font-size:13.5px;letter-spacing:.005em;
  background:rgba(242,236,221,.055);color:rgba(196,186,154,.82);
  border:1px solid rgba(196,186,154,.16);border-bottom:none;
  padding:12px 19px;border-radius:9px 9px 0 0;
  transition:background .25s var(--a2-ease),color .25s var(--a2-ease),transform .25s var(--a2-ease);
}
nav.tabs button:not(.active):hover{
  background:rgba(242,236,221,.13);color:var(--paper);transform:translateY(-2px);
}
nav.tabs button.active{
  background:var(--paper);color:var(--ink-2);
  border-color:transparent;
  box-shadow:inset 0 3px 0 var(--a2-gold);
}

/* ---------------------------------------------------------------------
   4 · LA HOJA
   --------------------------------------------------------------------- */
main.sheet{
  border-radius:0 12px 12px 12px;
  padding:38px 34px 40px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.62), 0 0 0 1px rgba(196,186,154,.1);
}

/* Cada vista entra con un desplazamiento corto. Se dispara sola porque
   el simulador reescribe el contenido de la hoja en cada pantalla.
   Va corta y con poco escalonamiento a propósito: en el simulacro esto
   se repite en cada una de las 100 preguntas, y si es lenta cansa. */
@media (prefers-reduced-motion:no-preference){
  main.sheet > *{animation:a2in .34s var(--a2-ease) both;}
  main.sheet > *:nth-child(1){animation-delay:0s;}
  main.sheet > *:nth-child(2){animation-delay:.04s;}
  main.sheet > *:nth-child(3){animation-delay:.07s;}
  main.sheet > *:nth-child(n+4){animation-delay:.1s;}
}
@keyframes a2in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}

/* ---------------------------------------------------------------------
   5 · PANTALLA DE ACCESO — es lo primero que ve el que compró
   --------------------------------------------------------------------- */
.gate-overlay{
  background:rgba(7,12,18,.93);
  backdrop-filter:saturate(130%) blur(9px);
  -webkit-backdrop-filter:saturate(130%) blur(9px);
}
.gate-card{
  max-width:400px;border-radius:14px;padding:38px 32px 32px;
  border-top:3px solid var(--a2-gold);
  box-shadow:0 44px 95px -22px rgba(0,0,0,.72);
}
@media (prefers-reduced-motion:no-preference){
  .gate-card{animation:a2gate .6s var(--a2-ease) both;}
}
@keyframes a2gate{
  from{opacity:0;transform:translateY(22px) scale(.97);}
  to{opacity:1;transform:none;}
}
/* Doble clase a propósito: .gate-card p de estilos.css le gana a una
   clase sola y le pisaría el color y el tamaño. */
.gate-card .gate-eyebrow{
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--a2-gold);
  margin:0 0 12px;
}
.gate-card h2{
  font-family:var(--a2-display);font-size:27px;font-weight:600;
  letter-spacing:-.018em;line-height:1.12;margin:0 0 10px;color:var(--ink-2);
}
.gate-card input{
  font-family:var(--mono);font-size:16.5px;letter-spacing:.14em;
  border-radius:8px;padding:14px 12px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.gate-card input:focus{
  border-color:var(--wine);box-shadow:0 0 0 3px rgba(122,46,51,.13);
}
.gate-card input::placeholder{letter-spacing:.1em;color:#B9AF93;}
.gate-foot{border-top:1px solid var(--paper-line);padding-top:14px;margin-top:20px;}

/* ---------------------------------------------------------------------
   6 · BOTONES
   --------------------------------------------------------------------- */
button.primary{
  border-radius:7px;padding:13px 24px;font-size:13.5px;
  box-shadow:0 8px 20px -10px rgba(122,46,51,.85);
  transition:background .22s var(--a2-ease),transform .22s var(--a2-ease),box-shadow .22s var(--a2-ease);
}
button.primary:hover:not(:disabled){
  transform:translateY(-2px);box-shadow:0 14px 27px -12px rgba(122,46,51,.9);
}
button.primary:disabled{box-shadow:none;transform:none;}
button.ghost{
  border-radius:7px;padding:11px 17px;
  transition:border-color .2s,color .2s,transform .2s,background .2s;
}
button.ghost:hover{transform:translateY(-1px);background:#fff;}
.sound-toggle{border-radius:7px;}
.back-link{transition:color .2s,transform .2s;}
.back-link:hover{transform:translateX(-3px);}

body.app button:focus-visible,
body.app a:focus-visible,
body.app input:focus-visible{outline:2px solid var(--a2-gold);outline-offset:3px;}

/* ---------------------------------------------------------------------
   7 · TÍTULOS Y TARJETAS DE LA HOJA
   --------------------------------------------------------------------- */
h2.section-title{
  font-family:var(--a2-display);font-size:27px;font-weight:600;
  letter-spacing:-.018em;line-height:1.14;color:var(--ink-2);margin:0 0 9px;
}
p.section-sub{font-size:14px;line-height:1.65;margin-bottom:24px;}

.module-card{
  border-radius:10px;padding:20px;
  transition:border-color .22s var(--a2-ease),transform .22s var(--a2-ease),
             box-shadow .22s var(--a2-ease),background .22s var(--a2-ease);
}
.module-card:hover{
  border-color:var(--a2-gold);background:#fff;transform:translateY(-3px);
  box-shadow:0 16px 32px -16px rgba(16,26,36,.38);
}
.module-card h3{font-family:var(--a2-display);font-size:19.5px;letter-spacing:-.01em;}
.module-card .seal{
  width:46px;height:46px;border-radius:11px;
  font-family:var(--a2-display);font-size:21px;font-weight:600;
}

.mode-card{
  border-radius:10px;padding:22px 20px;
  transition:border-color .22s var(--a2-ease),transform .22s var(--a2-ease),
             box-shadow .22s var(--a2-ease),background .22s var(--a2-ease);
}
.mode-card:hover{
  border-color:var(--a2-gold);background:#fff;transform:translateY(-3px);
  box-shadow:0 16px 32px -16px rgba(16,26,36,.38);
}
.mode-card h4{font-family:var(--a2-display);font-size:19.5px;letter-spacing:-.012em;}
.mode-card .badge{letter-spacing:.11em;padding:4px 10px;}

.tema-row{
  border-radius:8px;
  transition:border-color .2s,transform .2s var(--a2-ease),background .2s;
}
.tema-row:hover{border-color:var(--a2-gold);background:#fff;transform:translateX(3px);}
.tema-row .tnum{border-radius:7px;}

.rules-box{border-radius:0 8px 8px 0;padding:18px 20px;}
.rules-box h4{letter-spacing:.13em;}

/* ---------------------------------------------------------------------
   8 · PREGUNTAS, VEREDICTO Y NÚMEROS
   --------------------------------------------------------------------- */
.q-prompt{font-size:19px;line-height:1.5;}
.opt{
  border-radius:8px;padding:13px 15px;
  transition:border-color .18s,background .18s,transform .18s var(--a2-ease);
}
.opt:hover:not([disabled]){border-color:var(--a2-gold);background:#fff;transform:translateX(3px);}
.feedback-box{border-radius:0 6px 6px 0;}
.progress-bar{height:5px;border-radius:5px;}

.verdict{border-radius:12px;padding:26px 24px;}
.verdict .vtitle{letter-spacing:.17em;}
.verdict .vbig{
  font-family:var(--a2-display);font-size:46px;letter-spacing:-.03em;line-height:1.02;
}
.result-big{font-family:var(--a2-display);font-size:48px;letter-spacing:-.03em;}

.stat b{font-family:var(--a2-display);font-size:24px;letter-spacing:-.02em;}
.stat{letter-spacing:.09em;}

.typing-timer{
  font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.01em;
  border-radius:8px;padding:8px 16px;
}
.live-counter b{font-family:var(--a2-display);font-size:19px;}

/* ---------------------------------------------------------------------
   9 · SUPERFICIES DE TRABAJO
   --------------------------------------------------------------------- */
.passage-box{
  border-radius:9px;padding:16px 18px;font-size:15.5px;line-height:1.8;
  max-height:230px;
}
/* Modo examen: 12 renglones de 27.9px + los 32px de padding */
.passage-box.plano{max-height:367px;}
textarea.type-input{
  border-radius:9px;height:150px;font-size:15.5px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s;
}
textarea.type-input:focus{box-shadow:0 0 0 3px rgba(122,46,51,.1);}
.rev-box{border-radius:9px;}
.modo-aviso{border-radius:0 8px 8px 0;}

.bd-row .bd-bar,.bd-row .bd-bar i{border-radius:5px;}
.spark i{border-radius:2px;}
.hist-table th,.diff-table th{letter-spacing:.11em;}

/* ---------------------------------------------------------------------
   10 · MÓVIL
   --------------------------------------------------------------------- */
@media (max-width:560px){
  body.app{padding:20px 12px 60px;}
  main.sheet{padding:26px 20px 32px;border-radius:0 10px 10px 10px;}
  nav.tabs button{padding:10px 13px;font-size:12.5px;}
  .masthead h1{font-size:23px;}
  .gate-card{padding:32px 24px 28px;}
  /* En el celular, 12 renglones se comen la pantalla y el teclado tapa
     el cuadro de tipeo: el pasaje del modo examen va más bajo. */
  .passage-box.plano{max-height:250px;}
}