/* ============================================
   SIGA Design System
   Registro Académico Digital
   ============================================ */

:root {
  /* ---- Foreground (Text Hierarchy) ---- */
  --text-primary: #2c2c2c;           /* Tinta carbón - texto principal */
  --text-secondary: #5a5a5a;         /* Texto secundario */
  --text-tertiary: #878787;          /* Metadatos */
  --text-muted: #a8a8a8;            /* Deshabilitado/placeholder */

  /* ---- Background (Surface Elevation) ---- */
  --surface-canvas: #faf8f5;         /* Base - papel crema */
  --surface-elevated: #ffffff;       /* Elevado - papel blanco */
  --surface-input: #f5f3f0;          /* Inputs - área de escritura */
  --surface-hover: #f0ede8;          /* Hover state */

  /* ---- Border (Separation Hierarchy) ---- */
  --border-subtle: rgba(44, 44, 44, 0.08);    /* Separación suave */
  --border-standard: rgba(44, 44, 44, 0.12);  /* Separación estándar */
  --border-emphasis: rgba(44, 44, 44, 0.18);  /* Énfasis */
  --border-strong: rgba(44, 44, 44, 0.24);    /* Máximo énfasis */

  /* ---- Brand (Institutional Blue) ---- */
  --brand-primary: #1e4a7a;          /* Azul institucional */
  --brand-hover: #163854;            /* Azul hover */
  --brand-active: #0f2538;           /* Azul active */
  --brand-subtle: #e8eef5;           /* Fondo azul muy suave */

  /* ---- Semantic Colors ---- */
  --success-text: #2d5a3d;           /* Verde academia */
  --success-bg: #e8f4ec;
  --success-border: #c3e6d0;

  --warning-text: #8b6914;
  --warning-bg: #fef9e7;
  --warning-border: #f9e79f;

  --danger-text: #7a2828;            /* Rojo discreto */
  --danger-bg: #fdeaea;
  --danger-border: #f5c6c6;

  /* ---- Control Tokens (Form Elements) ---- */
  --control-bg: var(--surface-input);
  --control-border: var(--border-standard);
  --control-focus-border: var(--brand-primary);
  --control-focus-ring: rgba(30, 74, 122, 0.15);

  /* ---- Spacing Scale ---- */
  --space-micro: 4px;      /* Icon gaps */
  --space-xs: 8px;         /* Component internals */
  --space-sm: 12px;
  --space-md: 16px;        /* Standard spacing */
  --space-lg: 24px;        /* Section spacing */
  --space-xl: 32px;        /* Major separation */
  --space-2xl: 48px;

  /* ---- Border Radius ---- */
  --radius-sm: 3px;        /* Inputs, buttons */
  --radius-md: 6px;        /* Cards */
  --radius-lg: 8px;        /* Modals */

  /* ---- Typography ---- */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  /* ---- Animation ---- */
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition-base: 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Base Styles ---- */

* {
  box-sizing: border-box;
}

/* El atributo `hidden` gana siempre.
   ─────────────────────────────────
   `[hidden] { display: none }` vive en la hoja del NAVEGADOR, y cualquier
   `display` que escriba el autor le gana — sin importar la especificidad,
   porque una hoja de autor siempre pisa a la del navegador. El resultado es un
   elemento marcado como oculto que se dibuja igual, sin error de ningún tipo.

   Pasaba en dos lugares y ninguno era menor:

     · los DOS ojos del campo de contraseña, superpuestos, en la pantalla que
       un profesor abre cada mañana;
     · una caja de aviso VACÍA con un botón "Reintentar", permanente, en la
       planilla de notas — la pantalla más importante del profesor.

   El `!important` es correcto acá y no es pereza: `hidden` es una afirmación
   sobre el DOM ("esto no es relevante ahora"), no una sugerencia de estilo.
   Ninguna regla de presentación debería poder contradecirla. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography Scale ---- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h1 {
  font-size: 28px;
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

p {
  margin: 0 0 var(--space-md) 0;
}

/* ---- Links ---- */

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

a:hover {
  color: var(--brand-hover);
}

/* ---- Navigation ---- */

.nav-institutional {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border-standard);
  padding: 0;
}

.nav-institutional .container-fluid {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}

.nav-institutional .session-menu {
  margin-left: auto;
  font-family: var(--font-sans);
}

.nav-institutional .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: 0.02em;
  padding: 0;
  margin: 0;
}

.nav-institutional .navbar-brand:hover {
  color: var(--brand-hover);
}

.nav-institutional .navbar-brand-logo {
  width: 28px;
  height: 28px;
  display: block;
}

.nav-institutional .navbar-brand-text {
  line-height: 1;
}

.nav-institutional .nav-link {
  color: var(--text-secondary);
  font-size: 14px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-institutional .nav-link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.nav-institutional .dropdown-menu {
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-xs);
  margin-top: var(--space-micro);
  background: var(--surface-elevated);
}

.nav-institutional .dropdown-item {
  color: var(--text-secondary);
  font-size: 14px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-institutional .dropdown-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.nav-institutional .user-info {
  color: var(--text-secondary);
  font-size: 14px;
  margin-right: var(--space-md);
  font-family: var(--font-sans);
}

/* ---- Buttons ---- */

.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* Sin esto, un `.btn` al que se le da ancho —los de ancho completo en el
     teléfono— deja su etiqueta pegada al borde izquierdo: `inline-flex` alinea
     a `flex-start` por defecto. No se notaba porque casi todos los botones se
     miden por su contenido. Un `input[type=submit]` centra solo; un `<a class="btn">`
     no, y por eso convivían dos botones distintos en la misma columna. */
  justify-content: center;
  gap: var(--space-xs);
}

.btn-primary {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: white;
}

.btn-primary:active {
  background: var(--brand-active);
  border-color: var(--brand-active);
}

.btn-secondary {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-standard);
}

.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-emphasis);
  color: var(--text-primary);
}

/* El botón destructivo NO lleva rojo (MOR-135 · la regla de color).
   ────────────────────────────────────────────────────────────────
   En un sistema escolar el rojo tiene un significado que no se puede gastar:
   **un número en rojo es un niño aplazado**. Es la señal de más carga
   emocional del producto y aparece en la libreta que mira una madre, en las
   notas del alumno y en el conteo de inasistencias. Si el rojo también quiere
   decir "este botón borra cosas", deja de decir lo primero.

   Lo destructivo se señala igual, pero por PESO y POSICIÓN:

       btn-primary     azul sólido      la acción a la que vino
       btn-secondary   borde suave      todo lo demás
       btn-danger      borde fuerte     destructivo — y en hover se vuelve
                                        tinta sólida, que se lee como "en serio"

   Además ya no aparece en ninguna fila de listado: vive en la pantalla de
   edición, dentro de un bloque rotulado, con su confirmación y su explicación
   de qué se pierde. El contexto carga el peso que antes cargaba el color. */
.btn-danger {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
  font-weight: 600;
}

.btn-danger:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--surface-elevated);
}

.btn-sm {
  font-size: 13px;
  padding: 6px var(--space-sm);
}

.btn-outline-light {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-standard);
}

.btn-outline-light:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-emphasis);
}

/* ---- Cards & Panels ---- */

.card-academic {
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.card-academic-header {
  display: flex;
  /* `flex-wrap` y `gap`, no decorativos: sin ellos, en un teléfono el título y
     el botón de la derecha se aprietan hasta encimarse. Se veía en la toma de
     asistencia —"Asistencia" quedaba debajo del chip de la fecha— y es la misma
     cabecera de TODAS las pantallas. */
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.card-academic-header h1,
.card-academic-header h2 {
  margin: 0;
}

/* ---- Tables ---- */

.table-academic {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-academic thead {
  background: var(--surface-canvas);
}

.table-academic thead th {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-standard);
}

.table-academic tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.table-academic tbody tr:last-child {
  border-bottom: none;
}

.table-academic tbody tr:hover {
  background: var(--surface-hover);
}

.table-academic tbody td {
  padding: var(--space-md);
  color: var(--text-primary);
  font-size: 14px;
}

.table-academic tbody td:first-child {
  font-weight: 500;
}

/* ---- Forms ---- */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.form-control {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.form-control:focus {
  outline: none;
  border-color: var(--control-focus-border);
  box-shadow: 0 0 0 3px var(--control-focus-ring);
  background: var(--surface-elevated);
}

.form-control::placeholder {
  color: var(--text-muted);
}

select.form-control {
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.password-toggle-group {
  position: relative;
}

.password-toggle-group .form-control {
  padding-right: 52px;
}

/* Los dos SVG del ojo, que reemplazaron a Font Awesome entero (MOR-134). */
.password-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* El caso puntual se fue: lo cubre la regla global `[hidden]` de arriba. */

.password-toggle-btn {
  position: absolute;
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border-standard);
  background: var(--surface-elevated);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  width: 34px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.password-toggle-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* ---- Alerts ---- */

.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-lg);
  font-size: 14px;
  font-family: var(--font-sans);
}

.alert-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.alert-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.alert-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

/* ---- Layout Structure ---- */

.app-layout {
  display: flex;
  min-height: calc(100vh - 120px);
}

.sidebar-index {
  width: 260px;
  background: var(--surface-elevated);
  border-right: 1px solid var(--border-standard);
  padding: var(--space-lg) 0;
  position: sticky;
  top: 0;
  height: calc(100vh - 120px);
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: var(--space-lg);
}

.sidebar-section-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-sm);
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav-item {
  margin: 0;
}

.sidebar-nav-link {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: all var(--transition-fast);
  border-left: 2px solid transparent;
}

.sidebar-nav-link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-left-color: var(--border-emphasis);
}

