:root{
  --pista:#0B3238; --tinta:#14262A; --plan:#EFEDE2; --linea:#EAF0EC;
  --cal:#8AA7A4; --bola:#D6F24E; --barro:#E0663C;
  --tipo-display:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  --tipo-texto:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --tipo-dato:"Martian Mono",ui-monospace,SFMono-Regular,monospace;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--pista); color:var(--linea);
  font-family:var(--tipo-texto); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── barra ───────────────────────────────────────────────── */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.25rem; border-bottom:1px solid rgba(234,240,236,.12);
  position:sticky; top:0; background:var(--pista); z-index:5;
}
.marca{display:flex; align-items:center; gap:.5rem; font-family:var(--tipo-display)}
.marca strong{font-size:1.05rem; letter-spacing:-.01em}
.chip{
  font-family:var(--tipo-dato); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.1em; padding:.15rem .4rem; border-radius:4px;
  background:rgba(214,242,78,.14); color:var(--bola);
}
.dato{font-family:var(--tipo-dato); font-size:.7rem; color:var(--cal)}

/* ── layout ──────────────────────────────────────────────── */
main{
  max-width:1180px; margin:0 auto; padding:1.75rem 1.25rem 4rem;
  display:grid; gap:1.75rem; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ main{grid-template-columns:1fr} }

.panel{
  background:var(--tinta); border:1px solid rgba(234,240,236,.1);
  border-radius:var(--r); padding:1.5rem; position:sticky; top:5rem;
}
@media (max-width:900px){ .panel{position:static} }

h1{font-family:var(--tipo-display); font-size:1.5rem; margin:0 0 .35rem; letter-spacing:-.02em}
.sub{margin:0 0 1.5rem; color:var(--cal); font-size:.9rem}

