/* static/style.css
   EduNexus — sistema de diseño

   Identidad: el azul institucional de siempre, pero construido como
   un sistema y no como una suma de reglas sueltas. Tres decisiones
   que atraviesan todo el archivo:

   1. ESCALA. Espaciados, radios, sombras y tipografía salen de una
      escala fija (variables de abajo). Nada de valores inventados
      caso por caso: eso es lo que hace que una interfaz se vea
      "hecha a mano" en el mal sentido.
   2. JERARQUÍA POR PESO, NO POR COLOR. Los títulos y los datos
      mandan por tamaño y contraste; el color se reserva para lo que
      significa algo (riesgo, éxito, error).
   3. REPOSO. Bordes suaves y sombras muy tenues en vez de líneas
      duras. La pantalla debe poder mirarse cuatro horas seguidas.

   El motivo del semáforo (NORMAL / MEDIO / ALTO / CRÍTICO) se
   conserva: es el mismo código de color que ya usa el backend para
   el riesgo académico. */

:root {
  /* ---- Neutros ---- */
  --papel: #F4F6F9;
  --papel-linea: #E7ECF2;
  --tarjeta: #FFFFFF;
  --tinta: #16202B;
  --tinta-media: #3E4B59;
  --tinta-tenue: #667585;
  --borde: #E3E8EE;
  --borde-fuerte: #CFD7E0;

  /* ---- Marca ----
     El azul de siempre, pero con un tono más profundo para los
     fondos y uno más luminoso para lo interactivo: un solo color
     plano se ve plano, dos tonos del mismo color se ven intencionales. */
  --marca: #24384F;
  --marca-hover: #1A2A3C;
  --marca-profundo: #16243A;
  --marca-claro: #35577A;
  --marca-suave: #EDF2F8;
  --marca-borde: #C6D4E2;
  --acento: #24384F;          /* alias: algunas plantillas lo usan */

  /* Acento cálido, en dosis mínimas: solo para lo que la plataforma
     "hace por ti" (IA, sugerencias). Que se note cuando aparece. */
  --destello: #C77B2B;
  --destello-suave: #FBF2E6;

  /* ---- Semáforo académico ---- */
  --semaforo-normal: #2E7D32;
  --semaforo-normal-bg: #E9F5EC;
  --semaforo-medio: #B57C00;
  --semaforo-medio-bg: #FBF3E0;
  --semaforo-alto: #C1440E;
  --semaforo-alto-bg: #FCEBE3;
  --semaforo-critico: #9B1C1C;
  --semaforo-critico-bg: #FAE8E8;

  /* Inclusión: el quinto estado. No es un rojo más suave ni un verde
     prestado — es otro color, porque es otra vara de medir. */
  --semaforo-piar: #4A5FA8;
  --semaforo-piar-bg: #ECEFF9;

  /* ---- Escala de espaciado ---- */
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px; --e6: 32px;  --e7: 48px;  --e8: 64px;

  /* ---- Radios ---- */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 14px;
  --radio-pastilla: 999px;

  /* ---- Sombras: tenues y en capas, nunca duras ---- */
  --sombra-1: 0 1px 2px rgba(20, 35, 55, 0.06);
  --sombra-2: 0 1px 3px rgba(20, 35, 55, 0.06), 0 6px 16px rgba(20, 35, 55, 0.07);
  --sombra-3: 0 2px 6px rgba(20, 35, 55, 0.06), 0 16px 40px rgba(20, 35, 55, 0.12);
  --anillo-foco: 0 0 0 3px rgba(53, 87, 122, 0.22);

  /* ---- Tipografía ---- */
  --fuente-display: "Source Serif 4", Georgia, serif;
  --fuente-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-datos: "IBM Plex Mono", "Courier New", monospace;

  --transicion: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  /* Fondo liso con un velo apenas perceptible arriba: da profundidad
     sin la cuadrícula de cuaderno, que leía más a útil escolar que a
     producto. */
  /* Un halo azulado muy tenue arriba: da profundidad y hace que las
     tarjetas blancas "floten" en vez de recortarse contra un gris. */
  background:
    radial-gradient(1200px 420px at 50% -180px, rgba(53, 87, 122, 0.10), transparent 70%) fixed,
    linear-gradient(180deg, #E9EEF5 0%, var(--papel) 420px) fixed,
    var(--papel);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(44, 62, 80, 0.15); }

a {
  color: var(--marca);
  text-underline-offset: 2px;
}
a:hover { color: var(--marca-hover); }

h1, h2, h3 { line-height: 1.25; }

code {
  font-family: var(--fuente-datos);
  font-size: 0.92em;
  background: var(--marca-suave);
  padding: 1px 5px;
  border-radius: var(--radio-s);
}

/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */

.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: 0 var(--e5);
  /* min-height y no height: con altura fija, un enlace que se envuelve
     se sale por debajo de la barra en vez de hacerla crecer. Asi es
     como "Salir" acabo colgando en un segundo renglon. */
  min-height: 60px;
  flex-wrap: wrap;
  background: linear-gradient(100deg, var(--marca-profundo) 0%, var(--marca) 55%, var(--marca-claro) 160%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 20px rgba(16, 32, 48, 0.22);
}

.barra-superior .marca {
  font-family: var(--fuente-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

.barra-superior .sesion {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.88rem;
  /* nowrap a proposito: si no cabe, no queremos que se desordene sola
     sino que aparezca el boton de menu (mas abajo). */
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Los enlaces de la barra son pastillas, no texto subrayado: se ven
   como navegación y no como enlaces sueltos dentro de una frase. */
.barra-superior .sesion a {
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radio-pastilla);
  transition: background var(--transicion), color var(--transicion);
}
.barra-superior .sesion a:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.barra-superior .sesion span {
  color: rgba(255,255,255,0.7);
  padding-left: var(--e2);
  border-left: 1px solid rgba(255,255,255,0.2);
  margin-left: var(--e1);
}

/* ==========================================================
   CONTENEDOR
   ========================================================== */

.contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e8);
}

/* ==========================================================
   LOGIN
   ========================================================== */

.login-envoltorio {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e5);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(53, 87, 122, 0.16), transparent 70%),
    linear-gradient(180deg, #E6ECF4 0%, var(--papel) 60%);
}

