:root {
--hbl-b:"02b59ba6ccb896ae3b";
--bg: #b8c8d8;
--bg2: #a8bccf;
--glass: rgba(255,255,255,0.18);
--glass-md: rgba(255,255,255,0.28);
--glass-hi: rgba(255,255,255,0.42);
--border: rgba(255,255,255,0.35);
--border-lo: rgba(255,255,255,0.18);
--shadow: rgba(40,55,80,0.18);
--shadow-hi: rgba(40,55,80,0.32);
--text: #1a2233;
--text2: #3a4a62;
--text3: rgba(26,34,51,0.5);
--white: #ffffff;
--accent: #3a7bff;
--accent2: #34c47c;
--danger: #ff4d5e;
--accent-rgb: 58,123,255;
--accent2-rgb: 52,196,124;
--danger-rgb: 255,77,94;
--r: 18px;
--r-sm: 10px;
--r-xs: 7px;
--r-md: 12px;
--r-lg: 14px;
--r-xl: 22px;
--r-pill: 99px;
--font: 'DM Sans';
--font-size-base: 15px;
--button-radius: 99px;
--button-fill: rgba(255,255,255,0.35);
--button-border: rgba(255,255,255,0.6);
--button-shadow: rgba(26,34,51,0.08);
--button-shadow-blur: 12px;
--button-shadow-y: 2px;
--pills-col-width: 225px;
--pills-col-height-offset: 120px;
--pills-col-gap: 20px;
--pills-col-padding-top: 68px;
--pills-col-padding-x: 8px;
--pills-col-padding-bottom: 40px;
--pills-fade-top: 64px;
--pills-fade-bottom: 56px;
--pill-fill: rgba(214,221,230,0.48);
--pill-hover-fill: rgba(214,221,230,0.58);
--pill-text: #ffffff;
--pill-radius: 20px;
--pill-pad-y: 18px;
--pill-pad-x: 24px;
--pill-font-size: 21px;
--pill-line-height: 1.22;
--pill-blur: 20px;
--pill-saturate: 140%;
--pill-inset-blur: 26px;
--pill-inset-opacity: 0.3;
--pill-inset-bottom-y: 3px;
--pill-inset-bottom-blur: 9px;
--pill-inset-bottom-opacity: 0.16;
--pill-shadow-y: 4px;
--pill-shadow-blur: 10px;
--pill-shadow-opacity: 0.1;
--pill-shadow-hover-opacity: 0.18;
--pill-hover-lift: 2px;
--topic-card-radius: 22px;
--topic-card-fill: rgba(255,255,255,0.25);
--topic-card-border: rgba(255,255,255,0.5);
--topic-card-shadow-y: 4px;
--topic-card-shadow-blur: 24px;
--topic-card-shadow-opacity: 0.1;
--exercise-radius: 20px;
--exercise-fill: rgba(255,255,255,0.32);
--exercise-border: rgba(255,255,255,0.55);
--exercise-blur: 24px;
--exercise-shadow-y: 4px;
--exercise-shadow-blur: 20px;
--exercise-shadow-opacity: 0.08;
--chip-radius: 99px;
--chip-fill: rgba(255,255,255,0.82);
--chip-border: rgba(255,255,255,0.7);
--chip-shadow-blur: 8px;
--chip-shadow-y: 2px;
--chip-shadow-opacity: 0.07;
--chip-font-size: 13px;
--slot-radius: 99px;
--slot-fill: rgba(235,240,248,0.72);
--slot-filled-fill: rgba(240,244,251,0.88);
--slot-border: rgba(255,255,255,0.7);
--slot-height: 34px;
--slot-min-width: 90px;
--slot-shadow-blur: 4px;
--slot-shadow-y: 1px;
--slot-shadow-opacity: 0.06;
--button-font-size: 15px;
--button-text: #1a2233;
--button-blur: 16px;
--button-saturate: 100%;
--button-inset-blur: 0px;
--button-inset-opacity: 0;
--button-inset-bottom-y: 0px;
--button-inset-bottom-blur: 0px;
--button-inset-bottom-opacity: 0;
--button-hover-fill: rgba(255,255,255,0.42);
--button-hover-lift: 1px;
--tab-bar-fill: rgba(255,255,255,0.12);
--tab-bar-blur: 16px;
--tab-bar-border: rgba(26,34,51,0.08);
--tab-bar-radius: 0px;
--tab-bar-shadow-blur: 0px;
--tab-bar-shadow-y: 0px;
--tab-bar-shadow-opacity: 0;
--tab-bar-font-size: 13px;
--tab-bar-padding-y: 12px;
--tab-bar-padding-x: 20px;
--notebook-width: 290px;
--notebook-radius: 26px;
--notebook-fill: rgba(214,221,230,0.48);
--notebook-blur: 36px;
--notebook-saturate: 80%;
--notebook-inset-blur: 40px;
--notebook-inset-opacity: 0.26;
--notebook-inset-bottom-y: 4px;
--notebook-inset-bottom-blur: 14px;
--notebook-inset-bottom-opacity: 0.14;
--notebook-border: rgba(255,255,255,0);
--notebook-shadow-y: 10px;
--notebook-shadow-blur: 30px;
--notebook-shadow-opacity: 0.12;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; height: 100dvh; overflow: hidden; }
body {
font-family: var(--font), sans-serif;
font-size: var(--font-size-base);
background: var(--bg);
color: var(--text);
background-image:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(180,200,230,0.7) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 80% 80%, rgba(140,165,210,0.5) 0%, transparent 55%),
radial-gradient(ellipse 40% 40% at 60% 20%, rgba(200,215,240,0.4) 0%, transparent 50%);
}
body::before {
content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
/* ── LA ENTRADA: entrar y crear cuenta ───────────────────────────────
Reescrita desde cero el 04/09/2026, cuando la plataforma dejó de ser
de un solo profesor. Antes era una tarjeta de cristal centrada, de
otra época: etiquetas en mayúsculas diminutas, cajas con borde y un
botón oscuro de píldora. Nada de eso existe en el resto de la app.
Ahora es la MISMA pieza que "Nueva sección" y que el inicio: el
degradado a sangre, la marca en grande con su sombra, la nav de la
cápsula metálica que viaja, y los campos invisibles -sin caja, sin
borde, sin fondo- donde lo único que dice "aquí se escribe" es el
texto de ayuda y el cursor.
La escala DIBUJA el árbol, igual que en "clases" (140 → 60 → 40):
Hablamos 140 ← dónde estoy
entrar · crear cuenta 60 ← qué vengo a hacer
soy profesor · soy alumno 40 ← de qué tipo soy
──────────────────────────────────────────────────────────────────── */
#screen-login {
position:fixed; inset:0; z-index:900; overflow-y:auto;
background:var(--dc-bg);
}
#screen-login.hidden { display:none; }
.ent-cuerpo {
min-height:100vh; min-height:100dvh;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
padding:calc(14vh) var(--dc-sp-76) var(--dc-sp-60);
text-align:left;
}
/* La marca lleva sombra SIEMPRE, no sólo al acercarse: aquí no dice
"esto se pulsa" (no se pulsa), dice "estás en Hablamos". */
.ent-marca {
font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-140);
color:var(--dc-ink); line-height:1; letter-spacing:var(--dc-tracking);
text-shadow:var(--dc-shadow-text-strong);
user-select:none;
}
/* ── "club" ───────────────────────────────────────────────────────────
La escuela se llama Hablamos club, así que la marca lo dice. Pero NO en
el mismo cuerpo: "Hablamosclub" a 140 se comería la pantalla en un móvil
y dejaría de leerse como un nombre. La misma regla que gobierna el resto
de la plataforma -la escala dibuja el árbol- resuelve esto: "Hablamos"
manda y "club" va detrás, a poco más de un tercio, sentado en la misma
línea de base. Se lee como un logotipo, no como una palabra larga.
Va en `em`, así que funciona igual en la puerta (140), en la esquina del
alumno (100), en la marca de las pantallas flotantes (30) y en la
pizarra, sin una regla por sitio. */
.marca-club {
font-size:.38em; margin-left:.16em; letter-spacing:var(--dc-tracking);
opacity:.78; font-weight:inherit; vertical-align:baseline;
}
/* La nav: la misma cápsula metálica que viaja en el inicio y en el aula.
Una sola pieza para todas las navegaciones del sistema. */
#screen-login .ent-tabs {
position:relative; display:flex; justify-content:flex-start; gap:var(--dc-sp-14);
padding:var(--dc-sp-40) 0 var(--dc-sp-24); width:auto;
border:none; background:none; backdrop-filter:none; overflow:visible;
/* La cápsula tiene relleno propio a los lados; sin este tirón hacia la
izquierda, "entrar" no cae bajo la H de Hablamos sino un dedo a su
derecha, y las dos filas dejan de compartir el eje. */
margin-left:calc(-1 * var(--dc-sp-40));
}
#screen-login .ent-tabs .aula-tab {
font-family:var(--dc-font); font-size:var(--dc-fs-60); font-weight:var(--dc-weight);
letter-spacing:normal; line-height:1.25; text-transform:lowercase;
display:inline-flex; align-items:center; justify-content:center;
color:var(--dc-ink); background:none; border:none; box-shadow:none;
padding:var(--dc-sp-10) var(--dc-sp-40); border-radius:var(--dc-r-nav);
cursor:pointer; position:relative; z-index:1;
transition:transform var(--dc-t-lento) var(--dc-ease);
}
#screen-login .ent-tabs .aula-tab::after { display:none !important; }
#screen-login .ent-tabs .aula-tab.active { background:none; box-shadow:none; color:var(--dc-ink); }
#screen-login .ent-tabs .aula-tab.crecida { transform:scale(1.12); }
#screen-login .aula-tab-indicator {
position:absolute; left:0; z-index:0; pointer-events:none;
border-radius:var(--dc-r-nav);
background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
transform:translateX(var(--x, 0)) scale(var(--s, 1));
transition:transform var(--dc-t-viaje) var(--dc-ease), width var(--dc-t-viaje) var(--dc-ease);
will-change:transform, width;
}
/* La segunda elección (profesor · alumno) YA NO ES OTRA PÍLDORA (Rolando,
04/09: "pasa lo mismo de que surgen varias filas de píldora para
elegir"). En toda la plataforma manda una sola fila de cápsula por
pantalla; lo que cuelga de ella son OPCIONES: texto suelto, más pequeño,
donde lo elegido se queda encendido y lo demás se apaga. Misma pieza que
las opciones de "clases" y las de Ajustes. */
#screen-login .ent-roles {
display:flex; gap:var(--dc-sp-48); padding:0 0 var(--dc-sp-16);
}
.ent-op {
font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1.2;
background:none; border:none; padding:var(--dc-sp-8) 0; cursor:pointer;
text-transform:lowercase; opacity:.45; transform-origin:left center;
transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease),
text-shadow var(--dc-t-lento) var(--dc-ease);
text-shadow:none;
}
.ent-op.active { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
@media (any-hover: hover) { .ent-op:hover { opacity:1; transform:scale(1.06); } }
.ent-op:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
/* La caja que aguanta a los dos paneles. `position:relative` no es un
detalle: el panel que se va se pone en absoluto (`.dc-sale`) y tiene que
quedarse EXACTAMENTE donde estaba, encima del que llega, no volar a la
esquina de la pantalla. `min-height` evita que el fondo dé un tirón
cuando el panel corto (entrar) releva al largo (crear cuenta). */
.ent-panels { position:relative; width:100%; min-height:calc(560 * var(--dc-u)); }
/* SIN `position:relative` aquí, a propósito: `#screen-login .ent-panel` tiene
más peso que `.dc-sale` (un id contra una clase), así que un `relative`
puesto aquí GANABA y el panel que se va se quedaba en el flujo - seguía
ocupando su sitio 340 ms y luego desaparecía de golpe, empujando todo lo de
debajo. Se veía como "las dos pantallas una debajo de otra y luego un
salto", que es justo lo que Rolando notó. Quien coloca el panel saliente es
`.ent-panels`. */
#screen-login .ent-panel { width:100%; display:flex; flex-direction:column; align-items:flex-start; }
/* El código del profesor no desaparece de golpe ni deja un hueco: se cierra
como una persiana -altura, aire y nitidez a la vez- y lo de abajo sube
con él. Antes salía del flujo de una vez y el botón "crear cuenta" daba
un salto seco (Rolando: "los cambios de pantalla en el login deben ser
súper suaves"). */
/* El código del profesor usa la PERSIANA genérica (ver más abajo): se cierra
como una fila que se pliega y el botón de debajo sube con ella. */
#reg-codigo { max-height:calc(140 * var(--dc-u)); }
/* Los campos son invisibles de verdad -sin caja, sin borde, sin fondo-,
igual que la línea de "Nueva sección". Lo que separa uno de otro es el
aire, no una raya. SIN text-shadow: en un el navegador la pinta
como una banda rectangular detrás de toda la línea, no como un halo. */
/* El ancho baja de 900 a 560 y el texto va a la IZQUIERDA (Rolando, 04/09):
una caja de 900 con el texto centrado deja el borde real del campo muy
lejos de donde se escribe, y el navegador ancla ahí el desplegable de
"rellenar contraseña" - salía a un palmo a la izquierda de la palabra que
estabas escribiendo. Alineado a la izquierda, el desplegable cae justo
debajo de la primera letra, que es donde se le espera. */
.ent-campo {
width:100%; max-width:calc(560 * var(--dc-u));
margin-top:var(--dc-sp-18);
-webkit-appearance:none; appearance:none;
background:transparent !important; background-image:none; box-shadow:none;
border:none; outline:none; padding:var(--dc-sp-8) 0;
font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
color:var(--dc-ink); caret-color:var(--dc-ink); text-align:left;
}
.ent-campo::placeholder { color:var(--dc-ink-70); text-shadow:none; }
.ent-campo:-webkit-autofill,
.ent-campo:-webkit-autofill:hover,
.ent-campo:-webkit-autofill:focus {
-webkit-text-fill-color:var(--dc-ink);
-webkit-box-shadow:0 0 0 1000px transparent inset;
transition:background-color 9999s ease-in-out 0s;
}
/* El código del profesor se escribe en mayúsculas, siempre - pero eso vale
para lo que se ESCRIBE, no para el texto de ayuda: en mayúsculas y con
letras separadas, "el código de tu profesor" parecía un cartel gritando. */
#reg-codigo { text-transform:uppercase; letter-spacing:calc(6 * var(--dc-u)); }
#reg-codigo::placeholder { text-transform:none; letter-spacing:normal; }
/* La acción pierde la píldora: es texto suelto con mucha sombra difuminada
debajo, como "Restablecer contraseña" en el perfil del alumno. */
.ent-accion {
margin-top:var(--dc-sp-48); align-self:flex-start; transform-origin:left center;
font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1;
background:none; border:none; box-shadow:none;
/* Sin relleno a la izquierda: la acción tiene que arrancar en la misma
línea vertical que los campos y que la marca. Con el relleno de antes
quedaba un dedo más adentro que todo lo demás. */
padding:var(--dc-sp-10) var(--dc-sp-24) var(--dc-sp-10) 0;
cursor:pointer; text-transform:lowercase;
text-shadow:var(--dc-shadow-text-strong);
transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .ent-accion:hover { transform:scale(1.09); } }
.ent-accion:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
.ent-accion:disabled { opacity:.5; cursor:default; transform:none; }
/* Una segunda acción en la misma columna: la que casi nunca se pulsa va más
apagada, para que "copiar" siga siendo la que salta a la vista. */
.ent-accion-suave { opacity:.5; font-size:var(--dc-fs-30); }
@media (any-hover: hover) { .ent-accion-suave:hover { opacity:1; } }
.ent-ayuda {
margin-top:var(--dc-sp-24); max-width:calc(900 * var(--dc-u));
font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
color:var(--dc-ink-70); line-height:1.35;
}
.ent-pie { margin-top:var(--dc-sp-34); }
.ent-pie a {
font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink-70);
cursor:pointer; text-decoration:none;
transition:color var(--dc-t-lento) var(--dc-ease);
}
.ent-pie a:hover { color:var(--dc-ink); }
/* El error no grita: es una línea más, del mismo tamaño que la ayuda, sólo
que con el calor justo para que se vea que algo no fue bien. */
.ent-error {
display:none; margin-top:var(--dc-sp-24);
font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
color:#ffdde0; text-shadow:var(--dc-shadow-text);
}
@media (max-width:700px) {
.ent-marca { font-size:var(--dc-fs-80); }
#screen-login .ent-tabs { flex-wrap:wrap; row-gap:var(--dc-sp-8); }
#screen-login .ent-roles { gap:var(--dc-sp-24); }
#screen-login .ent-tabs .aula-tab { font-size:var(--dc-fs-40); padding:var(--dc-sp-8) var(--dc-sp-20); }
.ent-campo { font-size:var(--dc-fs-40); }
.ent-accion { font-size:var(--dc-fs-50); }
}
.login-error {
background:rgba(var(--danger-rgb),0.1); border:1px solid rgba(var(--danger-rgb),0.3);
color:var(--danger); border-radius:var(--r-sm); padding:10px 14px;
font-family:'Coolvetica','DM Sans',sans-serif; font-size:15px; font-weight:400; letter-spacing:.3px; margin-bottom:14px; display:none;
}
/* ── APP SHELL ── */
#app { position:relative; z-index:1; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; width:100%; transition:width .4s cubic-bezier(.25,.1,.25,1); }
.topbar {
display:grid; grid-template-columns:1fr auto 1fr;
align-items:center; padding:22px 24px 14px; flex-shrink:0;
}
.topbar-left { display:flex; gap:8px; align-items:center; min-width:0; }
.topbar-right { display:flex; gap:8px; align-items:center; justify-content:flex-end; min-width:0; }
.topbar-logo-pill {
display:flex; align-items:center; justify-content:center;
padding:10px 26px; border-radius:var(--button-radius);
background:var(--button-fill); backdrop-filter:blur(24px);
border:1px solid var(--button-border);
box-shadow:0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
cursor:default;
}
.topbar-logo-text {
font-family:'Coolvetica','DM Sans',sans-serif;
font-size:16px; font-weight:400; letter-spacing:.8px;
color:var(--text);
}
.tb-btn {
width:36px; height:36px; border-radius:min(var(--button-radius), 12px); border:1px solid var(--button-border); cursor:pointer;
background:var(--button-fill); backdrop-filter:blur(var(--button-blur)) saturate(var(--button-saturate));
display:flex; align-items:center; justify-content:center;
font-size:16px; color:var(--button-text);
transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
box-shadow:
inset 0 0 var(--button-inset-blur) rgba(16,22,34,var(--button-inset-opacity)),
inset 0 calc(-1 * var(--button-inset-bottom-y)) var(--button-inset-bottom-blur) rgba(16,22,34,var(--button-inset-bottom-opacity)),
0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
}
.tb-btn:hover { background:var(--button-hover-fill); transform:scale(1.07) translateY(calc(-1 * var(--button-hover-lift))); }
.tb-btn:active { transform:scale(.91); }
.tb-btn.danger:hover { background:rgba(var(--danger-rgb),0.12); color:var(--danger); }
/* Cambio de pantalla: nunca un corte. Entra desenfocada y se asienta, con
la misma curva y duración que el resto del sistema (--dc-ease / --dc-t-*).
El filter no añade problemas de "containing block": el transform de aquí
ya creaba uno. */
.screen {
position:absolute; inset:0; flex:1; flex-direction:column; overflow:hidden;
opacity:0; pointer-events:none; transform:translateY(10px); filter:blur(8px);
/* La SALIDA es más rápida que la entrada a propósito: mientras la pantalla
vieja se ve pero ya no responde, un clic parece "no hacer nada". Cuanto
antes desaparezca, menos ventana hay para ese engaño. */
transition:opacity var(--dc-t-salida) var(--dc-ease),
transform var(--dc-t-salida) var(--dc-ease),
filter var(--dc-t-salida) var(--dc-ease);
display:flex;
}
html.sin-desenfoque .screen { filter:none; transition:opacity var(--dc-t-salida) var(--dc-ease), transform var(--dc-t-salida) var(--dc-ease); }
.screen.active {
opacity:1; pointer-events:all; transform:translateY(0); filter:blur(0);
transition:opacity var(--dc-t-entrada) var(--dc-ease),
transform var(--dc-t-entrada) var(--dc-ease),
filter var(--dc-t-entrada) var(--dc-ease);
}
html.sin-desenfoque .screen.active { filter:none; }
/* La pantalla que NO está activa no toca a nadie - ni ella ni nada de dentro.
`pointer-events` se hereda, pero un descendiente puede volver a encenderlo,
y entonces una pantalla invisible sigue robando clics a la de delante. Pasaba
de verdad: el carrusel de clases marca cada ficha visible con
`style.pointerEvents='auto'` (para poder tocar las de atrás), así que al
salir del alumno esas fichas -invisibles, en la pantalla de al lado- se
quedaban encima de la lista de nombres. De ahí el "el hover falla y hago
clic y no pasa nada" (Rolando, 02/09). Con !important ganamos también a los
estilos en línea. */
.screen:not(.active), .screen:not(.active) * { pointer-events:none !important; }
@media (prefers-reduced-motion:reduce) { .screen { transition:opacity .2s linear; filter:none; transform:none; } }
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 20px 100px; }
@media (min-width:600px) { .scroll { padding:0 32px 100px; } }
@media (min-width:900px) { .scroll { padding:0 48px 100px; } }
@media (max-width:480px) {
.topbar { padding:20px 14px 12px; gap:6px; }
.topbar-logo-pill { padding:9px 16px; }
.topbar-logo-text { font-size:14px; letter-spacing:.4px; }
}
.scroll::-webkit-scrollbar { display:none; }
/* ── SECTION CHIPS ── */
.section-chips {
display:flex; align-items:baseline; justify-content:center;
gap:0; padding:6px 24px 20px; overflow-x:auto; flex-shrink:0;
position:relative;
}
.section-chips::before {
content:''; position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
width:calc(100% - 48px); height:1px; background:rgba(26,34,51,0.08);
}
.section-chips::-webkit-scrollbar { display:none; }
.chip {
white-space:nowrap; padding:4px 20px 10px; border-radius:0;
font-size:14px; font-weight:500; color:rgba(26,34,51,0.45);
background:transparent; border:none; cursor:pointer;
transition:all .38s cubic-bezier(.25,.1,.25,1);
position:relative; flex-shrink:0;
font-family:'DM Sans',sans-serif;
}
.chip::after {
content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:0; height:2px; background:var(--text); border-radius:var(--r-pill);
transition:width .28s cubic-bezier(.34,1.2,.64,1);
}
.chip.active {
font-family:'Coolvetica','DM Sans',sans-serif;
font-size:22px; font-weight:400; color:var(--text); letter-spacing:.3px;
padding-bottom:10px;
}
.chip.active::after { width:100%; }
.chip:hover:not(.active) { color:rgba(26,34,51,0.7); }
.chip-add {
color:var(--text3); font-size:20px; padding:4px 16px 10px;
font-family:'DM Sans',sans-serif; font-weight:400;
}
.sec-label { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text3); margin: 18px 0 10px; }
.subsec-row { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; margin:-8px -16px 12px; padding:8px 16px 18px; }
.subsec-row::-webkit-scrollbar { display:none; }
.subsec-pill {
flex-shrink:0; padding:8px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:600;
background:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.5);
cursor:pointer; transition:all .22s cubic-bezier(.34,1.2,.64,1);
backdrop-filter:blur(20px); position:relative; color:var(--text2);
box-shadow:0 1px 4px rgba(26,34,51,0.06);
}
.subsec-pill:hover { background:rgba(255,255,255,0.55); }
.subsec-pill.active { background:var(--text); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(26,34,51,0.2); }
.subsec-add { color:var(--text3); font-size:20px; padding:8px 12px; }
.subsec-ctx-btn {
display:none; position:absolute; top:-5px; right:-5px; width:17px; height:17px;
border-radius:50%; background:rgba(26,34,51,0.6); border:none; cursor:pointer;
color:#fff; font-size:9px; align-items:center; justify-content:center; z-index:5; line-height:1;
}
.subsec-pill:hover .subsec-ctx-btn { display:flex; }
.subsec-ctx-menu {
position:fixed; z-index:999; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px);
border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 32px var(--shadow-hi);
overflow:hidden; min-width:148px;
}
.subsec-ctx-item { padding:10px 15px; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--text); transition:background .12s; }
.subsec-ctx-item:hover { background:rgba(var(--accent-rgb),0.08); }
.subsec-ctx-item.danger { color:var(--danger); }
.subsec-ctx-item.danger:hover { background:rgba(var(--danger-rgb),0.08); }
/* ── TOPIC GRID ── */
.topic-grid {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:14px;
}
@media (min-width:600px) {
.topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}
@media (min-width:900px) {
.topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
}
.topic-card {
border-radius:var(--topic-card-radius); cursor:pointer; position:relative;
aspect-ratio:4/3; background:var(--topic-card-fill);
border:1px solid var(--topic-card-border);
box-shadow:0 var(--topic-card-shadow-y) var(--topic-card-shadow-blur) rgba(26,34,51,var(--topic-card-shadow-opacity));
display:flex; flex-direction:column;
transition:transform .42s cubic-bezier(.25,.1,.25,1), box-shadow .38s;
}
/* Hover shadow derived from the theme's OWN resting shadow (blur/y/opacity),
just amplified for the lift - so it keeps the same character and can never end
up weaker than the resting shadow (which is what made it look like the shadow
"disappeared" when a theme defined a strong resting shadow). */
.topic-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 calc(var(--topic-card-shadow-y) + 14px) calc(var(--topic-card-shadow-blur) + 24px) rgba(26,34,51, calc(var(--topic-card-shadow-opacity) + 0.08)); }
.topic-card:active { transform:scale(.97); transition:transform .1s; }
/* ── HOVER-BUFFER: arregla el parpadeo del :hover cerca del borde ──
Al hacer hover, estos elementos se LEVANTAN (translateY hacia arriba). Su
borde inferior se retira por encima del cursor → el navegador pierde el
:hover → el elemento baja → recupera el cursor → vuelve a subir → parpadeo
("crashea la animación"). Un ::after transparente extiende el área de hit
hacia abajo: como el pseudo se transforma junto al elemento, tras subir N px
su borde inferior vuelve a cubrir la huella original y el :hover nunca se
pierde. Va detrás del contenido (z-index:-1) para no bloquear clics de los
botones hijos; solo actúa en la franja extendida, donde no hay nada más. */
.topic-card::after,
.topic-add-card::after,
.w-chip::after,
.back-btn::after,
.otra-clase-btn::after {
content:''; position:absolute; z-index:-1;
}
/* Buffer inferior = elevación + margen. Como el ::after se transforma junto al
elemento, su borde inferior absoluto queda SIEMPRE ~5px por debajo del reposo,
sin importar cuánto suba el hover (aunque el tema lo ponga a 10px). Por eso se
ata a la MISMA variable que la elevación: si el buffer fuera fijo y la elevación
lo superara, el :hover se perdería igual y el parpadeo volvería. */
.topic-card::after { inset:-3px -3px -9px; }
.topic-add-card::after { inset:-3px -3px -6px; }
.w-chip::after { inset:-2px -2px calc(-1 * var(--chip-hover-lift, 2px) - 5px) -2px; }
.back-btn::after { inset:-3px -3px calc(-1 * var(--button-hover-lift, 1px) - 5px) -3px; }
.otra-clase-btn::after { inset:-3px -3px calc(-1px - var(--button-hover-lift, 1px) - 5px) -3px; }
/* Title area - top section */
.topic-card-header {
padding:14px 16px 10px;
flex-shrink:0; position:relative; z-index:2;
}
.topic-card-title {
font-family:'Coolvetica','DM Sans',sans-serif;
font-size:22px; font-weight:400; color:var(--text);
letter-spacing:.2px; line-height:1.1;
text-shadow:none;
}
.topic-card-title-small {
font-family:'Coolvetica','DM Sans',sans-serif;
font-size:17px; font-weight:400; color:var(--text);
letter-spacing:.2px; line-height:1.1;
}
/* Image area - bottom section with zoom */
.topic-card-img-wrap {
flex:1; overflow:hidden; position:relative;
border-radius:0 0 calc(var(--topic-card-radius) - 2px) calc(var(--topic-card-radius) - 2px);
margin:0; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.topic-card-img-wrap img {
/* Overscan by 1px on every side. When the hover-zoom eases from scale(1.07)
back to scale(1), subpixel rounding of the composited image layer can leave
a 1px gap at the wrapper edge on low-DPI screens, showing a thin dark seam.
Making the image slightly larger than the wrapper (clipped by overflow:hidden)
guarantees full coverage in every frame, so the seam can never appear. */
width:calc(100% + 2px); height:calc(100% + 2px); margin:-1px;
object-fit:cover; display:block;
transition:transform .65s cubic-bezier(.25,.1,.25,1);
transform-origin:center center;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.topic-card:hover .topic-card-img-wrap img { transform:scale(1.07); }
/* same seam-hardening for the other hover-zoom images */
.match-card-img, .img-gallery-slide img { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.topic-card-placeholder {
width:100%; height:100%; display:flex; align-items:center; justify-content:center;
font-size:36px; background:rgba(255,255,255,0.15);
border-radius:0 0 calc(var(--topic-card-radius) - 2px) calc(var(--topic-card-radius) - 2px);
}
.topic-progress-bar {
position:absolute; bottom:0; left:0; right:0; height:3px;
background:rgba(255,255,255,0.25); z-index:3;
}
.topic-progress-fill {
height:100%; background:var(--accent2); border-radius:0 2px 2px 0;
transition:width .4s cubic-bezier(.34,1.2,.64,1);
}
/* Tema terminado. Antes era un circulo de 24px con un check dentro; Rolando
(07/09): los checks se ven poco premium. Ahora es un punto: dice lo mismo
y no grita. */
.topic-done-badge {
position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%;
background:var(--accent2); box-shadow:0 2px 6px rgba(var(--accent2-rgb),0.35); z-index:3;
}
/* Completed exercise state */
.ex-wysiwyg.ex-completed { opacity:0.72; }
.ex-completed-banner {
display:flex; align-items:center; gap:8px; padding:8px 14px;
background:rgba(var(--accent2-rgb),0.12); border-top:1px solid rgba(var(--accent2-rgb),0.2);
font-size:12px; font-weight:700; color:var(--accent2);
}
/* Progress in student detail */
.progress-topic-row {
display:flex; align-items:center; gap:10px; padding:10px 14px;
background:var(--glass-md); border:1px solid var(--border); border-radius:var(--r-md);
margin-bottom:8px; backdrop-filter:blur(16px);
}
.progress-topic-name { flex:1; font-size:13px; font-weight:600; }
.progress-topic-bar { width:80px; height:6px; background:rgba(26,34,51,0.1); border-radius:var(--r-pill); overflow:hidden; }
.progress-topic-fill { height:100%; background:var(--accent2); border-radius:var(--r-pill); transition:width .3s; }
.progress-topic-pct { font-size:11px; font-weight:700; color:var(--accent2); min-width:32px; text-align:right; }
.topic-add-card {
border-radius:var(--r-xl); aspect-ratio:4/3; display:flex; flex-direction:column; position:relative;
align-items:center; justify-content:center; gap:8px; cursor:pointer;
border:2px dashed rgba(26,34,51,0.2); background:rgba(255,255,255,0.15);
transition:all .22s; color:var(--text3);
}
.topic-add-card:hover { background:rgba(255,255,255,0.3); transform:translateY(-3px); }
.topic-add-icon { font-size:24px; }
.topic-add-label { font-size:12px; font-weight:600; letter-spacing:.3px; }
/* ── TOPIC MENU ── */
.topic-menu-btn {
position:absolute; top:7px; right:7px; z-index:10;
width:28px; height:28px; border-radius:var(--r-xs); border:none; cursor:pointer;
background:rgba(0,0,0,0.35); backdrop-filter:blur(8px);
color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .18s; line-height:1;
}
.topic-card:hover .topic-menu-btn,
.topic-card:active .topic-menu-btn { opacity:1; }
.topic-ctx-menu {
position:fixed; z-index:999; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px);
border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 32px var(--shadow-hi);
overflow:hidden; min-width:160px;
}
.topic-ctx-item {
padding:11px 16px; font-size:14px; font-weight:500; cursor:pointer;
display:flex; align-items:center; gap:9px; color:var(--text); transition:background .12s;
}
.topic-ctx-item:hover { background:rgba(var(--accent-rgb),0.08); }
.topic-ctx-item.danger { color:var(--danger); }
.topic-ctx-item.danger:hover { background:rgba(var(--danger-rgb),0.08); }
/* ── LESSON ── */
.lesson-header { padding:22px 20px 14px; flex-shrink:0; display:flex; align-items:center; gap:12px; }
.lesson-header-inner { display:flex; align-items:center; gap:12px; width:100%; max-width:720px; margin:0 auto; }
@media (min-width:600px) { .lesson-header { padding:22px 32px 14px; } }
@media (min-width:900px) { .lesson-header { padding:24px 48px 16px; } }
.back-btn {
height:36px; padding:0 16px; border-radius:var(--button-radius); border:none; cursor:pointer; position:relative;
background:var(--button-fill); border:1px solid var(--button-border);
display:flex; align-items:center; justify-content:center; gap:4px;
font-family:'Coolvetica','DM Sans',sans-serif; font-size:var(--button-font-size); letter-spacing:.3px;
color:var(--button-text); backdrop-filter:blur(var(--button-blur)) saturate(var(--button-saturate)); flex-shrink:0;
transition:all .38s cubic-bezier(.25,.1,.25,1);
box-shadow:
inset 0 0 var(--button-inset-blur) rgba(16,22,34,var(--button-inset-opacity)),
inset 0 calc(-1 * var(--button-inset-bottom-y)) var(--button-inset-bottom-blur) rgba(16,22,34,var(--button-inset-bottom-opacity)),
0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
}
.back-btn:hover { background:var(--button-hover-fill); transform:translateX(-2px) translateY(calc(-1 * var(--button-hover-lift))); }
.back-btn:active { transform:scale(.93); }
.lesson-title-bar { flex:1; }
.lesson-title-bar h2 { font-family:'Coolvetica','DM Sans',sans-serif; font-size:22px; font-weight:400; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.lesson-title-bar p { font-size:12px; color:var(--text3); margin-top:2px; font-family:'DM Sans',sans-serif; }
/* ── EXERCISE BLOCKS ── */
.ex-wysiwyg { background:var(--exercise-fill); border:1px solid var(--exercise-border); border-radius:var(--exercise-radius); backdrop-filter:blur(var(--exercise-blur)); margin-bottom:16px; box-shadow:0 var(--exercise-shadow-y) var(--exercise-shadow-blur) rgba(26,34,51,var(--exercise-shadow-opacity)); animation:fadeUp .45s cubic-bezier(.25,.1,.25,1) both; }
/* overflow on body only - lets sticky word-bank escape while keeping rounded card */
.ex-wysiwyg > .ex-top-bar { border-radius:var(--exercise-radius) var(--exercise-radius) 0 0; overflow:hidden; }
@media (min-width:900px) { .ex-wysiwyg { max-width:720px; } }
.ex-wysiwyg-body { padding:16px; }
.ex-top-bar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border-lo); background:rgba(255,255,255,0.12); min-height:36px; }
.ex-type-tag { display:none; }
.ex-actions { margin-left:auto; display:flex; gap:6px; }
.ex-icon-btn { width:28px; height:28px; border-radius:var(--r-xs); border:none; cursor:pointer; background:transparent; display:flex; align-items:center; justify-content:center; font-size:14px; transition:background .15s; }
.ex-icon-btn:hover { background:rgba(26,34,51,0.1); }
.ex-icon-btn.del:hover { background:rgba(var(--danger-rgb),0.12); color:var(--danger); }
.ex-icon-btn:disabled { opacity:.25; cursor:default; pointer-events:none; }
.ex-reorder { display:flex; gap:2px; margin-right:2px; }
.ex-reorder .ex-icon-btn { font-size:15px; color:var(--text2); }
.sv-instruction { font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px; color:var(--text2); margin-bottom:14px; text-transform:none; }
.sv-q { font-size:18px; font-weight:700; line-height:1.3; margin-bottom:16px; }
.word-bank {
display:flex; flex-wrap:wrap; gap:7px; padding:12px;
background:rgba(255,255,255,0.2); border-radius:var(--r-sm); margin-bottom:14px; min-height:48px;
position:sticky; top:8px; z-index:30;
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
background:rgba(220,228,238,0.78);
box-shadow:0 2px 12px rgba(26,34,51,0.06);
}
.w-chip {
--chip-hover-lift:2px;
padding:8px 16px; border-radius:var(--chip-radius); font-size:var(--chip-font-size); font-weight:600; position:relative;
background:var(--chip-fill); border:1px solid var(--chip-border);
cursor:pointer;
transition:background .38s cubic-bezier(.25,.1,.25,1), box-shadow .38s cubic-bezier(.25,.1,.25,1), opacity .3s cubic-bezier(.25,.1,.25,1), color .38s cubic-bezier(.25,.1,.25,1), transform .2s cubic-bezier(.34,1.56,.64,1);
user-select:none; color:var(--text);
box-shadow:0 var(--chip-shadow-y) var(--chip-shadow-blur) rgba(26,34,51,var(--chip-shadow-opacity));
}
.w-chip:hover { background:rgba(255,255,255,0.95); transform:translateY(-2px); box-shadow:0 calc(var(--chip-shadow-y) + 4px) calc(var(--chip-shadow-blur) + 8px) rgba(26,34,51, calc(var(--chip-shadow-opacity) + 0.05)); }
.w-chip:active { transform:scale(.94); }
.w-chip.selected { background:var(--text); color:#fff; box-shadow:0 4px 14px rgba(26,34,51,0.25); }
/* used: chip has left the bank (placed in a slot). markChipUsed() blurs the chip
and forces a reflow before animating, so no stale :hover transform survives -
that was the Safari crack. */
.w-chip.used {
opacity:.35; pointer-events:none;
}
/* A settled used chip (not mid-animation) sits at identity transform so a stale
hover translate can't linger. The :not(.leaving) keeps this from overriding the
running keyframe. */
.w-chip.used:not(.leaving):not(.removing) { transform:none; }
/* leaving: the live "word just left the list" animation. Applied only on real
interaction (not on hydration/restore, which would make every used chip flash). */
.w-chip.leaving { animation:chipLeave .26s cubic-bezier(.25,.1,.25,1) both; }
@keyframes chipLeave {
0% { opacity:1; transform:scale(1); }
100% { opacity:.35; transform:scale(.96); }
}
/* removing: chip returns to bank. Dedicated keyframe; transition excludes transform
so Safari doesn't fight the running animation. */
.w-chip.removing { transition:background .38s, box-shadow .38s, color .38s; animation:chipReturn .34s cubic-bezier(.25,.1,.25,1) both; }
/* 07/09: la palabra que vuelve al banco CAE en su sitio, perpendicular, desde
su altura. Antes encogía y rebotaba (0.9 → 1.05 → 1), y ese rebote es lo que
se leía como un parpadeo. */
@keyframes chipReturn {
0% { opacity:0; transform:translateY(-14px); }
100% { opacity:1; transform:none; }
}
/* ══════════════════════════════════════════════════════════════
CLASS PILLS (left) + NOTEBOOK (right)
Flanks the exercises column during a live class. Pills = teacher's
messages for THIS class/tema, persistent, floating (no box, no
borders - top/bottom edges fade via mask-image instead of clipping).
Newest pill lives at the TOP and pushes older ones down. Notebook =
one global glass notebook per student across the whole course.
══════════════════════════════════════════════════════════════ */
.session-layout { display:flex; gap:20px; align-items:flex-start; max-width:1300px; margin:0 auto; }
.session-layout > #exercises-container,
.session-layout > #live-view-content { flex:1; min-width:0; }
.pills-col {
width:var(--pills-col-width); flex-shrink:0; position:sticky; top:8px;
height:calc(100vh - var(--pills-col-height-offset)); overflow-y:auto; scrollbar-width:none;
overscroll-behavior:contain;
display:flex; flex-direction:column; align-items:center; gap:var(--pills-col-gap);
padding:var(--pills-col-padding-top) var(--pills-col-padding-x) var(--pills-col-padding-bottom);
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--pills-fade-top), #000 calc(100% - var(--pills-fade-bottom)), transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0, #000 var(--pills-fade-top), #000 calc(100% - var(--pills-fade-bottom)), transparent 100%);
}
.pills-col::-webkit-scrollbar { display:none; }
/* teacher's column gets a shell: the sticky/size role moves here so the
compose trigger below can sit OUTSIDE .pills-col's own fade mask -
nested inside it, the mask was eating the top of the "Escribir" bloom */
.pills-col-shell {
position:sticky; top:8px; width:var(--pills-col-width); flex-shrink:0;
height:calc(100vh - var(--pills-col-height-offset));
}
.pills-col-shell .pills-col { position:static; top:auto; width:100%; height:100%; }
.pills-compose-slot { position:absolute; top:0; left:0; right:0; z-index:41; pointer-events:none; }
.pills-compose-slot .pills-compose-trigger { pointer-events:auto; }
/* ── compose trigger - lives at the very top of the teacher's column.
Idle: fully invisible, no shape, no frame. Hover: a soft radial bloom -
same muted glass tone as the pills themselves, blurred, fading out in
EVERY direction (not just top-to-bottom) so there's no straight edge
anywhere to read as a "box". The word "Escribir" fades in inside it.
Click: the label is replaced in place by a plain-text input, already
focused - and the bloom disappears completely (no tint, no blur at
all) so absolutely nothing sits on top of the text being typed.
Enter sends; the trigger returns to idle and the new pill blooms in
below it.
NOTE on the mask math: the ellipse must be smaller than the box AND
finish fading to transparent within its OWN radius - if the fade only
completes at, say, 74% of a 130%-wide ellipse, that's ~96% of the box,
which still reads as a hard-edged rectangle with only the corners
softened. Keeping the ellipse itself under 90% of the box and
completing the fade well inside that guarantees real, fully
transparent margin at every edge - no rectangle, ever. ── */
/* ── pill composer - a simple, always-legible dark glass bar (not a
hover-only bloom): background stays dark and translucent in every
state (idle / hover / typing) so white text always has real contrast.
Sits in .pills-compose-slot, outside the column's own fade mask. ── */
.pills-compose-trigger {
position:relative; z-index:40; flex-shrink:0;
margin:0 4px 14px; padding:13px 20px;
border-radius:var(--r-pill);
display:flex; align-items:center; justify-content:center; cursor:text;
background:rgba(16,22,34,0.22);
-webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
box-shadow:0 4px 14px rgba(16,22,34,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
transition:background .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.pills-compose-trigger:hover, .pills-compose-trigger.design-pinned {
background:rgba(16,22,34,0.3);
box-shadow:0 6px 18px rgba(16,22,34,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.pills-compose-trigger.active {
background:rgba(16,22,34,0.34);
box-shadow:0 4px 14px rgba(16,22,34,0.2), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 2px rgba(var(--accent-rgb),0.35);
}
.pills-compose-trigger input {
width:100%; border:none; outline:none; background:transparent; text-align:center;
font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:#fff;
}
.pills-compose-trigger input::placeholder { color:rgba(255,255,255,0.6); font-weight:500; }
.class-pill {
position:relative;
padding:var(--pill-pad-y) var(--pill-pad-x); border-radius:var(--pill-radius);
font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; letter-spacing:.2px;
font-size:var(--pill-font-size); line-height:var(--pill-line-height); color:var(--pill-text);
/* same glass tone as the "Mis Notas" panel (#D6DDE6), no border at all -
depth comes purely from translucency + an inner shadow (the Keynote
"glass shape" recipe: fill opacity + inset shadow, no stroke), which
is also what keeps white Coolvetica text readable anywhere on the
pill instead of only near a hard edge. */
background:var(--pill-fill);
backdrop-filter:blur(var(--pill-blur)) saturate(var(--pill-saturate)); -webkit-backdrop-filter:blur(var(--pill-blur)) saturate(var(--pill-saturate));
box-shadow:
inset 0 0 var(--pill-inset-blur) rgba(16,22,34,var(--pill-inset-opacity)),
inset 0 calc(-1 * var(--pill-inset-bottom-y)) var(--pill-inset-bottom-blur) rgba(16,22,34,var(--pill-inset-bottom-opacity)),
0 var(--pill-shadow-y) var(--pill-shadow-blur) rgba(26,34,51,var(--pill-shadow-opacity));
/* forces its own compositing layer - this is what actually kills the
faint "cut" shadow at the rounded corners: backdrop-filter + a
rounded box-shadow on the same element can leave a thin seam of
mis-composited pixels right at the corner curve in Chromium/WebKit;
isolating the layer stops it bleeding into neighboring pills */
isolation:isolate;
max-width:100%; word-break:break-word; text-align:center; cursor:default;
}
/* small delete affordance - only rendered for the teacher's own pills;
invisible until the pill is hovered so the column stays clean */
.pill-del {
position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
background:rgba(18,22,32,0.82); color:#fff; font-size:13px; line-height:22px; text-align:center;
opacity:0; transform:scale(.7); cursor:pointer; z-index:3;
transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), background .2s;
}
.class-pill:hover .pill-del { opacity:1; transform:scale(1); }
.pill-del:hover { background:rgba(190,60,60,0.9); }
/* hover lifts smoothly; the PRESS itself gets its own fast, dedicated
transition (separate from hover's) so it reads as an actual "click"
the instant you press down, same as every other button in the app */
.class-pill.clickable { cursor:pointer; transition:transform .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1), background .3s cubic-bezier(.25,.1,.25,1); }
.class-pill.clickable:hover, .class-pill.clickable.design-pinned {
transform:translateY(calc(-1 * var(--pill-hover-lift))); background:var(--pill-hover-fill);
box-shadow:
inset 0 0 var(--pill-inset-blur) rgba(16,22,34,var(--pill-inset-opacity)),
inset 0 calc(-1 * var(--pill-inset-bottom-y)) var(--pill-inset-bottom-blur) rgba(16,22,34,var(--pill-inset-bottom-opacity)),
0 calc(var(--pill-shadow-y) + 4px) calc(var(--pill-shadow-blur) + 8px) rgba(26,34,51,var(--pill-shadow-hover-opacity));
}
/* its OWN short transition - presses in fast (120ms) instead of riding
the slower .3s hover transition, so the click registers instantly */
.class-pill.clickable:active { transform:scale(.93); transition:transform .12s cubic-bezier(.4,0,.6,1); }
/* pills never change appearance based on notebook-saved status - clicking
is a pure "copy to notebook" action, repeatable, with no persistent
visual state on the pill itself */
/* La entrada se sentía troceada, en dos tiempos. La culpa era el fotograma
intermedio del 60%: con una curva tan frenada, ese 60% del recorrido se
comía el primer 20% del tiempo, así que el desenfoque caía de golpe de 20 a
3 y luego se arrastraba de 3 a 0. Dos velocidades = dos fases visibles.
Ahora es una sola interpolación, con menos desenfoque de salida (20px sobre
texto es caro de repintar y se nota) y una curva menos extrema. */
.class-pill.bloom { animation:pillBloom .55s cubic-bezier(.22,.61,.36,1) both; will-change:opacity, transform, filter; }
@keyframes pillBloom {
0% { opacity:0; filter:blur(12px); transform:scale(.92) translateY(-10px); }
100% { opacity:1; filter:blur(0); transform:scale(1) translateY(0); }
}
/* the "big" incoming teacher message - full column width, darkens/blurs
what's beneath it until it auto-settles into the normal pill list */
.class-pill.big {
width:100%; padding:calc(var(--pill-pad-y) + 2px) calc(var(--pill-pad-x) - 2px); border-radius:var(--pill-radius); font-size:calc(var(--pill-font-size) - 3px); line-height:1.4;
text-align:left; position:relative; z-index:2; cursor:pointer;
box-shadow:
inset 0 0 calc(var(--pill-inset-blur) + 4px) rgba(16,22,34,var(--pill-inset-opacity)),
inset 0 calc(-1 * var(--pill-inset-bottom-y)) calc(var(--pill-inset-bottom-blur) + 1px) rgba(16,22,34,var(--pill-inset-bottom-opacity)),
0 12px 28px rgba(26,34,51,var(--pill-shadow-hover-opacity));
animation:pillBigIn .55s cubic-bezier(.22,.61,.36,1) both; will-change:opacity, transform, filter;
}
.class-pill.big.settling { animation:pillSettleOut .5s cubic-bezier(.5,0,.75,0) both; pointer-events:none; }
@keyframes pillSettleOut {
0% { opacity:1; filter:blur(0); transform:scale(1) translateY(0); }
100% { opacity:0; filter:blur(8px); transform:scale(.48) translateY(-16px); }
}
@keyframes pillBigIn {
0% { opacity:0; filter:blur(14px); transform:scale(.94) translateY(-10px); }
100% { opacity:1; filter:blur(0); transform:scale(1) translateY(0); }
}
.pill-scrim {
position:absolute; inset:0; background:rgba(16,20,30,0.32);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
border-radius:var(--r); z-index:1; pointer-events:none; animation:scrimIn .5s cubic-bezier(.16,1,.3,1) both;
}
.pill-scrim.settling { animation:scrimOut .5s ease both; }
@keyframes scrimIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes scrimOut { from{ opacity:1; } to{ opacity:0; } }
/* "Mis notas" is not always visible: it's opened on demand from the
"Notas" header button. But it's NOT a viewport-edge overlay - it lives
in its normal spot in the flex row, right beside the exercises column,
exactly like the pills column on the left. This matters for two
reasons: (1) its width is always reserved, so the exercises column
never re-centers/shifts when the panel opens or closes, and (2) as a
`position:fixed` panel it was nested inside `.screen`, which always
carries a CSS `transform` (even at rest, translateY(8px)/0) - a
transformed ancestor becomes the containing block for fixed
descendants, which silently broke height/scroll bounds for the
teacher. Sticky-in-flex sidesteps that class of bug entirely.
Open/close is purely visual: opacity + blur + a short slide, no
layout reflow. Mobile is the one exception - there's no room to
reserve a permanent column, so it becomes a real overlay drawer there
(see the media query below). */
.notebook-col {
width:var(--notebook-width); flex-shrink:0; position:sticky; top:8px;
height:calc(100vh - 100px); border-radius:var(--notebook-radius);
background:var(--notebook-fill);
border:1px solid var(--notebook-border);
backdrop-filter:blur(var(--notebook-blur)) saturate(var(--notebook-saturate)); -webkit-backdrop-filter:blur(var(--notebook-blur)) saturate(var(--notebook-saturate));
/* same "glass" recipe as the pills: no border, depth from an inset
shadow + translucency instead - keeps white Coolvetica text legible
everywhere on the panel, not just near an edge. Every value below is
theme-driven so the 3D glass depth is fully adjustable. */
box-shadow:
inset 0 0 var(--notebook-inset-blur) rgba(16,22,34,var(--notebook-inset-opacity)),
inset 0 calc(-1 * var(--notebook-inset-bottom-y)) var(--notebook-inset-bottom-blur) rgba(16,22,34,var(--notebook-inset-bottom-opacity)),
0 var(--notebook-shadow-y) var(--notebook-shadow-blur) rgba(26,34,51,var(--notebook-shadow-opacity));
display:flex; flex-direction:column; overflow:hidden;
opacity:0; filter:blur(14px); transform:translateX(28px); pointer-events:none;
transition:opacity .5s cubic-bezier(.25,.1,.25,1), filter .5s cubic-bezier(.25,.1,.25,1), transform .5s cubic-bezier(.25,.1,.25,1);
}
.notebook-col.open { opacity:1; filter:blur(0); transform:translateX(0); pointer-events:auto; }
.notebook-body {
flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
padding:8px 24px 24px; display:flex; flex-direction:column; gap:4px;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 24px), transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 24px), transparent 100%);
}
.notebook-entry {
font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; font-size:19px; color:#fff;
background:transparent; border:none; outline:none; width:100%; line-height:1.6;
}
input.notebook-entry::placeholder { color:rgba(255,255,255,0.55); }
/* student-only delete affordance on each saved note */
.notebook-entry { position:relative; padding-right:20px; }
.note-del { position:absolute; top:-1px; right:-4px; width:20px; height:20px; padding:0; border:none;
background:transparent; color:rgba(255,255,255,0.5); font-family:'DM Sans',sans-serif; font-size:15px;
line-height:20px; text-align:center; cursor:pointer; border-radius:50%; opacity:0;
transition:opacity .18s ease, color .18s ease, background .18s ease; }
.notebook-entry:hover .note-del { opacity:1; }
.note-del:hover { color:#fff; background:rgba(255,77,94,0.9); }
@media (hover:none) { .note-del { opacity:.55; } }
.note-cursor { display:inline-block; width:1px; height:1em; vertical-align:-2px; margin-left:1px; background:#fff; animation:cursorBlink 1s steps(1) infinite; }
@keyframes cursorBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.notebook-empty { font-size:13px; color:rgba(255,255,255,0.5); text-align:center; padding:30px 10px; font-family:'DM Sans',sans-serif; }
/* ── notebook compose trigger - same language as the teacher's pill
composer: no box, no straight edges - a soft radial glass bloom fading
in every direction, with "Escribir" appearing inside it on hover.
Click swaps it for a live input, and the bloom disappears completely
(see .active below) so it never sits on top of what's being written.
Lives as a sibling of .notebook-body (not nested inside it) so the
scroll area's own fade mask never eats into the bloom - it used to,
because both shared the same masked box. ── */
/* ── notebook composer - same fix as the pill composer: a simple,
always-legible dark glass bar instead of a hover-only bloom, so
white text always has real contrast against it, in every state. ── */
.notebook-compose-trigger {
position:relative; z-index:5; cursor:text;
margin:16px 20px 10px; padding:12px 18px;
border-radius:var(--r-pill);
display:flex; align-items:center; justify-content:center;
background:rgba(16,22,34,0.22);
-webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 4px 14px rgba(16,22,34,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
transition:background .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.notebook-compose-trigger:hover, .notebook-compose-trigger.design-pinned {
background:rgba(16,22,34,0.3);
box-shadow:0 6px 18px rgba(16,22,34,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.notebook-compose-trigger.active {
background:rgba(16,22,34,0.34);
box-shadow:0 4px 14px rgba(16,22,34,0.2), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 2px rgba(var(--accent-rgb),0.35);
}
.notebook-compose-trigger input {
width:100%; border:none; outline:none; background:transparent; text-align:center;
font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; color:#fff;
}
.notebook-compose-trigger input::placeholder { color:rgba(255,255,255,0.6); }
/* el cuadro de escribir es ahora un textarea que crece en alto con suavidad */
.notebook-compose-trigger textarea {
width:100%; border:none; outline:none; background:transparent; text-align:center;
font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; color:#fff;
resize:none; overflow:hidden; display:block; margin:0; padding:0;
line-height:1.5; min-height:24px;
transition:height .3s cubic-bezier(.25,.1,.25,1);
}
.notebook-compose-trigger textarea::placeholder { color:rgba(255,255,255,0.6); }
/* la nota nueva entra suave desde arriba (desde el cuadro donde se escribió) */
.notebook-entry.note-in { animation:noteIn .5s cubic-bezier(.16,1,.3,1) both; will-change:opacity, transform, filter; }
@keyframes noteIn {
0% { opacity:0; filter:blur(6px); transform:translateY(-12px) scale(.98); }
60% { opacity:1; filter:blur(1px); }
100% { opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
}
/* "Notas" toggle button reuses the existing .back-btn / .otra-clase-btn
pill-button look (same family as "Mensaje" / "Otra clase") so it sits
naturally in the header instead of floating over the content - no
dedicated styles needed here. */
@media (max-width:999px) {
.session-layout { flex-direction:column; }
.pills-col { width:100%; flex-direction:row; overflow-x:auto; overflow-y:visible; height:auto; position:relative; padding:8px 16px; mask-image:none; -webkit-mask-image:none; }
.pills-col-shell { position:relative; width:100%; height:auto; top:auto; }
.pills-compose-slot { position:relative; z-index:auto; }
/* no room to reserve a permanent side column here - "Mis notas" becomes
a real overlay drawer, same open/close triggers, just anchored to
the viewport edge instead of sitting in the flex row */
.notebook-col {
width:min(320px,88vw); position:fixed; right:0; top:0; bottom:0; z-index:200;
max-height:100vh; border-radius:var(--r-xl) 0 0 var(--r-xl);
transform:translateX(105%);
}
.notebook-col.open { transform:translateX(0); }
}
/* ── ITEM BULLETS - soft, premium dots before each line. Three states:
1. default → light grey, blurred glow (item not yet answered)
2. .line-filled → soft blue (student filled this line's answer)
3. .line-ok → soft green (checked and correct)
Each transition is gently blurred/eased for a premium feel. ── */
.sentence-line, .so-line, .wa-line {
position:relative; padding-left:20px;
}
.sentence-line::before, .so-line::before, .wa-line::before {
content:'';
position:absolute; left:1px;
width:9px; height:9px; border-radius:50%;
/* soft grey, heavily feathered toward the edges = blurred premium look */
background:radial-gradient(circle at 42% 38%, rgba(120,135,160,0.55) 0%, rgba(120,135,160,0.22) 45%, rgba(120,135,160,0) 78%);
box-shadow:0 0 5px rgba(120,135,160,0.18);
filter:blur(0.3px);
transition:background .7s cubic-bezier(.25,.1,.25,1), box-shadow .7s cubic-bezier(.25,.1,.25,1), filter .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.34,1.4,.5,1);
}
.sentence-line::before, .so-line::before { top:50%; transform:translateY(-50%); }
.wa-line::before { top:1.3em; transform:translateY(-50%); }
/* State 2 - line filled → soft, blurred blue */
.sentence-line.line-filled::before, .so-line.line-filled::before, .wa-line.line-filled::before {
background:radial-gradient(circle at 42% 38%, rgba(96,150,255,0.85) 0%, rgba(70,120,240,0.4) 48%, rgba(70,120,240,0) 80%);
box-shadow:0 0 9px rgba(96,150,255,0.5), 0 0 18px rgba(96,150,255,0.22);
filter:blur(0.4px);
}
.sentence-line.line-filled::before, .so-line.line-filled::before { transform:translateY(-50%) scale(1.12); }
.wa-line.line-filled::before { transform:translateY(-50%) scale(1.12); }
/* State 3 - line checked correct → soft, blurred green */
.sentence-line.line-ok::before, .so-line.line-ok::before, .wa-line.line-ok::before {
background:radial-gradient(circle at 42% 38%, rgba(72,205,140,0.9) 0%, rgba(46,180,110,0.42) 48%, rgba(46,180,110,0) 80%);
box-shadow:0 0 10px rgba(72,205,140,0.5), 0 0 20px rgba(72,205,140,0.22);
filter:blur(0.4px);
}
.sentence-line.line-ok::before, .so-line.line-ok::before { transform:translateY(-50%) scale(1.18); }
.wa-line.line-ok::before { transform:translateY(-50%) scale(1.18); }
/* State 4 - line checked incorrect → soft, blurred red */
.sentence-line.line-bad::before, .so-line.line-bad::before, .wa-line.line-bad::before {
background:radial-gradient(circle at 42% 38%, rgba(255,110,125,0.9) 0%, rgba(230,70,90,0.42) 48%, rgba(230,70,90,0) 80%);
box-shadow:0 0 10px rgba(255,110,125,0.5), 0 0 20px rgba(255,110,125,0.2);
filter:blur(0.4px);
}
.sentence-line.line-bad::before, .so-line.line-bad::before { transform:translateY(-50%) scale(1.18); }
.wa-line.line-bad::before { transform:translateY(-50%) scale(1.18); }
.sentence-line { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:12px; font-size:17px; line-height:2.2; font-family:'Canela Text','DM Sans',sans-serif; letter-spacing:.2px; }
.drop-slot { display:inline-flex; align-items:center; justify-content:center; min-width:var(--slot-min-width); height:var(--slot-height); border-radius:var(--slot-radius); border:1.5px solid var(--slot-border); background:var(--slot-fill); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:0 14px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:normal; color:rgba(26,34,51,0.4); cursor:pointer; transition:all .38s cubic-bezier(.25,.1,.25,1); box-shadow:0 var(--slot-shadow-y) var(--slot-shadow-blur) rgba(26,34,51,var(--slot-shadow-opacity)), inset 0 1px 0 rgba(255,255,255,0.6); }
.drop-slot.filled { border-color:rgba(var(--accent-rgb),0.45); background:var(--slot-filled-fill); color:var(--text); box-shadow:0 2px 8px rgba(26,34,51,0.1), inset 0 1px 0 rgba(255,255,255,0.7); }
/* BUG FIX: dedicated drag-hover style (previously reused .filled) */
.drop-slot.drag-over { border-color:var(--accent); background:rgba(var(--accent-rgb),0.08); color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15); }
/* ── TEACHER-ONLY ANSWER TOOLTIP ──
Hovering any answer blank (drag slot or matching drop zone) shows the correct
answer in a small frosted pill above it - just for the teacher, so you don't have
to memorize every answer in every exercise. Pure CSS (data-answer already lives on
these elements), gated by body.is-teacher so students never see it. Works on these
two specifically because they're plain