.campo{margin-bottom:1.15rem}
.campo>label{
  display:block; font-family:var(--tipo-dato); font-size:.64rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--cal); margin-bottom:.45rem;
}
.fila{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.nota{margin:.4rem 0 0; font-size:.76rem; color:var(--cal); line-height:1.4}

select,input[type=text]{
  width:100%; padding:.55rem .6rem; border-radius:8px;
  border:1px solid rgba(234,240,236,.18); background:rgba(234,240,236,.05);
  color:var(--linea); font-family:var(--tipo-texto); font-size:.9rem;
}
select:focus,input:focus{outline:2px solid var(--bola); outline-offset:1px}

/* ── alumnos ─────────────────────────────────────────────── */
.alumnos{list-style:none; margin:0 0 .55rem; padding:0; display:grid; gap:.5rem}
.alumno{display:grid; grid-template-columns:1fr 1.1fr auto; gap:.4rem; align-items:center}
.quitar{
  border:0; background:transparent; color:var(--cal); cursor:pointer;
  font-size:1.1rem; line-height:1; padding:.3rem .45rem; border-radius:6px;
}
.quitar:hover{background:rgba(224,102,60,.15); color:var(--barro)}

.opciones{display:flex; flex-wrap:wrap; gap:.5rem}
.check{
  display:flex; align-items:center; gap:.35rem; font-size:.82rem;
  padding:.35rem .6rem; border-radius:99px; cursor:pointer;
  border:1px solid rgba(234,240,236,.18);
}
.check:has(input:checked){border-color:var(--bola); color:var(--bola)}
.check input{accent-color:var(--bola)}

/* ── botones ─────────────────────────────────────────────── */
.btn{
  width:100%; padding:.75rem 1rem; border:0; border-radius:8px; cursor:pointer;
  background:var(--bola); color:#26310A; font-family:var(--tipo-display);
  font-weight:700; font-size:.95rem;
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.55; cursor:progress}
.btn-fantasma{
  background:transparent; border:1px dashed rgba(234,240,236,.28); color:var(--cal);
  border-radius:8px; padding:.45rem .7rem; cursor:pointer; font-size:.82rem; width:100%;
}
.btn-fantasma:hover{border-color:var(--bola); color:var(--bola)}
.error{color:var(--barro); font-size:.85rem; margin:.75rem 0 0}

/* ── resultado ───────────────────────────────────────────── */
.vacio{
  border:1px dashed rgba(234,240,236,.18); border-radius:var(--r);
  padding:3.5rem 1.5rem; text-align:center; color:var(--cal); font-size:.9rem;
}
.cabecera-sesion{
  background:var(--tinta); border:1px solid rgba(234,240,236,.1);
  border-radius:var(--r); padding:1.25rem 1.4rem; margin-bottom:1rem;
}
.cabecera-sesion h2{font-family:var(--tipo-display); font-size:1.3rem; margin:0 0 .5rem; letter-spacing:-.02em}
.meta{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem}
.pastilla{
  font-family:var(--tipo-dato); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.25rem .5rem; border-radius:5px; background:rgba(234,240,236,.08); color:var(--cal);
}
.pastilla.acento{background:rgba(214,242,78,.14); color:var(--bola)}

.mental{
  border-left:3px solid var(--bola); background:rgba(214,242,78,.06);
  padding:.8rem 1rem; border-radius:0 8px 8px 0; margin-top:1rem;
}
.mental h3{font-family:var(--tipo-dato); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.11em; color:var(--bola); margin:0 0 .3rem}
.mental p{margin:0; font-size:.88rem}
.mental .aviso{margin-top:.4rem; font-size:.72rem; color:var(--cal)}

.bloque{margin-bottom:1.5rem}
.bloque-tit{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid rgba(234,240,236,.14); padding-bottom:.4rem; margin-bottom:.75rem;
}
.bloque-tit h3{font-family:var(--tipo-display); font-size:1rem; margin:0; text-transform:capitalize}
.bloque-tit span{font-family:var(--tipo-dato); font-size:.7rem; color:var(--cal)}

.ejercicio{
  background:var(--tinta); border:1px solid rgba(234,240,236,.1);
  border-radius:var(--r); padding:1rem 1.15rem; margin-bottom:.75rem;
}
.ej-cab{display:flex; align-items:baseline; gap:.75rem; justify-content:space-between}
.ej-cab h4{font-family:var(--tipo-display); font-size:.98rem; margin:0 0 .3rem; letter-spacing:-.01em}
.minutos{
  font-family:var(--tipo-dato); font-size:.72rem; color:var(--bola);
  white-space:nowrap; padding-top:.1rem;
}
.desc{margin:.15rem 0 .6rem; font-size:.87rem; color:rgba(234,240,236,.82)}
.corrige{font-size:.8rem; color:var(--cal); margin:0 0 .7rem}
.corrige b{color:var(--barro); font-weight:600}

.consignas{list-style:none; margin:.7rem 0 0; padding:.7rem 0 0; display:grid; gap:.5rem;
  border-top:1px dashed rgba(234,240,236,.14)}
.consigna{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; font-size:.85rem}
.quien{
  font-family:var(--tipo-dato); font-size:.66rem; padding:.22rem .45rem; border-radius:5px;
  background:rgba(234,240,236,.08); white-space:nowrap;
}
.quien.menos{background:rgba(214,242,78,.15); color:var(--bola)}
.quien.mas{background:rgba(224,102,60,.16); color:var(--barro)}
.consigna em{color:var(--cal); font-style:normal; font-family:var(--tipo-dato); font-size:.66rem}

.pie-fuente{font-size:.72rem; color:var(--cal); margin:.6rem 0 0; opacity:.8}

/* ── tarjeta compacta: esquema + lo mínimo que hay que leer ──── */
.ej-cuerpo{display:grid; grid-template-columns:168px minmax(0,1fr); gap:1rem; align-items:start}
@media (max-width:640px){ .ej-cuerpo{grid-template-columns:1fr} }
.pista{width:100%; height:auto; border-radius:6px; display:block}
.ej-texto{min-width:0}
.montaje{margin:0 0 .5rem; font-size:.86rem; color:rgba(234,240,236,.9); line-height:1.45}
.corrige{
  font-size:.76rem; color:var(--barro); margin:0 0 .6rem; padding-left:.6rem;
  border-left:2px solid rgba(224,102,60,.5);
}
.corrige b{display:none}
.consignas{margin:.55rem 0 0; padding:.55rem 0 0}
.consigna{gap:.5rem; font-size:.82rem; line-height:1.4}
.que{color:rgba(234,240,236,.88)}
.detalle{margin-top:.7rem; border-top:1px dashed rgba(234,240,236,.12); padding-top:.5rem}
.detalle summary{
  cursor:pointer; font-family:var(--tipo-dato); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--cal); list-style:none;
}
.detalle summary::-webkit-details-marker{display:none}
.detalle summary::before{content:'+ '; color:var(--bola)}
.detalle[open] summary::before{content:'– '}
.detalle summary:hover{color:var(--bola)}
.detalle p{margin:.5rem 0 0; font-size:.82rem; color:var(--cal); line-height:1.5}
.minutos{font-size:.85rem; font-weight:600}

.cab-fila{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom:.5rem;
}
.cab-fila h2{margin:0}

.btn-pdf{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; cursor:pointer; white-space:nowrap;
  border:1px solid var(--bola); background:transparent; color:var(--bola);
  border-radius:7px; font-family:var(--tipo-display); font-weight:700; font-size:.8rem;
}
.btn-pdf svg{flex:0 0 auto}
.btn-pdf:hover{background:var(--bola); color:#26310A}
.btn-pdf:disabled{opacity:.5; cursor:progress}

/* En móvil el botón es la acción principal tras generar: ancho completo y debajo. */
@media (max-width:640px){
  .cab-fila{flex-direction:column; align-items:stretch; gap:.75rem}
  .btn-pdf{width:100%; justify-content:center; padding:.65rem 1rem; font-size:.9rem; order:2}
  .cab-fila h2{order:1}
}

.pastilla.infantil{background:rgba(224,102,60,.16); color:var(--barro)}
select:disabled{opacity:.45; cursor:not-allowed}

.guia-etapa{
  margin-top:.9rem; padding:.7rem .9rem; border-radius:8px; font-size:.85rem;
  background:rgba(224,102,60,.08); border-left:3px solid var(--barro);
}
.guia-etapa strong{color:var(--barro)}