/* ── portada est — Doc, Tutor IA en el LMS ──
   Una sola idea: Doc dejó de ser solo un chat. La barra nombra cinco
   secciones, cada una con su punto de novedad, y el Chat abre con una
   sola señal del día sobre el composer.

   Retrata producto: tokens reales de uDocz (Estudiantes es el producto
   azul), copiados y acotados aquí. La portada es pública y no puede
   depender de nada bajo /casos/. Sigue el tema del sitio, como las demos
   del caso; por eso existe el bloque dark.

   Lienzo de 44 × 28 em. La cabecera del caso muestra los 22 de arriba:
   barra, saludo, señal y composer. Los cuatro modos viven debajo del corte
   y solo se ven en la miniatura. Nivel 1 (2em) se lee en ambos tamaños;
   nivel 2 (0.64 a 0.9em) es textura en la miniatura y texto en la cabecera. */
.pt-est{
  --e-page:#F8FAFC;--e-def:#FFFFFF;--e-sub:#F1F5F9;--e-muted:#E2E8F0;--e-line:#E2E8F0;
  --e-tx:#0F172A;--e-tx2:#475569;--e-tx3:#94A3B8;
  --e-brand:#0A45DD;--e-dot:#256EFF;--e-doc:#740AFF;--e-peel:#FFA200;
  background:var(--e-def);color:var(--e-tx);
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.2;text-align:left;
}
[data-theme="dark"] .pt-est{
  --e-page:#0B0F19;--e-def:#131826;--e-sub:#1B2233;--e-muted:#232B40;--e-line:#2A3349;
  --e-tx:#F1F5F9;--e-tx2:#CBD5E1;--e-tx3:#94A3B8;
  --e-brand:#8BB2FF;--e-dot:#5890FF;--e-doc:#AE70FF;--e-peel:#FFB533;
}
.pt-est *{box-sizing:border-box}
.pt-est svg{display:block}
.pt-est .pe-d{font-family:'Montserrat','Rubik',-apple-system,BlinkMacSystemFont,sans-serif}

/* la barra: la navegación de Doc, no parte del chat */
.pt-est .pe-bar{
  position:absolute;left:0;right:0;top:0;height:3.6em;padding:0 2em;
  display:flex;align-items:center;
  border-bottom:.06em solid var(--e-line);
}
.pt-est .pe-lg{display:flex;align-items:center;gap:.5em;flex:0 0 auto}
.pt-est .pe-lg i{
  width:1.05em;height:1.4em;border-radius:.25em .75em .75em .25em;
  background:var(--e-doc);box-shadow:inset .26em 0 0 var(--e-peel);
}
.pt-est .pe-lg b{font-size:1.2em;font-weight:700;letter-spacing:-.02em}
.pt-est .pe-tabs{display:flex;align-self:stretch;gap:.4em;margin:0 auto}
.pt-est .pe-tab{
  position:relative;display:flex;align-items:center;gap:.5em;padding:0 .85em;
  font-size:.9em;font-weight:500;color:var(--e-tx2);white-space:nowrap;
}
.pt-est .pe-tab.pe-on{color:var(--e-tx);font-weight:600}
/* el trazo se apoya sobre la línea de la barra y se funde con ella */
.pt-est .pe-tab.pe-on::before{
  content:"";position:absolute;left:0;right:0;bottom:-.07em;height:.16em;
  background:var(--e-tx);transform-origin:left center;
}
.pt-est .pe-tab.pe-pt::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--e-dot);flex:0 0 auto}
.pt-est .pe-hist{flex:0 0 auto;color:var(--e-tx2)}
.pt-est .pe-hist svg{width:1.45em;height:1.45em}

/* el inicio del Chat: saludo corto, una señal, el composer.
   Ojo: top se mide en el em del propio elemento, así que va dividido
   entre su font-size (6,3 em del lienzo = 3,15 em a 2em). */
