/* ============================================================
   Biomoléculas · Primer ciclo de Biología
   Sistema de color: cada familia de biomolécula toma el color
   del reactivo que la identifica en el laboratorio.
   ============================================================ */

:root{
  --tinta:#101A22;
  --tinta-2:#3A4A55;
  --tinta-3:#6B7A84;
  --papel:#ECEFEC;
  --tarjeta:#FFFFFF;
  --linea:#D5DCD8;
  --linea-2:#E7EBE8;
  --ok:#2E7D4F;
  --mal:#C0392B;

  /* reactivos */
  --r1:#0E7C86;  /* azul de bromotimol  -> agua y pH        */
  --r2:#2E3192;  /* lugol              -> glúcidos          */
  --r3:#C63C1E;  /* sudán III          -> lípidos           */
  --r4:#7B2D8E;  /* biuret             -> proteínas         */
  --r5:#2E7D4F;  /* verde de metilo    -> ácidos nucleicos  */
  --r6:#C21E62;  /* DCPIP              -> vitaminas         */

  --acento:var(--r1);

  --display:"Helvetica Neue",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --texto:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --r:10px;
  --sombra:0 1px 2px rgba(16,26,34,.06),0 8px 24px rgba(16,26,34,.05);
}

body[data-tema="1"]{--acento:var(--r1)}
body[data-tema="2"]{--acento:var(--r2)}
body[data-tema="3"]{--acento:var(--r3)}
body[data-tema="4"]{--acento:var(--r4)}
body[data-tema="5"]{--acento:var(--r5)}
body[data-tema="6"]{--acento:var(--r6)}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4,.display{font-family:var(--display);letter-spacing:-.02em;line-height:1.2}

a{color:var(--acento)}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-3);
}

/* ---------- cabecera ---------- */

.cabecera{
  background:var(--tinta);
  color:#fff;
  padding:20px 24px 18px;
  border-bottom:3px solid var(--acento);
  transition:border-color .3s;
}
.cabecera .marca{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
  max-width:1180px;
  margin:0 auto;
}
.cabecera h1{
  margin:0;
  font-size:26px;
  font-weight:800;
  text-transform:uppercase;
}
.cabecera .sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8FA3AD;
}
.cabecera .avance{
  margin-left:auto;
  font-family:var(--mono);
  font-size:12px;
  color:#B9C7CE;
  display:flex;
  align-items:center;
  gap:10px;
}
.barra-avance{
  width:110px;height:6px;border-radius:3px;background:#2A3A45;overflow:hidden;
}
.barra-avance span{display:block;height:100%;background:var(--acento);width:0;transition:width .4s}

/* ---------- disposición ---------- */

.envoltura{
  max-width:1180px;
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns:236px 1fr;
  gap:28px;
  align-items:start;
}
/* sin esto, un hijo ancho (tabla, rejilla) estira toda la columna */
.envoltura > *{min-width:0}
main{min-width:0}
p,li,td,th,b,span,summary{overflow-wrap:break-word}

/* ---------- la cadena (navegación de temas) ---------- */

