/* ==========================================================================
   Intranet Escolar — Registro Auxiliar
   Hoja de estilos común (login, dashboard y módulos de la Fase 3).
   Diseño adaptado del prototipo React validado (portal-docente).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Paleta institucional (intranet original I.E.P. Santa Ana) */
  --brand:       #1a5fc9;   /* azul de acciones y enlaces */
  --brand-dark:  #012652;   /* azul institucional oscuro */
  --brand-light: #e8f0fe;
  --navy:        #011c40;   /* fondo del sidebar */
  --navy-item:   #1d4e9e;   /* elemento activo del menú */
  --navy-border: #1e3f74;
  --bg:          #f1f5f9;
  --card:        #ffffff;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --muted:       #64748b;
  --green:       #16a34a;
  --green-bg:    #f0fdf4;
  --green-border:#bbf7d0;
  --red:         #dc2626;
  --red-bg:      #fef2f2;
  --red-border:  #fecaca;
  --amber:       #d97706;
  --amber-bg:    #fffbeb;
  --amber-border:#fde68a;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 20px 50px rgba(0, 0, 0, 0.3);
  --font:        "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

main.contenedor {
  padding-top: 24px;
  padding-bottom: 48px;
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1.25;
}

code {
  background: var(--brand-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Layout general (sidebar + principal) — diseño de la intranet original
   -------------------------------------------------------------------------- */
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 236px;
  flex: none;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--navy-border);
}

.escudo {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  /* Tarjeta blanca para que el escudo resalte sobre el azul del menú */
  background: #fff;
  border: 1px solid #2a4d8c;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #0d2f63;
  letter-spacing: 0.02em;
}