.pt-est .pe-hola{
  position:absolute;left:0;right:0;top:3.15em;text-align:center;
  font-size:2em;font-weight:700;letter-spacing:-.025em;
}
.pt-est .pe-sub{
  position:absolute;left:0;right:0;top:11.7em;text-align:center;
  font-size:.82em;color:var(--e-tx2);
}
.pt-est .pe-senal{
  position:absolute;left:4em;right:4em;top:11.6em;height:3.1em;padding:0 .5em 0 .55em;
  display:flex;align-items:center;gap:.75em;
  background:var(--e-sub);border-radius:.9em;
}
.pt-est .pe-ic{
  position:relative;width:2em;height:2em;border-radius:.55em;flex:0 0 auto;background:var(--e-def);
}
.pt-est .pe-ic::after{
  content:"";position:absolute;left:.62em;top:.48em;width:.76em;height:1.04em;
  border:.13em solid var(--e-brand);border-radius:.16em;
}
.pt-est .pe-senal b{font-size:.88em;font-weight:600;white-space:nowrap}
.pt-est .pe-senal em{font-style:normal;font-size:.76em;color:var(--e-tx2);white-space:nowrap}
.pt-est .pe-senal u{
  margin-left:auto;padding:.5em 1.05em;text-decoration:none;
  font-size:.8em;font-weight:600;
  background:var(--e-def);border:.07em solid var(--e-line);border-radius:99em;
}
.pt-est .pe-comp{
  position:absolute;left:4em;right:4em;top:15.5em;height:5.5em;padding:1em 1em .8em 1.2em;
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--e-def);border:.06em solid var(--e-line);border-radius:1.1em;
  box-shadow:0 .06em .18em rgba(0,0,0,.08);
}
.pt-est .pe-ph{font-size:.9em;color:var(--e-tx3)}
.pt-est .pe-row{display:flex;align-items:center;gap:1.2em}
.pt-est .pe-row i{font-style:normal;font-size:.8em;font-weight:500;color:var(--e-tx2)}
.pt-est .pe-send{
  position:relative;margin-left:auto;width:2em;height:2em;border-radius:50%;background:var(--e-muted);color:var(--e-tx2);
}
.pt-est .pe-send::before{
  content:"";position:absolute;left:50%;top:50%;width:.13em;height:.8em;margin:-.36em 0 0 -.065em;background:currentColor;
}
.pt-est .pe-send::after{
  content:"";position:absolute;left:50%;top:50%;width:.5em;height:.5em;margin:-.42em 0 0 -.31em;
  border-left:.13em solid currentColor;border-top:.13em solid currentColor;transform:rotate(45deg);
}

/* los modos: solo existen en la miniatura (quedan bajo el corte de la cabecera) */
.pt-est .pe-modos{
  position:absolute;left:4em;right:4em;top:22.3em;height:2.6em;
  display:flex;justify-content:space-between;gap:.5em;
}
.pt-est .pe-modo{
  display:flex;align-items:center;gap:.5em;padding:0 .75em;
  font-size:.64em;font-weight:600;white-space:nowrap;
  border:.08em solid var(--e-line);border-radius:.9em;
}
.pt-est .pe-modo i{width:1em;height:1em;border-radius:.28em;flex:0 0 auto}
.pt-est .pe-m-a{background:#8BB2FF}
.pt-est .pe-m-b{background:#740AFF}
.pt-est .pe-m-c{background:#FFA200}
.pt-est .pe-m-d{background:#00C3FF}

/* ── el gesto: la barra nombra las secciones y el inicio se arma ──
   Estado base = escena completa. .is-act la re-dibuja una vez: el trazo
   corre bajo Chat, los puntos se encienden, y entran la señal, el
   composer y los modos. Termina a los 0,85 s. Solo transform y opacidad. */
@keyframes pt-est-trazo{from{transform:scaleX(0)}}
@keyframes pt-est-punto{from{opacity:0;transform:scale(.2)}}
@keyframes pt-est-entra{from{opacity:0;transform:translateY(.6em)}}
.portada.is-act .pt-est .pe-tab.pe-on::before{animation:pt-est-trazo var(--t-entrada) var(--e-entrada) backwards}
.portada.is-act .pt-est .pe-tab.pe-pt::after{animation:pt-est-punto var(--t-estado) var(--e-entrada) .25s backwards}
.portada.is-act .pt-est .pe-tab.pe-pt:nth-child(4)::after{animation-delay:.33s}
.portada.is-act .pt-est .pe-hola,
.portada.is-act .pt-est .pe-sub{animation:pt-est-entra var(--t-entrada) var(--e-entrada) .06s backwards}
.portada.is-act .pt-est .pe-senal{animation:pt-est-entra var(--t-entrada) var(--e-entrada) .18s backwards}
.portada.is-act .pt-est .pe-comp{animation:pt-est-entra var(--t-entrada) var(--e-entrada) .26s backwards}
.portada.is-act .pt-est .pe-modo{animation:pt-est-entra var(--t-estado) var(--e-entrada) backwards}
.portada.is-act .pt-est .pe-modo:nth-child(1){animation-delay:.36s}
.portada.is-act .pt-est .pe-modo:nth-child(2){animation-delay:.41s}
.portada.is-act .pt-est .pe-modo:nth-child(3){animation-delay:.46s}
.portada.is-act .pt-est .pe-modo:nth-child(4){animation-delay:.51s}