/* ═══════════════════════════════════════════════════════════
   SuperEscuela ADM — registro académico docente

   Misma identidad que los sitios de web/: la paleta, Archivo y el
   motivo de caminos del conocimiento salen de web/com/assets/css/style.css.
   Se copia en vez de compartirse porque cada sistema se despliega solo;
   si cambian los tokens de marca hay que tocar los dos archivos.

   Diferencia deliberada con los sitios: esto es una herramienta de
   registro, no una página. El motivo de color vive en la cabecera y en
   los estados; la superficie de trabajo — asistencia y notas — se queda
   callada y densa. Cada adorno dentro de la rejilla es fricción.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Paleta de marca — idéntica a web/com */
  --azul:       #002B7F;
  --celeste:    #74ACDF;
  --rojo:       #CE1126;
  --amarillo:   #FCD116;
  --verde:      #006847;

  --azul-hondo: #001B52;
  --texto:      #26355C;
  --gris:       #5A6C90;
  --nieve:      #F2F6FC;
  --nieve-2:    #E1EAF7;
  --borde:      #D6E1F2;

  /* Tintes de trabajo: fondos suaves para los estados de la rejilla */
  --verde-piel:    #E8F3EC;
  --verde-borde:   #B4D8C0;
  --celeste-piel:  #E8F1FB;
  --celeste-borde: #BCD6EF;
  --amarillo-piel: #FDF4D6;
  --amarillo-borde:#F0DA95;
  --rojo-piel:     #FBE9EB;
  --rojo-borde:    #EFB3BA;

  --radio:   14px;
  --radio-s: 10px;

  /* Alias heredados: el JS y las clases existentes siguen usándolos. */
  --se-primary:      var(--azul);
  --se-primary-dark: var(--azul-hondo);
  --se-secondary:    var(--amarillo);
  --se-danger:       var(--rojo);
  --se-bg:           var(--nieve);
  --se-border:       var(--borde);
}

body {
  background: var(--se-bg);
  color: var(--texto);
  font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
}

/* El eje de ancho de Archivo es el recurso tipográfico de la marca:
   titulares expandidos, texto corrido a 100. */
h1, h2, h3 {
  font-variation-settings: "wdth" 112, "wght" 700;
  color: var(--azul);
  letter-spacing: -0.01em;
}

/* ── Cabecera: el único lugar donde el motivo de caminos aparece ──
   Bandas de distinto grosor que suben de izquierda a derecha. No es una
   bandera ni un arcoíris: los grosores cambian y el azul domina. */
.se-marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.se-marca__logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.se-marca__nombre {
  font-variation-settings: "wdth" 115, "wght" 800;
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--azul);
}

.se-marca__nombre em {
  font-style: normal;
  color: var(--rojo);
}

.se-marca__lema {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-variation-settings: "wght" 600;
  color: var(--gris);
  letter-spacing: 0.04em;
}

.se-caminos {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--azul)     0 34%,
    var(--celeste) 34% 52%,
    var(--rojo)    52% 68%,
    var(--amarillo)68% 82%,
    var(--verde)   82% 100%);
}

.se-card {
  border: 1px solid var(--se-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 43, 127, 0.08);
}

/* El relleno lateral de las tarjetas del documento, en un solo lugar: la rejilla
   se sale con un margen negativo que tiene que valer exactamente esto. */
#appSection .se-card:not(.se-modal-card) {
  padding-left: var(--se-card-pad, 16px);
  padding-right: var(--se-card-pad, 16px);
}

