/* Componentes: piezas de UI reutilizables entre vistas (barra superior,
   tarjetas, avisos, tablas). Extraído de app.css (Tarea 2) sin cambiar
   ningún valor. */

/* --- Barra superior -------------------------------------------------------
   Valores de Tokens.dc.html / Main.dc.html («barra superior»). */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 1.5rem;
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}

.marca {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--texto);
}
.marca:hover { text-decoration: none; color: var(--verde); }
.brace { color: var(--verde); }

/* Símbolo de HAET-CTF (app/templates/logo.html): bandera entre llaves. */
.marca,
.login-marca { display: inline-flex; align-items: center; gap: 0.5rem; }
.logo { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.logo-grande { width: 2.4em; height: 2.4em; }
.logo-llave { fill: none; stroke: var(--verde); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.logo-mastil { fill: none; stroke: var(--texto); stroke-width: 6; stroke-linecap: round; }
.logo-bandera { fill: var(--verde); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--texto-tenue);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--texto); text-decoration: none; }
.nav a.activo { color: var(--verde); border-bottom-color: var(--verde); }
.nav-admin { color: var(--ambar) !important; }
.nav-admin:hover { color: var(--ambar) !important; }
.nav-admin.activo { border-bottom-color: var(--ambar) !important; }

.sesion {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.125rem;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texto-tenue);
}
.sesion a { color: var(--azul); }
.sesion a:hover { color: var(--azul); text-decoration: underline; }
.usuario { color: var(--texto-tenue); }

.sesion-sep { width: 1px; height: 14px; background: var(--borde); }

.etiqueta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-tenue);
  background: rgba(255, 255, 255, 0.015);
}
.etiqueta-admin { color: var(--ambar); border-color: rgba(var(--ambar-rgb), 0.5); background: rgba(var(--ambar-rgb), 0.08); }

.inline { display: inline; margin: 0; }

.boton-enlace {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-family: var(--mono);
  color: var(--rojo);
  cursor: pointer;
  transition: color var(--trans);
}
.boton-enlace:hover { text-decoration: underline; }

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
  background: linear-gradient(180deg, var(--fondo-elev), var(--fondo-alt));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.75rem;
  box-shadow: var(--sombra);
  /* Separación entre tarjetas seguidas (y entre una tarjeta y la tabla de
     debajo): sin ella los bordes se tocaban y parecían una sola caja. */
  margin-bottom: 1.5rem;
}
/* La última de su contenedor no empuja nada, ni una tabla al final de una
   tarjeta: evita un hueco de más al fondo de la caja que las lleva. */
.tarjeta:last-child,
.tarjeta > .tabla-panel:last-child,
.tarjeta > .tabla-envoltorio:last-child { margin-bottom: 0; }

.tarjeta-estrecha { width: 100%; max-width: 420px; }

/* --- Avisos -------------------------------------------------------------- */

.aviso {
  padding: 0.7rem 0.95rem;
  border-radius: var(--radio-sm);
  border-left: 3px solid;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}