.login-tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: var(--e7) var(--e6);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--sombra-3);
}

/* Filo de marca arriba de la tarjeta de entrada: es la primera
   pantalla que ve cualquiera, y es donde el producto se presenta. */
.login-tarjeta {
  position: relative;
  overflow: hidden;
}
.login-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marca-claro), var(--marca), var(--destello));
}

.login-tarjeta h1 {
  font-family: var(--fuente-display);
  font-size: 1.85rem;
  color: var(--marca-profundo);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e1);
}

.login-tarjeta .subtitulo {
  color: var(--tinta-tenue);
  font-size: 0.92rem;
  margin: 0 0 var(--e6);
}

/* ==========================================================
   FORMULARIOS
   ========================================================== */

.campo { margin-bottom: var(--e4); }

.campo label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tinta-media);
  margin-bottom: var(--e1);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  font-family: var(--fuente-ui);
  font-size: 0.94rem;
  color: var(--tinta);
  background: var(--tarjeta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo input::placeholder,
.campo textarea::placeholder { color: #9AA6B4; }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #B8C3CE; }

/* Foco visible pero amable: anillo suave en vez del outline duro del
   navegador. Se aplica a todo lo enfocable, no solo a los inputs. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--anillo-foco);
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--marca); width: auto; }

input[type="file"] {
  font-size: 0.88rem;
  color: var(--tinta-media);
}

/* ==========================================================
   BOTONES
   ========================================================== */

.boton {
  width: 100%;
  padding: 11px 18px;
  background: linear-gradient(180deg, var(--marca-claro) 0%, var(--marca) 100%);
  color: #fff;
  border: 1px solid var(--marca-profundo);
  border-radius: var(--radio-s);
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.boton:hover {
  background: linear-gradient(180deg, var(--marca) 0%, var(--marca-hover) 100%);
  box-shadow: var(--sombra-2);
}
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.boton-secundario {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--marca-borde);
  background: var(--tarjeta);
  color: var(--marca);
  border-radius: var(--radio-s);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton-secundario:hover {
  background: var(--marca-suave);
  border-color: var(--marca);
  color: var(--marca-hover);
}
.boton-secundario:focus-visible { outline: none; box-shadow: var(--anillo-foco); }

.boton-mini {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radio-s);
  border: 1px solid var(--marca-borde);
  background: var(--tarjeta);
  color: var(--marca);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--fuente-ui);
  transition: background var(--transicion), border-color var(--transicion);
}
.boton-mini:hover { background: var(--marca-suave); border-color: var(--marca); }
.boton-mini:focus-visible { outline: none; box-shadow: var(--anillo-foco); }

.boton-peligro {
  border-color: #E3B5B5;
  color: var(--semaforo-critico);
}
.boton-peligro:hover { background: var(--semaforo-critico-bg); border-color: var(--semaforo-critico); }

/* Acciones destructivas discretas: gris hasta que te acercas. Borrar
   nunca debe competir visualmente con la acción principal. */
.boton-eliminar-discreto {
  background: none;
  border: none;
  color: var(--tinta-tenue);
  cursor: pointer;
  font-family: var(--fuente-ui);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 0;
  transition: color var(--transicion);
}
.boton-eliminar-discreto:hover { color: var(--semaforo-critico); }

.form-inline-eliminar { display: inline; }

/* ==========================================================
   TÍTULOS
   ========================================================== */

h1.titulo-seccion {
  font-family: var(--fuente-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--marca-profundo);
  margin: 0 0 var(--e5);
}

/* Un filo corto antes del subtítulo: ordena la página en bloques sin
   necesidad de líneas divisorias que la parten. */
.titulo-subseccion::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  background: var(--marca-claro);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: -0.1em;
}

