/* Tutor del Colegio Mayor Alexander Friedman — sistema del colegio:
   azul institucional, dorado en filetes, rojo solo en títulos y acentos finos. */
:root{
  --azul:#005BAB; --dorado:#CD8E3F; --rojo:#ED1C24; --tinta:#231F20; --crema:#FDF7EF; --blanco:#FFFFFF;
  --azul-osc:rgba(0,91,171,.88); --azul-velo:rgba(0,91,171,.06); --gris:rgba(35,31,32,.68);
  --linea:rgba(0,91,171,.16); --linea-dorada:rgba(205,142,63,.45); --crema-2:rgba(205,142,63,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:Montserrat,system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2{font-weight:800;letter-spacing:-.01em}
a{color:var(--azul)}

/* Barra: azul institucional con filete dorado */
.barra{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;padding:10px 22px;
  background:var(--azul);color:var(--blanco);position:sticky;top:0;z-index:9;flex-wrap:wrap;
  border-bottom:3px solid var(--dorado);transition:box-shadow .3s ease,padding .3s ease}
.barra.con-sombra{box-shadow:0 6px 18px rgba(0,91,171,.22);padding-top:7px;padding-bottom:7px}
.marca{display:flex;align-items:center;gap:12px;min-width:0;color:var(--blanco);text-decoration:none}
.escudo{width:auto;height:48px;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(35,31,32,.25));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.marca:hover .escudo,.marca:focus-visible .escudo{transform:scale(1.08) rotate(-3deg);
  filter:drop-shadow(0 4px 10px rgba(205,142,63,.6))}
.marca:focus-visible{outline:2px solid var(--dorado);outline-offset:4px;border-radius:6px}
.sello-colegio{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sello-colegio .nombre{font-weight:800;font-size:1.05rem;letter-spacing:.01em}
.sello-colegio .sede{font-size:.72rem;font-weight:500;opacity:.9;letter-spacing:.04em}
.etiqueta{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--dorado);color:var(--blanco);border-radius:999px;padding:4px 12px}

main{max-width:1040px;margin:0 auto;padding:26px 20px 40px}

/* Portada */
.portada{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:22px 0 34px}
.ceja{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--dorado);font-weight:700;margin:0 0 10px}
.portada h1{font-size:2.35rem;line-height:1.15;margin:0 0 14px;color:var(--azul)}
.portada h1 em{color:var(--rojo);font-style:normal;background:linear-gradient(var(--dorado),var(--dorado)) left bottom/0 2px no-repeat;
  animation:subrayar 1s .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes subrayar{to{background-size:100% 2px}}
.bajada{font-size:1.02rem;color:var(--tinta);margin:0 0 18px}
.bajada b{color:var(--azul)}
.virtudes{list-style:none;padding:0;margin:0 0 22px}
.virtudes li{padding-left:26px;position:relative;margin-bottom:7px;transition:transform .2s ease}
.virtudes li:hover{transform:translateX(3px)}
.virtudes li:before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--dorado);box-shadow:0 0 0 3px var(--crema-2)}
.virtudes b{color:var(--azul)}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.boton{display:inline-block;border:1px solid var(--azul);background:transparent;color:var(--azul);font-family:inherit;
  padding:11px 18px;border-radius:10px;text-decoration:none;font-weight:700;cursor:pointer;font-size:.95rem;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.boton:hover{background:var(--azul-velo);transform:translateY(-1px)}
.boton:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
.boton.primario{background:var(--azul);color:var(--blanco);border-color:var(--azul)}
.boton.primario:hover{background:var(--azul-osc);box-shadow:0 8px 18px rgba(0,91,171,.25)}

/* El libro abierto: los dos tomos del material */
.abierto{display:grid;grid-template-columns:1fr 12px 1fr;background:var(--blanco);color:var(--tinta);border:1px solid var(--linea);
  border-top:3px solid var(--dorado);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,91,171,.12);
  transition:transform .4s ease,box-shadow .4s ease}
.abierto:hover{transform:translateY(-3px);box-shadow:0 24px 48px rgba(0,91,171,.16)}
.pagina-izq,.pagina-der{padding:18px 16px;background:var(--blanco);color:var(--tinta);min-width:0}
.lomo{background:linear-gradient(90deg,var(--linea-dorada),var(--crema),var(--linea-dorada))}
.rotulo{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--azul);margin-bottom:2px}
.cuenta{display:block;font-size:.72rem;color:var(--dorado);font-weight:700;margin-bottom:8px}
.abierto p{font-size:.8rem;color:var(--gris);margin:0 0 14px}
.caja-dorada{border:2px solid var(--dorado);border-radius:10px;padding:11px 12px;background:var(--crema);color:var(--tinta);font-size:.82rem}
.caja-dorada span{display:block;margin-top:7px;color:var(--dorado);font-weight:700;font-size:.75rem}

