/* static/style.css
   GeaPlus — 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); }
/* Niveles del PMI (oct-2026): "preventivo" es el aviso temprano, va en
   el mismo amarillo que "medio"; "bajo" es el nivel más leve. */
.insignia-riesgo.preventivo { background: var(--semaforo-medio-bg); color: var(--semaforo-medio); border-color: #EBD8AC; }
.insignia-riesgo.bajo { background: var(--semaforo-normal-bg); color: var(--semaforo-normal); border-color: #C6E3CC; }

/* ---- 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); }
}


/* ==========================================================
   ACABADO DE LOS CAMPOS

   Reglas nuevas, al final a proposito: cuando dos reglas empatan en
   especificidad gana la ultima, y asi no hay que editar nada de lo
   que ya funciona.
   ========================================================== */

/* ---- Ancho de lectura ----
   Un cuadro de texto a todo lo ancho del contenedor da renglones de
   unos 135 caracteres. La lectura comoda esta entre 60 y 80: mas
   alla, el ojo pierde el renglon al volver a la izquierda. El cuadro
   se angosta; la pagina no cambia de sitio. */
.campo textarea {
  max-width: 72ch;
  resize: vertical;
}

/* ---- El atajo del banco deja de competir con el campo ----
   .selector-banco ya existia (linea ~736) con el estilo correcto,
   pero `.campo select` es mas especifico y lo tapaba. Esto lo
   rescata con la especificidad suficiente para ganar.

   Pastilla pequena, borde punteado, ancho segun su contenido: se lee
   como lo que es, un atajo encima del campo, no otro campo. */
.campo select.selector-banco {
  width: auto;
  max-width: 100%;
  margin: 0 0 var(--e2);
  padding: 5px 12px;
  border: 1px dashed var(--marca-borde);
  border-radius: var(--radio-pastilla);
  font-size: 0.78rem;
  font-family: var(--fuente-ui);
  color: var(--marca-claro);
  background: var(--marca-suave);
  cursor: pointer;
}

.campo select.selector-banco:hover {
  border-color: var(--marca-claro);
  background: var(--tarjeta);
}

/* ---- Casillas que se ven elegidas ----
   Una casilla suelta con su texto al lado es lo que dibuja el
   navegador, y se ve distinta en cada uno. En pastilla se ve igual
   en todos, el area para pulsar es mas grande -que importa en una
   tableta- y de un vistazo se distingue lo marcado de lo que no.

   `.campo label` empata en especificidad con `.grupo-casillas
   label`, asi que esto tiene que ir despues en el archivo. Va. */
.grupo-casillas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin: var(--e1) 0 var(--e2);
}

.grupo-casillas label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 13px 5px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--tarjeta);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--tinta-media);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion),
              color var(--transicion);
}

.grupo-casillas label:hover {
  border-color: var(--marca-borde);
  background: var(--marca-suave);
}

/* :has() no lo entienden los navegadores viejos. Si falla, la
   casilla se sigue viendo marcada: se pierde el relleno de la
   pastilla, no la informacion. */
.grupo-casillas label:has(input:checked) {
  border-color: var(--marca-claro);
  background: var(--marca-suave);
  color: var(--marca-profundo);
  font-weight: 500;
}

.grupo-casillas input:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
  border-radius: 3px;
}

/* ---- Bloque plegable de "lo que pide el formato" ----
   Recuadro con fondo de papel cuando esta cerrado: se lee como una
   gaveta. Al abrirse se vuelve blanco, como las tarjetas, para que
   lo de adentro se vea como contenido y no como un aparte.

   La flecha es el mismo gesto que ya usa .chevron-detalle en este
   archivo: gira 90 grados al abrir. */
.bloque-oficial {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--papel);
  padding: 0 var(--e4);
  margin: var(--e2) 0 var(--e4);
  transition: background var(--transicion), border-color var(--transicion);
}

.bloque-oficial[open] {
  background: var(--tarjeta);
  border-color: var(--marca-borde);
}

.bloque-oficial > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--e3) 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tinta-media);
}

.bloque-oficial > summary::-webkit-details-marker { display: none; }

.bloque-oficial > summary::before {
  content: "\203A";
  display: inline-block;
  font-size: 1.15rem;
  line-height: 0.8;
  color: var(--marca-claro);
  transition: transform var(--transicion);
}

.bloque-oficial[open] > summary::before { transform: rotate(90deg); }

.bloque-oficial > summary:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
  border-radius: var(--radio-s);
}

.bloque-oficial .campo:last-child { margin-bottom: var(--e4); }

/* ==========================================================
   ESTILO 3 · BANDA DE COLOR (oct-2026)
   ==========================================================
   Lo escogió Henry entre cinco opciones. Va al FINAL del archivo a
   propósito: pisa lo de arriba sin tocarlo, así que para volver al
   estilo anterior basta con borrar este bloque.

   Tres cosas:
   1. Letras: títulos en Bricolage Grotesque, texto en Source Sans 3.
   2. La barra de arriba y la banda de la pantalla son UN solo bloque
      del color del colegio (--marca): la paleta que escoge cada
      colegio en Apariencia sigue mandando.
   3. La banda lleva el título. Volver es un botón flotante abajo a
      la izquierda (forma E); a dónde lleva lo decide navegacion.py. */

:root {
  --fuente-display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
  --fuente-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-l: 16px;
}

body { font-size: 16px; background: var(--papel); }

.barra-superior {
  background: var(--marca);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
}
.barra-superior .marca { font-weight: 800; letter-spacing: -0.02em; }

/* ---- La banda ---- */
.banda-pantalla {
  position: relative;
  overflow: hidden;
  background: var(--marca);
  color: #FFFFFF;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.banda-pantalla::after {
  /* El círculo de adorno de la maqueta: solo borde, sin imagen. */
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -140px;
  top: -220px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
}
.banda-interior {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--e5) var(--e5) var(--e6);
  display: flex;
  align-items: center;
  gap: var(--e4);
}
.banda-textos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.banda-pantalla h1,
.banda-pantalla h1.titulo-seccion {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  border: 0;
  padding: 0;
}
.banda-pantalla h1 * { color: inherit; }

/* Con banda, el contenido arranca más arriba: el título ya está en ella. */
.banda-pantalla + .contenido,
.banda-pantalla ~ .contenido { padding-top: var(--e5); }

/* ---- Lo de adentro, con el aire de la maqueta ---- */
h1.titulo-seccion, h2, h3 { font-family: var(--fuente-display); letter-spacing: -0.01em; }
.tarjeta-curso,
.tarjeta-panorama { border-radius: var(--radio-l); }

@media (max-width: 640px) {
  .banda-interior { padding: var(--e4) var(--e4) var(--e5); gap: var(--e3); align-items: flex-start; }
}

/* ---- Botón de volver flotante (forma E) ----
   Fijo abajo a la izquierda y siempre a la vista, con el nombre de a
   dónde lleva. El color es el acento del colegio oscurecido: así se
   distingue de los botones de la página y el texto blanco se lee con
   cualquier paleta. */