.aviso-error { background: rgba(var(--rojo-rgb), 0.09); border-color: var(--rojo); color: #ffb3ae; }
.aviso-warn  { background: rgba(var(--ambar-rgb), 0.09); border-color: var(--ambar); color: #f0d79a; }
.aviso-ok    { background: rgba(var(--verde-rgb), 0.09); border-color: var(--verde); color: #a7ecc4; }
.aviso-info  { background: rgba(var(--azul-rgb), 0.09); border-color: var(--azul); color: #b6dcf7; }

/* --- Chips ----------------------------------------------------------------
   Filtros de categoría/estado (Main.dc.html «filtros»). Valores literales de
   Tokens.dc.html; el borde+color verde de `.chip.activo` sale de Main.dc.html
   (Tokens.dc.html solo documenta el fondo). */

.chip {
  /* min-height:32px, no 44px: la regla de 44px es el objetivo AAA y no
     encaja con la densidad de las maquetas; el mínimo exigible (WCAG 2.2 AA)
     son 24px, que esta píldora ya cumple de sobra a 25px de alto. Subir a
     32px deja margen sin cambiar tipografía ni relleno horizontal. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  color: var(--texto-tenue);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  padding: 6px 14px;
  cursor: pointer;
}
.chip:hover { text-decoration: none; border-color: var(--borde-fuerte); color: var(--texto); }
.chip.activo {
  color: var(--verde);
  border-color: var(--verde);
  background: rgba(var(--verde-rgb), 0.08);
}

/* --- Píldora de estado ------------------------------------------------------
   Resuelto / pendiente / cerrado (Tokens.dc.html «píldoras de estado»). */

.pildora-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12.5px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  padding: 6px 13px;
  width: fit-content;
}
.pildora-estado .punto { width: 7px; height: 7px; border-radius: var(--radio-pill); flex: none; }
.pildora-estado-resuelto { color: var(--verde); }
.pildora-estado-resuelto .punto { background: var(--verde); }
.pildora-estado-pendiente { color: var(--ambar); }
.pildora-estado-pendiente .punto { background: var(--ambar); }
.pildora-estado-cerrado { color: var(--texto-tenue); }
.pildora-estado-cerrado .punto { background: var(--borde-fuerte); }

/* Dentro de una tabla la píldora es una sola palabra: no se parte en dos
   líneas («en / fecha») y lleva menos relleno, que en cada fila pesaba más
   que el dato. */
.tabla .pildora-estado { white-space: nowrap; padding: 3px 10px; font-size: 12px; }

/* --- Estado de fila ---------------------------------------------------------
   Punto + palabra + línea secundaria («puesto 3.º», «cierra en 3d 4h»), sin
   borde ni relleno: es como se lee el estado en cada fila de la tabla de
   retos (Main.dc.html «tabla», columna «estado»). Distinto de
   `.pildora-estado`, que sí lleva borde y fondo y se usa suelta (fuera de
   tabla). */

.estado-fila { display: flex; flex-direction: column; gap: 3px; }
.estado-fila-linea { display: flex; align-items: center; gap: 7px; }
.estado-fila-linea .punto { width: 7px; height: 7px; border-radius: var(--radio-pill); flex: none; }
.estado-fila-etiqueta { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.estado-fila-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-tenue);
  padding-left: 14px;
}
.estado-fila-sub-cuenta { color: var(--ambar); }

.estado-fila-resuelto .punto { background: var(--verde); }
.estado-fila-resuelto .estado-fila-etiqueta { color: var(--verde); }
.estado-fila-pendiente .punto { background: var(--ambar); }
.estado-fila-pendiente .estado-fila-etiqueta { color: var(--ambar); }
.estado-fila-cerrado .punto { background: var(--borde-fuerte); }
.estado-fila-cerrado .estado-fila-etiqueta { color: var(--texto-tenue); }

/* --- Puntos de dificultad ---------------------------------------------------
   Tres puntos, tantos encendidos en verde como nivel de dificultad
   (Tokens.dc.html «dificultad»). */

.puntos-dificultad { display: inline-flex; align-items: center; gap: 4px; }
.puntos-dificultad .punto {
  width: 6px;
  height: 6px;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde-fuerte);
  background: transparent;
}
.puntos-dificultad .punto.on { background: var(--verde); border-color: var(--verde); }

/* --- Tiles (resumen numérico, Main.dc.html «tiles») ------------------------ */

.tile {
  background: var(--fondo-elev);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tile .valor { font-family: var(--mono); font-weight: 700; font-size: 28px; line-height: 1; }
.tile .etiqueta { font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); letter-spacing: 0.02em; }
.tile-verde .valor { color: var(--verde); }
.tile-ambar .valor { color: var(--ambar); }
.tile-texto .valor { color: var(--texto); }
.tile-rojo .valor { color: var(--rojo); }

/* --- Sello (solo en detalle de reto, Tokens.dc.html/Reto.dc.html) ---------- */

.sello {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: var(--radio-pill);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sello-titulo { font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; }
.sello-puesto { font-family: var(--mono); font-weight: 700; font-size: 24px; }

.sello-resuelto { border: 2px solid var(--verde); color: var(--verde); transform: rotate(-6deg); }
.sello-pendiente { border: 2px dashed var(--ambar); color: var(--ambar); }
.sello-cerrado { border: 2px solid var(--borde-fuerte); color: var(--texto-tenue); transform: rotate(4deg); }

/* --- Tablas --------------------------------------------------------------- */

/* Las cajas que se desplazan en horizontal son bloque contenedor de lo que
   llevan dentro con `position: absolute` (el texto oculto de los iconos): así
   lo recortan con la tabla, en vez de que se salga y dé scroll a la página. */
.tabla-envoltorio,
.tabla-scroll,
.tabla-panel { position: relative; }

.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-alt);
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra);
}