.titulo-subseccion {
  font-family: var(--fuente-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--e6) 0 var(--e3);
}

.subtitulo {
  color: var(--tinta-tenue);
  font-size: 0.9rem;
}

/* ==========================================================
   TARJETAS DE CURSO / LISTAS
   ========================================================== */

.lista-cursos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e4);
}

.tarjeta-curso {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--e5);
  text-decoration: none;
  color: var(--tinta);
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-curso:hover {
  border-color: var(--marca-borde);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.tarjeta-curso .codigo {
  font-family: var(--fuente-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tarjeta-curso .conteo {
  color: var(--tinta-tenue);
  font-size: 0.85rem;
  margin-top: var(--e1);
}

.lista-estudiantes {
  display: flex;
  flex-direction: column;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}

.fila-estudiante {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tarjeta);
  padding: var(--e3) var(--e4);
  text-decoration: none;
  color: var(--tinta);
  border-top: 1px solid var(--borde);
  transition: background var(--transicion);
}
.fila-estudiante:first-child { border-top: none; }
.fila-estudiante:hover { background: var(--marca-suave); }

/* ==========================================================
   FICHA DE ESTUDIANTE + SEMÁFORO
   ========================================================== */

.ficha-estudiante {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--e5);
  background:
    linear-gradient(180deg, #FAFCFE 0%, var(--tarjeta) 120px),
    var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: var(--e5) var(--e5) var(--e5) var(--e4);
  box-shadow: var(--sombra-2);
  margin-bottom: var(--e6);
}

.indice-semaforo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Las inactivas son franjas delgadas: acompañan sin gritar. La
   activa se ensancha y es la única que lleva texto. */
.pestana-semaforo {
  width: 8px;
  margin: 0 auto;
  flex: 1;
  border-radius: var(--radio-pastilla);
  opacity: 0.3;
  min-height: 18px;
  transition: opacity var(--transicion);
}
.pestana-semaforo.activa {
  opacity: 1;
  width: 100%;
  border-radius: var(--radio-m);
  flex: 2.2;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  color: #fff;
  font-family: var(--fuente-ui);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: var(--e2) 0;
}
.pestana-semaforo:not(.activa) {
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

.pestana-semaforo.normal { background: var(--semaforo-normal); }
.pestana-semaforo.medio { background: var(--semaforo-medio); }
.pestana-semaforo.alto { background: var(--semaforo-alto); }
.pestana-semaforo.critico { background: var(--semaforo-critico); }
.pestana-semaforo.con-piar { background: var(--semaforo-piar); }

.info-estudiante h1 {
  font-family: var(--fuente-display);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e1);
}

.info-estudiante .detalle {
  color: var(--tinta-tenue);
  font-size: 0.92rem;
  margin-bottom: var(--e3);
}

.acciones-estudiante {
  margin-top: var(--e4);
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
}

.pmi-nota {
  margin-top: var(--e3);
  font-size: 0.86rem;
  color: var(--semaforo-medio);
  background: var(--semaforo-medio-bg);
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radio-pastilla);
}

/* ==========================================================
   INSIGNIAS
   ========================================================== */

.insignia-riesgo,
.insignia-prioridad {
  display: inline-block;
  font-family: var(--fuente-ui);
  font-weight: 600;
  border-radius: var(--radio-pastilla);
  white-space: nowrap;
}

.insignia-riesgo {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  padding: 5px 13px;
  border: 1px solid transparent;
}
.insignia-riesgo.normal { border-color: #C6E3CC; }
.insignia-riesgo.medio { border-color: #EBD8AC; }
.insignia-riesgo.alto { border-color: #EFC9B8; }
.insignia-riesgo.critico { border-color: #E7BEBE; }
.insignia-riesgo.normal { background: var(--semaforo-normal-bg); color: var(--semaforo-normal); }
.insignia-riesgo.medio { background: var(--semaforo-medio-bg); color: var(--semaforo-medio); }
.insignia-riesgo.alto { background: var(--semaforo-alto-bg); color: var(--semaforo-alto); }
.insignia-riesgo.critico { background: var(--semaforo-critico-bg); color: var(--semaforo-critico); }
.insignia-riesgo.con-piar { border-color: #C3CCE8; }
.insignia-riesgo.con-piar { background: var(--semaforo-piar-bg); color: var(--semaforo-piar); }

/* ---- La marca del PIAR donde el docente trabaja ----
   Tiene que verse sin gritar: quien solo va a teclear notas no debe
   tropezar con ella, y quien necesita leerla la encuentra sin salir
   de la pantalla ni perder lo que ya escribió. */
.marca-piar { display: inline-block; margin-left: 6px; }
.marca-piar > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.marca-piar > summary::-webkit-details-marker { display: none; }

.insignia-piar {
  font-family: var(--fuente-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radio-pastilla);
  background: var(--semaforo-piar-bg);
  color: var(--semaforo-piar);
  border: 1px solid #C3CCE8;
  white-space: nowrap;
}

.piar-aviso {
  font-family: var(--fuente-ui);
  font-size: 0.72rem;
  color: #b8730a;
  font-weight: 600;
}

.panel-piar {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--semaforo-piar-bg);
  border-left: 3px solid var(--semaforo-piar);
  border-radius: var(--radio-s);
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 460px;
}
.panel-piar p { margin: 0 0 8px; }
.panel-piar strong { color: var(--semaforo-piar); }

/* ---- Estados del caso de inclusión ----
   El sugerido NO usa el color del PIAR vigente a proposito: mientras
   nadie lo haya abierto no es un PIAR, y pintarlo igual haria creer
   que el estudiante ya esta fuera del seguimiento comun. */
/* ---- Buscador de la barra superior ----
   Con 16 estudiantes se llegaba a todos por el curso. Con cien, no. */
.buscador-barra { display: inline-flex; margin: 0; }
.buscador-barra input {
  padding: 5px 12px;
  border: 1px solid var(--borde-fuerte, #CFD7E0);
  border-radius: var(--radio-pastilla);
  font-family: var(--fuente-ui);
  font-size: 0.82rem;
  width: 160px;
  background: rgba(255, 255, 255, 0.9);
}
.buscador-barra input:focus {
  outline: none;
  border-color: var(--semaforo-piar, #4A5FA8);
  width: 200px;
}
@media (max-width: 700px) {
  .buscador-barra input { width: 120px; }
  .buscador-barra input:focus { width: 140px; }
}

.insignia-piar-estado {
  font-family: var(--fuente-ui);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: var(--radio-pastilla);
  vertical-align: middle;
  margin-left: 8px;
  background: var(--borde);
  color: var(--tinta-tenue, #666);
  white-space: nowrap;
}
.insignia-piar-estado.vigente {
  background: var(--semaforo-piar-bg);
  color: var(--semaforo-piar);
}
.insignia-piar-estado.sugerido {
  background: #FBF3E0;
  color: #B57C00;
}

.insignia-piar.sugerido {
  background: #FBF3E0;
  color: #B57C00;
  border-color: #EBD8AC;
}
.panel-piar.sugerido {
  background: #FBF3E0;
  border-left-color: #B57C00;
}
.panel-piar.sugerido strong,
.panel-piar.sugerido .piar-titulo { color: #B57C00; }

/* ---- Traer del banco de ajustes ----
   Va pegado encima del area de texto y en pequeño: es una ayuda, no el
   sitio donde se escribe. Lo que vale sigue siendo lo que el docente
   escriba debajo. */
.selector-banco {
  display: block;
  width: 100%;
  margin: 4px 0 6px;
  padding: 5px 8px;
  border: 1px dashed var(--borde-fuerte, #CFD7E0);
  border-radius: var(--radio-s);
  font-family: var(--fuente-ui);
  font-size: 0.78rem;
  color: var(--semaforo-piar, #4A5FA8);
  background: var(--semaforo-piar-bg, #ECEFF9);
}

.piar-titulo {
  font-family: var(--fuente-ui);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--semaforo-piar);
}

.insignia-prioridad {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  margin-right: var(--e1);
}
.insignia-prioridad.alta { background: var(--semaforo-alto-bg); color: var(--semaforo-alto); }
.insignia-prioridad.media { background: var(--semaforo-medio-bg); color: var(--semaforo-medio); }
.insignia-prioridad.baja { background: var(--semaforo-normal-bg); color: var(--semaforo-normal); }

.punto-semaforo {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--e1);
  vertical-align: baseline;
}
.punto-semaforo.verde { background: var(--semaforo-normal); }
.punto-semaforo.amarillo { background: var(--semaforo-medio); }
.punto-semaforo.naranja { background: var(--semaforo-alto); }
.punto-semaforo.rojo { background: var(--semaforo-critico); }
.punto-semaforo.blanco { background: var(--borde-fuerte); }
.punto-semaforo.morado { background: var(--semaforo-piar); }

/* ==========================================================
   PANORAMA ACADÉMICO (tarjetas de indicadores)
   ========================================================== */

.panorama-academico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e6);
}

/* Cada indicador lleva un filo de color arriba. Es un detalle
   pequeño, pero convierte una caja blanca en algo que parece
   diseñado — y el ojo agarra la fila de tarjetas como un grupo. */
.tarjeta-panorama {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: var(--e5);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-panorama::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  /* Se desvanece hacia la derecha: marca el inicio de la tarjeta sin
     ponerle una barra pesada encima. */
  background: linear-gradient(90deg, var(--marca-claro) 0%, rgba(53, 87, 122, 0.35) 45%, rgba(53, 87, 122, 0) 100%);
}
.tarjeta-panorama:hover { box-shadow: var(--sombra-2); }

.tarjeta-panorama-ancha { grid-column: 1 / -1; }

/* El rótulo va en mayúscula pequeña y gris: nombra el dato sin
   competir con él. El número es el protagonista. */
.tarjeta-panorama h3 {
  font-family: var(--fuente-ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-tenue);
  margin: 0 0 var(--e2);
}

.dato-grande {
  font-family: var(--fuente-display);
  font-size: 2.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--marca-profundo);
  /* Cifras de ancho fijo: los números de una columna quedan
     alineados entre tarjetas y filas. */
  font-variant-numeric: tabular-nums;
}

.dato-chico {
  font-family: var(--fuente-ui);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--tinta-tenue);
}

.detalle-panorama {
  font-size: 0.83rem;
  color: var(--tinta-tenue);
  margin-top: var(--e1);
  line-height: 1.5;
}

.indicador-tendencia {
  display: inline-block;
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 1rem;
}
.indicador-tendencia.mejorando { color: var(--semaforo-normal); }
.indicador-tendencia.empeorando { color: var(--semaforo-alto); }
.indicador-tendencia.estable { color: var(--tinta-tenue); }

.lista-tendencia-materias,
.lista-recomendaciones {
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
}
.lista-tendencia-materias li,
.lista-recomendaciones li {
  padding: var(--e2) 0;
  border-top: 1px solid var(--borde);
  font-size: 0.89rem;
}
.lista-tendencia-materias li:first-child,
.lista-recomendaciones li:first-child { border-top: none; padding-top: 0; }

/* ==========================================================
   FORMULARIOS DE ADMINISTRACIÓN
   ========================================================== */

.form-administracion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e3);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--e5);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra-1);
}

.form-administracion .campo {
  margin-bottom: 0;
  min-width: 150px;
}
.form-administracion .campo label { font-size: 0.76rem; }

.form-administracion .campo input,
.form-administracion .campo select {
  padding: 9px 11px;
  font-size: 0.9rem;
}

/* ==========================================================
   SELECTOR DE PERÍODO
   ========================================================== */

.selector-periodos {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e5);
  flex-wrap: wrap;
}

.pestana-periodo {
  padding: 7px 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  text-decoration: none;
  color: var(--tinta-media);
  font-family: var(--fuente-ui);
  font-size: 0.86rem;
  font-weight: 500;
  background: var(--tarjeta);
  transition: all var(--transicion);
}
.pestana-periodo:hover { border-color: var(--marca); color: var(--marca); }

.pestana-periodo.activa {
  border-color: var(--marca-profundo);
  background: linear-gradient(180deg, var(--marca-claro), var(--marca));
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sombra-1);
}