.sidebar-nav-link.active {
  color: var(--brand-primary);
  background: var(--brand-subtle);
  border-left-color: var(--brand-primary);
  font-weight: 500;
}

/* ---- Container ---- */

.container-academic {
  flex: 1;
  max-width: 100%;
  padding: 0 var(--space-2xl) var(--space-xl);
}

/* En un teléfono de 390 px, 48 px de relleno a cada lado son 96 px —casi un
   TERCIO de la pantalla— gastados en aire antes de la primera letra. Y no es
   un problema de estética: la tabla de notas que el profesor abre desde el
   teléfono (MOR-96) pierde una columna entera por esto.

       390 px    │◄─48─►│ contenido 294 px │◄─48─►│     antes
       390 px  │◄16►│  contenido 358 px  │◄16►│       ahora   (+64 px, +22 %)  */
@media (max-width: 640px) {
  .container-academic { padding: 0 var(--space-md) var(--space-lg); }
}

/*
   El menú en un teléfono (MOR-134).

   Antes esto era una sola regla —`flex-direction: column`— y bastaba para que
   el sidebar ENTERO, con sus cinco secciones y hasta trece enlaces, se apilara
   encima del contenido. En un teléfono eso significa deslizar el menú completo
   antes de ver la primera fila de datos.

   Importa más de lo que parece: según la conversación de MOR-99, el profesor
   carga notas DESDE EL TELÉFONO. La pantalla de carga ya estaba resuelta
   (MOR-96); llegar a ella no.

   Ahora el menú es una tira horizontal que se desliza y queda pegada arriba.
   Dos líneas de alto en vez de cuarenta, y siempre a mano.
*/
@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }

  .sidebar-index {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: var(--space-md);
    padding: var(--space-xs) 0;
    border-right: none;
    border-bottom: 1px solid var(--border-standard);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }


  /* La barra de scroll horizontal se oculta: ocupa alto en una tira que ya es
     angosta, y el desplazamiento con el dedo no la necesita. */
  .sidebar-index::-webkit-scrollbar {
    display: none;
  }

  .sidebar-section {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  /* El rótulo de sección se queda —sin él, trece enlaces en fila no se
     entienden— pero pasa a ser una marca al costado, no un encabezado. */
  .sidebar-section-title {
    padding: 0 0 0 var(--space-md);
    margin-bottom: 0;
    font-size: 10px;
    flex: 0 0 auto;
  }

  .sidebar-nav {
    display: flex;
    gap: var(--space-micro);
  }

  .sidebar-nav-item {
    flex: 0 0 auto;
  }

  /* La marca de "estás acá" pasa del borde izquierdo al de abajo: en una tira
     horizontal, un borde a la izquierda de cada enlace parece un separador. */
  .sidebar-nav-link {
    padding: var(--space-xs) var(--space-sm);
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm);
  }

  .sidebar-nav-link:hover {
    border-left-color: transparent;
  }

  .sidebar-nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-primary);
  }
}

/* ---- Escala de un listado: cuántos son ---- */
/*
   El número que le faltaba a las dieciséis pantallas iguales (MOR-134).

   Va grande a propósito: es lo único de la pantalla que dice de qué tamaño es
   lo que sigue, y es lo que hace que un listado de 200 alumnos NO se vea igual
   que uno de 3 departamentos. Sin esto, ninguna tabla pesa más que otra y el
   ojo no encuentra dónde mirar.
*/

.listado-escala {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  font-size: 14px;
}

.listado-escala-numero {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.listado-escala-sustantivo {
  font-size: 15px;
  color: var(--text-secondary);
}

/* Lo que explica el número cuando no se explica solo: una búsqueda filtrando,
   una tabla topada. Va apagado — es la nota al pie del número, no el número. */
.listado-escala-detalle {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ---- Action Buttons Group ---- */

.actions-group {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

/* ---- Empty State ---- */

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-tertiary);
}

.empty-state h3 {
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---- Barra de contexto: en qué colegio y en qué año escolar estás ---- */
/*
   Antes esta franja decía "Período Académico Activo" —una etiqueta anunciando
   un dato que nunca traía— y repetía el nombre del producto debajo del logo.
   Cero información en el lugar más visible de la app.

   Ahora carga la identidad del inquilino: el colegio manda visualmente, el año
   escolar acompaña. Es lo que reemplaza a la columna "Escuela" que se quitó de
   los listados en MOR-90 — el dato iba una vez arriba, no en cada fila.
*/

.academic-context {
  background: var(--brand-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-sm) 0;
}

.academic-context-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--text-secondary);
}

.contexto-colegio {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}

/* El nombre del colegio es la identidad de la pantalla: va en la serif del
   sistema y con más peso que todo lo demás de la franja. */
.contexto-colegio-nombre {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contexto-colegio-lugar {
  color: var(--text-tertiary);
  white-space: nowrap;
}

.contexto-periodo {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  white-space: nowrap;
}

.contexto-periodo-nombre {
  font-weight: 600;
  color: var(--brand-primary);
}

.contexto-periodo-situacion {
  color: var(--text-tertiary);
}

.contexto-periodo-vacio {
  color: var(--warning-text);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* En un teléfono la franja se apila: el colegio arriba, el año debajo. Nunca
   se corta el nombre del colegio para que quepa el año en la misma línea. */
@media (max-width: 640px) {
  .academic-context-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0 var(--space-md);
  }

  .contexto-colegio-lugar {
    display: none;
  }
}

/* ---- Pagination ---- */

/* Wrapper div que usamos en las vistas */
.pagy-nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-standard);
}

/* nav generado por pagy_nav: nav.pagy.nav */
nav.pagy {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}

/* Todos los enlaces de paginación */
nav.pagy a,
nav.pagy a[role="link"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-sm);
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

/* Hover en enlaces activos */
nav.pagy a:hover:not([aria-disabled="true"]) {
  background: var(--surface-hover);
  border-color: var(--border-emphasis);
  color: var(--text-primary);
}

/* Página actual */
nav.pagy a.current,
nav.pagy a[aria-current="page"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
  font-weight: 500;
  cursor: default;
}

/* Prev/Next deshabilitados y gap */
nav.pagy a[aria-disabled="true"]:not(.current) {
  opacity: 0.4;
  cursor: not-allowed;
}

nav.pagy a.gap {
  background: transparent;
  border-color: transparent;
  cursor: default;
  opacity: 0.5;
}

/* ---- Utility Classes ---- */

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.gap-1 {
  gap: var(--space-xs);
}

.gap-2 {
  gap: var(--space-md);
}

.gap-3 {
  gap: var(--space-lg);
}

.text-center {
  text-align: center;
}

/* ---- Form Select (for consistency with form-control) ---- */

.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--control-focus-border);
  box-shadow: 0 0 0 3px var(--control-focus-ring);
  background: var(--surface-elevated);
}

/* ---- Dashboard Styles ---- */

.dashboard-administrador {
  /* Container ya definido */
}

/* Stats Grid */
/* `auto-fit` con 200 px deja tres columnas en un contenedor de ~900 px, y con
   cuatro tarjetas eso da 3 + 1, con la última sola en una fila vacía. Con
   `min(160px, 100%)` entran las cuatro en una línea en escritorio y caen a dos
   en el teléfono — nunca una huérfana.
   El `min(…, 100%)` es lo que impide que la tarjeta imponga 160 px en una
   pantalla más angosta que eso. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.stat-card {
  background: var(--brand-subtle);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  transition: all var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--control-focus-ring);
}

.stat-card h3 {
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--brand-primary);
  margin: 0 0 var(--space-xs) 0;
  font-weight: 600;
}

.stat-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Quick Access Grid */
.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.quick-access-card {
  display: block;
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.quick-access-card:hover {
  border-color: var(--brand-primary);
  background: var(--brand-subtle);
  transform: translateY(-2px);
}

.quick-access-icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
}