/* Bloques */
.bloque{background:var(--blanco);color:var(--tinta);border:1px solid var(--linea);border-top:3px solid var(--dorado);border-radius:16px;padding:22px;margin-bottom:24px}
#chat{scroll-margin-top:84px}
@media (max-width:480px){#chat{scroll-margin-top:118px}}
.bloque h2{font-size:1.45rem;margin:0 0 6px;color:var(--rojo)}
.nota{color:var(--gris);margin:0 0 16px;font-size:.93rem}

/* Aparición de los bloques al entrar en pantalla */
.revela{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.revela.visible{opacity:1;transform:none}
.portada .hoja{animation:entrar .7s cubic-bezier(.2,.8,.2,1) both}
.portada .abierto{animation:entrar .7s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* El saludo del QR impreso: curso · tema · páginas */
.desde-qr{margin:0 0 14px;padding:12px 15px;border-radius:12px;background:var(--crema);color:var(--tinta);
  border:1px solid var(--linea-dorada);border-left:4px solid var(--dorado);font-size:.93rem;line-height:1.5;
  animation:entrar .5s cubic-bezier(.2,.8,.2,1) both}
.desde-qr .ceja{margin:0 0 4px;font-size:.68rem}
.desde-qr b{color:var(--azul)}
.desde-qr .paginas{display:inline-block;margin-top:4px;font-size:.8rem;font-weight:700;color:var(--dorado)}

/* Chat */
.chat .mensajes{max-height:min(62vh,620px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px 2px 10px}
.burbuja{border-radius:14px;padding:12px 14px;max-width:88%;font-size:.95rem;white-space:pre-wrap;overflow-wrap:anywhere;animation:entrar .35s ease both}
.burbuja.tutor{background:var(--crema);color:var(--tinta);border:1px solid var(--linea);align-self:flex-start}
.burbuja.alumno{background:var(--azul);color:var(--blanco);align-self:flex-end;white-space:pre-wrap}
.burbuja > p{margin:0}
.burbuja .pie{display:block;margin-top:8px;font-size:.76rem;color:var(--gris)}
/* fracciones apiladas y potencias: como se ven en el libro */
.frac{display:inline-block;vertical-align:middle;text-align:center;margin:0 .14em;line-height:1.08;font-size:.94em}
.frac .num{display:block;padding:0 .26em;border-bottom:1.5px solid currentColor}
.frac .den{display:block;padding:0 .26em}
.frac.mixto{margin-left:.04em}
.burbuja sup{font-size:.7em;vertical-align:super;line-height:0}
.cita{margin-top:9px;padding-top:8px;border-top:1px dashed var(--linea-dorada);font-size:.8rem;color:var(--gris)}
.cita b{color:var(--azul)}
.sello{display:inline-block;background:var(--crema-2);color:var(--tinta);border:1px solid var(--dorado);border-radius:20px;padding:1px 9px;
  font-size:.72rem;font-weight:600;margin-left:6px}
.escribir{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.escribir input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;font-size:1rem;font-family:inherit;
  background:var(--blanco);color:var(--tinta);transition:border-color .2s ease,box-shadow .2s ease}
.escribir input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,91,171,.15)}
.aviso{font-size:.85rem;color:var(--rojo);min-height:1.2em;margin:8px 0 0}
.chico{font-size:.8rem;color:var(--gris);margin:10px 0 0}
.pie-sitio{text-align:center;padding:22px 20px;color:var(--gris);font-size:.85rem;border-top:3px solid var(--dorado);background:var(--blanco)}
.pie-sitio .creditos{font-weight:700;color:var(--azul);margin:0}
@media (max-width:760px){
  .portada{grid-template-columns:1fr}
  .portada h1{font-size:1.8rem}
  .burbuja{max-width:100%}
}
@media (max-width:480px){
  .barra{padding:8px 14px}
  .escudo{height:40px}
  .sello-colegio .nombre{font-size:.95rem}
  main{padding:18px 14px 32px}
  .bloque{padding:18px 16px}
  .abierto{grid-template-columns:1fr}
  .lomo{height:8px;background:linear-gradient(180deg,var(--linea-dorada),var(--crema),var(--linea-dorada))}
  .acciones .boton.primario{width:100%;text-align:center}
  .escribir .boton{padding:11px 13px}
}

/* Chips de ejercicios: el alumno toca el que tiene delante (el tutor no adivina) */
.chips{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--linea-dorada)}
.chip{text-align:left;font:inherit;font-size:.88rem;color:var(--tinta);background:var(--blanco);border:1px solid var(--linea);
  border-left:4px solid var(--dorado);border-radius:10px;padding:9px 12px;cursor:pointer;transition:background .15s,border-color .15s}
.chip:hover{background:var(--crema);border-left-color:var(--azul)}
.chip:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.chip:active{transform:translateY(1px)}
@media(max-width:640px){.chip{font-size:.85rem;padding:10px 12px}}

/* La figura del libro dentro de la respuesta del tutor */
.figura-libro{margin:12px 0 4px;display:flex;flex-direction:column;gap:6px}
.figura-libro img{width:100%;max-width:420px;height:auto;border:1px solid var(--linea);border-radius:10px;background:var(--blanco);color:var(--tinta)}
.figura-libro figcaption{font-size:12.5px;color:var(--gris);font-style:italic}

/* La solución escribiéndose delante del alumno */
.linea-solucion{white-space:pre-wrap;margin:0 0 2px;line-height:1.55}
/* La figura del tutor, dibujándose línea por línea */
.figura-animada{margin:12px 0 4px}
.figura-animada svg{width:100%;max-width:460px;height:auto;display:block;background:var(--blanco);color:var(--tinta);border-radius:10px}
.repetir-dibujo{border:0;background:transparent;color:var(--azul);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:2px 0}
/* La página completa del libro */
.bloque-pagina{margin-top:10px}
.boton-pagina{border:1px solid var(--azul);background:var(--blanco);color:var(--azul);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.boton-pagina:hover{background:var(--azul);color:var(--blanco)}
.pedir-codigo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--tinta)}
.pedir-codigo input{border:1px solid var(--linea);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px;width:130px}
.pedir-codigo button{border:0;background:var(--azul);color:var(--blanco);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer}
.pagina-entera{margin:12px 0 4px;display:flex;flex-direction:column;gap:6px}
.pagina-entera img{width:100%;max-width:520px;height:auto;border:1px solid var(--linea);border-radius:10px;background:var(--blanco);color:var(--tinta)}
.pagina-entera figcaption{font-size:12.5px;color:var(--gris);font-style:italic}
.aviso-codigo{font-size:13px;color:var(--rojo);margin:0}