.pestana-periodo.sin-datos:not(.activa) {
  border-style: dashed;
  color: var(--tinta-tenue);
  background: transparent;
}

/* ==========================================================
   TABLAS
   ========================================================== */

.tabla-materias {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}

/* Encabezado claro, no un bloque azul: una tabla de datos se lee
   mejor cuando el peso visual está en los datos y no en el marco. */
.tabla-materias th {
  text-align: left;
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--marca);
  background: var(--marca-suave);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--marca-borde);
  white-space: nowrap;
}

.tabla-materias td {
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borde);
  vertical-align: top;
}
.tabla-materias tbody tr:first-child td { border-top: none; }
.tabla-materias tbody tr { transition: background var(--transicion); }
.tabla-materias tbody tr:hover { background: #F8FBFD; }
.tabla-materias tbody tr:hover .celda-calificacion { color: var(--marca-profundo); }

.tabla-materias .celda-calificacion {
  font-family: var(--fuente-datos);
  font-size: 1rem;
  font-weight: 500;
}

.lista-logros {
  margin: 0;
  padding-left: var(--e4);
  color: var(--tinta-media);
  font-size: 0.88rem;
}
.lista-logros li { margin-bottom: var(--e1); }

/* Sin borde ni fondo a propósito: varias plantillas la usan en línea
   con style="padding:0" para una sola frase, y un recuadro punteado
   ahí parecería una caja vacía rota. */
.sin-registros {
  color: var(--tinta-tenue);
  font-size: 0.92rem;
  padding: var(--e5);
  text-align: center;
}

/* ==========================================================
   MENSAJES
   ========================================================== */

.mensaje-exito,
.mensaje-error {
  border-radius: var(--radio-m);
  padding: var(--e3) var(--e4);
  font-size: 0.89rem;
  margin-bottom: var(--e5);
  border: 1px solid;
  border-left-width: 4px;
  box-shadow: var(--sombra-1);
}

.mensaje-exito {
  background: var(--semaforo-normal-bg);
  color: #1E5C24;
  border-color: #BFE0C6;
  border-left-color: var(--semaforo-normal);
}

.mensaje-error {
  background: var(--semaforo-critico-bg);
  color: #7D1717;
  border-color: #E7C4C4;
  border-left-color: var(--semaforo-critico);
}

/* ==========================================================
   FORMULARIOS EN LÍNEA (calificación / logros)
   ========================================================== */

.form-nota {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e2);
}