.se-btn {
  border-radius: 10px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.se-btn-primary {
  background: var(--se-primary);
  color: #fff;
}

.se-btn-primary:hover {
  background: var(--se-primary-dark);
}

.se-btn-secondary {
  background: var(--nieve);
  color: var(--azul);
  border: 1px solid var(--celeste);
}

.se-btn-secondary:hover {
  background: var(--nieve-2);
}

.se-btn-danger {
  background: var(--rojo-piel);
  color: var(--rojo);
  border: 1px solid var(--rojo-borde);
}

.se-inline-add {
  width: 34px;
  height: 34px;
  /* No se encogen: en la fila de tres columnas el select cede espacio, los
     botones no — si se estrechan, el + y el ✎ dejan de ser tocables. */
  flex: 0 0 34px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--se-primary);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.se-inline-add[aria-expanded="true"] {
  background: var(--se-primary);
  color: #fff;
  border-color: var(--se-primary);
}

.se-inline-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.se-inline-add-pulse-double {
  animation: se-inline-add-double-pulse 0.9s ease-out 1;
}

@keyframes se-inline-add-double-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 43, 127, 0);
  }
  15% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(0, 43, 127, 0.18);
  }
  30% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 43, 127, 0);
  }
  55% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 43, 127, 0);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(0, 43, 127, 0.18);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 43, 127, 0);
  }
}

.se-form-actions {
  display: flex;
  gap: 8px;
}

.se-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, 0.3);
  padding: 12px;
}

.se-modal-card {
  width: 100%;
  padding: 16px;
}

.se-modal-card-md {
  max-width: 36rem;
}

.se-modal-card-lg {
  max-width: 42rem;
}

.se-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .se-modal {
    align-items: center;
  }
}

.se-input,
.se-select {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}

.se-input:focus,
.se-select:focus {
  outline: 2px solid rgba(0, 43, 127, 0.3);
  border-color: var(--se-primary);
}

.table-scroll {
  overflow: auto;
  border: 1px solid var(--borde);
  border-radius: 12px;
}

.table-compact {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 13px;
}

.table-compact th,
.table-compact td {
  border-bottom: 1px solid var(--nieve-2);
  padding: 8px;
  vertical-align: middle;
}

.table-compact th {
  background: var(--nieve);
  font-weight: 700;
  color: var(--azul);
}

.attendance-week-table th,
.attendance-week-table td {
  padding: 6px 6px;
  white-space: nowrap;
  text-align: center;
}

.attendance-week-table th:not(.sticky-col-header),
.attendance-week-table td:not(.sticky-col) {
  width: 1%;
}

/* "lun, 25/05" en escritorio. La coma la pone el CSS para poder quitarla cuando
   las dos partes se apilan. */
.col-dia::after {
  content: ", ";
}

.attendance-week-table .sticky-col,
.attendance-week-table .sticky-col-header {
  text-align: left;
}

.attendance-week-table .sticky-col,
.attendance-week-table .sticky-col-header {
  width: 1%;
  white-space: nowrap;
}

.grade-summary-table th,
.grade-summary-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: top;
}

/* Al encoger, la columna se ajusta a lo que mida su contenido: número y nombre
   de pila. Sin `max-width` a propósito — un tope fijo dejaba la cabecera más
   angosta que sus propios botones, y el `+` y el `»` se montaban sobre el primer
   rubro. Lo que ahorra espacio es el texto más corto, no recortar la celda. */
.grade-summary-table .sticky-col.is-compact,
.grade-summary-table .sticky-col-header.is-compact {
  width: 1%;
}

.grade-summary-table th:not(.sticky-col-header),
.grade-summary-table td:not(.sticky-col) {
  width: 1%;
}

.grade-summary-table .sticky-col,
.grade-summary-table .sticky-col-header {
  text-align: left;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid var(--nieve-2);
}

.sticky-col-header {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--nieve);
  border-right: 1px solid var(--borde);
}

.status-P {
  background: var(--verde-piel);
  border-color: var(--verde-borde);
  color: var(--verde);
}

.status-J {
  background: var(--celeste-piel);
  border-color: var(--celeste-borde);
  color: var(--azul);
}

.status-T {
  background: var(--amarillo-piel);
  border-color: var(--amarillo-borde);
  color: #6B5200;
}

.status-A {
  background: var(--rojo-piel);
  border-color: var(--rojo-borde);
  color: var(--rojo);
}

.status-cell-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  font-weight: 700;
}

.tab-btn {
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--texto);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.subtab-btn {
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--texto);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.tab-btn.active {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}