.cadena{position:sticky;top:16px}
.cadena .rotulo{margin:0 0 12px 4px}
.cadena ol{list-style:none;margin:0;padding:0;position:relative}
.cadena ol::before{
  content:"";
  position:absolute;
  left:19px;top:18px;bottom:18px;
  width:2px;
  background:var(--linea);
}
.cadena li{position:relative;margin:0 0 4px}
.eslabon{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:8px;
  border:0;
  background:transparent;
  border-radius:var(--r);
  cursor:pointer;
  text-align:left;
  font-family:var(--display);
  font-size:14.5px;
  color:var(--tinta-2);
}
.eslabon:hover{background:#E2E7E3}
.eslabon .nodo{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  border:2px solid var(--linea);
  background:var(--papel);
  display:grid;place-items:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--tinta-3);
  transition:background .25s,border-color .25s,color .25s;
}
.eslabon[aria-current="true"]{background:var(--tarjeta);box-shadow:var(--sombra);color:var(--tinta);font-weight:600}
.eslabon[aria-current="true"] .nodo,
.eslabon.hecho .nodo{color:#fff;border-color:transparent}
li:nth-child(1) .eslabon[aria-current="true"] .nodo,li:nth-child(1) .eslabon.hecho .nodo{background:var(--r1)}
li:nth-child(2) .eslabon[aria-current="true"] .nodo,li:nth-child(2) .eslabon.hecho .nodo{background:var(--r2)}
li:nth-child(3) .eslabon[aria-current="true"] .nodo,li:nth-child(3) .eslabon.hecho .nodo{background:var(--r3)}
li:nth-child(4) .eslabon[aria-current="true"] .nodo,li:nth-child(4) .eslabon.hecho .nodo{background:var(--r4)}
li:nth-child(5) .eslabon[aria-current="true"] .nodo,li:nth-child(5) .eslabon.hecho .nodo{background:var(--r5)}
li:nth-child(6) .eslabon[aria-current="true"] .nodo,li:nth-child(6) .eslabon.hecho .nodo{background:var(--r6)}
.eslabon.hecho .nodo::after{content:"\2713"}
.eslabon.hecho .nodo{font-size:12px}
.eslabon.hecho .nodo span{display:none}

.reactivo{
  margin-top:18px;
  padding:12px 14px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--tarjeta);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--tinta-3);
}
.reactivo b{color:var(--acento);display:block;margin-bottom:4px;letter-spacing:.08em}

/* ---------- pestañas ---------- */