.sidebar-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-identidad strong {
  font-size: 0.92rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-identidad span {
  font-size: 0.74rem;
  /* Contraste sobre el azul marino institucional: 0.55 quedaba casi
     ilegible en el celular a pleno sol del aula (0.72 ≈ 4.5:1). */
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-menu {
  flex: 1;
  padding: 10px 0 14px;
  display: flex;
  flex-direction: column;
}

.menu-seccion {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Encabezados de sección legibles sobre la barra azul (antes 0.42/0.66rem). */
  color: rgba(255, 255, 255, 0.62);
  padding: 14px 16px 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  border-left: 3px solid transparent;
}

.menu-item svg {
  flex: none;
  opacity: 0.9;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}

.menu-item.activo {
  background: var(--navy-item);
  color: #fff;
  border-left-color: #7db1ff;
  font-weight: 600;
}

.sidebar-pie {
  padding: 12px 0;
  border-top: 1px solid var(--navy-border);
}

.principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cabecera {
  background: #fff;
  border-bottom: 1px solid var(--border);
  /* Se queda fija arriba: al bajar, el título de la página sigue a la vista. */
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.miga {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.titulo-pagina {
  margin: 2px 0 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.cabecera-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rol-badge {
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.nombre-usuario {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenido {
  flex: 1;
  width: 100%;
  padding: 24px 26px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primario {
  background: var(--brand);
  color: #fff;
}

.btn-primario:hover {
  background: var(--brand-dark);
}

.btn-secundario {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

.btn-secundario:hover {
  background: var(--bg);
  color: var(--text);
}

.btn-bloque {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Alertas (mensajes flash y errores)
   -------------------------------------------------------------------------- */
.alerta {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  border: 1px solid transparent;
}

.alerta-error {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: #b91c1c;
}

.alerta-success {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: #15803d;
}

.alerta-warning {
  background: var(--amber-bg);
  border-color: var(--amber-border);
  color: var(--amber);
}

.alerta-info {
  background: #eef4ff;
  border-color: #9db8e8;
  color: #1a3a6b;
}

/* --------------------------------------------------------------------------
   Página de inicio de sesión (login.php)
   -------------------------------------------------------------------------- */
body.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #011c40 0%, #012652 55%, #1a5fc9 100%);
}

.login-logo {
  display: block;
  max-width: 150px;
  max-height: 170px;
  width: auto;
  height: auto;
  margin: 0 auto 12px;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid var(--brand, #012652);
  background: #fff;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(16, 42, 90, .15);
}
.caja-login {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  width: 100%;
  padding: 36px 32px;
}

.caja-login h1 {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: 1.6rem;
  text-align: center;
}

.subtitulo {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--text);
}

.campo input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.caja-login .btn {
  margin-top: 6px;
}

.nota-demo {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Panel principal (dashboard.php)
   -------------------------------------------------------------------------- */
.saludo {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.saludo h2 {
  margin: 0 0 2px;
  font-size: 1.25rem;
}

.saludo p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.avatar-grande {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.tarjeta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarjeta-valor {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.tarjeta-etiqueta {
  color: var(--muted);
  font-size: 0.88rem;
}

.panel-seccion {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 24px;
}

.panel-seccion h3 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.tabla th {
  background: #eef2f8;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tabla tbody tr:hover {
  background: #f8fafc;
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Paginación (listas de 40 en 40)
   -------------------------------------------------------------------------- */
.paginacion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
  font-size: 0.88rem;
}

.paginacion-info {
  color: var(--muted);
  margin-right: 8px;
  font-size: 0.85rem;
}

.pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--navy, #012652);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.pag-btn:hover {
  background: #eef2f8;
  border-color: #c3cede;
}

.pag-actual {
  background: var(--navy, #012652);
  border-color: var(--navy, #012652);
  color: #fff;
  pointer-events: none;
}

.pag-ellipsis {
  color: var(--muted);
  padding: 0 2px;
}

/* Quitar las flechas +/− de los campos de nota (Registro Auxiliar).
   El ingreso sigue siendo numérico (8–20, paso 0.5), solo sin los
   controles de incremento/decremento del navegador. */
.nota-input::-webkit-outer-spin-button,
.nota-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nota-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

@media (max-width: 640px) {
  .paginacion { justify-content: center; }
  .paginacion-info { width: 100%; text-align: center; }
}

.nota {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   Pie de página (footer.php)
   -------------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 14px 26px;
}

.pie p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .barra-interna {
    flex-direction: column;
    align-items: flex-start;
  }

  .usuario {
    width: 100%;
    justify-content: space-between;
  }

  .caja-login {
    padding: 28px 20px;
  }

  .tarjetas {
    grid-template-columns: 1fr 1fr;
  }

  .tabla {
    font-size: 0.85rem;
  }

  .tabla th,
  .tabla td {
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .tarjetas {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Fase 3 — Componentes del registro auxiliar, estudiantes y competencias
   (portados del prototipo React validado)
   -------------------------------------------------------------------------- */

/* Encabezado de página con selector */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.page-head h2 { margin: 0 0 2px; font-size: 1.25rem; }
.page-head .muted { margin: 0; }

.curso-selector { display: flex; flex-direction: column; gap: 4px; }

.input-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

.input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: var(--text);
}
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
select.input { min-width: 220px; }

.muted { color: var(--muted); }
.ta-c { text-align: center; }
/* `.ta-c` por sí solo no bastaba dentro de las tablas: la regla
   `.tabla th, .tabla td { text-align: left }` tiene más peso (una clase por el
   elemento), así que las celdas con class="ta-c" seguían alineadas a la
   izquierda. Era el caso de los títulos de criterio del módulo Conducta, que el
   colegio veía descentrados. Con esta regla, más específica, el centro sí gana. */
.tabla th.ta-c,
.tabla td.ta-c { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; }

/* Módulo Conducta: el nombre del alumno en UNA sola línea y algo más pequeño.
   No se recorta nada: la tabla queda más ancha y, si hace falta, se desplaza en
   horizontal dentro de su contenedor. */
.tabla-conducta .col-nombre { white-space: nowrap; font-size: .8rem; }

/* Tarjeta contenedora */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* Tabs Notas / Asistencia */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tab {
  display: inline-block;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tab:hover { color: var(--brand); text-decoration: none; }
.tab-active {
  color: var(--brand);
  background: #fff;
  border-color: var(--border);
  font-weight: 700;
}
.tab-spacer { flex: 1; }

/* Switch de bimestres */
.bim-switch { display: flex; gap: 4px; }
.bim-btn {
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}
.bim-btn:hover { color: var(--brand); text-decoration: none; }
.bim-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bim-active:hover { color: #fff; }

.tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.chip {
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Tabla con scroll horizontal y columna fija */
.table-scroll { overflow-x: auto; }
.table-notas { min-width: 640px; }

/* Cabeceras fijas de la tabla de notas (30+ alumnos): el docente deja de
   perder de vista qué columna es cada competencia al bajar.
   Se limita a la pantalla (@media screen) para no recortar nada al imprimir
   (la boleta y los reportes reutilizan .table-scroll). */
@media screen {
  .table-scroll { max-height: 70vh; }
  .table-notas thead th { position: sticky; top: 0; z-index: 2; }
  .table-notas thead th.sticky-col { z-index: 3; }

  /* La cabecera de dos niveles se rompe si la segunda fila (criterios) se
     pega a top:0: se solaparía con la primera (competencias). La segunda fila
     se pega justo debajo usando la altura real de la primera, que mide
     includes/footer.php en --table-notas-fila1 (si no hay JS la variable no
     existe, `top` queda en auto y no hay solapamiento). */
  .table-notas thead tr:nth-child(2) th { top: var(--table-notas-fila1); }

  /* Fondo propio en las celdas fijas sin color definido (p. ej. "Promedio"):
     si no, al desplazar se vería el texto de las filas por debajo.
     Se excluyen las que ya traen su color para no pisarlo. */
  .table-notas thead th:not(.comp-grupo):not(.criterio-h):not(.prom-logro-h):not(.sticky-col) {
    background: #fff;
  }
}

.sticky-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  min-width: 190px;
}
.table th.sticky-col { background: #f8fafc; }

.comp-abbr {
  display: inline-block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.nota-input {
  /* Área táctil cómoda en el celular (antes ~30 px de alto) y font-size 16 px
     para evitar el auto-zoom de iOS/Safari al enfocar el campo de nota. */
  width: 68px;
  min-height: 40px;
  padding: 6px 4px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  /* Sin flechas de aumentar/disminuir (ingreso directo de la nota). */
  -moz-appearance: textfield;
  appearance: textfield;
}
.nota-input::-webkit-outer-spin-button,
.nota-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nota-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.lit {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.lit-AD { background: var(--green-bg); color: #15803d; }
.lit-A  { background: var(--brand-light); color: var(--brand-dark); }
.lit-B  { background: var(--amber-bg); color: var(--amber); }
.lit-C  { background: var(--red-bg); color: #b91c1c; }

.prom-cell { font-weight: 700; color: var(--text); white-space: nowrap; }

/* Caja informativa (diseño original: fondo azul claro) */
.panel-head {
  background: var(--brand-light);
  border: 1px solid #d3e3fd;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.panel-head p { margin: 0; }

/* Descargar / exportar: botón azul.
   Subir / importar usa el verde «.btn-importar», para no confundirlos. */
.btn-excel {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.btn-excel:hover { background: #1e40af; }
.btn-excel-linea {
  background: #fff;
  color: #1d4ed8;
  border: 1px solid #1d4ed8;
}
.btn-excel-linea:hover { background: #eaf0fd; }

.form-acciones {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Toolbars (buscar / asistencia) */
.toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.toolbar-buscar { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.toolbar-buscar input[type="text"] {
  flex: 1 1 220px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
}
.asist-toolbar { align-items: flex-end; }
.asist-actions { display: flex; gap: 8px; margin-left: auto; }

.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Botones adicionales */
.btn-sm { padding: 5px 10px; font-size: 0.8rem; border-radius: 8px; }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-danger-ghost {
  background: transparent;
  color: var(--red);
  border-color: var(--red-border);
}
.btn-danger-ghost:hover { background: var(--red-bg); }
.btn-peligro {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-peligro:hover { background: #b91c1c; }

/* Envoltura y estados de tabla (estudiantes) */
.tabla-envoltura {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.tabla-vacia { text-align: center; color: var(--muted); padding: 28px 12px; }
.acciones { display: flex; gap: 4px; align-items: center; }

/* Acciones de tabla como enlaces de texto (diseño original) */
.acciones .btn {
  border: none;
  background: none;
  padding: 4px 8px;
  font-weight: 600;
  border-radius: 8px;
}
.acciones .btn-secundario { color: var(--brand); }
.acciones .btn-secundario:hover { background: var(--brand-light); color: var(--brand-dark); }
.acciones .btn-peligro { color: var(--red); }
.acciones .btn-peligro:hover { background: var(--red-bg); }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.badge-green { background: var(--green-bg); color: #15803d; }
.badge-gray  { background: #f1f5f9; color: var(--muted); }
.badge-red   { background: var(--red-bg); color: #b91c1c; }
.badge-amber { background: var(--amber-bg); color: var(--amber); }

/* Filtros de nivel de "Asignaciones actuales": botones a color para elegir */
.seg-nivel {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.seg-nivel + .seg-nivel { margin-left: 8px; }
.seg-nivel-todos { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.seg-nivel-todos.seg-active { background: #334155; color: #fff; border-color: #334155; }
.seg-nivel-inicial { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.seg-nivel-inicial.seg-active { background: #16a34a; color: #fff; border-color: #16a34a; }
.seg-nivel-primaria { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.seg-nivel-primaria.seg-active { background: #2563eb; color: #fff; border-color: #2563eb; }
.seg-nivel-secundaria { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.seg-nivel-secundaria.seg-active { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.seg-nivel.seg-active:hover { color: #fff; }

/* Registro Auxiliar: selector Nivel / Grado / Curso / Año en cuadro centrado.
   En escritorio va en UNA sola fila horizontal con espacio uniforme entre
   los cuatro selectores; el wrap solo se activa en pantallas pequeñas. */
.selector-curso-cuadro {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 2px auto 18px;
  padding: 16px 20px 18px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 1100px;
}
.selector-cuadro-titulo {
  flex-basis: 100%;
  text-align: center;
  font-weight: 700;
  font-size: .82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.selector-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
}
.selector-col label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.selector-col select { width: 100%; }

/* Reportes: tabla consolidada con bordes y más espacio entre celdas */
.tabla-consolidado { border-collapse: collapse; }
.tabla-consolidado th,
.tabla-consolidado td {
  border: 1px solid var(--border);
  padding: 13px 20px;
}
.tabla-consolidado th { background: #f1f5f9; }

/* Ingreso de notas (0-20) por competencia: celda con input y literal */
.input-nota {
  width: 64px;
  text-align: center;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: .9rem;
}
.input-nota:focus { outline: 2px solid rgba(1, 38, 82, .25); border-color: var(--navy); }
.lit-nota {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  min-height: 14px;
  margin-top: 2px;
}

/* Cuadros de la escala literal personalizable (AD / A / B / C) */
.escala-cuadros {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.escala-titulo {
  flex-basis: 100%;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.escala-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.escala-item label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
}
.escala-item span {
  font-size: .7rem;
  color: var(--muted);
}

/* Grupos segmentados de asistencia (P/F/T/J) */
.seg-group { display: inline-flex; gap: 2px; }
.seg { position: relative; display: inline-block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  /* Botones P/F/T/J con área táctil de 44 x 40 px (antes ~30 x 24 px, se
     fallaba al pulsar en el celular dentro del aula). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: 4px 8px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg span:hover { border-color: var(--brand); color: var(--brand); }
.seg input:checked + span { color: #fff; }
.seg input:checked + span:hover { color: #fff; border-color: inherit; }
/* Estado seleccionado: P = color de la barra de menú, F = rojo,
   T = verde (tardanza), J = amarillo. */
.seg input[value="P"]:checked + span { background: var(--navy); border-color: var(--navy); }
.seg input[value="F"]:checked + span { background: var(--red); border-color: var(--red); }
.seg input[value="T"]:checked + span { background: var(--green); border-color: var(--green); }
.seg input[value="J"]:checked + span { background: #facc15; border-color: #eab308; color: #713f12; }
/* El input real está oculto (opacity:0), así que el anillo de foco debe
   dibujarse en el cuadro visible para no perder la referencia al navegar
   con teclado o lector de pantalla. */
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Lista de competencias (director) */
.add-comp { margin-bottom: 16px; }
.comp-list { display: flex; flex-direction: column; gap: 8px; }
.comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.comp-num {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Modal (estudiantes) */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.activo { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h3 { margin: 0 0 16px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
}
.form-grid input,
.form-grid select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.92rem;
  background: #fff;
}
.modal-acciones {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .asist-actions { margin-left: 0; }
  /* En pantallas medianas/pequeñas los selectores del Registro Auxiliar
     pasan a dos columnas (y en 420px a una sola). */
  .selector-curso-cuadro { flex-wrap: wrap; gap: 14px; }
  .selector-col { flex: 1 1 45%; min-width: 150px; }
}

/* --------------------------------------------------------------------------
   Fase 4 — Reportes (exportaciones)
   -------------------------------------------------------------------------- */
.report-toolbar { align-items: flex-end; }
.report-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.report-preview { margin-top: 4px; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  padding-bottom: 9px;
}
.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

/* --------------------------------------------------------------------------
   Responsive — sidebar y cabecera (diseño intranet original)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Menú hamburguesa (móvil / tablet ≤900px)
   La barra lateral se convierte en un panel deslizante que se abre con el
   botón ☰ de la cabecera y se cierra con la ✕, el fondo oscuro o Escape.
   En escritorio no cambia nada (el botón está oculto).
   -------------------------------------------------------------------------- */
.menu-toggle,
.sidebar-cerrar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  color: var(--navy);
  cursor: pointer;
  padding: 0;
}

.sidebar-cerrar {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  margin-left: auto;
}

.menu-toggle:hover { background: #f2f6fc; }
.sidebar-cerrar:hover { background: rgba(255, 255, 255, 0.18); }

.sidebar-fondo {
  display: none;
  /* El fondo ahora es un <button> (cerrable con teclado): se anula el estilo
     propio del navegador para que se vea igual que el <div> anterior. */
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cabecera-izq {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.menu-abierto { overflow: hidden; }

@media (max-width: 900px) {
  .app { flex-direction: column; }

  .menu-toggle { display: inline-flex; }

  /* Panel lateral deslizante */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 272px;
    max-width: 86vw;
    height: 100vh;
    z-index: 70;
    transform: translateX(-102%);
    transition: transform 0.25s ease;
    box-shadow: 0 12px 34px rgba(2, 12, 30, 0.45);
    overflow-y: auto;
  }

  .sidebar.abierto { transform: translateX(0); }

  .sidebar-cabecera {
    border-bottom: 1px solid var(--navy-border);
    padding: 13px 14px;
  }

  .sidebar-cerrar { display: inline-flex; }

  /* El menú vuelve a ser vertical dentro del panel */
  .sidebar-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px 0 14px;
    gap: 0;
  }

  .menu-item {
    border-left: 3px solid transparent;
    border-radius: 0;
    padding: 11px 16px;
    font-size: 0.9rem;
  }

  .menu-item.activo { border-left-color: #7db1ff; }

  .menu-seccion { display: block; }

  .sidebar-pie { border-top: 1px solid var(--navy-border); padding: 12px 0; }

  /* Fondo oscuro al abrir el menú */
  .sidebar-fondo.visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(4, 16, 36, 0.5);
    z-index: 65;
  }

  .contenido { padding: 16px; }
  .cabecera { padding: 12px 14px; }
  .titulo-pagina { font-size: 1.2rem; }
  .cabecera-usuario { font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Fases 8-9 — Carga académica e importación masiva
   -------------------------------------------------------------------------- */
.import-card { margin-bottom: 18px; }
.import-titulo { margin: 0 0 4px; font-size: 1rem; }
.import-card .muted { margin-bottom: 10px; }
.import-card input[type="file"] { font-size: 0.85rem; }

.lista-errores {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #b91c1c;
  font-size: 0.85rem;
  max-height: 140px;
  overflow-y: auto;
}
.lista-errores li { margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   Fases 9-12 — Configuración, semáforo, usuarios y roles padre/alumno
   -------------------------------------------------------------------------- */
.campo-largo { grid-column: 1 / -1; }

.vinculos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 0.85rem;
}
.vinculos-grid label { display: flex; gap: 6px; align-items: center; }

.chip-envio {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid var(--border);
}
.chip-pendiente { background: #f1f5f9; color: var(--muted); }
.chip-enviado { background: var(--green-bg); color: #15803d; border-color: #bbf7d0; }
.chip-desbloqueado { background: var(--amber-bg); color: var(--amber); border-color: #fde68a; }
.celda-semaforo { vertical-align: middle; }

.hijos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hijo-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.hijo-card h3 { margin: 0 0 6px; font-size: 1rem; }
.hijo-card p { margin: 0 0 10px; color: var(--muted); font-size: 0.85rem; }

.mi-tarjeta { margin-bottom: 16px; }
.mi-area { margin-top: 18px; }
.mi-area h3 { margin: 0 0 8px; font-size: 1rem; color: var(--brand-dark); }

.mes-tabla { min-width: 560px; }
.mes-tabla th, .mes-tabla td { padding: 3px 4px; text-align: center; font-size: 0.72rem; }
.mes-tabla th.dia-h, .mes-tabla td.dia { min-width: 20px; }

/* Rejilla mensual de asistencia: el número de orden y el apellido quedan fijos a
   la izquierda al desplazar los días, y el nombre va alineado a la izquierda,
   pegado a su número (antes todas las celdas iban centradas, así que el nombre
   parecía suelto en medio de la columna). */
.mes-tabla th.num-col, .mes-tabla td.num-col {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 34px;
  min-width: 34px;
  text-align: center;
  background: #fff;
  font-weight: 600;
}
.mes-tabla th.num-col { background: #f8fafc; }
.mes-tabla th.sticky-col, .mes-tabla td.sticky-col {
  left: 34px;              /* justo a la derecha de la columna del número */
  min-width: 200px;
  text-align: left;
  padding-left: 7px;
}

@media print {
  .sidebar, .cabecera, .pie, .acciones-print, .rol-badge { display: none !important; }
  .app, .principal { display: block; }
  .contenido { padding: 0; }
}

/* --------------------------------------------------------------------------
   Fases 13-14 — Boletas y comunicados
   -------------------------------------------------------------------------- */
.comunicado {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.comunicado h3 { margin: 0; font-size: 1rem; }
.comunicado-meta { font-size: 0.78rem; color: var(--muted); margin: 4px 0 8px; }
.adjunto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}
.adjunto:hover { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   Captura fotográfica (Fase director)
   -------------------------------------------------------------------------- */
.foto-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

/* Banda que separa cada grado en las listas de estudiantes (fotografía). */
.fila-grupo > td {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.82rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fila-grupo-n {
  float: right;
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--muted);
}
.foto-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
}

/* Botón segmentado como enlace (modo de boleta: anual / último bimestre) */
a.seg { text-decoration: none; }
a.seg:hover span { border-color: var(--brand); color: var(--brand); }
a.seg-active span { background: var(--brand); border-color: var(--brand); color: #fff; }
a.seg-active span:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Generador de contraseñas (usuarios.php) */
.clave-acciones { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.clave-acciones .btn { width: auto; padding: 6px 10px; font-size: 0.8rem; }
.clave-gen { color: #1d4ed8; font-weight: 600; font-size: 0.92rem; }

/* Horarios */
.horario-tabla th, .horario-tabla td { text-align: center; vertical-align: middle; }
.hor-celda { min-width: 130px; height: 52px; }
.hor-celda.hor-llena { background: #eef6ff; }
.hor-area { font-weight: 600; color: #1d4ed8; font-size: 0.82rem; }
.hor-docente { font-size: 0.72rem; color: #6b7280; }
.hor-select { width: 100%; font-size: 0.78rem; padding: 3px 4px; margin-top: 2px; }
.hor-hora { background: #f8fafc; font-size: 0.8rem; }
.fila-periodo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fila-periodo .input { width: 130px; }
.periodo-etiqueta { min-width: 30px; font-weight: 600; color: #1d4ed8; }
@media print {
  .no-print { display: none !important; }
}

/* Periodos especiales del horario (recreo / almuerzo) */
.hor-especial { text-align: center; font-weight: 600; font-size: 0.85rem; letter-spacing: .3px; }
.hor-especial-recreo { background: #fff7e6; color: #b45309; }
.hor-especial-almuerzo { background: #f0fdf4; color: #15803d; }

/* ===== Adaptación móvil (celular) — Fases recientes ===== */
@media (max-width: 640px) {
  .contenido { padding: 12px; }
  .card { padding: 14px; }
  .seg-group { flex-wrap: wrap; }
  .form-acciones { flex-wrap: wrap; }
  .report-actions { flex-wrap: wrap; gap: 8px; }
  .modal { width: 94vw; max-height: 90vh; overflow-y: auto; padding: 16px; }
  .cabecera-usuario { gap: 4px; }
  .cabecera-usuario .rol-badge { display: none; }
  .horario-tabla, .tabla-consolidado, .table table { min-width: 640px; }
  .fila-periodo { flex-wrap: wrap; }
  .fila-periodo .input { flex: 1 1 110px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .btn { white-space: normal; }
  .inline .input { min-width: 0; }

  /* Áreas táctiles de los controles principales en el celular: solo se sube
     la altura (el diseño de escritorio no cambia). */
  .btn { min-height: 44px; }
  .menu-item { padding: 13px 16px; }
  .bim-btn { min-height: 36px; }
}
@media (max-width: 420px) {
  .tarjetas { grid-template-columns: 1fr; }
  .modal-acciones { flex-direction: column; align-items: stretch; }
  .modal-acciones .btn { width: 100%; }
  .cabecera { flex-wrap: wrap; }
  .selector-col { flex: 1 1 100%; }
}

/* FASE 27 (boleta): líneas de los cuadros al imprimir */
.sub-tabla, table.sub-tabla { border-collapse: collapse !important; }
.sub-tabla th, .sub-tabla td { border: 1px solid #000 !important; }
.sub-tabla thead th { border-bottom: 2px solid #000; }
table.cuadro { border-collapse: collapse; }

/* FASE 27f — Conmutador de año lectivo en la cabecera */
.cabecera-anio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  padding-right: 14px;
  border-right: 1px solid var(--border);
}
.cabecera-anio label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cabecera-anio select {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.cabecera-anio select:hover,
.cabecera-anio select:focus {
  border-color: var(--brand);
  outline: none;
}
@media (max-width: 640px) {
  .cabecera-anio { display: none; }
}

/* --------------------------------------------------------------------------
   FASE 28 — Inicio: cuadros por nivel (estudiantes + asistencia del mes)
   -------------------------------------------------------------------------- */
.niveles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.nivel-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.nivel-card-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nivel-nombre {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nivel-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
}

.nivel-punto.ini { background: #16a34a; }
.nivel-punto.pri { background: #2563eb; }
.nivel-punto.sec { background: #f59e0b; }

.nivel-alumnos { text-align: right; }

.nivel-alumnos b {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 800;
  color: var(--brand-dark);
}

.nivel-alumnos span {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.nivel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0 12px;
}

.nivel-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7f9fc;
  padding: 8px 4px;
  text-align: center;
}

.nivel-stat b {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.nivel-stat span {
  display: block;
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nivel-stat.ok { background: var(--green-bg); border-color: var(--green-border); }
.nivel-stat.ok b { color: var(--green); }
.nivel-stat.falta { background: var(--red-bg); border-color: var(--red-border); }
.nivel-stat.falta b { color: var(--red); }
.nivel-stat.tarde { background: var(--amber-bg); border-color: var(--amber-border); }
.nivel-stat.tarde b { color: var(--amber); }

.nivel-barra {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #edf1f7;
  border: 1px solid var(--border);
}

.nivel-barra i { display: block; height: 100%; }

/* Colores de los estados de asistencia (barra y leyenda) */
.seg-p { background: #16a34a; }
.seg-f { background: #dc2626; }
.seg-t { background: #f59e0b; }
.seg-j { background: #64748b; }

.nivel-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

.nivel-leyenda i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
}

.nivel-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
  .nivel-stats { grid-template-columns: repeat(2, 1fr); }
  .nivel-alumnos b { font-size: 1.5rem; }
}

/* Contadores de género dentro de los cuadros de Inicio */
.nivel-genero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
  font-size: 0.76rem;
  color: var(--muted);
}
.nivel-genero span { display: inline-flex; align-items: center; gap: 5px; }
.nivel-genero strong { color: var(--navy); font-size: 0.85rem; }
.nivel-genero .gen {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.nivel-genero .gen-m { background: #2563eb; }
.nivel-genero .gen-f { background: #db2777; }
.nivel-genero .gen-sin strong { color: var(--muted); }

/* Procesar transversales (C1/C2): notas por curso y envío a boleta */
.input-nota {
  width: 58px;
  padding: 4px 6px;
  text-align: center;
  font-size: 0.82rem;
}
.tabla .tv-cabecera {
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.tabla-tv td { vertical-align: middle; }

/* Conducta (AD/A/B/C) por criterio y periodo.
   Se angostó de 74 a 60 px: con el nombre del alumno ya en una sola línea y el
   DNI convertido en el número de orden, la tabla de criterios entra sin tener
   que desplazarse de lado. */
.input-conducta {
  width: 60px;
  padding: 4px 2px;
  text-align: center;
  font-size: 0.82rem;
}

/* Importar plantilla (Estudiantes): botón propio, en otro color */
.import-form { gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-importar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #0f7b4f;
  border-color: #0b6140;
  color: #fff;
  cursor: pointer;
}
.btn-importar:hover { background: #0b6140; color: #fff; }
/* El campo de archivo real queda oculto: se usa el botón «Importar plantilla» */
.archivo-oculto {
  display: none !important; /* solo se usa el botón «Importar plantilla» */
}

/* Tabla de Usuarios: nombres y roles en una sola línea, un poco más pequeños */
.tabla-usuarios th,
.tabla-usuarios td { white-space: nowrap; }
.tabla-usuarios .celda-nombre { font-size: 0.82rem; }
.chip { white-space: nowrap; }

/* Título de la página en la cabecera fija (y sin repetirlo en el cuerpo) */
.cabecera-titulo-bloque { display: flex; flex-direction: column; min-width: 0; }
.cabecera-titulo {
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.cabecera-sub {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.3;
  max-width: 52vw;
  /* La descripción puede ocupar hasta dos líneas; si es más larga se recorta. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cabecera-sub:empty { display: none; }
@media screen {
  /* Con JavaScript, el título y su descripción se muestran en la cabecera:
     se ocultan del cuerpo para no repetirlos (al imprimir siguen saliendo). */
  body.titulo-en-cabecera .page-head h2,
  body.titulo-en-cabecera .page-head h2 + p.muted { display: none; }
}
@media (max-width: 640px) {
  /* En celular el título va algo más chico y puede usar más ancho. */
  .cabecera-titulo { font-size: 1.02rem; max-width: 62vw; }
  .cabecera-sub { font-size: 0.78rem; max-width: 62vw; }
}

/* Imagen dentro del escudo del menú lateral */
.escudo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}