.subtab-btn.active {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}

.toast-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #fff;
  border-left: 4px solid var(--azul);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 220px;
  max-width: 360px;
  font-size: 13px;
}

.toast.error {
  border-left-color: var(--rojo);
}

.grade-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 120px;
}

.grade-summary-header__text {
  min-width: 0;
  text-align: left;
}

.grade-summary-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.grade-summary-drag-handle {
  cursor: grab;
}

.grade-summary-drag-handle.is-dragging {
  cursor: grabbing;
  opacity: 0.55;
}

.grade-summary-table th[data-drop-assignment] {
  position: relative;
}

.grade-summary-table th.is-drag-over-before::before,
.grade-summary-table th.is-drag-over-after::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--se-primary);
}

.grade-summary-table th.is-drag-over-before::before {
  left: -2px;
}

.grade-summary-table th.is-drag-over-after::after {
  right: -2px;
}

.hidden {
  display: none !important;
}

/* El ✎ y el ⇆ al lado del texto obligan a cada columna de rubro a ser el doble
   de ancha de lo que pide el título. Fuera del escritorio bajan a su propia
   línea y la cabecera se encoge a lo que ocupe el texto. El corte es el mismo
   que usa el layout para pasar a una sola columna. */
@media (max-width: 1024px) {
  /* Fuera del escritorio el ancho es el recurso escaso, y el relleno lateral de
     las tarjetas anidadas se lo comía: 16 px por nivel, dos niveles, 32 px de
     una pantalla de 390. Baja a 8, lo justo para que las etiquetas y los select
     no toquen el borde.
     El relleno tiene un solo dueño —la variable— porque el margen negativo de la
     rejilla, más abajo, tiene que valer exactamente lo mismo. */
  :root {
    --se-card-pad: 8px;
  }

  #appSection {
    padding-left: 0;
    padding-right: 0;
  }

  /* Solo las tarjetas del documento pierden sus bordes laterales para llegar a
     los extremos. Los modales flotan sobre la página: se marcan por su rol, no
     por lo hondo que estén anidados — antes esta regla los alcanzaba y les
     quitaba las esquinas redondeadas sin que nadie lo pidiera. */
  #appSection .se-card:not(.se-modal-card) {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* La tarjeta exterior envuelve toda la aplicación: su relleno solo empuja
     hacia adentro lo que ya tiene el suyo. El `:not()` no sobra — sin él esta
     regla pierde por especificidad contra la que define el relleno. */
  #appSection > .se-card:not(.se-modal-card) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Y la rejilla se sale incluso de esos 8 px: es la única que de verdad
     necesita cada píxel.
     Además, el desplazamiento horizontal —cuando hace falta— pasa a ser el de la
     página. Metido en la tarjeta, había que bajar hasta el pie de la tabla para
     encontrar la barra. La primera columna sigue fija, ahora contra la ventana. */
  #appSection .se-card > .table-scroll {
    margin-left: calc(var(--se-card-pad) * -1);
    margin-right: calc(var(--se-card-pad) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    overflow: visible;
  }

  /* Al desplazar a la derecha, el fondo blanco terminaba en el ancho de la
     ventana y los últimos botones quedaban sobre el gris de la página. La
     tarjeta que contiene una rejilla crece con ella.
     La tabla tiene que dejar de medirse en `width: 100%` antes de eso: el 100%
     de una tarjeta que a su vez se mide por su contenido es circular, y Chrome
     lo resolvía inflando cada columna a 2820 px. */
  #appSection .se-card--tabla .table-compact {
    width: max-content;
    min-width: 100%;
  }

  #appSection .se-card--tabla {
    min-width: max-content;
  }

  /* Lo que no es la rejilla no participa de ese `max-content`: sin tope, una
     frase de estado vacío estiraría la tarjeta ella sola. `100vw` se resuelve
     contra la ventana, no contra la tarjeta que estamos midiendo. */
  #appSection .se-card--tabla > *:not(.table-scroll),
  #appSection .se-card--tabla > .table-scroll > *:not(table) {
    max-width: 100vw;
  }

  .grade-summary-header {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
  }

  .grade-summary-header__actions {
    justify-content: flex-start;
    gap: 2px;
  }

  /* Ya no compiten con el título por el ancho, pero seguían midiendo como un
     botón de formulario. Acá solo tienen que ser reconocibles y tocables: se
     recorta sobre todo el ancho, que es lo que le cuesta a la columna, y se
     sostiene la altura mínima para que el dedo siga acertando. */
  .grade-summary-header__actions .se-btn {
    padding: 2px 5px;
    font-size: 11px;
    line-height: 1.2;
    border-radius: 8px;
    min-height: 24px;
  }

  /* El `nowrap` de la tabla obligaba a que "Examen Parcial 2" cupiera en una
     línea, y esa línea fijaba el ancho de la columna. Que parta en varias:
     la columna la decide el contenido de las celdas, no el título. */
  .grade-summary-header__text,
  .grade-summary-table .grade-summary-total-header {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    max-width: 88px;
  }
}