/* Agrandar el cuaderno: el panel se ensancha a los lados y la figura crece.
   El tirador es una flechita acostada en la mitad del borde vertical (igual que el panel). */
.chat{position:relative}
.agrandar{position:absolute;top:50%;right:-15px;transform:translateY(-50%);width:28px;height:58px;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;
  border:1px solid var(--azul);border-left:none;border-radius:0 16px 16px 0;background:var(--blanco);color:var(--azul);
  cursor:pointer;box-shadow:3px 0 8px rgba(0,91,171,.13);z-index:6;transition:background .2s ease,color .2s ease}
.agrandar:hover{background:var(--azul);color:var(--blanco)}
.chat .mensajes{transition:max-height .35s ease}
.chat.ancho{width:min(96vw,1560px);left:50%;transform:translateX(-50%)}
.chat.ancho .mensajes{max-height:min(84vh,940px)}
.chat.ancho .burbuja{max-width:100%}
.chat.ancho .figura-animada svg{max-width:min(90vw,880px)}
.chat.ancho .figura-libro img,.chat.ancho .pagina-entera img{max-width:min(90vw,820px)}
@media (max-width:760px){.agrandar{right:-12px;width:24px;height:48px}}

/* Micrófono del chat: dictar la pregunta (mismo motor de voz del navegador) */
.micro{border:1px solid var(--linea);background:var(--blanco);border-radius:10px;padding:0 12px;font-size:1.15rem;
  line-height:1;cursor:pointer;color:var(--azul);flex:0 0 auto;transition:background .2s ease,border-color .2s ease}
.micro:hover{background:var(--azul-velo);border-color:var(--azul)}
.micro:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
.micro.grabando{background:var(--azul);border-color:var(--rojo);color:var(--blanco);animation:latido 1.1s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(237,28,36,.5)}50%{transform:scale(1.06);box-shadow:0 0 0 7px rgba(237,28,36,0)}}

/* Freno para quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .revela{opacity:1;transform:none}
  .portada h1 em{background-size:100% 2px}
}