.tabla { border-collapse: collapse; width: 100%; font-size: 0.82rem; }

.tabla th {
  text-align: left;
  padding: 12px 20px;
  background: var(--fondo-elev);
  border-bottom: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.tabla td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--trans); }
.tabla tbody tr:hover { background: rgba(var(--verde-rgb), 0.03); }

/* Modificador para tablas matriciales (una columna por reto, panel_calificaciones.html):
   con ~22 retos el padding 12/20px de `.tabla` desborda. No cambia `.tabla` en
   general porque esa densidad es la correcta para el resto de tablas. */
.tabla-compacta th,
.tabla-compacta td { padding: 8px 12px; }

/* Filas de una sola línea con píldoras y botones (retos del curso): el texto
   se centra en vertical con ellos en vez de quedarse pegado arriba. */
.tabla-centrada td { vertical-align: middle; }

/* Tabla más ancha que la pantalla: se desplaza ella, no la página, y la
   primera columna se queda fija para saber qué fila se está leyendo.
   Con 30 alumnos en columnas la matriz de calificaciones no cabe de otra forma. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* La barra se ve: es la única pista de que la tabla sigue a la derecha, y la
     del navegador en un fondo oscuro es casi invisible. */
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}
.tabla-scroll::-webkit-scrollbar { height: 10px; }
.tabla-scroll::-webkit-scrollbar-track { background: transparent; }
.tabla-scroll::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: var(--radio-pill);
}
.tabla-scroll::-webkit-scrollbar-thumb:hover { background: var(--verde-oscuro); }

.tabla-scroll table {
  min-width: max-content;
}

/* Primera columna fija: al desplazar la tabla a lo ancho, el nombre de la fila
   (el alumno, el reto) se queda a la vista. Sin esto, tres columnas a la
   derecha ya no se sabe de quién es la fila que se está leyendo.
   La celda **tiene que** llevar fondo opaco: es lo que tapa el resto de la
   tabla al pasar por debajo. */
.tabla-panel .col-fija,
.tabla-envoltorio .col-fija,
.tabla-scroll th.col-reto-nombre,
.tabla-scroll td.col-reto-nombre {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--fondo-alt);
  box-shadow: 1px 0 0 var(--borde);
}

/* En la cabecera se cruzan las dos: fija a la izquierda y pegada arriba
   (`.tabla th` ya es `sticky top: 0`). Va por encima de las dos y con el fondo
   de cabecera, no con el de las filas. */
.tabla-panel th.col-fija,
.tabla-envoltorio th.col-fija,
.tabla-scroll th.col-reto-nombre {
  z-index: 3;
  background: var(--fondo-elev);
}

.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .tenue { color: var(--texto-tenue); }
.tabla .detalle { min-width: 22rem; }
.col-estrecha { width: 3rem; text-align: center; }
.col-reto { text-align: center; width: 2.5rem; }

.fila-propia { background: rgba(var(--verde-rgb), 0.07); }
.fila-alerta { background: rgba(var(--rojo-rgb), 0.08); }