.input-calificacion {
  width: 68px;
  padding: 6px 8px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  font-family: var(--fuente-datos);
  font-size: 0.9rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.input-calificacion:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--anillo-foco);
}

.form-logro {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin-bottom: var(--e2);
}

.form-logro textarea {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  font-family: var(--fuente-ui);
  font-size: 0.86rem;
  resize: vertical;
}

.lista-logros-editable {
  list-style: none;
  margin: 0 0 var(--e3);
  padding: 0;
}
.lista-logros-editable li {
  margin-bottom: var(--e3);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borde);
}
.lista-logros-editable li:last-child { border-bottom: none; }

/* ==========================================================
   NAVEGACIÓN POR PESTAÑAS (curso / dashboard)
   ========================================================== */

.nav-pestanas-curso {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
}

.nav-pestanas-curso a {
  text-decoration: none;
  color: var(--tinta-media);
  background: var(--tarjeta);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transicion);
}
.nav-pestanas-curso a:hover {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.chevron-detalle {
  display: inline-block;
  transition: transform var(--transicion);
  color: var(--tinta-tenue);
}
details[open] > summary .chevron-detalle { transform: rotate(90deg); }

/* ==========================================================
   MARCAS DE IA
   ========================================================== */
/* Todo lo que propone la inteligencia artificial comparte el mismo
   acento cálido. El docente debe poder distinguir de un vistazo lo
   que decidió el sistema de lo que propuso una máquina. */

.marca-ia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--destello);
  background: var(--destello-suave);
  border: 1px solid #EBD9BF;
  padding: 3px 10px;
  border-radius: var(--radio-pastilla);
}