@media (max-width: 768px) {
  /* "Anterior · Semana 21 (25-Mayo - 29-Mayo) · Siguiente" no cabe, y al partir
     dejaba "Siguiente" solo en una segunda línea, lejos de su pareja. Se queda
     en una sola: los botones ceden relleno y la etiqueta se encoge. */
  .se-week-nav {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .se-week-nav .se-btn {
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .se-week-nav > div {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
  }

  /* Siete columnas en el ancho de un teléfono dejan ~24 px por celda, y los
     steppers del input numérico se los comían enteros: el dígito no se veía. Se
     ocultan —para 0–15 el teclado numérico es más rápido que la flecha— y se
     recorta el relleno. */
  #courseDayOverrides th,
  #courseDayOverrides td {
    padding-left: 2px;
    padding-right: 2px;
  }

  #courseDayOverrides input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
    padding-left: 2px;
    padding-right: 2px;
    min-width: 0;
  }

  #courseDayOverrides input[type="number"]::-webkit-outer-spin-button,
  #courseDayOverrides input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Los círculos de 34 px de `+` y `✎` compiten con las columnas de datos.
     Dentro de las tablas se reducen a la mitad del área y siguen por encima
     del mínimo tocable. */
  .se-inline-add-mini {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 14px;
  }

  /* En vertical, el ancho de la rejilla es todo. Las celdas de P/J/T/A son la
     mayor parte, así que cada píxel que sobra ahí es un día más que cabe sin
     desplazar. 22 px sigue siendo tocable con el dedo. */
  .status-cell-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 11px;
    border-width: 1px;
  }

  .attendance-week-table th,
  .attendance-week-table td {
    padding: 4px 2px;
  }

  .attendance-week-table td .inline-flex {
    gap: 1px;
  }

  /* El encabezado en una línea pedía ~70 px por columna, más del doble de lo que
     ocupan dos botones. Apilado, la columna la deciden los botones. */
  .attendance-week-table th .col-dia,
  .attendance-week-table th .col-fecha {
    display: block;
    line-height: 1.15;
  }

  .attendance-week-table th .col-dia::after {
    content: none;
  }

  .table-compact {
    min-width: 0;
    font-size: 12px;
  }

  .attendance-week-table .sticky-col,
  .attendance-week-table .sticky-col-header {
    max-width: 120px;
    white-space: normal;
    line-height: 1.2;
  }
}

/* ─── La versión del build ────────────────────────────────────────────
   No es información para la docente: es para cuando hay que averiguar si el
   navegador está sirviendo el JS viejo. Se queda en el DOM —con su texto— y
   fuera de la vista.

   Para verla sin abrir el inspector, basta con pedir la página con el
   fragmento: https://superescuela.com/adm/#appBuildDebug   (:target la
   muestra). El mismo dato está también en <html data-adm-build> y en la
   consola, así que hay tres maneras y ninguna ocupa espacio en pantalla. */
#appBuildDebug {
  display: none;
}

#appBuildDebug:target {
  display: block;
}