.pos-1 { color: var(--ambar); font-weight: 700; }
.pos-2 { color: #c8d3d0; font-weight: 700; }
.pos-3 { color: #cd7f32; font-weight: 700; }

.marca-ok { color: var(--verde); font-weight: 700; }
.texto-alerta { color: var(--rojo); }
.flag-celda { max-width: 24rem; overflow-wrap: anywhere; }

.accion {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde);
  white-space: nowrap;
}
.accion-info  { color: var(--texto-tenue); }
.accion-warn  { color: var(--ambar); border-color: rgba(var(--ambar-rgb), 0.4); background: rgba(var(--ambar-rgb), 0.07); }
.accion-alert { color: var(--rojo); border-color: var(--rojo); background: rgba(var(--rojo-rgb), 0.08); font-weight: 700; }

.acciones-fila { display: flex; gap: 0.6rem; white-space: nowrap; }

/* --- Acciones con icono (templates/iconos.html) ---------------------------
   En una tabla del panel, tres acciones escritas ocupaban más que los datos de
   la fila. El icono lleva siempre `title` y un texto oculto para lectores de
   pantalla: se comprime el dibujo, no la información. */

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.boton-icono:hover {
  color: var(--verde);
  border-color: rgba(var(--verde-rgb), 0.5);
  background: rgba(var(--verde-rgb), 0.08);
  text-decoration: none;
}
.boton-icono .icono { flex: none; }

/* Fila de acciones que son solo iconos: van en una línea, que es justo lo que
   las hace ocupar poco. La variante con texto (`.acciones-fila` a secas) sí
   puede partirse en dos líneas. */
.acciones-iconos {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
  align-items: center;
}

/* Una acción que quita algo (archivar, dar de baja) se avisa en rojo al pasar
   por encima; en reposo es igual de discreta que las demás. */
.boton-icono-peligro:hover {
  color: var(--rojo);
  border-color: rgba(var(--rojo-rgb), 0.5);
  background: rgba(var(--rojo-rgb), 0.08);
}

/* Acción marcada como activa (el ojo de un reto visible). */
.boton-icono-activo { color: var(--verde); border-color: rgba(var(--verde-rgb), 0.4); }

/* Fuera de una tabla (la tarjeta «Acciones» de una ficha) los enlaces van más
   separados: con 0.6rem «reset de contraseña» y «dar de baja de la clase» se
   leían como una sola frase. */
.tarjeta > .acciones-fila { gap: 1.6rem; flex-wrap: wrap; }

/* Botones de acción principales (portada del profesor): llenan el ancho de la
   página a partes iguales, sin hueco al final. Cuatro en una fila; en pantallas
   estrechas bajan a dos por fila, y a uno en un móvil. */
.acciones-bloque {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  white-space: normal;
}
.acciones-bloque .boton { width: 100%; text-align: center; }
@media (max-width: 860px) {
  .acciones-bloque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .acciones-bloque { grid-template-columns: 1fr; }
}

/* --- Ventana de terminal (bloques de código, spec §8.4) ------------------- */
/* Se aplica en el servidor DESPUÉS de bleach (app/codigo.py): un enunciado no
   puede falsificar estas clases. Valores de Tokens.dc.html § «Ventana de
   terminal (bloques de código)». */

.term {
  border-radius: 8px;
  border: 1px solid var(--borde-fuerte);
  background: var(--fondo);
  overflow: hidden;
  margin: 0 0 1rem;
  box-shadow: var(--sombra);
}

.term-bar {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--fondo-elev);
  border-bottom: 1px solid var(--borde);
}

.term-dots { display: flex; align-items: center; gap: 8px; }

.term-dot { width: 11px; height: 11px; border-radius: 50%; }
.term-dot-rojo  { background: #ff5f57; }
.term-dot-ambar { background: #febc2e; }
.term-dot-verde { background: #28c840; }

.term-lang {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-tenue);
  text-transform: lowercase;
}

.term-body {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.65;
  overflow-x: auto;
  color: var(--texto);
}

/* --- Tabla responsive (se apila en pantallas estrechas, sin scroll lateral) */

@media (max-width: 720px) {
  .tabla-responsive .tabla-envoltorio { overflow-x: visible; border: none; background: none; box-shadow: none; }
  .tabla-responsive table, .tabla-responsive thead, .tabla-responsive tbody,
  .tabla-responsive th, .tabla-responsive td, .tabla-responsive tr { display: block; }
  .tabla-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-responsive tr {
    background: linear-gradient(180deg, var(--fondo-elev), var(--fondo-alt));
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--sombra);
  }
  .tabla-responsive td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border: none;
    text-align: right;
  }
  .tabla-responsive td::before {
    content: attr(data-label);
    color: var(--texto-tenue);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
  }
  .tabla-responsive td:empty { display: none; }
  .tabla-responsive .acciones-fila { justify-content: flex-end; }
}

