/* ============================================================
   POLIMATÍAS — piel "Expediente Abierto"
   Traslada el sistema visual del juego de ensayos: violeta tinta,
   los tres resaltadores de la cartuchera, la hoja de papel rayada
   y los botones con sombra dura.

   Se activa sola cuando el panel entra en escena: la app pone
   data-piel="expediente" en el <html> al terminar la intro y las
   preguntas del inicio. Antes de eso, todo se ve como siempre.

   Ningún selector nuevo: solo se repintan las piezas que ya
   existen. No cambia una sola función.
   ============================================================ */

html[data-piel="expediente"]{
  /* --- La paleta de Expediente Abierto --- */
  --tinta:#16122B;
  --tinta-2:#221C3D;
  --tinta-3:#2E2752;
  --fluo-sol:#FFD84D;
  --fluo-rosa:#FF4F9A;
  --fluo-agua:#46E0C4;

  /* Se remapean los tokens que ya usa Polimatías: con esto solo,
     se repinta casi toda la app sin tocar ningún componente. */
  --roca:#16122B;
  --roca-2:#221C3D;
  --roca-3:#2E2752;
  --borde:#2E2752;
  --tiza:#EFEAFB;
  --tiza-2:#A79BC9;
  --rio:#46E0C4;          /* el acento principal pasa a verde agua */
  --rio-hondo:#2BB69C;
  --barda:#FFD84D;        /* el ocre pasa a resaltador amarillo */
  --pehuen:#46E0C4;
  --lava:#FF7A5C;
  --papel:#F4EEE1;

  --sombra:0 18px 40px rgba(8,4,26,.45);
  --cuerpo:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cita:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",monospace;

  /* Qué tan opaco es el velo sobre el tapiz de fondo. Si la imagen
     de portada es clara (verde claro), hace falta velo fuerte para
     que el texto blanco se siga leyendo. Subilo o bajalo acá. */
  --velo-tapiz:.86;
}

/* ---------- El tapiz de fondo ----------
   Acepta dos nombres, en este orden: img/fondo.jpg y, si ese no
   está, img/portada.jpg.

   Conviene usar fondo.jpg, porque portada.jpg es la miniatura que
   aparece cuando se comparte el link por WhatsApp: si la pisás con
   el fondo verde, el link se comparte con una imagen sin texto.
   Si ninguno de los dos existe, no pasa nada: queda el degradado
   violeta de siempre. */
.tapiz{
  position:fixed; inset:0; z-index:-2; display:none;
  background-image:var(--imagen-fondo, url("../img/fondo.jpg"));
  background-size:cover; background-position:center center;
  background-attachment:fixed;
}
.tapiz::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(22,18,43,calc(var(--velo-tapiz) - .10)) 0%,
    rgba(22,18,43,var(--velo-tapiz)) 55%,
    rgba(22,18,43,calc(var(--velo-tapiz) + .08)) 100%);
}
html[data-piel="expediente"] .tapiz{display:block}
/* Con tapiz, el body se vuelve transparente para que la imagen se
   vea. El color de base pasa al <html>: si no, el lienzo de la
   página queda blanco y se ve una franja al hacer scroll con
   rebote en el celular. */
