/*
* Room Teachers — una sola hoja, sin framework.
*
* Sustituye a la hoja terracota manteniendo todos los nombres de tokens y de
* componentes: las plantillas Jinja no cambian una línea.
*
* Dirección: noche tranquila. Fondo azul-gris profundo, un solo acento
* blurple usado como línea y como halo, nunca como relleno grande. Los
* botones primarios son un contorno del acento, no un bloque de color: nada
* en la pantalla grita antes de que el alumno hable.
*
* Tema claro incluido: `prefers-color-scheme` y, si algún día hay un
* conmutador, `[data-theme="light"]` / `[data-theme="dark"]` en .
*/
/* --- tokens: noche -------------------------------------------------------- */
:root {
--ink: #e9e9ed;
--ink-soft: #b2b6ca;
--ink-faint: #75798c;
--paper: #161826;
--card: #232532;
--line: #3f424d;
--line-soft: #2b2d38;
/* Blurple. Suficiente cromatismo para ser un acento sobre rampas
desaturadas, sin la urgencia del rojo o del naranja. */
--accent: #9184d9;
--accent-dark: #b5abfc; /* el paso más claro: hover y texto sobre el wash */
--accent-wash: #2b2741;
--good: #7ec8a2;
--good-wash: #1d2e2a;
--warn: #d8b46a;
--warn-wash: #302b1f;
--bad: #e08a86;
--bad-wash: #332229;
--radius: 8px;
--radius-sm: 4px;
--shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .45);
--font: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--shell: 1080px;
color-scheme: dark;
}
/* --- tokens: día ---------------------------------------------------------- */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--ink: #23252e;
--ink-soft: #595d6c;
--ink-faint: #75798c;
--paper: #f3f5fe;
--card: #fdfdff;
--line: #cfd3e5;
--line-soft: #e4e7f5;
--accent: #5d5294;
--accent-dark: #423a6a;
--accent-wash: #f5f4ff;
--good: #2f6b50;
--good-wash: #e9f3ee;
--warn: #7d5e12;
--warn-wash: #f7f0dd;
--bad: #97403c;
--bad-wash: #f9ebea;
--shadow: 0 1px 2px rgba(35, 37, 46, .05), 0 8px 24px -14px rgba(35, 37, 46, .22);
color-scheme: light;
}
}
:root[data-theme="light"] {
--ink: #23252e;
--ink-soft: #595d6c;
--ink-faint: #75798c;
--paper: #f3f5fe;
--card: #fdfdff;
--line: #cfd3e5;
--line-soft: #e4e7f5;
--accent: #5d5294;
--accent-dark: #423a6a;
--accent-wash: #f5f4ff;
--good: #2f6b50;
--good-wash: #e9f3ee;
--warn: #7d5e12;
--warn-wash: #f7f0dd;
--bad: #97403c;
--bad-wash: #f9ebea;
--shadow: 0 1px 2px rgba(35, 37, 46, .05), 0 8px 24px -14px rgba(35, 37, 46, .22);
color-scheme: light;
}
/* Inter, alojada en el propio servidor. SIL Open Font License. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/fonts/inter-var.woff2") format("woff2");
}
* { box-sizing: border-box; }
/* El atributo `hidden` gana a cualquier clase.
La regla del navegador es `[hidden] { display: none }`, que pierde en
especificidad contra `.btn { display: inline-flex }` — así que el botón de
silenciar el micrófono, marcado como oculto hasta que hay clase, se veía
igualmente desde el primer momento. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
}
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-wash); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.18; margin: 0; }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
/* --- shell ---------------------------------------------------------------- */
/* Opaque by default, translucent only where the blur behind it really works.
The other way round — translucent always, blurred if supported — is what it
used to be, and it meant that anywhere `backdrop-filter` does not apply the
header was simply 85% opaque over a scrolling page. On `/admin/usuarios`
and `/admin/mensajes` the row of pills sits exactly where the bar ends up
after a small scroll, so it showed through and read as a second row of tabs
riding on the first.
Not a rare configuration: Safari before 18 needs the `-webkit-` prefix,
which was missing, and Firefox drops the effect whenever hardware
acceleration is off. */
.topbar {
background: var(--paper);
border-bottom: 1px solid var(--line-soft);
position: sticky;
top: 0;
z-index: 20;
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
.topbar {
background: color-mix(in srgb, var(--paper) 85%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
.topbar__inner {
max-width: var(--shell);
margin: 0 auto;
padding: .7rem 1.25rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
/* La marca. El símbolo va sin `fill` en el marcado y se pinta desde aquí, con
los tokens que ya existen: así el tema claro no necesita otro dibujo y la
marca cambia sola cuando cambia el tema. El color va por `nth-child`, de
modo que **el orden de los cuatro `rect` en el parcial importa**. */
.brand {
display: flex;
align-items: center;
gap: .55rem;
white-space: nowrap;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: -.02em;
color: var(--ink);
text-decoration: none;
}
.brand i { font-style: normal; font-weight: 300; color: var(--ink-soft); }
/* `flex: none` porque en la barra el símbolo comparte fila con una navegación
que sí puede encogerse, y sin esto se aplasta antes que ella. */
.brand__mark { height: 20px; width: auto; flex: none; }
.brand__mark rect { fill: var(--line); }
.brand__mark rect:nth-child(2) { fill: var(--accent); }
.brand__mark rect:nth-child(3) { fill: var(--accent-dark); }
/* Apilada: entrar, crear cuenta, pantallas de espera. El margen porque debajo
va el título de la pantalla, y sin él la marca y el titular se tocan. */
.brand--stack { flex-direction: column; gap: .75rem; font-size: 1.3rem; }
.brand--stack .brand__mark { height: 35px; }
.page-head .brand--stack { margin-bottom: 1.1rem; }
/* En la clase preparada el símbolo pierde el acento. Es la única pantalla con
un solo botón que importa, y dos cosas moradas compitiendo son una de más.
A cambio va algo más grande: en gris y a 20 px desaparecía del todo. */
.live-hero .brand__mark { height: 26px; margin-bottom: 1rem; }
.live-hero .brand__mark rect { fill: var(--line); }
.live-hero .brand__mark rect:nth-child(2) { fill: var(--ink-faint); }
.live-hero .brand__mark rect:nth-child(3) { fill: var(--ink-soft); }
.nav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.nav a {
color: var(--ink-soft);
text-decoration: none;
font-size: .92rem;
font-weight: 500;
padding: .2rem 0;
border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.wallet {
display: inline-flex;
align-items: baseline;
gap: .35rem;
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--accent-dark);
background: transparent;
border-radius: 999px;
padding: .28rem .8rem;
font-size: .87rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
text-decoration: none;
white-space: nowrap;
}
.wallet:hover { background: var(--accent-wash); color: var(--accent-dark); }
/* El nav va vacío en la cabecera pública; sin esto se queda ocupando el hueco
flexible y empuja los enlaces de acceso contra el borde. */
.nav:empty { display: none; }
.topbar__link {
color: var(--ink-soft);
text-decoration: none;
font-size: .92rem;
font-weight: 500;
white-space: nowrap;
}
.topbar__link:hover { color: var(--ink); }
.wallet small { font-weight: 400; color: var(--ink-faint); }
main { max-width: var(--shell); margin: 0 auto; padding: 2.2rem 1.25rem 5rem; }
.page-head { margin-bottom: 1.5rem; }
.page-head p { color: var(--ink-soft); max-width: 62ch; }
/* Entregado como `.page-head .kicker`; generalizado porque el hero de la
clase en vivo lleva el mismo sobretítulo y no está dentro de `.page-head`.
El descendiente era un subconjunto de esto, así que nada pierde estilo. */
.kicker {
font-size: .76rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: .35rem;
}
/* --- cards ---------------------------------------------------------------- */
.card {
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--shadow);
}
/* Separación entre bloques apilados uno tras otro.
Una rejilla y una tarjeta son la misma cosa en el flujo de la página: un
bloque con una caja alrededor. `.card + .card` a secas se dejaba fuera
todos los pares en los que uno de los dos era una rejilla, y una rejilla
seguida de una tarjeta salía a cero: dos cajas sin hueco se leen como una
sola con una raya en medio. Pasaba en las fichas de `/admin/usuarios/{id}`
y `/admin/mensajes/{id}`, que son las pantallas que alternan las dos. */
/* …y un `