.quick-access-card h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--brand-primary);
  margin: 0 0 var(--space-xs) 0;
}

.quick-access-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Admin Info Badge */
.admin-info-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-canvas);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.role-badge {
  background: var(--brand-primary);
  color: white;
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  /* Sin `text-transform: capitalize`: capitaliza CADA palabra, y en español eso
     produce Title Case inglés. Acá lo hacía sobre una fecha —"15 De Agosto De
     2026", en la pantalla de asistencia— y sobre "3 Registros". El único caso
     que quería arreglar era `admin.role.humanize`, y `humanize` ya pone la
     mayúscula inicial él solo. */
}


.section-title {
  font-family: var(--font-serif);
  font-size: 40px;
  text-align: center;
  color: var(--brand-primary);
  margin: 0 0 var(--space-2xl) 0;
  font-weight: 600;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}

.feature-card {
  background: var(--surface-canvas);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-standard);
  transition: all var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(30, 74, 122, 0.1);
  border-color: var(--brand-primary);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  display: block;
}

.feature-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--brand-primary);
  margin: 0 0 var(--space-sm) 0;
  font-weight: 600;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: 15px;
}

/* ---- Animations ---- */

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  .hero-section-bg-logo {
    background-position: center 12%;
    background-size: min(500px, 95vw);
  }

  .hero-section-bg-logo .hero-content {
    padding-top: clamp(110px, 24vw, 170px);
  }

  .hero-section-fullwidth {
    width: calc(100% + (var(--space-lg) * 2));
    margin-left: calc(var(--space-lg) * -1);
    margin-right: calc(var(--space-lg) * -1);
  }

  .features-section,
  .benefits-section,
  .stats-section,
  .cta-section,
  .landing-footer {
    width: calc(100% + (var(--space-lg) * 2));
    margin-left: calc(var(--space-lg) * -1);
    margin-right: calc(var(--space-lg) * -1);
  }

  .hero-title {
    font-size: clamp(38px, 10vw, 60px);
  }

  .hero-subtitle {
    font-size: clamp(24px, 7vw, 34px);
  }

  .hero-logo {
    width: 200px;
  }

  .section-title {
    font-size: 32px;
  }

  .benefit-content {
    flex-direction: column;
    text-align: center;
  }

  .benefit-image-placeholder {
    width: 150px;
    height: 150px;
  }

  .placeholder-icon {
    font-size: 60px;
  }

  .cta-title {
    font-size: 32px;
  }

  .stat-number {
    font-size: 42px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ---- No Role State ---- */

.no-role-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.no-role-card {
  text-align: center;
  max-width: 420px;
  padding: var(--space-2xl);
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-lg);
}

.no-role-icon {
  font-size: 56px;
  margin-bottom: var(--space-lg);
}

.no-role-card h2 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}

.no-role-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-xl) 0;
}

/* ---- Section Block (Profesor & Estudiante Dashboards) ---- */

.section-block {
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast);
}

.section-block:hover {
  border-color: var(--brand-primary);
}

.section-block-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.section-block-title h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--brand-primary);
  margin: 0 0 var(--space-xs) 0;
  font-weight: 600;
}

.section-period {
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--surface-hover);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.section-block-meta {
  flex-shrink: 0;
  text-align: right;
}

.section-student-count {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.section-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.subject-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-subtle);
  border: 1px solid rgba(30, 74, 122, 0.15);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 13px;
}

.subject-name {
  color: var(--brand-primary);
  font-weight: 500;
}

.subject-teacher {
  color: var(--text-tertiary);
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}

/* ---- Detail Row (ficha de detalles) ---- */

.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

.detail-item {
  flex: 1;
  min-width: 160px;
}

.detail-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.detail-value {
  font-size: 16px;
  color: var(--text-primary);
  margin: 0;
  font-weight: 500;
}

/* ---- Form Row (formulario en línea) ---- */

.form-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-row .form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

/* ---- Activity Log Badges ---- */

.activity-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--brand-subtle);
  color: var(--brand-primary);
  border: 1px solid var(--border-standard);
}

.activity-badge--login,
.activity-badge--logout {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}

.activity-badge--created {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #90caf9;
}

.activity-badge--updated {
  background: #fff8e1;
  color: #f57f17;
  border-color: #ffe082;
}

.activity-badge--destroyed {
  background: #fce4ec;
  color: #b71c1c;
  border-color: #f48fb1;
}

.activity-badge--assigned,
.activity-badge--removed {
  background: #f3e5f5;
  color: #6a1b9a;
  border-color: #ce93d8;
}

/* ---- Search Input with spinner ---- */

.search-input-wrap {
  position: relative;
}

.search-input-wrap .form-select {
  width: 100%;
  padding-right: 36px;
}

.search-spinner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-standard);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.search-spinner.hidden {
  display: none;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ---- Filter Pills ---- */

.filter-pills {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-subtle);
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.filter-pill:hover {
  background: var(--brand-primary);
  color: #fff;
}

.filter-pill.active {
  background: var(--brand-primary);
  color: #fff;
}

.filter-pill small {
  opacity: 0.75;
  font-weight: 400;
}

/* ============================================
   Medidor de ponderación
   --------------------------------------------
   Cuánto del 100 % de un lapso está comprometido. Se usa en el listado (una
   barra por grupo sección–materia–lapso) y dentro del formulario, donde además
   muestra en otro tono lo que sumaría la evaluación que se está escribiendo.
   ============================================ */

.weight-meter-intro {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 var(--space-md);
}

.weight-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-micro);
  margin-bottom: var(--space-md);
}

.weight-meter-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.weight-meter-label strong {
  color: var(--text-primary);
}

.weight-meter-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.weight-meter-fill {
  background: var(--brand-primary);
  transition: width 120ms ease-out;
}

.weight-meter-fill--completo {
  background: var(--success-text);
}

.weight-meter-fill--nuevo {
  background: var(--success-text);
  opacity: 0.55;
}

.weight-meter-fill--excedido {
  background: var(--danger-text);
  opacity: 1;
}

.weight-meter-value {
  font-size: 13px;
  color: var(--text-tertiary);
}

.weight-meter-value--excedido {
  color: var(--danger-text);
  font-weight: 600;
}

.weight-meter-falta {
  color: var(--warning-text);
}

/* ============================================
   Planilla de carga de notas
   --------------------------------------------
   Móvil primero: una fila por alumno, en vertical. Una grilla de 30 × N en un
   teléfono no se arregla con overflow-x — se arregla no siendo una grilla.
   ============================================ */

.carga-contexto {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 var(--space-md);
}