.bloque-ia {
  background: var(--destello-suave);
  border: 1px solid #EFE0C9;
  border-left: 3px solid var(--destello);
  border-radius: var(--radio-m);
  padding: var(--e3) var(--e4);
}

/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .tarjeta-curso:hover { transform: none; }
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 860px) {
  .contenido { padding: var(--e5) var(--e4) var(--e7); }
  h1.titulo-seccion { font-size: 1.6rem; }
}

@media (max-width: 620px) {
  body { font-size: 14.5px; }

  .barra-superior { padding: var(--e2) var(--e4); }

  .ficha-estudiante { grid-template-columns: 40px 1fr; padding: var(--e4); gap: var(--e4); }
  .info-estudiante h1 { font-size: 1.5rem; }

  .login-tarjeta { padding: var(--e6) var(--e5); }

  /* La tabla se vuelve una lista de fichas: cada celda con su
     etiqueta encima (data-etiqueta ya viene en las plantillas). */
  .tabla-materias { border: none; background: transparent; box-shadow: none; }
  .tabla-materias thead { display: none; }
  .tabla-materias tbody tr {
    display: block;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-m);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e3);
    box-shadow: var(--sombra-1);
  }
  .tabla-materias td { display: block; border: none; padding: var(--e1) 0; }
  .tabla-materias td::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-tenue);
  }
}

/* ==========================================================
   QUE NADA SE SALGA DE SU CAJA
   ==========================================================
   Un texto que se desborda no es solo feo: en un telefono
   empuja la pagina entera y la deja arrastrable de lado, que
   es de las cosas que mas rapido hacen que algo "se sienta
   roto" aunque funcione.

   Son tres reglas y cada una tapa un agujero distinto:

   1. Las palabras largas se parten. "Recuperaciones" o el correo
      de un acudiente no tienen donde cortar, asi que sin esto el
      navegador prefiere desbordar la caja antes que partir la
      palabra.

   2. Los hijos de una rejilla o un flex pueden encogerse. Por
      defecto NO: su ancho minimo es el de su contenido, asi que
      uno solo largo ensancha toda la fila. Es la causa mas
      comun de que una pagina se mueva de lado en el celular y
      la menos evidente.

   3. Nada mas ancho que su contenedor.
*/

body { overflow-wrap: break-word; }

.contenido *,
.fila-estudiante > *,
.form-administracion > * { min-width: 0; }

.boton,
.boton-secundario,
.boton-mini,
.pestana-periodo,
.nav-pestanas-curso a,
.insignia-riesgo,
.insignia-prioridad,
.marca-ia { max-width: 100%; }

.boton,
.boton-secundario { overflow-wrap: anywhere; }

/* Las insignias son pastillas de una sola linea: nunca deben
   encogerse para dejarle sitio al texto de al lado, o se les
   corta la palabra dentro. */
.insignia-riesgo,
.insignia-prioridad { flex-shrink: 0; }

/* Ultimo cinturon: si a pesar de todo algo se pasa, que la pagina
   no se pueda arrastrar de lado.

   Se usa "clip" y no "hidden" a proposito. Los dos recortan igual,
   pero "hidden" convierte al elemento en un contenedor de scroll, y
   eso rompe el "position: sticky" de la barra superior: la barra
   deja de quedarse arriba al bajar. "clip" no crea ese contenedor.
   Un navegador viejo que no entienda "clip" ignora la linea y se
   queda como antes, que es una degradacion aceptable. */
html, body { overflow-x: clip; }