/* Selector de clase del panel (Fase 12): el alcance de /admin se cambia aquí,
   no con un parámetro en la URL. */
.selector-clase {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

/* Casillas del formulario de publicación: una por línea, sin la rejilla. */
.casillas {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.8rem 0;
}

/* La etiqueta de una casilla es una frase, no el rótulo de un campo: sin
   mayúsculas ni tracking, que ahí se leen a trompicones. */
.casillas label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--texto);
}

/* Grupo de casillas en fila (elegir clases al dar de alta): cada una es una
   pastilla que se marca entera, no una casilla suelta con su texto al lado. */
.grupo-casillas {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  padding: 0.7rem 0.9rem 0.9rem;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.grupo-casillas legend {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  padding: 0 0.35rem;
}

.casilla-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--fondo-alt);
  color: var(--texto);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}

.casilla-chip:hover { border-color: var(--borde-fuerte); }

/* `:has` deja marcar la pastilla entera sin una línea de JavaScript. */
.casilla-chip:has(input:checked) {
  border-color: rgba(var(--verde-rgb), 0.55);
  background: rgba(var(--verde-rgb), 0.1);
}

/* Etiqueta solo para lectores de pantalla (cabecera de la columna de marcar). */
/* `top`/`left` a 0: sin ellos el texto se coloca donde caería en el flujo
   (al final de una fila de tabla ancha) y, como su bloque contenedor puede
   ser la página y no la caja con scroll, ensanchaba la página entera. */
.visualmente-oculto {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Diálogo de confirmación de acciones peligrosas (Fase 12). */
.dialogo-confirmar {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-alt);
  color: var(--texto);
  padding: 1.2rem;
  max-width: 32rem;
  box-shadow: var(--sombra);
}

.dialogo-confirmar::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialogo-texto { margin-top: 0; }

.dialogo-escribe {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.dialogo-botones {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Los botones del diálogo van pegados al texto, sin el margen de un formulario. */
.dialogo-botones .boton { margin-top: 0; }

/* Segundos que faltan para poder confirmar una acción crítica. */
.dialogo-cuenta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}

/* Banda del modo alumno: tiene que verse sin buscarla. */
.banda-modo-alumno {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  background: rgba(var(--ambar-rgb), 0.12);
  border-bottom: 1px solid var(--borde);
}

/* El selector de clase, dentro de la barra superior. */
.selector-clase-superior {
  margin-bottom: 0;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* Etiqueta y desplegable siempre en la misma línea: el desplegable encoge
   antes que mandar «clase» encima. */
.selector-clase-superior select { max-width: 20rem; min-width: 0; }

/* Controles del profesor centrados en la barra: clase activa y vista. */
.barra-centro {
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Interruptor de vista: una sola pastilla con dos mitades, profesor y alumno.
   La mitad activa se ilumina; la otra queda tenue. */
.interruptor-vista {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--fondo);
}

.interruptor-opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 28px;
  padding: 0 0.5rem;
  border: none;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color var(--trans), background var(--trans);
}

.interruptor-opcion:hover { color: var(--texto); }

.interruptor-opcion.activo {
  color: var(--verde);
  background: rgba(var(--verde-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--verde-rgb), 0.45);
}

/* Menú de la cuenta: pastilla en la barra y tarjeta flotante al abrirla.
   El panel va `position: absolute`, o sea fuera del flujo: la barra mantiene
   su alto tanto abierto como cerrado. Se abre con `details`, sin JavaScript
   (la CSP no admite el script embebido). */
.menu-usuario {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}

.menu-usuario-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--fondo);
  color: var(--texto-tenue);
  cursor: pointer;
  list-style: none;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}

.menu-usuario-boton::-webkit-details-marker { display: none; }
.menu-usuario-boton::marker { content: ""; }
.menu-usuario-boton:hover { color: var(--texto); border-color: var(--borde-fuerte); }