.pestanas{
  display:flex;gap:4px;
  background:var(--tarjeta);
  padding:5px;
  border-radius:var(--r);
  border:1px solid var(--linea);
  margin-bottom:20px;
}
.pestanas button{
  flex:1;
  border:0;background:transparent;
  padding:10px 8px;
  border-radius:7px;
  font-family:var(--display);
  font-size:14px;font-weight:600;
  color:var(--tinta-3);
  cursor:pointer;
}
.pestanas button[aria-selected="true"]{background:var(--acento);color:#fff}

/* ---------- tarjetas de contenido ---------- */

.hoja{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:28px 30px;
  box-shadow:var(--sombra);
}
.hoja + .hoja{margin-top:18px}

.titulo-tema{margin:6px 0 4px;font-size:31px;font-weight:800}
.entradilla{margin:0 0 22px;color:var(--tinta-2);font-size:17.5px}

.hoja h3{
  font-size:14px;text-transform:uppercase;letter-spacing:.08em;
  margin:26px 0 8px;padding-bottom:6px;
  border-bottom:2px solid var(--linea-2);
  color:var(--acento);
}
.hoja p{margin:0 0 12px}
.hoja ul{margin:0 0 12px;padding-left:20px}
.hoja li{margin-bottom:6px}

figure{margin:20px 0;text-align:center}
figure img{max-width:100%;height:auto;border:1px solid var(--linea);border-radius:var(--r);background:#fff}
figcaption{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);margin-top:8px}

.formula{font-family:var(--mono);font-size:15px;background:#F2F5F3;padding:2px 6px;border-radius:4px}

.tabla-caja{
  margin:14px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:8px;
}
.tabla{width:100%;border-collapse:collapse;margin:0;font-size:15.5px}
.tabla th,.tabla td{border:1px solid var(--linea);padding:8px 10px;text-align:left;vertical-align:top}
.tabla th{background:#F2F5F3;font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.05em}

.aplicado{
  border-left:4px solid var(--acento);
  background:#F7F9F8;
  padding:14px 18px;
  border-radius:0 var(--r) var(--r) 0;
  margin:18px 0;
}
.aplicado .eyebrow{color:var(--acento)}

.errores{counter-reset:e;list-style:none;padding:0}
.errores li{
  counter-increment:e;
  position:relative;
  padding:10px 0 10px 44px;
  border-top:1px solid var(--linea-2);
}
.errores li::before{
  content:"\00D7";
  position:absolute;left:0;top:9px;
  width:28px;height:28px;border-radius:50%;
  background:#FBEDEA;color:var(--mal);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;
}
.errores b{display:block}
.errores span{color:var(--tinta-2);font-size:16px}

/* ---------- ejercicios ---------- */

.grupo-titulo{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 4px;
}
.grupo-titulo h2{margin:0;font-size:20px}
.grupo-titulo .conteo{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3)}

.pregunta{
  border-top:1px solid var(--linea-2);
  padding:18px 0 4px;
}
.pregunta:first-of-type{border-top:0}
.enunciado{display:flex;gap:12px;margin-bottom:12px}
.num{
  font-family:var(--mono);font-size:12px;color:var(--acento);
  padding-top:4px;flex:0 0 auto;
}
.enunciado p{margin:0}

.opciones{display:grid;gap:8px}
.opcion{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--linea);
  border-radius:8px;
  padding:10px 12px;
  cursor:pointer;
  background:var(--tarjeta);
  font-size:16px;
}
.opcion:hover{border-color:var(--acento)}
.opcion input{margin-top:5px;accent-color:var(--acento)}
.opcion.correcta{border-color:var(--ok);background:#F1F8F3}
.opcion.incorrecta{border-color:var(--mal);background:#FCF2F0}
.opcion.bloqueada{cursor:default}

.retro{
  margin:10px 0 0;
  font-size:15px;
  border-left:3px solid var(--linea);
  padding:2px 0 2px 12px;
  color:var(--tinta-2);
}
.retro.bien{border-color:var(--ok)}
.retro.mal{border-color:var(--mal)}

.vf{display:flex;gap:8px;margin-top:4px}
.btn-vf{
  font-family:var(--display);font-weight:600;font-size:14px;
  border:1px solid var(--linea);background:var(--tarjeta);
  padding:8px 20px;border-radius:8px;cursor:pointer;color:var(--tinta-2);
}
.btn-vf:hover{border-color:var(--acento)}
.btn-vf.correcta{border-color:var(--ok);background:#F1F8F3;color:var(--ok)}
.btn-vf.incorrecta{border-color:var(--mal);background:#FCF2F0;color:var(--mal)}

.empareja{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.col-t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 10px}
.par{
  border:1px solid var(--linea);border-radius:8px;padding:10px 12px;
  font-size:15.5px;background:var(--tarjeta);
}
.par select{
  display:block;margin-top:6px;width:100%;
  font-family:var(--texto);font-size:15px;
  padding:6px;border:1px solid var(--linea);border-radius:6px;background:#fff;
}
.par.correcta{border-color:var(--ok);background:#F1F8F3}
.par.incorrecta{border-color:var(--mal);background:#FCF2F0}

.boton{
  font-family:var(--display);font-weight:600;font-size:14px;
  background:var(--acento);color:#fff;border:0;
  padding:10px 18px;border-radius:8px;cursor:pointer;
}
.boton.plano{background:transparent;color:var(--acento);border:1px solid var(--linea)}
.boton:hover{filter:brightness(1.08)}

.solucion{margin-top:10px}
.solucion summary{
  cursor:pointer;font-family:var(--display);font-weight:600;font-size:14px;color:var(--acento);
}
.solucion .cuerpo{
  margin-top:10px;padding:12px 16px;background:#F7F9F8;border-radius:8px;font-size:16px;
}
.solucion ol{margin:0;padding-left:20px}

/* ---------- examen ---------- */

.marcador{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--linea);border-radius:var(--r);
  padding:16px 20px;background:#F7F9F8;margin-bottom:18px;
}
.nota{font-family:var(--display);font-size:34px;font-weight:800;line-height:1}
.marcador .detalle{font-family:var(--mono);font-size:12px;color:var(--tinta-3)}
.marcador .acciones{margin-left:auto;display:flex;gap:8px}

.oculto{display:none}

.pie{
  max-width:1180px;margin:0 auto;padding:8px 24px 40px;
  font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.pie button{font-family:var(--mono);font-size:11.5px}

:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ---------- tabletas ---------- */
@media (max-width:1024px){
  .envoltura{grid-template-columns:200px 1fr;gap:20px;padding:20px}
  .hoja{padding:24px 22px}
}

/* ---------- móvil: una sola columna ---------- */
@media (max-width:860px){
  html,body{overflow-x:clip}
  body{font-size:16px}

  .cabecera{padding:16px 18px 14px}
  .cabecera .marca{gap:6px 12px}
  .cabecera h1{font-size:22px;flex:0 0 auto}
  .cabecera .avance{margin-left:0;width:100%;justify-content:space-between}
  .barra-avance{flex:1;max-width:none;margin-left:12px}

  .envoltura{grid-template-columns:1fr;padding:16px;gap:16px}

  /* la cadena pasa a ser una tira horizontal deslizable */
  .cadena{position:static;margin:0}
  .cadena .rotulo{margin-left:0}
  .cadena ol{
    display:flex;gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:2px 0 8px;
    scrollbar-width:none;
  }
  .cadena ol::-webkit-scrollbar{display:none}
  .cadena ol::before{display:none}
  .cadena li{margin:0;scroll-snap-align:start}
  .eslabon{
    flex-direction:column;gap:6px;
    width:104px;min-height:76px;
    justify-content:center;
    background:var(--tarjeta);border:1px solid var(--linea);
    font-size:12.5px;line-height:1.25;text-align:center;padding:10px 6px;
  }
  .eslabon[aria-current="true"]{border-color:var(--acento)}
  .reactivo{margin-top:12px}

  .pestanas{position:sticky;top:0;z-index:5;margin-bottom:16px}
  .pestanas button{padding:12px 4px;font-size:13.5px}

  .hoja{padding:20px 16px}
  .hoja + .hoja{margin-top:14px}
  .titulo-tema{font-size:25px}
  .entradilla{font-size:16.5px}

  .tabla{min-width:520px}
  .empareja{grid-template-columns:1fr}
  .par select{font-size:16px;padding:9px}
  .opcion{padding:12px}
  .btn-vf{flex:1;padding:12px 8px}
  .boton{width:100%}
  .marcador{padding:14px 16px}
  .marcador .acciones{margin-left:0;width:100%}
  figure{margin:16px -4px}
}

/* ---------- móviles pequeños ---------- */
@media (max-width:560px){
  body{font-size:15.5px}
  .cabecera h1{font-size:20px}
  .cabecera .sub{font-size:10px}
  .hoja{padding:18px 14px;border-radius:8px}
  .titulo-tema{font-size:22px}
  .hoja h3{font-size:13px;margin-top:22px}
  .enunciado{gap:8px}
  .num{font-size:11px}
  .errores li{padding-left:38px}
  .nota{font-size:30px}
  .pestanas button{font-size:12.5px;letter-spacing:-.01em}
    .pie{padding:8px 16px 32px;flex-direction:column;align-items:stretch;gap:8px}
  .pie .boton{width:100%}
}

/* ---------- pantallas muy estrechas (320 px) ---------- */
@media (max-width:360px){
  .cabecera h1{font-size:18px}
  .eslabon{width:96px;font-size:12px}
  .hoja{padding:16px 12px}
  .titulo-tema{font-size:20px}
  .opcion{font-size:15px}
}

/* ---------- muescas y barras del sistema (solo móvil) ---------- */
@media (max-width:860px){
  @supports (padding:max(0px)){
    .cabecera{
      padding-left:max(18px,env(safe-area-inset-left));
      padding-right:max(18px,env(safe-area-inset-right));
    }
    .envoltura,.pie{
      padding-left:max(16px,env(safe-area-inset-left));
      padding-right:max(16px,env(safe-area-inset-right));
    }
  }
}

/* ---------- móvil en horizontal, poca altura ---------- */
@media (max-height:520px) and (orientation:landscape){
  .cabecera{padding:10px 18px}
  .cabecera h1{font-size:18px}
  .pestanas{position:static}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .cadena,.pestanas,.pie,.marcador .acciones{display:none}
  .envoltura{display:block;max-width:none}
  .hoja{box-shadow:none;border:0}
  .cabecera{background:#fff;color:#000}
}