/* ==========================================================
   QUE UN NUMERO NO SE PARTA POR LA MITAD

   Al arreglar el desborde en el celular le pusimos al body
   "overflow-wrap: break-word". Para un texto largo esta bien: mejor
   partir una palabra que salirse de la caja. Para una cifra es
   horrible: "$1.200.000" partido deja el ultimo digito colgando en
   el renglon de abajo, y por un instante uno lee otra cantidad.

   Un numero se achica o se sale, pero no se parte.
   ========================================================== */

.dato-grande {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* El dinero lleva mas caracteres que un conteo, asi que va un punto
   mas pequeno. Sigue siendo el elemento dominante de su tarjeta. */
.dato-grande.moneda {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

/* ==========================================================
   DATOS QUE NO SE PARTEN, INSIGNIAS QUE NO SE ENCOGEN

   Tres cosas que salieron al medir las pantallas de verdad en un
   navegador, y dos de ellas las habiamos causado nosotros al arreglar
   el desborde en el celular.
   ========================================================== */

/* Una nota, una fecha o una cifra son un dato entero. Partir "4.00"
   o "2026-08-30" entre dos renglones hace que por un instante se lea
   otra cosa, que es peor que ocupar un poco mas de ancho. */
.celda-calificacion,
.col-fecha {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
  /* Y que no se encoja por debajo de si misma: con min-width:0 puesto
     en todo, una nota en una fila flexible se dejaba recortar. */
  flex-shrink: 0;
}

/* Al poner min-width:0 en todo para que nada se saliera de su caja,
   le dimos permiso a las insignias de encogerse por debajo de su
   propio texto. Como ademas llevan white-space:nowrap, el texto se
   salia por el borde. Una insignia no se encoge: se aparta. */
.marca,
.insignia-riesgo,
.insignia-prioridad {
  flex-shrink: 0;
}

/* Una tabla ancha en un telefono tiene que rodar ELLA, no empujar la
   pagina entera de lado. Las .tabla-materias ya se convierten en
   fichas mas arriba; esta regla es para las demas. */
@media (max-width: 620px) {
  table:not(.tabla-materias) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}


/* ------------------------------------------------------------------
   UNA TARJETA QUE ES UN ENLACE TIENE QUE PARECERLO
   ------------------------------------------------------------------
   La tarjeta de Inclusión llevaba text-decoration:none y color:inherit
   metidos a mano. Quedaba idéntica a las de Cursos y Estudiantes, que
   no llevan a ninguna parte. Nadie la pulsaba, y con razón: nada decía
   que se pudiera.

   La señal no puede ser solo el subrayado -en una tarjeta se ve mal-,
   así que son tres juntas: el borde toma el color de marca, el cursor
   cambia, y abajo hay una línea que dice a dónde va. */
.tarjeta-panorama-enlace {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-color: var(--marca-borde);
}

.tarjeta-panorama-enlace:hover,
.tarjeta-panorama-enlace:focus-visible {
  border-color: var(--marca-claro);
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}

.enlace-de-tarjeta {
  margin: var(--e3) 0 0;
  font-family: var(--fuente-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--marca-claro);
}

.tarjeta-panorama-enlace:hover .enlace-de-tarjeta { text-decoration: underline; }


/* ------------------------------------------------------------------
   EL ESTADO DEL DATO (tablero de la secretaría)
   ------------------------------------------------------------------
   Cuatro estados que NO son cuatro niveles de lo mismo. "Sin
   matrícula" y "sin calificar" parecen iguales en una tabla y no lo
   son: uno es un colegio que no tiene a quién medir, el otro es uno
   que tiene a quién y no lo ha hecho. Pintarlos del mismo color es
   como un colegio vacío termina apareciendo como un colegio en
   problemas.

   Por eso ninguno de estos usa el rojo del semáforo académico: un
   dato que falta no es un mal resultado, y confundir las dos cosas
   haría que la secretaría persiga al colegio equivocado. */
.insignia-dato {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--fuente-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.insignia-dato.comparable {
  background: var(--semaforo-normal-bg);
  color: var(--semaforo-normal);
}

/* Cobertura baja: hay datos, pero no bastantes para comparar. */
.insignia-dato.insuficiente {
  background: var(--marca-suave);
  color: var(--marca-claro);
}

/* Nadie ha calificado. Es lo único de los cuatro que pide una
   llamada del territorio al colegio. */
.insignia-dato.sin-datos {
  background: var(--destello-suave);
  color: var(--destello);
}

/* Sin estudiantes: no hay nada que medir. Gris, para que no llame la
   atención de quien está buscando problemas. */
.insignia-dato.sin-matricula {
  background: var(--papel-linea);
  color: var(--tinta-tenue);
}


/* La pestaña donde estás. Sin esto, las cuatro del tablero de la
   secretaría se ven iguales y no hay forma de saber cuál estás
   mirando salvo leyendo el título. */
.nav-pestanas-curso a.activa {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}


/* Pocos estudiantes: el colegio está bien y tiene sus datos, solo es
   pequeño. Va perfilada en vez de rellena para que se distinga de un
   vistazo de las otras cuatro, que sí señalan algo que falta. */
.insignia-dato.pocos {
  background: var(--tarjeta);
  color: var(--tinta-media);
  border: 1px solid var(--borde-fuerte);
}


/* Las dos voces de la bitácora. La diferencia no es decorativa: al
   leer un hilo de veinte notas, lo primero que necesitas saber es
   quién habla, y el nombre en letra pequeña no basta. */
.nota-acompanamiento { border-left: 3px solid var(--borde-fuerte); }
.nota-acompanamiento.de-la-secretaria { border-left-color: var(--marca-claro); }
.nota-acompanamiento.del-colegio { border-left-color: var(--semaforo-normal); }




/* ==========================================================
   MENÚ COMPACTO DE LA BARRA

   La barra tenía siete elementos a la derecha (buscador, tres
   secciones, el nombre, Mi cuenta y Salir). En una pantalla normal
   cabían justos; con el enlace de volver dejaron de caber y "Salir"
   se descolgó a un segundo renglón, medio cortado por la altura fija.

   Arreglarlo apretando los espaciados solo aplaza el problema hasta
   el siguiente enlace. Por debajo de cierto ancho los enlaces se
   guardan detrás de un botón, que es lo que hace cualquier sitio.

   Sin JavaScript: una casilla escondida y el selector :checked. Un
   menú que no abre porque un script falló es peor que no tenerlo.
   ========================================================== */

.interruptor-menu {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.boton-menu {
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--fuente-ui);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radio-pastilla);
  transition: background var(--transicion), border-color var(--transicion);
}
.boton-menu::before { content: "\2630"; font-size: 1rem; line-height: 1; }
.boton-menu:hover { background: rgba(255, 255, 255, 0.12); }
.interruptor-menu:checked + .boton-menu {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}
/* El foco se ve en la casilla, que es lo que recibe el teclado. */
.interruptor-menu:focus-visible + .boton-menu {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* El nombre del colegio puede ser largo ("Institucion Educativa ...").
   Se recorta con puntos suspensivos en vez de ensanchar la barra; el
   nombre completo sigue estando en el title. */
.barra-superior .sesion > span {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* La del coordinador es la barra mas cargada (buscador + tres
   secciones + nombre + Mi cuenta + Salir): necesita 1181px. Las demas
   caben en 676px, asi que su menu aparece mucho mas tarde. */
@media (max-width: 1260px) {

  .barra-coordinador .boton-menu { display: inline-flex; }

  .barra-coordinador .sesion {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    margin: 0 0 var(--e2);
    padding-top: var(--e2);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .barra-coordinador .interruptor-menu:checked ~ .sesion { display: flex; }

  .barra-coordinador .sesion a {
    padding: 10px 12px;
    border-radius: var(--radio-s);
  }
  .barra-coordinador .sesion > span {
    border-left: none;
    padding: 6px 12px 2px;
    margin-left: 0;
    /* Desplegado hay sitio de sobra: aqui el nombre va entero. */
    max-width: none;
    white-space: normal;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .barra-coordinador .buscador-barra { display: block; margin-bottom: var(--e2); }
  .barra-coordinador .buscador-barra input,
  .barra-coordinador .buscador-barra input:focus { width: 100%; }
}

@media (max-width: 760px) {

  .barra-superior .boton-menu { display: inline-flex; }

  .barra-superior .sesion {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    margin: 0 0 var(--e2);
    padding-top: var(--e2);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .barra-superior .interruptor-menu:checked ~ .sesion { display: flex; }

  .barra-superior .sesion a {
    padding: 10px 12px;
    border-radius: var(--radio-s);
  }
  .barra-superior .sesion > span {
    border-left: none;
    padding: 6px 12px 2px;
    margin-left: 0;
    /* Desplegado hay sitio de sobra: aqui el nombre va entero. */
    max-width: none;
    white-space: normal;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .barra-superior .buscador-barra { display: block; margin-bottom: var(--e2); }
  .barra-superior .buscador-barra input,
  .barra-superior .buscador-barra input:focus { width: 100%; }
}


/* ==========================================================
   EL AVISO, DONDE UNO ESTÉ

   El mensaje de "Guardado" vivía arriba del todo. Como la plataforma
   te devuelve a la altura en la que estabas, si trabajabas a media
   página el aviso quedaba fuera de la pantalla y no lo veías nunca.

   Flotando encima, lo ves sin importar por dónde vayas. El de éxito
   se va solo a los seis segundos; el de error se queda hasta que lo
   cierres, porque un error que desaparece antes de leerlo es un error
   que no se contó.
   ========================================================== */

.aviso-flotante {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  box-shadow: var(--sombra-3);
}

.aviso-flotante .cerrar-aviso {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: opacity var(--transicion);
}
.aviso-flotante .cerrar-aviso:hover { opacity: 1; }

@media (max-width: 620px) {
  .aviso-flotante { top: auto; bottom: var(--e4); }
}