.carga-progreso {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.carga-progreso-barra {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.carga-progreso-fill {
  height: 100%;
  background: var(--success-text);
  transition: width 160ms ease-out;
}

.carga-progreso-texto {
  font-size: 13px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.carga-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 14px;
}

.carga-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.carga-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.carga-alumno {
  min-width: 0;
}

.carga-alumno-nombre {
  font-size: 15px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carga-alumno-carnet {
  font-size: 12px;
  color: var(--text-tertiary);
}

.carga-campo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* 64 px de ancho y 44 de alto: el mínimo cómodo para un pulgar. */
.carga-input {
  width: 64px;
  height: 44px;
  text-align: center;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.carga-input:focus {
  outline: none;
  border-color: var(--control-focus-border);
  box-shadow: 0 0 0 3px var(--control-focus-ring);
}

/* Sin nota se ve DISTINTO de una nota baja: el guion está donde iría el número. */
.carga-input::placeholder {
  color: var(--text-muted);
}

.carga-estado {
  width: 18px;
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
}

.carga-fila[data-estado="guardando"] .carga-estado { color: var(--text-tertiary); }
.carga-fila[data-estado="guardado"] .carga-estado  { color: var(--success-text); }
.carga-fila[data-estado="vacio"] .carga-estado     { color: var(--text-muted); }
.carga-fila[data-estado="sin-red"] .carga-estado   { color: var(--warning-text); }
.carga-fila[data-estado="rechazado"] .carga-estado { color: var(--danger-text); font-weight: 700; }

.carga-fila[data-estado="sin-red"] .carga-input   { border-color: var(--warning-border); background: var(--warning-bg); }
.carga-fila[data-estado="rechazado"] .carga-input { border-color: var(--danger-border); background: var(--danger-bg); }

.carga-ayuda {
  margin-top: var(--space-md);
  font-size: 13px;
  color: var(--text-tertiary);
}

.carga-ayuda kbd {
  background: var(--surface-input);
  border: 1px solid var(--border-standard);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
}

@media (max-width: 480px) {
  .carga-alumno-nombre { font-size: 16px; }
  .carga-input { width: 72px; height: 48px; font-size: 20px; }
}

/* ============================================
   Notas del estudiante
   --------------------------------------------
   Lo que NUNCA puede pasar acá es que una evaluación sin corregir se lea como
   un cero: el alumno llama al colegio y deja de confiar en el sistema. Por eso
   "Pendiente" es texto en gris y nunca un número.
   ============================================ */

.nota-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.nota-valor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nota-valor--aprobada {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.nota-valor--aplazada {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

/* Gris y en palabras: no se puede confundir con una calificación. */
.nota-pendiente {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
}

.nota-parcial {
  font-size: 12px;
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 20px;
  padding: 2px 10px;
}

.nota-ayuda {
  margin: var(--space-sm) 0 0;
  font-size: 13px;
  color: var(--text-tertiary);
}

@media (max-width: 600px) {
  /* ── Tablas en un teléfono ─────────────────────────────────────────────
     Dos tratamientos, y elegir mal el tratamiento es peor que no tener ninguno.

     Por defecto: la tabla SE DESLIZA de costado dentro de su propia caja. Es
     seguro para cualquier cantidad de columnas y nunca hace que la página
     entera se mueva en horizontal, que es lo que se siente roto.

     Con `--tarjetas`: cada fila se convierte en una tarjeta. Se ve mucho mejor,
     pero asume una forma concreta —el dato importante a la derecha, el resto
     apagado debajo del nombre—, así que va SOLO donde se diseñó para eso.
     Aplicarlo a una tabla de cinco columnas produce un revoltijo.

     Antes esta regla era global y se llevaba puestas las tablas nuevas. */

  .table-academic {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table-academic--tarjetas {
    display: table;
    overflow-x: visible;
    white-space: normal;
  }

  .table-academic--tarjetas tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .table-academic--tarjetas tbody td {
    border: none;
    padding: 0;
  }

  .table-academic--tarjetas tbody td:first-child {
    font-weight: 500;
  }

  .table-academic--tarjetas tbody td:last-child {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: center;
  }

  .table-academic--tarjetas tbody td:not(:first-child):not(:last-child) {
    font-size: 12px;
    color: var(--text-tertiary);
  }

  .table-academic--tarjetas thead {
    display: none;
  }
}

/* ============================================
   Boletines y su verificación pública
   ============================================ */

.verificacion-sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
}

.codigo-verificacion {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASISTENCIA — la pantalla que tiene un minuto (MOR-111)
   ═══════════════════════════════════════════════════════════════════════════

   Un profesor la usa de pie, con treinta alumnos entrando y el teléfono en una
   mano. Todo lo de acá sale de esa restricción:

     · La fila ENTERA es el objetivo del toque, no una casilla de 20 px.
     · 52 px de alto: por encima del mínimo de 44 px que se puede tocar con el
       pulgar sin mirar, que es como se toca de verdad.
     · El estado se lee por color Y por palabra. Solo color deja afuera a quien
       no distingue rojo de verde, y en una lista de treinta nombres eso es no
       poder usar la pantalla.
*/

.asistencia-dias {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.asistencia-lista {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asistencia-alumno { margin: 0; }

.asistencia-boton {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-left: 4px solid var(--border-standard);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.asistencia-boton:hover { background: var(--surface-hover); }

.asistencia-boton:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.asistencia-nombre { font-weight: 500; }

.asistencia-estado {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Presente es el estado por defecto y va callado: si los treinta gritaran, las
   dos ausencias no se verían. */
.asistencia-alumno[data-estado="presente"] .asistencia-estado {
  background: var(--surface-hover);
  color: var(--text-tertiary);
}

.asistencia-alumno[data-estado="ausente"] .asistencia-boton {
  border-left-color: var(--danger-text);
  background: var(--danger-bg);
}

.asistencia-alumno[data-estado="ausente"] .asistencia-estado {
  background: var(--danger-text);
  color: #fff;
}

.asistencia-alumno[data-estado="tarde"] .asistencia-boton {
  border-left-color: var(--warning-text);
  background: var(--warning-bg);
}

.asistencia-alumno[data-estado="tarde"] .asistencia-estado {
  background: var(--warning-text);
  color: #fff;
}

/* El pie queda pegado abajo: con treinta alumnos el botón de guardar cae fuera
   de la pantalla, y un botón que hay que buscar es un día sin registrar. */
.asistencia-pie {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
  background: var(--surface-elevated);
  border-top: 1px solid var(--border-standard);
}

.asistencia-resumen {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.asistencia-guardar { min-height: 48px; padding-inline: var(--space-xl); }

/* ── Elegir sección ──────────────────────────────────────────────────────── */

.asistencia-secciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.asistencia-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 60px;
  padding: var(--space-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.asistencia-seccion:hover {
  border-color: var(--brand-primary);
  background: var(--surface-hover);
}

.asistencia-seccion-nombre { font-weight: 600; }
.asistencia-seccion-dato { font-size: 13px; color: var(--text-tertiary); }

.asistencia-marca-tomada {
  font-size: 12px;
  font-weight: 600;
  color: var(--success-text);
  background: var(--success-bg);
  padding: 3px 9px;
  border-radius: 999px;
}

@media (max-width: 600px) {
  .asistencia-boton { min-height: 56px; font-size: 16px; }
  .asistencia-pie { padding-bottom: var(--space-lg); }
  .asistencia-guardar { flex: 1; }
}

/* Marcas de estado en el historial y el reporte de inasistencias (MOR-111). */

.asistencia-marca {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.asistencia-marca--presente { background: var(--success-bg); color: var(--success-text); }
.asistencia-marca--ausente  { background: var(--danger-bg);  color: var(--danger-text); }
.asistencia-marca--tarde    { background: var(--warning-bg); color: var(--warning-text); }

/* El conteo de faltas es el dato que decide si hay que llamar a la casa, así que
   pesa más que el resto de la fila. */
.falta-conteo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.falta-conteo--alta { color: var(--danger-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DEL REPRESENTANTE (MOR-110)
   ═══════════════════════════════════════════════════════════════════════════

   Es la superficie más visible del producto: dos representantes por alumno, ~700
   en un colegio de 350, contra quince profesores.

   Entran TRES VECES AL AÑO, desde un teléfono, a saber UNA cosa. No es un
   tablero: es una respuesta. De ahí que la nota sea el elemento más grande de la
   pantalla y que no haya un solo control que no lleve a un dato.
*/

.portal-cabecera {
  padding: var(--space-lg) 0 var(--space-md);
  border-bottom: 2px solid var(--border-standard);
  margin-bottom: var(--space-lg);
}

.portal-cabecera h1 { margin-bottom: var(--space-micro); }

.portal-seccion {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.portal-punto { color: var(--text-muted); margin: 0 6px; }

.portal-lapsos { margin-bottom: var(--space-lg); }

/* ── Las materias y sus notas ────────────────────────────────────────────── */

.portal-materias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.portal-materia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 56px;
}

.portal-materia:last-child { border-bottom: none; }

.portal-materia-nombre { font-size: 16px; }

/* La nota es lo que la persona vino a ver, así que es lo más grande. */
.portal-nota {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.portal-nota--aprobada { color: var(--success-text); }
.portal-nota--aplazada { color: var(--danger-text); }

/* "Pendiente" en letras, NUNCA un cero: el profesor no corrigió todavía, y un
   cero hace que una familia crea que su hijo está reprobando. */
.portal-pendiente {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
  white-space: nowrap;
}

.portal-justificada {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: var(--space-xs);
}

/* ── Elegir hijo ─────────────────────────────────────────────────────────── */

.portal-lista-hijos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }

.portal-tarjeta-hijo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 68px;
  justify-content: center;
  padding: var(--space-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
}

.portal-tarjeta-hijo:hover { border-color: var(--brand-primary); color: var(--text-primary); }

.portal-tarjeta-nombre { font-family: var(--font-serif); font-size: 19px; font-weight: 600; }
.portal-tarjeta-seccion { font-size: 14px; color: var(--text-secondary); }

/* ── Hijos en colegios distintos ─────────────────────────────────────────── */

.portal-colegios { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.portal-colegio {
  padding: var(--space-xs) var(--space-md);
  min-height: 44px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

.portal-colegio--activo {
  border-color: var(--brand-primary);
  background: var(--brand-subtle);
  color: var(--brand-primary);
  font-weight: 600;
}

.portal-boletines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }

.portal-boletines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.portal-boletin-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: .06em;
}

@media (max-width: 600px) {
  .portal-materia { min-height: 60px; }
  .portal-nota { font-size: 30px; }
  .portal-tarjeta-hijo { min-height: 72px; }
}

/* Selección de alumnos al dar de alta un representante (MOR-110). */
.representante-alumnos {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
}

.representante-alumno {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 40px;
  padding: 0 var(--space-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.representante-alumno:hover { background: var(--surface-hover); }
.representante-alumno input { margin: 0; }

.detalle { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-lg); margin: 0; }
.detalle dt { font-weight: 600; color: var(--text-secondary); }
.detalle dd { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMINISTRACIÓN DE LA PLATAFORMA (MOR-133)
   ═══════════════════════════════════════════════════════════════════════════

   Deliberadamente distinta al panel de un colegio, y no por gusto: quien entra
   acá tiene que saber en tres segundos que NO está mirando el panel de un
   colegio. Cuando las dos se veían iguales, confundirlas era cuestión de tiempo
   — y confundirlas fue exactamente lo que produjo cuatro fugas.

   El panel del colegio es papel crema y azul institucional. Este es oscuro,
   denso, y con la tipografía de datos por delante: es una consola de operación,
   no un documento académico.
*/

.siga-admin {
  --siga-fondo:  #10151c;
  --siga-panel:  #171e27;
  --siga-borde:  #26303c;
  --siga-texto:  #e6ecf3;
  --siga-tenue:  #8fa0b3;
  --siga-acento: #5eead4;
  --siga-alerta: #fbbf24;

  /* Los tres estados que faltaban por nombrar. Estaban escritos como hex crudo
     en `.siga-estado--*`, que es la forma de que dentro de seis meses nadie
     sepa si ese `#f87171` es "vencida" o simplemente un rojo que quedó ahí.
     El panel de SIGA no comparte la paleta del colegio a propósito —tiene que
     verse distinto en tres segundos, ver `MOR-133`— pero sus tokens se nombran
     igual: por lo que significan. */
  --siga-ok:       #34d399;   /* suscripción activa */
  --siga-mal:      #f87171;   /* vencida */
  --siga-apagado:  #6b7280;   /* cancelada — un hecho, no una alarma */
  --siga-apagado-texto: #9ca3af;

  background: var(--siga-fondo);
  color: var(--siga-texto);
  min-height: 100vh;
  font-family: var(--font-sans);
}

.siga-admin h1 { font-size: 26px; color: var(--siga-texto); margin-bottom: var(--space-xs); }
.siga-admin h2 { font-size: 18px; color: var(--siga-texto); margin: 0; }
.siga-admin h3 { font-size: 15px; color: var(--siga-tenue); margin: var(--space-lg) 0 var(--space-xs); }
.siga-admin a { color: var(--siga-acento); }

.siga-nav { background: var(--siga-panel); border-bottom: 1px solid var(--siga-borde); }

.siga-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: var(--space-sm) var(--space-lg);
  display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap;
}

.siga-marca { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.siga-marca-nombre { font-weight: 800; font-size: 19px; color: var(--siga-texto); letter-spacing: .02em; }
.siga-marca-etiqueta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--siga-acento); border: 1px solid var(--siga-acento);
  padding: 1px 6px; border-radius: 2px;
}

.siga-menu { display: flex; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.siga-menu-link {
  display: block; padding: 6px 12px; border-radius: var(--radius-sm);
  color: var(--siga-tenue); text-decoration: none; font-size: 14px;
}
.siga-menu-link:hover { background: var(--siga-borde); color: var(--siga-texto); }
.siga-menu-link.active { background: var(--siga-borde); color: var(--siga-acento); font-weight: 600; }

.siga-sesion { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
.siga-quien { font-size: 13px; color: var(--siga-tenue); }
.siga-rol {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  margin-left: 6px; color: var(--siga-acento);
}

/* La franja es el reverso exacto de la barra de contexto del colegio: allá dice
   EN QUÉ colegio estás, acá dice que estás fuera de todos ellos. */
.siga-aviso { background: var(--siga-borde); border-bottom: 1px solid var(--siga-borde); }
.siga-aviso-inner {
  max-width: 1180px; margin: 0 auto; padding: 8px var(--space-lg);
  font-size: 12.5px; color: var(--siga-tenue);
}
.siga-aviso strong { color: var(--siga-acento); }

.siga-contenido { max-width: 1180px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) 80px; }
.siga-subtitulo { color: var(--siga-tenue); margin-bottom: var(--space-lg); }

.siga-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-xl);
}
.siga-cifra {
  background: var(--siga-panel); border: 1px solid var(--siga-borde);
  border-radius: var(--radius-md); padding: var(--space-md);
  display: flex; flex-direction: column; gap: 2px;
}
.siga-cifra--atencion { border-color: var(--siga-alerta); }
.siga-cifra--atencion .siga-cifra-numero { color: var(--siga-alerta); }
.siga-cifra-numero {
  font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--siga-acento);
}
.siga-cifra-que { font-size: 13px; color: var(--siga-tenue); }

.siga-bloque {
  background: var(--siga-panel); border: 1px solid var(--siga-borde);
  border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-lg);
}
.siga-bloque-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md);
}
.siga-vacio { color: var(--siga-tenue); margin: 0; }
.siga-nota { color: var(--siga-tenue); font-size: 13.5px; max-width: 74ch; }
.siga-nota code { background: var(--siga-borde); color: var(--siga-acento); }

.siga-tabla-envoltura { overflow-x: auto; }
.siga-tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.siga-tabla th {
  text-align: left; padding: 8px 12px 8px 0; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--siga-tenue);
  border-bottom: 1px solid var(--siga-borde);
}
.siga-tabla td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--siga-borde); }
.siga-tabla tr:last-child td { border-bottom: none; }
.siga-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.siga-tabla .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.siga-tabla .apagado { color: var(--siga-tenue); }

.siga-estado {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--siga-borde); color: var(--siga-tenue);
}
.siga-estado--pending { border-color: var(--siga-alerta); color: var(--siga-alerta); }

.siga-lista-sistemas { list-style: none; margin: 0; padding: 0; }
.siga-lista-sistemas li {
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding: 6px 0; border-bottom: 1px solid var(--siga-borde); font-size: 14px;
}

.siga-detalle { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-lg); margin: 0; }
.siga-detalle dt { color: var(--siga-tenue); font-size: 13px; }
.siga-detalle dd { margin: 0; }

.siga-cita {
  margin: 0; padding: var(--space-md); background: var(--siga-fondo);
  border-left: 3px solid var(--siga-acento); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--siga-texto); font-size: 14px;
}

.siga-fieldset {
  border: 1px solid var(--siga-borde); border-radius: var(--radius-md);
  padding: var(--space-lg); margin: 0 0 var(--space-lg);
}
.siga-fieldset legend { padding: 0 var(--space-xs); color: var(--siga-acento); font-size: 13px; font-weight: 600; }
.siga-admin .form-label { color: var(--siga-tenue); }
.siga-admin .form-control, .siga-admin .form-select {
  background: var(--siga-fondo); border-color: var(--siga-borde); color: var(--siga-texto);
}
.siga-admin .form-text { color: var(--siga-tenue); }
.siga-form-inline { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .siga-nav-inner { gap: var(--space-sm); }
  .siga-sesion { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Cuando la matrícula se pasó del plan facturado (MOR-108). No es un error: el
   plan se observa siempre y se cobra al renovar. */
.siga-desfase { font-size: 11px; color: var(--siga-alerta); }
.siga-estado--activa    { border-color: var(--siga-ok); color: var(--siga-ok); }
.siga-estado--en_gracia { border-color: var(--siga-alerta); color: var(--siga-alerta); }
.siga-estado--vencida   { border-color: var(--siga-mal); color: var(--siga-mal); }
.siga-estado--cancelada { border-color: var(--siga-apagado); color: var(--siga-apagado-texto); }

/* Aviso de suscripción (MOR-108). Solo aparece cuando hay algo que decir: un
   cartel permanente de "estás al día" se deja de ver, y el día que dice otra
   cosa tampoco se ve. */
.aviso-suscripcion {
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.aviso-suscripcion--vencida {
  background: var(--danger-bg);
  border-bottom-color: var(--danger-border);
  color: var(--danger-text);
}

.aviso-suscripcion-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
}

/* Alguien de SIGA adentro de un colegio. Imposible de no ver: si quien da
   soporte olvida que está en un sistema ajeno, el aviso no sirve — y el colegio
   lo ve igual, que es lo que lo hace defendible frente al cliente. */
.aviso-visita {
  background: #4c1d95;
  color: #ede9fe;
  border-bottom: 2px solid #7c3aed;
}

.aviso-visita-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.aviso-visita-salir {
  margin-left: auto;
  background: transparent;
  border: 1px solid #a78bfa;
  color: #ede9fe;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.aviso-visita-salir:hover { background: #6d28d9; }

/* El escudo del colegio (identidad). Chico y al lado del nombre: acompaña, no
   compite — el nombre es el que se lee. */
.contexto-escudo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
  align-self: center;
}

/* ── Identidad del colegio ───────────────────────────────────────────────── */

.identidad {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.identidad-escudo { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; }

.identidad-escudo-imagen {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--surface-elevated);
}

.identidad-escudo-vacio {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--border-emphasis);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Neutro: quitar el escudo es reversible —se vuelve a subir— y no destruye
   ningún dato académico. El rojo acá era puro énfasis sobre un control. */
.identidad-quitar { font-size: 13px; color: var(--text-secondary); text-decoration: underline; }
.identidad-vacio-nota { font-size: 12px; text-align: center; max-width: 160px; margin: 0; }

@media (max-width: 640px) {
  .identidad { grid-template-columns: 1fr; }
  .identidad-escudo { align-items: flex-start; }
}

/* ==========================================================================
   SOLICITUD DE DEMOSTRACIÓN — la página que llega por WhatsApp (MOR-135)
   ==========================================================================
   Se diseña para UN caso: una directora, de pie, en un teléfono, con datos
   móviles. De ahí sale todo lo de acá abajo.

     · Una sola columna hasta 900 px. El formulario primero, SIEMPRE: lo que
       está arriba del pliegue es el primer campo, no un titular decorativo.
     · Campos de 52 px de alto. El dedo no es un puntero de ratón.
     · 16 px de tipografía en los inputs, ni uno menos: por debajo de eso
       Safari de iOS hace zoom solo al enfocar, la página salta y la persona
       pierde de vista dónde estaba escribiendo.
     · Nada de `autofocus` — abre el teclado al cargar y tapa la pantalla.
   ========================================================================== */

.solicitud {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.solicitud-cabecera {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.solicitud-marca { width: 76px; height: 76px; margin-bottom: var(--space-md); }

.solicitud-titulo {
  font-family: var(--font-serif);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

.solicitud-entrada {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* El formulario primero en el DOM y en la pantalla. En escritorio se pone al
   lado el "qué pasa después"; en teléfono queda debajo, que es donde se lee
   DESPUÉS de haber decidido escribir. */
.solicitud-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.solicitud-formulario {
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 1px 2px rgba(44, 44, 44, 0.04);
}

.solicitud-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.solicitud-form .form-group { margin: 0; display: flex; flex-direction: column; gap: 6px; }

.solicitud-form .form-control,
.solicitud-form .form-select {
  min-height: 52px;
  font-size: 16px;
}

/* "opcional" en la etiqueta, no en el placeholder: el placeholder desaparece
   al escribir, justo cuando la persona duda de si ese campo hacía falta. */
.solicitud-opcional {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: -4px;
}

.solicitud-form .form-label { margin-bottom: 0; }
.solicitud-form .nota-ayuda { margin: 0; font-size: 13px; color: var(--text-tertiary); }

.solicitud-enviar {
  min-height: 54px;
  font-size: 17px;
  width: 100%;
  margin-top: var(--space-xs);
}

.solicitud-letra-chica {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

.solicitud-error-titulo { margin: 0 0 var(--space-xs); font-weight: 600; }
.solicitud-errores { margin: 0; padding-left: 1.2em; }

.solicitud-aparte { display: flex; flex-direction: column; gap: var(--space-lg); }

.solicitud-aparte-titulo {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
}

.solicitud-pasos {
  background: var(--brand-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Numerados porque SON una secuencia en el tiempo: primero le escriben, luego
   la llamada, luego decide. El número lleva información, no es adorno. */
.solicitud-lista-pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.solicitud-lista-pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-sm);
  align-items: start;
  line-height: 1.5;
}

.solicitud-lista-pasos li::before {
  content: counter(paso);
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.solicitud-lista-pasos strong { display: block; color: var(--text-primary); }
.solicitud-lista-pasos span { color: var(--text-secondary); font-size: 15px; }

.solicitud-directo { text-align: center; }
.solicitud-directo-texto { margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: 15px; }
.solicitud-whatsapp { width: 100%; min-height: 48px; }

.solicitud-confianza {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.6;
}
.solicitud-confianza p { margin: 0; }

.solicitud-volver { text-align: center; margin: var(--space-xl) 0 0; }

@media (max-width: 900px) {
  .solicitud { padding: var(--space-lg) var(--space-md) var(--space-xl); }

  /* `minmax(0, 1fr)` y no `1fr`. Son distintos: `1fr` es `minmax(auto, 1fr)`,
     y ese `auto` NO baja del ancho intrínseco del contenido — un `<input>`
     trae un `size` implícito de 20 caracteres. La columna se niega a encogerse,
     la tarjeta se sale por la derecha y el teléfono queda con scroll
     horizontal. El `0` es lo único que le da permiso de achicarse. */
  .solicitud-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .solicitud-formulario { padding: var(--space-lg); }
}

/* Los inputs no deben imponer su ancho intrínseco a ninguna grilla. */
.solicitud-form .form-control,
.solicitud-form .form-select { width: 100%; min-width: 0; }

.solicitud-recibida {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-md);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-bg);
  border: 2px solid var(--success-border);
  color: var(--success-text);
  font-size: 34px;
  line-height: 1;
}

.solicitud-gracias {
  max-width: 52ch;
  margin: 0 auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.65;
}
.solicitud-gracias p { margin: 0 0 var(--space-md); }
.solicitud-gracias p:last-of-type { margin-bottom: var(--space-sm); }

/* ==========================================================================
   PORTADA PÚBLICA (MOR-135)
   ==========================================================================
   El mundo visual es el del documento escolar —el acta, el boletín, la
   constancia—, no el de la landing de SaaS. De ahí las decisiones:

     · Serif para los titulares. Un boletín venezolano se imprime en serif;
       una directora reconoce ese registro antes de leer la primera palabra.
     · El fondo es el papel crema del sistema (`--surface-canvas`), no blanco
       ni un degradado. La app y la portada son el mismo objeto.
     · El oro del escudo (#D4AF37) aparece UNA vez, en el filete del hero.
       Si se repite deja de significar.
     · Nada de emoji como marcador de sección: el anterior tenía siete.
   ========================================================================== */

.portada { background: var(--surface-canvas); }

.portada-inner { max-width: 1000px; margin: 0 auto; padding: 0 var(--space-lg); }

/* ---- Hero: la tesis ---- */

/* El hero va en oscuro porque el emblema de SIGA vive sobre azul profundo: es
   su fondo, no un accesorio que se le pueda quitar. El resto de la portada
   sigue en papel crema, así que este bloque es el único momento oscuro de la
   página — y por eso es donde el ojo cae primero. */
.portada-hero {
  background: #07142f;
  padding: clamp(32px, 6vw, 72px) var(--space-lg) clamp(40px, 7vw, 80px);
  position: relative;
}

/* El emblema se recorta en círculo sobre su propio fondo: la imagen es un
   cuadrado con azul en todo el borde, y un cuadrado dentro de una sección
   oscura se nota como una lámina pegada encima. */
.portada-emblema {
  display: block;
  width: clamp(150px, 22vw, 210px);
  height: clamp(150px, 22vw, 210px);
  margin: 0 auto var(--space-lg);
  object-fit: cover;
  border-radius: 50%;
}

.portada-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 84px;
  height: 3px;
  background: #4a9eff;
}

.portada-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }

.portada-antetitulo {
  margin: 0 0 var(--space-md);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.portada-tesis {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-lg);
  color: #fff;
}

/* La segunda frase es el giro del argumento, así que se separa y se inclina.
   Es la única cursiva de la página. */
.portada-tesis em {
  display: block;
  margin-top: var(--space-sm);
  font-style: italic;
  color: #7cc0ff;
}

.portada-bajada {
  max-width: 52ch;
  margin: 0 auto var(--space-xl);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}
.portada-bajada strong { color: #fff; }

.portada-antetitulo { color: rgba(255, 255, 255, 0.5); }

/* Sobre fondo oscuro, el secundario claro del sistema desaparece. */
.portada-hero .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.portada-hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.portada-acciones {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.portada-cta { min-height: 50px; font-size: 16px; padding: 0 var(--space-xl); }

/* ---- Secciones ---- */

.portada-hallazgo,
.portada-que-hace,
.portada-planes,
.portada-quienes { padding: clamp(48px, 7vw, 80px) 0; }

.portada-que-hace, .portada-quienes { background: var(--surface-elevated); }

.portada-titulo {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}

.portada-subtitulo {
  max-width: 58ch;
  margin: -8px 0 var(--space-xl);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
}

.portada-parrafo {
  max-width: 66ch;
  margin: 0 0 var(--space-md);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.portada-nota {
  max-width: 66ch;
  margin: var(--space-xl) 0 0;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1.65;
}

/* ---- Las cifras del hallazgo ---- */

.portada-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-lg);
}

.portada-cifra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  /* El filete a la izquierda, no arriba: alinea con el borde del texto y no
     compite con el número. */
  border-left: 3px solid var(--brand-primary);
}

.portada-cifra-numero {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary);
}

.portada-cifra-que { color: var(--text-secondary); font-size: 15px; line-height: 1.45; }

/* La fuente al lado del dato. Una cifra sin procedencia en una página de venta
   se lee como inventada — y las cuatro que había antes lo eran. */
.portada-cifra-fuente {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---- Qué hace ---- */

.portada-piezas {
  display: grid;
  /* 340 px y no 280: con 280 entran TRES columnas en los 1000 px del contenedor
     y las cuatro piezas quedan 3 + 1, con la última sola en una fila vacía.
     Con 340 entran dos, y son 2×2. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--space-xl) var(--space-2xl);
}

.portada-pieza h3 {
  font-family: var(--font-serif);
  font-size: 21px;
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

.portada-pieza p { margin: 0 0 var(--space-sm); color: var(--text-secondary); line-height: 1.65; }

/* El renglón que separa a SIGA de un folleto: el detalle que solo sabe quien
   hizo boletines de verdad. Va más chico porque es para quien ya se interesó. */
.portada-pieza-detalle {
  font-size: 14px;
  color: var(--text-tertiary);
  padding-left: var(--space-md);
  border-left: 2px solid var(--border-standard);
}

/* ---- Planes ---- */

.portada-lista-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-md);
}

.portada-plan {
  background: var(--surface-elevated);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.portada-plan--convenir { background: var(--brand-subtle); border-color: transparent; }

/* "+800" no puede ser el número más grande de la página: es la opción para la
   MINORÍA de los colegios, y el ojo va al número mayor. Se achica para que los
   tres precios manden. */
.portada-plan--convenir .portada-plan-monto { font-size: 30px; }

.portada-plan-nombre {
  margin: 0 0 var(--space-sm);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}

.portada-plan-precio { margin: 0 0 var(--space-xs); display: flex; align-items: baseline; justify-content: center; gap: 6px; }

.portada-plan-monto {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary);
}

.portada-plan-moneda { font-size: 14px; color: var(--text-secondary); }
.portada-plan-cupo { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* ---- Cierre ---- */

.portada-cierre {
  padding: clamp(48px, 7vw, 80px) 0;
  text-align: center;
  background: var(--brand-primary);
  color: #fff;
}

.portada-cierre-titulo {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--space-sm);
  color: #fff;
}

.portada-cierre-texto {
  max-width: 46ch;
  margin: 0 auto var(--space-xl);
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.6;
}

.portada-cierre .btn-primary {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
}
.portada-cierre .btn-primary:hover { background: var(--brand-subtle); color: var(--brand-active); }

/* ---- Pie ---- */

.portada-pie {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: var(--surface-elevated);
  border-top: 1px solid var(--border-subtle);
}

.portada-pie-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  justify-content: space-between;
  align-items: flex-start;
}

.portada-pie-logo { width: 44px; height: 44px; margin-bottom: var(--space-xs); }
.portada-pie-nombre { margin: 0; font-family: var(--font-serif); font-size: 19px; color: var(--text-primary); }
.portada-pie-que { margin: 0; font-size: 14px; color: var(--text-tertiary); }

.portada-pie-enlaces ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.portada-pie-enlaces a { color: var(--text-secondary); }

.portada-pie-legal {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .portada-inner { padding: 0 var(--space-md); }
  .portada-acciones { flex-direction: column; }
  .portada-cta { width: 100%; }
}

/* ==========================================================================
   FICHA DEL ALUMNO (MOR-135)
   ==========================================================================
   Reemplaza un `dl` del generador maquetado con clases de Bootstrap que esta
   app no carga — salía literalmente sin estilo. El orden de la pantalla es el
   de la secretaría: a quién llamar, cómo va, y recién después los datos.
   ========================================================================== */

.ficha { display: flex; flex-direction: column; gap: var(--space-lg); }

.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-standard);
}

.ficha-nombre {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 4px;
  color: var(--text-primary);
}

.ficha-situacion { margin: 0; color: var(--text-secondary); font-size: 15px; }
.ficha-punto { margin: 0 6px; color: var(--text-muted); }
.ficha-sin-cupo { color: var(--warning-text); }

.ficha-acciones { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ---- A quién llamar ---- */

.ficha-responsables { list-style: none; margin: 0; padding: 0; }

.ficha-responsable {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ficha-responsable:last-child { border-bottom: none; }

.ficha-responsable-nombre { font-weight: 600; color: var(--text-primary); }

.ficha-responsable-vinculo {
  margin-left: var(--space-sm);
  font-size: 13px;
  color: var(--text-tertiary);
}

.ficha-principal {
  margin-left: var(--space-sm);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-subtle);
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ficha-responsable-contacto { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* El teléfono es el dato operativo de esta pantalla: se destaca y es
   pulsable. Desde el teléfono de la secretaría, `tel:` es un toque. */
.ficha-telefono {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary);
}

.ficha-falta { color: var(--warning-text); font-size: 14px; }
.ficha-correo { font-size: 13px; color: var(--text-tertiary); }

/* ---- Cómo va ---- */

.ficha-materias { list-style: none; margin: var(--space-md) 0 0; padding: 0; }

.ficha-materia {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ficha-materia:last-child { border-bottom: none; }

.ficha-materia-nombre { color: var(--text-primary); }

.ficha-nota {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ficha-nota--aprobada { color: var(--success-text); }
.ficha-nota--aplazada { color: var(--danger-text); }

/* "Pendiente" en letras y en gris. Nunca un cero: sin nota quiere decir que el
   profesor no ha corregido, y confundirlos reprueba a un alumno por teléfono. */
.ficha-pendiente { font-size: 14px; color: var(--text-muted); font-style: italic; }

.ficha-promedio {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-standard);
  color: var(--text-secondary);
}
.ficha-promedio strong { font-size: 19px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.ficha-volver { margin: var(--space-md) 0 0; }

@media (max-width: 640px) {
  .ficha-responsable-contacto { align-items: flex-start; }
  .ficha-acciones .btn { flex: 1; }
}

/* Bloques compartidos por las fichas de grado, materia y profesor. */

.ficha-agregar { margin-top: var(--space-lg); }
.ficha-agregar-fila { display: flex; gap: var(--space-sm); align-items: stretch; margin-top: 6px; }
.ficha-agregar-fila .form-select { flex: 1; min-width: 0; }

.ficha-secciones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.ficha-seccion {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-input);
  border-radius: var(--radius-sm);
}

.ficha-seccion-nombre { font-weight: 600; }
.ficha-seccion-periodo { font-size: 13px; color: var(--text-tertiary); }

@media (max-width: 640px) {
  .ficha-agregar-fila { flex-direction: column; }
}

/* La fila de acciones de un formulario: guardar y volver, juntos y al mismo
   nivel. Antes el "Volver" vivía FUERA del formulario, en un `div.mt-3` —clase
   de Bootstrap que esta app no carga—, así que caía debajo y sin separación,
   como si fuera otra cosa. */
.form-acciones {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
  .form-acciones { flex-direction: column-reverse; align-items: stretch; }
}

/* El bloque de borrado: separado del formulario y con su propio encabezado,
   porque no es "un botón más" de la pantalla de edición.
   Neutro, como el botón — ver la nota en `.btn-danger`. */
.borrar {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  background: var(--surface-input);
}

.borrar--imposible { border-color: var(--border-standard); }

.borrar-titulo {
  margin: 0 0 var(--space-xs);
  font-size: 16px;
  color: var(--text-primary);
}
.borrar--imposible .borrar-titulo { color: var(--text-secondary); }

.borrar-aviso { margin: 0 0 var(--space-md); font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.borrar-aviso:last-child { margin-bottom: 0; }

/* La ÚNICA parte roja del bloque, y la que la regla sí permite: la frase que
   nombra lo que se perdería. Ahí el rojo no adorna un control — describe un
   dato que va a dejar de existir. */
.borrar-consecuencia {
  color: var(--danger-text);
  font-weight: 500;
}

/* El grupo plegable del menú (MOR-135). `<details>` nativo: sin JavaScript,
   con teclado, y sin estado que se pueda desincronizar. */
.sidebar-plegable { margin-bottom: var(--space-lg); }

.sidebar-plegable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  user-select: none;
}
.sidebar-plegable > summary::-webkit-details-marker { display: none; }

/* El triángulo lo dibujamos nosotros para que gire: el nativo no se puede
   animar ni recolorear de forma consistente entre navegadores. */
.sidebar-plegable > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--transition-fast);
}
.sidebar-plegable[open] > summary::before { transform: rotate(90deg); }

.sidebar-plegable > summary:hover { color: var(--brand-primary); }
.sidebar-plegable > summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* La fila del listado es el enlace (MOR-135).
   Antes cada fila terminaba en una columna "Acciones" con botones de 40 px.
   Ahora el destino es el NOMBRE, que es un objetivo mucho más grande y el
   lugar donde el ojo ya estaba. */
.table-academic tbody td:first-child a {
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}

.table-academic tbody td:first-child a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* La fila entera reacciona, para que se note que es tocable antes de tocarla. */
.table-academic tbody tr:hover { background: var(--surface-hover); }

/* Un encabezado que es lo ÚNICO de su tarjeta no necesita separarse de nada:
   su margen y su filete dibujaban un hueco vacío debajo del título, en toda
   pantalla que arranca con "título + botón" y nada más. */
.card-academic-header:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ==========================================================================
   CHIP DE ESTADO (MOR-135 · la regla de color)
   ==========================================================================
   El único lugar del panel del colegio donde un color semántico envuelve algo
   que no es un número. Existe porque había dos parches sueltos:

     · `enrollments/index` pintaba el ámbar **a mano** (`#f57f17`), fuera del
       sistema de tokens.
     · `dashboards/estudiante` usaba `.status-badge.status-pendiente`, dos
       clases que **no existen en ninguna hoja**, con un `style` inline que
       las pintaba de VERDE. El nombre decía "pendiente" y el color decía
       "aprobado".

   Los modificadores se llaman por lo que SIGNIFICAN, no por su color: el día
   que el verde cambie de tono, `--al-dia` sigue queriendo decir lo mismo.

   Y "retirado" es `--inactivo`, gris, no ámbar: un alumno que se fue del
   colegio es un HECHO, no una alerta. El ámbar dice "haz algo con esto".
   ========================================================================== */

.estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.estado--al-dia   { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.estado--atencion { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.estado--grave    { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.estado--inactivo { background: var(--surface-input); color: var(--text-tertiary); border-color: var(--border-standard); }

/* Los avisos, en el tema oscuro del panel de SIGA (MOR-135).
   ─────────────────────────────────────────────────────────
   `.alert-success` y `.alert-danger` están escritas para el papel crema del
   colegio: fondo verde claro, texto verde oscuro. Sobre el panel oscuro
   aparecían como un rectángulo blanco pegado encima — la única parte clara de
   la pantalla, y encima la más grande.

   La regla de color se sostiene igual: el aviso sigue diciendo qué pasó con un
   color semántico. Lo que cambia es el sustrato, no el significado. */
.siga-admin .alert {
  background: var(--siga-panel);
  border: 1px solid var(--siga-borde);
  color: var(--siga-texto);
  border-left-width: 3px;
}

.siga-admin .alert-success { border-left-color: var(--siga-ok); }
.siga-admin .alert-danger  { border-left-color: var(--siga-mal); }
.siga-admin .alert-warning { border-left-color: var(--siga-alerta); }

/* ==========================================================================
   PANTALLAS DE ACCESO (MOR-135)
   ==========================================================================
   Login, "olvidé mi contraseña" y "elegir contraseña nueva" compartían seis
   estilos IDÉNTICOS escritos en línea, uno por vista. Tres copias de lo mismo
   es el momento exacto en que se vuelven tres cosas distintas: alguien toca
   una y las otras dos quedan atrás sin que nadie lo note.

   Es la segunda superficie más vista del sistema después de la portada, y la
   primera que ve un profesor cada mañana.
   ========================================================================== */

.acceso {
  max-width: 480px;
  margin: var(--space-2xl) auto;
}

.acceso-titulo {
  text-align: center;
  margin: 0 0 var(--space-md);
}

.acceso-entrada {
  text-align: center;
  color: var(--text-secondary);
  margin: 0 0 var(--space-xl);
}

/* Botón a lo ancho: en el teléfono es el objetivo más grande de la pantalla, y
   acá no compite con nada. */
.acceso-enviar { width: 100%; }

.acceso-pie {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-size: 14px;
}

.acceso-enlaces {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* "Recordarme": la etiqueta ENTERA es el objetivo, no la casilla de 16 px. */
.acceso-recordarme {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.acceso-recordarme input { margin: 0; }

/* La entradilla bajo el título de una pantalla: dice para qué sirve, en el
   único renglón donde alguien la va a leer. */
.entrada-pagina {
  color: var(--text-secondary);
  margin: 0 0 var(--space-xl);
}

/* Un `.form-group` cuyo contenido es un botón que debe alinearse con los
   campos de al lado, no con sus etiquetas. */
.form-group--boton {
  display: flex;
  align-items: flex-end;
}

/* Lo que hay que atender, en el panel del director (MOR-135).
   ─────────────────────────────────────────────────────────
   Cada renglón enlaza a donde se resuelve: un número sin destino es una
   preocupación, no una tarea. El número va grande porque es lo que se escanea;
   la frase, al lado, porque es lo que se lee al detenerse. */
.pendientes { list-style: none; margin: 0; padding: 0; }

.pendiente { border-bottom: 1px solid var(--border-subtle); }
.pendiente:last-child { border-bottom: none; }

.pendiente-enlace {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  color: var(--text-primary);
  text-decoration: none;
}
.pendiente-enlace:hover { color: var(--brand-primary); }
.pendiente-enlace:hover .pendiente-que { text-decoration: underline; }

/* Ámbar, no rojo: son cosas por hacer, no un colegio en llamas. El rojo de
   este sistema significa "un niño aplazado" — ver la regla de color. */
.pendiente-numero {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--warning-text);
  min-width: 2.5ch;
  text-align: right;
}

.pendiente-que { color: var(--text-secondary); }

/* Lo que al profesor le falta corregir (MOR-135). Es lo primero de su panel
   porque es a lo que entra: semanal, con apuro, desde el teléfono. */
.por-corregir { list-style: none; margin: 0; padding: 0; }

.por-corregir-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.por-corregir-fila:last-child { border-bottom: none; }

.por-corregir-que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.por-corregir-nombre { font-weight: 600; color: var(--text-primary); }
.por-corregir-donde { font-size: 13px; color: var(--text-tertiary); }

.por-corregir-avance { display: flex; align-items: center; gap: var(--space-md); }

/* En letras y no una barra: "12 de 20" contesta cuántas faltan, que es la
   pregunta. Una barra contesta "60 %", que no lo es. */
.por-corregir-cuenta {
  font-size: 14px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .por-corregir-avance { width: 100%; justify-content: space-between; }
}

/* Las dos formas del grupo de configuración (MOR-135).
   ───────────────────────────────────────────────────
   En escritorio va plegado en un `<details>`; en la tira del teléfono va
   plano, porque un `<details>` que crece hacia abajo dentro de un deslizador
   horizontal con `overflow-y: hidden` deja sus enlaces recortados e
   inalcanzables. Ver la nota del sidebar.

   Se apagan con `display: none` y no con `hidden`/`visibility`, para que el
   apagado no ocupe lugar en la maqueta. */
.solo-telefono { display: none; }

@media (max-width: 768px) {
  .solo-escritorio { display: none; }
  .solo-telefono { display: block; }
}

/* La firma escaneada, en la pantalla de identidad del colegio. */
.identidad-firma {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.identidad-firma-imagen { max-width: 220px; max-height: 70px; object-fit: contain; }

.identidad-sello-imagen { max-width: 110px; max-height: 110px; object-fit: contain; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */