/* ============================================================================
   SGP GONZAGA SOY · Hoja de estilos
   Unidad Educativa Colegio Gonzaga · Compañía de Jesús · Maracaibo
   ----------------------------------------------------------------------------
   EL LENGUAJE VISUAL DEL ECOSISTEMA GONZAGA (decisión del Rector, 09/09/2026):
   el mismo lenguaje del SGE, para que las plataformas del Colegio se
   reconozcan como hermanas. Papel frío y claro, tinta grafito, una sola
   familia geométrica, y el azul reservado para lo que significa algo.
   El rojo, solo para lo que pide atención.

   La marca del SGE son tres trazos que SUBEN; la del SGP son los mismos
   tres trazos, pero que SE ABREN: la enseñanza abre caminos.
   ============================================================================ */

/* ============ 🎨 CAMBIAR COLOR PRINCIPAL AQUÍ ============ */
:root {
  --color-marca:        #1F3E80;  /* Azul Gonzaga: SOLO la marca */

  /* En pantalla, sobre superficies grandes, el azul va SUAVIZADO:
     el mismo azul con menos peso, para que acompañe sin cansar.
     >>> CAMBIAR: suba a #1F3E80 para más fuerza, baje a #4A6BAD para calma. */
  --color-primary:      #34549A;  /* Azul suavizado: barra y botón principal */
  --color-primary-dark: #1F3E80;  /* Azul pleno: títulos y estados activos */
  --color-primary-soft: #EEF2F7;  /* Banda muy tenue: cabeceras de tabla */
  --color-primary-mid:  #CBD8EA;  /* Separadores con aire azul */

  --color-accent:       #B4402F;  /* Rojo sobrio: lo que pide atención */
  --color-accent-light: #D08575;
  --color-oro:          #C9A227;  /* Oro: lo que espera */
  --color-oro-soft:     #FBF3D6;  /* Oro tenue: fondo de lo que espera */
  --color-oro-tinta:    #6B5410;  /* Oro para texto sobre su fondo tenue (contraste 7) */
  --color-bg:           #F6F8FC;  /* Papel: frío, claro, sin textura */
  --color-bg-alt:       #EEF2F7;  /* Papel alternativo */
  --color-text:         #0F172A;  /* Tinta grafito */
  --color-text-soft:    #5E6D82;  /* Niebla: texto secundario (un punto más firme: contraste 4,9 sobre papel) */
  --color-border:       #E2E8F0;  /* Línea */
  --color-success:      #2E7D57;  /* Salvia: lo que va bien */
  --color-success-soft: #EAF3EE;
  --color-success-tinta: #2A7350;  /* Salvia para texto sobre su fondo tenue */
  --color-error:        #C8102E;  /* Rojo pleno: SOLO errores */

  /* ============ 📝 CAMBIAR TIPOGRAFÍA AQUÍ ============
     Geométrica y sobria, la misma del SGE y de su manual.
     Son fuentes del propio equipo: no dependen de internet. */
  --font-display: "Avenir Next", Futura, "Century Gothic", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Avenir Next", Futura, "Century Gothic", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --radio: 14px;
  --sombra: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --sombra-fuerte: 0 2px 4px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.10);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  /* Papel liso, sin halos de color que fatiguen a lo largo del día */
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15.5px;
  line-height: 1.55;
}

/* ============================================================
   CABECERA · La barra azul con la marca y las puertas
   ============================================================ */
.cabecera {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--sombra);
  position: sticky; top: 0; z-index: 60;
}
.cabecera-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.escudo { height: 36px; width: auto; display: block; }
.marca-sistema { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; line-height: 1.05; }
.marca-colegio { font-size: .72rem; color: rgba(255,255,255,.75); font-weight: 500; letter-spacing: .02em; }

/* Las PUERTAS: cada rol ve solo las suyas y entra directo a lo suyo */
.puertas { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.puertas a {
  color: rgba(255,255,255,.88); text-decoration: none;
  padding: 7px 12px; border-radius: 9px;
  font-size: .86rem; font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.puertas a:hover { background: rgba(255,255,255,.12); color: #fff; }
.puertas a.activo { background: #fff; color: var(--color-primary-dark); font-weight: 600; }

.cabecera-usuario { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-rol {
  border: 1px solid rgba(255,255,255,.35);
  padding: 3px 10px; border-radius: 8px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: #fff;
  white-space: nowrap;
}
.selector-anio select {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  padding: 4px 8px; cursor: pointer; width: auto;
}
.selector-anio select option { color: var(--color-text); }
.usuario-nombre { font-size: .8rem; font-weight: 600; }
.salir {
  color: #fff; text-decoration: none; font-size: .76rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.4); padding: 4px 12px; border-radius: 8px;
  transition: background .2s;
}
.salir:hover { background: rgba(255,255,255,.15); }

/* La segunda fila: lo de adentro de la puerta en la que se está */
.navegacion {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 5px 22px;
  display: flex;
  gap: 3px;
  align-items: center;
  overflow-x: auto;
}
.navegacion a {
  color: var(--color-text-soft); text-decoration: none;
  font-size: .82rem; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  white-space: nowrap; transition: color .15s, background .15s;
}
.navegacion a:hover { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.navegacion a.activo { color: var(--color-primary-dark); background: var(--color-primary-soft); font-weight: 600; }
.navegacion .aparte { margin-left: auto; font-size: .74rem; color: var(--color-text-soft); white-space: nowrap; }

/* El aviso pequeño de cosas esperando, junto al nombre de una sección */
.chip-pendiente {
  display: inline-block; min-width: 17px; text-align: center;
  background: var(--color-accent); color: #fff;
  border-radius: 999px; font-size: .66rem; font-weight: 700;
  padding: 1px 6px; margin-left: 4px; vertical-align: 1px;
}

/* ============================================================
   CONTENIDO Y TARJETAS
   ============================================================ */
.contenido { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 18px 44px; }

.tarjeta {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
  animation: aparecer .45s ease both;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Aparición escalonada de listas de tarjetas */
.escalonado > * { animation: aparecer .45s ease both; }
.escalonado > *:nth-child(1) { animation-delay: .03s; }
.escalonado > *:nth-child(2) { animation-delay: .08s; }
.escalonado > *:nth-child(3) { animation-delay: .13s; }
.escalonado > *:nth-child(4) { animation-delay: .18s; }
.escalonado > *:nth-child(5) { animation-delay: .23s; }
.escalonado > *:nth-child(6) { animation-delay: .28s; }
.escalonado > *:nth-child(7) { animation-delay: .33s; }
.escalonado > *:nth-child(8) { animation-delay: .38s; }

h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-primary-dark); margin: 4px 0 4px; line-height: 1.2; }
h2 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--color-primary-dark); margin: 0 0 10px; }
h3 { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--color-text); margin: 14px 0 6px; }
.sub, .subtitulo { color: var(--color-text-soft); font-size: .87rem; margin: 0 0 16px; max-width: 72ch; }

/* ============================================================
   BOTONES Y FORMULARIOS
   ============================================================ */
.boton, button.boton {
  display: inline-block;
  background: var(--color-primary);
  color: #fff; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .84rem;
  padding: 9px 18px; border-radius: 10px;
  text-decoration: none; transition: background .2s, transform .1s;
}
.boton:hover { background: var(--color-primary-dark); }
.boton:active { transform: scale(.98); }
.boton.secundario { background: #fff; color: var(--color-primary-dark); border: 1px solid var(--color-primary-mid); }
.boton.secundario:hover { background: var(--color-primary-soft); }
.boton.peligro { background: var(--color-accent); }
.boton.peligro:hover { background: var(--color-accent-light); }
.boton.mini { padding: 5px 11px; font-size: .74rem; border-radius: 8px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: .74rem; font-weight: 600; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=search],
input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%;
  font-family: var(--font-body); font-size: .9rem; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 9px 12px; outline: none; transition: border-color .2s, background .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); background: #fff; }
::placeholder { color: var(--color-text-soft); opacity: 1; }

.fila-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fila-filtros > div { flex: 1 1 150px; min-width: 130px; }
.fila-filtros .boton { margin-bottom: 1px; }

/* Mensajes de estado */
.aviso-ok, .aviso-exito, .aviso-error, .aviso-info {
  border-radius: 10px; padding: 12px 16px; font-size: .86rem; margin-bottom: 16px;
  animation: aparecer .4s ease both;
}
.aviso-ok, .aviso-exito { background: var(--color-success-soft); border: 1px solid #BFDCCB; color: var(--color-success-tinta); }
.aviso-error{ background: #FBEAEA; border: 1px solid #EBB6B6; color: #8E1126; }
.aviso-info { background: var(--color-primary-soft); border: 1px solid var(--color-primary-mid); color: var(--color-primary-dark); }

/* ============================================================
   INDICADORES (KPI) Y CHIPS DE BANDA
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 6px 0 4px; }
.kpi {
  background: #fff;
  border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--sombra);
}
.kpi .rotulo { font-size: .7rem; font-weight: 600; color: var(--color-text-soft); letter-spacing: .05em; text-transform: uppercase; }
.kpi .valor { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1.15; margin-top: 2px; }
/* En muchas pantallas el rótulo va debajo del valor; el orden visual no cambia */
.kpi .valor + .rotulo, .kpi .rotulo + .valor { margin-top: 3px; }

.chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: var(--color-bg-alt); color: var(--color-text-soft);
}

/* Las bandas de nivel, en el lenguaje sobrio: azul lo alto, salvia lo bueno,
   oro lo justo, rojo solo lo que pide atención */
.b-exc { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.b-sat { background: var(--color-success-soft); color: var(--color-success-tinta); }
.b-ace { background: #F7F0DC; color: #7A6210; }
.b-rie { background: #F7E7E2; color: var(--color-accent); }
.b-no  { background: #FBEAEA; color: #8E1126; }
.banda-excelencia { background: var(--color-success-soft); color: var(--color-success); }

/* ============================================================
   TABLAS
   ============================================================ */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabla th {
  text-align: left; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-primary-dark); font-weight: 600;
  background: var(--color-primary-soft);
  padding: 9px 11px; border-bottom: 1px solid var(--color-primary-mid);
  white-space: nowrap;
}
.tabla td { padding: 8px 11px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--color-bg); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.tabla a:hover { color: var(--color-primary-dark); text-decoration: underline; }

th.ordenable { cursor: pointer; user-select: none; }
th.ordenable:hover { color: var(--color-primary); }

/* Barras horizontales de avance */
.barra { background: var(--color-bg-alt); border-radius: 999px; height: 8px; min-width: 70px; overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); transition: width .5s ease; }
.barra .rojo { background: var(--color-accent); }
.barra .verde { background: var(--color-success); }

/* ============================================================
   ESTADOS VACÍOS
   ============================================================ */
.vacio {
  text-align: center; color: var(--color-text-soft);
  padding: 38px 20px; font-size: .9rem;
}
.vacio .icono { font-size: 2rem; display: block; margin-bottom: 8px; opacity: .4; }

/* ============================================================
   LA ENTRADA (login)
   ============================================================ */
.login-fondo {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 16px;
}
.login-caja {
  background: #fff; border: 1px solid var(--color-border); border-radius: 18px;
  box-shadow: var(--sombra-fuerte);
  width: 100%; max-width: 400px; padding: 36px 32px 28px;
  animation: aparecer .5s ease both;
  text-align: center;
}
.login-caja .marca-entrada { height: 84px; width: auto; margin-bottom: 12px; }
.login-caja .escudo-grande { height: 84px; margin-bottom: 10px; }
.login-caja h1 { font-size: 1.35rem; margin: 0; letter-spacing: .08em; }
.login-caja .colegio { color: var(--color-text-soft); font-size: .8rem; margin: 4px 0 22px; }
.login-caja form { text-align: left; }
.login-caja .boton { width: 100%; margin-top: 16px; padding: 11px; }
.login-nota { font-size: .72rem; color: var(--color-text-soft); margin-top: 18px; line-height: 1.5; }

/* ============================================================
   EL MAPA · La primera pantalla de quien gobierna
   ============================================================ */
.mapa-puertas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 6px; }
.puerta-ficha {
  display: flex; flex-direction: column; gap: 9px;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.puerta-ficha:hover { box-shadow: var(--sombra-fuerte); transform: translateY(-1px); }
.puerta-cab { display: flex; align-items: center; gap: 10px; }
.puerta-cab .puerta-icono { width: 34px; height: 34px; flex: none; color: var(--color-primary); }
.puerta-cab h2 { margin: 0; font-size: 1rem; }
.puerta-cab .quien { font-size: .7rem; color: var(--color-text-soft); display: block; margin-top: 1px; font-weight: 500; }
.puerta-lineas { margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--color-text-soft); display: flex; flex-direction: column; gap: 5px; }
.puerta-lineas .num { font-weight: 700; color: var(--color-primary-dark); }
.puerta-lineas .num.atencion { color: var(--color-accent); }
.puerta-lineas .num.bien { color: var(--color-success); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--color-border); }
.punto.ok { background: var(--color-success); }
.punto.espera { background: var(--color-oro); }
.punto.alerta { background: var(--color-accent); }

/* ============================================================
   FICHA DEL ESTUDIANTE
   ============================================================ */
.ficha-encabezado { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.ficha-nombre { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--color-primary-dark); }
.ficha-datos { color: var(--color-text-soft); font-size: .84rem; }

.rasgos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rasgo { background: var(--color-bg-alt); border-radius: 10px; padding: 10px 13px; font-size: .8rem; }
.rasgo b { display: block; font-size: .7rem; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }

/* ============================================================
   PIE
   ============================================================ */
.pie {
  border-top: 1px solid var(--color-border);
  background: #fff;
  padding: 16px 22px 20px; text-align: center;
}
.pie-aviso { color: var(--color-text-soft); font-size: .72rem; max-width: 760px; margin: 0 auto 6px; }
.pie-firma { color: var(--color-primary-dark); font-weight: 600; font-size: .74rem; margin: 0; }

/* ============================================================
   RESPONSIVE · Por debajo de 600px todo se apila
   ============================================================ */
@media (max-width: 600px) {
  .contenido { padding: 14px 10px 30px; }
  .tarjeta { padding: 15px 14px; border-radius: 12px; }
  .cabecera { padding: 8px 12px; }
  .escudo { height: 30px; }
  .marca-sistema { font-size: .9rem; }
  .usuario-nombre { display: none; }
  .puertas { width: 100%; order: 3; margin-left: 0; }
  h1 { font-size: 1.2rem; }
  .kpi .valor { font-size: 1.3rem; }
  .fila-filtros > div { flex-basis: 100%; }
}

/* ============================================================================
   MOSAICO Y BOTONES CÓMODOS
   ----------------------------------------------------------------------------
   Los docentes vienen de Educ@, donde se entra a un módulo y se ven fichas
   grandes con su nombre debajo, y los menús son pastillas anchas fáciles de
   pulsar. Se conserva esa comodidad, ahora con el lenguaje sobrio.
   ============================================================================ */

/* >>> CAMBIAR TAMAÑO DE LAS FICHAS AQUÍ <<< */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 4px 0 2px; }

.ficha-accion {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; text-decoration: none;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radio);
  padding: 22px 16px; min-height: 132px;
  color: var(--color-primary-dark); font-weight: 600; font-size: .92rem;
  font-family: var(--font-display); line-height: 1.3;
  box-shadow: var(--sombra);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ficha-accion:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-mid);
  box-shadow: var(--sombra-fuerte);
}
.ficha-accion .simbolo { font-size: 1.9rem; line-height: 1; color: var(--color-primary); }
.ficha-accion .apunte { font-weight: 500; font-size: .74rem; color: var(--color-text-soft); font-family: var(--font-body); }
.ficha-accion.hecho { border-color: #BFDCCB; background: #FDFEFD; }
.ficha-accion.hecho .simbolo { color: var(--color-success); }
.ficha-accion.pendiente { border-style: dashed; }

/* Pastillas anchas, fáciles de pulsar */
.pastillas { display: flex; flex-direction: column; gap: 8px; }
.pastilla {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px 18px; text-decoration: none; color: var(--color-text);
  font-weight: 600; font-size: .92rem; transition: background .16s, border-color .16s;
}
.pastilla:hover { background: var(--color-bg); border-color: var(--color-primary-mid); }
.pastilla .flecha { color: var(--color-primary); font-weight: 700; }
.pastilla .detalle { font-weight: 500; font-size: .78rem; color: var(--color-text-soft); }

/* En las pantallas de trabajo del docente, los botones no son diminutos */
.boton.comodo { padding: 11px 20px; font-size: .92rem; border-radius: 11px; }

@media (max-width: 600px) {
  .mosaico { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .ficha-accion { min-height: 108px; padding: 16px 10px; font-size: .84rem; }
  .ficha-accion .simbolo { font-size: 1.6rem; }
}

/* Momentos plegables: solo se abre el que se está trabajando */
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary:hover { opacity: .82; }
details.tarjeta[open] > summary span:last-child { color: var(--color-primary); }
details.tarjeta[open] > summary span:last-child span { display: inline-block; transform: rotate(180deg); }

/* Retrato del estudiante en la pantalla del docente.
   Cuando no hay foto o la familia no autorizó, se muestran sus iniciales. */
.retrato {
  width: 38px; height: 38px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--color-border); background: var(--color-bg-alt); display: block;
}
.retrato-iniciales {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--color-primary); letter-spacing: .04em;
}

/* ============================================================
   ASISTENCIA · la lista para pasar desde el teléfono, la semana
   de horarios y las hojas de reporte (migración 018, 14/09/2026)
   ============================================================ */
.lista-asistencia { display: flex; flex-direction: column; gap: 8px; }
.fila-asistencia {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) auto minmax(180px, 1fr);
  gap: 10px 14px; align-items: center;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 9px 12px;
  transition: background .15s, border-color .15s;
}
.fila-asistencia.estado-ausente { background: #FBEAEA; border-color: #EBB6B6; }
.fila-asistencia.estado-pase    { background: #F7F0DC; border-color: #E8D9A6; }
.fila-asistencia.estado-retardo { background: #F7E7E2; border-color: #E9C1B6; }
.fa-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fa-nombre { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.fa-num { color: var(--color-text-soft); font-weight: 500; font-size: .78rem; }
.fa-nota { font-size: .72rem; color: var(--color-success); font-weight: 600; }
.fa-estados { display: flex; gap: 6px; flex-wrap: wrap; }
.estado-opcion { position: relative; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; }
.estado-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.estado-opcion span {
  display: inline-block; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text-soft); min-width: 64px; text-align: center; user-select: none;
}
.estado-opcion input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.estado-opcion.est-presente input:checked + span { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.estado-opcion.est-ausente  input:checked + span { background: var(--color-accent);  border-color: var(--color-accent);  color: #fff; }
.estado-opcion.est-pase     input:checked + span { background: #B8952B; border-color: #B8952B; color: #fff; }
.estado-opcion.est-retardo  input:checked + span { background: #C77A5E; border-color: #C77A5E; color: #fff; }
.fa-extra { display: flex; gap: 6px; }
.fa-extra select, .fa-extra input { padding: 6px 9px; font-size: .8rem; border-radius: 8px; }
.fa-extra select { flex: 0 1 150px; }
/* El botón "Más" de cada fila: solo existe en el teléfono */
.fa-mas { display: none; }
.fa-quien > div { flex: 1; min-width: 0; }

/* LA FILA COMPACTA EN EL TELÉFONO (crítica Impeccable, 27/10/2026):
   nombre arriba, los cuatro estados en una sola fila a tamaño de dedo, y los
   detalles (marca, salidas, observación) plegados detrás de "Más". */
@media (max-width: 720px) {
  .lista-asistencia { gap: 6px; }
  .fila-asistencia { grid-template-columns: 1fr; gap: 7px; padding: 8px 10px; }
  .fila-asistencia .retrato, .fila-asistencia .retrato-iniciales { width: 32px; height: 32px; border-radius: 8px; font-size: .72rem; }
  .fa-nombre { font-size: .88rem; }
  .fa-estados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .estado-opcion span { display: block; min-width: 0; width: 100%; padding: 12px 2px; font-size: .8rem; }
  .fa-mas {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-height: 40px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--color-primary-mid); background: #fff;
    color: var(--color-primary-dark); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  }
  .fila-asistencia.abierta .fa-mas { background: var(--color-primary-soft); }
  .fa-extra { display: none; flex-wrap: wrap; }
  .fila-asistencia.abierta .fa-extra { display: flex; }
  .fa-extra select { flex: 1 1 100%; }
  /* Las señales de alerta (rojas y ámbar) siempre a la vista; las de
     contexto (faltas del momento, pases del año, el historial) tras "Más" */
  .fila-asistencia:not(.abierta) .ah-senales .ah-gris,
  .fila-asistencia:not(.abierta) .ah-senales .ah-ver { display: none; }
  .fila-asistencia:not(.abierta) .ah-senales:not(:has(.ah-rojo, .ah-ambar)) { display: none; }
}

/* La semana de horarios */
.horario-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.horario-dia { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px; min-height: 80px; }
.horario-dia-cab { font-family: var(--font-display); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary-dark); padding: 4px 6px 8px; }
.horario-bloque { position: relative; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: 9px; padding: 8px 10px; margin-bottom: 7px; font-size: .8rem; }
.hb-hora { font-weight: 700; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.hb-que { font-weight: 600; margin-top: 2px; }
.hb-quien { color: var(--color-text-soft); font-size: .74rem; margin-top: 1px; }
.hb-quitar { position: absolute; top: 4px; right: 4px; }
.hb-quitar button { border: none; background: transparent; color: var(--color-text-soft); font-size: 1rem; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.hb-quitar button:hover { background: #FBEAEA; color: var(--color-accent); }

/* Hojas de reporte, en pantalla y en papel */
.hoja-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hoja-escudo { width: 52px; height: 52px; object-fit: contain; }
.hoja-colegio { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-soft); font-weight: 600; }
.hoja-rango { font-size: .82rem; color: var(--color-text-soft); margin-top: 2px; }
.hoja-nota { font-size: .78rem; color: var(--color-text-soft); margin: 10px 0 0; }
.hoja-pie { font-size: .72rem; color: var(--color-text-soft); margin: 18px 0 0; border-top: 1px solid var(--color-border); padding-top: 8px; }
table.tabla.compacta { font-size: .8rem; }
table.tabla.compacta td, table.tabla.compacta th { padding: 6px 9px; }

@media print {
  .cabecera, .navegacion, .pie, .no-imprimir, .hb-quitar { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border: none; padding: 0; margin: 0 0 12px; animation: none; }
  .kpis { gap: 8px; }
  .kpi { box-shadow: none; padding: 8px 10px; }
  .tabla-envoltura { border: none; overflow: visible; }
  table.tabla { font-size: .74rem; }
  .tabla th { background: #eee !important; color: #000; }
  .chip { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  a { color: inherit; text-decoration: none; }
  @page { size: letter; margin: 14mm; }
}

/* La barra de guardar de la lista: fija abajo, compacta en el teléfono */
.barra-guardar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: sticky; bottom: 0; z-index: 5; }
/* Lo que dice si quedó guardado: visible también en el teléfono */
.estado-guardado { font-size: .8rem; color: var(--color-text-soft); flex: 1 1 220px; min-width: 0; }
.boton[disabled] { cursor: progress; }
@media (max-width: 600px) {
  .barra-guardar { padding: 10px 12px; margin-bottom: 0; border-radius: 12px 12px 0 0; }
  .barra-guardar .detalle { display: none; }
  .estado-guardado { flex-basis: 100%; font-size: .76rem; order: 3; }
  .barra-guardar .boton.comodo { padding: 10px 16px; font-size: .88rem; }
}

/* ============================================================
   MOVERSE SIN PERDERSE (Rector, 22/09/2026)
   La barra de regreso: dice dónde está uno y lo devuelve a
   donde estaba, sin pasar por el menú principal.
   ============================================================ */
.barra-volver {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 22px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: .78rem;
}
.barra-volver .volver {
  color: var(--color-primary); text-decoration: none; font-weight: 600;
  border: 1px solid var(--color-border); background: #fff;
  border-radius: 999px; padding: 3px 12px; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.barra-volver .volver:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.barra-volver .migas { color: var(--color-text-soft); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.barra-volver .migas a { color: var(--color-text-soft); text-decoration: none; }
.barra-volver .migas a:hover { color: var(--color-primary); text-decoration: underline; }
.barra-volver .migas strong { color: var(--color-text); font-weight: 600; }
@media print { .barra-volver { display: none; } }

/* ============================================================
   EL ROSTRO EN GRANDE
   Al tocar la foto de un estudiante, se abre para verla bien.
   ============================================================ */
.retrato, .orla-card img { cursor: zoom-in; }
.visor-retrato {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(18, 63, 133, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: visor-entra .16s ease-out;
}
@keyframes visor-entra { from { opacity: 0 } to { opacity: 1 } }
.visor-caja {
  position: relative; background: #fff; border-radius: 18px;
  padding: 18px; max-width: min(92vw, 460px); text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.visor-caja img {
  display: block; width: 100%; max-height: 68vh; object-fit: contain;
  border-radius: 12px; background: var(--color-bg-alt);
}
.visor-nombre {
  margin: 12px 0 8px; font-family: var(--font-display); font-weight: 700;
  color: var(--color-primary-dark); font-size: .95rem; line-height: 1.3;
}
.visor-caja p { margin: 8px 0 0; }
.visor-cerrar {
  position: absolute; top: -12px; right: -12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--color-border); background: #fff;
  color: var(--color-text); font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.visor-cerrar:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ============================================================
   MONTAR LA PLANIFICACIÓN (Rector, 22/09/2026)
   Cajitas de competencia, contenidos con casilla, la tabla que
   se va armando y el calendario de días de clase.
   ============================================================ */
.mom-cabecera {
  background: var(--color-bg-alt); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
.mom-titulo { font-weight: 700; margin: 0 0 6px; font-family: var(--font-display); color: var(--color-primary-dark); }
.mom-cabecera summary, .comp-porque summary, .ind-porque summary, .cont-xxi summary {
  cursor: pointer; font-size: .78rem; color: var(--color-primary-dark);
}
.plan-avance {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 16px;
}
.plan-avance-texto { font-size: .84rem; }
.plan-avance-texto strong { color: var(--color-primary); font-family: var(--font-display); }
.plan-barra {
  height: 8px; border-radius: 999px; background: #fff;
  border: 1px solid var(--color-border); overflow: hidden; margin: 9px 0 0;
}
.plan-barra span { display: block; height: 100%; background: var(--color-success); transition: width .3s ease; }
.plan-instruccion { font-size: .82rem; color: var(--color-text-soft); margin: 0 0 10px; }

/* Las cajitas de competencia */
.comp-cajas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.comp-caja {
  flex: 1 1 210px; max-width: 280px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 11px 13px; font-family: inherit; color: var(--color-text);
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.comp-caja:hover { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(52, 84, 154, .1); }
.comp-caja.abierta { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 3px 12px rgba(52, 84, 154, .12); }
.comp-caja.completa { border-color: var(--color-success); }
.comp-caja-codigo { font-family: var(--font-display); font-weight: 700; color: var(--color-primary-dark); font-size: .95rem; }
.comp-caja-texto { font-size: .82rem; line-height: 1.4; }
.comp-caja-pie { font-size: .74rem; color: var(--color-text-soft); }
.comp-caja-pie .tic { color: var(--color-success); font-weight: 700; }

/* El panel abierto de una competencia */
.comp-panel {
  border: 1px solid var(--color-primary); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; background: #fff;
}
.comp-panel.oculto { display: none; }
.comp-panel-titulo { margin: 0 0 8px; font-weight: 700; font-size: .92rem; line-height: 1.4; }
.comp-porque, .ind-porque { margin: 0 0 10px; }
.comp-porque p, .ind-porque p, .cont-xxi p { font-size: .78rem; line-height: 1.55; margin: 6px 0 0; }

.ind-bloque { border-top: 1px solid var(--color-border); padding: 12px 0 4px; }
.ind-cabeza { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.ind-texto { margin: 0; font-size: .85rem; line-height: 1.45; flex: 1 1 300px; }
.ind-texto strong { color: var(--color-primary); }

.cont-lista { list-style: none; margin: 10px 0 4px; padding: 0 0 0 4px; }
.cont-fila { margin-bottom: 8px; padding: 6px 8px; border-radius: 8px; transition: background .12s ease; }
.cont-fila:hover { background: var(--color-bg); }
.cont-fila.ya-esta { opacity: .6; }
.cont-linea { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.cont-fila.ya-esta .cont-linea { cursor: default; }
.cont-linea input { margin-top: 3px; flex: 0 0 auto; }
.cont-texto { font-size: .81rem; line-height: 1.45; }
.cont-puesto { font-size: .72rem; color: var(--color-text-soft); }
.cont-xxi { margin: 4px 0 0 28px; }
.cont-xxi summary { font-size: .76rem; color: var(--color-text-soft); }
.cont-biblio { margin: 4px 0 0 28px; font-size: .74rem; color: var(--color-primary-dark); }

/* La tabla limpia que se va armando */
.plan-armando {
  border: 1px dashed var(--color-primary); border-radius: 12px;
  padding: 14px 16px; margin: 18px 0 0; background: var(--color-bg);
}
.plan-armando h3 { margin: 0 0 10px; font-size: .92rem; color: var(--color-primary-dark); }
.tabla-armando { font-size: .8rem; }
.tabla-armando .celda-competencia { background: var(--color-primary-soft); vertical-align: top; }
.tabla-armando td { vertical-align: top; }
.lista-contenidos { margin: 0; padding-left: 16px; }
.lista-contenidos li { margin-bottom: 4px; line-height: 1.4; }

.plan-accion {
  position: sticky; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 11px 14px; margin-top: 14px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .07);
}
.plan-accion.con-seleccion { border-color: var(--color-primary); }
.plan-accion-cuenta { font-size: .82rem; color: var(--color-text-soft); }
.plan-accion.con-seleccion .plan-accion-cuenta { color: var(--color-primary); font-weight: 600; }

/* El calendario de días de clase */
.dia-chip {
  display: inline-block; background: var(--color-primary); color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: .68rem; margin: 1px 2px 1px 0; white-space: nowrap;
}
.cal-caja > summary { cursor: pointer; list-style: none; }
.cal-caja > summary::-webkit-details-marker { display: none; }
.cal-poner {
  display: inline-block; border: 1px dashed var(--color-border); border-radius: 999px;
  padding: 2px 10px; font-size: .74rem; color: var(--color-text-soft);
}
.cal-caja[open] > summary .cal-poner { border-color: var(--color-primary); color: var(--color-primary); }
.cal-form {
  margin-top: 8px; background: #fff; border: 1px solid var(--color-primary);
  border-radius: 12px; padding: 12px; min-width: 260px;
}
.cal-ayuda { font-size: .74rem; color: var(--color-text-soft); margin: 0 0 8px; }
.cal-semanas { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
.cal-semana { border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
.cal-semana-n { display: block; font-size: .7rem; color: var(--color-text-soft); margin-bottom: 3px; }
.cal-dias { display: flex; gap: 4px; }
.cal-dia {
  position: relative; cursor: pointer; text-align: center; font-weight: 400;
  border: 1px solid var(--color-border); border-radius: 8px;
  padding: 3px 0; width: 34px; background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.cal-dia:hover { border-color: var(--color-primary); }
.cal-dia input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-dia-letra { display: block; font-size: .6rem; color: var(--color-text-soft); }
.cal-dia-num { display: block; font-size: .82rem; font-family: var(--font-display); font-weight: 600; }
.cal-dia.marcado { background: var(--color-primary); border-color: var(--color-primary); }
.cal-dia.marcado .cal-dia-letra, .cal-dia.marcado .cal-dia-num { color: #fff; }
@media print { .plan-accion, .comp-cajas, .cal-caja { display: none; } }

/* ============================================================
   LA PLANIFICACIÓN AGRUPADA Y EL APORTE DEL DOCENTE
   (Rector, 22/09/2026)
   ============================================================ */
.plan-tabla td { vertical-align: top; }
.plan-tabla .celda-competencia { background: var(--color-primary-soft); }
.lista-orientadores { margin: 0; padding-left: 15px; font-size: .79rem; }
.lista-orientadores li { margin-bottom: 6px; line-height: 1.4; position: relative; }
.quitar-linea { display: inline; }
.quitar-x {
  border: none; background: none; cursor: pointer; color: var(--color-text-soft);
  font-size: 1rem; line-height: 1; padding: 0 3px;
}
.quitar-x:hover { color: var(--color-accent); }
.sel-semanas { font-size: .76rem; max-width: 100%; }
.dias-de-uno { margin-bottom: 7px; }

.aporte-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.aporte-campo { display: flex; flex-direction: column; gap: 4px; }
.aporte-campo label { font-size: .78rem; font-weight: 600; color: var(--color-primary-dark); }
.aporte-campo textarea {
  width: 100%; padding: 8px 11px; font-family: inherit; font-size: .84rem;
  border: 1px solid var(--color-border); border-radius: 10px; background: #fff;
  color: var(--color-text); resize: vertical; line-height: 1.45;
}
.aporte-campo textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.aporte-nota { font-size: .72rem; color: var(--color-text-soft); }

/* Las tres piezas del aporte del docente, en la bandeja de la coordinación */
.aporte-piezas p { margin: 0 0 6px; font-size: .82rem; line-height: 1.45; }
.aporte-piezas span {
  display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-soft); margin-bottom: 1px;
}

/* El origen de un renglón de la malla: un punto y nada más (Rector, 22/09/2026).
   Verde, lo que los docentes ya trabajaron; azul, lo que incorporó el Colegio. */
.punto-origen {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle; margin: 0 2px; flex: 0 0 auto;
}
.leyenda-puntos {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font-size: .78rem; color: var(--color-text-soft);
}
.leyenda-puntos span { display: inline-flex; align-items: center; gap: 6px; }

/* Lo que se va a quitar al guardar, mientras tanto se ve tachado */
.lista-orientadores li.se-quita { text-decoration: line-through; opacity: .5; }
.quitar-linea { cursor: pointer; display: inline; }
.quitar-linea input { position: absolute; opacity: 0; width: 0; height: 0; }
.quitar-linea .quitar-x { color: var(--color-text-soft); font-size: 1rem; padding: 0 3px; }
.quitar-linea:hover .quitar-x { color: var(--color-accent); }
.quitar-linea input:checked + .quitar-x { color: var(--color-accent); font-weight: 700; }
.cal-pie { font-size: .72rem; color: var(--color-text-soft); margin: 10px 0 0; }

/* ============================================================
   LA BITÁCORA DE LA PLANIFICACIÓN (Rector, 22/09/2026)
   Qué se añadió, qué se quitó y qué se cambió, con día y hora.
   ============================================================ */
.bitacora { list-style: none; margin: 12px 0 0; padding: 0; }
.bitacora li {
  position: relative; padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--color-border); font-size: .82rem; line-height: 1.5;
}
.bitacora li:last-child { border-bottom: none; }
.bitacora li::before {
  content: ''; position: absolute; left: 3px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);
}
.bitacora li.bit-quitar::before { background: var(--color-accent); }
.bitacora li.bit-anadir::before { background: var(--color-success); }
.bitacora li.bit-entregar::before, .bitacora li.bit-reabrir::before { background: #C8A227; }
.bit-cuando { display: block; font-size: .72rem; color: var(--color-text-soft); }
.bit-texto { display: block; }
.bit-quien { font-size: .72rem; color: var(--color-text-soft); }

/* ============================================================
   EL PLAN DE EVALUACIÓN POR INDICADOR (Rector, 23/09/2026)
   ============================================================ */
.ev-indicador {
  border: 1px solid var(--color-border); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 8px; background: #fff;
}
.ev-indicador > summary { cursor: pointer; font-size: .83rem; line-height: 1.45; }
.ev-indicador[open] { border-color: var(--color-primary); }
.ev-cuenta {
  font-size: .68rem; color: var(--color-text-soft); background: var(--color-bg-alt);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; margin-left: 6px;
}
.ev-orientadores { list-style: none; margin: 8px 0 4px; padding: 0 0 0 6px; }
.ev-orientadores li { margin-bottom: 6px; }
.ev-orientadores label, .ev-suelto {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  font-size: .8rem; line-height: 1.45; font-weight: 400;
}
.ev-orientadores input, .ev-suelto input { margin-top: 3px; flex: 0 0 auto; }
.ev-suelto { padding: 6px 4px; }
.ev-ya { font-size: .72rem; color: var(--color-success); font-style: normal; margin-left: 5px; }

/* ============================================================
   EL CINTILLO DEL CRONOGRAMA Y SU PANTALLA (Rector, 23/09/2026)
   ============================================================ */
.cintillo-cronograma {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--color-primary-dark); color: #fff;
  padding: 6px 22px; font-size: .78rem;
}
.cint-etiqueta {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-size: .66rem; color: #F2C94C; white-space: nowrap;
}
.cint-eventos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; }
.cint-sep { opacity: .5; }
.cint-ev strong { color: #F2C94C; font-weight: 600; }
.cint-mas { color: #fff; text-decoration: none; opacity: .85; white-space: nowrap; }
.cint-mas:hover { opacity: 1; text-decoration: underline; }
@media print { .cintillo-cronograma { display: none; } }

.cron-mes { color: var(--color-primary-dark); font-size: .95rem; margin: 18px 0 8px; }
.cron-evento { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.cron-evento:last-child { border-bottom: none; }
.cron-evento.hoy { background: rgba(18, 63, 133, .05); border-radius: 8px; padding: 8px; }
.cron-evento.pasado { opacity: .6; }
.cron-fecha {
  flex: 0 0 46px; text-align: center; background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-radius: 10px; padding: 4px 0;
}
.cron-dia { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-primary); }
.cron-diasem { display: block; font-size: .64rem; color: var(--color-text-soft); text-transform: uppercase; }
.cron-texto { font-size: .84rem; line-height: 1.5; }
.cron-detalle { display: block; font-size: .78rem; color: var(--color-text-soft); }

/* ============================================================
   LA HOJA DEL INSTRUMENTO (Rector, 23/09/2026)
   En pantalla se edita; impresa es la hoja A4 que va al aula.
   ============================================================ */
.hoja-instrumento { max-width: 900px; }
.inst-cabecera { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; border-bottom: 2px solid var(--color-primary); padding-bottom: 10px; margin-bottom: 12px; }
.inst-colegio { font-size: .72rem; color: var(--color-text-soft); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.inst-titulo { margin: 0 0 4px; color: var(--color-primary-dark); font-size: 1.15rem; }
.inst-titulo-campo { width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-primary-dark); border: 1px dashed var(--color-border); border-radius: 8px; padding: 4px 8px; margin: 0 0 4px; }
.inst-datos { font-size: .78rem; color: var(--color-text-soft); margin: 2px 0; }
.inst-seccion { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent); font-weight: 700; margin: 14px 0 3px; }
.inst-texto { font-size: .84rem; line-height: 1.5; margin: 0; }
.inst-instruccion { width: 100%; font-family: inherit; font-size: .84rem; border: 1px dashed var(--color-border); border-radius: 8px; padding: 6px 9px; }
.inst-criterio { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.inst-criterio-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--color-bg-alt); padding: 8px 12px; font-size: .86rem; }
.inst-criterio-nombre { flex: 1 1 auto; font-family: inherit; font-weight: 600; font-size: .84rem; border: 1px dashed var(--color-border); border-radius: 8px; padding: 4px 8px; background: #fff; }
.inst-puntos { white-space: nowrap; font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: .84rem; }
.inst-puntos input { width: 58px; }
.inst-niveles { font-size: .8rem; margin: 0; }
.inst-niveles td { vertical-align: top; }
.inst-niveles textarea, .inst-niveles input { width: 100%; font-family: inherit; font-size: .78rem; border: 1px dashed var(--color-border); border-radius: 6px; padding: 3px 6px; }
.inst-marca { text-align: center; font-size: 1.1rem; color: var(--color-text-soft); }
.inst-suma { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--color-success); margin: 10px 0 0; }
.inst-suma.descuadrada { color: var(--color-error); }
.inst-examen { font-size: .84rem; line-height: 1.6; margin: 4px 0 0 18px; }
.inst-nota { font-size: .72rem; color: var(--color-text-soft); margin-top: 14px; border-top: 1px solid var(--color-border); padding-top: 8px; }
@media print {
  .no-imprimir, header, .navegacion, .barra-volver, .cintillo-cronograma { display: none !important; }
  .hoja-instrumento { box-shadow: none; border: none; max-width: none; }
  .inst-niveles textarea, .inst-niveles input, .inst-criterio-nombre, .inst-instruccion, .inst-titulo-campo { border: none; }
}

/* Los plazos del trabajo docente (Rector, 23/09/2026) */
.plazos-lista { display: flex; flex-direction: column; }
.plazo-fila {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.plazo-fila:last-child { border-bottom: none; }
.plazo-texto { flex: 1 1 auto; }
.plazo-texto strong { display: block; font-size: .86rem; color: var(--color-primary-dark); }
.plazo-texto span { font-size: .76rem; color: var(--color-text-soft); line-height: 1.4; }
.plazo-fila input { width: 90px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

/* El ojito de las claves (Rector, 23/09/2026) */
.campo-con-ojito { position: relative; display: block; }
.campo-con-ojito input { width: 100%; padding-right: 44px; }
.ojito {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; padding: 6px;
  color: var(--color-text-soft); line-height: 0; border-radius: 8px;
}
.ojito:hover { color: var(--color-primary); background: var(--color-bg-alt); }

/* ============================================================
   LA BIBLIOTECA ACADÉMICA (Rector, 23/09/2026)
   ============================================================ */
.banco-cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.banco-titulo { margin: 0; font-size: .88rem; line-height: 1.45; flex: 1 1 340px; }
.banco-clase { color: var(--color-primary-dark); margin: 12px 0 4px; font-size: 1.05rem; }
.banco-seccion { border-top: 1px solid var(--color-border); margin-top: 10px; padding-top: 8px; }
.banco-seccion > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--color-primary-dark); }
.banco-texto { font-size: .84rem; line-height: 1.6; margin-top: 8px; }
.banco-texto p { margin: 0 0 10px; }
.banco-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 12px; }
.banco-valorar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; flex: 1 1 340px; }
.banco-valorar input[type="text"] { flex: 1 1 200px; }
.estrategia-oferta { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.estrategia-oferta > summary { cursor: pointer; font-size: .82rem; }
.estrategia-oferta p { font-size: .8rem; margin: 6px 0 0; }

/* ============================================================
   LA CUADRÍCULA DE NOTAS EN UN PANTALLAZO (Rector, 23/09/2026)
   Nota, superación y plus juntas, con el total de la evaluación.
   ============================================================ */
.celda-eval { vertical-align: top; }
.trio { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.trio label { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }
.trio label span {
  flex: 0 0 38px; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-soft); text-align: right;
}
.trio input {
  width: 54px; text-align: right; padding: 3px 6px; font-size: .84rem;
  border: 1px solid var(--color-border); border-radius: 7px;
}
.trio input:disabled { background: var(--color-bg-alt); color: var(--color-text-soft); }
/* El estado de cada casilla (crítica Impeccable, 27/10/2026): el borde habla del
   guardado, no del tipo de casilla; el tipo lo dice su rótulo */
.trio input.nota-guardando { border-color: var(--color-primary-mid); }
.trio input.nota-ok { border-color: var(--color-success); }
.trio input.nota-pendiente { border-color: var(--color-oro); border-style: dashed; background: #FFFBEF; }
.trio input.nota-error { border-color: var(--color-accent); background: #FBEFEC; }
.trio-estado { font-size: .72rem; line-height: 1.3; text-align: right; min-height: 0; }
.trio-estado.es-ok { color: var(--color-success-tinta); }
.trio-estado.es-pendiente { color: #7A6210; font-weight: 600; }
.trio-estado.es-error { color: var(--color-accent); font-weight: 600; text-align: left; max-width: 150px; }
.trio-estado.es-guardando { color: var(--color-text-soft); }
/* La columna del estudiante en la cuadrícula: foto y nombre juntos, la que se queda fija */
.cel-est { min-width: 200px; }
.cel-est-in { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.cel-est-in .retrato, .cel-est-in .retrato-iniciales { flex: 0 0 auto; }
/* El selector de evaluación y los botones NP / I: solo en el teléfono */
.elegir-ev { display: none; }
.trio-marcas { display: none; }
@media (max-width: 720px) {
  .elegir-ev { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
  .elegir-ev::-webkit-scrollbar { display: none; }
  .elegir-ev-boton {
    flex: 0 0 auto; max-width: 200px; text-align: left; font-family: inherit; font-size: .8rem;
    padding: 8px 12px; min-height: 44px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--color-primary-mid); background: #fff; color: var(--color-primary-dark);
  }
  .elegir-ev-boton span { display: block; font-size: .74rem; color: var(--color-text-soft); }
  .elegir-ev-boton.cerrada { border-color: var(--color-border); color: var(--color-text-soft); }
  .elegir-ev-boton[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
  .elegir-ev-boton[aria-selected="true"] span { color: rgba(255,255,255,.85); }
  #cuadricula .ev-fuera, #cuadricula .col-integradora, #cuadricula .col-resumen { display: none; }
  /* En el teléfono el nombre manda: la foto cede su lugar a la casilla */
  #cuadricula .cel-est { min-width: 92px; max-width: 32vw; }
  #cuadricula th[data-ev] { white-space: normal; }
  #cuadricula .cel-est-in { font-size: .84rem; line-height: 1.25; }
  #cuadricula .cel-est-in .retrato, #cuadricula .cel-est-in .retrato-iniciales { display: none; }
  #cuadricula td.celda-eval { padding-left: 6px; padding-right: 6px; }
  .trio label span { flex-basis: 30px; font-size: .6rem; letter-spacing: 0; }
  .trio label { gap: 4px; }
  /* Las casillas cerradas (superación o plus que no aplican) no ocupan lugar;
     si la nota abre la superación, aparece sola */
  .trio label:has(input[data-campo="superacion"]:disabled),
  .trio label:has(input[data-campo="plus"]:disabled) { display: none; }
  .trio input { width: 60px; }
  .trio label .trio-marcas { display: inline-flex; gap: 4px; flex: 0 0 auto; text-transform: none; letter-spacing: 0; }
  .trio-marcas button {
    min-width: 34px; min-height: 40px; padding: 0 3px; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: .8rem;
    border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-soft); cursor: pointer;
  }
}
/* La barra de la cuadrícula: dice si todo quedó guardado */
.barra-notas [hidden] { display: none; }
.barra-notas {
  position: sticky; bottom: 0; z-index: 5; margin-top: 12px; padding: 10px 14px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--color-success-soft); color: var(--color-success-tinta);
  border: 1px solid #BFDCCB; border-radius: 10px; font-size: .86rem;
}
.barra-notas.con-pendientes { background: #FFF7E0; color: #6B550D; border-color: #E8D9A6; }
@media (max-width: 720px) { .barra-notas { bottom: calc(var(--alto-barra-celular) + env(safe-area-inset-bottom, 0px)); } }
.trio-total {
  font-size: .76rem; font-weight: 700; color: var(--color-primary);
  text-align: right; padding-right: 4px; min-height: 15px;
  border-top: 1px dashed var(--color-border); margin-top: 2px; padding-top: 3px;
}

/* El formulario de editar en línea (nómina y plan de evaluación) */
.editar-docente > summary { list-style: none; display: inline-block; }
.editar-docente > summary::-webkit-details-marker { display: none; }
.editar-docente-form {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--color-primary); border-radius: 12px;
  padding: 12px; margin-top: 6px; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); position: absolute; right: 0; z-index: 60;
}
.editar-docente-form label { font-size: .74rem; font-weight: 600; color: var(--color-primary-dark); display: flex; flex-direction: column; gap: 3px; }
.editar-docente-form input { font-size: .82rem; }

/* Las tarjetas de los docentes, para el coordinador (Rector, 23/09/2026) */
.mosaico-docentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.docente-tarjeta { margin: 0; }
.docente-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.docente-cabeza strong { font-size: .92rem; color: var(--color-primary-dark); }
.docente-datos { display: block; font-size: .72rem; color: var(--color-text-soft); margin-top: 2px; }
.docente-accesos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Los interruptores de permisos por docente (Rector, 23/09/2026) */
.docente-permisos { display: flex; gap: 6px; margin-top: 8px; }
.permiso-boton {
  border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer;
  padding: 3px 10px; font-size: .72rem; font-family: inherit; background: #fff;
  transition: all .15s ease;
}
.permiso-boton.abierto { border-color: var(--color-success); color: var(--color-success); font-weight: 600; }
.permiso-boton.cerrado { border-color: var(--color-error); color: var(--color-error); background: rgba(184,84,80,.06); }
.permiso-boton:hover { transform: scale(1.03); }

/* El botón que abre la superación a quien aprobó (Rector, 23/09/2026) */
.abrir-superacion {
  border: 1px solid var(--color-primary); background: #fff; color: var(--color-primary);
  border-radius: 50%; width: 18px; height: 18px; line-height: 1; padding: 0; cursor: pointer;
  font-size: .68rem; font-family: inherit; margin-left: 3px; vertical-align: middle;
}
.abrir-superacion:hover { background: var(--color-primary); color: #fff; }
.abrir-superacion:disabled { opacity: .4; cursor: default; }

/* La banda del Salón de ensayo (Rector, 23/09/2026): imposible confundirse */
.banda-ensayo {
  background: repeating-linear-gradient(45deg, #7A4E00, #7A4E00 14px, #8A5A00 14px, #8A5A00 28px);
  color: #FFF3D6; text-align: center; padding: 7px 12px; font-size: .8rem; font-weight: 600;
  letter-spacing: .3px;
}
.banda-ensayo a { color: #fff; text-decoration: underline; }

/* El botón de salir, directo en la banda del ensayo */
.banda-ensayo { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.banda-boton {
  border: 1.5px solid #fff; background: transparent; color: #fff; border-radius: 999px;
  padding: 2px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.banda-boton:hover { background: #fff; color: #7A4E00; }

/* Las cajas de la Biblioteca para la gestión (Rector, 23/09/2026) */
.biblio-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.biblio-caja {
  border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; background: #fff;
  transition: box-shadow .15s ease;
}
.biblio-caja:hover { box-shadow: 0 3px 12px rgba(18,63,133,.10); }
.biblio-caja.activa { border-color: var(--color-primary); }
.biblio-caja-nombre { font-size: .8rem; font-weight: 700; color: var(--color-primary-dark); margin-bottom: 6px; }
.biblio-caja-anios { display: flex; gap: 5px; flex-wrap: wrap; }
.biblio-anio {
  border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 10px;
  font-size: .74rem; text-decoration: none; color: var(--color-text-soft); background: var(--color-bg);
}
.biblio-anio.con-fichas { color: var(--color-text); }
.biblio-anio.elegido { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.biblio-punto { color: var(--color-primary); font-size: .6rem; vertical-align: 2px; }
.biblio-anio.elegido .biblio-punto { color: #fff; }

/* El enlace del indicador planificado a su clase de la Biblioteca */
.enlace-biblio {
  display: inline-block; margin-top: 5px; font-size: .72rem; text-decoration: none;
  color: var(--color-primary); border: 1px solid var(--color-primary-mid, var(--color-border));
  border-radius: 999px; padding: 1px 9px; background: var(--color-primary-soft, #EEF3FB);
}
.enlace-biblio:hover { background: var(--color-primary); color: #fff; }
.enlace-biblio.pendiente { color: var(--color-text-soft); background: transparent; border-style: dashed; cursor: default; }

/* La cajita de descargas del documento formal */
.descargas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.descargas-rotulo { font-size: .78rem; font-weight: 600; color: var(--color-text-soft); }

/* Los meses a la vista en el calendario de la planificación (Rector, 23/09/2026) */
.cal-semana-rango { font-style: normal; font-weight: 400; color: var(--color-text-soft); font-size: .7rem; margin-left: 5px; }
.cal-dia-mes { display: block; font-size: .56rem; color: var(--color-text-soft); line-height: 1; margin-top: 1px; }
.cal-dia.marcado .cal-dia-mes { color: #fff; opacity: .85; }

/* El editor completo de la evaluación, con sus orientadores (Rector, 24/09/2026) */
.editar-eval-form { min-width: 320px; max-width: 420px; }
.editar-orientadores {
  max-height: 230px; overflow-y: auto; border: 1px solid var(--color-border);
  border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: var(--color-bg);
}
.editar-orientadores-ind {
  font-size: .72rem; font-weight: 700; color: var(--color-primary); margin: 6px 0 3px;
}
.editar-orientadores-item {
  display: flex; gap: 6px; align-items: flex-start; font-size: .74rem;
  font-weight: 400; margin: 0 0 3px 8px; cursor: pointer;
}
.editar-orientadores-item input { margin-top: 2px; flex: 0 0 auto; }

/* ---- Pase de un toque (Coordinación de Nivel) ---- */
.pase-rapido { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 12px; }
.pase-chip {
  border: 1px solid var(--color-border); background: var(--color-bg-alt);
  color: var(--color-text); border-radius: 999px; padding: 7px 14px;
  font-family: inherit; font-size: .85rem; cursor: pointer; transition: all .15s ease;
}
.pase-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pase-chip.activo { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---- Recados de la Coordinación en el espacio del docente ---- */
.avisos-caja { border-left: 4px solid var(--color-accent); }
.aviso-recado {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.aviso-recado:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.aviso-recado-texto strong { color: var(--color-primary); font-size: .95rem; }
.aviso-recado-texto p { margin: 4px 0 4px; font-size: .9rem; line-height: 1.5; }
.aviso-recado-pie { font-size: .78rem; color: var(--color-text-soft); }
.fa-nota-pase { color: #7A6210; font-weight: 600; }

/* ---- Tablero de la Coordinación de Nivel ---- */
.kpi.alerta { border-color: var(--color-accent); background: #FDF3F4; }
.kpi.alerta .valor { color: var(--color-accent); }
.nivel-acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.barra-motivo { margin-bottom: 11px; }
.barra-motivo-rot { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; margin-bottom: 4px; }
.barra-motivo-riel { height: 9px; background: var(--color-bg-alt); border-radius: 999px; overflow: hidden; }
.barra-motivo-relleno { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); border-radius: 999px; }

/* ---- Banda de solo lectura (Coordinación de Nivel en lo pedagógico) ---- */
.banda-lectura {
  background: #EAF1FA; border-bottom: 1px solid #C7D8EE; color: #123F85;
  padding: 9px 18px; font-size: .86rem; display: flex; flex-wrap: wrap;
  gap: 10px 16px; align-items: center; justify-content: center;
}
.banda-lectura .banda-boton { background: var(--color-primary); color: #fff; border: 0; }

/* ---- La matrícula que se actualiza sola ---- */
.caja-auto {
  margin-top: 16px; padding: 14px 16px; border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: 8px; background: var(--color-bg-alt);
}
.caja-auto h3 { color: var(--color-primary); font-size: .98rem; }

/* ---- El pulso de cada docente (Coordinación Pedagógica) ---- */
.pulso-docente { border-left: 4px solid var(--color-border); }
.pulso-docente.pulso-grave { border-left-color: var(--color-accent); }
.pulso-docente.pulso-medio { border-left-color: #C9A227; }
.pulso-docente.pulso-bien { border-left-color: var(--color-success); }
.pulso-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pulso-botones { display: flex; gap: 7px; flex-wrap: wrap; }
.pulso-atencion { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 12px; }
.pulso-senales { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.senal { background: var(--color-bg-alt); border-radius: 8px; padding: 9px 11px; }
.senal-rot { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); font-weight: 600; }
.senal-val { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--color-primary-dark); margin-top: 2px; }
.senal-pie { display: block; font-size: .76rem; color: var(--color-text-soft); margin-top: 2px; }

/* ---- El encargo del profesor a la Biblioteca ---- */
.remontar { display: inline-block; }
.remontar > summary { list-style: none; cursor: pointer; display: inline-block; }
.remontar > summary::-webkit-details-marker { display: none; }
.remontar-caja {
  margin-top: 10px; padding: 12px 14px; background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: 8px; min-width: 280px;
}
.remontar-caja textarea { width: 100%; font-family: inherit; font-size: .88rem; }

/* ---- Guardias · pensadas para el celular en pleno recreo ---- */
.guardia-pestanas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.guardia-puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.guardia-puesto {
  border: 1px solid var(--color-border); border-left: 5px solid var(--color-border);
  border-radius: 10px; padding: 12px 14px; background: #fff;
}
.guardia-puesto.sin-marcar { border-left-color: #C9A227; background: #FFFDF5; }
.guardia-puesto.est-cumplida { border-left-color: var(--color-success); }
.guardia-puesto.est-sustituida { border-left-color: var(--color-primary); }
.guardia-puesto.est-sin_cubrir { border-left-color: var(--color-accent); background: #FDF3F4; }
.gp-donde { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); font-weight: 600; }
.gp-quien { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--color-primary-dark); margin: 3px 0 7px; line-height: 1.2; }
.gp-estado { font-size: .86rem; font-weight: 600; }
.gp-estado.ok { color: var(--color-success); }
.gp-estado.sust { color: var(--color-primary); }
.gp-estado.solo { color: var(--color-accent); }
.gp-nota { font-size: .8rem; color: var(--color-text-soft); margin-top: 3px; }
.gp-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gp-botones .boton.comodo { padding: 11px 16px; font-size: .95rem; }
.gp-nopudo > summary { list-style: none; cursor: pointer; display: inline-block; }
.gp-nopudo > summary::-webkit-details-marker { display: none; }
.gp-form { margin-top: 10px; }
.gp-form label { display: block; margin-top: 6px; }
.gp-form select, .gp-form input[type=text] { width: 100%; }
.gp-pie { font-size: .76rem; color: var(--color-text-soft); margin-top: 9px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .guardia-puestos { grid-template-columns: 1fr; }
  .gp-quien { font-size: 1.2rem; }
  .gp-botones .boton.comodo { flex: 1 1 45%; text-align: center; }
}

/* ---- La barra del celular: lo de cada día a un dedo de distancia ---- */
.barra-celular { display: none; }
@media (max-width: 720px) {
  .barra-celular {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-celular a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 9px 4px 7px; text-decoration: none; color: var(--color-text-soft);
    font-size: .72rem; border-top: 3px solid transparent;
  }
  .barra-celular a.activo { color: var(--color-primary); border-top-color: var(--color-primary); }
  .bc-icono { font-size: 1.25rem; line-height: 1; }
  .bc-rotulo { font-weight: 600; letter-spacing: .01em; }
  /* Para que la barra no tape el final del contenido */
  .pie { padding-bottom: 74px; }
}

/* ---- El calendario de la planificación, sección por sección ---- */
.cal-fila-sec { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.cal-sec-rotulo {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; color: #fff; background: var(--color-primary);
}
.cal-fila-sec.sec-0 .cal-sec-rotulo { background: #123F85; }
.cal-fila-sec.sec-1 .cal-sec-rotulo { background: #1C7C54; }
.cal-fila-sec.sec-2 .cal-sec-rotulo { background: #B3541E; }
.cal-fila-sec.sec-3 .cal-sec-rotulo { background: #6B3FA0; }
.cal-fila-sec.sec-0 .cal-dia.marcado { border-color: #123F85; background: #E8EFF8; }
.cal-fila-sec.sec-1 .cal-dia.marcado { border-color: #1C7C54; background: #E6F3EC; }
.cal-fila-sec.sec-2 .cal-dia.marcado { border-color: #B3541E; background: #FBEFE6; }
.cal-fila-sec.sec-3 .cal-dia.marcado { border-color: #6B3FA0; background: #F1EAF8; }
.cal-sin-dias { font-size: .76rem; color: var(--color-text-soft); font-style: italic; padding: 4px 0; }
/* Las salidas del aula en la lista de asistencia: baño, servicio, Bienestar.
   Botoncitos redondos y discretos: el profesor clica sin interrumpir la clase */
.fa-salidas { display: inline-flex; gap: 4px; align-items: center; }
.salida-boton { position: relative; margin: 0; }
.salida-boton input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.salida-boton span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 4px; border-radius: 50%;
  border: 1.5px solid var(--color-border); background: #fff;
  font-size: .7rem; font-weight: 700; color: var(--color-text-soft);
  cursor: pointer; transition: all .15s;
}
.salida-boton input:checked + span {
  border-color: var(--color-primary); background: var(--color-primary); color: #fff;
}
/* Los chips del tipo de observación: conducta o pedagógica */
.obs-tipos { display: inline-flex; gap: 4px; align-items: center; }
.obs-chip {
  border: 1.5px solid var(--color-border); background: #fff; border-radius: 12px;
  padding: 3px 10px; font-size: .74rem; font-weight: 600; color: var(--color-text-soft);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.obs-tipos.mini .obs-chip { padding: 2px 7px; border-radius: 50%; min-width: 26px; }
.obs-chip.activo { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
/* El bombillo del cronograma: titila hasta que el profesor lo abre */
.bombillo {
  color: var(--color-accent); font-size: 1.1rem; line-height: 1;
  animation: bombillo-titila 1.1s ease-in-out infinite;
}
@keyframes bombillo-titila {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.cintillo-crono { border-left: 4px solid var(--color-primary); }

/* La observación con sus chips C/P debajo, aparte de las salidas del aula */
.fa-obs { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.fa-obs .obs-tipos { margin-top: 2px; }
.obs-tipos-pista { font-size: .72rem; color: var(--color-text-soft); margin-left: 4px; }

/* El año y la sección del estudiante elegido en pases y justificativos,
   visibles sin abrir la lista */
.est-grupo { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.est-grupo .chip { font-size: .8rem; }

/* El día planificado que cayó en una clase que no se dio: pide ser movido */
.cal-dia.no-dada {
  border-color: var(--color-error) !important;
  background: #FBEAEA !important;
  box-shadow: 0 0 0 1px var(--color-error);
}

/* El rótulo que avisa que esa sección aún no tiene horario cargado */
.cal-sec-libre {
  flex: 0 0 auto; font-size: .68rem; letter-spacing: .02em; padding: 2px 7px;
  border-radius: 10px; background: var(--color-bg-alt); color: var(--color-text-soft);
  border: 1px dashed var(--color-border); white-space: nowrap;
}

/* ============================================================
   MI AULA Y LA BIBLIOTECA DE PRIMARIA (01/10/2026)
   Las siglas de cada área llevan su color para leer la planificación
   holística de un vistazo. CAMBIAR COLORES DE LAS ÁREAS AQUÍ.
   ============================================================ */
.pa-cabeza { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.pa-cabeza h1 { margin: 2px 0 4px; }
.pa-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); font-weight: 700; }
.pa-avance { min-width: 220px; background: var(--color-bg-alt); border-radius: 12px; padding: 10px 14px; }
.pa-avance b { font-size: 1.4rem; color: var(--color-primary-dark); display: block; font-variant-numeric: tabular-nums; }
.pa-avance span { font-size: .78rem; color: var(--color-text-soft); }
.pa-dia { margin-top: 10px; }
.pa-entrada { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; border-left: 4px solid var(--color-accent); }
.pa-entrada > div { flex: 1; min-width: 240px; }
.pa-area { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; color: #fff; background: var(--color-primary); text-decoration: none; vertical-align: middle; }
.pa-area.a-LEN { background: #123F85; } .pa-area.a-MAT { background: #6B3FA0; } .pa-area.a-CNS { background: #2F7A5A; }
.pa-area.a-CSC { background: #A8611C; } .pa-area.a-EST { background: #C11734; } .pa-area.a-FHC { background: #7A6A3A; }
.pa-area.a-EDF { background: #3A7CA5; } .pa-area.a-MUS { background: #8A4F7D; } .pa-area.a-ING { background: #4A6B8A; } .pa-area.a-COM { background: #5A5A5A; }
.pa-semana { border-top: 1px solid var(--color-border); padding: 10px 0 6px; }
.pa-semana-rot { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); margin-bottom: 6px; }
.pa-fila { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 6px 0; }
.pa-fila.de-esp { opacity: .62; }
.pa-fila-t { flex: 1; min-width: 200px; font-size: .9rem; }
.pa-fila-t small { display: block; color: var(--color-text-soft); font-size: .74rem; }
.pa-fila-f { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.pa-fila-f select { max-width: 230px; font-size: .8rem; }
.pa-afinar { font-size: .8rem; color: var(--color-text-soft); margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pa-esp { display: grid; gap: 8px; }
.pa-esp-caja { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; background: var(--color-bg); }
.pa-esp-caja summary { display: flex; gap: 10px; align-items: center; cursor: pointer; flex-wrap: wrap; }
.pa-bloque { margin-top: 18px; }
.pa-bloque h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--color-primary-dark); }
.pa-bloque h3 small { color: var(--color-text-soft); font-weight: 500; font-size: .78rem; }
.pa-comp { font-size: .86rem; margin: 12px 0 6px; padding-top: 8px; border-top: 1px dashed var(--color-border); }
.pa-comp > span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); font-weight: 700; }
.pa-ind { border: 1px solid var(--color-border); border-radius: 12px; margin: 6px 0; background: var(--color-bg); }
.pa-ind[open] { background: #fff; box-shadow: 0 2px 12px rgba(18, 63, 133, .08); }
.pa-ind.en-plan { border-left: 4px solid var(--color-success); }
.pa-ind > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 10px 12px; }
.pa-marca { width: 20px; height: 20px; accent-color: var(--color-primary); align-self: center; }
.pa-ind-cod { font-size: .7rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.pa-ind-t { flex: 1; min-width: 200px; font-weight: 600; font-size: .92rem; }
.pa-ind-meta { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .74rem; color: var(--color-text-soft); align-items: center; }
.pa-acento { color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.pa-ind-b { padding: 4px 14px 14px; }
.pa-sentido { font-style: italic; color: var(--color-primary-dark); border-left: 3px solid var(--color-accent-light); padding-left: 12px; max-width: 75ch; }
.pa-ppi { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.pa-ppi li { display: grid; grid-template-columns: 100px 1fr; gap: 10px; font-size: .87rem; }
.pa-ppi b { color: var(--color-accent); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.pa-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.pa-dos > div { min-width: 0; }
.pa-dos h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-soft); margin: 10px 0 6px; }
.pa-ori { margin: 0; padding-left: 18px; font-size: .84rem; display: grid; gap: 3px; }
.pa-rub { width: 100%; border-collapse: collapse; }
.pa-rub th, .pa-rub td { text-align: left; vertical-align: top; padding: 5px 6px; border-bottom: 1px solid var(--color-border); font-size: .8rem; }
.pa-rub th { white-space: nowrap; width: 1%; font-size: .74rem; }
.cat-ex { color: #2F6E52; } .cat-co { color: #4A8B6F; } .cat-ep { color: #A87C16; } .cat-in { color: #C0652A; } .cat-pi { color: #B85450; } .cat-se { color: #8A847A; }
.pa-clase { border-bottom: 1px solid var(--color-border); }
.pa-clase > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 0; font-size: .84rem; }
.pa-clase-t { flex: 1; min-width: 160px; font-weight: 600; }
.pa-clase-meta { font-size: .72rem; color: var(--color-text-soft); }
.pa-clase-b { font-size: .84rem; padding: 4px 0 10px; display: grid; gap: 6px; }
.pa-clase-b p { margin: 0; }
.pa-clase-origen { font-size: .74rem; color: var(--color-text-soft); }
.pa-sesion { background: var(--color-bg-alt); border-radius: 8px; padding: 8px 10px; }
.pa-sesion-f { display: block; font-size: .7rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.pa-sesion em { display: block; margin-top: 4px; color: var(--color-text-soft); font-size: .78rem; }
.pa-destino { font-size: .8rem; background: var(--color-bg-alt); border-radius: 8px; padding: 6px 10px; }
.pa-revisar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pa-revisar select { max-width: 100%; font-size: .78rem; }
.pa-hist-mom { margin: 22px 0 6px; font-size: 1.05rem; }
.pa-nota-esp { font-size: .8rem; color: var(--color-text-soft); margin: 16px 0 0; }
.pa-llevar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tarjeta > .pa-clase:last-child { border-bottom: 0; }
@media (max-width: 760px) {
  .pa-dos { grid-template-columns: 1fr; }
  .pa-ppi li { grid-template-columns: 1fr; gap: 0; }
}
.pa-llevar { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 14px; box-shadow: 0 -2px 12px rgba(18, 63, 133, .08); }
.pa-llevar select { width: auto; max-width: 320px; flex: 0 1 auto; }
.pa-llevar span { font-weight: 600; color: var(--color-primary-dark); }

/* ============================================================
   EL PORTAL DEL AULA Y EL TALLER DE LA CLASE (02/10/2026)
   Una pantalla a la vez, con flechas para ir y volver: la
   tranquilidad visual que pidió el Rector, sin desplazamientos largos.
   ============================================================ */
.pa-nav { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 12px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(18, 63, 133, .06); }
.pa-nav-flecha { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg);
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--color-primary-dark); }
.pa-nav-flecha:hover { background: var(--color-bg-alt); }
.pa-migas { font-weight: 700; color: var(--color-primary-dark); text-decoration: none; font-family: var(--font-display); }
#pa-miga { font-style: normal; color: var(--color-accent); font-weight: 600; }
.pa-nav-der { margin-left: auto; display: flex; gap: 6px; }
.pa-pant[hidden] { display: none !important; }
.pa-puertas-aula { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.pa-puerta { display: grid; gap: 4px; background: var(--color-primary); color: #fff; border-radius: 14px; padding: 16px 18px;
  text-decoration: none; transition: transform .12s ease, background .12s ease; }
.pa-puerta:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.pa-puerta b { font-family: var(--font-display); font-size: 1.02rem; }
.pa-puerta span { font-size: .78rem; opacity: .85; }
.pa-met td, .pa-met th { vertical-align: middle; }
.pa-met-total td { font-weight: 700; background: var(--color-bg-alt); }
.pa-mrow { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 9px 10px; margin: 4px 0;
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); text-decoration: none; color: inherit; }
.pa-mrow:hover { border-color: var(--color-primary); background: #fff; }
.pa-mrow.en-plan { border-left: 4px solid var(--color-success); }
.pa-mrow-t { flex: 1; min-width: 180px; font-weight: 600; font-size: .9rem; }
.pa-mrow-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .76rem; }
.pa-mrow-abrir { color: var(--color-primary); font-weight: 700; white-space: nowrap; }
.pa-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.pa-cm-lista h4, .pa-aportes h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-soft); margin: 12px 0 6px; }
.pa-cm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; margin: 4px 0;
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); text-decoration: none; color: inherit; font-size: .86rem; }
.pa-cm:hover { border-color: var(--color-primary); background: #fff; }
.pa-cm b { color: var(--color-primary-dark); }
.pa-aporte { background: var(--color-bg-alt); border-left: 3px solid var(--color-primary); border-radius: 0 10px 10px 0;
  padding: 8px 12px; margin: 6px 0; font-size: .86rem; }
.pa-aporte-cab { display: block; font-size: .72rem; color: var(--color-text-soft); margin-bottom: 2px; }
.pa-aporte-cab b { color: var(--color-primary); }
.pa-aportar { display: grid; gap: 6px; margin-top: 8px; }
.pa-aportar select { max-width: 220px; }
/* El taller de la clase */
.mc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .mc-grid { grid-template-columns: 1fr; } }
.mc-col { display: grid; gap: 14px; min-width: 0; }
.mc-form { display: grid; gap: 10px; }
.mc-form label { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--color-primary-dark); }
.mc-form textarea, .mc-form input[type=text] { width: 100%; }
.mc-paso { color: var(--color-accent); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.mc-fecha { display: flex; gap: 12px; flex-wrap: wrap; }
.mc-fecha label { flex: 1; min-width: 120px; }
.mc-estado-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-fuente { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border); padding: 8px 0; font-size: .86rem; }
.mc-fuente small { display: block; color: var(--color-text-soft); font-size: .74rem; }
.mc-fuente:last-child { border-bottom: 0; }
.mc-adjuntos { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.mc-adjunto { position: relative; display: grid; gap: 4px; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 8px 26px 8px 10px; font-size: .8rem; max-width: 220px; background: var(--color-bg); }
.mc-adjunto img { max-width: 180px; max-height: 110px; border-radius: 6px; object-fit: cover; }
.mc-adjunto form { position: absolute; top: 4px; right: 4px; }
.mc-subir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mc-subir input[type=url], .mc-subir input[type=text] { flex: 1; min-width: 160px; }
.mc-conv { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.mc-burbuja { background: var(--color-bg-alt); border-radius: 12px 12px 12px 4px; padding: 8px 12px; font-size: .86rem; max-width: 92%; }
.mc-burbuja.mia { background: #E8EFFA; border-radius: 12px 12px 4px 12px; justify-self: end; }
.mc-burbuja-cab { display: block; font-size: .7rem; color: var(--color-text-soft); margin-bottom: 2px; font-weight: 600; }
.mc-escribir { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mc-escribir textarea { flex: 1; min-width: 180px; }

/* Evaluar el boletín (02/10/2026): la celda toma el color de la categoría */
.ev-boletin th { font-size: .7rem; white-space: normal; vertical-align: top; min-width: 170px; }
.ev-boletin th.ev-nombre { min-width: 160px; }
.ev-boletin .ev-nombre { white-space: nowrap; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ev-ind-t { font-weight: 500; font-size: .68rem; color: var(--color-text-soft); display: block; max-width: 220px; }
.ev-celda { min-width: 150px; }
.ev-celda select { width: 100%; font-size: .78rem; }
.ev-frase { display: block; font-size: .68rem; color: var(--color-text-soft); margin-top: 3px; font-style: italic; max-width: 200px; }
.ev-celda.cat-excelente { background: #E7F2EC; } .ev-celda.cat-consolidado { background: #EFF6F1; }
.ev-celda.cat-en_proceso { background: #FBF3DC; } .ev-celda.cat-iniciado { background: #FBEBDC; }
.ev-celda.cat-por_iniciar { background: #F9E4E2; } .ev-celda.cat-sin_evidencia { background: #EEECE7; }

/* El calendario de días (08/10/2026): las semanas previstas delante, el resto plegado */
.cal-semana.prevista { border-left: 3px solid var(--color-primary); padding-left: 8px; }
.cal-otras { margin-top: 6px; }
.cal-otras > summary { cursor: pointer; font-size: .76rem; color: var(--color-text-soft); padding: 4px 0; }

/* ==========================================================================
   FASE 5 · RESPONSIVE MÓVIL (auditoría, 22/10/2026)
   Todo aditivo: tokens, mínimos táctiles y los arreglos del informe.
   ========================================================================== */
:root { --alto-barra-celular: 58px; --toque: 44px; }

/* Mínimos táctiles cuando se navega con el dedo (R9) */
@media (pointer: coarse) {
  .boton { min-height: var(--toque); }
  .boton.mini { min-height: 36px; }
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="time"], input[type="password"], input[type="email"], select, textarea {
    font-size: 16px;   /* iOS no hace zoom si la letra llega a 16 */
    min-height: 40px;
  }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
  /* Las salidas del aula y los chips C/P de la lista, a tamaño de dedo */
  .salida-boton span { min-width: 40px; height: 40px; font-size: .78rem; }
  .obs-tipos.mini .obs-chip { min-width: 40px; min-height: 40px; font-size: .8rem; }
}

/* El botón de la superación crece a tamaño de dedo (R2) */
.abrir-superacion { width: 32px; height: 32px; font-size: .8rem; position: relative; }
.abrir-superacion::after { content: ''; position: absolute; inset: -6px; }

/* Las casillas de nota: teclado numérico y letra legible (R3, el HTML pone inputmode) */
@media (max-width: 720px) {
  .celda-nota input, input.nota, td input[inputmode="decimal"] { font-size: 16px; min-height: 38px; min-width: 64px; }
}

@media (max-width: 720px) {
  /* R1: lo pegajoso de abajo sube por encima de la barra del celular */
  .barra-guardar, .plan-accion, .pa-llevar {
    bottom: calc(var(--alto-barra-celular) + env(safe-area-inset-bottom, 0px));
  }
  /* R4: las puertas en una sola fila que se desliza, como la navegación */
  .puertas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .puertas::-webkit-scrollbar { display: none; }
  .puertas a { flex: 0 0 auto; }
  /* El respiro lateral de 16 px (gutter) */
  .contenido, main { padding-left: 16px; padding-right: 16px; }
}

/* R6: la grilla de captura ancla su primera columna (la del estudiante) */
.tabla-anclada th:first-child, .tabla-anclada td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-bg, #fff);
  box-shadow: 2px 0 4px rgba(0, 0, 0, .05);
}
.tabla-anclada thead th:first-child { z-index: 3; }

/* R8: la fila de navegación del portal no se esconde bajo la cabecera */
@media (max-width: 720px) {
  .pa-nav { top: 0; }
}

/* ============================================================
   EL DETALLE DE LOS INDICADORES (23/10/2026): clic en el KPI
   ============================================================ */
a.kpi { display: block; color: inherit; text-decoration: none; }
.kpi-clic { cursor: pointer; position: relative; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.kpi-clic:hover, .kpi-clic:focus-visible { border-color: var(--color-primary); transform: translateY(-1px); outline: none; }
.kpi-pista { display: block; margin-top: 6px; font-size: .68rem; font-weight: 600; color: var(--color-primary); letter-spacing: .02em; }
.kpi-dialogo { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--color-border);
               border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.25); background: #fff; color: inherit; }
.kpi-dialogo::backdrop { background: rgba(15,23,42,.45); }
.kpi-dialogo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border);
                   position: sticky; top: 0; background: #fff; z-index: 1; }
.kpi-dialogo-cab h2 { margin: 0; font-size: 1.05rem; flex: 1; color: var(--color-primary-dark); }
.kpi-dialogo-cuenta { font-size: .75rem; color: var(--color-text-soft); white-space: nowrap; }
.kpi-cerrar { border: none; background: var(--color-bg-alt); border-radius: 8px; width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--color-primary-dark); }
.kpi-dialogo-cuerpo { padding: 14px 18px 18px; overflow: auto; max-height: calc(100vh - 120px); }
.kpi-dialogo-bloque + .kpi-dialogo-bloque { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--color-border); }
.kpi-dialogo-bloque h2 { font-size: .95rem; margin: 0 0 6px; }
@media (max-width: 600px) {
  .kpi-dialogo { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .kpi-dialogo-cuerpo { padding: 10px 12px 14px; }
}
@media print { .kpi-pista, .kpi-dialogo { display: none !important; } }


/* ============================================================
   PLANIFICAR, TRAS LA CRÍTICA IMPECCABLE (27/10/2026)
   El contenido se lee como contenido, el rojo solo donde algo
   pide atención, el guardado dice lo que pasa, la entrega va al
   final con su resumen, y el teléfono pone la malla primero.
   ============================================================ */
/* Las opciones (orientadores, secciones, respuestas) no son rótulos de campo */
label.opcion, .cont-linea { text-transform: none; letter-spacing: 0; color: var(--color-text); font-size: .9rem; margin: 0; }
.cont-linea { font-weight: 400; }
.cont-texto { font-size: .88rem; line-height: 1.5; }
.codigo-comp { color: var(--color-primary-dark); font-family: var(--font-display); font-weight: 700; }
.codigo-ind { color: var(--color-primary); font-weight: 700; }
.plan-celda-texto { font-size: .84rem; margin-top: 3px; }
/* Lo que espera, en oro; lo validado, en salvia */
.chip-aporte { background: var(--color-oro-soft); color: var(--color-oro-tinta); }
.chip-validado { background: var(--color-success-soft); color: var(--color-success-tinta); }
.fila-aporte { background: var(--color-bg); }
.sueltos-caja { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: var(--color-bg); }
/* El estado del guardado, en la barra de abajo */
.plan-accion-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.plan-estado { font-size: .78rem; color: var(--color-text-soft); }
.plan-estado:empty { display: none; }
.plan-estado.es-ok { color: var(--color-success-tinta); font-weight: 600; }
.plan-estado.es-error { color: var(--color-accent); font-weight: 600; }
.aviso-botones { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: 4px; vertical-align: middle; }
.aporte-recuperado { font-size: .86rem; color: var(--color-success-tinta); background: var(--color-success-soft); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
/* La entrega, al final, con su confirmación en la pantalla */
.entregar-resumen { margin: 10px 0 14px; padding-left: 18px; font-size: .9rem; line-height: 1.65; }
.entregar-confirmar > summary { list-style: none; display: inline-flex; }
.entregar-confirmar > summary::-webkit-details-marker { display: none; }
.entregar-confirmar[open] > summary { display: none; }
.entregar-confirmar.bloqueada > summary { opacity: .5; cursor: not-allowed; }
.entregar-form { border: 1px solid var(--color-primary-mid); border-radius: 12px; padding: 14px 16px; background: var(--color-primary-soft); }
.entregar-pendiente { font-size: .88rem; color: var(--color-accent); font-weight: 600; margin: 0 0 10px; }
/* El foco se ve también en las casillas escondidas */
.quitar-linea input:focus-visible + .quitar-x,
.cal-dia input:focus-visible ~ .cal-dia-num { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }

@media (pointer: coarse) {
  .cont-linea { min-height: var(--toque); padding: 6px 0; }
  .cont-linea input { width: 20px; height: 20px; }
  .mom-cabecera summary, .comp-porque summary, .ind-porque summary, .cont-xxi summary { min-height: 40px; display: flex; align-items: center; }
  .quitar-linea { display: inline-flex; vertical-align: middle; }
  .quitar-linea .quitar-x { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; font-size: 1.25rem; }
  label.opcion { min-height: var(--toque); }
}

@media (max-width: 720px) {
  /* Mientras está en borrador, la malla va primero: es donde está el trabajo */
  .plan-flujo.en-borrador { display: flex; flex-direction: column; }
  .plan-flujo.en-borrador > .plan-malla { order: -1; }
  /* Las competencias, en una fila que se desliza con el dedo */
  .comp-cajas { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .comp-cajas::-webkit-scrollbar { display: none; }
  .comp-caja { flex: 0 0 78%; max-width: none; scroll-snap-align: start; }
  /* La planificación se lee como tarjetas, sin rodar de lado */
  .plan-tabla { min-width: 0 !important; }
  .plan-tabla thead { display: none; }
  .plan-tabla, .plan-tabla tbody, .plan-tabla tr, .plan-tabla td { display: block; width: auto !important; }
  .plan-tabla tr { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: #fff; }
  .plan-tabla tr.fila-aporte { background: var(--color-bg); }
  .plan-tabla td { border: none; padding: 4px 0; background: transparent !important; }
  .plan-tabla td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; margin-bottom: 2px;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-soft);
  }
  /* La barra de guardar, en una línea */
  .plan-accion { flex-wrap: nowrap; gap: 10px; padding: 8px 12px; }
  .plan-accion-cuenta { font-size: .78rem; }
  .plan-estado { font-size: .74rem; }
  .plan-accion .boton { flex: 0 0 auto; }
  .plan-accion .texto-largo { display: none; }
}

/* Salir ahora es un botón dentro de un formulario (POST + CSRF, 27/10/2026): se ve igual que el enlace */
.salir-form { display: inline; margin: 0; }
button.salir { font-family: inherit; line-height: inherit; cursor: pointer; background: transparent; }

/* ============================================================
   LOS MÓDULOS TIENEN SU PROPIA HOJA (28/10/2026)
   Lo de un solo módulo va en assets/css/modulos/<modulo>.css, que la
   cabecera carga sola después de esta hoja. Aquí queda lo común: tokens,
   cabecera, tarjetas, botones, tablas. Tocar esta hoja es tocar la de
   todos: avisar antes al otro equipo (decisión 23).
   ============================================================ */