.boton-volver-flotante {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  max-width: calc(100vw - 48px);
  padding: 0 22px 0 16px;
  border-radius: var(--radio-pastilla);
  background: #8F5A1F;
  background: color-mix(in srgb, var(--destello) 72%, #000000);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.boton-volver-flotante span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-volver-flotante:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); }
.boton-volver-flotante:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }
/* Que el botón nunca tape lo último de la página. */
body:has(.boton-volver-flotante) { padding-bottom: 88px; }
@media (max-width: 640px) {
  .boton-volver-flotante { left: 16px; bottom: 16px; max-width: calc(100vw - 32px); min-height: 48px; }
}
@media print { .boton-volver-flotante { display: none; } }

/* =====================================================================
   CALIFICAR MATERIA · PESTAÑAS (oct-2026)
   Notas | Logros | Planes de mejoramiento | Seguimiento. Los colores de
   nivel usan los cortes de nivel_por_calificacion: Bajo <3.0,
   Básico 3.0-3.9, Alto 4.0-4.5, Superior >4.5.
   ===================================================================== */
.cal-pestanas {
  display: flex;
  gap: 4px;
  margin: 18px 0 20px;
  border-bottom: 2px solid var(--borde);
  overflow-x: auto;
}
.cal-pestana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px 12px 0 0;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  color: var(--tinta-media);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-pestana:hover { background: var(--marca-suave); color: var(--marca); }
.cal-pestana.activa { color: var(--marca); border-bottom-color: var(--marca); background: var(--tarjeta); }
.cal-cuenta {
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--marca-suave);
  color: var(--marca);
}
.cal-pestana.activa .cal-cuenta { background: var(--marca); color: #FFFFFF; }
.cal-panel[hidden] { display: none; }

.cal-caja {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.cal-barra { display: flex; height: 28px; border-radius: 8px; overflow: hidden; font-size: 12px; font-weight: 700; }
.cal-tramo { display: flex; align-items: center; justify-content: center; min-width: 30px; padding: 0 6px; white-space: nowrap; overflow: hidden; }

/* Tramos (barra y cajas de Logros): un tono más fuerte que los chips. */
.tramo-bajo     { background: #F4C6AE; color: #6B2405; }
.tramo-basico   { background: #FFE08A; color: #4A3200; }
.tramo-alto     { background: #9FB7D6; color: #16243A; }
.tramo-superior { background: #9ED3A8; color: #173D1B; }
.tramo-sin      { background: #EDF0F4; color: #4A5868; }

.cal-nivel {
  display: inline-block;
  min-width: 84px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.nivel-bajo     { background: #FCEBE3; color: #9B3A0C; }
.nivel-basico   { background: #FFF1CC; color: #6E4A00; }
.nivel-alto     { background: #E4ECF6; color: #24384F; }
.nivel-superior { background: #E9F5EC; color: #2E6B32; }
.nivel-sin      { background: #F1F3F6; color: #5A6A7D; }
.nivel-fuera    { background: #FAE8E8; color: #9B1C1C; }

/* El botón de guardar queda a la vista mientras se baja por la lista. */
.cal-guardar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-left: auto;
  width: fit-content;
  max-width: 100%;
  padding: 8px 8px 8px 16px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(22, 32, 43, .12);
}
.cal-guardar .boton { width: auto; padding: 10px 22px; }
.cal-guardar .detalle-panorama { margin: 0; }

.cal-agregar summary { cursor: pointer; font-weight: 700; color: var(--marca); min-height: 32px; display: flex; align-items: center; }
.cal-seguimientos { list-style: none; padding: 0; margin: 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.cal-seguimientos li { padding: 14px 18px; border-top: 1px solid #F1F3F6; display: flex; flex-direction: column; gap: 4px; }
.cal-seguimientos li:first-child { border-top: 0; }

/* ---------------------------------------------------------------------
   PLANILLA RÁPIDA DE NOTAS (opción B, oct-2026)
   Fila: abrir · estudiante · P anterior · nota · cambio · nivel · logro.
   El logro se ve en una línea y la fila se abre para editarlo.
   --------------------------------------------------------------------- */
.cl-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-cabeza .subtitulo { margin: 0; }
.cl-periodos { display: flex; gap: 4px; padding: 4px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; overflow-x: auto; }
.cl-periodos .pestana-periodo { border: 0; min-height: 36px; padding: 6px 14px; border-radius: 9px; white-space: nowrap; }

.cl-planilla { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; }
.cl-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.cl-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-filtro {
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--tinta-media); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.cl-filtro b { font-weight: 700; color: var(--tinta-tenue); margin-left: 2px; }
.cl-filtro:hover { border-color: var(--marca); color: var(--marca); }
.cl-filtro.activo { background: var(--marca); border-color: var(--marca); color: #FFFFFF; }
.cl-filtro.activo b { color: #FFFFFF; opacity: .85; }
.cl-dist { flex: 1 1 220px; min-width: 180px; }
.cl-dist-texto { display: none; margin: 0; font-size: 13.5px; color: var(--tinta-tenue); }
.cl-boton-logros {
  min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--marca-borde);
  background: var(--tarjeta); color: var(--marca); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.cl-boton-logros:hover:not(:disabled) { background: var(--marca-suave); border-color: var(--marca); }
.cl-boton-logros:disabled { opacity: .5; cursor: not-allowed; }

.cl-fila {
  display: grid;
  grid-template-columns: 32px minmax(180px, 1.1fr) 76px 100px minmax(160px, 2fr);
  align-items: center;
  column-gap: 12px;
  padding: 8px 18px 8px 10px;
  border-top: 1px solid #F1F3F6;
}
.cl-con-anterior .cl-fila { grid-template-columns: 32px minmax(180px, 1.1fr) 48px 76px 64px 100px minmax(160px, 2fr); }
.cl-fila[hidden] { display: none; }
.cl-encabezado { border-top: 0; padding-top: 10px; padding-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .05em; }
.cl-c { text-align: center; }
.cl-fila.cal-falta { background: #FFFBF2; }
.cl-nombre { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.cl-anterior { color: var(--tinta-tenue); font-weight: 700; }
.cl-mini { display: none; }
.cl-cambio { font-size: 13px; font-weight: 700; color: var(--tinta-tenue); white-space: nowrap; }
.cl-cambio.sube { color: var(--semaforo-normal); }
.cl-cambio.baja { color: var(--semaforo-alto); }
.cl-fila .cal-nota {
  width: 64px; height: 42px; text-align: center; font-size: 18px; font-weight: 700;
  border: 1.5px solid var(--borde-fuerte); border-radius: 10px; background: #FFFFFF; color: var(--tinta);
}
.cl-fila.cal-falta .cal-nota { border-style: dashed; border-color: #E2B66B; }
.cl-fila .cal-nota:focus { outline: none; border-color: var(--marca); border-style: solid; box-shadow: 0 0 0 3px var(--marca-suave); }
.cl-fila .cal-nivel { min-width: 0; }
.cl-abrir {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--tinta-tenue); font-size: 14px; display: none;
}
.cl-abrir:hover { background: var(--marca-suave); color: var(--marca); }
.cl-abrir span { display: inline-block; transition: transform .15s; }
.cl-fila.abierta .cl-abrir span { transform: rotate(90deg); }
.cl-logro-ver {
  display: none; min-width: 0; text-align: left; border: 0; background: none; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--tinta-media);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-logro-ver:hover { color: var(--marca); }
.cl-logro-ver.vacio { color: var(--tinta-tenue); font-style: italic; }

.cl-panel {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 14px;
  margin: 8px -18px -8px -10px; padding: 12px 18px 14px 52px;
  background: #F7FAF8; border-top: 1px dashed #DCE5DF;
}
.cl-panel label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--tinta-tenue); margin-bottom: 6px; }
.cl-origen { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--marca-suave); color: var(--marca); }
.cl-logro {
  width: 100%; min-height: 64px; resize: vertical; padding: 9px 11px; border: 1.5px solid var(--borde-fuerte);
  border-radius: 10px; font: inherit; font-size: 15px; line-height: 1.4; background: #FFFFFF;
}
.cl-logro:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.cl-nota-pie { display: block; margin-top: 6px; font-size: 13px; color: var(--tinta-tenue); }
.cl-sugerencias { display: flex; flex-direction: column; gap: 6px; }
.cl-sugerencias:empty { display: none; }
.cl-sug-titulo { font-size: 12px; font-weight: 700; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .05em; }
.cl-sug {
  text-align: left; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #FFFFFF;
  font: inherit; font-size: 13.5px; line-height: 1.35; color: var(--tinta-media); cursor: pointer;
}
.cl-sug:hover { border-color: var(--marca); color: var(--marca); }
.cl-sug.usada { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }
.cl-sug-enlace { font-weight: 700; font-size: 14px; }
.cl-vacio { margin: 0; padding: 18px; color: var(--tinta-tenue); text-align: center; border-top: 1px solid #F1F3F6; }

/* Con JavaScript: el logro se ve en una línea y el panel se abre con la flecha.
   Sin JavaScript todo queda abierto y se guarda igual. */
.cl-js .cl-abrir, .cl-js .cl-logro-ver { display: block; }
.cl-js .cl-panel { display: none; }
.cl-js .cl-fila.abierta .cl-panel { display: grid; }
.cl-planilla:not(.cl-js) .cl-encabezado span:last-child { visibility: hidden; }

.cl-guardar { gap: 12px; }
.cl-estado { font-weight: 700; color: var(--tinta-tenue); }
.cl-guardar.pendiente { background: var(--tinta); border-color: var(--tinta); }
.cl-guardar.pendiente .cl-estado { color: #FFD58A; }
.cl-guardar.pendiente .cl-ayuda { color: #C9D2DB; }
#cl-guardar.pendiente .boton { background: #FFFFFF; color: var(--tinta); border-color: #FFFFFF; }

@media (max-width: 760px) {
  .cal-pestana { padding: 0 12px; }
  .cl-barra { padding: 12px; gap: 10px; }
  .cl-dist { display: none; }
  .cl-dist-texto { display: block; flex: 1 1 100%; order: 3; }
  .cl-boton-logros { order: 2; }
  .cl-fila, .cl-con-anterior .cl-fila {
    grid-template-columns: 30px auto 70px 1fr;
    grid-template-areas:
      "abrir nombre nombre nombre"
      ".     ant    nota   nivel"
      ".     logro  logro  logro";
    row-gap: 6px; padding: 10px 12px 10px 6px;
  }
  .cl-con-anterior .cl-fila { grid-template-columns: 30px auto 70px auto 1fr; grid-template-areas:
      "abrir nombre nombre nombre nombre"
      ".     ant    nota   cambio nivel"
      ".     logro  logro  logro  logro"; }
  .cl-encabezado { display: none !important; }
  .cl-abrir { grid-area: abrir; }
  .cl-nombre { grid-area: nombre; }
  .cl-anterior { grid-area: ant; display: flex; flex-direction: column; align-items: center; font-size: 15px; }
  .cl-mini { display: block; font-size: 10.5px; letter-spacing: .05em; }
  .cl-fila > .cl-c:has(.cal-nota) { grid-area: nota; }
  .cl-cambio { grid-area: cambio; }
  .cl-fila > .cl-c:has(.cal-nivel) { grid-area: nivel; text-align: left; }
  .cl-logro-ver { grid-area: logro; white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0; font-size: 14px; }
  .cl-planilla:not(.cl-js) .cl-logro-ver { display: none !important; }
  .cl-panel { grid-template-columns: 1fr; margin: 6px -12px -10px -6px; padding: 12px; }
  /* En el celular la barra queda a la derecha, para no tapar "Volver". */
  .cal-guardar { bottom: 16px; }
  .cl-guardar { padding: 6px 6px 6px 14px; }
  /* Con cambios pendientes sube por encima de "Volver" y ocupa el ancho. */
  .cl-guardar.pendiente { bottom: 76px; width: 100%; justify-content: space-between; }
  .cl-guardar:not(.pendiente) { padding: 0; background: none; border: 0; box-shadow: none; }
  .cl-guardar:not(.pendiente) .cl-estado { display: none; }
  .cl-guardar .cl-ayuda { display: none; }
  .cal-guardar .boton { min-height: 48px; }
}
@media print {
  .cal-pestanas, .cal-guardar, .cl-filtros, .cl-boton-logros, .cl-abrir { display: none; }
  .cal-panel[hidden] { display: block; }
}

/* =====================================================================
   CALIFICAR · PESTAÑA PLANES DE MEJORAMIENTO (oct-2026)
   ===================================================================== */
.pmi-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.pmi-cifra {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.pmi-cifra span { font-size: 13px; color: var(--tinta-tenue); }
.pmi-cifra strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.1; }
.pmi-cifra-alerta { background: var(--semaforo-alto-bg); border-color: #F2C9B5; }
.pmi-cifra-alerta strong { color: #9B3A0C; }

.pmi-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pmi-chip-neutro   { background: #F1F3F6; color: #4A5868; }
.pmi-chip-vencida  { background: #FCEBE3; color: #9B3A0C; }
.pmi-chip-aviso    { background: #FFF1CC; color: #6E4A00; }
.pmi-chip-cumplida { background: #E9F5EC; color: #2E6B32; }

.pmi-plan {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.pmi-plan-alerta { border-color: #F2C9B5; }
.pmi-plan > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pmi-plan > summary::-webkit-details-marker { display: none; }
.pmi-plan > summary:hover { background: #F9FAFC; }
.pmi-plan[open] > summary { border-bottom: 1px solid #F1F3F6; }
.pmi-plan-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pmi-plan-nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pmi-plan-nombre strong { font-size: 17px; }
.pmi-plan-nota { color: var(--tinta-media); font-size: 15px; white-space: nowrap; }
.pmi-sube { color: #2E6B32; }
.pmi-baja { color: #9B3A0C; }
.pmi-avance { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--tinta-tenue); }
.pmi-avance-barra { flex: 0 1 220px; height: 8px; background: var(--marca-suave); border-radius: 8px; overflow: hidden; }
.pmi-avance-barra span { display: block; height: 100%; background: #2E7D32; border-radius: 8px; }

.pmi-acciones { list-style: none; margin: 0; padding: 0; }
.pmi-accion { padding: 12px 18px; border-bottom: 1px solid #F1F3F6; }
.pmi-accion-fila { display: flex; gap: 12px; align-items: flex-start; }
.pmi-accion-fila > .pmi-chip { margin-top: 2px; flex: 0 0 150px; box-sizing: border-box; text-align: center; white-space: normal; }
.pmi-accion-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmi-que-se-hizo { font-size: 14px; color: var(--tinta-media); }
.pmi-cumplir { margin: 8px 0 0 162px; }
.pmi-cumplir > summary,
.pmi-nueva > summary { cursor: pointer; font-weight: 700; color: var(--marca); min-height: 32px; display: inline-flex; align-items: center; }
.pmi-nueva { padding: 12px 18px; }
.pmi-botones { margin-top: 10px; }
.pmi-botones .boton { width: auto; padding: 9px 18px; }

.pmi-sugeridas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pmi-sugerida {
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--marca-borde);
  background: var(--tarjeta);
  color: var(--marca);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pmi-sugerida:hover { background: var(--marca-suave); border-color: var(--marca); }

.pmi-subtitulo { font-size: 16px; margin: 20px 0 8px; }
.pmi-sugerencias { list-style: none; margin: 0; padding: 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.pmi-sugerencias li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px; border-top: 1px solid #F1F3F6; }
.pmi-sugerencias li:first-child { border-top: 0; }
.pmi-sugerencias li > .pmi-chip { margin-top: 2px; flex: 0 0 150px; box-sizing: border-box; text-align: center; white-space: normal; }

/* Los formularios de esta pestaña ya van dentro de una tarjeta: sin segunda caja. */
#planes .form-administracion {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
  margin-bottom: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

@media (max-width: 640px) {
  .pmi-accion-fila, .pmi-sugerencias li { flex-direction: column; gap: 6px; }
  .pmi-accion-fila > .pmi-chip, .pmi-sugerencias li > .pmi-chip { flex-basis: auto; }
  .pmi-cumplir { margin-left: 0; }
  .pmi-plan-nota { white-space: normal; }
}

/* =====================================================================
   ACABADO ROBUSTO (10-oct-2026)
   =====================================================================
   Henry pidió que el estilo "se vea más robusto y no tan básico". Va al
   FINAL a propósito, como el bloque de la banda: pisa lo de arriba sin
   tocarlo, y para volver atrás basta con borrar este bloque entero.

   Todo sale de las variables de la paleta (--marca, --marca-claro,
   --marca-profundo, --marca-suave, --marca-borde), así que respeta el
   color que escogió cada colegio en Apariencia.

   Lo que cambia:
   1. Profundidad: la barra va un tono más oscura que la banda, y la
      banda lleva degradado, una textura de puntos y un halo de luz.
   2. Tarjetas con borde tintado del color del colegio, sombra en dos
      capas y una luz interior arriba. Las que son enlace se levantan.
   3. Los indicadores: el filo de arriba ahora es del color del colegio
      (antes era un azul fijo que en un colegio verde se veía gris).
   4. Botones con cuerpo: el principal con brillo arriba, el secundario
      con sombra y hover tintado.
   5. Tablas con encabezado neutro y filas que se iluminan al pasar.
   6. Campos con foco del color del colegio. */

:root {
  --tinte-borde: color-mix(in srgb, var(--marca) 9%, var(--borde));
  --sombra-tarjeta:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 4px 14px -4px color-mix(in srgb, var(--marca) 16%, transparent);
  --sombra-levantada:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 2px 4px rgba(16, 24, 40, 0.06),
    0 14px 30px -10px color-mix(in srgb, var(--marca) 30%, transparent);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* El fondo: un velo del color del colegio, apenas perceptible, que
   hace que las tarjetas blancas floten en vez de recortarse. */
body {
  background:
    radial-gradient(900px 360px at 85% 120px, color-mix(in srgb, var(--marca) 6%, transparent), transparent 70%),
    var(--papel);
  background-attachment: fixed;
}

/* ---- 1. Barra y banda ---- */
.barra-superior {
  background: color-mix(in srgb, var(--marca) 78%, #000);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.banda-pantalla {
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(120deg, var(--marca) 0%, color-mix(in srgb, var(--marca) 80%, var(--marca-claro)) 60%, var(--marca-claro) 130%);
  border-top: 0;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
/* La textura se desvanece hacia abajo: así el título se lee limpio. */
.banda-pantalla::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--marca) 55%, transparent) 100%);
  pointer-events: none;
}
.banda-pantalla::after {
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 60px rgba(255,255,255,0.025), 0 0 0 120px rgba(255,255,255,0.02);
}
.banda-pantalla h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* ---- 2. Tarjetas ---- */
.tarjeta-panorama,
.tarjeta-curso,
.form-administracion,
.tabla-materias {
  border-color: var(--tinte-borde);
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-curso,
.tarjeta-panorama-enlace {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tarjeta-curso:hover,
.tarjeta-panorama-enlace:hover {
  transform: translateY(-3px);
  border-color: var(--marca-borde);
  box-shadow: var(--sombra-levantada);
}

/* ---- 3. Indicadores ---- */
.tarjeta-panorama::before {
  height: 4px;
  background: linear-gradient(90deg, var(--marca) 0%, var(--marca-claro) 55%, color-mix(in srgb, var(--marca-claro) 0%, transparent) 100%);
}
.tarjeta-panorama:hover { box-shadow: var(--sombra-levantada); }
.tarjeta-panorama h3 { color: color-mix(in srgb, var(--marca) 55%, var(--tinta-tenue)); }
.dato-grande {
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--marca-profundo);
}

/* Subtítulos de sección: el filo pasa a ser una pastilla con el
   color del colegio, un poco más gruesa. */
.titulo-subseccion { font-weight: 700; }
.titulo-subseccion::before {
  width: 4px;
  height: 1em;
  background: linear-gradient(180deg, var(--marca-claro), var(--marca));
}

/* ---- 4. Botones ---- */
.boton {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 55%),
    var(--marca);
  border-color: color-mix(in srgb, var(--marca) 75%, #000);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(16,24,40,0.12), 0 4px 10px -4px color-mix(in srgb, var(--marca) 55%, transparent);
}
.boton:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%),
    var(--marca-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px -6px color-mix(in srgb, var(--marca) 65%, transparent);
  transform: translateY(-1px);
}

.boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--tinte-borde);
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.boton-secundario:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--marca) 35%, transparent);
}
.boton-secundario:active,
.boton-mini:active { transform: translateY(0); box-shadow: none; }

/* Íconos de línea dentro de los botones (reemplazan los emoji). */
.icono {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* ---- 5. Tablas ---- */
.tabla-materias th {
  background: color-mix(in srgb, var(--marca-suave) 70%, #fff);
  color: color-mix(in srgb, var(--marca) 70%, var(--tinta-tenue));
  border-bottom-color: var(--tinte-borde);
}
.tabla-materias tbody tr:hover { background: color-mix(in srgb, var(--marca-suave) 55%, #fff); }
.tabla-materias td { font-variant-numeric: tabular-nums; }

/* ---- 6. Campos ---- */
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  border-color: var(--marca-claro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-claro) 22%, transparent);
  outline: none;
}

/* Pastillas de navegación interna (Resumen / Materias / ...). */
.nav-pestanas-curso a {
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
  border-color: var(--tinte-borde);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-pestanas-curso a:hover {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

/* El botón flotante de volver, con un poco más de presencia. */
.boton-volver-flotante {
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 12px 28px -8px rgba(0,0,0,0.35);
}

/* ---- 7. Panel de inicio ----
   panel.html trae su propio <style>, que carga después de este
   archivo; el ".contenido" de adelante le gana sin tocar la plantilla. */
.contenido .pn-caja,
.contenido .pn-cifras > div,
.contenido .pn-accesos,
.contenido .grupo-sede,
.contenido .pn-curso {
  border-color: var(--tinte-borde);
  box-shadow: var(--sombra-tarjeta);
}
.contenido .pn-caja-cab {
  background: linear-gradient(180deg, color-mix(in srgb, var(--marca-suave) 45%, #fff), #fff);
}
.contenido .pn-cifras b { font-weight: 800; letter-spacing: -0.03em; color: var(--marca-profundo); }
.contenido .pn-cifras > .pn-fecha {
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(255,255,255,0.16), transparent 70%),
    linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 70%, var(--marca-claro)));
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--marca) 70%, transparent);
}
.contenido .pn-cifras > .pn-fecha b { color: #fff; }
.contenido .pn-curso:hover {
  transform: translateY(-3px);
  border-color: var(--marca-borde);
  box-shadow: var(--sombra-levantada);
}
.contenido .pn-curso:not(.vacio) { border-left: 3px solid var(--marca-claro); }
.contenido .pn-boton {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 55%), var(--marca);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 14px -6px color-mix(in srgb, var(--marca) 70%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contenido .pn-boton:hover { transform: translateY(-1px); background: var(--marca-hover); }
.contenido .pn-renglon { transition: background 0.15s ease; }
.contenido .pn-renglon:hover { background: color-mix(in srgb, var(--marca-suave) 50%, #fff); }
.contenido .pn-accesos a { display: flex; align-items: center; justify-content: space-between; transition: background 0.15s ease, padding 0.15s ease; }
.contenido .pn-accesos a::after { content: "›"; font-size: 1.2rem; opacity: 0.45; transition: transform 0.15s ease, opacity 0.15s ease; }
.contenido .pn-accesos a:hover::after { transform: translateX(3px); opacity: 0.9; }
.contenido .pn-barra span { background: linear-gradient(90deg, var(--marca-claro), var(--marca)); }

/* Al saltar a una sección (#pmi-abrir, #planes...), que no quede
   escondida debajo de la barra fija de arriba (oct-2026). */
[id] { scroll-margin-top: 84px; }

/* Formularios en columna (style="flex-direction:column"): sin
   flex-wrap. Con wrap, el navegador mide la rejilla de campos como si
   fuera angosta y le deja un hueco grande debajo (se veía en el Banco
   de logros). */
.form-administracion[style*="flex-direction:column"] { flex-wrap: nowrap; }