html[data-piel="expediente"]{background:#16122B}
html[data-piel="expediente"] body{background:transparent}
html[data-piel="expediente"] body::before{
  background:
    radial-gradient(1100px 600px at 82% -12%, rgba(255,79,154,.16), transparent 62%),
    radial-gradient(900px 520px at -8% 108%, rgba(70,224,196,.13), transparent 60%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px);
}

/* ---------- Tipografía ---------- */
html[data-piel="expediente"] body{
  font-family:var(--cuerpo);
  font-size:16.5px; line-height:1.6;
}
html[data-piel="expediente"] h1,
html[data-piel="expediente"] h2,
html[data-piel="expediente"] h3,
html[data-piel="expediente"] h4{letter-spacing:-.02em}

/* Los "puntos" y sellos pasan a monoespaciada, como en el juego */
html[data-piel="expediente"] .puntos,
html[data-piel="expediente"] .onb-paso,
html[data-piel="expediente"] .ap-sobre,
html[data-piel="expediente"] .foco-sobre,
html[data-piel="expediente"] .switch-sobre{
  font-family:var(--mono); font-weight:700;
  letter-spacing:.12em; font-size:.72rem;
}
html[data-piel="expediente"] .puntos{color:var(--fluo-sol)}

/* Las frases de la app en itálica de serif, como la "voz" */
html[data-piel="expediente"] .ap-cierre,
html[data-piel="expediente"] .devol .pregunta-motor,
html[data-piel="expediente"] .destacado{
  font-family:var(--cita); font-style:italic; font-weight:300;
  color:#F7E9C8; letter-spacing:0;
}

/* ---------- Botones con sombra dura ----------
   La firma más reconocible del juego: se hunden al apretarlos. */
html[data-piel="expediente"] .btn{
  font-weight:700; border-radius:999px;
  box-shadow:0 6px 0 rgba(0,0,0,.28);
  transition:transform .12s ease, filter .15s ease;
}
html[data-piel="expediente"] .btn:active{
  transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.28);
}
html[data-piel="expediente"] .btn-fuerte{
  background:var(--fluo-sol); color:#221200;
}
html[data-piel="expediente"] .btn-fuerte:disabled{
  /* Aunque esté apagado tiene que poder leerse: el estudiante
     necesita saber qué dice el botón antes de poder tocarlo. */
  background:#3A3363; color:#CFC6EA; box-shadow:none; opacity:1;
}
html[data-piel="expediente"] .btn-ocre{background:var(--fluo-rosa); color:#2A0016}
html[data-piel="expediente"] .btn-oro{
  background:var(--fluo-sol); color:#221200;
  box-shadow:0 6px 0 rgba(0,0,0,.28);
}
html[data-piel="expediente"] .btn-suave{
  background:transparent; color:var(--tiza);
  border:1.5px solid var(--tinta-3); box-shadow:none;
}
html[data-piel="expediente"] .btn-suave:active{transform:none}
html[data-piel="expediente"] .btn-chico{box-shadow:0 4px 0 rgba(0,0,0,.25)}
html[data-piel="expediente"] .btn-chico:active{box-shadow:0 1px 0 rgba(0,0,0,.25)}
html[data-piel="expediente"] .enlace{color:var(--fluo-agua)}
html[data-piel="expediente"] :focus-visible{
  outline:3px solid var(--fluo-agua); outline-offset:3px;
}

/* ---------- Tarjetas con borde de color a la izquierda ---------- */
html[data-piel="expediente"] .tarjeta{
  border-radius:16px;
  border-left:4px solid var(--fluo-agua);
}
html[data-piel="expediente"] .tarjeta-viva{
  border-left-color:var(--fluo-agua);
  box-shadow:0 0 0 1px rgba(70,224,196,.22);
}
html[data-piel="expediente"] .tarjeta-ocre{
  border-left:4px solid var(--fluo-sol);
  background:linear-gradient(140deg,#2C1F4E,#241C42);
}
html[data-piel="expediente"] .tarjeta-premium{
  border:1px solid var(--fluo-sol);
  border-left:4px solid var(--fluo-sol);
  background:linear-gradient(135deg,#3A2B08,#241C42);
  border-radius:16px;
}
html[data-piel="expediente"] .compartir-card{
  border:1px dashed var(--fluo-rosa);
  background:rgba(255,79,154,.08);
  border-radius:16px;
}

/* ---------- La hoja de papel ----------
   Rayada, con el margen rosa a la izquierda. */
html[data-piel="expediente"] .papel{
  background:var(--papel); color:#211B14;
  border-radius:6px 6px 10px 10px;
  box-shadow:var(--sombra);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(201,191,168,.55) 31px 32px);
  background-position:0 14px;
  padding-left:2.9rem; position:relative;
  font-family:var(--cita); font-style:italic; font-size:1.1rem;
}
html[data-piel="expediente"] .papel::before{
  content:""; position:absolute; left:2.1rem; top:0; bottom:0; width:1.5px;
  background:rgba(255,79,154,.35);
}
html[data-piel="expediente"] .papel small{color:#6E6354; font-family:var(--mono); font-style:normal}

/* ---------- Cabecera y barra de aura ---------- */
html[data-piel="expediente"] .cab{
  background:rgba(22,18,43,.92);
  border-bottom:1px solid var(--tinta-3);
}
html[data-piel="expediente"] .cab-avatar{
  border:2px solid var(--fluo-sol);
  background:rgba(255,216,77,.10);
  border-radius:12px;
}
html[data-piel="expediente"] .cab-racha{
  border:1px solid var(--tinta-3); background:var(--tinta-3);
}
html[data-piel="expediente"] .cab-nivel{font-family:var(--disp)}
html[data-piel="expediente"] .cab-aura{font-family:var(--mono); color:var(--fluo-sol)}
/* El río de aura toma el degradado rosa → amarillo del juego */
html[data-piel="expediente"] .rio{background:var(--tinta-3); border:0; height:6px}
html[data-piel="expediente"] .rio-int{
  background:linear-gradient(90deg,var(--fluo-rosa),var(--fluo-sol));
  background-size:200% 100%;
}

/* ---------- Navegación ---------- */
html[data-piel="expediente"] .nav{
  background:rgba(22,18,43,.95);
  border-color:var(--tinta-3);
}
html[data-piel="expediente"] .nav-b.activo{color:var(--fluo-sol)}

/* ---------- Baldosas y camino ---------- */
html[data-piel="expediente"] .baldosa{
  border-radius:16px;
  border-left:4px solid var(--fluo-agua);
}
html[data-piel="expediente"] .baldosa:hover{transform:translateX(3px)}
html[data-piel="expediente"] .baldosa b{font-weight:600}
html[data-piel="expediente"] .hito-card{
  border-radius:16px; border-left:4px solid var(--fluo-agua);
}
html[data-piel="expediente"] .hito.cerrado .hito-card{border-left-color:var(--tinta-3)}
html[data-piel="expediente"] .hito-emo,
html[data-piel="expediente"] .rap-modo-emo,
html[data-piel="expediente"] .foco-modo-emo,
html[data-piel="expediente"] .ap-rec-emo{
  border-radius:12px; background:var(--tinta-3); border:1px solid var(--tinta-3);
}
html[data-piel="expediente"] .camino::before{
  background:linear-gradient(180deg,var(--fluo-rosa),var(--fluo-sol));
}
html[data-piel="expediente"] .hito::before{background:var(--fluo-agua)}
html[data-piel="expediente"] .barrita i,
html[data-piel="expediente"] .dim-int,
html[data-piel="expediente"] .ap-punto.hecho,
html[data-piel="expediente"] .rap-barra i{
  background:linear-gradient(90deg,var(--fluo-rosa),var(--fluo-sol));
}
html[data-piel="expediente"] .onb-barra-int{
  background:linear-gradient(90deg,var(--fluo-rosa),var(--fluo-sol));
}

/* ---------- Opciones y respuestas ---------- */
html[data-piel="expediente"] .opcion,
html[data-piel="expediente"] .resp button,
html[data-piel="expediente"] .rap-op,
html[data-piel="expediente"] .ap-op,
html[data-piel="expediente"] .ayuda-item{
  background:#1B1536; border:1.5px solid var(--tinta-3); border-radius:14px;
}
html[data-piel="expediente"] .opcion:hover,
html[data-piel="expediente"] .resp button:hover,
html[data-piel="expediente"] .rap-op:hover:not(:disabled),
html[data-piel="expediente"] .ap-op:hover{border-color:var(--suave,#A79BC9)}
html[data-piel="expediente"] .resp button.correcta,
html[data-piel="expediente"] .rap-op.bien{
  border-color:var(--fluo-agua); background:rgba(70,224,196,.12);
}
html[data-piel="expediente"] .resp button.incorrecta,
html[data-piel="expediente"] .rap-op.mal{
  border-color:var(--lava); background:rgba(255,122,92,.12);
}
html[data-piel="expediente"] .opcion.sel,
html[data-piel="expediente"] .chip.sel{
  border-color:var(--fluo-agua); background:rgba(70,224,196,.14);
}

/* ---------- Campos de escritura ---------- */
html[data-piel="expediente"] textarea,
html[data-piel="expediente"] input[type=text],
html[data-piel="expediente"] input[type=number],
html[data-piel="expediente"] input[type=date],
html[data-piel="expediente"] select{
  background:#191331; border:1.5px solid var(--tinta-3); border-radius:12px;
  font-family:var(--cuerpo);
}
html[data-piel="expediente"] textarea:focus,
html[data-piel="expediente"] input:focus,
html[data-piel="expediente"] select:focus{
  outline:none; border-color:var(--fluo-agua);
}

/* ---------- Capas y avisos ---------- */
html[data-piel="expediente"] .capa{background:rgba(10,6,26,.82)}
html[data-piel="expediente"] .capa-caja{
  border-radius:26px; border:1px solid var(--tinta-3);
}
html[data-piel="expediente"] .tostada{
  background:var(--fluo-sol); color:#231400;
  border:0; font-weight:700;
}
html[data-piel="expediente"] .explic,
html[data-piel="expediente"] .rap-exp{
  border-left:3px solid var(--fluo-rosa);
  background:rgba(255,79,154,.09);
  border-radius:0 12px 12px 0;
}
html[data-piel="expediente"] .devol{
  border:1px solid var(--tinta-3); background:#191331; border-radius:16px;
}
html[data-piel="expediente"] .chip,
html[data-piel="expediente"] .ap-chip{
  background:var(--tinta-3); border:0; border-radius:999px;
  /* Al sacarles el borde quedaban de 31px: demasiado chicos para
     el dedo. Se compensa con altura mínima. */
  min-height:44px; display:inline-flex; align-items:center;
  padding:6px 14px;
}

/* ---------- Marca de resaltador ----------
   Se puede usar en cualquier texto: <span class="marca">…</span> */
html[data-piel="expediente"] .marca{
  background:linear-gradient(180deg,transparent 55%, rgba(255,216,77,.42) 55%);
  padding:0 .12em;
}
html[data-piel="expediente"] .marca.rosa{background:linear-gradient(180deg,transparent 55%, rgba(255,79,154,.42) 55%)}
html[data-piel="expediente"] .marca.agua{background:linear-gradient(180deg,transparent 55%, rgba(70,224,196,.40) 55%)}

/* ---------- Piezas propias de Polimatías, ajustadas ---------- */
/* El switch del hiperfoco conserva su función y su animación:
   solo cambia el color del neón. */
html[data-piel="expediente"] .switch.encendido .switch-riel{
  background:linear-gradient(100deg,rgba(70,224,196,.30),rgba(255,216,77,.26));
  border-color:var(--fluo-agua);
  box-shadow:0 0 0 1px rgba(70,224,196,.45), 0 0 32px rgba(70,224,196,.55), 0 0 70px rgba(255,216,77,.28);
}
html[data-piel="expediente"] .switch.encendido .switch-bola{
  background:linear-gradient(160deg,#EAFFFB,#9FE8DD);
  box-shadow:0 0 20px rgba(70,224,196,.85), 0 3px 10px rgba(0,0,0,.4);
}
html[data-piel="expediente"] .anillo-int{stroke:var(--fluo-agua)}
html[data-piel="expediente"] .en-descanso .anillo-int{stroke:var(--fluo-sol)}
html[data-piel="expediente"] .anillo-base{stroke:#1B1536}
html[data-piel="expediente"] .foco-reloj{font-family:var(--disp)}

/* Las formas geométricas de la cátedra toman los tres resaltadores */
html[data-piel="expediente"] .ap-f1{background:var(--fluo-rosa)}
html[data-piel="expediente"] .ap-f2{background:var(--fluo-sol)}
html[data-piel="expediente"] .ap-f3{background:var(--fluo-agua)}
html[data-piel="expediente"] .ap-destacado-formas i:nth-child(1){background:var(--fluo-rosa)}
html[data-piel="expediente"] .ap-destacado-formas i:nth-child(2){background:var(--fluo-sol)}
html[data-piel="expediente"] .ap-destacado-formas i:nth-child(3){background:var(--fluo-agua)}
html[data-piel="expediente"] .ap-pregunta,
html[data-piel="expediente"] .ap-respuesta{
  border-radius:20px; border-color:var(--fluo-agua);
}

/* Vidas del modo rápido en rosa resaltador */
html[data-piel="expediente"] .rap-vidas{color:var(--fluo-rosa)}
html[data-piel="expediente"] .rap-combo{color:var(--fluo-sol)}
html[data-piel="expediente"] .rap-resultado{color:var(--fluo-sol); font-family:var(--disp)}

/* Sello del reto de método y recompensas */
html[data-piel="expediente"] .sello-caja{
  border:1.5px solid var(--fluo-sol);
  background:linear-gradient(135deg,#4A3708,#2B1F04);
  box-shadow:0 0 46px rgba(255,216,77,.35);
}

/* Tablas */
html[data-piel="expediente"] .tabla th{color:var(--suave,#A79BC9); font-family:var(--mono); font-size:.72rem}
html[data-piel="expediente"] .tabla td{border-bottom:1px solid rgba(46,39,82,.55)}

/* Impresión: los informes para la familia salen en papel blanco */
@media print{
  html[data-piel="expediente"] .tapiz{display:none}
}

/* ---------- Aura, con la piel del expediente ---------- */
html[data-piel="expediente"] .aura-numero,
html[data-piel="expediente"] .aura-tarjeta-n{color:var(--fluo-sol)}
html[data-piel="expediente"] .aura-sello{font-family:var(--mono);color:var(--fluo-agua)}
html[data-piel="expediente"] .aura-video,
html[data-piel="expediente"] .rec-video{border-radius:20px;border-color:var(--tinta-3)}
html[data-piel="expediente"] .aura-fuente-barra i{
  background:linear-gradient(90deg,var(--fluo-rosa),var(--fluo-sol));
}
html[data-piel="expediente"] .aura-col.yo i{
  background:linear-gradient(180deg,var(--fluo-sol),var(--fluo-rosa));
}
html[data-piel="expediente"] .aura-col.yo small{color:var(--fluo-sol)}
html[data-piel="expediente"] .aura-col i{background:var(--tinta-3)}
html[data-piel="expediente"] .cod-aura{
  background:var(--fluo-sol);color:#231400;font-family:var(--mono);
}
html[data-piel="expediente"] .aura-tarjeta{
  border-left:4px solid var(--fluo-sol);border-radius:16px;
}

/* ============================================================
   TIPOGRAFÍA
   Space Grotesk es lindo pero es geométrico: en párrafos largos
   cansa y confunde algunas letras. Se reparte el trabajo:
     · Bricolage Grotesque  títulos
     · Instrument Sans      texto para leer (la mayor parte)
     · Space Grotesk        etiquetas y piezas de interfaz
     · Newsreader itálica   citas y frases
     · JetBrains Mono       sellos y números
   ============================================================ */
html[data-piel="expediente"]{
  --cuerpo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Space Grotesk",system-ui,sans-serif;
}
html[data-piel="expediente"] body{
  font-size:clamp(16px, 1rem + 0.15vw, 17.5px);
  line-height:1.62;
  letter-spacing:.002em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* Medida de lectura: más de 70 caracteres por renglón se lee peor,
   por más grande que sea la letra. */
html[data-piel="expediente"] .sub,
html[data-piel="expediente"] .tarjeta p,
html[data-piel="expediente"] .ap-enunciado,
html[data-piel="expediente"] .ap-devolucion{max-width:68ch}

/* Escala de títulos, con proporción constante */
html[data-piel="expediente"] h1{font-size:clamp(2rem,7vw,3rem);line-height:1.05;font-weight:800}
html[data-piel="expediente"] h2{font-size:clamp(1.5rem,5vw,2.05rem);line-height:1.14;font-weight:700}
html[data-piel="expediente"] h3{font-size:clamp(1.12rem,3.6vw,1.3rem);line-height:1.28;font-weight:700}
html[data-piel="expediente"] .titulo-mod h2{letter-spacing:-.025em}

/* Las piezas de interfaz mantienen Space Grotesk */
html[data-piel="expediente"] .btn,
html[data-piel="expediente"] .nav-b,
html[data-piel="expediente"] .chip,
html[data-piel="expediente"] .baldosa b,
html[data-piel="expediente"] .hito-txt b{font-family:var(--ui)}

/* Números siempre alineados: si no, las cifras bailan al cambiar */
html[data-piel="expediente"] .aura-numero,
html[data-piel="expediente"] .aura-tarjeta-n,
html[data-piel="expediente"] .foco-reloj,
html[data-piel="expediente"] .reloj,
html[data-piel="expediente"] .rap-resultado,
html[data-piel="expediente"] .tabla td{font-variant-numeric:tabular-nums}

/* Textos secundarios: un punto más grandes que antes, que estaban
   al límite de lo cómodo en un celular */
html[data-piel="expediente"] .tenue{font-size:.95rem;line-height:1.55}
html[data-piel="expediente"] .baldosa small,
html[data-piel="expediente"] .hito-txt small{font-size:.89rem;line-height:1.4}

/* El anillo, con el neón de los resaltadores */
html[data-piel="expediente"] .anillo-caja{
  background:conic-gradient(var(--fluo-sol) calc(var(--p,0)*1%), rgba(255,255,255,.08) 0);
  box-shadow:0 0 20px rgba(255,216,77,.38), inset 0 0 14px rgba(255,216,77,.14);
}
html[data-piel="expediente"] .anillo-caja::before{background:var(--tinta-2)}
html[data-piel="expediente"] .anillo-caja b{color:var(--fluo-sol)}
html[data-piel="expediente"] .anillo-total{color:var(--fluo-sol)}
html[data-piel="expediente"] .anillo-panel{border-left:4px solid var(--fluo-sol);border-radius:16px}
html[data-piel="expediente"] .anillo-hoy{background:var(--tinta-3)}

html[data-piel="expediente"] .anillo-mas{color:var(--fluo-agua)}
html[data-piel="expediente"] .foco-clip{border-color:var(--tinta-3);border-radius:18px}