.menu-usuario[open] .menu-usuario-boton {
  color: var(--verde);
  border-color: var(--verde);
  background: rgba(var(--verde-rgb), 0.1);
}

.menu-usuario-panel {
  position: absolute;
  right: 0;
  /* Por debajo del borde de la barra, no pegado al icono: el icono está
     centrado en una barra de 64px, así que el hueco se mide desde él. */
  top: calc(100% + 1.05rem);
  z-index: 60;
  width: 17.5rem;
  padding: 0.55rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--fondo-elev), var(--fondo-alt));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
}

/* Pico que apunta al icono, como en un menú de escritorio. */
.menu-usuario-panel::before {
  content: "";
  position: absolute;
  right: 12px;
  top: -5px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--fondo-elev);
  border-left: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
}

.menu-usuario-cabecera {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem 0.7rem;
  border-bottom: 1px solid var(--borde);
}

.menu-usuario-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(var(--verde-rgb), 0.45);
  background: rgba(var(--verde-rgb), 0.1);
  color: var(--verde);
}

.menu-usuario-datos {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.menu-usuario-nombre {
  font-size: 0.9rem;
  color: var(--texto);
}

.menu-usuario-correo {
  font-size: 11.5px;
  color: var(--texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-usuario-datos .etiqueta { align-self: flex-start; margin-top: 0.15rem; }

.menu-usuario-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.45rem;
}

.menu-usuario-opciones form { margin: 0; }

.menu-usuario-opciones a,
.menu-usuario-salir {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: none;
  border-radius: var(--radio-sm);
  background: none;
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}

.menu-usuario-opciones a:hover,
.menu-usuario-salir:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--verde);
  text-decoration: none;
}

.menu-usuario-salir { color: var(--rojo); }
.menu-usuario-salir:hover { color: var(--rojo); background: rgba(var(--rojo-rgb), 0.1); }

/* --- Tablas vivas (tabla-viva.js): filtro, orden y valores por columna ------
   El script añade estas piezas a cualquier `.tabla`; sin él la tabla se ve
   tal cual la manda el servidor. */
.tabla-herramientas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.tabla-herramientas .tabla-filtro,
.tabla-filtro {
  max-width: 18rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
}
.tabla-cuenta { font-family: var(--mono); font-size: 0.75rem; color: var(--texto-tenue); }

/* La cabecera ordenable es un botón que ocupa el texto de la `th`: hereda su
   letra y su color para que la tabla no cambie de aspecto. */
.th-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.th-ordenar:hover { color: var(--texto); }
.th-flecha::after { content: "↕"; opacity: 0.35; font-size: 0.9em; }
th[aria-sort="ascending"] .th-flecha::after { content: "↑"; opacity: 1; color: var(--verde); }
th[aria-sort="descending"] .th-flecha::after { content: "↓"; opacity: 1; color: var(--verde); }
th[aria-sort] .th-ordenar { color: var(--texto); }

.th-filtro { display: inline-flex; vertical-align: middle; margin-left: 0.35rem; }
.th-filtro-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}
.th-filtro-boton:hover { color: var(--texto); border-color: var(--borde-fuerte); }
/* Con algún valor escondido, el embudo se enciende: hay filas que no se ven. */
.th-filtro-boton.activo { color: var(--verde); border-color: rgba(var(--verde-rgb), 0.5); background: rgba(var(--verde-rgb), 0.1); }

/* Panel en la capa superior (`popover`): el navegador lo centra; aquí solo
   se le da el aspecto de una tarjeta. */
.th-filtro-panel {
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--fondo-alt);
  color: var(--texto);
  box-shadow: var(--sombra);
  text-transform: none;
  letter-spacing: normal;
}
.th-filtro-panel::backdrop { background: rgba(0, 0, 0, 0.35); }
.th-filtro-titulo { margin: 0 0 0.6rem; font-family: var(--mono); font-size: 0.8rem; color: var(--texto-tenue); }
.th-filtro-panel label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--texto);
  cursor: pointer;
}

.tabla-sin-resultados td { color: var(--texto-tenue); font-style: italic; }