/* ==========================================================================
   Redfy Host · Gabriela Mistral — HOJA DE ESTILOS ÚNICA (assets/estilos.css)
   --------------------------------------------------------------------------
   Todo el sitio usa solo este archivo: páginas, ventanas (modales), portal de
   familias, acceso e impresión. Cada página se identifica con una clase en
   <html> (por ejemplo .pg-alumnos, .pg-informes) que pone page_class() en
   includes/bootstrap.php; así los estilos propios de una página no alcanzan
   a las demás.

   ÍNDICE
   1-2. Fuentes, variables (colores, tipografía, botones) y sistema base:
      estructura, botones, paneles, tablas, formularios,
      insignias, alertas, ventanas, acceso, consola global, portal de familias,
      credenciales, inscripciones, asistencia y ajustes por módulo
   3. Navegación por secciones y correcciones generales del panel escolar
   4. Selector de alumno (reportes y citatorios)
   5. Páginas: Alumnos, Expediente, Tutores, Inscripciones, Organización
      académica, Horarios, Calificaciones, Actas, Informes, Regularización,
      Reportes y citatorios, Usuarios, Llaveros, Horario del grupo
   6. Portal de familias
   7. Botones, lectura y ventanas: criterios comunes a todo el sitio
   Las reglas de impresión (@media print) están junto a la página que imprimen.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Geist:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");

/* =========================================================================
   1-2. VARIABLES Y SISTEMA BASE — estructura, componentes y módulos
   ========================================================================= */ 

/* ==========================================================================
   AulaSimple — Dimension design system
   Dusk-lit workspace with frosted glass panels.
   Void canvas, pill silhouettes, hairline edges. No shadows for elevation.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Colors */
  --color-void-canvas: #0a0a0a;
  --color-graphite: #161616;
  --color-frosted-glass: #d4d4d4;
  --color-ink-black: #000000;
  --color-snow-white: #ffffff;
  --color-bone: #f4f4f5;
  --color-ash: #dcdcdc;
  --color-slate: #a9a9a9;
  --color-smoke: #cfcfcf;
  --color-hairline: #e5e5e5;
  --color-dusk-violet: #6b62f2;
  --gradient-dusk-violet: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 40%,
    rgba(107, 98, 242, 0.565) 50%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0)
  );
  --gradient-hero-horizon: linear-gradient(
    103deg,
    #f5b064 0%,
    #ef8354 26%,
    #c9645f 46%,
    #6a5f9e 66%,
    #3563cf 86%,
    #2f6ee0 100%
  );
  --gradient-radial-spotlight: radial-gradient(120% 70% at 50% -10%, rgba(107, 98, 242, 0.16), rgba(10, 10, 10, 0) 70%);

  /* Working translucencies derived from the hairline and frosted tokens */
  --edge-hairline: rgba(229, 229, 229, 0.2);
  --edge-hairline-strong: rgba(229, 229, 229, 0.36);
  --surface-frosted: rgba(212, 212, 212, 0.1);
  --surface-frosted-soft: rgba(212, 212, 212, 0.06);
  --shadow-subtle: rgba(255, 255, 255, 0.1) 0 0 0 1px inset;

  /* Typography */
  --font-dm-sans:
    "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist:
    "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: 0.33px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --text-heading: 36px;
  --leading-heading: 1.11;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.52px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;

  /* Layout */
  --page-max-width: 1200px;
  --card-padding: 28px;
  --sidebar-width: 264px;

  /* Radius */
  --radius-icons: 4px;
  --radius-ui: 10px;
  --radius-nav: 19px;
  --radius-cards: 24px;
  --radius-largecards: 40px;
  --radius-panels: 42px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-void-canvas: #0a0a0a;
  --surface-graphite: #161616;
  --surface-snow-white: #ffffff;
  /*  Botones: un color por tipo de acción  */
  --accion: #2563eb;
  --accion-hover: #1d4ed8;
  --accion-texto: #ffffff;
  --boton-2: #262b35;
  --boton-2-hover: #323948;
  --boton-2-borde: #737d91;
  --boton-2-borde-hover: #aab3c5;
  --peligro: #c62828;
  --peligro-hover: #a51f1f;
  --foco: #93c5fd;
  --boton-alto: 46px;
  --boton-radio: 12px;
}

/* Ajustes de distribución 2026-09: listados y formularios operativos */
.students-list-panel .table-wrap,
.bulk-preview-table-wrap,
.tutor-list-panel .table-wrap {
  overflow-x: auto;
}
.students-list-panel table {
  table-layout: fixed;
  min-width: 1080px;
}
.students-list-panel th:nth-child(1),
.students-list-panel td:nth-child(1) {
  width: 54px;
  text-align: center;
}
.students-list-panel th:nth-child(2),
.students-list-panel td:nth-child(2) {
  width: 126px;
}
.students-list-panel th:nth-child(3),
.students-list-panel td:nth-child(3) {
  width: 190px;
}
.students-list-panel th:nth-child(4),
.students-list-panel td:nth-child(4) {
  width: 68px;
  text-align: center;
}
.students-list-panel th:nth-child(5),
.students-list-panel td:nth-child(5) {
  width: 250px;
}
.students-list-panel th:nth-child(6),
.students-list-panel td:nth-child(6) {
  width: 245px;
}
.students-list-panel th:nth-child(7),
.students-list-panel td:nth-child(7) {
  width: 72px;
  text-align: center;
}
.students-list-panel th:last-child,
.students-list-panel td:last-child {
  width: 116px;
  text-align: right;
}
.students-list-panel td {
  vertical-align: middle;
}
.student-name-cell b {
  display: block;
  line-height: 1.35;
}
.student-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-import-guide,
.bulk-upload-panel,
.bulk-preview-panel {
  max-width: 100%;
  box-sizing: border-box;
}
.bulk-import-columns {
  grid-template-columns: 70px 140px 190px 70px minmax(220px, 1.4fr) minmax(240px, 1.2fr) 80px;
  align-items: stretch;
}
.bulk-import-columns span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
}
.bulk-preview-table {
  table-layout: fixed;
  min-width: 1260px;
}
.bulk-preview-table th,
.bulk-preview-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.bulk-preview-table th:nth-child(1) {
  width: 60px;
}
.bulk-preview-table th:nth-child(2) {
  width: 64px;
}
.bulk-preview-table th:nth-child(3) {
  width: 130px;
}
.bulk-preview-table th:nth-child(4) {
  width: 190px;
}
.bulk-preview-table th:nth-child(5) {
  width: 64px;
}
.bulk-preview-table th:nth-child(6) {
  width: 250px;
}
.bulk-preview-table th:nth-child(7) {
  width: 250px;
}
.bulk-preview-table th:nth-child(8) {
  width: 70px;
}
.bulk-preview-table th:nth-child(9) {
  width: 180px;
}

#enroll {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
}
#enrollmentForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 24px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  align-items: start;
}
#enrollmentForm .dialog-head,
#enrollmentForm .wide,
#enrollmentForm .form-actions {
  grid-column: 1/-1;
}
#enrollmentForm label {
  min-width: 0;
  margin: 0;
}
#enrollmentForm .subject-preview {
  margin: 2px 0 0;
}
#enrollmentForm .student-selector-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 16px;
}
#enrollmentForm .student-list,
#enrollmentForm .selected-students-list {
  height: 330px;
  min-height: 330px;
  overflow: auto;
}
#enrollmentForm .student-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
}
#enrollmentForm .student-information {
  min-width: 0;
}
#enrollmentForm .student-information strong {
  display: block;
  white-space: normal;
  line-height: 1.3;
}

.tutor-table {
  table-layout: fixed;
  min-width: 940px;
}
.tutor-table th:nth-child(1) {
  width: 24%;
}
.tutor-table th:nth-child(2) {
  width: 13%;
}
.tutor-table th:nth-child(3) {
  width: 22%;
}
.tutor-table th:nth-child(4) {
  width: 31%;
}
.tutor-table th:nth-child(5) {
  width: 10%;
}
.tutor-table td {
  vertical-align: top;
}
.tutor-name-cell,
.tutor-contact-cell,
.linked-students {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.linked-students span {
  padding: 5px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #f8fafc;
  line-height: 1.3;
}
.linked-students em {
  color: var(--muted, #64748b);
  font-style: normal;
}
.tutor-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
}
.tutor-dialog > form {
  padding: 24px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tutor-student-picker {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px 14px;
  padding: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: #f8fafc;
}
.tutor-student-picker label {
  align-self: end;
}
.tutor-student-picker input,
.tutor-student-picker select {
  width: 100%;
}
.tutor-student-picker small {
  grid-column: 1/-1;
}

.attendance-view-switch {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  margin: 0 0 18px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #f5f7fa;
}
.attendance-view-switch a {
  padding: 9px 14px;
  border-radius: 8px;
  color: #526071;
  font-weight: 700;
  text-decoration: none;
}
.attendance-view-switch a.active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.teacher-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.teacher-directory {
  position: sticky;
  top: 20px;
  padding: 14px;
}
.teacher-directory input {
  width: 100%;
  margin-bottom: 10px;
}
.teacher-directory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 560px;
  overflow: auto;
}
.teacher-directory-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.teacher-directory-list a:hover,
.teacher-directory-list a.active {
  background: #eff6ff;
  color: #1d4ed8;
}
.teacher-directory-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-main {
  min-width: 0;
}
.teacher-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.teacher-filters .form-actions {
  margin: 0;
}
.teacher-summary {
  margin-top: 18px;
}

@media (max-width: 900px) {
  #enrollmentForm {
    grid-template-columns: 1fr 1fr;
  }
  #enrollmentForm .student-selector-grid,
  .teacher-workspace {
    grid-template-columns: 1fr;
  }
  .teacher-directory {
    position: static;
  }
  .teacher-filters {
    grid-template-columns: 1fr 1fr;
  }
  .bulk-import-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #enrollmentForm,
  .tutor-dialog > form,
  .teacher-filters {
    grid-template-columns: 1fr;
  }
  #enrollmentForm > label {
    grid-column: 1/-1;
  }
  .tutor-student-picker {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  background: var(--surface-void-canvas);
  color: var(--color-bone);
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

a:hover {
  color: var(--color-snow-white);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  height: 1px;
  border: 0;
  background: var(--edge-hairline);
}

:focus-visible {
  outline: 1px solid var(--color-hairline);
  outline-offset: 2px;
}

::selection {
  background: rgba(107, 98, 242, 0.42);
  color: var(--color-snow-white);
}

::placeholder {
  color: var(--color-slate);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(212, 212, 212, 0.14);
  border-radius: var(--radius-buttons);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 212, 212, 0.24);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Typography — DM Sans reads, Geist anchors
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-geist);
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

h1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
}

h2 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-medium);
}

h4,
h5,
h6 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-medium);
}

p {
  color: var(--color-ash);
}

small {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

b,
strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-caption);
  color: var(--color-bone);
}

/* Small UI labels — DM Sans with the +0.025em tracking of the UI scale. */
.attendance-eyebrow,
.global-eyebrow,
.student-label,
.student-section-title,
.field-label {
  display: block;
  font-family: var(--font-dm-sans);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
  margin-bottom: var(--spacing-12);
}

/* --------------------------------------------------------------------------
   App shell — floating panels on the void canvas
   -------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 620px;
  background: var(--gradient-radial-spotlight);
  pointer-events: none;
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--spacing-16);
  min-height: 100vh;
  padding: var(--spacing-16);
}

.app.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

/* Sidebar — an elevated graphite panel that floats off every edge. */
.side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  position: sticky;
  top: var(--spacing-16);
  height: calc(100vh - var(--spacing-32));
  padding: var(--spacing-20);
  background: var(--surface-graphite);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app.sidebar-collapsed .side {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  padding-bottom: var(--spacing-4);
}

.brand b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--color-snow-white);
  color: var(--color-graphite);
  border-radius: var(--radius-ui);
  font-family: var(--font-dm-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  overflow: hidden;
}

.brand b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--font-dm-sans);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-bone);
}

.brand span small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.side nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  flex: 1;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.nav-section > small {
  padding: 0 var(--spacing-12) var(--spacing-6);
  font-family: var(--font-dm-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

/* Every nav item is a pill — the system's defining silhouette. */
.side nav a {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  padding: var(--spacing-8) var(--spacing-14);
  border-radius: var(--radius-buttons);
  font-family: var(--font-dm-sans);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--color-ash);
  transition:
    background 160ms ease,
    color 160ms ease;
}

.side nav a i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--radius-icons);
  background: var(--surface-frosted);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--font-weight-medium);
  color: var(--color-smoke);
}

.side nav a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side nav a:hover {
  background: var(--surface-frosted-soft);
  color: var(--color-snow-white);
}

.side nav a.active {
  background: var(--color-snow-white);
  color: var(--color-graphite);
}

.side nav a.active i {
  background: rgba(22, 22, 22, 0.1);
  color: var(--color-graphite);
}

.cycle {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-16);
  background: var(--surface-frosted);
  border-radius: var(--radius-ui);
}

.cycle small {
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.cycle b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

/* Main column ------------------------------------------------------------ */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: var(--spacing-48);
}

/* The floating frosted nav — detached, glass-like, never flush to the edge. */
.main > header {
  position: sticky;
  top: var(--spacing-16);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
  padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-20);
  background: rgba(22, 22, 22, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-subtle);
}

.main > header > div:first-of-type {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.main > header small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.main > header h1 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#menu {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  font-size: 14px;
  color: var(--color-smoke);
}

#menu:hover {
  border-color: var(--edge-hairline-strong);
  color: var(--color-snow-white);
}

.main > header .user {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.main > header .user > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--surface-frosted);
  color: var(--color-bone);
  border-radius: var(--radius-buttons);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.main > header .user > div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.main > header .user > div b {
  font-family: var(--font-dm-sans);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.main > header .user > div small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

/* The theme toggle is retired — Dimension is a dark system. */
.theme-toggle,
.theme-toggle-floating {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Botones — grandes, con texto claro y un color por tipo de acción
   azul = acción principal · gris con borde = secundaria · rojo = eliminar
   -------------------------------------------------------------------------- */

.btn,
.btn-back,
.attendance-primary,
.attendance-secondary,
.attendance-danger,
.student-action,
.pagination-control,
.logout-button,
.back-link,
button.primary,
button.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--boton-alto);
  height: auto;
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--boton-radio);
  font-family: var(--font-dm-sans);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

/* Acción principal: azul lleno con letra blanca. */
.btn.primary,
.attendance-primary,
button.primary {
  background: var(--accion);
  color: var(--accion-texto);
  border-color: var(--accion);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.btn.primary:hover,
.attendance-primary:hover,
button.primary:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
  color: var(--accion-texto);
}

/* Acción secundaria: fondo gris con borde claro, para que se vea como botón. */
.btn,
.btn.ghost,
.btn-back,
.attendance-secondary,
.student-action,
.pagination-control,
.logout-button,
.back-link,
button.ghost {
  background: var(--boton-2);
  color: var(--color-snow-white);
  border-color: var(--boton-2-borde);
}

.btn:hover,
.btn.ghost:hover,
.btn-back:hover,
.attendance-secondary:hover,
.student-action:hover,
.pagination-control:hover,
.logout-button:hover,
.back-link:hover,
button.ghost:hover {
  background: var(--boton-2-hover);
  border-color: var(--boton-2-borde-hover);
  color: var(--color-snow-white);
}

/* Sobre franjas de color (encabezados de módulo) el botón va en blanco. */
.btn.light {
  background: var(--color-snow-white);
  color: #111827;
  border-color: var(--color-snow-white);
}

.btn.light:hover {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #111827;
}

/* Eliminar o anular: rojo lleno. */
.btn.danger,
.attendance-danger,
.student-action.danger {
  background: var(--peligro);
  color: #ffffff;
  border-color: var(--peligro);
}

.btn.danger:hover,
.attendance-danger:hover,
.student-action.danger:hover {
  background: var(--peligro-hover);
  border-color: var(--peligro-hover);
  color: #ffffff;
}

.btn.wide {
  width: 100%;
  min-height: 50px;
}

.btn[disabled],
button[disabled],
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Controles pequeños (ordenar columnas, elegir archivo). */
.table-sort,
.student-sort-button,
.file-picker,
.attendance-action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-8);
  border-radius: var(--radius-ui);
  border: 1px solid var(--edge-hairline);
  background: transparent;
  font-family: var(--font-dm-sans);
  font-size: 14px;
  color: var(--color-ash);
  cursor: pointer;
}

.table-sort:hover,
.student-sort-button:hover,
.file-picker:hover,
.attendance-action:hover {
  border-color: var(--edge-hairline-strong);
  color: var(--color-snow-white);
}

/* --------------------------------------------------------------------------
   Panels — frosted glass over the void
   -------------------------------------------------------------------------- */

.panel,
.card,
.attendance-card,
.attendance-main-card,
.attendance-family-panel,
.attendance-shift-card,
.attendance-unknown-card,
.role-card,
.school-preview-card,
.access-box,
.tutor-card,
.global-school-card,
.student-column,
.report-grid > a {
  background: var(--surface-frosted);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.panel + .panel,
.panel + section,
section + .panel {
  margin-top: var(--spacing-24);
}

.panel-head,
.attendance-family-head,
.attendance-history-head,
.attendance-card-head,
.daily-operations-head,
.subject-preview-head,
.selector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  margin-bottom: var(--spacing-20);
  border-bottom: 1px solid var(--edge-hairline);
}

/* Section headers use Geist — the heavier anchor. */
.panel-head h3,
.attendance-history-head h3,
.panel h2 {
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-bone);
}

.panel-head p {
  margin-top: var(--spacing-4);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate);
}

.panel-head > a {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--color-smoke);
}

.panel-head > a:hover {
  color: var(--color-snow-white);
}

.panel-title,
.attendance-family-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-14);
  min-width: 0;
}

.panel-icon,
.attendance-family-icon,
.empty-icon,
.subject-icon,
.attendance-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-ui);
  background: var(--surface-frosted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-smoke);
}

.panel-icon svg,
.attendance-family-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* Page title row ---------------------------------------------------------- */

.title-row,
.attendance-module-toolbar,
.attendance-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-32);
  flex-wrap: wrap;
}

.title-row h2,
.attendance-module-toolbar h2 {
  font-family: var(--font-geist);
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-bone);
}

.title-row p,
.attendance-toolbar-copy {
  margin-top: var(--spacing-8);
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
  max-width: 62ch;
}

.title-actions,
.attendance-module-actions,
.table-toolbar-actions,
.credential-title-actions,
.student-selector-actions,
.daily-operation-actions,
.credential-secondary-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  flex-wrap: wrap;
}

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

.table-wrap,
.attendance-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-ui);
}

table {
  width: 100%;
  font-family: var(--font-dm-sans);
  font-size: 15px;
  line-height: 1.5;
}

thead th {
  padding: var(--spacing-12) var(--spacing-16);
  background: transparent;
  border-bottom: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
  text-align: left;
  white-space: nowrap;
}

tbody td {
  padding: var(--spacing-16);
  border-bottom: 1px solid rgba(229, 229, 229, 0.07);
  color: var(--color-ash);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--surface-frosted-soft);
}

tbody td b,
tbody td strong {
  color: var(--color-bone);
  font-weight: var(--font-weight-medium);
}

tbody td small {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

td .btn {
  display: inline-flex;
}

td .btn + .btn {
  margin-left: var(--spacing-6);
}

td .btn,
td .attendance-action {
  height: auto;
  padding: 0 14px;
  font-size: 14px;
  min-height: 38px;
}

.table-toolbar,
.attendance-toolbar,
.student-selector-toolbar,
.credential-controls,
.student-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-20);
  flex-wrap: wrap;
}

.table-search,
.student-search-container,
.credential-search-container,
.table-search-field {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}

.table-results-summary,
.student-results-count,
.credential-selection-summary,
.selected-counter,
.pagination {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-16);
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.pagination {
  justify-content: space-between;
  margin: var(--spacing-20) 0 0;
}

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

label {
  display: block;
  font-family: var(--font-dm-sans);
  font-size: 15px;
  color: var(--color-ash);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
input:not([type]),
textarea,
select {
  width: 100%;
  height: 44px;
  padding: 0 var(--spacing-16);
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  font-family: var(--font-dm-sans);
  font-size: 15px;
  color: var(--color-bone);
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

textarea {
  height: auto;
  min-height: 104px;
  padding: var(--spacing-12) var(--spacing-16);
  line-height: 1.5;
  resize: vertical;
}

select {
  cursor: pointer;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--edge-hairline-strong);
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: rgba(229, 229, 229, 0.55);
  background: var(--surface-frosted);
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-snow-white);
  cursor: pointer;
}

.form-grid,
.global-form-grid,
.dialog-form,
.settings-form,
.mini-form,
.llavero-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-20);
}

.form-grid > .wide,
.form-grid > .full,
.dialog-form > .wide {
  grid-column: 1 / -1;
}

/* Comportamiento por omisión de una etiqueta suelta dentro de un formulario:
   el texto arriba, el control debajo.

   Va envuelto en :where() a propósito. Sin eso, `.dialog-form label` (0-1-1)
   le gana a cualquier componente de una sola clase como `.switch-row` o
   `.student-item` (0-1-0), y los obliga a apilarse aunque ellos mismos digan
   lo contrario. Con :where() esta regla pesa lo que un `label` a secas, que es
   lo que debe pesar un valor por omisión: cualquier componente lo sobrescribe
   sin tener que competir en especificidad. */
:where(.form-grid, .dialog-form, .global-dialog-form) label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.form-grid label input,
.form-grid label select,
.form-grid label textarea,
.dialog-form label input,
.dialog-form label select,
.global-dialog-form > label input,
.global-dialog-form > label select {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  color: var(--color-bone);
}

.form-actions,
.attendance-dialog-actions,
.student-selector-footer,
.credential-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-10);
  grid-column: 1 / -1;
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--edge-hairline);
  flex-wrap: wrap;
}

.check,
.switch-row,
.remember,
.print-option,
.credential-select {
  display: flex;
  /* Declarado explícitamente: estas filas son control + texto en una línea,
       y no deben depender de lo que herede el contenedor. */
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-10);
  font-family: var(--font-dm-sans);
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  color: var(--color-ash);
  cursor: pointer;
}

.check input,
.switch-row input,
.print-option input {
  flex: 0 0 auto;
}

.input-container {
  position: relative;
  display: block;
}

.input-container input,
.student-search-container input,
.credential-search-container input,
.table-search input {
  padding-left: 44px;
}

.input-icon,
.student-search-icon,
.credential-search-icon {
  position: absolute;
  left: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--color-slate);
  pointer-events: none;
}

.input-icon svg,
.student-search-icon svg,
.credential-search-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.password-toggle {
  position: absolute;
  right: var(--spacing-12);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-icons);
  color: var(--color-slate);
}

.password-toggle:hover {
  color: var(--color-snow-white);
}

.password-toggle svg {
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   Pills — badges, states, tags
   -------------------------------------------------------------------------- */

.badge,
.state-pill,
.status-pill,
.level-pill,
.attendance-badge,
.tutor-tag,
.credential-status,
.role-chip-list span,
.severity,
.grade,
.status,
.attendance-total-badge,
.student-meta span,
.school-numbers span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 28px;
  padding: 0 var(--spacing-14);
  border-radius: var(--radius-buttons);
  background: transparent;
  border: 1px solid var(--edge-hairline);
  font-family: var(--font-dm-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: 0.025em;
  color: var(--color-smoke);
  white-space: nowrap;
}

/* Affirmative states carry a bright edge and a lit dot. */
.badge.ok,
.badge.success,
.badge.activo,
.state-pill.present,
.state-pill.state-present,
.status-pill.present,
.status.activa,
.status.ok,
.credential-status {
  border-color: var(--edge-hairline-strong);
  color: var(--color-bone);
}

.badge.ok::before,
.badge.success::before,
.badge.activo::before,
.state-pill.present::before,
.state-pill.state-present::before,
.status-pill.present::before,
.status.activa::before,
.status.ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-buttons);
  background: var(--color-snow-white);
}

/* Negative states invert — the white fill is the loudest thing available. */
.badge.danger,
.badge.error,
.state-pill.absent,
.status-pill.absent,
.status-pill.baja,
.status.suspendida,
.severity.Importante {
  background: var(--color-snow-white);
  border-color: var(--color-snow-white);
  color: var(--color-graphite);
}

/* In-between states stay muted. */
.badge.warn,
.badge.warning,
.state-pill.late,
.state-pill.justified,
.state-pill.left,
.status-pill.late,
.status.prueba,
.severity.Preventivo {
  color: var(--color-slate);
  border-color: rgba(229, 229, 229, 0.1);
}

.state-pill.state-neutral,
.badge.neutral,
.severity.Informativo {
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   Alerts — a violet wash marks the line, nothing else colours
   -------------------------------------------------------------------------- */

.alert,
.error-message,
.token-notice,
.enrolled-hint,
.attendance-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-20);
  margin-bottom: var(--spacing-24);
  background: var(--surface-frosted);
  border-radius: var(--radius-ui);
  font-family: var(--font-dm-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ash);
  overflow: hidden;
}

.alert::after,
.error-message::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--gradient-dusk-violet);
}

.alert::before {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--color-snow-white);
}

.alert.ok::before,
.alert.success::before {
  content: "✓";
}

.alert.error::before,
.alert.danger::before,
.alert.warn::before,
.alert.warning::before,
.alert.info::before {
  content: "!";
}

.error-message strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--radius-buttons);
  background: var(--color-snow-white);
  color: var(--color-graphite);
  font-size: var(--text-caption);
}

.attendance-toast {
  position: fixed;
  right: var(--spacing-24);
  bottom: var(--spacing-24);
  z-index: 90;
  margin: 0;
  max-width: 360px;
  background: var(--surface-graphite);
  box-shadow: var(--shadow-subtle);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.attendance-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.empty-state,
.ui-empty-state,
.attendance-empty,
.credential-empty,
.student-empty,
.selected-students-empty,
.group-empty-hint,
.qr-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-10);
  padding: var(--spacing-48) var(--spacing-28);
  text-align: center;
}

.empty-state strong,
.ui-empty-state strong,
.attendance-empty strong,
.credential-empty strong,
.student-empty strong,
.selected-students-empty strong {
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.empty-state p,
.ui-empty-state p,
.attendance-empty p,
.empty-state small,
.student-empty small,
.selected-students-empty small {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate);
  max-width: 44ch;
}

.empty-icon,
.ui-empty-state > span:first-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--spacing-6);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted);
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.document-state-icon,
.document-checklist-icon {
  color: #bfdbfe;
}

.document-state-icon svg,
.document-checklist-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

/* --------------------------------------------------------------------------
   Dashboard — gradient hero band and stat cards
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-40);
  padding: var(--spacing-48);
  margin-bottom: var(--spacing-32);
  background: var(--gradient-hero-horizon);
  border-radius: var(--radius-largecards);
  overflow: hidden;
  flex-wrap: wrap;
}

.hero > div {
  max-width: 56ch;
}

.hero small {
  display: block;
  margin-bottom: var(--spacing-14);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.78);
}

.hero h2 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-medium);
  color: var(--color-snow-white);
}

.hero p {
  margin-top: var(--spacing-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.82);
}

.cards,
.attendance-metrics,
.attendance-state-grid,
.global-stats,
.daily-operation-grid,
.attendance-reader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
}

.cards article,
.attendance-metric,
.attendance-stat-card,
.summary-item,
.global-stats article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--card-padding);
  background: var(--surface-frosted);
  border-radius: var(--radius-cards);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* The coloured dashboard bullet has no place here. */
.cards article i {
  display: none;
}

.cards article > div,
.attendance-stat-card > div,
.summary-item > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-width: 0;
}

.cards article small,
.attendance-metric small,
.attendance-stat-card small,
.summary-item small,
.global-stats article small {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.cards article strong,
.attendance-metric strong,
.attendance-stat-card strong,
.summary-item strong,
.global-stats article strong {
  font-family: var(--font-dm-sans);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
  font-variant-numeric: tabular-nums;
}

.cards article em,
.attendance-metric em {
  font-size: var(--text-caption);
  font-style: normal;
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

/* Inverted card — a white panel in a dark section. */
.attendance-dark-card {
  background: var(--color-snow-white);
  color: var(--color-graphite);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.attendance-dark-card h3,
.attendance-dark-card strong,
.attendance-dark-card b {
  color: var(--color-graphite);
}

.attendance-dark-card p,
.attendance-dark-card small {
  color: #4a4a4a;
}

/* --------------------------------------------------------------------------
   Dialogs
   -------------------------------------------------------------------------- */

dialog,
.attendance-dialog,
.permission-modal,
.role-dialog,
.print-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: var(--spacing-32);
  background: var(--surface-graphite);
  border: 0;
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  color: var(--color-bone);
}

dialog::backdrop {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(4px);
}

.dialog-head,
.attendance-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  margin-bottom: var(--spacing-20);
  border-bottom: 1px solid var(--edge-hairline);
}

.dialog-head h2,
.dialog-head h3,
.attendance-dialog-head h3,
.modal-title {
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
}

.dialog-close,
.attendance-icon-button,
dialog [data-close] {
  display: inline-flex;
}

.dialog-close:hover,
.attendance-icon-button:hover,
dialog [data-close]:hover {
}

.attendance-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.attendance-danger-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--spacing-16);
  border-radius: var(--radius-buttons);
  background: var(--color-snow-white);
  color: var(--color-graphite);
  font-size: var(--text-subheading);
}

.attendance-muted,
.attendance-loading strong {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   Login — gradient hero panel beside the access card
   -------------------------------------------------------------------------- */

body.login-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--spacing-16);
}

/* Floating frosted nav — the signature component. */
.floating-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto var(--spacing-16);
  padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-20);
  background: rgba(22, 22, 22, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-subtle);
}

.login-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--spacing-16);
  flex: 1;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* The gradient hero — the only full-section gradient in the system. */
.login-information {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-48);
  min-width: 0;
  padding: var(--spacing-48);
  background: var(--gradient-hero-horizon);
  border-radius: var(--radius-panels);
  overflow: hidden;
}

.school-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.school-logo,
.mobile-logo,
.brand-icon,
.aulasimple-mark,
.school-avatar,
.credential-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: var(--color-snow-white);
  color: var(--color-graphite);
  border-radius: var(--radius-ui);
  font-family: var(--font-dm-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
}

.school-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.school-brand-text strong {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-snow-white);
}

.school-brand-text span {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: rgba(255, 255, 255, 0.72);
}

/* Display headline — DM Sans 72 at weight 500. Never bolder. */
.login-information h1 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-snow-white);
}

.login-information h1 span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
}

.information-description {
  max-width: 40ch;
  margin-top: var(--spacing-24);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.82);
}

/* Bulleted feature rows — icon square plus one line of text. */
.features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font-size: var(--text-body);
  color: var(--color-snow-white);
}

.feature .feature-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: var(--radius-icons);
  background: var(--color-snow-white);
  color: var(--color-graphite);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

/* Access card — graphite panel on the void canvas. */
.login-access {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--spacing-24) 0;
}

.login-card-modern,
.global-login-card,
.access-box {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-40) var(--spacing-32);
  background: var(--surface-graphite);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.login-card-modern h2,
.global-login-card h1 {
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.login-subtitle,
.global-login-card > p {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-32);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate);
}

.login-form,
.global-login-card form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.login-form .field,
.global-login-card label {
  display: block;
}

.login-footer {
  margin-top: var(--spacing-28);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
  text-align: center;
}

.button-loader {
  display: none;
}

.mobile-logo {
  display: none;
  margin-bottom: var(--spacing-24);
}

/* Retired decorative layers. */
.background-grid,
.glow,
.glow-one,
.glow-two,
.login-illustration,
.login-terminal {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Global console
   -------------------------------------------------------------------------- */

.global-login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--spacing-40);
  background: var(--gradient-radial-spotlight), var(--surface-void-canvas);
}

.global-login-card {
  text-align: left;
}

.global-login-card .aulasimple-mark {
  margin-bottom: var(--spacing-24);
}

.global-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--spacing-16);
  min-height: 100vh;
  padding: var(--spacing-16);
}

.global-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-20);
  background: var(--surface-graphite);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.global-main {
  min-width: 0;
  padding-bottom: var(--spacing-48);
}

.global-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.global-brand b {
  display: flex;
  flex-direction: column;
  font-family: var(--font-dm-sans);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-bone);
}

.global-brand b small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.global-side nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex: 1;
}

.global-side nav a {
  display: flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-14);
  border-radius: var(--radius-buttons);
  font-size: 15px;
  color: var(--color-ash);
}

.global-side nav a:hover {
  background: var(--surface-frosted-soft);
  color: var(--color-snow-white);
}

.global-side nav a.active {
  background: var(--color-snow-white);
  color: var(--color-graphite);
}

.global-admin {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-16);
  background: var(--surface-frosted);
  border-radius: var(--radius-ui);
}

.global-admin b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}

.global-admin small {
  font-size: var(--text-caption);
  color: var(--color-slate);
  word-break: break-all;
}

.global-admin a {
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-smoke);
}

.global-main > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-32);
  padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-20);
  background: rgba(22, 22, 22, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

.global-main > header h1 {
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.global-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.school-grid,
.role-grid,
.module-grid,
.report-grid,
.permission-grid,
.access-role-grid,
.credential-grid,
.subject-enroll-grid,
.citation-grid,
.detail-grid,
.settings-layout,
.student-selector-grid,
.grid,
.two {
  display: grid;
  gap: var(--spacing-16);
}

.school-grid,
.role-grid,
.report-grid,
.access-role-grid,
.citation-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.module-grid,
.permission-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.detail-grid,
.settings-layout,
.student-selector-grid,
.attendance-two-col,
.attendance-grid-main,
.two {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.global-school-card,
.school-preview-card,
.role-card,
.tutor-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-14);
}

.global-school-head,
.role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.global-school-card h2,
.global-school-card h3 {
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
}

.global-school-card > a {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
  word-break: break-all;
}

.global-school-card > a:hover {
  color: var(--color-snow-white);
}

.school-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: 0;
}

.school-numbers span b {
  color: var(--color-bone);
}

.role-card-meta,
.tenant-address,
.report-desc,
.credential-year,
.family-description,
.switch-line,
.schedule,
.citation-reason,
.group-empty-hint {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate);
}

.role-chip-list,
.switch-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.switch-list {
  flex-direction: column;
  gap: var(--spacing-14);
}

fieldset {
  border: 0;
  padding: var(--spacing-20) 0 0;
  margin-top: var(--spacing-20);
  border-top: 1px solid var(--edge-hairline);
}

legend {
  padding: 0;
  margin-bottom: var(--spacing-16);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.module-grid label,
.permission-grid label,
.token-regenerate,
.subject-enroll {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  cursor: pointer;
}

.module-grid label:hover,
.permission-grid label:hover,
.token-regenerate:hover,
.subject-enroll:hover {
  border-color: var(--edge-hairline-strong);
}

.module-grid label input,
.permission-grid label input,
.token-regenerate input,
.subject-enroll input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.module-grid label span,
.permission-grid label span,
.token-regenerate span,
.subject-enroll span {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

.module-grid label b,
.token-regenerate b,
.subject-enroll b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.module-grid label small,
.token-regenerate small,
.subject-enroll small {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-slate);
}

.token-regenerate {
  margin-top: var(--spacing-20);
}

.token-notice {
  flex-direction: column;
  gap: var(--spacing-10);
}

.token-notice code {
  display: block;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-void-canvas);
  border-radius: var(--radius-ui);
  color: var(--color-bone);
  font-size: 14px;
  word-break: break-all;
}

input[type="color"] {
  height: 44px;
  padding: var(--spacing-6);
  cursor: pointer;
}

.global-dialog-form {
  display: block;
}

.global-dialog-form > label {
  margin-bottom: var(--spacing-20);
}

/* --------------------------------------------------------------------------
   Family portal
   -------------------------------------------------------------------------- */

.parent-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-48);
}

.parent-header {
  position: sticky;
  top: var(--spacing-16);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-40);
  padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-20);
  background: rgba(22, 22, 22, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-subtle);
}

.parent-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-text strong,
.brand-text b {
  font-family: var(--font-dm-sans);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.brand-text span,
.brand-text small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.parent-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.user-information {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-10);
}

.user-information > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}

.user-information strong,
.user-information b {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.user-information span,
.user-information small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.user-avatar,
.student-avatar,
.tutor-avatar,
.school-preview-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--surface-frosted);
  color: var(--color-bone);
  border-radius: var(--radius-buttons);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

/* Student hero — the record's own headline moment. */
.student-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-40);
  padding-bottom: var(--spacing-40);
  margin-bottom: var(--spacing-40);
  border-bottom: 1px solid var(--edge-hairline);
  flex-wrap: wrap;
}

.student-main {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-20);
  min-width: 0;
}

.student-hero .student-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: var(--radius-ui);
  font-size: var(--text-body);
}

.student-title h1,
.student-title h2 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.student-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}

.student-meta span strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.student-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-12);
  flex: 1 1 420px;
}

.student-summary .summary-item strong {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.01em;
}

.summary-item strong.status-pill,
.summary-item strong.state-pill,
.summary-item strong.badge {
  align-self: flex-start;
  font-size: var(--text-caption);
  line-height: 1;
  letter-spacing: 0.025em;
}

.student-selector {
  margin-bottom: var(--spacing-40);
}

/* Pill tab rows. */
.parent-tabs,
.attendance-tabs,
.family-bottom-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  overflow-x: auto;
  padding-bottom: var(--spacing-4);
}

.parent-tabs a,
.attendance-tabs button,
.attendance-nav-button,
.family-bottom-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 36px;
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  background: transparent;
  font-family: var(--font-dm-sans);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.parent-tabs a:hover,
.attendance-tabs button:hover,
.attendance-nav-button:hover,
.family-bottom-nav a:hover {
  background: var(--surface-frosted-soft);
  border-color: var(--edge-hairline-strong);
  color: var(--color-snow-white);
}

.parent-tabs a.active,
.attendance-tabs button.active,
.attendance-nav-button.active,
.family-bottom-nav a.active {
  background: var(--color-snow-white);
  border-color: var(--color-snow-white);
  color: var(--color-graphite);
}

.selector-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--edge-hairline);
}

.selector-header strong {
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
}

.information-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-20);
}

.information-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-width: 0;
}

.information-item.full {
  grid-column: 1 / -1;
}

.information-item span:first-child,
.information-item small:first-child {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.information-item strong,
.information-item b,
.information-item p {
  font-size: 15px;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  color: var(--color-bone);
}

/* Attendance overview and history ---------------------------------------- */

.attendance-overview {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr);
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-28);
}

.attendance-main-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-20);
}

.attendance-main-card > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.attendance-main-card strong {
  font-family: var(--font-dm-sans);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.attendance-main-card > div > small {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.attendance-main-card > div > span,
.attendance-main-card > span {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate);
}

.attendance-state-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.attendance-stat-card {
  padding: var(--spacing-20);
}

.attendance-history-head {
  align-items: baseline;
}

.attendance-history-head > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.attendance-history-head strong {
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
}

.attendance-history-head strong + small {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.attendance-history {
  display: flex;
  flex-direction: column;
}

/* Numbered-accordion rhythm — generous rows, no chrome. */
.attendance-history-item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-20) 0;
  border-bottom: 1px solid rgba(229, 229, 229, 0.07);
}

.attendance-history-item:last-child {
  border-bottom: 0;
}

.attendance-date,
.attendance-subject,
.attendance-teacher {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.attendance-date strong {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.attendance-date small,
.attendance-teacher small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.attendance-subject strong,
.attendance-subject b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.attendance-subject small {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.attendance-teacher strong {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  color: var(--color-ash);
}

.attendance-observation-parent {
  grid-column: 1 / -1;
  padding-left: 124px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate);
}

.attendance-observation-parent.no-note {
  color: rgba(104, 104, 104, 0.6);
}

.family-section {
  margin-bottom: var(--spacing-40);
}

.average-grade,
.grade-input {
  font-size: 15px;
  color: var(--color-bone);
  font-variant-numeric: tabular-nums;
}

.grade-input {
  width: 80px;
  text-align: center;
}

.panel-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--spacing-10);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

/* --------------------------------------------------------------------------
   Credentials — white cards in a dark section
   -------------------------------------------------------------------------- */

.credential-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: stretch;
}

.credential-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding-top: 38px;
}

.credential-select {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 28px;
  padding: 0 var(--spacing-12);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.credential-select::after {
  content: "Seleccionar";
  letter-spacing: 0.025em;
}

.credential-select input {
  width: 14px;
  height: 14px;
}

.student-credential {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-snow-white);
  border-radius: var(--radius-cards);
  color: var(--color-graphite);
}

.credential-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-20);
  border-bottom: 1px solid #ebebeb;
}

.credential-top .credential-mark {
  background: var(--color-graphite);
  color: var(--color-snow-white);
}

.credential-school {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.credential-school b {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
}

.credential-school small {
  font-size: 12px;
  letter-spacing: var(--tracking-caption);
  color: #7a7a7a;
}

.credential-top .credential-status {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-20);
  height: 24px;
  padding: 0 var(--spacing-10);
  border-color: #dcdcdc;
  color: #4a4a4a;
}

.credential-top .credential-status::before {
  background: var(--color-graphite);
}

.credential-body {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 84px;
  gap: var(--spacing-16);
  padding: var(--spacing-20);
  flex: 1;
}

.credential-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 68px;
  border-radius: var(--radius-ui);
  background: #f2f2f2;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  color: #4a4a4a;
}

.credential-information {
  min-width: 0;
}

.credential-information h3 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-subheading);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
  min-height: 2.6em;
}

.credential-information p {
  margin-top: var(--spacing-4);
  font-size: 14px;
  color: #6a6a6a;
}

.credential-code {
  display: block;
  margin-top: var(--spacing-10);
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-graphite);
}

.qr-box {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: var(--spacing-6);
  background: var(--color-snow-white);
  border: 1px solid #ebebeb;
  border-radius: var(--radius-ui);
}

.qr-box img {
  width: 100%;
  height: 100%;
}

.qr-missing {
  padding: 0;
  font-size: 12px;
  color: #9a9a9a;
}

.credential-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  padding: var(--spacing-12) var(--spacing-20);
  border-top: 1px solid #ebebeb;
  font-size: 12px;
  letter-spacing: 0.025em;
  color: #7a7a7a;
}

.credential-bottom .credential-code {
  margin-top: 0;
  font-size: 12px;
  color: #4a4a4a;
}

.credential-actions {
  justify-content: flex-start;
  padding-top: 0;
  border-top: 0;
}

.print-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-28);
}

.print-dialog-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.credential-item.not-selected-for-print,
.credential-item.hidden {
  display: none;
}

.credential-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-16);
}

.credential-data dt {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.credential-data dd {
  margin-top: var(--spacing-4);
  font-size: 15px;
  color: var(--color-bone);
}

.regenerate-credential-form,
.print-single-credential {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Enrolment picker
   -------------------------------------------------------------------------- */

.student-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

.student-column-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--edge-hairline);
}

.student-column-header > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.student-column-header strong {
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
}

.student-column-header small {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.student-column-header > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--spacing-10);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

.student-list,
.selected-students-list,
.subject-preview-list,
.tutors-list,
.permission-list,
.attendance-unknown-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  max-height: 460px;
  overflow-y: auto;
}

.student-item,
.subject-preview-list li,
.permission-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-14);
  padding: var(--spacing-12);
  border-radius: var(--radius-ui);
  font-size: 15px;
  color: var(--color-ash);
  cursor: pointer;
  transition: background 160ms ease;
}

.student-item:hover {
  background: var(--surface-frosted-soft);
}

.student-item.selected {
  background: var(--surface-frosted);
  color: var(--color-bone);
}

.student-item .student-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--radius-icons);
  font-size: 12px;
}

.student-information {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
  min-width: 0;
}

.student-information strong,
.student-information b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.student-information small,
.student-information span {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.student-status-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-left: auto;
  font-size: 12px;
  color: var(--color-snow-white);
  opacity: 0;
}

.student-item.selected .student-status-icon {
  opacity: 1;
}

.student-action {
  height: auto;
  padding: 0 16px;
  font-size: 15px;
  min-height: 40px;
}

.student-selector-footer {
  justify-content: space-between;
}

.student-selector-footer span {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.student-selector-footer strong {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-bone);
}

.student-search-container .student-results-count {
  position: absolute;
  right: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  pointer-events: none;
}

.enrolled-hint {
  margin: 0;
  padding: 0;
  background: none;
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.selected-column {
  background: var(--surface-frosted-soft);
}

.subject-enroll-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.subject-preview {
  margin-top: var(--spacing-20);
}

.subject-enroll {
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Attendance module
   -------------------------------------------------------------------------- */

.attendance-module {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.attendance-reader-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 34px;
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.attendance-reader-status.online {
  border-color: var(--edge-hairline-strong);
  color: var(--color-bone);
}

.attendance-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  padding: var(--spacing-56);
}

.attendance-loading span {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-buttons);
  border: 2px solid var(--edge-hairline);
  border-top-color: var(--color-snow-white);
  animation: attendance-spin 700ms linear infinite;
}

@keyframes attendance-spin {
  to {
    transform: rotate(360deg);
  }
}

.attendance-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.attendance-shift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-16);
}

.attendance-card-body,
.reader-health,
.daily-operations {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.attendance-confirm-dialog {
  max-width: 460px;
}

/* --------------------------------------------------------------------------
   Remaining components
   -------------------------------------------------------------------------- */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(4px);
  border: 0;
}

.sidebar-backdrop.open {
  display: block;
}

.page-footer {
  padding-top: var(--spacing-32);
  margin-top: var(--spacing-48);
  border-top: 1px solid var(--edge-hairline);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.role-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-ui);
  background: var(--surface-frosted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.user-cell,
.tutor-data {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.user-cell b,
.tutor-data b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.user-cell small,
.tutor-data small {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

/* Toggle rendered as an empty span beside a hidden checkbox. */
.switch-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-ui {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  /* `flex: 0 0 38px` fijaba la BASE del eje principal. En una fila eso es el
       ancho (correcto), pero si el contenedor llega a ser columna pasa a ser el
       alto y el interruptor se deforma en un círculo de 38×38. Con `auto` manda
       el width/height de arriba en cualquiera de los dos ejes. */
  flex: 0 0 auto;
  border-radius: var(--radius-buttons);
  background: var(--surface-frosted);
  border: 1px solid var(--edge-hairline);
  transition: background 160ms ease;
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-buttons);
  background: var(--color-smoke);
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.switch-row input:checked + .switch-ui,
.switch-row input:checked ~ .switch-ui {
  background: var(--color-snow-white);
  border-color: var(--color-snow-white);
}

.switch-row input:checked + .switch-ui::after,
.switch-row input:checked ~ .switch-ui::after {
  transform: translateX(16px);
  background: var(--color-graphite);
}

.permission-group {
  padding-top: var(--spacing-20);
  margin-top: var(--spacing-20);
  border-top: 1px solid var(--edge-hairline);
}

.permission-group > h4,
.permission-group > strong {
  display: block;
  margin-bottom: var(--spacing-16);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-slate);
}

.file-picker input[type="file"] {
  display: none;
}

.role-editor .permission-list {
  max-height: 340px;
}

.mini-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.mini-form select,
.table-toolbar select,
.table-toolbar-actions select,
.student-selector-toolbar select,
.credential-controls select,
.title-actions select {
  width: auto;
  min-width: 170px;
}

.report-desc,
.citation-reason {
  max-width: 420px;
  white-space: normal;
}

/* Content stays inside the 1200px measure. */
.main > header,
.main > .title-row,
.main > .panel,
.main > section,
.main > form,
.main > .alert,
.main > .cards,
.main > .grid,
.main > .two,
.main > .detail-grid,
.main > .hero,
.main > div {
  width: 100%;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* When the page states its own title, the floating bar stops repeating it. */
.main:has(.title-row) > header > div:first-of-type {
  display: none;
}

.main:has(.title-row) > header .user {
  margin-left: auto;
}

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

@media (max-width: 1100px) {
  .login-information {
    padding: var(--spacing-40);
  }

  .login-information h1 {
    font-size: var(--text-heading-lg);
    letter-spacing: -1.7px;
  }
}

@media (max-width: 900px) {
  .login-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-information {
    gap: var(--spacing-32);
    padding: var(--spacing-32);
    border-radius: var(--radius-cards);
  }

  .login-information h1 {
    font-size: var(--text-heading);
    letter-spacing: -1.26px;
  }

  .login-card-modern,
  .global-login-card {
    max-width: none;
  }

  .attendance-history-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .attendance-observation-parent {
    padding-left: 0;
  }

  .attendance-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .global-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .global-side {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .global-side nav {
    flex-direction: row;
    flex: 1;
  }
}

@media (max-width: 760px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--spacing-12);
  }

  .side {
    position: fixed;
    top: var(--spacing-12);
    left: var(--spacing-12);
    z-index: 40;
    width: var(--sidebar-width);
    height: calc(100vh - var(--spacing-24));
    transform: translateX(calc(-100% - var(--spacing-16)));
    transition: transform 220ms ease;
  }

  .side.open {
    transform: translateX(0);
  }

  .main > header {
    top: var(--spacing-12);
  }

  .main > header .user > div,
  .main > header .user .role-switcher {
    display: none;
  }

  .login-information .features,
  .information-description {
    display: none;
  }

  .login-information {
    display: none;
  }

  .mobile-logo {
    display: grid;
  }

  .login-card-modern {
    padding: var(--spacing-28) var(--spacing-24);
  }

  .parent-shell {
    padding: var(--spacing-12) var(--spacing-12) var(--spacing-40);
  }

  .hero {
    padding: var(--spacing-28);
    border-radius: var(--radius-cards);
  }

  .panel,
  .card {
    padding: var(--spacing-20);
  }

  .title-row h2,
  .student-title h1 {
    font-size: var(--text-heading-sm);
    letter-spacing: -0.01em;
  }

  .credential-body {
    grid-template-columns: 48px minmax(0, 1fr) 72px;
  }

  .qr-box {
    width: 72px;
    height: 72px;
  }
}

/* --------------------------------------------------------------------------
   Modal system — consistent shell for every simple dialog
   -------------------------------------------------------------------------- */

dialog[open]:not(.user-dialog):not(.role-dialog):not(.permission-dialog):not(.attendance-dialog):not(.print-dialog) {
  box-sizing: border-box;
  width: min(680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(90dvh, 900px);
  padding: 0;
  overflow: hidden;
}

dialog[open]:not(.user-dialog):not(.role-dialog):not(.permission-dialog):not(.attendance-dialog):not(.print-dialog)
  > form.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  width: 100%;
  min-height: 0;
  max-height: inherit;
  box-sizing: border-box;
  overflow-y: auto;
  padding: var(--spacing-28) var(--spacing-28) 0;
}

dialog[open]:not(.user-dialog):not(.role-dialog):not(.permission-dialog):not(.attendance-dialog):not(.print-dialog)
  > form.form-grid
  > label {
  flex: 0 0 auto;
  width: 100%;
}

.modal-simple-head {
  position: sticky;
  z-index: 2;
  top: calc(var(--spacing-28) * -1);
  margin: calc(var(--spacing-28) * -1) calc(var(--spacing-28) * -1) 0;
  padding: var(--spacing-24) var(--spacing-28) var(--spacing-20);
  background: var(--surface-graphite);
}

.modal-simple-head h3 {
  margin: 0;
  color: var(--color-bone);
}

.modal-simple-head p {
  margin: var(--spacing-4) 0 0;
  color: var(--color-slate);
  font-size: var(--text-caption);
  line-height: 1.45;
}

/* The enrollment dialog contains two dense selectors, so it receives a
   slightly wider shell while preserving a single scrollable form column. */
#enroll[open] {
  width: min(820px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(90dvh, 860px);
  max-height: min(90dvh, 860px);
}

#enrollmentForm .subject-preview,
#enrollmentForm .student-selector,
#enrollmentForm .wide {
  width: 100%;
  min-width: 0;
}

#enrollmentForm .student-selector-grid {
  min-width: 0;
}

#enrollmentForm .student-search-container {
  position: sticky;
  z-index: 3;
  top: 96px;
  display: block;
  min-width: 0;
  padding: var(--spacing-8) 0;
  margin-bottom: var(--spacing-8);
  background: var(--surface-graphite);
}

#enrollmentForm .student-search-container input {
  width: 100%;
  min-height: 44px;
}

#enrollmentForm .form-grid .student-item,
#enrollmentForm .student-item {
  display: grid;
  grid-template-columns: 18px 32px minmax(0, 1fr) 22px;
  align-items: center;
  flex-direction: row;
  gap: var(--spacing-12);
  min-width: 0;
}

#enrollmentForm .student-item > input {
  margin: 0;
}

#enrollmentForm .student-item.is-enrolled {
  border: 1px solid var(--status-warn-edge);
  background: var(--status-warn-fill);
}

#enrollmentForm .student-enrollment-status {
  color: var(--status-warn) !important;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

#enrollmentForm .student-information {
  overflow: hidden;
}

#enrollmentForm .student-information strong,
#enrollmentForm .student-information small {
  overflow-wrap: anywhere;
}

#enrollmentForm .student-status-icon {
  justify-self: end;
}

#enrollmentForm .student-column {
  align-items: stretch;
  padding: var(--spacing-20);
}

#enrollmentForm .student-list,
#enrollmentForm .selected-students-list {
  align-items: stretch;
  min-width: 0;
}

#enrollmentForm .subject-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
  gap: var(--spacing-10);
  max-height: none;
  overflow: visible;
}

#enrollmentForm .subject-preview-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 58px;
  padding: var(--spacing-12);
  border: 1px solid var(--edge-hairline);
  border-left: 3px solid var(--status-info);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
}

#enrollmentForm .subject-preview-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  min-width: 0;
}

#enrollmentForm .subject-preview-item b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-bone);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}

#enrollmentForm .subject-preview-item small {
  overflow-wrap: anywhere;
  color: var(--color-smoke);
  font-size: 12px;
}

#enrollmentForm .subject-preview-code {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--status-info-edge);
  border-radius: var(--radius-buttons);
  background: var(--status-info-fill);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
}

#enrollmentForm .selected-student {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: var(--spacing-10);
  min-width: 0;
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--status-info-edge);
  border-radius: var(--radius-ui);
  background: linear-gradient(110deg, var(--status-info-fill), var(--surface-frosted-soft));
}

#enrollmentForm .selected-student-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--status-info-fill);
  border: 1px solid var(--status-info-edge);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

#enrollmentForm .selected-student-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#enrollmentForm .selected-student-info strong,
#enrollmentForm .selected-student-info small {
  overflow-wrap: anywhere;
}

#enrollmentForm .selected-student-info strong {
  color: var(--color-bone);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}

#enrollmentForm .selected-student-info small {
  color: var(--color-smoke);
  font-size: 12px;
}

#enrollmentForm .remove-selected-student {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-buttons);
  background: transparent;
  color: var(--color-smoke);
  cursor: pointer;
}

#enrollmentForm .remove-selected-student:hover {
  border-color: var(--status-danger-edge);
  background: var(--status-danger-fill);
  color: var(--status-danger);
}

/* Empty messages are stateful: they must not occupy space while results
   exist. JavaScript toggles the visible class when the filters change. */
#enrollmentForm #studentEmpty,
#enrollmentForm #groupEmptyHint {
  display: none;
}

#enrollmentForm #studentEmpty.visible {
  display: flex;
}

#enrollmentForm #groupEmptyHint.visible {
  display: block;
}

#enrollmentForm .student-item {
  min-height: 66px;
}

#enrollmentForm .student-list,
#enrollmentForm .selected-students-list,
#enrollmentForm .subject-preview-list {
  scrollbar-gutter: stable;
}

@media (max-width: 620px) {
  dialog[open]:not(.user-dialog):not(.role-dialog):not(.permission-dialog):not(.attendance-dialog):not(.print-dialog)
    > form.form-grid {
    padding: var(--spacing-20);
  }

  .modal-simple-head {
    top: calc(var(--spacing-20) * -1);
    margin: calc(var(--spacing-20) * -1) calc(var(--spacing-20) * -1) 0;
    padding: var(--spacing-20);
  }

  #enroll[open] {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    height: 94dvh;
    max-height: 94dvh;
  }

  #enrollmentForm .student-search-container {
    top: 72px;
  }
}

/* --------------------------------------------------------------------------
   Print — credentials on ID-1 stock, always on white paper
   -------------------------------------------------------------------------- */

@media print {
  @page hoja-general {
    size: letter portrait;
    margin: 8mm;
  }
  :where(html:not(.pg-informes, .pg-actas_calificaciones, .pg-horario_grupo, .pg-horario_docente, .pg-informe_grupo)) {
    page: hoja-general;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body::before {
    display: none !important;
  }

  .side,
  .sidebar-backdrop,
  .main > header,
  .parent-header,
  .floating-nav,
  .title-row,
  .credential-controls,
  .credential-secondary-actions,
  .credential-actions,
  .credential-select,
  .table-toolbar,
  .alert,
  dialog,
  .page-footer,
  footer {
    display: none !important;
  }

  .app,
  .main {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  .credential-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 85.6mm);
    gap: 7mm 6mm;
    justify-content: center;
    align-items: start;
  }

  .credential-item {
    display: block;
    width: 85.6mm;
    margin: 0;
    padding: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .credential-item.hidden,
  .credential-item.not-selected-for-print {
    display: none !important;
  }

  .student-credential {
    width: 85.6mm;
    min-height: 54mm;
    background: #ffffff !important;
    border: 0.2mm solid #d0d0d0;
    border-radius: 3mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .credential-top {
    min-height: 13mm;
    padding: 2.5mm 4mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .credential-mark {
    width: 9mm;
    height: 9mm;
    border-radius: 2mm;
  }

  .credential-top .credential-status {
    top: 3mm;
    right: 4mm;
  }

  .credential-body {
    grid-template-columns: 13mm 1fr 21mm;
    gap: 3mm;
    padding: 3mm 4mm;
  }

  .credential-avatar {
    width: 13mm;
    height: 16mm;
    border-radius: 2mm;
  }

  .credential-information h3 {
    min-height: 0;
  }

  .qr-box {
    width: 21mm;
    height: 21mm;
    padding: 1.5mm;
    border-radius: 2mm;
  }

  .qr-box img {
    width: 18mm;
    height: 18mm;
  }

  .credential-bottom {
    min-height: 5mm;
    padding: 1.5mm 4mm;
  }
}

/* Floating nav extras on the access page. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.nav-note {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

.hero-top {
  display: flex;
  flex-direction: column;
}

.hero-eyebrow {
  margin-bottom: var(--spacing-24);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 760px) {
  .nav-note {
    display: none;
  }
}

/* The header's sign-out sits as a ghost pill beside the user block. */
.main > header .user > a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.main > header .user > a:hover {
  background: var(--surface-frosted-soft);
  border-color: var(--edge-hairline-strong);
  color: var(--color-snow-white);
}

.role-switcher select {
  height: 34px;
  min-width: 150px;
  border-radius: var(--radius-buttons);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Legibility pass — labels on frosted panels move up the grey scale
   -------------------------------------------------------------------------- */

/* Slate is for metadata on the canvas; on a frosted card it reads too faint. */
.cards article small,
.attendance-metric small,
.attendance-stat-card small,
.summary-item small,
.global-stats article small,
.attendance-main-card > div > small,
.information-item span:first-child,
.information-item small:first-child,
.student-column-header small,
.module-grid label small,
.token-regenerate small,
.subject-enroll small,
.credential-data dt,
.cycle small {
  color: var(--color-smoke);
}

.attendance-main-card > div > span,
.attendance-main-card > span,
.panel-head p,
.attendance-family-title p,
.attendance-history-head strong + small,
.attendance-observation-parent,
.student-information small,
.attendance-date small,
.attendance-teacher small,
.attendance-subject small,
.role-card-meta,
.report-desc,
.citation-reason,
.credential-year,
.family-description,
.global-school-card > a,
.user-information small,
.brand span small,
.brand-text span,
.brand-text small {
  color: var(--color-ash);
}

.attendance-observation-parent.no-note {
  color: var(--color-slate);
}

/* A state pill that already carries its own glyph does not need the dot. */
.state-pill::before {
  content: none !important;
}

.attendance-stat-card {
  padding: var(--spacing-20) var(--spacing-16);
}

.student-summary {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.attendance-state-grid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

/* Table headers earn a touch more presence on the dark canvas. */
thead th {
  color: var(--color-smoke);
}

.table-results-summary,
.student-results-count,
.credential-selection-summary,
.selected-counter,
.pagination,
.enrolled-hint,
.nav-section > small {
  color: var(--color-smoke);
}

/* Four summary tiles read better as a 2×2 block than as an uneven row. */
.student-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 440px;
  max-width: 560px;
}

@media (max-width: 560px) {
  .student-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

.credential-grid {
  margin-top: var(--spacing-16);
}

.student-selector-toolbar {
  margin-top: var(--spacing-16);
}

.student-selector-grid {
  margin-top: var(--spacing-8);
}

/* ==========================================================================
   Status colour — the one place hue is allowed to carry meaning
   ========================================================================== */

:root {
  --status-ok: #4ade80;
  --status-ok-edge: rgba(74, 222, 128, 0.38);
  --status-ok-fill: rgba(74, 222, 128, 0.12);
  --status-warn: #fbbf24;
  --status-warn-edge: rgba(251, 191, 36, 0.38);
  --status-warn-fill: rgba(251, 191, 36, 0.12);
  --status-danger: #f87171;
  --status-danger-edge: rgba(248, 113, 113, 0.38);
  --status-danger-fill: rgba(248, 113, 113, 0.12);
  --status-info: #60a5fa;
  --status-info-edge: rgba(96, 165, 250, 0.38);
  --status-info-fill: rgba(96, 165, 250, 0.12);
  --color-bone: #f4f4f5;
  --color-ash: #dcdcdc;
  --color-slate: #a9a9a9;
  --color-smoke: #cfcfcf;
  --edge-hairline: rgba(229, 229, 229, 0.2);
  --edge-hairline-strong: rgba(229, 229, 229, 0.36);
}

/* Positive — active, present, issued, approved */
.is-ok,
.badge.ok,
.badge.success,
.badge.activo,
.state-present,
.status-active,
.status.activa,
.status.ok,
.level-info,
.grade-excellent,
.attendance-reader-status.online,
.reader-health.online {
  background: var(--status-ok-fill);
  border-color: var(--status-ok-edge);
  color: var(--status-ok);
}

/* Caution — late, pending, trial, partial */
.is-warn,
.badge.warn,
.badge.warning,
.state-late,
.state-justified,
.status.prueba,
.level-warning,
.severity.Preventivo,
.grade-regular {
  background: var(--status-warn-fill);
  border-color: var(--status-warn-edge);
  color: var(--status-warn);
}

/* Negative — absent, cancelled, suspended, dropped */
.is-danger,
.badge.danger,
.badge.error,
.state-absent,
.status.suspendida,
.level-important,
.severity.Importante,
.grade-low {
  background: var(--status-danger-fill);
  border-color: var(--status-danger-edge);
  color: var(--status-danger);
}

/* Informational — confirmed, left early, scheduled */
.is-info,
.state-left,
.state-neutral,
.status-neutral,
.severity.Informativo,
.grade-good {
  background: var(--status-info-fill);
  border-color: var(--status-info-edge);
  color: var(--status-info);
}

/* The leading dot picks up the state's own hue. */
.badge::before,
.state-pill::before,
.status-pill::before,
.status::before,
.level-pill::before,
.severity::before {
  content: none;
}

.is-ok::before,
.state-present::before,
.status-active::before,
.status.activa::before,
.is-warn::before,
.state-late::before,
.state-justified::before,
.status.prueba::before,
.is-danger::before,
.state-absent::before,
.status.suspendida::before,
.is-info::before,
.state-left::before,
.state-neutral::before,
.status-neutral::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: var(--radius-buttons);
  background: currentColor;
}

/* A state pill that already ships its own glyph skips the dot. */
.state-pill.has-glyph::before {
  content: none;
}

/* Grades read as plain figures unless they carry a state class. */
.grade-empty {
  color: var(--color-slate);
  border-color: var(--edge-hairline);
}

/* The reader-health indicator on the dashboard. */
.reader-health {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 32px;
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--edge-hairline);
  background: transparent;
  font-size: var(--text-caption);
  letter-spacing: 0.025em;
  color: var(--color-smoke);
  white-space: nowrap;
  flex: 0 0 auto;
}

.reader-health > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: var(--radius-buttons);
  background: var(--color-slate);
}

.reader-health.online > span {
  background: var(--status-ok);
  box-shadow: 0 0 0 4px var(--status-ok-fill);
}

/* Disabled records read as dimmed, not deleted. */
.role-card.is-disabled,
.is-disabled {
  opacity: 0.62;
}

.role-card.is-disabled h3::after {
  content: "Inactivo";
  display: inline-block;
  margin-left: var(--spacing-8);
  padding: 2px var(--spacing-10);
  border-radius: var(--radius-buttons);
  background: var(--status-danger-fill);
  border: 1px solid var(--status-danger-edge);
  font-family: var(--font-dm-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--status-danger);
  vertical-align: middle;
}

/* ==========================================================================
   Fixes — cards, modals, top bar, mobile, selects
   ========================================================================== */

/* Every metric grid gets the card treatment, not just the ones named earlier.
   Without this the label, figure and note run together as loose text. */
.daily-operation-grid > article,
.attendance-reader-grid > article,
.attendance-metrics > article,
.attendance-shift-grid > article,
.global-stats > article,
.cards > article,
.school-numbers > article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--card-padding);
  background: var(--surface-frosted);
  border-radius: var(--radius-cards);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.daily-operation-grid > article > small,
.attendance-reader-grid > article > small {
  order: -1;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-smoke);
}

.daily-operation-grid > article > strong,
.attendance-reader-grid > article > strong {
  font-family: var(--font-dm-sans);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
  font-variant-numeric: tabular-nums;
}

.daily-operation-grid > article > span,
.attendance-reader-grid > article > span {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ash);
}

.daily-operations {
  display: block;
  padding: var(--card-padding);
  background: var(--surface-frosted);
  border-radius: var(--radius-cards);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.daily-operations-head {
  align-items: center;
  flex-wrap: wrap;
}

.daily-operations-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

.daily-operations-head small {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.daily-operations-head h3 {
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-medium);
}

.daily-operations-head p {
  font-size: 15px;
  color: var(--color-ash);
}

.daily-operation-grid {
  margin-bottom: 0;
}

.daily-operation-actions {
  padding-top: var(--spacing-20);
  margin-top: var(--spacing-20);
  border-top: 1px solid var(--edge-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Modals — a column, never a grid
   -------------------------------------------------------------------------- */

dialog,
.attendance-dialog,
.permission-modal,
.role-dialog,
.print-dialog {
  max-height: min(86vh, 900px);
  margin: auto;
  overflow: hidden;
}

.dialog-form,
.global-dialog-form,
.role-editor,
.attendance-dialog > form,
.print-dialog > form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  max-height: inherit;
  min-height: 0;
}

/* The header and the footer stay put; the body between them scrolls. */
.dialog-form > .dialog-head,
.global-dialog-form > .dialog-head,
.attendance-dialog-head {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.dialog-form > .form-actions,
.global-dialog-form > .form-actions,
.attendance-dialog-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.dialog-form > fieldset,
.global-dialog-form > fieldset {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 0;
  padding-top: var(--spacing-20);
}

.dialog-form > label,
.global-dialog-form > label {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.dialog-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

.dialog-head small {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  color: var(--color-smoke);
}

/* A checkbox line inside a form is a control row, not a caption. */
.switch-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  font-size: 15px;
  letter-spacing: normal;
  color: var(--color-ash);
  cursor: pointer;
}

.switch-line:hover {
  border-color: var(--edge-hairline-strong);
}

.switch-line input {
  flex: 0 0 auto;
}

.permission-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
}

.permission-grid label b {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.permission-grid label small {
  font-size: var(--text-caption);
  color: var(--color-smoke);
  word-break: break-word;
}

@media (max-width: 620px) {
  dialog,
  .attendance-dialog,
  .role-dialog,
  .print-dialog {
    padding: var(--spacing-20);
  }

  .form-actions,
  .attendance-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-actions .btn,
  .attendance-dialog-actions button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Top bar — the page name shows on every screen
   -------------------------------------------------------------------------- */

.main:has(.title-row) > header > div:first-of-type {
  display: flex;
}

.main > header > div:first-of-type {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Mobile drawer — solid panel, plain scrim, nothing blurred behind it
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .side {
    background: var(--surface-graphite);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-subtle);
  }

  .sidebar-backdrop {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* A sticky bar with a backdrop-filter paints over the drawer on iOS,
       so it drops its blur while the drawer is open. */
  .app.drawer-open .main > header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface-graphite);
    z-index: 10;
  }

  .app.drawer-open {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Selects — the native control never matched the dark surface
   -------------------------------------------------------------------------- */

select,
.credential-filter,
.role-switcher select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--spacing-40);
  background-color: var(--surface-graphite);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23b2b2b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-16) center;
  color: var(--color-bone);
  cursor: pointer;
}

select:hover {
  background-color: #1c1c1c;
}

select:disabled {
  color: var(--color-slate);
  opacity: 0.6;
  cursor: not-allowed;
}

/* The dropdown list itself is painted by the OS — these keep it dark. */
select option,
select optgroup {
  background-color: var(--surface-graphite);
  color: var(--color-bone);
}

/* Date and time inputs ship a light-mode picker icon by default. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  background-color: var(--surface-frosted-soft);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.5;
}

/* Autofill repaints inputs white in WebKit; this holds the dark surface. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-bone);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-graphite) inset;
  caret-color: var(--color-bone);
}

.daily-operations-head {
  align-items: flex-start;
}

/* These rows inherit flex-direction:column from the generic form-label rule
   because they never restate it — hence the checkbox stacked over its text. */
.module-grid label,
.permission-grid label,
.token-regenerate,
.subject-enroll,
.switch-line,
.check,
.switch-row,
.remember,
.print-option,
.credential-select,
.student-item,
.feature,
.brand,
.parent-brand,
.global-brand,
.school-brand {
  flex-direction: row;
}

.module-grid label span,
.permission-grid label span,
.token-regenerate span,
.subject-enroll span {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Labels that are direct children of a form column keep the stacked layout. */
.form-grid > label,
.dialog-form > label,
.global-dialog-form > label {
  flex-direction: column;
  align-items: stretch;
}

.dialog-form > label.switch-line,
.global-dialog-form > label.switch-line {
  flex-direction: row;
  align-items: center;
}

/* A modal opened with showModal() centres itself; keep the body scrollable. */
dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog::-webkit-scrollbar,
.dialog-form > fieldset::-webkit-scrollbar {
  width: 8px;
}

/* The form fills the dialog and the permission list is the only part that
   scrolls, so the header and the action row stay visible. */
dialog[open] {
  padding: 0;
}

.dialog-form,
.global-dialog-form,
.role-editor,
.attendance-dialog > form,
.print-dialog > form {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  gap: 0;
}

.dialog-form > .dialog-head,
.global-dialog-form > .dialog-head,
.attendance-dialog-head {
  padding: var(--spacing-28) var(--spacing-28) var(--spacing-20);
  margin: 0;
}

.dialog-form > label,
.global-dialog-form > label,
.dialog-form > .global-form-grid,
.global-dialog-form > .global-form-grid,
.dialog-form > .form-grid,
.attendance-dialog .attendance-stack {
  flex: 0 0 auto;
  padding: 0 var(--spacing-28);
  margin-bottom: var(--spacing-20);
}

.dialog-form > label:first-of-type,
.global-dialog-form > label:first-of-type {
  margin-top: var(--spacing-4);
}

.dialog-form > fieldset,
.global-dialog-form > fieldset {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: var(--spacing-20) var(--spacing-28);
  border-top: 1px solid var(--edge-hairline);
  border-bottom: 1px solid var(--edge-hairline);
}

.dialog-form > .form-actions,
.global-dialog-form > .form-actions,
.attendance-dialog-actions {
  flex: 0 0 auto;
  padding: var(--spacing-20) var(--spacing-28);
  margin: 0;
  border-top: 0;
  background: var(--surface-graphite);
}

/* When there is no scrolling fieldset, the action row keeps its divider. */
.dialog-form > fieldset + .form-actions,
.global-dialog-form > fieldset + .form-actions {
  border-top: 0;
}

.dialog-form > label + .form-actions,
.dialog-form > .form-grid + .form-actions,
.global-dialog-form > label + .form-actions,
.attendance-stack + .attendance-dialog-actions {
  border-top: 1px solid var(--edge-hairline);
}

.attendance-dialog > form > .attendance-stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Confirm dialogs have no form wrapper — they keep their own padding. */
.attendance-confirm-dialog {
  padding: var(--spacing-28);
}

.attendance-confirm-dialog .attendance-dialog-actions {
  padding: var(--spacing-20) 0 0;
  background: transparent;
}

/* `dialog [data-close]` also matched the footer's Cancel button and squashed
   it to a 34px circle — the icon treatment belongs to the header button only. */
dialog [data-close] {
  width: auto;
  height: auto;
  flex: 0 1 auto;
  border-radius: var(--boton-radio);
  min-height: var(--boton-alto);
}

.dialog-close,
.attendance-icon-button,
.dialog-head [data-close],
.attendance-dialog-head [data-close] {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

/* The switch row keeps its own padding; the dialog's gutter becomes a margin. */
.dialog-form > label.switch-line,
.global-dialog-form > label.switch-line {
  padding: var(--spacing-12) var(--spacing-16);
  margin: 0 var(--spacing-28) var(--spacing-20);
}

/* --------------------------------------------------------------------------
   Stacking — the drawer must sit above its own scrim
   --------------------------------------------------------------------------
   .app / .parent-shell / .global-app carried `z-index: 1`, which opened a
   stacking context and trapped the sidebar (z-index 40) inside it. The scrim
   is a direct child of <body>, so it painted over the whole shell — the
   drawer looked dimmed. Pushing the spotlight behind everything lets the
   shells drop their z-index and the drawer rise above the scrim again. */

body::before {
  z-index: -1;
}

.app,
.parent-shell,
.global-app {
  z-index: auto;
}

.sidebar-backdrop {
  z-index: 60;
}

.side {
  z-index: 70;
}

@media (max-width: 760px) {
  .app.drawer-open .main > header {
    z-index: 5;
  }
}

/* ==========================================================================
   Module alignment pass · 2026-09-02
   ========================================================================== */

/* Roles: give the dialog a definite flex height. A max-height alone leaves the
   browser without a scrollable flex basis when the permission list is long. */
.role-dialog[open] {
  width: min(860px, calc(100vw - 32px));
  height: min(86dvh, 820px);
  max-height: min(86dvh, 820px);
}

.role-dialog .role-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.role-editor > fieldset {
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.role-editor .permission-grid {
  align-content: start;
}

/* School settings: preview is intentionally compact; the form owns the rest
   of the available width and keeps paired fields aligned. */
.school-settings-layout {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-24);
}

.school-settings-layout > * {
  min-width: 0;
}

.school-settings-layout .school-preview-card {
  position: sticky;
  top: 104px;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.school-settings-layout .school-preview-card::before {
  content: "";
  width: 72px;
  height: 4px;
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-buttons);
  background: var(--school-accent, var(--status-info));
}

.school-settings-layout .school-preview-logo {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  font-size: 20px;
}

.school-settings-layout .school-preview-card h3,
.school-settings-layout .school-preview-card p,
.school-settings-layout .school-preview-card small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.settings-form .settings-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form .settings-fields > label.full {
  grid-column: 1 / -1;
}

/* Dashboard accents: colour is secondary and semantic; figures remain the
   same white to preserve hierarchy. */
.metric-card,
.operation-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge-hairline);
}

.metric-card::before,
.operation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--metric-accent, var(--status-info));
}

.metric-blue {
  --metric-accent: #60a5fa;
}
.metric-green {
  --metric-accent: #4ade80;
}
.metric-orange {
  --metric-accent: #fb923c;
}
.metric-purple {
  --metric-accent: #a78bfa;
}
.cards article:has(i.blue) {
  --metric-accent: #60a5fa;
}
.cards article:has(i.green) {
  --metric-accent: #4ade80;
}
.cards article:has(i.orange) {
  --metric-accent: #fb923c;
}
.cards article:has(i.purple) {
  --metric-accent: #a78bfa;
}
.cards article:has(i.blue),
.cards article:has(i.green),
.cards article:has(i.orange),
.cards article:has(i.purple) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge-hairline);
}
.cards article:has(i.blue)::before,
.cards article:has(i.green)::before,
.cards article:has(i.orange)::before,
.cards article:has(i.purple)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--metric-accent);
}
.operation-present {
  --metric-accent: var(--status-ok);
}
.operation-late {
  --metric-accent: var(--status-warn);
}
.operation-missing {
  --metric-accent: var(--status-danger);
}
.operation-unknown {
  --metric-accent: var(--status-info);
}

.reader-health {
  flex-direction: row;
  justify-content: flex-start;
  align-self: center;
}

.daily-operations-head {
  align-items: center;
}

/* Reusable semantic labels. */
.shift-badge,
.category-badge,
.credential-code,
.student-code {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.shift-badge,
.category-badge {
  min-height: 28px;
  gap: var(--spacing-8);
  padding: 4px var(--spacing-12);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-buttons);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.shift-badge::before,
.category-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: var(--radius-buttons);
  background: currentColor;
}

.shift-morning {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.34);
}

.shift-afternoon {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.34);
}

.shift-evening {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.34);
}

.shift-neutral {
  color: var(--color-smoke);
  background: var(--surface-frosted-soft);
}

.category-report {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.34);
}

.category-citation {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.34);
}

/* RFID: form and inventory have different jobs, so they receive independent
   columns instead of sharing a generic stacked card layout. */

.rfid-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.rfid-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(480px, 1.4fr);
  align-items: start;
  gap: var(--spacing-24);
}

.rfid-layout > .card {
  min-width: 0;
  margin: 0;
}

.credential-code,
.student-code,
.student-curp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.025em;
}

.credential-code {
  padding: 5px var(--spacing-10);
  border-radius: 8px;
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  color: var(--color-bone);
}

/* Students: controls and table headings now share the same column start. */

.student-table-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(140px, 180px) minmax(110px, 140px) auto;
  align-items: end;
  gap: var(--spacing-16);
}

.student-table-toolbar > label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-smoke);
}

.student-table-toolbar .table-toolbar-actions {
  min-height: 44px;
  justify-content: flex-end;
}

.student-sort-button {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
}

.student-sort-button:hover,
.student-sort-button.active {
  border-color: transparent;
  color: var(--color-bone);
}

[data-student-table] th:last-child,
[data-student-table] td:last-child {
  text-align: right;
}

.student-name-cell {
  min-width: 220px;
}

.student-action-cell .btn {
  margin: 0;
}

@media (max-width: 1120px) {
  .rfid-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-table-toolbar {
    grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(130px, 170px));
  }

  .student-table-toolbar .table-toolbar-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .school-settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .school-settings-layout .school-preview-card {
    position: static;
  }
}

@media (max-width: 680px) {
  .role-dialog[open] {
    width: calc(100vw - 20px);
    height: 94dvh;
    max-height: 94dvh;
  }

  .settings-form .settings-fields,
  .student-table-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-form .settings-fields > label.full,
  .student-table-toolbar .table-toolbar-actions {
    grid-column: auto;
  }

  .rfid-summary {
    width: 100%;
    justify-content: flex-start;
  }

  .reader-health {
    width: 100%;
    align-self: stretch;
  }
}

/* ==========================================================================
   Record, access and module hierarchy pass · 2026-09-02
   ========================================================================== */

/* Dashboard-inspired module banners. They share structure, while hue identifies
   the area so every screen does not look like a copy of the dashboard. */
.module-banner {
  position: relative;
  align-items: flex-end;
  min-height: 190px;
  padding: var(--spacing-40);
  margin-bottom: var(--spacing-24);
  border-radius: var(--radius-largecards);
  overflow: hidden;
  isolation: isolate;
}

.module-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -100px;
  top: -150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(1px);
}

.banner-academic {
  background: linear-gradient(112deg, #b45309 0%, #c2414f 48%, #6d28d9 100%);
}

.banner-teachers {
  background: linear-gradient(112deg, #047857 0%, #0f766e 48%, #2563eb 100%);
}

.banner-grades {
  background: linear-gradient(112deg, #be185d 0%, #9333ea 50%, #4f46e5 100%);
}

.banner-access {
  background: linear-gradient(112deg, #4338ca 0%, #2563eb 50%, #0891b2 100%);
}

.banner-settings {
  background: linear-gradient(112deg, #334155 0%, #0f766e 55%, #059669 100%);
}

.banner-students {
  background: linear-gradient(112deg, #0369a1 0%, #0284c7 48%, #0d9488 100%);
}

.banner-enrollment {
  background: linear-gradient(112deg, #047857 0%, #059669 48%, #0891b2 100%);
}

.banner-families {
  background: linear-gradient(112deg, #a16207 0%, #c2410c 48%, #be185d 100%);
}

.banner-rfid {
  background: linear-gradient(112deg, #0e7490 0%, #2563eb 50%, #4f46e5 100%);
}

.banner-credentials {
  background: linear-gradient(112deg, #1d4ed8 0%, #4f46e5 52%, #7e22ce 100%);
}

.banner-organization {
  background: linear-gradient(112deg, #475569 0%, #4338ca 52%, #0f766e 100%);
}

.banner-reports {
  background: linear-gradient(112deg, #9a3412 0%, #dc2626 52%, #be185d 100%);
}

.banner-citations {
  background: linear-gradient(112deg, #be123c 0%, #be185d 48%, #7e22ce 100%);
}

.banner-analytics {
  background: linear-gradient(112deg, #0e7490 0%, #2563eb 50%, #7c3aed 100%);
}

.banner-attendance {
  background: linear-gradient(112deg, #166534 0%, #047857 48%, #0e7490 100%);
}

.module-banner > div:first-child {
  max-width: 68ch;
}

.module-banner > div:first-child > small {
  display: block;
  margin-bottom: var(--spacing-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.76);
}

.module-banner h2 {
  color: var(--color-snow-white);
}

.module-banner p {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.84);
}

.module-banner .btn.ghost,
.module-banner .tenant-address {
  color: var(--color-snow-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
}

.attendance-module-toolbar.module-banner {
  margin-bottom: 0;
  padding: var(--spacing-40);
  border: 0;
}

.attendance-module-toolbar.module-banner .attendance-module-actions {
  align-self: flex-end;
}

.attendance-module-toolbar.module-banner .attendance-reader-status,
.attendance-module-toolbar.module-banner .attendance-icon-button {
  color: var(--color-snow-white);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.module-banner .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.module-banner .tenant-address {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px var(--spacing-16);
  border-radius: var(--radius-buttons);
  overflow-wrap: anywhere;
}

/* Student record: one clear vertical flow instead of two unequal forms. */
.student-record-hero {
  align-items: center;
  padding: var(--spacing-40);
  margin-bottom: var(--spacing-24);
  border: 0;
  border-radius: var(--radius-largecards);
  background: linear-gradient(112deg, #075985 0%, #0f766e 52%, #047857 100%);
}

.student-record-hero .student-main {
  flex: 1 1 420px;
}

.student-record-hero .student-avatar {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  color: #075985;
  background: var(--color-snow-white);
  border-radius: 18px;
  font-weight: var(--font-weight-semibold);
}

.student-record-hero .back-link {
  width: fit-content;
  margin-bottom: var(--spacing-12);
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.28);
}

.student-record-hero .student-title h2,
.student-record-hero .student-meta span strong {
  color: var(--color-snow-white);
}

.student-record-hero .student-meta > span:not(.shift-badge) {
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.student-record-hero .student-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 520px;
  max-width: 650px;
}

.student-record-hero .summary-item {
  min-height: 126px;
  padding: var(--spacing-20);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

.student-record-hero .summary-item small,
.student-record-hero .summary-item > span {
  color: rgba(255, 255, 255, 0.74);
}

.student-record-hero .summary-item > strong {
  color: var(--color-snow-white);
}

.student-record-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.record-section-nav {
  position: sticky;
  top: 12px;
  z-index: 4;
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  overflow-x: auto;
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-8);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: color-mix(in srgb, var(--surface-frosted) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  scrollbar-width: thin;
}

.record-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--spacing-12);
  border-radius: var(--radius-ui);
  color: var(--color-smoke);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.record-section-nav a:hover,
.record-section-nav a:focus-visible {
  color: var(--color-bone);
  background: var(--status-info-fill);
}

.record-section-nav button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--spacing-14);
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--color-smoke);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.record-section-nav button:hover,
.record-section-nav button:focus-visible {
  color: var(--color-bone);
  background: var(--status-info-fill);
  outline: none;
}

.record-section-nav button.active {
  color: var(--color-bone);
  background: var(--status-info-fill);
  border-color: var(--status-info-edge);
}

.tab-panel-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.tab-panel-heading small {
  color: var(--color-smoke);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
}

.tab-panel-heading h3,
.tab-panel-heading p {
  margin: 0;
}

.tab-panel-heading p {
  color: var(--color-slate);
  font-size: 14px;
  line-height: 1.5;
}

.tab-next-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-12);
}

.tab-next-step-list > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-height: 112px;
  padding: var(--spacing-16);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted);
}

.tab-next-step-list span {
  color: var(--status-info);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.tab-next-step-list b {
  color: var(--color-bone);
  font-size: 14px;
}

.tab-next-step-list small {
  color: var(--color-smoke);
  font-size: 12px;
  line-height: 1.4;
}

[data-tab-panel][hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .tab-next-step-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.enrollment-history-panel {
  scroll-margin-top: 84px;
}

.enrollment-history-panel .panel-head > div > small {
  display: block;
  margin-bottom: 6px;
  color: var(--status-info);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
}

.enrollment-history-status small {
  color: var(--color-smoke);
  font-size: var(--text-caption);
}

.enrollment-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.enrollment-history-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--spacing-16);
  align-items: center;
  padding: var(--spacing-16);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
}

.enrollment-history-item.is-current {
  border-color: var(--status-info-edge);
  background: linear-gradient(110deg, var(--status-info-fill), var(--surface-frosted-soft));
}

.enrollment-cycle-marker {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #bfdbfe;
  background: var(--status-info-fill);
  border: 1px solid var(--status-info-edge);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.enrollment-history-main {
  min-width: 0;
}

.enrollment-history-main > div {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.enrollment-history-main p {
  margin: 4px 0 0;
  color: var(--color-smoke);
  font-size: var(--text-caption);
}

.enrollment-history-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.student-documents-panel,
.student-followup-panel {
  scroll-margin-top: 84px;
}

.document-process-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin: var(--spacing-20) 0;
  padding: var(--spacing-16);
  border: 1px solid var(--status-info-edge);
  border-radius: var(--radius-ui);
  background: var(--status-info-fill);
}

.document-process-summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.document-process-summary small,
.document-process-summary > span {
  color: var(--color-smoke);
  font-size: var(--text-caption);
}

.document-process-summary > span strong {
  color: var(--color-bone);
  font-size: 18px;
}

.document-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.document-checklist-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(230px, auto);
  gap: var(--spacing-14);
  align-items: center;
  padding: var(--spacing-14);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
}

.document-checklist-item.is-complete {
  border-color: var(--status-ok-edge);
  background: linear-gradient(110deg, var(--status-ok-fill), var(--surface-frosted-soft));
}

.document-checklist-icon,
.followup-marker {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #bfdbfe;
  background: var(--status-info-fill);
  border: 1px solid var(--status-info-edge);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.document-checklist-icon svg {
  width: 18px;
  height: 18px;
}

.document-checklist-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.document-checklist-main small {
  color: var(--color-smoke);
  font-size: var(--text-caption);
}

.document-checklist-main input {
  width: min(100%, 460px);
  min-height: 32px;
  margin-top: 4px;
}

.document-checklist-actions {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 142px auto;
  gap: var(--spacing-8);
  align-items: center;
}

.document-checklist-actions .btn {
  min-height: 34px;
}

.student-followup-panel {
  border-color: rgba(14, 116, 144, 0.34);
  background: linear-gradient(145deg, rgba(14, 116, 144, 0.08), var(--surface-frosted-soft) 44%);
}

.followup-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-14);
  margin: var(--spacing-20) 0 var(--spacing-28);
  padding: var(--spacing-20);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
}

.followup-form > label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  color: var(--color-smoke);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.followup-form > .wide {
  grid-column: 1 / -1;
}

.followup-form .form-actions {
  grid-column: 1 / -1;
}

.followup-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.followup-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--spacing-14);
  align-items: start;
  padding: var(--spacing-16);
  border-left: 3px solid var(--status-info-edge);
  border-top: 1px solid var(--edge-hairline);
  border-right: 1px solid var(--edge-hairline);
  border-bottom: 1px solid var(--edge-hairline);
  border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
  background: var(--surface-frosted-soft);
}

.followup-entry.is-pending {
  border-left-color: var(--status-warn);
}

.followup-entry-body {
  min-width: 0;
}

.followup-entry-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  flex-wrap: wrap;
}

.followup-entry-head span,
.followup-entry-head small,
.followup-related {
  color: var(--color-smoke);
  font-size: var(--text-caption);
}

.followup-entry-head small {
  margin-left: auto;
}

.followup-entry-body > p {
  margin: var(--spacing-10) 0;
  color: var(--color-bone);
  white-space: normal;
}

.followup-detail {
  display: flex;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  padding: var(--spacing-10) var(--spacing-12);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-smoke);
  font-size: var(--text-caption);
}

.followup-detail b {
  flex: 0 0 auto;
  color: var(--color-bone);
}

.student-record-stack > .panel {
  margin: 0;
}

.student-data-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-panel-heading {
  margin: 0;
  padding: 0 0 var(--spacing-20);
}

.tutors-panel {
  display: block;
}

.tutor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20);
}

.tutor-grid .tutor-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  min-width: 0;
  padding: var(--spacing-20);
  margin: 0;
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-cards);
}

.tutor-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--edge-hairline);
}

.tutor-card-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tutor-card-head > div > span {
  font-family: var(--font-geist);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.tutor-card-head > div > small {
  display: block;
  color: var(--status-info);
}

.tutor-card-head > b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--radius-ui);
  color: #bfdbfe;
  background: var(--status-info-fill);
  border: 1px solid var(--status-info-edge);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.student-name-cell > small {
  display: block;
  margin-top: 4px;
  color: var(--color-smoke);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
}

.grade-reference-panel {
  scroll-margin-top: 96px;
  border-color: rgba(124, 58, 237, 0.34);
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.08), var(--surface-frosted-soft) 42%);
}

.grade-reference-panel .panel-head > div > small {
  display: block;
  margin-bottom: 6px;
  color: #a78bfa;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
}

.grade-reference-table td:first-child small {
  display: block;
  margin-top: 4px;
  color: var(--color-smoke);
}

.grade-reference-table tr.is-own-subject td {
  background: rgba(124, 58, 237, 0.08);
}

.grade-reference-value {
  display: inline-grid;
  min-width: 38px;
  min-height: 32px;
  place-items: center;
  border-radius: var(--radius-ui);
  color: var(--color-bone);
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.grade-reference-value.is-ok {
  color: var(--status-ok);
  background: var(--status-ok-fill);
  border-color: var(--status-ok-edge);
}

.grade-reference-value.is-warn,
.grade-reference-value.is-danger {
  color: var(--status-warn);
  background: var(--status-warn-fill);
  border-color: var(--status-warn-edge);
}

.grade-reference-value.is-danger {
  color: var(--status-danger);
  background: var(--status-danger-fill);
  border-color: var(--status-danger-edge);
}

.tutor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.tutor-fields > label:not(.check) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-smoke);
}

.tutor-fields > .wide {
  grid-column: 1 / -1;
}

.tutor-fields > .check {
  min-height: 38px;
  padding: var(--spacing-8) var(--spacing-10);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
}

.tutor-access-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-14);
  padding: var(--spacing-16);
  margin-top: auto;
  border: 1px solid var(--status-info-edge);
  background: var(--status-info-fill);
}

.tutor-access-box > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tutor-access-box small {
  color: #bfdbfe;
}

.student-record-stack + .grades-panel {
  margin-top: var(--spacing-24);
}

/* Users: restore the visual identity of rows, role cards and dialogs. */
.user-identity {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 190px;
}

.user-identity .user-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  color: #bfdbfe;
  background: var(--status-info-fill);
  border: 1px solid var(--status-info-edge);
}

.access-role-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-height: 230px;
  padding: var(--spacing-20);
  background: var(--surface-frosted);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-cards);
  backdrop-filter: blur(4px);
}

.access-role-card .role-card-head {
  justify-content: flex-start;
  align-items: flex-start;
}

.access-role-card .role-card-head > div {
  min-width: 0;
}

.access-role-card .role-card-head h3 {
  font-size: var(--text-subheading);
}

.access-role-card .role-card-head p {
  margin-top: var(--spacing-4);
  color: var(--color-ash);
}

.access-role-card .role-card-meta {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  margin-top: auto;
}

.access-role-card .role-card-meta b {
  font-size: var(--text-heading-sm);
}

.access-role-card > .btn {
  width: 100%;
}

.user-dialog[open] {
  width: min(680px, calc(100vw - 32px));
  /* Antes era `height: min(86dvh, 760px)`, una altura fija. Con dos roles en
       la lista el diálogo seguía midiendo 760px y dejaba 300px de vacío bajo
       los botones. Con `auto` se ajusta al contenido, y el max-height mantiene
       el tope para escuelas con muchos roles. */
  height: fit-content;
  max-height: min(86dvh, 760px);
}

.user-dialog .user-dialog-form {
  width: 100%;
  /* Era `height: 100%`, que obligaba al diálogo a estirarse hasta su tope aun
       con poco contenido. Con `auto` el formulario mide lo que ocupa y el
       diálogo se ajusta; el max-height del diálogo sigue poniendo el límite. */
  height: auto;
  min-height: 0;
}

.user-dialog-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
  padding: 0 var(--spacing-28);
  margin: 0 0 var(--spacing-20);
}

.user-dialog-fields > label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

.user-dialog-fields > label:last-child {
  grid-column: 1 / -1;
}

.user-dialog .switch-list {
  align-content: start;
}

.permission-dialog[open] {
  width: min(760px, calc(100vw - 32px));
  height: min(86dvh, 780px);
  max-height: min(86dvh, 780px);
}

.permission-dialog .permission-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--spacing-28);
}

.permission-dialog .permission-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Configuration: horizontal identity and grouped fields. */
.school-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.school-settings-page > .panel {
  margin: 0;
}

.school-identity-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  border: 1px solid var(--edge-hairline);
  overflow: hidden;
}

.school-identity-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--school-accent, var(--status-info));
}

.school-identity-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  min-width: 0;
}

.school-identity-main .school-preview-logo {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  border-radius: 18px;
}

.school-identity-main small {
  color: var(--color-smoke);
}

.school-identity-main h3 {
  margin-top: var(--spacing-4);
}

.school-logo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-8);
  text-align: right;
}

.school-settings-page .settings-form {
  display: block;
}

.settings-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20);
}

.settings-section {
  min-width: 0;
  padding: var(--spacing-20);
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-cards);
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--edge-hairline);
}

.settings-section-head > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-ui);
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.settings-section-head h4 {
  font-size: 16px;
}

.settings-section-head p {
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.settings-fields > label,
.color-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-smoke);
}

.settings-fields > .full {
  grid-column: 1 / -1;
}

.settings-appearance-section {
  grid-column: 1 / -1;
}

.color-field {
  flex-direction: row;
  align-items: center;
  width: fit-content;
  padding: var(--spacing-14);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
}

.color-field input[type="color"] {
  width: 58px;
  height: 46px;
  flex: 0 0 58px;
  padding: 3px;
}

.color-field > span {
  display: flex;
  flex-direction: column;
}

/* Group and shift are one visual unit without collapsing into one line of text. */
.group-heading,
.grade-context {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  flex-wrap: wrap;
}

.group-heading .shift-badge,
.grade-context .shift-badge {
  flex: 0 0 auto;
}

.group-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
  min-width: 108px;
}

.grade-context {
  margin-top: var(--spacing-8);
  color: var(--color-ash);
  font-size: 14px;
}

.grade-context .group-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

/* Table actions look clickable even before hover. */
.table-action-cell {
  text-align: right;
  white-space: nowrap;
}

td .table-action,
td > .btn.ghost,
td > button.btn.ghost {
  min-height: 38px;
  padding: 0 14px;
  color: var(--color-snow-white);
  background: var(--boton-2);
  border-color: var(--boton-2-borde);
  box-shadow: none;
}

td .table-action::after,
td > .btn.ghost::after,
td > button.btn.ghost::after {
  content: "›";
  margin-left: 2px;
  font-size: 18px;
  line-height: 1;
}

td .table-action:hover,
td > .btn.ghost:hover,
td > button.btn.ghost:hover {
  color: var(--color-snow-white);
  background: var(--boton-2-hover);
  border-color: var(--boton-2-borde-hover);
}

@media (max-width: 1050px) {
  .student-record-hero .student-summary {
    max-width: none;
  }

  .student-data-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tutor-grid,
  .settings-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-appearance-section {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .module-banner,
  .student-record-hero {
    min-height: 0;
    padding: var(--spacing-28);
    border-radius: var(--radius-cards);
  }

  .module-banner .title-actions,
  .module-banner .title-actions .btn,
  .module-banner .credential-title-actions,
  .module-banner .credential-title-actions .btn,
  .module-banner > .btn {
    width: 100%;
  }

  .module-banner .credential-title-actions,
  .module-banner .attendance-module-actions {
    align-items: stretch;
  }

  .student-record-hero .student-main {
    flex-direction: column;
  }

  .student-record-hero .student-summary,
  .student-data-form,
  .tutor-fields,
  .settings-fields,
  .user-dialog-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-record-hero .student-summary {
    width: 100%;
  }

  .record-section-nav {
    top: 8px;
    margin-bottom: var(--spacing-16);
  }

  .document-process-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-checklist-item,
  .followup-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-checklist-icon {
    width: 34px;
    height: 34px;
  }

  .document-checklist-actions {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr);
  }

  .document-checklist-actions .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .followup-form > .wide,
  .followup-form .form-actions {
    grid-column: auto;
  }

  .followup-entry-head small {
    margin-left: 0;
  }

  .enrollment-history-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .enrollment-history-status {
    grid-column: 2;
    align-items: flex-start;
  }

  .tutor-fields > .wide,
  .settings-fields > .full,
  .user-dialog-fields > label:last-child {
    grid-column: auto;
  }

  .tutor-access-box,
  .school-identity-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .tutor-access-box .btn,
  .school-logo-actions .file-picker {
    width: 100%;
  }

  .school-logo-actions {
    align-items: stretch;
    text-align: left;
  }

  .user-dialog[open],
  .permission-dialog[open] {
    width: calc(100vw - 20px);
    height: 94dvh;
    max-height: 94dvh;
  }
}

/* ========================================================================== 
   Carga masiva de alumnos
   ========================================================================== */

.bulk-import-banner {
  align-items: flex-end;
}

.bulk-import-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: var(--spacing-8);
  overflow-x: auto;
  padding-bottom: var(--spacing-4);
}

.bulk-import-columns span {
  min-width: 110px;
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
  color: var(--color-bone);
  font-family: var(--font-dm-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: nowrap;
}

.bulk-import-columns span:nth-child(5),
.bulk-import-columns span:nth-child(6) {
  min-width: 210px;
}

.bulk-import-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-12);
  margin-top: var(--spacing-20);
}

.bulk-import-notes > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-14);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.025);
}

.bulk-import-notes > div b {
  font-size: 14px;
}

.bulk-file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: 235px;
  padding: var(--spacing-28);
  border: 1px dashed var(--edge-hairline-strong);
  border-radius: var(--radius-cards);
  background: var(--surface-frosted-soft);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.bulk-file-drop:hover,
.bulk-file-drop:focus-within {
  border-color: rgba(229, 229, 229, 0.55);
  background: var(--surface-frosted);
}

.bulk-file-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--color-snow-white);
  color: var(--color-graphite);
  font-family: var(--font-dm-sans);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.bulk-file-drop strong {
  margin-top: var(--spacing-4);
  font-size: var(--text-subheading);
}

.bulk-file-drop input[type="file"] {
  width: min(520px, 100%);
  margin-top: var(--spacing-8);
  padding: var(--spacing-10);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-ash);
  cursor: pointer;
}

.bulk-file-drop input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: var(--spacing-12);
  padding: 0 var(--spacing-14);
  border: 0;
  border-radius: var(--radius-buttons);
  background: var(--color-snow-white);
  color: var(--color-graphite);
  font-family: var(--font-dm-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.bulk-file-name {
  display: block;
  max-width: 100%;
  color: var(--color-smoke);
  font-size: var(--text-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-upload-actions {
  margin-top: var(--spacing-20);
}

.bulk-import-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-20);
}

.bulk-import-stats > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-height: 92px;
  padding: var(--spacing-16);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-ui);
  background: var(--surface-frosted-soft);
}

.bulk-import-stats > div b {
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bulk-import-stats > .is-ready {
  border-color: var(--status-ok-edge);
  background: var(--status-ok-fill);
}

.bulk-import-stats > .is-ready b {
  color: var(--status-ok);
}

.bulk-import-stats > .is-duplicate {
  border-color: var(--status-warn-edge);
  background: var(--status-warn-fill);
}

.bulk-import-stats > .is-duplicate b {
  color: var(--status-warn);
}

.bulk-import-stats > .is-error {
  border-color: var(--status-danger-edge);
  background: var(--status-danger-fill);
}

.bulk-import-stats > .is-error b {
  color: var(--status-danger);
}

.bulk-preview-table {
  min-width: 1420px;
}

.bulk-preview-table tbody tr.bulk-row-ready td:first-child {
  box-shadow: inset 3px 0 0 var(--status-ok);
}

.bulk-preview-table tbody tr.bulk-row-duplicate td:first-child {
  box-shadow: inset 3px 0 0 var(--status-warn);
}

.bulk-preview-table tbody tr.bulk-row-error td:first-child {
  box-shadow: inset 3px 0 0 var(--status-danger);
}

.bulk-result-cell {
  min-width: 235px;
}

.bulk-result-cell small {
  margin-top: var(--spacing-6);
  max-width: 300px;
  line-height: 1.35;
  white-space: normal;
}

.bulk-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--spacing-10);
  border: 1px solid var(--edge-hairline);
  border-radius: var(--radius-buttons);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.bulk-status-ready {
  color: var(--status-ok);
  border-color: var(--status-ok-edge);
  background: var(--status-ok-fill);
}

.bulk-status-duplicate {
  color: var(--status-warn);
  border-color: var(--status-warn-edge);
  background: var(--status-warn-fill);
}

.bulk-status-error {
  color: var(--status-danger);
  border-color: var(--status-danger-edge);
  background: var(--status-danger-fill);
}

.bulk-preview-limit {
  margin-top: var(--spacing-14);
  color: var(--color-slate);
  font-size: var(--text-caption);
}

.bulk-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-10);
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--edge-hairline);
  flex-wrap: wrap;
}

.bulk-confirm-actions form {
  display: inline-flex;
}

@media (max-width: 980px) {
  .bulk-import-notes,
  .bulk-import-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bulk-import-notes,
  .bulk-import-stats {
    grid-template-columns: 1fr;
  }

  .bulk-file-drop {
    min-height: 210px;
    padding: var(--spacing-20);
  }

  .bulk-confirm-actions,
  .bulk-confirm-actions form,
  .bulk-confirm-actions .btn {
    width: 100%;
  }
}

/* Mantener estos ajustes al final para que prevalezcan sobre estilos heredados. */
#enroll {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
}
#enrollmentForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 24px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  align-items: start;
}
#enrollmentForm .dialog-head,
#enrollmentForm .wide,
#enrollmentForm .form-actions {
  grid-column: 1/-1;
}
#enrollmentForm .student-selector-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 16px;
}
#enrollmentForm .student-list,
#enrollmentForm .selected-students-list {
  height: 330px;
  min-height: 330px;
  overflow: auto;
}
#enrollmentForm .student-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
}
.students-list-panel table {
  table-layout: fixed;
  min-width: 1080px;
}
.bulk-preview-table {
  table-layout: fixed;
  min-width: 1260px;
}
.bulk-preview-table th,
.bulk-preview-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  #enrollmentForm {
    grid-template-columns: 1fr 1fr;
  }
  #enrollmentForm .student-selector-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  #enrollmentForm {
    grid-template-columns: 1fr;
  }
  #enrollmentForm > label {
    grid-column: 1/-1;
  }
}

/* =========================================================================
   3. NAVEGACIÓN POR SECCIONES del panel escolar
   ========================================================================= */
.main > .school-section-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: var(--page-max-width, 1200px);
  margin: 0 auto 22px;
  padding: 7px;
  border: 1px solid #333846;
  border-radius: 12px;
  background: #171b24;
  box-sizing: border-box;
}
.school-section-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 8px;
  color: #b5bdce;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.school-section-tabs a:hover {
  background: #232939;
  color: #fff;
}
.school-section-tabs a[aria-current="page"] {
  background: #302944;
  color: #e7e0ff;
  border-color: #726493;
}
.school-section-tabs a:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}
@media (max-width: 650px) {
  .main > .school-section-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    gap: 4px;
  }
  .school-section-tabs a {
    flex: 0 0 auto;
    padding: 8px 12px;
  }
}

/* =========================================================================
   3. CORRECCIONES GENERALES del panel escolar
   ========================================================================= */

/* Correcciones acotadas al sistema Dimension existente. */
.teacher-directory-list a.active,
.teacher-directory-list a:hover {
  background: rgba(107, 98, 242, 0.16);
  color: var(--color-bone);
  border-color: rgba(107, 98, 242, 0.5);
}
.teacher-directory-list a b {
  color: var(--color-bone);
  font-size: 14px;
  line-height: 1.45;
}
.teacher-directory-list a small {
  color: var(--color-ash);
  font-size: 12px;
}
.teacher-directory-list a[hidden] {
  display: none;
}
.teacher-workspace {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
}
.teacher-directory {
  padding: 20px;
  border: 1px solid var(--edge-hairline);
  border-radius: 20px;
}
.teacher-main .teacher-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.teacher-main .teacher-summary article {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  border-radius: 16px;
}
.teacher-main .teacher-summary article:first-child {
  grid-column: 1/-1;
}
.teacher-main .teacher-summary article strong {
  font-size: 26px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.teacher-main .teacher-summary article:first-child strong {
  font-size: 20px;
}
.teacher-main .teacher-summary article:not(:first-child) em {
  display: none;
}
.teacher-main .teacher-summary article em {
  color: var(--color-ash);
}
.teacher-main .table-wrap {
  overflow: auto;
}
.teacher-main table {
  min-width: 760px;
}
.linked-students span {
  background: var(--surface-frosted-soft);
  color: var(--color-bone);
  border: 1px solid var(--edge-hairline);
  padding: 7px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tutor-student-picker {
  background: var(--surface-frosted-soft);
  border-color: var(--edge-hairline);
  grid-template-columns: 1fr;
}
.tutor-student-picker label,
.tutor-student-picker input,
.tutor-student-picker select {
  grid-column: 1;
}
.tutor-contact-cell small {
  color: var(--color-ash);
  overflow-wrap: anywhere;
}
.student-record-page .tutor-card {
  min-width: 0;
  background: var(--surface-frosted-soft);
  padding: 20px;
  border: 1px solid var(--edge-hairline);
  border-radius: 18px;
}
.student-record-page .tutor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.student-record-page .tutor-fields label {
  min-width: 0;
}
.student-record-page .tutor-fields label.check,
.tutor-dialog label.check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  grid-column: 1/-1;
  white-space: normal;
  line-height: 1.5;
  margin: 0;
  padding: 6px 0;
  color: var(--color-ash);
}
.student-record-page .tutor-fields input[type="checkbox"],
.tutor-dialog input[type="checkbox"],
#enrollmentForm input[type="checkbox"] {
  appearance: auto;
  display: inline-block;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--color-dusk-violet);
}
.student-record-page .tutor-access-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-frosted-soft);
  border: 1px solid var(--edge-hairline);
}
.student-record-page .tutor-access-box > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.student-record-page .tutor-access-box small {
  color: var(--color-ash);
  line-height: 1.5;
}
.attendance-view-switch {
  background: var(--surface-frosted-soft);
  border-color: var(--edge-hairline);
}
.attendance-view-switch a {
  color: var(--color-ash);
}
.attendance-view-switch a.active {
  background: rgba(107, 98, 242, 0.18);
  color: var(--color-bone);
  box-shadow: none;
}
#enrollmentForm .student-item[hidden] {
  display: none;
}
#enrollmentForm .student-item {
  color: var(--color-bone);
}
:where(.is-admin) .bulk-import-columns {
  display: flex;
  flex-wrap: wrap;
}
:where(.is-admin) .bulk-import-columns span {
  flex: 1 1 120px;
  min-height: 42px;
}
.students-list-panel .student-name-cell b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 1100px) {
  .teacher-workspace {
    grid-template-columns: 1fr;
  }
  .teacher-directory {
    position: static;
  }
  .teacher-directory-list {
    max-height: 220px;
  }
  .student-record-page .tutor-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .teacher-main .teacher-summary {
    grid-template-columns: 1fr;
  }
  .student-record-page .tutor-fields {
    grid-template-columns: 1fr;
  }
  .student-record-page .tutor-fields label {
    grid-column: 1;
  }
  .teacher-filters {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Correcciones de maquetación · 2026-09-15
   Cada bloque dice qué se veía mal y por qué.
   =========================================================================== */

/* 1 · Filas de interruptor: el nombre del rol y su descripción salían pegados
   ("Administrador escolarControl completo") porque <b> y <small> son inline y
   no había separación entre ellos. Ahora el nombre va arriba y la descripción
   debajo, que es la jerarquía que el marcado ya sugiere. */
.switch-row > span:last-child,
:where(.is-admin) .check > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.switch-row > span:last-child > small,
:where(.is-admin) .check > span:last-child > small {
  line-height: 1.45;
}

/* 2 · El contador de resultados va posicionado DENTRO del campo de búsqueda,
   así que el campo tiene que reservarle sitio; si no, el texto escrito y el
   marcador de posición le pasan por debajo. */
.student-search-container .student-search,
.credential-search-container .credential-search {
  padding-right: 110px;
}

/* 3 · Los paneles "Alumnos disponibles" y "Seleccionados" tenían alturas
   distintas porque cada uno crecía con su contenido. Igualarlos deja la
   columna derecha alineada con la izquierda en lugar de flotando. */

/* 4 · El pie con los botones vivía dentro del área que hace scroll, así que
   "Registrar inscripción" quedaba a media pantalla de distancia. Fijado abajo,
   siempre visible. */
dialog[open] form.form-grid > .form-actions,
dialog[open] form.dialog-form > .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding-top: var(--spacing-12);
  /* El relleno inferior lo pone el pie, no el formulario: si lo pusiera el
       formulario quedaría un hueco por debajo del pie por el que se ve pasar
       el contenido al desplazarse. */
  padding-bottom: var(--spacing-20);
  background: var(--surface-graphite);
  border-top: 1px solid var(--edge-hairline);
}

dialog[open] form.form-grid,
dialog[open] form.dialog-form {
  padding-bottom: 0;
}

/* 5 · La lista de permisos se corta a media tarjeta en el borde del área con
   scroll y no hay ninguna señal de que siga hacia abajo. Un poco de respiro al
   final y el desplazamiento se detiene en el borde de una tarjeta, no a mitad. */
.role-dialog fieldset,
.permission-dialog fieldset {
  padding-bottom: var(--spacing-8);
  scroll-padding-bottom: var(--spacing-16);
  overscroll-behavior: contain;
}

/* 6 · Etiquetas del menú lateral: "Organización académica" se cortaba en
   "Organización acad...". Caben en dos renglones sin ensanchar la barra. */
.sidebar nav a > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
}
.sidebar nav a {
  align-items: flex-start;
}
.sidebar nav a > i {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Teléfono
   --------------------------------------------------------------------------- */

@media (max-width: 560px) {
  /* El contador no cabe dentro del campo en pantallas estrechas: baja a su
       propia línea en lugar de encimarse con lo que el usuario escribe. */
  .student-search-container .student-results-count,
  .credential-search-container .credential-selection-summary {
    position: static;
    transform: none;
    display: block;
    margin: var(--spacing-8) 0 0;
    text-align: right;
  }
  .student-search-container .student-search,
  .credential-search-container .credential-search {
    padding-right: var(--spacing-16);
  }

  /* Los dos paneles de selección de alumnos, uno debajo del otro. */
}

/* 7 · En "Crear usuario" quedaba un vacío de ~250px bajo la lista de roles: el
   fieldset hereda `flex: 1 1 auto` de la regla genérica de diálogos y estira
   para llenar una altura que el contenido no necesita. Aquí no debe crecer. */
.user-dialog .switch-list {
  flex: 0 0 auto;
}

/* ===========================================================================
   Correcciones de maquetación · segunda ronda
   =========================================================================== */

/* 8 · Fichas de alumno encimadas en el modal de inscripción.
   `.student-list` es un flex en columna de 330px de alto con más de 300 fichas
   dentro. Como `flex-shrink` vale 1 por omisión, flexbox aplasta cada ficha
   hasta su `min-height` de 76px; el contenido que no cabe —un nombre que pasa
   a dos renglones, el aviso "Ya inscrito en este ciclo"— se sale por encima de
   la ficha vecina, porque el desbordamiento está en `visible`.
   Con `flex-shrink: 0` cada ficha conserva el alto que pide su contenido. */
#enrollmentForm .student-item,
#enrollmentForm .selected-student,
.student-list > *,
.selected-students-list > * {
  flex-shrink: 0;
}

/* 9 · Espaciado entre los bloques de una página.
   `.main` es un flex en columna SIN `gap`: la separación dependía de que cada
   bloque trajera su propio `margin-bottom`. Unos traen 32px, otros 24, otros
   22 — y `.panel` trae 0. Mientras un panel fuera el último elemento no se
   notaba; en cuanto queda seguido de otro bloque (Regularización encima del
   banner de Inscripciones) los dos se tocan sin ninguna separación.

   El espaciado pasa al contenedor, que es donde corresponde: así ningún bloque
   nuevo puede volver a olvidarse de él, y de paso el ritmo queda uniforme en
   todas las páginas en lugar de alternar entre 22, 24 y 32. */
:where(.is-admin) .main {
  gap: 24px;
}
/* Se listan por etiqueta, no con `.main > *`, porque los márgenes que hay que
   anular están puestos con selectores como `.main > header` (0-1-1) y le ganan
   en especificidad a `.main > *` (0-1-0). Si no, la cabecera sumaría sus 32px
   al gap y quedarían 56. */
:where(.is-admin) .main > header,
:where(.is-admin) .main > nav,
:where(.is-admin) .main > section,
:where(.is-admin) .main > div,
:where(.is-admin) .main > form,
:where(.is-admin) .main > article,
:where(.is-admin) .main > aside,
.main > .school-section-tabs,
:where(.is-admin) .main > * {
  margin-bottom: 0;
}

/* 10 · Cabecera fija del modal sin borde inferior.
   `.modal-simple-head` se queda fija arriba con fondo opaco, pero sin ninguna
   línea que marque dónde termina. Cuando la lista se desplaza, un renglón que
   queda a medias detrás de ella —"Seleccionar alumnos"— se lee como texto
   cortado por un error de dibujo, no como contenido pasando por debajo de una
   barra. El borde y la sombra hacen legible la superposición.

   El buscador que va debajo se fija a un `top: 96px` fijo mientras la cabecera
   mide 127px; se ajusta para que no quede una franja por la que asome el
   contenido entre los dos. */
.modal-simple-head,
:where(.is-admin) dialog[open] .dialog-head {
  border-bottom: 1px solid var(--edge-hairline);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.65);
}

#enrollmentForm .student-search-container {
  top: 104px;
  box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.55);
}

/* Que un salto por teclado o por ancla no aterrice debajo de la cabecera. */
dialog[open] form.form-grid,
dialog[open] form.dialog-form {
  scroll-padding-top: 120px;
}

/* 11 · Panel sin cuerpo: la tarjeta de "Regularización y promoción" solo tiene
   cabecera, pero `.panel-head` siempre pinta un borde inferior y reserva 20px
   de relleno más 20 de margen para separarse de un contenido que ahí no
   existe. Resultado: una línea divisoria que no divide nada y 48px de vacío.
   Cuando la cabecera es lo único que hay, no hay nada que separar. */
:where(.is-admin) .panel > .panel-head:only-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* =========================================================================
   4. SELECTOR DE ALUMNO (reportes y citatorios)
   ========================================================================= */

/* Selector de alumno con búsqueda integrada · usa los mismos tokens que los campos del sitio (dimension.css) */
.student-picker {
  position: relative;
  display: block;
  min-width: 0;
}
.student-picker select[hidden] {
  display: none !important;
}
.sp-field {
  position: relative;
  display: flex;
  align-items: center;
}
.sp-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-smoke, #b2b2b2);
  stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}
.student-picker .sp-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 70px 0 40px;
  border: 1px solid var(--edge-hairline, rgba(229, 229, 229, 0.14));
  border-radius: var(--radius-ui, 10px);
  background: var(--surface-graphite, #161616);
  color: var(--color-bone, #ededed);
  font-family: var(--font-dm-sans, inherit);
  font-size: 15px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  text-overflow: ellipsis;
  box-shadow: none;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.student-picker .sp-input::placeholder {
  color: var(--color-slate, #686868);
}
.student-picker .sp-input:hover {
  border-color: var(--edge-hairline-strong, rgba(229, 229, 229, 0.28));
}
.student-picker .sp-input:focus {
  outline: none;
  border-color: var(--edge-hairline-strong, rgba(229, 229, 229, 0.28));
  background: var(--surface-graphite, #161616);
}
.student-picker .sp-input:focus-visible {
  outline: 1px solid var(--color-hairline, #e5e5e5);
  outline-offset: 2px;
}
.sp-clear,
.sp-toggle {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icons, 4px);
  background: transparent;
  color: var(--color-smoke, #b2b2b2);
  cursor: pointer;
}
.sp-clear {
  right: 38px;
  font-size: 18px;
  line-height: 1;
}
.sp-toggle {
  right: 10px;
}
.sp-toggle svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.student-picker.is-open .sp-toggle svg {
  transform: rotate(180deg);
}
.sp-clear:hover,
.sp-toggle:hover {
  background: var(--surface-frosted, rgba(212, 212, 212, 0.1));
  color: var(--color-bone, #ededed);
}
.sp-clear[hidden] {
  display: none;
}
.sp-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--edge-hairline, rgba(229, 229, 229, 0.14));
  border-radius: var(--radius-ui, 10px);
  background: var(--surface-graphite, #161616);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.sp-panel[hidden] {
  display: none;
}
.sp-list {
  max-height: 280px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
}
.sp-list li[role="option"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--color-bone, #ededed);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.sp-list li.is-active {
  background: var(--surface-frosted, rgba(212, 212, 212, 0.1));
}
.sp-list li.is-current .sp-name::after {
  content: "✓";
  margin-left: 8px;
  color: var(--status-ok, #4ade80);
  font-weight: 600;
}
.sp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-extra {
  flex: none;
  color: var(--color-smoke, #b2b2b2);
  font-size: var(--text-caption, 13px);
  font-variant-numeric: tabular-nums;
}
.sp-list mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(107, 98, 242, 0.38);
  color: var(--color-snow-white, #fff);
}
.sp-empty {
  padding: 14px 12px;
  color: var(--color-smoke, #b2b2b2);
  font-size: 14px;
  list-style: none;
}
.sp-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--edge-hairline, rgba(229, 229, 229, 0.14));
  color: var(--color-slate, #686868);
  font-size: 12px;
}

/* =========================================================================
   5. PÁGINA · Alumnos
   ========================================================================= */
/* Vista compacta y responsive exclusiva del módulo de alumnos. */
.students-page {
  --students-gap: 14px;
}

.students-page .students-banner {
  min-height: 0;
  padding: 22px 24px;
  margin-bottom: 18px;
  align-items: center;
}

.students-page .students-banner h2 {
  margin: 2px 0 4px;
  font-size: clamp(25px, 2.1vw, 32px);
}

.students-page .students-banner p {
  margin-top: 4px;
  max-width: 720px;
}

.students-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.students-header-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.students-mini-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  white-space: nowrap;
}

.students-mini-stat b {
  font-size: 14px;
}

.students-mini-stat span {
  font-size: 12px;
  opacity: 0.72;
}

.students-page .students-form-panel {
  padding: 20px 22px;
  margin-bottom: 18px;
}

.students-page .student-data-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.students-page .student-data-form .student-panel-heading,
.students-page .student-data-form .form-actions {
  grid-column: 1 / -1;
}

.students-page .student-panel-heading {
  padding-bottom: 14px;
  margin-bottom: 2px;
}

.students-page .field-matricula {
  grid-column: span 3;
}
.students-page .field-curp {
  grid-column: span 4;
}
.students-page .field-sexo {
  grid-column: span 2;
}
.students-page .field-sit {
  grid-column: span 3;
}
.students-page .field-nombre {
  grid-column: span 7;
}
.students-page .field-correo {
  grid-column: span 5;
}

.students-page .student-data-form label {
  gap: 6px;
}

.students-page .student-data-form input,
.students-page .student-data-form select {
  min-height: 42px;
}

.students-page .field-nombre small {
  margin-top: 2px;
  line-height: 1.35;
}

.students-page .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 3px;
}

.students-page .quick-import-panel {
  padding: 20px 22px;
  margin-bottom: 18px;
}

.students-page .quick-import-panel textarea {
  min-height: 170px;
  resize: vertical;
}

.students-list-panel {
  padding: 0 !important;
  overflow: hidden;
}

.students-list-head {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(560px, 1.45fr);
  align-items: end;
  gap: 18px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.students-list-title h3 {
  margin: 0 0 3px;
  font-size: 17px;
}

.students-list-title .table-results-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.students-page .student-table-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 115px 105px auto;
  gap: 10px;
  align-items: end;
  padding: 0;
  border: 0;
}

.students-page .student-table-toolbar > label {
  gap: 5px;
}

.students-page .student-table-toolbar input,
.students-page .student-table-toolbar select {
  min-height: 40px;
}

.students-page .student-table-toolbar .table-toolbar-actions {
  min-height: 40px;
  align-items: stretch;
}

.students-page .student-table-toolbar .table-toolbar-actions .btn {
  min-height: 40px;
  white-space: nowrap;
}

.students-page .table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
}

.students-page [data-student-table] {
  width: 100%;
  min-width: 1060px;
  table-layout: fixed;
}

.students-page [data-student-table] th,
.students-page [data-student-table] td {
  padding: 11px 10px;
}

.students-page [data-student-table] th:first-child,
.students-page [data-student-table] td:first-child {
  padding-left: 16px;
}

.students-page [data-student-table] th:last-child,
.students-page [data-student-table] td:last-child {
  padding-right: 16px;
}

.students-page [data-student-table] tbody td {
  font-size: 13px;
}

.students-page .student-code,
.students-page .student-curp {
  font-size: 12px;
}

.students-page .student-name-cell {
  min-width: 0;
}

.students-page .student-name-cell > b,
.students-page .student-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.students-page .student-name-cell > b {
  font-size: 13px;
  line-height: 1.25;
}

.students-page .student-name-cell > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
}

.student-sex-chip,
.student-sit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.08);
  font-size: 12px;
  font-weight: 700;
}

.students-page .student-action-cell .btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.students-page .pagination {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

@media (max-width: 1180px) {
  .students-list-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .students-page .student-table-toolbar {
    grid-template-columns: minmax(260px, 1fr) 130px 110px auto;
  }

  .students-page .field-matricula {
    grid-column: span 4;
  }
  .students-page .field-curp {
    grid-column: span 4;
  }
  .students-page .field-sexo {
    grid-column: span 2;
  }
  .students-page .field-sit {
    grid-column: span 2;
  }
  .students-page .field-nombre {
    grid-column: span 7;
  }
  .students-page .field-correo {
    grid-column: span 5;
  }
}

@media (max-width: 820px) {
  .students-page .students-banner {
    padding: 18px;
    align-items: stretch;
  }

  .students-header-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .students-page .student-data-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .students-page .field-matricula,
  .students-page .field-curp,
  .students-page .field-sexo,
  .students-page .field-sit,
  .students-page .field-nombre,
  .students-page .field-correo {
    grid-column: span 1;
  }

  .students-page .field-nombre,
  .students-page .field-correo {
    grid-column: 1 / -1;
  }

  .students-page .student-table-toolbar {
    grid-template-columns: minmax(0, 1fr) 115px 105px;
  }

  .students-page .student-table-toolbar .table-toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .students-page .students-banner,
  .students-page .students-form-panel,
  .students-page .quick-import-panel {
    padding: 16px;
  }

  .students-header-stats {
    width: 100%;
  }

  .students-mini-stat {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .students-header-tools .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .students-page .student-data-form,
  .students-page .student-table-toolbar {
    grid-template-columns: 1fr;
  }

  .students-page .field-matricula,
  .students-page .field-curp,
  .students-page .field-sexo,
  .students-page .field-sit,
  .students-page .field-nombre,
  .students-page .field-correo {
    grid-column: 1;
  }

  .students-page .student-table-toolbar .table-toolbar-actions {
    grid-column: 1;
  }

  .students-list-head {
    padding: 16px;
  }

  .students-page .form-actions {
    flex-direction: column-reverse;
  }

  .students-page .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/* Distribución del listado: una sola definición de anchos para sus ocho columnas. */
.students-page .students-list-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px;
}
.students-page .students-list-title .table-results-summary {
  flex-wrap: wrap;
}
.students-page .student-table-toolbar {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 100px 170px 96px 86px auto;
  margin: 0;
}
@media (max-width: 1100px) {
  .students-page .student-table-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .students-page .student-table-toolbar > .table-search-field {
    grid-column: 1/-1;
  }
}
.students-page .student-table-toolbar > label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
}
.students-page .student-table-toolbar input,
.students-page .student-table-toolbar select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.students-page .students-list-panel > .table-wrap {
  margin: 0 24px 16px;
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
  overflow-x: visible;
}
/* Seis columnas agrupadas: la tabla cabe completa, sin barra horizontal. */
.students-page #data {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.students-page #data th:nth-child(1) {
  width: 52px;
}
.students-page #data th:nth-child(2) {
  width: auto;
}
.students-page #data th:nth-child(3) {
  width: 196px;
}
.students-page #data th:nth-child(4) {
  width: 27%;
}
.students-page #data th:nth-child(5) {
  width: 66px;
}
.students-page #data th:nth-child(6) {
  width: 72px;
}
.students-page #data th:nth-child(7) {
  width: 132px;
}
.students-page #data th,
.students-page #data td {
  padding: 13px 10px;
  vertical-align: middle;
  box-sizing: border-box;
}
.students-page #data thead th {
  white-space: nowrap;
}
.students-page #data td {
  font-size: 14px;
}
.students-page #data .student-name-cell > b {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.students-page #data .student-name-cell > small {
  display: block;
  margin-top: 3px;
}
.students-page #data .student-name-cell > .student-mobile-id {
  display: none;
}
.students-page #data .student-ids-cell > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.students-page #data .student-ids-cell .student-code {
  font-size: 13px;
  font-weight: 600;
}
.students-page #data .student-ids-cell .student-curp {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-smoke, #b2b2b2);
  font-variant-numeric: tabular-nums;
}
.students-page #data .student-email {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.students-page #data th.student-chip-head,
.students-page #data td.student-chip-cell {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.students-page #data th.student-chip-head .student-sort-button {
  position: relative;
  justify-content: center;
  margin: 0 auto;
}
.students-page #data th.student-chip-head .student-sort-button span {
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
}
/* Alineación: texto a la izquierda (encabezado y contenido en la misma línea), etiquetas centradas, acción a la derecha. */
.students-page #data th:nth-child(-n + 4),
.students-page #data td:nth-child(-n + 4) {
  text-align: left;
}
.students-page #data th:nth-child(-n + 4) .student-sort-button {
  justify-content: flex-start;
  margin: 0;
}
.students-page #data td:first-child {
  font-variant-numeric: tabular-nums;
}
.students-page #data th:nth-child(-n + 4) .student-sort-secondary {
  margin-left: 10px;
}
.students-page #data td.student-chip-cell > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin: 0;
}
.students-page #data .student-sort-button {
  padding-left: 0;
  padding-right: 0;
}
.students-page #data .student-sort-secondary {
  margin-left: 10px;
}
.students-page #data .student-sort-secondary::before {
  content: "·";
  margin-right: 8px;
  color: var(--color-slate, #686868);
}
.students-page #data td:last-child,
.students-page #data th:last-child {
  text-align: right;
  padding-right: 12px;
}
.students-page #data .student-action-cell .btn {
  font-size: 13px;
  padding: 8px 12px;
  min-height: 36px;
  white-space: nowrap;
}
.students-page #data .student-action-cell .btn::after {
  content: none;
  display: none;
}
.students-page #data th:first-child,
.students-page #data td:first-child {
  padding-left: 14px;
  color: var(--color-slate, #686868);
}
@media (max-width: 1100px) {
  .students-page #data th:nth-child(4),
  .students-page #data td:nth-child(4) {
    display: none;
  }
}
@media (max-width: 900px) {
  .students-page #data th:nth-child(3) {
    width: 150px;
  }
  .students-page #data th:nth-child(1),
  .students-page #data td:nth-child(1),
  .students-page #data th:nth-child(5),
  .students-page #data td:nth-child(5),
  .students-page #data th:nth-child(6),
  .students-page #data td:nth-child(6) {
    display: none;
  }
  .students-page #data .student-sort-secondary {
    display: none;
  }
}
.students-page .pagination {
  padding: 16px 24px;
}
@media (max-width: 700px) {
  .students-page .student-table-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .students-page .student-table-toolbar > .table-search-field {
    grid-column: 1/-1;
  }
  .students-page .student-table-toolbar .table-toolbar-actions {
    grid-column: 1/-1;
  }
  .students-page .students-list-head {
    padding: 18px 16px;
  }
  .students-page .students-list-panel > .table-wrap {
    margin: 0 16px 16px;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }

  /* En teléfono la tabla medía 1180px dentro de una ventana de 334: lo primero
    que se leía era el CURP y el nombre quedaba fuera de vista.

    Se ocultan las cuatro columnas de relleno (No., CURP, Sexo y Correo) y se
    pasa a reparto automático. El `table-layout:fixed` tiene que quitarse a la
    vez: en ese modo, ocultar columnas NO reparte el espacio que dejan libre —
    las que quedan conservan el ancho de la vista de escritorio y la cabecera
    "Matrícula" se desborda encima de "Nombre". */
  .students-page #data th:nth-child(1),
  .students-page #data td:nth-child(1),
  .students-page #data th:nth-child(4),
  .students-page #data td:nth-child(4),
  .students-page #data th:nth-child(5),
  .students-page #data td:nth-child(5),
  .students-page #data th:nth-child(6),
  .students-page #data td:nth-child(6) {
    display: none;
  }
  .students-page #data {
    table-layout: auto;
    min-width: 0;
    width: 100%;
  }
  .students-page #data th,
  .students-page #data td {
    padding: 12px 8px;
  }
  .students-page #data .student-code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .students-page #data th:nth-child(3),
  .students-page #data td:nth-child(3) {
    display: none;
  }
  .students-page #data th:nth-child(7) {
    width: 118px;
  }
  .students-page #data th:nth-child(2) {
    width: 70%;
  }
  .students-page #data .student-name-cell > .student-mobile-id {
    display: block;
  }
  .students-page #data .student-action-cell .btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  .students-page .students-list-panel > .table-wrap {
    overflow-x: visible;
  }
}

/* =========================================================================
   5. PÁGINA · Expediente del alumno
   ========================================================================= */

/* =========================================================
   EXPEDIENTE DEL ALUMNO
   Ajustes visuales específicos para alumno.php
   ========================================================= */

.student-record-page {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.student-record-page *,
.student-record-page *::before,
.student-record-page *::after {
  box-sizing: border-box;
}

/* Encabezado */
.student-record-page .student-record-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: stretch;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 24px;
  overflow: hidden;
}

.student-record-page .student-main {
  min-width: 0;
  align-items: center;
}

.student-record-page .student-title {
  min-width: 0;
}

.student-record-page .student-title h2 {
  max-width: 100%;
  margin: 5px 0 0;
  font-size: clamp(24px, 2.15vw, 34px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.student-record-page .student-record-hero .back-link {
  margin-bottom: 6px;
}

.student-record-page .student-meta {
  gap: 7px;
  margin-top: 13px;
}

.student-record-page .student-meta > span {
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  overflow-wrap: anywhere;
}

.student-record-page .student-summary {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: stretch;
}

.student-record-page .summary-item {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 15px;
  border-radius: 14px;
}

.student-record-page .summary-item > strong {
  font-size: clamp(18px, 1.55vw, 24px);
  overflow-wrap: anywhere;
}

/* Navegación del expediente */
.student-record-page .record-section-nav {
  width: 100%;
  margin: 0;
  padding: 6px;
  gap: 5px;
}

.student-record-page .record-section-nav .record-tab {
  flex: 1 1 0;
  min-width: max-content;
  min-height: 38px;
  padding-inline: 12px;
}

/* Todos los paneles conservan exactamente el mismo ancho */
.student-record-page .student-record-stack {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.student-record-page .student-record-stack > .panel,
.student-record-page .student-record-stack > form.panel {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.student-record-page .panel {
  overflow: hidden;
}

.student-record-page .panel-head {
  align-items: flex-start;
  gap: 16px;
}

.student-record-page .panel-head > div {
  min-width: 0;
}

.student-record-page .panel-head h3 {
  margin-bottom: 4px;
}

.student-record-page .panel-head p {
  max-width: 850px;
}

/* Resumen */

.student-record-page .enrollment-history-item {
  grid-template-columns: 46px minmax(0, 1fr) minmax(120px, auto);
}

.student-record-page .enrollment-history-status {
  min-width: 0;
}

/* Datos personales */
.student-record-page .record-data-grid {
  display: block;
}

.student-record-page .record-panel-heading {
  width: 100%;
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--edge-hairline);
}

.student-record-page .record-panel-heading small {
  display: block;
  margin-bottom: 5px;
  color: var(--status-info);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
}

.student-record-page .record-fields-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.student-record-page .record-fields-grid > label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--color-smoke);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.student-record-page .record-fields-grid input,
.student-record-page .record-fields-grid select {
  width: 100%;
  min-width: 0;
}

.student-record-page .record-fields-grid .field-curp {
  grid-column: span 2;
}

.student-record-page .record-fields-grid .field-nombres,
.student-record-page .record-fields-grid .field-correo,
.student-record-page .record-fields-grid .field-domicilio {
  grid-column: span 2;
}

.student-record-page .record-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--edge-hairline);
}

/* Tutores */
.student-record-page .tutor-grid {
  align-items: stretch;
  gap: 16px;
}

.student-record-page .tutor-card {
  height: 100%;
}

.student-record-page .tutor-fields {
  gap: 12px;
}

.student-record-page .tutor-fields input {
  width: 100%;
  min-width: 0;
}

.student-record-page .tutor-access-box {
  min-width: 0;
}

.student-record-page .tutor-access-box > div {
  overflow: hidden;
}

.student-record-page .tutor-access-box small {
  overflow-wrap: anywhere;
}

/* Documentación */
.student-record-page .document-checklist-item {
  grid-template-columns: 40px minmax(0, 1fr) minmax(330px, 0.7fr);
}

.student-record-page .document-checklist-actions {
  width: 100%;
  grid-template-columns: minmax(130px, 1fr) minmax(135px, 0.8fr) auto;
}

/* Calificaciones */

/* Seguimiento */
.student-record-page .followup-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 22px;
  padding: 16px;
}

.student-record-page .followup-form > .wide {
  grid-column: 1 / -1;
}

.student-record-page .followup-form > label:nth-of-type(5),
.student-record-page .followup-form > label:nth-of-type(6) {
  grid-column: span 2;
}

.student-record-page .followup-form textarea,
.student-record-page .followup-form input,
.student-record-page .followup-form select {
  width: 100%;
  min-width: 0;
}

.student-record-page .followup-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.student-record-page .followup-entry-body,
.student-record-page .followup-detail {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Pantallas medianas */
@media (max-width: 1180px) {
  .student-record-page .student-record-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-record-page .record-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-record-page .record-fields-grid .field-curp,
  .student-record-page .record-fields-grid .field-nombres,
  .student-record-page .record-fields-grid .field-correo,
  .student-record-page .record-fields-grid .field-domicilio {
    grid-column: span 1;
  }

  .student-record-page .record-fields-grid .field-curp,
  .student-record-page .record-fields-grid .field-nombres,
  .student-record-page .record-fields-grid .field-correo,
  .student-record-page .record-fields-grid .field-domicilio {
    grid-column: span 2;
  }

  .student-record-page .document-checklist-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .student-record-page .document-checklist-actions {
    grid-column: 2;
  }

  .student-record-page .followup-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet y móvil */
@media (max-width: 760px) {
  .student-record-page {
    gap: 12px;
  }

  .student-record-page .student-record-hero {
    padding: 18px;
    gap: 16px;
  }

  .student-record-page .student-main {
    align-items: flex-start;
  }

  .student-record-page .student-summary {
    grid-template-columns: 1fr;
  }

  .student-record-page .summary-item {
    min-height: 78px;
  }

  .student-record-page .record-section-nav .record-tab {
    flex: 0 0 auto;
  }

  .student-record-page .record-fields-grid,
  .student-record-page .tutor-grid,
  .student-record-page .tutor-fields,
  .student-record-page .followup-form {
    grid-template-columns: 1fr;
  }

  .student-record-page .record-fields-grid .field-curp,
  .student-record-page .record-fields-grid .field-nombres,
  .student-record-page .record-fields-grid .field-correo,
  .student-record-page .record-fields-grid .field-domicilio,
  .student-record-page .followup-form > .wide,
  .student-record-page .followup-form > label:nth-of-type(5),
  .student-record-page .followup-form > label:nth-of-type(6) {
    grid-column: auto;
  }

  .student-record-page .record-form-actions,
  .student-record-page .tutor-access-box {
    align-items: stretch;
    flex-direction: column;
  }

  .student-record-page .record-form-actions .btn,
  .student-record-page .tutor-access-box .btn {
    width: 100%;
  }

  .student-record-page .enrollment-history-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .student-record-page .enrollment-history-status {
    grid-column: 2;
    align-items: flex-start;
  }

  .student-record-page .document-checklist-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-record-page .document-checklist-icon,
  .student-record-page .document-checklist-actions {
    grid-column: 1;
  }

  .student-record-page .document-checklist-actions {
    grid-template-columns: 1fr;
  }

  .student-record-page .followup-form .form-actions {
    grid-column: auto;
  }
}

/* =========================================================================
   5. PÁGINA · Padres y tutores
   ========================================================================= */

/* Padres y tutores · búsqueda, filtros y paginación */
.tutor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--edge-hairline, #2a2f3a);
  border-radius: 14px;
  background: var(--surface-frosted-soft, rgba(255, 255, 255, 0.03));
}

.tutor-toolbar label {
  flex: 0 1 122px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-slate, #9aa3b2);
  font-size: 12px;
  font-weight: 600;
}

.tutor-toolbar select,
.tutor-toolbar input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
}

.tutor-toolbar .tutor-search-field {
  flex: 1 1 220px;
}

.tutor-search-box {
  position: relative;
  display: block;
}

.tutor-search-box svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-slate, #9aa3b2);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.tutor-search-box input {
  padding-left: 40px !important;
  font-size: 14px;
}

.tutor-toolbar-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.tutor-toolbar-actions .btn {
  min-height: 42px;
  white-space: nowrap;
}

.tutor-summary {
  margin: 0 0 12px;
  color: var(--color-slate, #9aa3b2);
  font-size: 13px;
}

.tutor-summary b {
  color: var(--color-bone, #e5e5e5);
  font-weight: 600;
}

.tutor-table mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.28);
  color: inherit;
}

.tutor-table .tutor-empty {
  padding: 28px 16px;
  color: var(--color-slate, #9aa3b2);
  text-align: center;
}

.tutor-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 4px 4px;
}

.tutor-pagination .pagination-control {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--edge-hairline, #2a2f3a);
  border-radius: 9px;
  color: var(--color-bone, #e5e5e5);
  text-decoration: none;
}

.tutor-pagination .pagination-control.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.tutor-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tutor-pages a,
.tutor-pages b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
}

.tutor-pages a {
  color: var(--color-bone, #e5e5e5);
}

.tutor-pages a:hover {
  background: var(--surface-frosted-soft, rgba(255, 255, 255, 0.06));
}

.tutor-pages b {
  background: var(--color-bone, #e5e5e5);
  color: #111;
  font-weight: 700;
}

.tutor-gap {
  padding: 0 4px;
  color: var(--color-slate, #9aa3b2);
}

@media (max-width: 620px) {
  .tutor-toolbar label {
    flex: 1 1 calc(50% - 12px);
  }

  .tutor-toolbar .tutor-search-field,
  .tutor-toolbar-actions {
    flex: 1 1 100%;
  }

  .tutor-toolbar-actions .btn {
    flex: 1;
    justify-content: center;
  }

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

/* =========================================================================
   5. PÁGINA · Inscripciones
   ========================================================================= */

/* Inscripciones · búsqueda, filtros y paginación */
.enr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--edge-hairline, #2a2f3a);
  border-radius: 14px;
  background: var(--surface-frosted-soft, rgba(255, 255, 255, 0.03));
}

.enr-toolbar label {
  flex: 0 1 122px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-slate, #9aa3b2);
  font-size: 12px;
  font-weight: 600;
}

.enr-toolbar select,
.enr-toolbar input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
}

.enr-toolbar .enr-search-field {
  flex: 1 1 220px;
}

.enr-search-box {
  position: relative;
  display: block;
}

.enr-search-box svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-slate, #9aa3b2);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.enr-search-box input {
  padding-left: 40px !important;
  font-size: 14px;
}

.enr-toolbar-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.enr-toolbar-actions .btn {
  min-height: 42px;
  white-space: nowrap;
}

.enr-summary {
  margin: 0 0 12px;
  color: var(--color-slate, #9aa3b2);
  font-size: 13px;
}

.enr-summary b {
  color: var(--color-bone, #e5e5e5);
  font-weight: 600;
}

.enr-table mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.28);
  color: inherit;
}

.enr-table .enr-empty {
  padding: 28px 16px;
  color: var(--color-slate, #9aa3b2);
  text-align: center;
}

.enr-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 4px 4px;
}

.enr-pagination .pagination-control {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--edge-hairline, #2a2f3a);
  border-radius: 9px;
  color: var(--color-bone, #e5e5e5);
  text-decoration: none;
}

.enr-pagination .pagination-control.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.enr-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.enr-pages a,
.enr-pages b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
}

.enr-pages a {
  color: var(--color-bone, #e5e5e5);
}

.enr-pages a:hover {
  background: var(--surface-frosted-soft, rgba(255, 255, 255, 0.06));
}

.enr-pages b {
  background: var(--color-bone, #e5e5e5);
  color: #111;
  font-weight: 700;
}

.enr-gap {
  padding: 0 4px;
  color: var(--color-slate, #9aa3b2);
}

@media (max-width: 620px) {
  .enr-toolbar label {
    flex: 1 1 calc(50% - 12px);
  }

  .enr-toolbar .enr-search-field,
  .enr-toolbar-actions {
    flex: 1 1 100%;
  }

  .enr-toolbar-actions .btn {
    flex: 1;
    justify-content: center;
  }

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

/* Resumen con conteo por estado */
.enr-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.enr-summary p {
  margin: 0;
}

.enr-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.enr-counts .badge {
  text-decoration: none;
}

/* Barra de acciones masivas */
.enr-bulk {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 12px;
  background: rgba(30, 58, 138, 0.35);
  backdrop-filter: blur(6px);
}

.enr-bulk[hidden] {
  display: none;
}

.enr-bulk span {
  margin-right: auto;
  font-size: 14px;
}

.enr-bulk .btn {
  min-height: 36px;
}

.enr-table .enr-check {
  width: 38px;
  text-align: center;
}

.enr-table .enr-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}

.enr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.enr-inline-form {
  display: inline;
  margin: 0;
}

/* La tabla cabe completa: columnas agrupadas y anchos fijos, sin barra horizontal. */
.enr-panel .table-wrap {
  overflow-x: visible;
}

.enr-panel table.enr-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.enr-panel .enr-table th,
.enr-panel .enr-table td {
  padding: 12px 10px;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}

.enr-panel .enr-table thead th {
  white-space: nowrap;
}

.enr-panel .enr-table .enr-check {
  width: 42px;
  padding-left: 12px;
  padding-right: 4px;
}
.enr-panel .enr-table .enr-col-student {
  width: auto;
}
.enr-panel .enr-table .enr-col-group {
  width: 22%;
}
.enr-panel .enr-table .enr-col-date {
  width: 100px;
  white-space: nowrap;
  overflow-wrap: normal;
}
.enr-panel .enr-table .enr-col-state {
  width: 124px;
}
.enr-panel .enr-table .enr-col-actions {
  width: 232px;
}

.enr-table td.enr-col-student b,
.enr-table td.enr-col-group b {
  font-weight: 600;
}

.enr-table td.enr-col-student small,
.enr-table td.enr-col-group small {
  display: block;
  margin-top: 4px;
  color: var(--color-slate, #9aa3b2);
  font-size: 12px;
  line-height: 1.35;
}

.enr-table td.enr-col-group .shift-badge {
  margin-left: 6px;
  vertical-align: 1px;
}

.enr-table td.enr-col-date {
  font-variant-numeric: tabular-nums;
}

.enr-table .enr-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.enr-table .enr-actions .table-action {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
  font-size: 14px;
}

.enr-table .enr-actions .table-action::after {
  display: none;
}

@media (max-width: 1100px) {
  .enr-panel .enr-table .enr-col-date {
    display: none;
  }
}

@media (max-width: 900px) {
  .enr-table thead {
    display: none;
  }
  .enr-table,
  .enr-table tbody,
  .enr-table tr,
  .enr-table td {
    display: block;
    width: auto !important;
  }
  .enr-table tr {
    position: relative;
    padding: 12px 12px 12px 48px;
    border-bottom: 1px solid var(--edge-hairline, #2a2f3a);
  }
  .enr-table td {
    padding: 3px 0 !important;
    border: 0 !important;
  }
  .enr-table td.enr-check {
    position: absolute;
    top: 14px;
    left: 12px;
  }
  .enr-table td.enr-col-date {
    display: none;
  }
  .enr-table .enr-actions {
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 6px;
  }
}

/* =========================================================================
   5. PÁGINA · Organización académica
   ========================================================================= */

/* Estilos limitados al módulo. No cambian el diseño de las demás pantallas. */
:where(.pg-organizacion_academica) .oa {
  --oa-bg: #101217;
  --oa-panel: #181b22;
  --oa-line: #303542;
  --oa-text: #f0f2f7;
  --oa-muted: #a6aebf;
  --oa-accent: #8ab4ff;
  --oa-active: #302944;
  --oa-good: #a1dfbc;
  --oa-warn: #e7c18a;
  color: var(--oa-text);
  font:
    16px/1.5 Inter,
    system-ui,
    sans-serif;
  text-align: left;
  color-scheme: dark;
  box-sizing: border-box;
}

:where(.pg-organizacion_academica) .oa * {
  box-sizing: border-box;
}
:where(.pg-organizacion_academica) .oa [hidden] {
  display: none !important;
}
#oaRoot {
  padding: 26px;
  background: var(--oa-bg);
  border: 1px solid var(--oa-line);
  border-radius: 14px;
  margin: 22px auto;
}
:where(.pg-organizacion_academica) .oa h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 4px 0;
  color: var(--oa-text);
  line-height: 1.3;
}
:where(.pg-organizacion_academica) .oa h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0;
}
:where(.pg-organizacion_academica) .oa p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--oa-muted);
  margin: 8px 0;
}
:where(.pg-organizacion_academica) .oa small {
  font-size: 12px;
  color: var(--oa-muted);
}
:where(.pg-organizacion_academica) .oa button,
.oa .oa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 10px 16px;
  min-height: 44px;
  width: auto;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  font: 600 15px/1.3 var(--font-dm-sans);
  text-decoration: none;
  box-shadow: none;
  transform: none;
  white-space: normal;
  font-weight: var(--font-weight-semibold);
}
:where(.pg-organizacion_academica) .oa button:hover,
.oa .oa-button:hover {
  background: var(--boton-2-hover);
  border-color: var(--boton-2-borde-hover);
}
:where(.pg-organizacion_academica) .oa button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.oa button.oa-primary {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-texto);
}
.oa button.oa-primary:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
}
:where(.pg-organizacion_academica) .oa :focus-visible {
  outline: 2px solid var(--oa-accent);
  outline-offset: 3px;
}
:where(.pg-organizacion_academica) .oa input,
:where(.pg-organizacion_academica) .oa select {
  font:
    400 14px/1.5 Inter,
    system-ui,
    sans-serif;
  border: 1px solid var(--oa-line);
  border-radius: 7px;
  color: var(--oa-text);
  background: var(--oa-panel);
  min-height: 42px;
  height: auto;
  padding: 10px 12px;
  width: auto;
  max-width: 100%;
  box-shadow: none;
}
:where(.pg-organizacion_academica) .oa select {
  appearance: auto;
  background-image: none;
  padding-right: 12px;
}
:where(.pg-organizacion_academica) .oa select option {
  background: var(--oa-panel);
  color: var(--oa-text);
}
.oa-heading,
.oa-cyclebar,
.oa-toolbar,
.oa-modalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.oa-heading > div > small {
  color: var(--oa-accent);
  letter-spacing: 1.5px;
}
.oa-cyclebar {
  background: var(--oa-panel);
  border: 1px solid var(--oa-line);
  padding: 16px;
  border-radius: 10px;
  margin: 26px 0;
}
.oa-cyclebar label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  flex-direction: row;
}
.oa-cyclebar button {
  margin-left: auto;
}
.oa-badge {
  font-size: 12px;
  color: var(--oa-good);
  padding: 5px 9px;
  background: color-mix(in srgb, var(--oa-good) 9%, transparent);
  border-radius: 5px;
  display: inline-block;
}
.oa-badge.oa-warn {
  color: var(--oa-warn);
  background: color-mix(in srgb, var(--oa-warn) 9%, transparent);
}
.oa-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 26px 0;
}
.oa-stats > div {
  border-left: 2px solid var(--oa-line);
  padding: 0 18px;
}
.oa-stats strong {
  font-size: 30px;
  font-weight: 550;
  display: block;
}
.oa-stats span {
  color: var(--oa-muted);
  font-size: 14px;
}
.oa-toolbar {
  padding: 14px 0;
  border-bottom: 1px solid var(--oa-line);
}
.oa-toolbar > div:not(.oa-tabs) {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.oa-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.oa-tabs button {
  background: transparent;
  border-color: transparent;
  color: var(--oa-muted);
}
.oa-tabs button.is-selected {
  background: var(--oa-active);
  color: var(--oa-accent);
}
.oa-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 0;
  flex-wrap: wrap;
}
.oa-filters > span {
  margin-left: auto;
  color: var(--oa-muted);
  font-size: 14px;
}
.oa-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.oa button.oa-card {
  display: block;
  text-align: left;
  padding: 22px;
  background: var(--oa-panel);
  border: 1px solid var(--oa-line);
  border-radius: 12px;
  min-width: 0;
}
.oa button.oa-card:hover {
  border-color: var(--oa-accent);
}
.oa-cardhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oa-cardhead strong {
  font-size: 27px;
  font-weight: 600;
}
.oa-cardhead span {
  color: var(--oa-accent);
  font-size: 14px;
}
.oa-cardnumbers {
  display: flex;
  gap: 25px;
  margin: 24px 0 18px;
  font-size: 13px;
  color: var(--oa-muted);
}
.oa-cardnumbers b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: var(--oa-text);
  margin-bottom: 3px;
}
.oa-cardnumbers small {
  font-size: 14px;
}
.oa-cardfoot {
  border-top: 1px solid var(--oa-line);
  padding-top: 15px;
}
.oa.oa-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(940px, 95vw);
  max-width: 95vw;
  max-height: 90dvh;
  height: fit-content;
  padding: 28px;
  border: 1px solid var(--oa-line);
  border-radius: 15px;
  background: var(--oa-panel);
  overflow: auto;
  box-shadow: 0 20px 70px #0005;
}
.oa.oa-dialog:not([open]) {
  display: none;
}
.oa.oa-dialog[open] {
  display: block;
}
.oa-dialog::backdrop {
  background: #0009;
  backdrop-filter: blur(3px);
}
.oa-modalhead {
  align-items: flex-start;
  margin-bottom: 22px;
}
.oa-modalhead > h2 {
  max-width: 85%;
}
.oa-groupactions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.oa-rowactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.oa-rowactions button,
.oa-rowactions a {
  font-size: 12px;
  padding: 7px 10px;
  min-height: 34px;
}
.oa-tablewrap {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 12px;
}
:where(.pg-organizacion_academica) .oa table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
  margin: 0;
  background: transparent;
  min-width: 0;
}
:where(.pg-organizacion_academica) .oa th,
:where(.pg-organizacion_academica) .oa td {
  text-align: left;
  padding: 13px 10px;
  border: 0;
  border-bottom: 1px solid var(--oa-line);
  white-space: normal;
  color: var(--oa-text);
  background: transparent;
  vertical-align: middle;
}
:where(.pg-organizacion_academica) .oa th {
  font-size: 12px;
  font-weight: 500;
  color: var(--oa-muted);
  letter-spacing: 0.2px;
  position: static;
}
:where(.pg-organizacion_academica) .oa td strong {
  font-size: 14px;
}
.oa-meta {
  display: block;
  margin-top: 4px;
}
.oa-formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.oa label.oa-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 17px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--oa-muted);
  text-align: left;
  min-width: 0;
}
.oa-field > input,
.oa-field > select {
  width: 100%;
  color: var(--oa-text);
}
.oa-formactions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  border-top: 1px solid var(--oa-line);
  padding-top: 20px;
}
.oa .oa-wide {
  width: 100%;
  margin-top: 16px;
}
.oa-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--oa-text);
}
:where(.pg-organizacion_academica) .oa input[type="checkbox"] {
  appearance: auto;
  accent-color: var(--oa-accent);
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.oa-pickerTools {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}
.oa-pickerTools input {
  flex: 1;
  min-width: 0;
}
.oa-pickerGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
.oa-candidateList {
  height: 340px;
  overflow: auto;
  padding: 2px;
}
.oa-candidate {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.oa-candidate:has(input:checked) {
  background: var(--oa-active);
  border-color: var(--oa-accent);
}
.oa-candidate strong {
  font-size: 14px;
  display: block;
  font-weight: 500;
}
.oa-candidate small {
  display: block;
  overflow-wrap: anywhere;
}
.oa-pickedPanel {
  background: var(--oa-bg);
  border: 1px solid var(--oa-line);
  border-radius: 10px;
  padding: 15px;
  max-height: 440px;
  overflow: auto;
}
.oa-pickedItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--oa-line);
  font-size: 14px;
}
.oa-pickedItem button {
  padding: 4px 8px;
  min-height: 30px;
}
.oa-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--oa-muted);
}
.oa-pagination button {
  font-size: 12px;
  padding: 6px 10px;
}
.oa-error {
  color: var(--oa-warn) !important;
  border: 1px solid var(--oa-warn);
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  margin: 14px 0;
  overflow-wrap: anywhere;
}
.oa-empty {
  padding: 25px;
  grid-column: 1/-1;
  color: var(--oa-muted);
}
.oa-readonly {
  background: var(--oa-bg);
  padding: 12px;
  border-radius: 8px;
}
#oaNotice:not(:empty) {
  padding: 14px;
  border: 1px solid var(--oa-good);
  border-radius: 8px;
  margin-top: 20px;
  color: var(--oa-good);
  font-size: 14px;
}
@media (max-width: 1150px) {
  .oa-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .oa-heading {
    align-items: flex-start;
  }
  .oa-groupactions {
    max-width: 45%;
  }
}
@media (max-width: 700px) {
  #oaRoot {
    padding: 16px;
  }
  .oa-heading {
    flex-wrap: wrap;
  }
  :where(.pg-organizacion_academica) .oa h2 {
    font-size: 23px;
  }
  .oa-cyclebar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .oa-cyclebar label {
    flex-wrap: wrap;
  }
  .oa-cyclebar button {
    margin-left: 0;
  }
  .oa-stats {
    gap: 8px;
  }
  .oa-stats > div {
    padding: 0 10px;
  }
  .oa-stats span {
    font-size: 12px;
  }
  .oa-cards {
    grid-template-columns: 1fr;
  }
  .oa-toolbar {
    flex-wrap: wrap;
  }
  .oa-filters > * {
    flex: 1;
    min-width: 130px;
  }
  .oa.oa-dialog {
    padding: 18px;
  }
  .oa-modalhead {
    flex-wrap: wrap;
  }
  .oa-groupactions {
    max-width: 100%;
    justify-content: flex-start;
  }
  .oa-formgrid,
  .oa-pickerGrid {
    grid-template-columns: 1fr;
  }
  .oa-candidateList {
    height: 240px;
  }
  .oa-pickedPanel {
    max-height: 170px;
  }
  .oa-pickerTools {
    flex-wrap: wrap;
  }
  .oa-pickerTools input {
    flex-basis: 100%;
  }
  .oa-tablewrap table {
    min-width: 520px;
  }
}

/* Corrección de cascada: el CSS general tiene dialog[open]:not(...) con
   mayor especificidad. Estos IDs limitan la corrección a este módulo. */
#oaDetail.oa-dialog[open],
#oaForm.oa-dialog[open] {
  display: block;
  inset: 0;
  margin: auto;
  width: min(1040px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  height: fit-content;
  max-height: calc(100dvh - 48px);
  padding: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-radius: 16px;
  box-sizing: border-box;
}
#oaForm.oa-dialog[data-layout="compact"] {
  width: min(580px, calc(100vw - 40px));
}
#oaForm.oa-dialog[data-layout="form"] {
  width: min(760px, calc(100vw - 40px));
}
#oaDetailBody,
#oaFormBody,
#oaEditor,
#oaDetailContent {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}
#oaEditor {
  padding: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
}
#oaRoot .oa-heading {
  align-items: flex-start;
  gap: 18px;
}
#oaRoot .oa-heading > div {
  flex: 1;
  min-width: 0;
}

#oaRoot .oa-cyclebar {
  justify-content: flex-start;
  gap: 12px 18px;
  flex-wrap: wrap;
}
#oaRoot .oa-cyclebar > label {
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
}
#oaRoot #oaCycle {
  min-width: 170px;
  max-width: 100%;
}
#oaRoot .oa-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(110px, 150px) minmax(130px, 180px) minmax(150px, 200px) auto;
  gap: 12px;
  align-items: center;
}
#oaRoot .oa-filters > input,
#oaRoot .oa-filters > select {
  width: 100%;
  min-width: 0;
  margin: 0;
}
#oaRoot .oa-filters > span {
  white-space: nowrap;
  margin: 0;
  text-align: right;
}
.oa .oa-toolbar {
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.oa .oa-toolbar > p {
  flex: 1 1 220px;
  margin: 0;
}
.oa .oa-toolbar > div:not(.oa-tabs) {
  gap: 8px;
  justify-content: flex-end;
}
.oa .oa-modalhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 22px;
  padding: 0;
}
.oa .oa-modalhead > div:first-child:not(.oa-groupactions) {
  flex: 1 1 280px;
  min-width: 0;
}
.oa .oa-modalhead h2 {
  overflow-wrap: anywhere;
  margin: 0;
  max-width: 100%;
  font-size: 25px;
  line-height: 1.35;
}
.oa .oa-modalhead > h2 {
  flex: 1;
  min-width: 0;
}
.oa .oa-modalhead > [data-oa-close] {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 8px 16px;
  font-size: 15px;
}
.oa .oa-groupactions {
  flex: 0 1 auto;
  max-width: 100%;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.oa .oa-groupactions > [data-oa-close] {
  width: auto;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 15px;
}
.oa .oa-formgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 18px;
  row-gap: 0;
}
.oa .oa-formgrid > .oa-field {
  margin: 0 0 18px;
  min-width: 0;
  max-width: 100%;
  align-items: stretch;
}
.oa .oa-formgrid input,
.oa .oa-formgrid select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.oa .oa-field > input,
.oa .oa-field > select {
  margin: 0;
}
.oa .oa-formactions {
  clear: both;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  margin: 22px 0 0;
}
.oa .oa-formactions button {
  flex: 0 1 auto;
  min-width: 104px;
}
.oa .oa-tablewrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.oa .oa-tablewrap table {
  table-layout: auto;
  width: 100%;
  border-spacing: 0;
}
.oa .oa-tablewrap th:last-child,
.oa .oa-tablewrap td:last-child {
  text-align: right;
}
.oa .oa-tablewrap td .oa-rowactions {
  justify-content: flex-end;
  gap: 8px;
}
.oa .oa-tablewrap .oa-rowactions button,
.oa .oa-tablewrap .oa-rowactions a {
  font-size: 14px;
  white-space: nowrap;
  min-height: 38px;
}
.oa .oa-catalog-table th:nth-child(1) {
  width: 72px;
}
.oa .oa-catalog-table th:last-child {
  width: 120px;
}
.oa .oa-catalog-table td:nth-child(2) {
  font-weight: 550;
  min-width: 160px;
}
.oa .oa-catalog-table td:nth-child(4) {
  min-width: 160px;
  overflow-wrap: anywhere;
}
.oa .oa-pickerGrid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.oa .oa-pickerGrid > div {
  min-width: 0;
}
.oa .oa-pickerTools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.oa .oa-pickerTools > input {
  flex: 1 1 240px;
  width: auto;
  min-width: 0;
}
.oa .oa-pickerTools > button {
  flex: 0 0 auto;
}
.oa .oa-candidate {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 12px;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.oa .oa-candidate > span {
  min-width: 0;
  flex: 1;
}
.oa .oa-candidate strong,
.oa .oa-candidate small {
  overflow-wrap: anywhere;
  text-align: left;
}
.oa .oa-pickedItem > span {
  min-width: 0;
  overflow-wrap: anywhere;
  flex: 1;
}
.oa .oa-pickedItem > button {
  flex: 0 0 32px;
}
.oa .oa-pagination {
  flex-wrap: wrap;
}
.oa .oa-pagination > span {
  flex: 1;
  text-align: center;
  min-width: 100px;
}
.oa .oa-danger,
#oaDelete {
  color: #efaaaa;
  border-color: #7e4848;
  background: transparent;
}

.oa .oa-danger:hover,
#oaDelete:hover {
  background: color-mix(in srgb, #e24454 14%, var(--oa-panel));
}
@media (max-width: 980px) {
  #oaRoot .oa-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #oaRoot .oa-filters > span {
    text-align: left;
  }
  .oa .oa-modalhead > .oa-groupactions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .oa .oa-groupactions > [data-oa-close] {
    margin-left: auto;
  }
}
@media (max-width: 700px) {
  #oaDetail.oa-dialog[open],
  #oaForm.oa-dialog[open] {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 18px;
    border-radius: 12px;
  }
  .oa .oa-formgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .oa .oa-pickerGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .oa .oa-pickedPanel {
    max-height: 220px;
  }
  .oa .oa-candidateList {
    height: 260px;
  }
  .oa .oa-tablewrap table {
    min-width: 560px;
  }
  .oa .oa-toolbar > div:not(.oa-tabs) {
    justify-content: flex-start;
  }
  .oa .oa-tabs {
    width: 100%;
    gap: 4px;
  }
  .oa .oa-tabs button {
    flex: 1 1 140px;
  }
  .oa .oa-modalhead h2 {
    font-size: 22px;
  }
  .oa .oa-formactions > button {
    flex: 1 1 130px;
  }
  .oa .oa-pickerTools > input {
    flex-basis: 100%;
  }
  .oa .oa-pickerTools > button {
    flex: 1;
  }
  .oa .oa-groupactions button {
    padding: 9px 10px;
    font-size: 14px;
  }
}
@media (max-width: 420px) {
  #oaRoot .oa-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  #oaRoot .oa-cyclebar > label {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  #oaRoot #oaCycle {
    width: 100%;
    min-width: 0;
  }
  .oa .oa-stats {
    gap: 4px;
  }
  .oa .oa-stats > div {
    padding-left: 8px;
    padding-right: 3px;
  }
  .oa .oa-stats strong {
    font-size: 25px;
  }
  .oa .oa-stats span {
    overflow-wrap: anywhere;
  }
  .oa .oa-heading {
    gap: 12px;
  }
}

/* Filtros exclusivos del catálogo de materias. */
#oaCatalog .oa-catalog-filters {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
#oaCatalog .oa-catalog-filters .oa-field {
  margin: 0;
  min-width: 0;
}
#oaCatalog .oa-catalog-filters select {
  width: 100%;
  min-width: 0;
}
#oaSubjectCount {
  grid-column: 1/-1;
  color: var(--oa-muted);
  font-size: 13px;
}
@media (max-width: 700px) {
  #oaCatalog .oa-catalog-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  #oaCatalog .oa-catalog-filters > button {
    width: 100%;
  }
}

/* Avisos visibles tanto en la página como dentro del modal superior. */
.oa-feedback {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  background: var(--oa-panel);
  border-radius: 10px;
  box-shadow: 0 4px 14px #0002;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.oa-feedback[hidden] {
  display: none !important;
}
.oa .oa-feedback #oaNotice:not(:empty),
.oa .oa-feedback #oaError {
  margin: 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--oa-panel);
}
.oa .oa-feedback #oaNotice:empty {
  display: none;
}
.oa .oa-feedback #oaNotice:not(:empty) {
  color: var(--oa-text);
  border-color: var(--oa-accent);
}

.oa .oa-feedback #oaNotice:not(:empty),
.oa .oa-feedback #oaError {
  padding-right: 58px;
}
.oa .oa-feedback > .oa-feedback-close {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: var(--oa-panel);
  border: 1px solid var(--oa-line);
}

/* =========================================================================
   5. PÁGINAS · Horarios y asistencia por clase
   ========================================================================= */
#acRoot.ac-root {
  width: 100%;
  max-width: 1200px;
  margin: 22px auto;
  box-sizing: border-box;
  color: #e2e8f0;
  min-width: 0;
}
#acRoot * {
  box-sizing: border-box;
}
#acRoot header {
  background: linear-gradient(115deg, #172d50, #172033);
  border: 1px solid #334155;
  padding: 24px;
  border-radius: 18px;
  margin-bottom: 18px;
}
#acRoot header h2 {
  font-size: 26px;
  margin: 8px 0;
}
#acRoot p {
  line-height: 1.55;
  color: #aebed3;
}
#acRoot .ac-controls,
#acRoot .ac-grid {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 16px 0;
}
#acRoot label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 150px;
  flex: 1;
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  text-align: left;
}
#acRoot input,
#acRoot select,
#acRoot textarea,
#acDialog input,
#acDialog select,
#acDialog textarea {
  width: 100%;
  min-width: 0;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #475569;
  border-radius: 9px;
  padding: 10px 12px;
  min-height: 42px;
  font: inherit;
  position: static;
  text-align: left;
}
#acRoot button,
#acDialog button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accion);
  color: var(--accion-texto);
  border: 1.5px solid var(--accion);
  border-radius: var(--boton-radio);
  padding: 10px 18px;
  min-height: var(--boton-alto);
  font: inherit;
  cursor: pointer;
  white-space: normal;
  font-weight: var(--font-weight-semibold);
}
#acRoot button:hover,
#acDialog button:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
}
#acDialog #acCancel,
#acRoot #acScheduleCancel,
#acScheduleDialog #acScheduleCancel {
  background: var(--boton-2);
  border-color: var(--boton-2-borde);
  color: var(--color-snow-white);
}
#acRoot button:disabled,
#acDialog button:disabled {
  opacity: 0.55;
  cursor: wait;
}
#acRoot button:focus-visible,
#acRoot input:focus-visible,
#acRoot select:focus-visible,
#acDialog :focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}
#acRoot .ac-panel {
  padding: 20px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #151f30;
  margin: 18px 0;
}
#acRoot .ac-grid h3 {
  width: 100%;
  margin: 0 0 8px;
}
#acRoot .ac-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #334155;
  border-radius: 12px;
}
#acRoot table {
  width: 100%;
  border-collapse: collapse;
  background: #111c2e;
  min-width: 700px;
  font-size: 13px;
}
#acRoot th,
#acRoot td {
  padding: 13px 14px;
  border-bottom: 1px solid #2a3a51;
  vertical-align: middle;
  text-align: left;
  color: #dbe5f4;
  white-space: normal;
}
#acRoot thead th {
  background: #1d2c43;
  color: #c7d9f2;
  position: sticky;
  top: 0;
  z-index: 1;
}
#acRoot tbody th {
  min-width: 190px;
}
#acRoot td small,
#acRoot th small {
  display: block;
  margin-top: 5px;
  color: #93a9c5;
}
#acRoot .ac-state {
  display: inline-block;
  padding: 5px 9px;
  background: #344155;
  border-radius: 8px;
  white-space: nowrap;
}
#acRoot .ac-present {
  background: #144538;
  color: #b2f7df;
}
#acRoot .ac-absent {
  background: #522536;
  color: #fecdd3;
}
#acRoot .ac-error {
  color: #fda4af;
}
#acDialog {
  background: #152036;
  color: #e2e8f0;
  border: 1px solid #536b90;
  border-radius: 18px;
  padding: 24px;
  max-width: 520px;
  width: calc(100vw - 32px);
  max-height: 85dvh;
  overflow: auto;
  margin: auto;
}
#acDialog::backdrop {
  background: #020617b8;
}
#acDialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
#acDialog .ac-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
#acRoot a.ac-link {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid #45658c;
  border-radius: 9px;
  text-decoration: none;
  color: #dbeafe;
  margin: 4px;
}
#acRoot [hidden] {
  display: none !important;
}
@media (max-width: 650px) {
  #acRoot header {
    padding: 18px;
  }
  #acRoot header h2 {
    font-size: 22px;
  }
  #acRoot .ac-controls > label,
  #acRoot .ac-grid > label {
    flex-basis: calc(50% - 14px);
    min-width: 120px;
  }
  #acRoot .ac-controls > label:first-child {
    flex-basis: 100%;
  }
  #acRoot .ac-panel {
    padding: 14px;
  }
  #acRoot table {
    min-width: 760px;
  }
  #acRoot button {
    font-size: 13px;
  }
}
@media print {
  :where(.pg-horarios, .pg-asistencias_clases) body {
    background: white !important;
    color: black !important;
  }
  :where(.pg-horarios, .pg-asistencias_clases) .sidebar,
  :where(.pg-horarios, .pg-asistencias_clases) .topbar,
  :where(.pg-horarios, .pg-asistencias_clases) .school-section-tabs,
  :where(.pg-horarios, .pg-asistencias_clases) footer,
  #acRoot .ac-controls,
  #acRoot form,
  #acRoot button,
  #acRoot .ac-link {
    display: none !important;
  }
  #acRoot {
    max-width: none !important;
    color: black !important;
    margin: 0 !important;
  }
  #acRoot .ac-scroll {
    overflow: visible !important;
    border: 0 !important;
  }
  #acRoot table {
    min-width: 0 !important;
    font-size: 9px !important;
    background: white !important;
  }
  #acRoot th,
  #acRoot td,
  #acRoot p,
  #acRoot header {
    color: black !important;
    background: white !important;
    border-color: #aaa !important;
  }
  #acRoot th,
  #acRoot td {
    padding: 5px !important;
  }
  #acRoot tr {
    break-inside: avoid;
  }
  #acRoot thead {
    display: table-header-group;
  }
  @page hoja-horarios {
    size: A4 landscape;
    margin: 12mm;
  }
  html:where(.pg-horarios, .pg-asistencias_clases) {
    page: hoja-horarios;
  }
}

#acRoot,
#acDialog {
  color-scheme: dark;
}
#acDialogNotice {
  color: #fda4af;
}

/* Layout refinement: consistent cards, spacing and responsive controls. */
#acRoot .ac-filterbar {
  padding: 16px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #151f30;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.16);
}
#acRoot .ac-filterbar > label:first-child {
  flex: 2 1 280px;
}
#acRoot .ac-secondary-filters > label {
  flex: 1 1 220px;
}
#acRoot .ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  padding: 20px;
}
#acRoot .ac-grid h3 {
  grid-column: 1/-1;
}
#acRoot .ac-grid > label {
  min-width: 0;
}
#acRoot .ac-grid > button {
  justify-self: start;
}
#acRoot .ac-note {
  position: relative;
  margin: 16px 0;
  padding: 14px 16px 14px 43px;
  border: 1px solid #355276;
  border-radius: 12px;
  background: #14243a;
  color: #c6d5e9;
}
#acRoot .ac-note::before {
  content: "i";
  position: absolute;
  left: 15px;
  top: 14px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #315d9c;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
#acRoot .ac-counts {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid #34475f;
  border-radius: 10px;
  background: #172235;
  color: #d7e3f2;
  font-weight: 600;
}
#acRoot .ac-state {
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#acRoot .ac-exportbar {
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #151f30;
}
#acRoot .ac-exportbar > div {
  margin-right: auto;
  min-width: 180px;
}
#acRoot .ac-exportbar strong,
#acRoot .ac-exportbar small {
  display: block;
}
#acRoot .ac-exportbar small {
  margin-top: 3px;
  color: #93a9c5;
}
#acRoot a.ac-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  background: #172b47;
  border-color: #46698f;
  font-weight: 600;
}
#acRoot a.ac-link:hover {
  background: #1d3b63;
  border-color: #6b91bd;
}
#acRoot .ac-report-preview {
  overflow: hidden;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #111c2e;
}
#acRoot .ac-report-heading {
  padding: 18px 20px;
  border-bottom: 1px solid #334155;
  background: #17243a;
}
#acRoot .ac-report-heading h3 {
  margin: 0 0 5px;
  font-size: 18px;
}
#acRoot .ac-report-heading p {
  margin: 0;
}
#acRoot .ac-report-preview .ac-scroll {
  border: 0;
  border-radius: 0;
}
#acRoot .ac-report-preview tbody tr:nth-child(even) td {
  background: #142035;
}
#acRoot tbody tr:hover td,
#acRoot tbody tr:hover th {
  background: #182944;
}
#acRoot .ac-scroll {
  scrollbar-color: #526b8d #111827;
  scrollbar-width: thin;
}
#acRoot select,
#acRoot input,
#acRoot textarea {
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease;
}
#acRoot select:hover,
#acRoot input:hover,
#acRoot textarea:hover {
  border-color: #6480a3;
}

@media (max-width: 760px) {
  #acRoot.ac-root {
    margin: 14px auto 20px;
  }
  #acRoot .ac-filterbar {
    padding: 13px;
    gap: 11px;
  }
  #acRoot .ac-filterbar > label,
  #acRoot .ac-filterbar > label:first-child,
  #acRoot .ac-secondary-filters > label {
    flex: 1 1 calc(50% - 11px);
    min-width: 130px;
  }
  #acRoot .ac-filterbar > label:first-child {
    flex-basis: 100%;
  }
  #acRoot .ac-filterbar > button {
    flex: 0 0 auto;
  }
  #acRoot .ac-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    gap: 12px;
  }
  #acRoot .ac-grid > button {
    grid-column: 1/-1;
    width: 100%;
  }
  #acRoot .ac-note {
    padding-left: 40px;
    font-size: 13px;
  }
  #acRoot .ac-exportbar > div {
    flex-basis: 100%;
  }
  #acRoot .ac-exportbar > a,
  #acRoot .ac-exportbar > button {
    flex: 1 1 130px;
    margin: 0;
  }
  #acRoot .ac-report-heading {
    padding: 15px;
  }
}

@media (max-width: 430px) {
  #acRoot .ac-filterbar > label:not(:first-child) {
    flex-basis: calc(50% - 11px);
  }
  #acRoot .ac-filterbar > button {
    width: 100%;
  }
  #acRoot .ac-secondary-filters > label:first-child {
    flex-basis: 100%;
  }
  #acRoot .ac-grid {
    grid-template-columns: 1fr;
  }
  #acRoot .ac-grid h3,
  #acRoot .ac-grid > button {
    grid-column: 1;
  }
  #acRoot .ac-exportbar > a,
  #acRoot .ac-exportbar > button {
    flex-basis: 100%;
  }
}

/* Horario semanal por asignatura y módulos. */
#acRoot .ac-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
#acRoot .ac-schedule-head h3,
#acRoot .ac-schedule-head p {
  margin: 0;
}
#acRoot .ac-week {
  min-width: 1120px;
  table-layout: fixed;
}
#acRoot .ac-week th:first-child {
  width: 210px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #1d2c43;
}
#acRoot .ac-week tbody th:first-child {
  background: #17243a;
}
#acRoot .ac-day-cell {
  min-width: 130px;
  vertical-align: top;
  background: #101a2a;
}
#acRoot .ac-day-cell.has-class {
  background: #142a35;
}
#acRoot .ac-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin: 0 0 7px;
  padding: 7px 8px;
  border: 1px solid #377589;
  border-radius: 8px;
  background: #153c49;
  color: #d8fbff;
  font-weight: 700;
  white-space: nowrap;
}
#acRoot .ac-module button {
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: #bdebf3;
}
#acRoot .ac-add-module {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  background: #1d304a;
  border-style: dashed;
  font-size: 12px;
}
#acRoot .ac-unassigned {
  display: block;
  margin-top: 7px;
  color: #f8c27a;
  font-size: 12px;
  font-style: normal;
}
#acRoot .ac-day-mobile {
  display: none;
}
#acScheduleDialog {
  width: min(720px, calc(100vw - 28px));
  padding: 20px;
  border: 1px solid #536b90;
  border-radius: 16px;
  background: #152036;
  color: #e2e8f0;
}
#acScheduleDialog::backdrop {
  background: #020617b8;
}
#acScheduleDialog .ac-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#acScheduleDialog h3,
#acScheduleDialog .ac-dialog-actions {
  grid-column: 1/-1;
}
#acScheduleDialog label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#acScheduleDialog input {
  width: 100%;
  background: #0f172a;
  color: #fff;
  border: 1px solid #475569;
  border-radius: 9px;
  padding: 10px;
}
#acScheduleDialog .ac-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 650px) {
  #acScheduleDialog .ac-grid {
    grid-template-columns: 1fr;
  }
  #acScheduleDialog h3,
  #acScheduleDialog .ac-dialog-actions {
    grid-column: 1;
  }
}

/* Módulos del horario: el botón de finalizar siempre queda dentro de la celda. */
#acRoot .ac-week td.ac-day-cell {
  padding: 8px;
}
#acRoot .ac-module {
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  padding: 5px 4px 5px 8px;
  box-sizing: border-box;
  overflow: hidden;
}
#acRoot .ac-module-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#acRoot .ac-module button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #bdebf3;
  font-size: 15px;
  line-height: 1;
}
#acRoot .ac-module button:hover,
#acRoot .ac-module button:focus-visible {
  background: #7f1d2d;
  color: #fff;
}

/* =========================================================================
   5. PÁGINA · Calificaciones (boleta grupal)
   ========================================================================= */

/* Calificaciones: la boleta del grupo.
   Mismo lenguaje que Docentes: banner de color, un panel con los filtros arriba
   y la tabla ocupando el resto de la pantalla.
   Colores de la tabla: AZUL = tu asignatura (se puede escribir),
   GRIS = otras asignaturas (solo consulta), ÁMBAR = cambio sin guardar, ROJO = nota inválida. */

.banner-grades {
  background: linear-gradient(112deg, #1e3a8a 0%, #2563eb 50%, #0891b2 100%);
}

.banner-grades .title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.banner-grades .btn.primary {
  background: var(--color-snow-white);
  border-color: var(--color-snow-white);
  color: #1e3a8a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.banner-grades .btn.primary:hover {
  background: #e8efff;
  border-color: #e8efff;
  color: #1e3a8a;
}

#bgRoot {
  --bg-name: 250px;
  --bg-grade: 150px;
  --bg-line: #353b48;
  --bg-own: #10324a;
  --bg-own-head: #16557a;
  --bg-other: #1a1e27;
  --bg-other-head: #262b36;
  --bg-cambio: #f59e0b;
  --bg-error: #f87171;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  color: var(--color-snow-white);
  color-scheme: dark;
}

#bgRoot *,
#bgConfirm * {
  box-sizing: border-box;
}

#bgRoot [hidden] {
  display: none !important;
}

#bgRoot p {
  margin: 0;
}

#bgRoot small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #d3d9e4;
}

#bgRoot fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

#bgRoot label,
#bgRoot .bg-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

#bgRoot select,
#bgRoot input:not([type="checkbox"]) {
  width: 100%;
  min-height: var(--boton-alto);
  padding: 9px 12px;
  border: 1.5px solid #4a5263;
  border-radius: 10px;
  background: #1b1f28;
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
}

#bgRoot select:focus,
#bgRoot input:focus {
  border-color: var(--foco);
  outline: none;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28);
}

#bgRoot :focus-visible,
#bgConfirm :focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* Botones de la boleta: secundarios grises; los de guardar/publicar, azules. */

#bgRoot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--boton-alto);
  padding: 10px 18px;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

#bgRoot button:hover:not(:disabled) {
  background: var(--boton-2-hover);
  border-color: var(--boton-2-borde-hover);
}

#bgRoot button:is(#bgSave, #bgSchedule, #bgPublishNow) {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-texto);
}

#bgRoot button:is(#bgSave, #bgSchedule, #bgPublishNow):hover:not(:disabled) {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
}

#bgRoot button:disabled {
  background: var(--boton-2) !important;
  border-color: #4a5263 !important;
  color: #aeb6c4 !important;
  cursor: not-allowed;
  box-shadow: none;
}

#bgRefresh::before {
  content: "↻";
  font-size: 18px;
}

#bgSave::before {
  content: "💾";
}

#bgRoot button#bgDiscard {
  background: transparent;
  border-color: #ef8a8a;
  color: #ffd4d4;
}

#bgRoot button#bgDiscard:hover {
  background: rgba(198, 40, 40, 0.18);
  border-color: #ffb0b0;
}

/* Avisos */

#bgNotice:empty {
  display: none;
}

#bgNotice {
  padding: 12px 16px;
  border: 1px solid #3f7a62;
  border-left-width: 5px;
  border-radius: 12px;
  background: #133126;
  color: #e5fff3;
  font-weight: 600;
}

#bgNotice.bg-error {
  border-color: #b54a5a;
  background: #3a1c23;
  color: #ffe1e6;
}

/* Filtros */

.bg-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.bg-period-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.bg-period-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#bgPeriods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#bgRoot #bgPeriods button {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 138px;
  padding: 9px 16px;
  text-align: left;
}

#bgRoot #bgPeriods button small {
  color: #c3cad6;
  font-size: 13px;
}

#bgRoot #bgPeriods button[aria-selected="true"] {
  background: var(--accion);
  border-color: #93b4ff;
  color: var(--accion-texto);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

#bgRoot #bgPeriods button[aria-selected="true"] small {
  color: #e6eeff;
}

#bgManage::before {
  content: "🔒";
}

/* Publicación a familias */

.bg-publication {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto auto;
  align-items: end;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #3c5a86;
  border-radius: 12px;
  background: #14203a;
}

.bg-publication > div {
  align-self: center;
}

.bg-publication strong {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
}

#bgRoot button#bgPublishNow {
  background: transparent;
  border-color: #93b4ff;
  color: #dbe6ff;
}

#bgRoot button#bgPublishNow:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.22);
}

/* Búsqueda y casillas */

.bg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
}

.bg-search {
  flex: 1 1 280px;
}

.bg-search-box {
  position: relative;
  display: block;
}

.bg-search-box svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #c3cad6;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

#bgRoot .bg-search-box input {
  padding-left: 40px;
}

.bg-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#bgRoot .bg-check {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  min-height: var(--boton-alto);
  padding: 8px 14px;
  border: 1.5px solid #4a5263;
  border-radius: var(--boton-radio);
  background: #1b1f28;
  color: var(--color-snow-white);
  font-size: 14px;
  cursor: pointer;
}

#bgRoot .bg-check:has(input:checked) {
  border-color: #6f9cff;
  background: #162a4d;
}

#bgRoot input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accion);
}

/* Resumen, clave de colores y notas */

.bg-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

#bgSummary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #3c5a86;
  border-radius: 12px;
  background: #14203a;
  color: var(--color-snow-white);
  font-weight: 600;
}

#bgSummary:empty {
  display: none;
}

.bg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bg-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #4a5263;
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-snow-white);
}

.bg-key::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.bg-key-own::before {
  background: #3b8fd0;
}

.bg-key-other::before {
  background: #5b6272;
}

#bgRoot .bg-pin-info {
  margin-top: -8px;
  color: #c3cad6;
  font-size: 13px;
}

#bgRoot .bg-pin-info:empty {
  display: none;
}

#bgRoot .bg-note {
  position: relative;
  padding: 12px 16px 12px 46px;
  border: 1px solid #3c4658;
  border-radius: 12px;
  background: #161b24;
  color: #dde3ec;
  font-size: 14px;
  line-height: 1.5;
}

#bgRoot .bg-note::before {
  content: "i";
  position: absolute;
  left: 15px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Tabla: ocupa el alto de la pantalla; encabezado, alumno y tus asignaturas quedan fijos. */

#bgRoot .bg-table-wrap {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 320px;
  max-height: calc(100dvh - 190px);
  overflow: auto;
  border: 1px solid var(--bg-line);
  border-radius: 14px;
  background: var(--bg-other);
  scrollbar-color: #5b6272 #151820;
  scrollbar-width: thin;
  scroll-padding-bottom: 90px;
}

#bgTable {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

#bgTable th,
#bgTable td {
  width: var(--bg-grade);
  min-width: var(--bg-grade);
  max-width: var(--bg-grade);
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--bg-line);
  border-bottom: 1px solid var(--bg-line);
  background: var(--bg-other);
  color: #e9edf3;
  font-size: 14px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

#bgTable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-other-head);
  color: var(--color-snow-white);
  font-weight: 700;
  vertical-align: top;
}

#bgTable thead th small {
  margin-top: 4px;
  color: #cfd6e2;
  font-size: 12px;
  font-weight: 500;
}

#bgTable thead .bg-field-group {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 72px;
  vertical-align: middle;
  color: #d9e3f3;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#bgTable .bg-fields {
  height: 72px;
}

#bgTable thead tr.bg-fields > th[rowspan] {
  vertical-align: middle;
}

#bgTable thead tr.bg-subjects th {
  top: var(--bg-fields-height, 72px);
}

#bgTable .bg-student {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--bg-name);
  min-width: var(--bg-name);
  max-width: var(--bg-name);
  background: #1f2430;
  color: var(--color-snow-white);
  font-weight: 700;
  text-align: left;
}

#bgTable tbody .bg-student small {
  margin-top: 2px;
  color: #c3cad6;
  font-weight: 500;
}

#bgTable thead .bg-student {
  z-index: 8;
  background: #2b3140;
}

#bgTable .bg-own {
  background: var(--bg-own);
}

#bgTable thead .bg-own,
#bgTable thead .bg-field-group.bg-pin {
  background: var(--bg-own-head);
}

#bgTable .bg-other {
  background: var(--bg-other);
  color: #c9d0dc;
}

#bgTable thead .bg-other {
  background: var(--bg-other-head);
}

#bgTable tbody tr:hover > * {
  filter: brightness(1.12);
}

#bgTable .bg-terms {
  display: block;
  margin-bottom: 6px;
  color: #b9c2d0;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}

/* Casilla de calificación: grande, centrada y con estado de color. */

#bgRoot #bgTable input {
  width: 100%;
  min-height: 44px;
  padding: 6px;
  border: 1.5px solid #5b88b8;
  border-radius: 10px;
  background: #0b1a27;
  color: var(--color-snow-white);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

#bgRoot #bgTable input::placeholder {
  color: #8c9ab0;
}

#bgRoot #bgTable input.bg-changed {
  border-color: var(--bg-cambio);
  background: #3a2a0c;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

#bgRoot #bgTable input[aria-invalid="true"] {
  border-color: var(--bg-error);
  background: #45202a;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.3);
}

.bg-hide-others .bg-other {
  display: none;
}

/* Tus asignaturas fijas a la izquierda al desplazar a la derecha */

#bgTable tbody .bg-pin.is-pinned {
  position: sticky;
  left: var(--bg-pin-left, 0);
  z-index: 2;
}

#bgTable thead .bg-pin.is-pinned {
  position: sticky;
  left: var(--bg-pin-left, 0);
  z-index: 6;
}

#bgTable thead .bg-field-group.bg-pin {
  top: 0;
}

#bgTable thead .bg-field-group.bg-pin.is-pinned {
  z-index: 7;
}

#bgTable .is-pin-edge {
  box-shadow:
    6px 0 8px -4px rgba(0, 0, 0, 0.6),
    1px 0 0 #3b8fd0;
}

/* Barra de guardado: siempre visible abajo mientras se captura. */

.bg-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  border: 1.5px solid #3c5a86;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.bg-savebar > div {
  flex: 1;
  min-width: 0;
}

.bg-savebar strong {
  display: block;
  font-size: 16px;
}

#bgRoot #bgSave {
  min-width: 200px;
  font-size: 16px;
}

/* Ventana de confirmación */

#bgConfirm[open] {
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #4a5263;
  border-radius: 18px;
  background: #181b22;
  color: var(--color-snow-white);
}

#bgConfirm::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

#bgConfirm h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

#bgConfirm p {
  margin: 0;
  color: #dde3ec;
  line-height: 1.6;
}

#bgConfirm > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

/* Tableta */

@media (max-width: 1000px) {
  .bg-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .bg-filters > button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .bg-publication {
    grid-template-columns: 1fr 1fr;
  }

  .bg-publication > div {
    grid-column: 1 / -1;
  }

  .banner-grades .title-actions {
    justify-content: flex-start;
  }
}

/* Teléfono */

@media (max-width: 700px) {
  #bgRoot {
    --bg-name: 150px;
    --bg-grade: 116px;
    gap: 12px;
  }

  #bgRoot fieldset {
    padding: 12px;
  }

  .bg-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  #bgHint {
    display: none !important;
  }

  .bg-filters > button,
  .bg-period-row > button,
  .bg-period-box {
    width: 100%;
  }

  #bgRoot #bgPeriods button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 10px;
  }

  .bg-publication {
    grid-template-columns: 1fr;
  }

  .bg-publication > div {
    grid-column: auto;
  }

  .bg-publication button,
  .bg-checks,
  #bgRoot .bg-check {
    width: 100%;
  }

  #bgRoot .bg-table-wrap {
    max-height: 70dvh;
  }

  #bgTable th,
  #bgTable td {
    padding: 8px;
    font-size: 13px;
  }

  #bgTable thead .bg-field-group,
  #bgTable .bg-fields {
    height: 60px;
  }

  #bgTable thead tr.bg-subjects th {
    top: var(--bg-fields-height, 60px);
  }

  .bg-savebar {
    bottom: 6px;
    flex-wrap: wrap;
    padding: 12px;
  }

  .bg-savebar > div {
    flex-basis: 100%;
  }

  .bg-savebar strong {
    font-size: 15px;
  }

  .bg-savebar button,
  #bgRoot #bgSave {
    flex: 1;
    min-width: 0;
  }

  .banner-grades .title-actions,
  .banner-grades .title-actions > * {
    width: 100%;
  }
}

/* Actas de calificaciones (pantalla): mismos campos, botones y colores que la boleta.
   Solo pantalla; la hoja impresa (.ap-doc) no se toca. */

.actas-shell .actas-menu {
  padding: 18px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.actas-shell .actas-menu-grid > label,
.actas-shell .actas-periods > span,
.actas-shell .actas-search {
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

.actas-shell .actas-menu select,
.actas-shell .actas-menu input[type="date"],
.actas-shell .actas-results-head input {
  min-height: var(--boton-alto);
  padding: 9px 12px;
  border: 1.5px solid #4a5263;
  border-radius: 10px;
  background: #1b1f28;
  color: var(--color-snow-white);
  font-size: 15px;
}

.actas-shell .actas-menu select:focus,
.actas-shell .actas-menu input:focus,
.actas-shell .actas-results-head input:focus {
  border-color: var(--foco);
  outline: none;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28);
}

.actas-shell .actas-periods label span {
  min-height: var(--boton-alto);
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  font-size: 15px;
}

.actas-shell .actas-periods label:hover span {
  background: var(--boton-2-hover);
}

.actas-shell .actas-periods input:checked + span {
  border-color: #93b4ff;
  background: var(--accion);
  color: var(--accion-texto);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.actas-shell .actas-range {
  border-color: #4a5263;
  color: #d3d9e4;
}

.actas-shell .actas-range-title em,
.actas-shell .actas-range small,
.actas-shell .actas-range label {
  color: #c3cad6;
}

.actas-shell .actas-range label {
  font-size: 13px;
  font-weight: 600;
}

.actas-shell .actas-menu-actions {
  border-top-color: var(--edge-hairline);
}

.actas-shell .actas-primary::before {
  content: "🔎 ";
}

.actas-shell .actas-menu-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--boton-alto);
  padding: 10px 18px;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  font-weight: var(--font-weight-semibold);
}

.actas-shell .actas-menu-actions a:hover {
  background: var(--boton-2-hover);
  border-color: var(--boton-2-borde-hover);
}

.actas-shell .actas-results-head {
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #3c5a86;
  border-radius: 14px;
  background: #14203a;
}

.actas-shell .actas-results-head p {
  color: #dde3ec;
  font-size: 16px;
}

.actas-shell .actas-status > b {
  font-size: 18px;
}

.actas-shell .actas-status span,
.actas-shell .acta-badges span {
  border-color: #4a5263;
  color: #e3e8f0;
  font-size: 13px;
}

/* =========================================================================
   5. PÁGINA · Actas de calificaciones
   ========================================================================= */
.actas-shell {
  max-width: 1200px;
  margin: 0 auto 28px;
  color: #eef2f7;
}
.actas-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.actas-head small {
  color: #9da8ba;
  letter-spacing: 0.08em;
}
.actas-head h2 {
  margin: 4px 0 8px;
  font-size: 28px;
}
.actas-head p {
  margin: 0;
  color: #aeb7c7;
  max-width: 720px;
}
.actas-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.actas-actions a,
.actas-actions button,
:where(.pg-actas_calificaciones) .actas-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 13px;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}
:where(.pg-actas_calificaciones) .actas-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 12px;
  padding: 16px;
  border: 1px solid #343b49;
  border-radius: 14px;
  background: #12161d;
  margin-bottom: 14px;
}
:where(.pg-actas_calificaciones) .actas-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #b9c1cf;
  font-size: 13px;
}
:where(.pg-actas_calificaciones) .actas-filters select {
  min-height: 42px;
  border: 1px solid #41495a;
  border-radius: 8px;
  background: #1d222c;
  color: #f3f5f8;
  padding: 8px 10px;
}
.actas-status {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.actas-status span,
.acta-badges span {
  padding: 7px 10px;
  border: 1px solid #394152;
  border-radius: 999px;
  background: #181d26;
  color: #cbd2de;
  font-size: 12px;
}
.actas-grid {
  display: grid;
  gap: 18px;
}
.acta-card {
  border: 1px solid #343b49;
  border-radius: 15px;
  background: #11151c;
  overflow: hidden;
}
.acta-card > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid #303744;
  background: #171c25;
}
.acta-card h3 {
  margin: 3px 0 5px;
  font-size: 20px;
}
.acta-card header p,
.acta-card header small {
  margin: 0;
  color: #aab4c5;
}
.acta-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.acta-badges .is-own {
  border-color: #2f7ea0;
  background: #15374a;
}
.acta-badges .is-readonly {
  border-color: #635783;
  background: #29223b;
}
.acta-table-wrap {
  overflow: auto;
}
.acta-card table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.acta-card th,
.acta-card td {
  padding: 11px 14px;
  border-bottom: 1px solid #292f3a;
  text-align: left;
}
.acta-card th {
  background: #1b2029;
  color: #bac3d0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.acta-card tbody tr:last-child td {
  border-bottom: 0;
}
.acta-grade {
  font-size: 16px;
  font-weight: 700;
}
.acta-grade span {
  color: #737f91;
}
.actas-empty {
  padding: 28px;
  border: 1px dashed #41495a;
  border-radius: 14px;
  background: #141820;
}
.actas-empty h2,
.actas-empty h3 {
  margin-top: 0;
}
.actas-empty a {
  color: #c7bdff;
}
@media (max-width: 800px) {
  :where(.pg-actas_calificaciones) .actas-filters {
    grid-template-columns: 1fr;
  }
  .acta-card > header {
    flex-direction: column;
  }
  .acta-badges {
    justify-content: flex-start;
  }
}
@media print {
  :where(.pg-actas_calificaciones) .side,
  :where(.pg-actas_calificaciones) .topbar,
  .actas-actions,
  :where(.pg-actas_calificaciones) .actas-filters {
    display: none !important;
  }
  :where(.pg-actas_calificaciones) .content {
    padding: 0 !important;
  }
  .actas-shell {
    max-width: none;
    color: #000;
  }
  .acta-card {
    break-inside: avoid;
    border-color: #bbb;
    background: #fff;
  }
  .acta-card > header,
  .acta-card th {
    background: #f4f4f4;
    color: #000;
  }
  .acta-card header p,
  .acta-card header small,
  .acta-card td,
  :where(.pg-actas_calificaciones) .acta-status span {
    color: #000;
  }
  .acta-badges span,
  .actas-status span {
    border-color: #aaa;
    background: #fff;
  }
}

/* ---------- Menú de consulta ---------- */
.actas-menu {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid #343b49;
  border-radius: 16px;
  background: #12161d;
}
.actas-menu-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.actas-menu-grid > label {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: #b9c1cf;
  font-size: 13px;
}
.actas-menu select,
.actas-menu input[type="date"],
.actas-results-head input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid #41495a;
  border-radius: 9px;
  background: #1d222c;
  color: #f3f5f8;
  padding: 8px 10px;
  font: inherit;
  color-scheme: dark;
}
.actas-menu select option[hidden] {
  display: none;
}
.actas-periods {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.actas-periods > span {
  color: #b9c1cf;
  font-size: 13px;
}
.actas-periods > div {
  display: flex;
  gap: 6px;
}
.actas-periods label {
  flex: 1;
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.actas-periods input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.actas-periods label span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 6px;
  font-size: 13px;
  white-space: nowrap;
  border: 1px solid #41495a;
  border-radius: 9px;
  background: #1d222c;
  color: #dfe5ee;
  font-weight: 600;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.actas-periods input:checked + span {
  border-color: #a99cf0;
  background: #302944;
  color: #fff;
}
.actas-periods input:focus-visible + span {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}
.actas-range {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  grid-template-areas: "t d" "h d";
  gap: 4px 20px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px dashed #3a4252;
  border-radius: 12px;
  color: #b9c1cf;
  font-size: 13px;
}
.actas-range-title {
  grid-area: t;
  align-self: end;
  color: #dfe5ee;
  font-weight: 600;
}
.actas-range > small {
  grid-area: h;
  align-self: start;
}
.actas-range-title em {
  font-style: normal;
  color: #8d97a8;
}
.actas-range > div {
  grid-area: d;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.actas-range label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #8d97a8;
}
.actas-range button {
  min-height: 44px;
  width: 44px;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  font-size: 18px;
  cursor: pointer;
}
.actas-range button[hidden] {
  display: none;
}
.actas-range small {
  display: block;
  color: #8d97a8;
  line-height: 1.45;
}
.actas-range small b {
  color: #dfe5ee;
}
.actas-menu-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #262c38;
}
.actas-primary {
  min-height: var(--boton-alto);
  padding: 10px 20px;
  border: 1.5px solid var(--accion);
  border-radius: var(--boton-radio);
  background: var(--accion);
  color: var(--accion-texto);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.actas-primary:hover {
  background: var(--accion-hover);
}
.actas-actions #actasPrint {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-texto);
}
.actas-actions #actasPrint:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
}
.actas-menu-actions a {
  color: #c7bdff;
  text-decoration: none;
}
.actas-start {
  text-align: center;
  padding: 40px 24px;
}
.actas-start p {
  max-width: 640px;
  margin: 0 auto;
  color: #aeb7c7;
  line-height: 1.6;
}
.actas-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.actas-results-head p {
  margin: 0;
  color: #aeb7c7;
}
.actas-results-head b {
  color: #fff;
}
.actas-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  color: #b9c1cf;
  font-size: 13px;
}
.actas-group {
  margin: 0 0 28px;
}
.actas-status > b {
  align-self: center;
  margin-right: 4px;
  font-size: 17px;
  color: #fff;
}
.acta-badges .is-danger {
  border-color: #7b424d;
  background: #382127;
  color: #ffd6dc;
}
.acta-card th.acta-num,
.acta-card td.acta-num {
  text-align: center;
  width: 120px;
}
.acta-card .acta-n {
  width: 44px;
  color: #8d97a8;
  text-align: center;
}
.acta-card td.acta-num small {
  display: block;
  margin-top: 2px;
  color: #8d97a8;
  font-size: 11px;
}
.acta-card td.has-abs {
  color: #fbbf24;
  font-weight: 700;
}
.acta-card .acta-grade.is-fail {
  color: #ff8fa0;
}
.acta-card table {
  min-width: 0;
  table-layout: auto;
}
@media (max-width: 900px) {
  .actas-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .actas-menu-grid > label,
  .actas-periods,
  .actas-range {
    grid-column: span 1;
  }
  .actas-periods {
    grid-column: 1/-1;
  }
  .actas-range {
    grid-column: 1/-1;
  }
}
@media (max-width: 560px) {
  .actas-menu-grid {
    grid-template-columns: 1fr;
  }
  .acta-card th:nth-child(2),
  .acta-card td:nth-child(2),
  .acta-card th:last-child,
  .acta-card td:last-child {
    display: none;
  }
  .actas-search {
    min-width: 0;
    width: 100%;
  }
}
@media print {
  .actas-menu,
  .actas-results-head .actas-search {
    display: none !important;
  }
  .actas-group {
    break-before: page;
  }
  .actas-group:first-of-type {
    break-before: auto;
  }
  .acta-card td.has-abs,
  .acta-card .acta-grade.is-fail {
    color: #000;
  }
}

.acta-card th.acta-term,
.acta-card td.acta-term {
  width: 70px;
  color: #c9d1dd;
}
.acta-card td.acta-term.is-fail {
  color: #ff8fa0;
}
.acta-card small.acta-terms-abs {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .actas-range {
    grid-template-columns: 1fr;
    grid-template-areas: "t" "h" "d";
  }
}

/* =========================================================================
   5. PÁGINA · Actas de calificaciones (impresión)
   ========================================================================= */

/* Acta imprimible · mismo formato que los informes de fin de curso (carta horizontal). */
@font-face {
  font-family: "InfInter";
  font-weight: 400;
  font-display: swap;
  src: url("informes/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-weight: 500;
  font-display: swap;
  src: url("informes/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-weight: 600;
  font-display: swap;
  src: url("informes/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-weight: 700;
  font-display: swap;
  src: url("informes/fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfJakarta";
  font-weight: 700;
  font-display: swap;
  src: url("informes/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfJakarta";
  font-weight: 800;
  font-display: swap;
  src: url("informes/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

.ap-doc,
.ap-foot {
  display: none;
}

@media print {
  @page {
    size: letter landscape;
    margin: 0;
  }

  html:where(.pg-actas_calificaciones),
  :where(.pg-actas_calificaciones) body,
  :where(.pg-actas_calificaciones) .app,
  :where(.pg-actas_calificaciones) .main,
  :where(.pg-actas_calificaciones) main {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
  }

  :where(.pg-actas_calificaciones) body::before,
  :where(.pg-actas_calificaciones) .side,
  :where(.pg-actas_calificaciones) .main > header,
  :where(.pg-actas_calificaciones) .topbar,
  :where(.pg-actas_calificaciones) .school-section-tabs,
  :where(.pg-actas_calificaciones) .alert,
  .actas-shell,
  :where(.pg-actas_calificaciones) body > .nav-backdrop {
    display: none !important;
  }

  .ap-doc {
    display: block;
  }

  .ap-doc,
  .ap-doc *,
  .ap-foot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
  }

  .ap-foot {
    display: block;
    position: fixed;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50mm;
  }

  .ap-foot img {
    display: block;
    width: 100%;
    max-width: none;
    height: 50mm;
    object-fit: fill;
  }

  .ap-sheet {
    position: relative;
    z-index: 1;
    break-before: page;
    page-break-before: always;
    color: #1f2329;
    font-family: "InfInter", Inter, "Segoe UI", Arial, sans-serif;
    font-size: 9pt;
    line-height: 1.25;
  }

  .ap-sheet:first-child {
    break-before: auto;
    page-break-before: auto;
  }

  .ap-sheet p,
  .ap-sheet b,
  .ap-sheet span,
  .ap-sheet small,
  .ap-sheet td,
  .ap-sheet th {
    color: inherit;
    letter-spacing: 0;
  }

  .ap-page {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: transparent;
    font: inherit;
    color: inherit;
  }

  .ap-page > thead > tr > td,
  .ap-page > tfoot > tr > td,
  .ap-page > tbody > tr > td {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
  }

  .ap-page > thead > tr > td {
    padding: 6mm 14mm 3mm 10mm;
  }

  .ap-page > tbody > tr > td.ap-body {
    padding: 0 14mm;
    vertical-align: top;
  }

  .ap-foot-space {
    height: 25mm;
  }

  /* Encabezado institucional (idéntico a los informes) */
  .ap-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 7mm;
  }

  .ap-head img {
    display: block;
    max-width: none;
  }

  .ap-escudo {
    width: auto;
    height: 21mm;
  }
  .ap-qroo {
    width: auto;
    height: 16mm;
  }

  .ap-supervision {
    justify-self: end;
    width: 118mm;
    margin: 0;
    color: #000 !important;
    font-family: "ADLaM Display", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
    font-size: 13.5pt;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
  }

  .ap-legend {
    grid-column: 1 / -1;
    width: 118mm;
    margin: 2.5mm 0 0 34mm;
    color: #000 !important;
    font-family: Cambria, Caladea, "Times New Roman", serif;
    font-size: 9.5pt;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  }

  .ap-body > * {
    position: relative;
    background: #fff;
  }

  /* Barra de título */
  .ap-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10mm;
    margin: 1mm 0 3mm;
    padding: 0 0 1.6mm;
    border-bottom: 0.8pt solid #c9ced6;
    font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
    word-spacing: 0.14em;
  }

  .ap-title span {
    color: #3a404c;
    font-size: 10pt;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .ap-title b {
    padding: 1.1mm 4mm;
    border-radius: 1.4mm;
    background: #2f343d;
    color: #fff !important;
    font-size: 9.5pt;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
  }

  /* Tablas modernas (misma línea que los anexos) */
  .ap-t {
    width: 100%;
    min-width: 0;
    margin: 0 0 3mm;
    border: 0.7pt solid #aeb4be;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 2.2mm;
    overflow: hidden;
    table-layout: fixed;
    background: #fff;
    color: #1f2329;
    font-family: "InfInter", Inter, "Segoe UI", Arial, sans-serif;
    font-size: 8pt;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }

  .ap-t th,
  .ap-t td {
    position: static;
    padding: 0.95mm 1.4mm;
    border: 0;
    border-right: 0.5pt solid #d3d7de;
    border-bottom: 0.5pt solid #d3d7de;
    background: transparent;
    color: inherit;
    font-size: inherit;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .ap-t tr > :last-child {
    border-right: 0;
  }
  .ap-t tbody tr:last-child > * {
    border-bottom: 0;
  }

  .ap-id td {
    padding: 1.5mm 2.4mm;
    background: #f4f5f7;
    text-align: left;
    font-size: 8pt;
  }

  .ap-id td b {
    color: #5b6270 !important;
    font-size: 6.8pt;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .ap-list thead {
    display: table-header-group;
  }

  .ap-list thead th {
    padding: 1.7mm 1mm;
    border-bottom: 0.9pt solid #5e1c1b;
    background: #8e2f2d;
    color: #fff !important;
    font-size: 6.8pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ap-list tbody tr:nth-child(even) > td {
    background: #f6f8fa;
  }
  .ap-list tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .ap-list td.n {
    color: #6a7180;
  }
  .ap-list td.l,
  .ap-list th.l {
    text-align: left;
    padding-left: 2.4mm;
  }
  .ap-list td.g {
    font-weight: 700;
    font-size: 8.6pt;
  }
  .ap-list td.fail {
    color: #b3261e !important;
    font-weight: 700;
  }
  .ap-list td small {
    color: #6a7180;
    font-size: 6.5pt;
    white-space: nowrap;
  }
  .ap-list td:has(> small) {
    white-space: nowrap;
  }
  .ap-list td.empty {
    padding: 5mm;
    color: #6a7180;
    font-style: italic;
  }
  .ap-list col.c-no {
    width: 10mm;
  }
  .ap-list col.c-mat {
    width: 24mm;
  }
  .ap-list col.c-term {
    width: 15mm;
  }
  .ap-list col.c-grade {
    width: 24mm;
  }
  .ap-list col.c-abs {
    width: 32mm;
  }

  .ap-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2mm;
    margin: 0 0 4mm;
    break-inside: avoid;
  }

  .ap-summary span {
    padding: 1mm 3mm;
    border: 0.6pt solid #d3d7de;
    border-radius: 5mm;
    background: #f4f5f7;
    color: #3a404c;
    font-size: 7.5pt;
  }

  .ap-summary b {
    color: #1f2329 !important;
    font-weight: 700;
  }

  /* Firmas */
  .ap-signs {
    display: grid;
    grid-template-columns: 1fr 1fr 36mm;
    align-items: end;
    gap: 12mm;
    margin: 4mm 6mm 0;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
    font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  }

  .ap-signs .line {
    display: block;
    width: 85%;
    margin: 0 auto 1.2mm;
    border-top: 0.7pt solid #000;
  }

  .ap-signs b {
    display: block;
    min-height: 4mm;
    font-size: 8.5pt;
    font-weight: 700;
  }

  .ap-signs small {
    display: block;
    margin-top: 0.6mm;
    color: #5b6270;
    font-family: "InfInter", Inter, Arial, sans-serif;
    font-size: 7pt;
    letter-spacing: 0.04em;
  }

  .ap-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20mm;
    border: 0.6pt dashed #d4d7dc;
    border-radius: 50%;
    color: #c4c8ce !important;
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.2em;
  }
}

/* =========================================================================
   5. PÁGINA · Informes
   ========================================================================= */

/* Tipografías del informe (Inter y Plus Jakarta Sans, licencia OFL), alojadas en el sitio para imprimir sin depender de internet externo. */
@font-face {
  font-family: "InfInter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("informes/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("informes/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("informes/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("informes/fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfInter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("informes/fonts/inter-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfJakarta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("informes/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfJakarta";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("informes/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfJakarta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("informes/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "InfJakarta";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("informes/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

.inf-app {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.inf-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.inf-toolbar h2 {
  margin: 5px 0;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.02em;
}

.inf-toolbar p {
  margin: 0;
  color: #b8c2d7;
  line-height: 1.5;
}

.inf-toolbar small,
.inf-card > span {
  color: #8ab4ff;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
}

.inf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.inf-actions a {
  color: #c9bbff;
  text-decoration: none;
  padding: 9px 4px;
}

.inf-actions a:hover,
.inf-actions a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.inf-app button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1.5px solid var(--accion);
  border-radius: var(--boton-radio);
  padding: 9px 16px;
  background: var(--accion);
  color: var(--accion-texto);
  font: inherit;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.inf-app button:hover,
.inf-app button:focus-visible {
  background: #d7ceff;
  color: #16112b;
}

.inf-app button:active {
  transform: translateY(1px);
}

.inf-filters {
  display: grid;
  grid-template-columns: minmax(210px, 1.3fr) repeat(2, minmax(165px, 0.8fr)) auto;
  align-items: end;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid #343a49;
  border-radius: 14px;
  background: #181c24;
}

.inf-app label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: #c8d0df;
  font-size: 12px;
  font-weight: 600;
}

.inf-app input,
.inf-app select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid #495267;
  border-radius: 8px;
  padding: 9px 11px;
  background: #11151d;
  color: #f1f4fc;
  font: inherit;
  font-size: 13px;
}

.inf-app input:focus,
.inf-app select:focus {
  outline: 2px solid #9d8cf5;
  outline-offset: 1px;
  border-color: #8ab4ff;
}

.inf-filters button {
  min-width: 104px;
}

.inf-alert {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #54486f;
  border-left: 3px solid #8ab4ff;
  border-radius: 8px;
  background: #292338;
  color: #f2edff;
  line-height: 1.5;
}

.inf-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.inf-card {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #353d4d;
  border-radius: 14px;
  background: #171b23;
  color: #edf1fb;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.inf-card:hover,
.inf-card:focus-visible {
  border-color: #9d8cf5;
  background: #202333;
  transform: translateY(-2px);
}

.inf-card h3 {
  margin: 13px 0 8px;
  font-size: 17px;
  line-height: 1.3;
}

.inf-card p {
  flex: 1;
  margin: 0 0 16px;
  color: #aebbd2;
  font-size: 13px;
  line-height: 1.5;
}

.inf-card b {
  color: #8ab4ff;
  font-size: 13px;
}

.inf-settings {
  margin: 0;
  padding: 20px;
  border: 1px solid #3c4352;
  border-radius: 12px;
  background: #151922;
}

.inf-settings summary {
  cursor: pointer;
  color: #f0f2fa;
  font-weight: 700;
}

.inf-settings summary::marker {
  color: #8ab4ff;
}

.inf-settings > p {
  max-width: 850px;
  margin: 14px 0;
  color: #b8c2d7;
  line-height: 1.55;
}

.inf-settings form {
  margin-top: 18px;
}

.inf-settings fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.inf-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 13px;
}

.inf-settings h3 {
  margin: 25px 0 8px;
  color: #f0f2fa;
  font-size: 15px;
}

.inf-settings h3 + p {
  margin: 0 0 10px;
  color: #aebbd2;
  font-size: 12px;
  line-height: 1.5;
}

.inf-scroll {
  margin: 0 0 6px;
  overflow-x: auto;
  border: 1px solid #353d4d;
  border-radius: 9px;
}

.inf-edit-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}

.inf-edit-table td,
.inf-edit-table th {
  padding: 9px 10px;
  border-bottom: 1px solid #3c4352;
  text-align: left;
  vertical-align: middle;
}

.inf-edit-table thead th {
  background: #202632;
  color: #e8ebf4;
  font-size: 12px;
}

.inf-edit-table tbody tr:last-child td,
.inf-edit-table tbody tr:last-child th {
  border-bottom: 0;
}

.inf-edit-table input,
.inf-edit-table select {
  min-height: 38px;
}

.inf-edit-table input {
  width: 100%;
}

.inf-edit-table select {
  min-width: 130px;
}

.inf-edit-table button {
  min-width: 34px;
  min-height: 34px;
  padding: 5px 9px;
  border-color: #555d6e;
  background: transparent;
  color: #d7dceb;
}

.inf-edit-table button:hover,
.inf-edit-table button:focus-visible {
  border-color: #e598a9;
  background: #38242d;
  color: #fff;
}

.inf-settings .inf-actions {
  margin-top: 16px;
}

.inf-card--all {
  border-style: dashed;
  border-color: #6b5fb0;
}

.inf-field-wide {
  grid-column: span 2;
}

.inf-print-tip {
  margin: 0;
  color: #aebbd2;
  font-size: 12px;
  line-height: 1.5;
}

.inf-print-tip b {
  color: #e7e2ff;
  font-weight: 600;
}

/* ==========================================================================
   Documento imprimible · Carta horizontal (279.4 × 215.9 mm)
   Réplica del formato "ANEXOS 1-5 PARA FIN DE CURSO" de la Supervisión.
   ========================================================================== */

.inf-app--doc {
  max-width: none;
}

.inf-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  padding: 4px 2px 24px;
}

.inf-sheet {
  --inf-ink: #000;
  --inf-rule: #000;
  --inf-side: 14mm;
  position: relative;
  z-index: 1;
  flex: none;
  width: 279.4mm;
  min-height: 215.9mm;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  color: var(--inf-ink);
  box-shadow:
    0 1px 2px #0006,
    0 14px 40px #0005;
  font-family: "InfInter", Inter, "Segoe UI", Arial, sans-serif;
  font-size: 9pt;
  line-height: 1.25;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.inf-sheet *,
.inf-print-foot {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.inf-sheet b,
.inf-sheet strong,
.inf-sheet u,
.inf-sheet span,
.inf-sheet small,
.inf-sheet p,
.inf-sheet th,
.inf-sheet td {
  color: inherit;
}

/* Tabla de maquetación: thead = encabezado repetido, tfoot = pie. */
.inf-page {
  width: 100%;
  height: 215.9mm;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

.inf-page > thead > tr > td,
.inf-page > tfoot > tr > td,
.inf-page > tbody > tr > td {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: normal;
}

.inf-page > thead > tr > td {
  height: 1px;
  padding: 6mm var(--inf-side) 3mm 10mm;
  vertical-align: top;
}

.inf-page > tbody > tr > td.inf-page-body {
  height: auto;
  padding: 0 var(--inf-side);
  vertical-align: top;
}

.inf-page > tfoot > tr > td {
  height: 1px;
  vertical-align: bottom;
}

.inf-foot-slot img {
  display: block;
  width: 100%;
  max-width: none;
  height: 50mm;
  object-fit: fill;
}

.inf-print-foot {
  display: none;
}

/* ---------- Encabezado institucional ---------- */
.inf-doc-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 7mm;
}

.inf-doc-head img {
  display: block;
  max-width: none;
  border-radius: 0;
}

.inf-escudo {
  width: auto;
  height: 21mm;
}

.inf-qroo {
  width: auto;
  height: 16mm;
}

.inf-supervision {
  justify-self: end;
  width: 118mm;
  margin: 0;
  color: #000;
  font-family: "ADLaM Display", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-size: 13.5pt;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
}

.inf-legend {
  grid-column: 1 / -1;
  width: 118mm;
  margin: 2.5mm 0 0 34mm;
  color: #000;
  font-family: Cambria, Caladea, "Times New Roman", serif;
  font-size: 9.5pt;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* ---------- Tipografía del documento ---------- */
.inf-page-body > * {
  position: relative;
  background: #fff;
}

.inf-doc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10mm;
  min-height: 7mm;
  margin: 1mm 0 2.5mm;
  padding: 0 0 1.6mm;
  border-bottom: 0.8pt solid #c9ced6;
  font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  word-spacing: 0.14em;
}

.inf-doc-title span {
  color: #3a404c;
  font-size: 9.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.inf-doc-title b {
  padding: 1.1mm 4mm;
  border-radius: 1.4mm;
  background: #2f343d;
  color: #fff !important;
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

.inf-page-body h3.inf-doc-h {
  width: auto;
  overflow: visible;
  margin: 0 0 1.5mm;
  border-radius: 0;
  color: #000;
  font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  word-spacing: 0.14em;
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
}

.inf-page-body h3.inf-doc-h u,
.inf-page-body h3.inf-doc-h b {
  font-weight: 700;
}

.inf-doc-sub {
  margin: 0 0 2mm;
  font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  word-spacing: 0.14em;
  font-size: 9.5pt;
  text-align: center;
}

.inf-doc-school {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 5mm;
  row-gap: 0.5mm;
  margin: 0 0 3mm;
  font-size: 8.5pt;
}

.inf-doc-school u {
  font-weight: 700;
}

.inf-doc-school span {
  color: #333;
  font-size: 7.5pt;
}

.inf-grade-label {
  margin: 2.5mm 0 1mm;
  font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  word-spacing: 0.14em;
  font-size: 9.5pt;
  font-weight: 700;
}

.inf-aviso {
  margin: 1.5mm 0 3mm;
  font-size: 8pt;
  line-height: 1.35;
}

.inf-aviso b {
  font-size: 9pt;
}

/* ---------- Tablas del formato (estilo moderno) ---------- */
.inf-sheet {
  --t-line: #d3d7de;
  --t-edge: #aeb4be;
  --t-head-ink: #1d2230;
  --t-radius: 2.2mm;
}

.inf-page-body table.inf-t {
  width: 100%;
  margin: 0 0 3mm;
  border: 0.7pt solid var(--t-edge);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--t-radius);
  overflow: hidden;
  table-layout: fixed;
  background: #fff;
  color: #1f2329;
  font-family: "InfInter", Inter, "Segoe UI", Arial, sans-serif;
  font-size: 8pt;
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "cv11" 1;
  line-height: 1.2;
}

.inf-page-body .inf-t th,
.inf-page-body .inf-t td {
  position: static;
  padding: 1.25mm 0.8mm;
  border: 0;
  border-right: 0.5pt solid var(--t-line);
  border-bottom: 0.5pt solid var(--t-line);
  background: transparent;
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}

.inf-page-body .inf-t tr > :last-child {
  border-right: 0;
}
.inf-page-body .inf-t tbody tr:last-child > * {
  border-bottom: 0;
}

.inf-page-body .inf-t thead th {
  padding: 1.6mm 0.6mm;
  border-bottom: 0.9pt solid rgba(0, 0, 0, 0.28);
  background: #eceef2;
  color: var(--t-head-ink);
  font-size: 6.1pt;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-transform: uppercase;
}

.inf-page-body .inf-t tbody th {
  color: var(--t-head-ink);
  font-size: 6.6pt;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.inf-page-body .inf-t td.l {
  padding-left: 2.2mm;
  text-align: left;
}

.inf-page-body .inf-t td.inf-total,
.inf-page-body .inf-t td b {
  font-weight: 700;
}

.inf-t col.w-ind {
  width: 30mm;
}
.inf-t col.w-grade {
  width: 11.5mm;
}
.inf-t col.w-shift {
  width: 21mm;
}
.inf-t col.w-total {
  width: 16mm;
}
.inf-t col.w-no {
  width: 11mm;
}
.inf-t col.w-name {
  width: 78mm;
}
.inf-t col.w-count {
  width: 40mm;
}
.inf-t col.w-app {
  width: 32mm;
}
.inf-t col.w-sign {
  width: 58mm;
}

.inf-t tr,
.inf-t thead {
  break-inside: avoid;
  page-break-inside: avoid;
}

.inf-t thead {
  display: table-header-group;
}

.inf-keep,
.inf-sign-table,
.inf-vobo,
.inf-terminal {
  break-inside: avoid;
  page-break-inside: avoid;
}

.inf-doc-title,
.inf-page-body h3.inf-doc-h,
.inf-doc-sub,
.inf-doc-school,
.inf-grade-label {
  break-after: avoid;
  page-break-after: avoid;
}

/* Columna de totales: tinte neutro para separarla visualmente. */
.inf-page-body .inf-t tbody td.inf-total,
.inf-page-body .inf-t tbody tr > td:last-child.c-lgray {
  background: rgba(0, 0, 0, 0.045);
}

/* ---- Paleta del documento, en tonos suavizados ---- */
.inf-page-body .inf-t .c-gray > th,
.inf-page-body .inf-t .c-lgray > th,
.inf-page-body .inf-t .c-f2 > th {
  background: #e6e8ec;
}
.inf-page-body .inf-t td.c-lgray {
  background: #f3f4f6;
}

/* Resultados finales */
.inf-page-body .inf-t th.c-yellow {
  background: #fff4b8;
  border-left: 1.2mm solid #f2c200;
  font-size: 6.1pt;
}
.inf-page-body .inf-t th.c-g1 {
  background: #e6a9a8;
}
.inf-page-body .inf-t th.c-g2 {
  background: #4f86d0;
  color: #fff;
}
.inf-page-body .inf-t th.c-g3 {
  background: #e03131;
  color: #fff;
}
.inf-page-body .inf-t .inf-prom > * {
  border-top: 0.8pt solid rgba(0, 0, 0, 0.25);
}
.inf-page-body .inf-t .inf-prom > th.c-red {
  background: #a51d24;
  color: #fff;
  padding-left: 2.2mm;
  text-align: left;
  letter-spacing: 0.08em;
}
.inf-page-body .inf-t .inf-prom > td {
  background: #f1f2f5;
  font-weight: 700;
}
.inf-page-body .inf-t .inf-prom > td:last-child {
  background: #e4e6ea;
}

/* Turnos (anexo 1) */
.inf-page-body .inf-t .c-mat > th {
  background: #cfc6a0;
}
.inf-page-body .inf-t .c-mat > td {
  background: #f4f1e4;
}
.inf-page-body .inf-t .c-ves > th {
  background: #9fd35f;
}
.inf-page-body .inf-t .c-ves > td {
  background: #eef8e2;
}
.inf-page-body .inf-t .c-mix > th {
  background: #c9dba8;
}
.inf-page-body .inf-t .c-mix > td {
  background: #f3f7ea;
}

/* Tablas por grado (anexos 2 y 3) */
.inf-page-body .inf-grade.g1 thead th {
  background: #f9c9a6;
}
.inf-page-body .inf-grade.g1 tbody th {
  background: #fcdcc4;
}
.inf-page-body .inf-grade.g1 tbody td {
  background: #fff4ec;
}
.inf-page-body .inf-grade.g2 thead th {
  background: #a9c6ee;
}
.inf-page-body .inf-grade.g2 tbody th {
  background: #cbdcf5;
}
.inf-page-body .inf-grade.g2 tbody td {
  background: #f0f5fd;
}
.inf-page-body .inf-grade.g3 thead th {
  background: #dfa3a2;
}
.inf-page-body .inf-grade.g3 tbody th {
  background: #eecaca;
}
.inf-page-body .inf-grade.g3 tbody td {
  background: #fcf1f1;
}
.inf-page-body .inf-grade tbody td.inf-total {
  background: rgba(0, 0, 0, 0.05);
}

/* Titulares (2.1 y 3.1) */
.inf-page-body .c-teal-head thead th {
  background: #92cddc;
}
.inf-page-body .c-blue-head thead th {
  background: #8db3e2;
}
.inf-page-body .inf-roster thead th {
  text-align: left;
  padding-left: 2.2mm;
}
.inf-page-body .inf-roster thead th:first-child,
.inf-page-body .inf-roster thead th:last-child {
  text-align: center;
  padding-left: 0.7mm;
}
.inf-page-body .inf-roster tbody td {
  padding-top: 0.95mm;
  padding-bottom: 0.95mm;
}
.inf-page-body .inf-roster tbody tr:nth-child(even) > td {
  background: #f6f8fa;
}
.inf-page-body .inf-roster tbody td:first-child {
  color: #6a7180;
  font-weight: 600;
}
.inf-page-body .inf-t td.inf-empty {
  padding: 4mm;
  color: #6a7180;
  font-style: italic;
}

/* Concentrados (anexo 4) */
.inf-page-body .inf-a4 .a4-g1 > th {
  background: #fbd9c2;
}
.inf-page-body .inf-a4 .a4-g1 > td {
  background: #fff4ec;
}
.inf-page-body .inf-a4 .a4-g2 > th {
  background: #a9c3e2;
}
.inf-page-body .inf-a4 .a4-g2 > td {
  background: #edf3fb;
}
.inf-page-body .inf-a4 .a4-g3 > th {
  background: #e2adac;
}
.inf-page-body .inf-a4 .a4-g3 > td {
  background: #fbefef;
}
.inf-page-body .inf-a4 .c-olive > th {
  background: #cddcb0;
}
.inf-page-body .inf-a4 .c-olive > td {
  background: #f1f6e8;
  font-weight: 700;
}
.inf-page-body .inf-a4 .c-olive:first-of-type > * {
  border-top: 0.8pt solid rgba(0, 0, 0, 0.25);
}
.inf-page-body .inf-a4 tbody th {
  font-size: 6pt;
}
.inf-page-body .inf-a4 .c-olive > th {
  font-size: 6.4pt;
}

.inf-page-body table.inf-terminal {
  width: 150mm;
  margin: 5mm auto 2mm;
}
.inf-page-body .inf-terminal thead th {
  padding: 2mm 1mm;
  font-size: 7.2pt;
}
.inf-page-body .inf-terminal tbody td {
  height: 8mm;
  background: #fbefef;
  font-size: 11pt;
  font-weight: 600;
}
.inf-page-body .inf-terminal tbody td:last-child {
  background: #e2adac;
  font-weight: 800;
}

/* Personal administrativo (anexo 5) */
.inf-page-body .inf-a5 thead th {
  background: #8e2f2d;
  border-bottom-color: #5e1c1b;
  color: #fff;
  font-size: 7.4pt;
  text-align: center;
  padding-left: 0.7mm;
}
.inf-page-body .inf-a5 tbody td {
  height: 5.4mm;
  background: #f5f9ee;
  font-size: 7.6pt;
}
.inf-page-body .inf-a5 tbody tr:nth-child(even) > td {
  background: #fff;
}

/* ---------- Resultados finales ---------- */
.inf-page-body table.inf-idbox {
  margin: 1mm 0 3mm;
  font-size: 8.3pt;
}
.inf-page-body .inf-idbox td,
.inf-page-body .inf-idbox th {
  padding: 1.5mm 2.4mm;
  background: #f4f5f7;
  text-align: left;
}
.inf-page-body .inf-idbox td b {
  color: #5b6270;
  font-size: 7pt;
  letter-spacing: 0.05em;
}
.inf-page-body .inf-idbox th {
  width: 26%;
  background: #e3e6eb;
  font-size: 8.3pt;
  letter-spacing: 0.06em;
  text-align: center;
}
.inf-page-body .inf-idbox td:first-child {
  width: 44%;
}

.inf-disciplinas {
  margin: 0 0 3mm;
  text-align: center;
  background: transparent !important;
}
.inf-disciplinas span {
  display: inline-block;
  min-width: 60mm;
  padding: 1.2mm 8mm;
  border-radius: 1.6mm;
  background: #2f343d;
  color: #fff !important;
  font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  word-spacing: 0.14em;
  font-size: 12.5pt;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.inf-page-body .inf-results tbody td {
  padding-top: 1.05mm;
  padding-bottom: 1.05mm;
}
.inf-page-body .inf-results tbody th.c-yellow {
  text-align: center;
}

/* ---------- Firmas ---------- */
.inf-page-body table.inf-sign-table {
  margin-top: 4mm;
}
.inf-page-body .inf-sign-table thead th {
  padding: 1.4mm;
  background: #f4f5f7;
  font-size: 6.8pt;
  text-transform: none;
}
.inf-page-body .inf-sign-table tbody td {
  height: 17mm;
  padding: 1mm 2mm 1.6mm;
  vertical-align: bottom;
  font-size: 7.5pt;
}
.inf-sign-table b,
.inf-sign-table small {
  display: block;
}
.inf-sign-table small {
  margin-top: 0.5mm;
  color: #5b6270;
  font-size: 6.6pt;
}

.inf-sign-line {
  display: block;
  width: 80%;
  margin: 0 auto 1mm;
  border-top: 0.6pt solid #000;
}

.inf-vobo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70mm;
  align-items: end;
  gap: 12mm;
  margin: 6mm 12mm 0 40mm;
  text-align: center;
  font-family: "InfJakarta", "InfInter", "Segoe UI", Arial, sans-serif;
  word-spacing: 0.14em;
}
.inf-vobo p {
  margin: 0 0 13mm;
  font-size: 10pt;
  font-weight: 700;
}
.inf-vobo .inf-sign-line {
  width: 95mm;
}
.inf-vobo b,
.inf-vobo strong {
  display: block;
  font-size: 9.5pt;
  font-weight: 700;
}
.inf-vobo strong {
  margin-top: 1mm;
  font-size: 8.5pt;
}
.inf-seal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 30mm;
  padding-top: 13mm;
  box-sizing: border-box;
  border: 0.6pt dashed #d4d7dc;
  border-radius: 50%;
  color: #c4c8ce !important;
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
}

/* ---------- Responsivo (pantalla) ---------- */
@media (max-width: 980px) {
  .inf-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inf-fields {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 700px) {
  .inf-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .inf-toolbar .inf-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .inf-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inf-filters label:first-of-type,
  .inf-filters button {
    grid-column: 1 / -1;
  }

  .inf-filters button {
    width: 100%;
  }

  .inf-cards,
  .inf-fields {
    grid-template-columns: 1fr;
  }

  .inf-field-wide {
    grid-column: auto;
  }

  .inf-preview {
    align-items: flex-start;
  }
}

/* ---------- Impresión ---------- */
@page {
  size: letter landscape;
  margin: 0;
}

@media print {
  @page {
    size: letter landscape;
    margin: 0;
  }

  html:where(.pg-informes),
  :where(.pg-informes) body,
  :where(.pg-informes) .app,
  :where(.pg-informes) .main,
  :where(.pg-informes) main {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
  }

  :where(.pg-informes) .side,
  :where(.pg-informes) .main > header,
  :where(.pg-informes) .topbar,
  :where(.pg-informes) .top,
  :where(.pg-informes) .mobile-nav,
  :where(.pg-informes) .school-section-tabs,
  :where(.pg-informes) .flash,
  :where(.pg-informes) .alert,
  .inf-toolbar,
  .inf-filters,
  .inf-alert,
  .inf-settings,
  .inf-cards,
  .inf-print-tip,
  .inf-foot-slot img,
  :where(.pg-informes) body > .nav-backdrop {
    display: none !important;
  }

  :where(.pg-informes) body * {
    box-shadow: none !important;
  }

  .inf-app,
  .inf-preview {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
  }

  .inf-sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
    break-before: page;
    page-break-before: always;
  }

  .inf-sheet:first-child {
    break-before: auto;
    page-break-before: auto;
  }

  .inf-sheet,
  .inf-page {
    background: transparent !important;
  }

  .inf-page {
    height: auto;
  }

  /* Espacio reservado para el pie fijo en cada hoja. */
  .inf-foot-slot {
    height: 25mm;
  }

  .inf-print-foot {
    display: block;
    position: fixed;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50mm;
    pointer-events: none;
  }

  .inf-print-foot img {
    display: block;
    width: 100%;
    max-width: none;
    height: 50mm;
    object-fit: fill;
  }
}

/* =========================================================================
   5. PÁGINA · Regularización
   ========================================================================= */
#rgRoot {
  max-width: var(--page-max-width, 1200px);
  width: 100%;
  margin: 0 auto 24px;
  padding: 24px;
  box-sizing: border-box;
  background: #12151c;
  color: #eef1f7;
  border: 1px solid #333b4b;
  border-radius: 16px;
  color-scheme: dark;
  min-width: 0;
}
#rgRoot * {
  box-sizing: border-box;
}
#rgRoot h2 {
  font-size: 26px;
  margin: 5px 0;
}
#rgRoot h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
#rgRoot p {
  font-size: 14px;
  line-height: 1.6;
  color: #b0bbcd;
  overflow-wrap: anywhere;
}
#rgRoot small {
  display: block;
  color: #a4b0c4;
  font-size: 12px;
}
#rgRoot button,
#rgRoot input,
#rgRoot select,
#rgRoot textarea {
  font: inherit;
  color: #edf0f8;
  border: 1px solid #41495b;
  background: #1c2230;
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 12px;
  max-width: 100%;
  box-shadow: none;
}
#rgRoot input,
#rgRoot select,
#rgRoot textarea {
  width: 100%;
}
#rgRoot button {
  width: auto;
  cursor: pointer;
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-texto);
  border-radius: var(--boton-radio);
  font-weight: var(--font-weight-semibold);
}
#rgRoot button:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
}
#rgRoot :focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}
#rgRoot a {
  color: #8ab4ff;
}
#rgRoot label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  margin: 0;
  min-width: 0;
}
#rgRoot summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
  line-height: 1.5;
}
#rgRoot details[open] > summary {
  margin-bottom: 12px;
}
.rg-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.rg-tag,
.rg-state {
  padding: 7px 12px;
  font-size: 12px;
  background: #303347;
  border-radius: 20px;
  white-space: nowrap;
}
:where(.pg-regularizacion) .rg-pendiente {
  background: #463b23;
  color: #f4d69d;
}
:where(.pg-regularizacion) .rg-regularizada {
  background: #193d30;
  color: #adebc6;
}
:where(.pg-regularizacion) .rg-anulada {
  color: #bac1d2;
}
.rg-card {
  padding: 20px;
  margin: 18px 0;
  background: #191e29;
  border: 1px solid #363e50;
  border-radius: 12px;
}
.rg-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.rg-filters > label {
  flex: 1 1 200px;
}
.rg-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.rg-matches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.rg-matches a {
  padding: 12px;
  border: 1px solid #3d4555;
  border-radius: 8px;
  text-decoration: none;
}
.rg-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  border-top: 1px solid #3c4352;
  padding-top: 18px;
  margin-top: 14px;
  align-items: start;
}
.rg-wide {
  grid-column: 1/-1;
}
#rgRoot .rg-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  grid-column: 1/-1;
  line-height: 1.5;
}
#rgRoot .rg-check input {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  accent-color: #8ab4ff;
}
.rg-form button {
  justify-self: start;
}
.rg-table {
  width: 100%;
  overflow: auto;
}
.rg-table table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
}
.rg-table th,
.rg-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #3e4657;
  vertical-align: top;
  font-size: 14px;
  max-width: 300px;
  overflow-wrap: anywhere;
}
.rg-correction {
  margin-top: 20px;
  color: #bfc7d7;
}
.rg-empty,
.rg-notice {
  padding: 24px;
  background: #202633;
  border-radius: 10px;
  border: 1px solid #444f65;
}
#rgRoot .rg-notice {
  color: #f1d397;
}
#rgRoot .rg-link {
  display: inline-block;
  padding: 8px 0;
}
@media (max-width: 700px) {
  #rgRoot {
    padding: 14px;
  }
  .rg-card {
    padding: 14px;
  }
  .rg-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .rg-form > * {
    grid-column: 1;
  }
  .rg-heading h2 {
    font-size: 22px;
  }
  .rg-matches {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   5. PÁGINAS · Reportes y citatorios
   ========================================================================= */

/* Reportes de alumnos · filtros del historial y diálogo de nuevo reporte */
.report-filters-head h3 {
  margin: 0 0 4px;
}
.report-filters-head p {
  margin: 0 0 14px;
  color: var(--color-smoke, #b2b2b2);
  font-size: 14px;
}
.report-filters .form-grid {
  margin: 0;
}
.report-dialog {
  width: min(760px, calc(100vw - 32px));
}
.report-group-note {
  margin: -4px 0 0;
  color: var(--color-slate, #686868);
  font-size: 13px;
}
.report-group-note.is-set {
  color: var(--color-smoke, #b2b2b2);
}
.report-group-note b {
  color: var(--color-bone, #ededed);
  font-weight: 600;
}
.report-dialog .sp-list {
  max-height: 220px;
}
.report-template em {
  font-style: normal;
  color: var(--color-slate, #686868);
  font-weight: 400;
}
.report-cite {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-smoke, #b2b2b2);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.report-cite:hover {
  color: var(--color-bone, #ededed);
  text-decoration: underline;
}

/* =========================================================================
   5. PÁGINA · Usuarios
   ========================================================================= */

/* Usuarios · filtros, tabla ajustada al panel y modales con desplazamiento. */

/* ---------- Modales: la cabecera y los botones fijos, el cuerpo se desplaza ---------- */
/* Centrado: otra regla dejaba el margen inferior en 0 y el modal quedaba pegado abajo. */
dialog.user-dialog[open] {
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: min(90dvh, 820px);
}

.user-dialog .user-dialog-form {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: inherit;
  min-height: 0;
  overflow: hidden;
}

.user-dialog .user-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--spacing-20);
  scrollbar-width: thin;
  scrollbar-color: var(--edge-hairline-strong, #3a3a3a) transparent;
}

.user-dialog .user-dialog-body::-webkit-scrollbar {
  width: 8px;
}
.user-dialog .user-dialog-body::-webkit-scrollbar-thumb {
  background: var(--edge-hairline-strong, #3a3a3a);
  border-radius: 8px;
}

.user-dialog .user-dialog-body > .user-dialog-fields {
  margin-bottom: var(--spacing-20);
}

.user-dialog .user-dialog-body > .user-shift-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-28);
  margin: 0 0 var(--spacing-20);
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

.user-dialog .user-dialog-body > .switch-list {
  flex: none;
  overflow: visible;
  min-height: 0;
  margin: 0;
  padding: var(--spacing-20) var(--spacing-28) var(--spacing-24);
}

.user-dialog .user-dialog-form > .form-actions {
  flex: 0 0 auto;
  border-top: 1px solid var(--edge-hairline);
}

@media (max-width: 760px) {
  dialog.user-dialog[open] {
    height: fit-content;
    max-height: calc(100dvh - 24px);
  }
  .user-dialog .user-dialog-body > .user-dialog-fields,
  .user-dialog .user-dialog-body > .user-shift-field,
  .user-dialog .user-dialog-body > .switch-list {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

/* ---------- Filtros ---------- */
.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--edge-hairline, #2a2f3a);
  border-radius: 14px;
  background: var(--surface-frosted-soft, rgba(255, 255, 255, 0.03));
}

.users-toolbar label {
  flex: 0 1 170px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-slate, #9aa3b2);
  font-size: 12px;
  font-weight: 600;
}

.users-toolbar select,
.users-toolbar input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
}

.users-toolbar .users-search-field {
  flex: 1 1 240px;
}

.users-search-box {
  position: relative;
  display: block;
}

.users-search-box svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-slate, #9aa3b2);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.users-search-box input {
  padding-left: 40px !important;
}

.users-toolbar .users-clear {
  min-height: 42px;
  white-space: nowrap;
}

.users-summary {
  margin: 0 0 8px;
  color: var(--color-slate, #9aa3b2);
  font-size: 13px;
}

.users-summary b {
  color: var(--color-bone, #e5e5e5);
  font-weight: 600;
}

/* ---------- Tabla: columnas fijas que caben en el panel, sin barra horizontal ---------- */
.users-panel .table-wrap {
  overflow-x: visible;
}

.users-table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

.users-table th:nth-child(1) {
  width: 30%;
}
.users-table th:nth-child(2) {
  width: auto;
}
.users-table th:nth-child(3) {
  width: 126px;
}
.users-table th:nth-child(4) {
  width: 116px;
}
.users-table th:nth-child(5) {
  width: 112px;
}
.users-table th:nth-child(6) {
  width: 100px;
}
.users-table.no-shift th:nth-child(3) {
  width: 116px;
}
.users-table.no-shift th:nth-child(4) {
  width: 112px;
}
.users-table.no-shift th:nth-child(5) {
  width: 100px;
}

.users-table th,
.users-table td {
  padding-left: 12px;
  padding-right: 12px;
  vertical-align: middle;
}

.users-table td:first-child,
.users-table th:first-child {
  padding-left: 16px;
}
.users-table td:last-child,
.users-table th:last-child {
  padding-right: 16px;
}

.users-table .user-identity {
  min-width: 0;
}

.users-table .user-identity .user-avatar {
  flex: 0 0 38px;
}

.users-table .user-cell {
  flex: 1 1 auto;
}

.users-table .user-cell b,
.users-table .user-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
}

.users-table .role-chip-list {
  gap: 6px;
}

.users-table .role-chip-list span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-table .shift-badge,
.users-table .badge {
  white-space: nowrap;
}

.users-last span,
.users-last small {
  display: block;
  white-space: nowrap;
}

.users-last span {
  color: var(--color-ash);
  font-size: 14px;
}

.users-last small {
  color: var(--color-slate);
  font-size: 12px;
}

.users-last .users-never {
  color: var(--color-slate);
}

.users-table .table-action-cell {
  text-align: right;
}

.users-table mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.28);
  color: inherit;
}

.users-empty-row td {
  padding: 28px 16px;
  color: var(--color-slate, #9aa3b2);
  text-align: center;
}

.users-table tr[hidden] {
  display: none;
}

.users-last-inline {
  display: none !important;
}

/* Pantallas medianas: el último acceso pasa debajo del correo para dejar sitio a los roles. */
@media (max-width: 1280px) {
  .users-table th:nth-child(1) {
    width: 36%;
  }
  .users-table:not(.no-shift) th:nth-child(4),
  .users-table:not(.no-shift) td:nth-child(4),
  .users-table.no-shift th:nth-child(3),
  .users-table.no-shift td:nth-child(3) {
    display: none;
  }
  .users-table .users-last-inline {
    display: block !important;
  }
  .users-table th,
  .users-table td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.users-inline-shift {
  display: none !important;
}

/* Pantallas angostas con menú lateral: el turno se muestra junto al estado para que los roles tengan espacio. */
@media (max-width: 1120px) and (min-width: 761px) {
  .users-table:not(.no-shift) th:nth-child(3),
  .users-table:not(.no-shift) td:nth-child(3) {
    display: none;
  }
  .users-table:not(.no-shift) th:nth-child(5) {
    width: 124px;
  }
  .users-table th:nth-child(1) {
    width: 38%;
  }
  .users-table th:nth-child(6) {
    width: 96px;
  }
  .users-table th .users-inline-shift {
    display: inline !important;
  }
  .users-table td.users-status .users-inline-shift {
    display: flex !important;
    margin-bottom: 6px;
  }
}

/* Teléfono: cada usuario es una tarjeta, sin desplazamiento lateral. */
@media (max-width: 760px) {
  .users-toolbar label,
  .users-toolbar .users-search-field {
    flex: 1 1 calc(50% - 6px);
  }
  .users-toolbar .users-search-field {
    flex-basis: 100%;
  }
  .users-toolbar .users-clear {
    flex: 1 1 100%;
  }

  .users-table,
  .users-table tbody {
    display: block;
  }
  .users-table thead {
    display: none;
  }
  .users-table tbody tr:not(.users-empty-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(229, 229, 229, 0.07);
  }
  .users-table tbody tr:not(.users-empty-row)[hidden] {
    display: none;
  }
  .users-table tbody tr:hover td {
    background: none;
  }
  .users-table tbody td {
    display: block;
    padding: 0 !important;
    border: 0;
  }
  .users-table td:nth-child(1) {
    grid-column: 1 / -1;
  }
  .users-table td:nth-child(2) {
    grid-column: 1 / -1;
  }
  .users-table td[data-label] {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1;
  }
  .users-table td[data-label]::before {
    content: attr(data-label);
    min-width: 96px;
    color: var(--color-slate);
    font-size: 12px;
  }
  .users-table .users-last {
    flex-wrap: wrap;
  }
  .users-last span,
  .users-last small {
    display: inline;
  }
  .users-last small::before {
    content: "· ";
  }
  .users-table .table-action-cell {
    grid-column: 2;
    grid-row: 3 / span 3;
    align-self: center;
  }
  .users-table .users-last-inline {
    display: none !important;
  }
  .users-table td.users-last {
    display: flex !important;
  }
  .users-empty-row {
    display: block;
  }
  .users-empty-row[hidden] {
    display: none;
  }
  .users-empty-row td {
    display: block;
  }
}

/* =========================================================================
   5. PÁGINA · Llaveros RFID
   ========================================================================= */

/* ============================================================
   GENERAL
   ============================================================ */

.rfid-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ============================================================
   HERO
   ============================================================ */

.rfid-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 27px 30px;
  border: 1px solid #253247;
  border-radius: 18px;
  background: linear-gradient(135deg, #111827 0%, #172554 52%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.rfid-hero::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -125px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.rfid-hero-content {
  position: relative;
  z-index: 2;
}

.rfid-hero small {
  display: block;
  margin-bottom: 7px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.rfid-hero h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 27px;
}

.rfid-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

/* ============================================================
   RESUMEN
   ============================================================ */

.rfid-summary {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 11px;
}

.rfid-stat {
  min-width: 115px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
}

.rfid-stat strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 22px;
}

.rfid-stat span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.rfid-layout {
  display: grid;
  grid-template-columns:
    410px
    minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ============================================================
   CARDS
   ============================================================ */

.rfid-card {
  border: 1px solid #253247;
  border-radius: 18px;
  background: #111827;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.rfid-assign-card {
  padding: 24px;
}

.rfid-list-card {
  overflow: hidden;
}

/* ============================================================
   HEADER CARD
   ============================================================ */

.rfid-card-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 23px;
}

.rfid-card-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.rfid-card-icon svg {
  width: 21px;
  height: 21px;
}

.rfid-card-header h3 {
  margin: 0 0 3px;
  color: #f1f5f9;
  font-size: 16px;
}

.rfid-card-header p {
  margin: 0;
  color: #8491a4;
  font-size: 13px;
}

/* ============================================================
   LABELS
   ============================================================ */

.field-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
}

.field-title small {
  color: #a9b4c6;
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   BUSCADOR ALUMNO
   ============================================================ */

.student-search-area {
  position: relative;
  margin-bottom: 18px;
}

.rfid-page .student-search-input-wrap {
  position: relative !important;
  width: 100% !important;
}

/* LUPA */

.rfid-page .student-search-icon {
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a9b4c6 !important;
  pointer-events: none !important;
}

.rfid-page .student-search-icon svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
}

/* INPUT BUSCADOR */

.rfid-page input.student-search-input {
  width: 100% !important;
  height: 55px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 56px !important;
  padding-right: 46px !important;
  padding-inline-start: 56px !important;
  padding-inline-end: 46px !important;
  text-indent: 0 !important;
  border: 1px solid #334155 !important;
  border-radius: 13px !important;
  outline: none !important;
  background: #1b2435 !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  line-height: normal !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

.rfid-page input.student-search-input::placeholder {
  color: #718097 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

.rfid-page input.student-search-input:hover {
  border-color: #475569 !important;
}

.rfid-page input.student-search-input:focus {
  border-color: #3b82f6 !important;
  background: #1d2738 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

/* BOTÓN LIMPIAR */

.rfid-page .student-search-clear {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #a9b4c6 !important;
  font-size: 18px !important;
  cursor: pointer;
}

.rfid-page .student-search-clear:hover {
  background: #253147 !important;
  color: #cbd5e1 !important;
}

/* ============================================================
   RESULTADOS BUSCADOR
   ============================================================ */

.student-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 200;
  display: none;
  max-height: 355px;
  overflow-y: auto;
  border: 1px solid #334155;
  border-radius: 13px;
  background: #111827;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.42);
}

.student-results.show {
  display: block;
}

.student-results-title {
  padding: 10px 14px;
  border-bottom: 1px solid #273449;
  background: #0f172a;
  color: #a9b4c6;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ============================================================
   RESULTADO
   ============================================================ */

.student-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid #263244;
  background: #111827;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.student-result:last-child {
  border-bottom: 0;
}

.student-result:hover,
.student-result.is-active {
  background: #1e293b;
}

.student-result-avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.13);
  color: #60a5fa;
  font-size: 13px;
  font-weight: 800;
}

.student-result-data {
  flex: 1;
  min-width: 0;
}

.student-result-data strong {
  display: block;
  overflow: hidden;
  color: #e2e8f0;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.student-result-data small {
  display: block;
  margin-top: 3px;
  color: #7c8ca3;
  font-size: 13px;
}

/* ============================================================
   BADGES
   ============================================================ */

.rfid-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
}

.rfid-state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.rfid-state.assigned {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

.rfid-state.assigned::before {
  background: #10b981;
}

.rfid-state.pending {
  background: rgba(249, 115, 22, 0.11);
  color: #fdba74;
}

.rfid-state.pending::before {
  background: #f97316;
}

/* ============================================================
   SIN RESULTADOS
   ============================================================ */

.student-no-results {
  padding: 30px 17px;
  text-align: center;
  color: #a9b4c6;
}

.student-no-results svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: #475569;
}

.student-no-results strong {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 13px;
}

.student-no-results small {
  font-size: 13px;
}

/* ============================================================
   ALUMNO SELECCIONADO
   ============================================================ */

:where(.pg-llaveros) .selected-student {
  display: none;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  padding: 13px;
  border: 1px solid rgba(59, 130, 246, 0.27);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(30, 64, 175, 0.05));
}

:where(.pg-llaveros) .selected-student.show {
  display: flex;
}

.selected-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.selected-data {
  flex: 1;
  min-width: 0;
}

.selected-data small {
  display: block;
  margin-bottom: 2px;
  color: #94a3b8;
  font-size: 13px;
}

.selected-data strong {
  display: block;
  overflow: hidden;
  color: #e2e8f0;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.selected-change {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #172033;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
}

.selected-change:hover {
  border-color: #3b82f6;
  background: #1e293b;
  color: #fff;
}

/* ============================================================
   UID
   ============================================================ */

.uid-field {
  margin-top: 3px;
}

.rfid-page .uid-input-wrap {
  position: relative !important;
  width: 100% !important;
}

.rfid-page .uid-icon {
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a9b4c6 !important;
  pointer-events: none !important;
}

.rfid-page .uid-icon svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: block !important;
}

.rfid-page input.uid-input {
  width: 100% !important;
  height: 55px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 56px !important;
  padding-right: 16px !important;
  padding-inline-start: 56px !important;
  padding-inline-end: 16px !important;
  text-indent: 0 !important;
  border: 1px solid #334155 !important;
  border-radius: 13px !important;
  outline: none !important;
  background: #1b2435 !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.rfid-page input.uid-input::placeholder {
  color: #718097 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

.rfid-page input.uid-input:hover {
  border-color: #475569 !important;
}

.rfid-page input.uid-input:focus {
  border-color: #3b82f6 !important;
  background: #1d2738 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

/* ============================================================
   MENSAJE UID
   ============================================================ */

.uid-message {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 2px 0;
  color: #a9b4c6;
  font-size: 13px;
}

.uid-message-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* ============================================================
   BOTÓN GUARDAR
   ============================================================ */

.rfid-save-btn {
  width: 100%;
  height: 46px;
  margin-top: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 7px 17px rgba(37, 99, 235, 0.2);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.rfid-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 21px rgba(37, 99, 235, 0.25);
}

.rfid-save-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   AYUDA
   ============================================================ */

.rfid-help-box {
  display: flex;
  gap: 9px;
  margin-top: 17px;
  padding: 11px 12px;
  border: 1px solid #202d40;
  border-radius: 10px;
  background: #0f172a;
  color: #a9b4c6;
  font-size: 13px;
  line-height: 1.5;
}

.rfid-help-box svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 1px;
  color: #a9b4c6;
}

/* ============================================================
   LISTADO
   ============================================================ */

.rfid-list-header {
  padding: 23px 24px 17px;
  border-bottom: 1px solid #253247;
}

.rfid-list-header h3 {
  margin: 0 0 4px;
  color: #f1f5f9;
  font-size: 15px;
}

.rfid-list-header p {
  margin: 0;
  color: #8491a4;
  font-size: 13px;
}

/* ============================================================
   HERRAMIENTAS TABLA
   ============================================================ */

.rfid-table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 24px;
  border-bottom: 1px solid #253247;
  background: #0f172a;
}

/* ============================================================
   BUSCADOR TABLA
   ============================================================ */

.rfid-page .table-search-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
}

.rfid-page .table-search-wrap > svg {
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 18px !important;
  height: 18px !important;
  color: #a9b4c6 !important;
  pointer-events: none !important;
}

.rfid-page input.table-search-input {
  width: 100% !important;
  height: 55px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 56px !important;
  padding-right: 16px !important;
  padding-inline-start: 56px !important;
  padding-inline-end: 16px !important;
  text-indent: 0 !important;
  border: 1px solid #334155 !important;
  border-radius: 13px !important;
  outline: none !important;
  background: #1b2435 !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
  font-family: inherit !important;
}

.rfid-page input.table-search-input::placeholder {
  color: #718097 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

.rfid-page input.table-search-input:hover {
  border-color: #475569 !important;
}

.rfid-page input.table-search-input:focus {
  border-color: #3b82f6 !important;
  background: #1d2738 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.table-count {
  padding: 6px 9px;
  border-radius: 7px;
  background: #1e293b;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   TABLA
   ============================================================ */

.rfid-table-container {
  overflow-x: auto;
}

.rfid-table-modern {
  width: 100%;
  border-collapse: collapse;
}

.rfid-table-modern th {
  padding: 11px 19px;
  border-bottom: 1px solid #253247;
  background: #0f172a;
  color: #a9b4c6;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.rfid-table-modern td {
  padding: 13px 19px;
  border-bottom: 1px solid #202c3d;
  color: #aeb9c9;
  font-size: 13px;
}

.rfid-table-modern tbody tr {
  transition: background 0.15s ease;
}

.rfid-table-modern tbody tr:hover {
  background: #172033;
}

.rfid-table-modern tbody tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   ALUMNO TABLA
   ============================================================ */

.table-student {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-avatar {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #1e293b;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 800;
}

.table-student-name {
  color: #dbe4ef;
  font-weight: 700;
}

:where(.pg-llaveros) .student-code {
  color: #aeb9c9;
  font-size: 13px;
  font-weight: 800;
}

/* ============================================================
   UID TABLA
   ============================================================ */

:where(.pg-llaveros) .credential-code {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(99, 102, 241, 0.13);
  color: #a5b4fc;
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ============================================================
   PENDIENTE
   ============================================================ */

.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 20px;
  background: rgba(249, 115, 22, 0.1);
  color: #fdba74;
  font-size: 13px;
  font-weight: 800;
}

.pending-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f97316;
}

/* ============================================================
   VACÍO
   ============================================================ */

.table-empty {
  display: none;
  padding: 36px 20px;
  text-align: center;
  color: #a9b4c6;
}

.table-empty svg {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  color: #475569;
}

.table-empty strong {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 13px;
}

.table-empty span {
  font-size: 13px;
}

/* ============================================================
   SCROLL
   ============================================================ */

.student-results::-webkit-scrollbar {
  width: 6px;
}

.student-results::-webkit-scrollbar-track {
  background: transparent;
}

.student-results::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 10px;
}

.student-results::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
  .rfid-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .rfid-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
  }

  .rfid-summary {
    width: 100%;
  }

  .rfid-stat {
    flex: 1;
    min-width: 0;
  }

  .rfid-table-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .rfid-page .table-search-wrap {
    max-width: none !important;
  }

  .table-count {
    align-self: flex-start;
  }
}

@media (max-width: 500px) {
  .rfid-assign-card {
    padding: 19px;
  }

  .rfid-list-header {
    padding: 20px 19px 15px;
  }

  .rfid-table-tools {
    padding: 13px 19px;
  }
}

.rfid-table-filter {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #111827;
  color: #e5e7eb;
}
.rfid-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0;
}
.rfid-pagination button {
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
}
.rfid-pagination button:disabled {
  opacity: 0.45;
}
.rfid-pagination span {
  min-width: 110px;
  text-align: center;
  color: #aebbd0;
  font-size: 13px;
}
@media (max-width: 700px) {
  .rfid-table-filter {
    flex: 1 1 140px;
  }
  .rfid-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* =========================================================================
   6. PORTAL DE FAMILIAS
   ========================================================================= */
.family-grade-release {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 14px;
  background: rgba(99, 102, 241, 0.08);
}
.family-grade-release strong {
  display: block;
  margin-bottom: 8px;
}
.family-grade-release div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.family-grade-release span {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 12px;
  font-weight: 600;
}

/* =========================================================================
   6. PORTAL DE FAMILIAS · Cambiar contraseña
   ========================================================================= */
.force-password-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.force-password-card {
  width: min(520px, 100%);
  padding: 32px;
  border-radius: 24px;
  background: var(--surface, #fff);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
}
.force-password-card h1 {
  margin: 0 0 8px;
  font-size: 1.8rem;
}
.force-password-card p {
  margin: 0 0 24px;
  color: var(--muted, #64748b);
  line-height: 1.55;
}
.force-password-card .field {
  display: block;
  margin: 0 0 16px;
}
.force-password-card .field-label {
  display: block;
  margin: 0 0 7px;
  font-weight: 700;
}
.force-password-card input {
  width: 100%;
}
.force-password-help {
  font-size: 0.88rem;
  margin-top: -6px !important;
  margin-bottom: 18px !important;
}
.force-password-card .alert {
  margin-bottom: 18px;
}

/* =========================================================================
   5. PÁGINA · Horario del grupo (impresión)
   ========================================================================= */
/* Horario del grupo: vista previa en pantalla y hoja carta vertical al imprimir.
   Misma tipografía y estilo de tablas que Informes y Actas. */
.hg-app {
  --hg-ink: #1d2230;
  --hg-soft: #5b6475;
  --hg-line: #d3d7de;
  --hg-edge: #aeb4be;
  --hg-guinda: #9d2449;
  --hg-oro: #b38e5d;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--page-max-width, 1200px);
  margin: 0 auto;
}

.hg-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hg-toolbar small {
  color: #8ab4ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.hg-toolbar h2 {
  margin: 4px 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--color-snow-white);
}

.hg-toolbar p {
  color: var(--color-ash);
}

.hg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.hg-filters label {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

.hg-filters select,
.hg-filters input {
  width: 100%;
  min-height: 44px;
}

.hg-empty {
  padding: 48px 24px;
  border: 1px dashed var(--edge-hairline-strong);
  border-radius: 16px;
  text-align: center;
}

.hg-empty h3 {
  font-size: 22px;
  color: var(--color-snow-white);
}

.hg-empty p {
  margin-top: 8px;
  color: var(--color-ash);
}

.hg-print-tip {
  color: var(--color-ash);
  font-size: 13px;
}

.hg-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 28px 0;
  overflow-x: auto;
}

/* ---------- La hoja ---------- */
/* Aísla la hoja de los estilos oscuros del panel (textos claros, fondos, espaciados). */
.hg-sheet :is(p, b, strong, small, span, h3, li, th, td) {
  background-color: transparent;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-family: inherit;
}

.hg-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 215.9mm;
  min-height: 279.4mm;
  padding: 11mm 13mm 0;
  box-sizing: border-box;
  background: #fff;
  color: var(--hg-ink);
  font-family: "InfInter", "Inter", system-ui, sans-serif;
  font-size: 9pt;
  line-height: 1.35;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.hg-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6mm;
  padding-bottom: 3mm;
  border-bottom: 0.8pt solid var(--hg-oro);
}

.hg-head img {
  display: block;
  max-width: 100%;
}

.hg-logo-sep {
  height: 11mm;
}

.hg-logo-qroo {
  justify-self: center;
  height: 11mm;
}

.hg-logo-school {
  height: 15mm;
}

.hg-meta {
  margin: 2mm 0 0;
  text-align: right;
  font-size: 8.5pt;
  color: var(--hg-soft);
}

.hg-sheet .hg-meta b {
  color: var(--hg-ink);
}

.hg-sheet .hg-meta .hg-legend {
  margin-top: 1mm;
  color: var(--hg-oro);
  font-style: italic;
  font-weight: 600;
}

.hg-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6mm;
  margin: 2.5mm 0 2.5mm;
  padding: 2.5mm 5mm;
  border-radius: 2.4mm;
  background: linear-gradient(100deg, #7a1c39, var(--hg-guinda) 55%, #b8506f);
  color: #fff;
}

.hg-sheet .hg-title span {
  display: block;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.85;
}

.hg-sheet .hg-title :is(h3, span, small, b) {
  color: #fff;
}

.hg-title h3 {
  margin: 0.5mm 0 0;
  font-family: "InfJakarta", "InfInter", sans-serif;
  font-size: 22pt;
  font-weight: 800;
  line-height: 1.05;
}

.hg-title ul {
  display: flex;
  gap: 3mm;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hg-title li {
  display: flex;
  flex-direction: column;
  gap: 0.4mm;
  min-width: 22mm;
  padding: 1.8mm 3mm;
  border-radius: 1.8mm;
  background: rgba(255, 255, 255, 0.14);
  border: 0.5pt solid rgba(255, 255, 255, 0.3);
}

.hg-sheet .hg-title li small {
  font-size: 6.5pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hg-title li b {
  font-size: 10pt;
}

/* ---------- Tabla semanal ---------- */
.hg-week {
  width: 100%;
  table-layout: fixed;
  border: 0.7pt solid var(--hg-edge);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 2.2mm;
  overflow: hidden;
  font-size: 8pt;
}

.hg-week .hg-col-time {
  width: 21mm;
}

.hg-week th,
.hg-week td {
  padding: 1.1mm 1.4mm;
  border-right: 0.5pt solid var(--hg-line);
  border-bottom: 0.5pt solid var(--hg-line);
  text-align: center;
  vertical-align: middle;
  color: var(--hg-ink);
  background: #fff;
}

.hg-week tr > :last-child {
  border-right: 0;
}

.hg-week tbody tr:last-child > * {
  border-bottom: 0;
}

.hg-sheet .hg-week thead th {
  padding: 2.2mm 1.8mm;
  background: #1d2230;
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hg-week tbody th {
  background: #f3f4f7;
  font-size: 7.6pt;
  font-weight: 700;
  white-space: nowrap;
}

.hg-week tbody th {
  line-height: 1.3;
}

.hg-sheet .hg-week tbody th small {
  font-size: 6.8pt;
  font-weight: 500;
  color: var(--hg-soft);
}

.hg-week td {
  height: 8mm;
}

.hg-class + .hg-class {
  margin-top: 1mm;
  padding-top: 1mm;
  border-top: 0.5pt dashed var(--hg-edge);
}

.hg-sheet .hg-class b {
  color: var(--hg-ink);
  display: block;
  font-size: 7.8pt;
  font-weight: 700;
  line-height: 1.15;
}

.hg-sheet .hg-class small {
  display: block;
  margin-top: 0.4mm;
  font-size: 6.3pt;
  line-height: 1.15;
  color: var(--hg-soft);
}

.hg-week td.hg-free {
  background: #fafbfc;
}

.hg-sheet .hg-break td {
  letter-spacing: 0.4em;
}

.hg-sheet .hg-break th,
.hg-sheet .hg-break td {
  height: auto;
  padding: 1mm;
  background: #fbf6ec !important;
  color: #8a6a3a;
  font-size: 7pt;
  font-weight: 800;
}

/* Colores por campo formativo */
.hg-week td.hg-t1 {
  background: #fdecef;
  box-shadow: inset 1.2mm 0 0 #e3647f;
}
.hg-week td.hg-t2 {
  background: #e8f0fe;
  box-shadow: inset 1.2mm 0 0 #4f7fe0;
}
.hg-week td.hg-t3 {
  background: #e9f7ee;
  box-shadow: inset 1.2mm 0 0 #3fa56a;
}
.hg-week td.hg-t4 {
  background: #fdf4e3;
  box-shadow: inset 1.2mm 0 0 #d99a2b;
}
.hg-week td.hg-t0 {
  background: #f1f2f5;
  box-shadow: inset 1.2mm 0 0 #9aa1ad;
}

.hg-dot {
  display: inline-block;
  width: 2.6mm;
  height: 2.6mm;
  margin-right: 1.6mm;
  border-radius: 50%;
  vertical-align: -0.3mm;
}

.hg-dot.hg-t1 {
  background: #e3647f;
}
.hg-dot.hg-t2 {
  background: #4f7fe0;
}
.hg-dot.hg-t3 {
  background: #3fa56a;
}
.hg-dot.hg-t4 {
  background: #d99a2b;
}
.hg-dot.hg-t0 {
  background: #9aa1ad;
}

/* ---------- Resumen de asignaturas ---------- */
.hg-summary-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 3mm;
  margin-top: 3.5mm;
}

.hg-summary {
  width: 100%;
  table-layout: fixed;
  border: 0.7pt solid var(--hg-edge);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 2.2mm;
  overflow: hidden;
  font-size: 7.8pt;
}

.hg-summary th,
.hg-summary td {
  padding: 0.8mm 1.8mm;
  border-bottom: 0.5pt solid var(--hg-line);
  font-size: 7pt;
  line-height: 1.2;
  text-align: left;
  color: var(--hg-ink);
  background: #fff;
}

.hg-sheet .hg-summary thead th {
  background: #eceef2;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hg-summary th:nth-child(1) {
  width: 43%;
}
.hg-summary th:nth-child(3),
.hg-summary td:nth-child(3) {
  width: 14mm;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.hg-summary tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.hg-sheet .hg-summary tfoot th,
.hg-sheet .hg-summary tfoot td {
  border-bottom: 0;
  background: #1d2230;
  color: #fff;
  font-weight: 700;
}

.hg-summary tfoot th {
  text-align: right;
}

.hg-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2mm 6mm;
  margin: 2.5mm 0 0;
  padding: 0;
  list-style: none;
  font-size: 7pt;
  color: var(--hg-soft);
}

.hg-noschedule {
  padding: 8mm;
  border: 0.7pt dashed var(--hg-edge);
  border-radius: 2.2mm;
  text-align: center;
  color: var(--hg-soft);
}

/* ---------- Firmas y pie ---------- */
.hg-signs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18mm;
  margin: auto 8mm 0;
  padding-top: 2mm;
  text-align: center;
}

.hg-signs div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;
}

.hg-sheet .hg-signs small {
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hg-soft);
}

.hg-signs .hg-line {
  width: 100%;
  margin-top: 6mm;
  border-top: 0.7pt solid var(--hg-ink);
}

.hg-signs b {
  min-height: 3.5mm;
  font-size: 8pt;
}

.hg-foot {
  display: flex;
  align-items: center;
  gap: 5mm;
  margin: 4mm -13mm 0;
  padding: 2.5mm 13mm 4mm;
  border-top: 1.4mm solid var(--hg-guinda);
  background: linear-gradient(180deg, #fbf4f6, #fff);
}

.hg-foot img {
  display: none;
}

.hg-sheet .hg-foot p {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 6.8pt;
  line-height: 1.45;
  color: var(--hg-soft);
}

.hg-sheet .hg-foot b {
  color: var(--hg-guinda);
}

@media (max-width: 900px) {
  .hg-filters label {
    flex-basis: calc(50% - 7px);
  }

  .hg-filters .btn {
    flex: 1 1 100%;
  }

  .hg-preview {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .hg-filters label {
    flex-basis: 100%;
  }
}

/* ---------- Impresión: solo las hojas ---------- */
@page hoja-horario {
  size: letter portrait;
  margin: 0;
}

html:where(.pg-horario_grupo, .pg-horario_docente) {
  page: hoja-horario;
}

@media print {
  :where(.pg-horario_grupo, .pg-horario_docente)
    :is(
      .side,
      .main > header,
      .school-section-tabs,
      .hg-toolbar,
      .hg-filters,
      .hg-print-tip,
      .alert,
      .nav-backdrop,
      .sidebar-backdrop
    ) {
    display: none !important;
  }

  html:where(.pg-horario_grupo, .pg-horario_docente),
  :where(.pg-horario_grupo, .pg-horario_docente) :is(body, .app, .main, main) {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .hg-app,
  .hg-preview {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .hg-sheet {
    width: auto;
    height: 279.4mm;
    min-height: 0;
    margin: 0;
    padding: 10mm 12mm 0;
    overflow: hidden;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .hg-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .hg-foot {
    margin: 4mm -12mm 0;
    padding: 2.5mm 12mm 5mm;
  }

  .hg-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Tarjeta «Horarios de clases» en Informes */
.inf-cards .inf-card--schedule {
  border-color: rgba(157, 36, 73, 0.55);
  background: linear-gradient(135deg, rgba(157, 36, 73, 0.22), rgba(157, 36, 73, 0.06));
}

.hg-filters .hg-group-field {
  flex: 1.6 1 200px;
}

/* ---------- Hoja del docente ---------- */
.hg-sheet .hg-to {
  margin: 3mm 0 0;
  font-size: 8.4pt;
  line-height: 1.45;
  color: var(--hg-ink);
}

.hg-sheet .hg-to b {
  font-size: 9pt;
}

.hg-sheet .hg-title h3.hg-title-name {
  font-size: 15pt;
  line-height: 1.15;
}

.hg-sheet .hg-class--teacher b {
  font-size: 10pt;
  letter-spacing: 0.02em;
}

.hg-sheet .hg-class--teacher small {
  font-size: 6.8pt;
  color: var(--hg-ink);
}

.hg-sheet--teacher .hg-week td {
  height: 12mm;
}

.hg-sheet--teacher .hg-summary--teacher {
  margin-top: 4mm;
}

.hg-summary--teacher th:nth-child(1) {
  width: auto;
}
.hg-summary--teacher th:nth-child(2),
.hg-summary--teacher td:nth-child(2) {
  width: 16mm;
  text-align: center;
}
.hg-summary--teacher th:nth-child(3) {
  width: 42%;
}
.hg-summary--teacher th:nth-child(4),
.hg-summary--teacher td:nth-child(4) {
  width: 14mm;
  text-align: center;
}

.hg-sheet .hg-validity {
  margin: 3mm 0 0;
  font-size: 8.2pt;
  color: var(--hg-ink);
}

/* =========================================================================
   5. PÁGINA · Docentes
   ========================================================================= */
/* Docentes: buscador, filtros y una tarjeta por docente con su carga. */
.teacher-browser {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.teacher-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.teacher-toolbar label {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

.teacher-toolbar .teacher-search-field {
  flex: 2.4 1 260px;
}
.teacher-toolbar .teacher-group-field {
  flex: 1.4 1 180px;
}
.teacher-toolbar label:has(#teacherCycle) {
  flex: 1.2 1 170px;
}

.teacher-toolbar select,
.teacher-toolbar input {
  width: 100%;
  min-height: 44px;
}

.teacher-search-box {
  position: relative;
  display: block;
}

.teacher-search-box svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-ash);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.teacher-search-box input {
  padding-left: 40px !important;
}

.teacher-toolbar-actions {
  display: flex;
  gap: 8px;
}

.teacher-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.teacher-summary-line {
  color: var(--color-ash);
  font-size: 14px;
}

.teacher-summary-line b {
  color: var(--color-snow-white);
}

.teacher-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 16px;
}

.teacher-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--edge-hairline);
  border-radius: 18px;
  background: var(--surface-frosted-soft);
}

.teacher-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.teacher-avatar {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.teacher-card-name {
  flex: 1 1 auto;
  min-width: 0;
}

.teacher-card-name h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-snow-white);
}

.teacher-card-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-ash);
}

.teacher-card-shift {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

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

.teacher-stats div {
  padding: 10px 12px;
  border: 1px solid var(--edge-hairline);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.teacher-stats dt {
  font-size: 12px;
  color: var(--color-ash);
}

.teacher-stats dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-snow-white);
}

.teacher-subjects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-subjects li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--edge-hairline);
}

.teacher-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-bone);
}

.teacher-subject .hg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
}

.teacher-subject .hg-t1 {
  background: #e3647f;
}
.teacher-subject .hg-t2 {
  background: #4f7fe0;
}
.teacher-subject .hg-t3 {
  background: #3fa56a;
}
.teacher-subject .hg-t4 {
  background: #d99a2b;
}
.teacher-subject .hg-t0 {
  background: #9aa1ad;
}

.teacher-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.teacher-groups a {
  padding: 4px 10px;
  border: 1px solid var(--boton-2-borde);
  border-radius: 999px;
  background: var(--boton-2);
  color: var(--color-snow-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.teacher-groups a:hover {
  border-color: var(--accion);
  background: rgba(37, 99, 235, 0.25);
}

.teacher-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--edge-hairline);
}

.teacher-week {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-week li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 5px 6px;
  border-radius: 10px;
  border: 1px solid var(--edge-hairline);
  color: var(--color-slate);
  font-size: 12px;
}

.teacher-week li b {
  font-size: 12px;
}

.teacher-week li span {
  font-size: 15px;
  font-weight: 700;
}

.teacher-week li.has {
  border-color: rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.16);
  color: var(--color-snow-white);
}

.teacher-noload {
  padding: 16px 18px;
  border: 1px dashed var(--edge-hairline-strong);
  border-radius: 14px;
}

.teacher-noload h3 {
  font-size: 16px;
  color: var(--color-snow-white);
}

.teacher-noload p {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--color-ash);
}

.teacher-noload ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-noload li {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border: 1px solid var(--edge-hairline);
  border-radius: 10px;
}

.teacher-noload li b {
  font-size: 14px;
  color: var(--color-bone);
}

.teacher-noload li small {
  font-size: 12px;
  color: var(--color-ash);
}

@media (max-width: 700px) {
  .teacher-card-head {
    flex-wrap: wrap;
  }

  .teacher-card-name h3,
  .teacher-card-name small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .teacher-card-shift {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-left: 56px;
  }

  .teacher-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-subjects li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .teacher-card-foot .btn {
    width: 100%;
  }

  .teacher-toolbar label {
    flex-basis: calc(50% - 6px);
  }

  .teacher-toolbar .teacher-search-field,
  .teacher-toolbar-actions {
    flex-basis: 100%;
  }
}

/* =========================================================================
   5. PÁGINA · Asistencias
   ========================================================================= */
/* Asistencias: resumen del día + lista semanal/mensual.
   Un color por estado, siempre acompañado de su letra o símbolo:
   verde ✓ asistencia · ámbar R retardo · rojo ✗ falta · turquesa J justificada · violeta S se retiró · gris — sin registro. */

.pg-asistencias {
  --st-A: #22c55e;
  --st-A-bg: #123d24;
  --st-A-tx: #c8f7d8;
  --st-R: #f59e0b;
  --st-R-bg: #43300a;
  --st-R-tx: #fde7b0;
  --st-F: #ef4444;
  --st-F-bg: #4a1717;
  --st-F-tx: #ffd2d2;
  --st-J: #22d3ee;
  --st-J-bg: #0d3a47;
  --st-J-tx: #c4f5fd;
  --st-S: #a78bfa;
  --st-S-bg: #2e2254;
  --st-S-tx: #e3dcff;
  --st-none: #6b7485;
}

.as-summary,
.as-list,
.as-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--spacing-24);
  color: var(--color-snow-white);
}

.as-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}

.as-head h3 {
  margin: 0 0 4px;
  font-size: 24px;
}

.as-head p {
  margin: 0;
  color: #d3d9e4;
}

.as-help {
  margin: 0;
  color: #c3cad6;
  font-size: 14px;
}

.as-notice {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #3c5a86;
  border-left-width: 5px;
  border-radius: 12px;
  background: #14203a;
  color: #e6eeff;
  font-weight: 600;
}

.as-notice[data-type="ok"] {
  border-color: #3f7a62;
  background: #133126;
  color: #e5fff3;
}

.as-notice[data-type="warn"] {
  border-color: #b7791f;
  background: #3a2a0c;
  color: #fff1d0;
}

.as-notice[data-type="error"] {
  border-color: #b54a5a;
  background: #3a1c23;
  color: #ffe1e6;
}

/* Campos */
.pg-asistencias :is(.as-filters, .as-date-nav, .as-shift) :is(select, input) {
  width: 100%;
  min-height: var(--boton-alto);
  padding: 9px 12px;
  border: 1.5px solid #4a5263;
  border-radius: 10px;
  background: #1b1f28;
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
  color-scheme: dark;
}

.pg-asistencias :is(.as-filters, .as-date-nav, .as-shift) :is(select, input):focus {
  border-color: var(--foco);
  outline: none;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28);
}

.as-date-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pg-asistencias .as-date-nav input {
  width: auto;
}

/* Tarjetas de resumen */
.as-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.as-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--edge-hairline);
  border-top: 4px solid var(--st-none);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.as-kpi span {
  color: #dfe4ec;
  font-size: 14px;
  font-weight: 600;
}

.as-kpi strong {
  font-size: 34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.as-kpi small {
  color: #c3cad6;
  font-size: 13px;
}

.as-kpi.st-total {
  border-top-color: #93b4ff;
}

.as-kpi.st-A {
  border-top-color: var(--st-A);
}

.as-kpi.st-R {
  border-top-color: var(--st-R);
}

.as-kpi.st-F {
  border-top-color: var(--st-F);
}

.as-kpi.st-J {
  border-top-color: var(--st-J);
}

.as-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.as-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.as-box h4 {
  margin: 0;
  font-size: 18px;
}

.as-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.pg-asistencias button.as-group,
.pg-asistencias button.as-top-item {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: #1b1f28;
  color: var(--color-snow-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pg-asistencias button.as-group {
  grid-template-columns: 110px minmax(0, 1fr) 150px;
  gap: 14px;
}

.pg-asistencias :is(button.as-group, button.as-top-item):hover {
  border-color: #6f9cff;
  background: #1f2a42;
}

.as-group-name {
  font-weight: 700;
  font-size: 16px;
}

.as-group-name small,
.as-top-item small {
  display: block;
  color: #c3cad6;
  font-size: 12px;
  font-weight: 500;
}

/* Barra apilada: un segmento por estado, separados por 2 px */
.as-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  overflow: hidden;
  border-radius: 4px;
  background: #2a303c;
}

.as-bar i {
  display: block;
  min-width: 3px;
  height: 100%;
  background: var(--st-none);
}

.as-bar i.st-A {
  background: var(--st-A);
}

.as-bar i.st-R {
  background: var(--st-R);
}

.as-bar i.st-F {
  background: var(--st-F);
}

.as-bar i.st-J {
  background: var(--st-J);
}

.as-bar i.st-none {
  background: #4a5263;
}

.as-group-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 13px;
  color: #d3d9e4;
  text-align: right;
}

.as-group-num b {
  font-size: 16px;
  color: var(--color-snow-white);
  font-variant-numeric: tabular-nums;
}

.as-group-num em,
.as-top-num small {
  font-style: normal;
  color: #c3cad6;
}

.as-group-num em.is-f {
  color: #ffb4b4;
  font-weight: 600;
}

.as-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-asistencias button.as-top-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.as-top-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #ffd2d2;
  font-size: 14px;
}

.as-top-num b {
  font-size: 20px;
  color: #ff9b9b;
}

/* Filtros de la lista */
.as-filters {
  display: grid;
  grid-template-columns: 110px minmax(150px, 1fr) minmax(220px, 1.6fr) 120px minmax(220px, 1.4fr);
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.as-filters label,
.as-shift label,
.as-pop-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

.as-search-box {
  position: relative;
  display: block;
}

.as-search-box svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #c3cad6;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.pg-asistencias .as-search-box input {
  padding-left: 40px;
}

.as-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.as-period strong {
  flex: 1 1 auto;
  min-width: 200px;
  font-size: 20px;
  text-align: center;
}

/* Clave de estados */
.as-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.as-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--st-none);
  border-radius: 999px;
  color: #e3e8f0;
  font-size: 13px;
  font-weight: 600;
}

.as-chip[hidden] {
  display: none;
}

.as-chip.st-A {
  border-color: var(--st-A);
  background: var(--st-A-bg);
  color: var(--st-A-tx);
}

.as-chip.st-R {
  border-color: var(--st-R);
  background: var(--st-R-bg);
  color: var(--st-R-tx);
}

.as-chip.st-F {
  border-color: var(--st-F);
  background: var(--st-F-bg);
  color: var(--st-F-tx);
}

.as-chip.st-J {
  border-color: var(--st-J);
  background: var(--st-J-bg);
  color: var(--st-J-tx);
}

.as-chip.st-S {
  border-color: var(--st-S);
  background: var(--st-S-bg);
  color: var(--st-S-tx);
}

.as-chip.st-none {
  border-style: dashed;
}

/* Tabla */
.as-table-wrap {
  width: 100%;
  max-height: calc(100dvh - 170px);
  overflow: auto;
  border: 1px solid #353b48;
  border-radius: 14px;
  background: #151820;
  scrollbar-color: #5b6272 #151820;
  scrollbar-width: thin;
}

#asTable {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

#asTable.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

#asTable :is(th, td) {
  padding: 6px;
  border: 0;
  border-right: 1px solid #2c323e;
  border-bottom: 1px solid #2c323e;
  background: #151820;
  color: #e9edf3;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

#asTable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #232835;
  color: var(--color-snow-white);
}

#asTable .as-n {
  width: 44px;
  min-width: 44px;
  color: #aeb6c4;
}

#asTable .as-student {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  padding: 8px 12px;
  background: #1c212b;
  font-weight: 700;
  text-align: left;
  white-space: normal;
}

#asTable thead .as-student {
  z-index: 4;
  background: #2b3140;
}

#asTable .as-student small {
  display: block;
  color: #c3cad6;
  font-size: 12px;
  font-weight: 500;
}

#asTable th.as-day {
  min-width: 64px;
  padding: 8px 6px;
  line-height: 1.15;
}

#asTable th.as-day span,
#asTable th.as-day small {
  display: block;
  color: #cfd6e2;
  font-size: 12px;
  font-weight: 600;
}

#asTable th.as-day b {
  display: block;
  font-size: 20px;
}

#asTable th.as-day.is-today {
  background: #1d3d7a;
  box-shadow: inset 0 -3px 0 #93b4ff;
}

#asTable td.is-today {
  background: #182238;
}

#asTable .is-locked {
  background: repeating-linear-gradient(135deg, #151820 0 6px, #1b1f28 6px 12px);
  color: #8b93a3;
}

#asTable thead th.is-locked {
  background: #1d212b;
}

.pg-asistencias button.as-all {
  display: block;
  width: 100%;
  min-height: 30px;
  margin-top: 6px;
  padding: 3px 6px;
  border: 1.5px solid #3f8f5e;
  border-radius: 8px;
  background: #143321;
  color: #d6fbe3;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.pg-asistencias button.as-all:hover {
  background: #1b4a2e;
  border-color: var(--st-A);
}

/* Casilla de estado: grande, con letra y color */
.pg-asistencias .as-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  padding: 0;
  border: 1.5px dashed #4a5263;
  border-radius: 10px;
  background: transparent;
  color: #8b93a3;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.pg-asistencias button.as-cell {
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.pg-asistencias button.as-cell:hover,
.pg-asistencias button.as-cell.is-open {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.45);
}

.pg-asistencias .as-cell:is(.st-A, .st-R, .st-F, .st-J, .st-S) {
  border-style: solid;
}

.pg-asistencias .as-cell.st-A {
  border-color: var(--st-A);
  background: var(--st-A-bg);
  color: var(--st-A-tx);
}

.pg-asistencias .as-cell.st-R {
  border-color: var(--st-R);
  background: var(--st-R-bg);
  color: var(--st-R-tx);
}

.pg-asistencias .as-cell.st-F {
  border-color: var(--st-F);
  background: var(--st-F-bg);
  color: var(--st-F-tx);
}

.pg-asistencias .as-cell.st-J {
  border-color: var(--st-J);
  background: var(--st-J-bg);
  color: var(--st-J-tx);
}

.pg-asistencias .as-cell.st-S {
  border-color: var(--st-S);
  background: var(--st-S-bg);
  color: var(--st-S-tx);
}

.pg-asistencias .as-cell.is-manual::after {
  content: "✎";
  color: var(--color-snow-white);
  font-size: 11px;
  font-weight: 700;
}

.pg-asistencias .as-cell.is-manual::after {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b4252;
  border: 1.5px solid #151820;
}

#asTable .as-total {
  min-width: 76px;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#asTable td.as-total.is-f {
  color: #ff9b9b;
}

#asTable td.as-total.is-r {
  color: #fcd06b;
}

#asTable .as-empty-row {
  padding: 28px;
  color: #c3cad6;
  text-align: center;
}

#asTable tbody tr:hover > * {
  filter: brightness(1.12);
}

/* Ventana pequeña para elegir el estado */
#asPop {
  position: fixed;
  z-index: 60;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 16px;
  border: 1.5px solid #4a5263;
  border-radius: 16px;
  background: #181c25;
  color: var(--color-snow-white);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

#asPop[hidden] {
  display: none;
}

.as-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.as-pop-head strong {
  display: block;
  font-size: 16px;
}

.as-pop-head small {
  display: block;
  color: #c3cad6;
  font-size: 13px;
}

.as-pop-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pg-asistencias button.as-state {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--boton-alto);
  padding: 8px 12px;
  border: 1.5px solid var(--st-none);
  border-radius: var(--boton-radio);
  background: #1f2430;
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.pg-asistencias button.as-state span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 15px;
}

.pg-asistencias button.as-state.st-A {
  border-color: var(--st-A);
  background: var(--st-A-bg);
}

.pg-asistencias button.as-state.st-R {
  border-color: var(--st-R);
  background: var(--st-R-bg);
}

.pg-asistencias button.as-state.st-F {
  border-color: var(--st-F);
  background: var(--st-F-bg);
}

.pg-asistencias button.as-state.st-J {
  border-color: var(--st-J);
  background: var(--st-J-bg);
}

.pg-asistencias button.as-state.st-S {
  border-color: var(--st-S);
  background: var(--st-S-bg);
}

.pg-asistencias button.as-state.st-none {
  grid-column: 1 / -1;
  border-style: dashed;
}

.pg-asistencias button.as-state:hover {
  filter: brightness(1.2);
}

.pg-asistencias button.as-state.is-current {
  box-shadow: 0 0 0 3px var(--color-snow-white);
}

.pg-asistencias .as-pop-note input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid #4a5263;
  border-radius: 10px;
  background: #11141b;
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
}

.as-pop-origin {
  margin: 0;
  color: #c3cad6;
  font-size: 13px;
}

/* Hora de entrada */
#asShifts[open] {
  width: min(520px, calc(100vw - 32px));
  padding: 20px 24px 24px;
}

#asShiftsForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.as-shift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--edge-hairline);
  border-radius: 12px;
}

.as-shift legend {
  padding: 0 6px;
  font-weight: 700;
}

.as-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Tableta */
@media (max-width: 1100px) {
  .as-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .as-summary-grid {
    grid-template-columns: 1fr;
  }

  .as-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .as-filters .as-subject,
  .as-filters .as-search {
    grid-column: 1 / -1;
  }
}

/* Teléfono */
@media (max-width: 700px) {
  .as-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .as-kpi strong {
    font-size: 28px;
  }

  .pg-asistencias button.as-group {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .as-group-num {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }

  .as-filters {
    padding: 12px;
  }

  .as-period strong {
    order: -1;
    flex-basis: 100%;
    font-size: 18px;
  }

  .as-period .btn {
    flex: 1;
  }

  #asTable .as-student {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    font-size: 13px;
  }

  #asTable .as-n {
    display: none;
  }

  .as-table-wrap {
    max-height: 72dvh;
  }

  #asPop {
    position: fixed;
    left: 8px !important;
    right: 8px;
    bottom: 8px;
    top: auto !important;
    width: auto;
  }

  .as-date-nav {
    width: 100%;
  }

  .pg-asistencias .as-date-nav input {
    flex: 1;
  }
}

.as-pop-states .as-pop-locked {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px dashed var(--st-J);
  border-radius: 12px;
  color: var(--st-J-tx);
}

/* Entrada general: aviso de cambios hechos en las asignaturas del día */
.pg-asistencias .as-cell .as-cls-flag {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #171b23;
  border-radius: 99px;
  background: #2f6fdc;
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.pg-asistencias .as-cell .as-cls-flag.st-F {
  background: #dc4b4b;
}
.pg-asistencias .as-cell .as-cls-flag.st-R {
  background: #d99a2b;
}
.pg-asistencias .as-cell .as-cls-flag.st-J {
  background: #0e9f9f;
}
.pg-asistencias .as-cell .as-cls-flag.st-A {
  background: #2f9e62;
}

.as-pop-classes {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid #d99a2b;
  border-radius: 8px;
  background: rgba(217, 154, 43, 0.1);
  font-size: 13px;
  line-height: 1.45;
}

.as-pop-classes b {
  display: block;
  margin-bottom: 6px;
}

.as-pop-classes ul {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.as-pop-classes li small {
  color: #9aa6bd;
}

.as-pop-classes .as-chip {
  padding: 1px 8px;
  font-size: 11.5px;
}

.as-pop-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.as-pop-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #2563eb;
}

.as-chip.as-chip-cls i {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 99px;
  background: #dc4b4b;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

/* =========================================================================
   5. PÁGINA · Citatorios (seguimiento)
   ========================================================================= */
/* Citatorios: acciones de seguimiento en la lista (asistió / no asistió / confirmar / cancelar). */
.pg-citatorios .cita-status {
  min-width: 230px;
}

.cita-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.pg-citatorios .cita-btn {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  white-space: normal;
}

.pg-citatorios .cita-btn-warn {
  border-color: #d97706;
  background: #3a2a0c;
  color: #fde7b0;
}

.pg-citatorios .cita-btn-warn:hover {
  border-color: #f59e0b;
  background: #4a3610;
  color: #fff4d6;
}

.cita-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
}

.pg-citatorios .link-btn {
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #b3cdff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pg-citatorios .link-btn:hover {
  color: #ffffff;
}

.pg-citatorios .link-btn.is-danger {
  color: #ffb4b4;
}

.cita-num {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid #d97706;
  border-radius: 999px;
  background: #3a2a0c;
  color: #fde7b0;
  font-size: 12px;
  font-weight: 700;
}

.cita-acuerdos,
.cita-noasistio {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 4px solid #22c55e;
  border-radius: 8px;
  background: #123d24;
  color: #d7fbe4;
  font-size: 13px;
  line-height: 1.45;
}

.cita-noasistio {
  border-left-color: #ef4444;
  background: #4a1717;
  color: #ffd2d2;
}

.pg-citatorios #citationPlace.is-fixed {
  background: #14203a;
  border-color: #3c5a86;
  color: #ffffff;
  font-weight: 700;
  cursor: default;
}

.cita-num {
  white-space: nowrap;
}

.cita-wait {
  color: #c3cad6;
  font-size: 12px;
  line-height: 1.4;
}

/* Campos de fecha/hora y texto en las ventanas de citatorio (antes quedaban sin estilo). */
.pg-citatorios .report-dialog :is(input[type="datetime-local"], input[type="text"]) {
  width: 100%;
  min-height: var(--boton-alto);
  padding: 9px 12px;
  border: 1.5px solid #4a5263;
  border-radius: 10px;
  background: #1b1f28;
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
  color-scheme: dark;
}

.pg-citatorios .report-dialog label > span em {
  font-style: normal;
  color: #c3cad6;
}

/* =========================================================================
   5. PÁGINA · Asistencias · monitor RFID
   ========================================================================= */
/* ==========================================================================
   MONITOR RFID EN ASISTENCIAS
   ========================================================================== */
.rfid-monitor {
  overflow: hidden;
}
.rfid-monitor-head,
.rfid-unknown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.rfid-monitor-head h3,
.rfid-unknown-head h4 {
  margin: 3px 0 4px;
}
.rfid-monitor-head p,
.rfid-unknown-head p {
  margin: 0;
  color: var(--color-slate);
}
.rfid-kicker {
  color: var(--status-info);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.rfid-monitor-state {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--color-smoke);
  font-size: 13px;
}
.rfid-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-ok);
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.11);
}
.rfid-monitor[data-rfid-state="error"] .rfid-pulse {
  background: var(--status-danger);
  box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.11);
}
.rfid-tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 16px;
  border-bottom: 1px solid var(--edge-hairline);
}
.rfid-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-slate);
  padding: 11px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  border-bottom: 2px solid transparent;
}
.rfid-tab:hover {
  color: var(--color-bone);
}
.rfid-tab.is-active {
  color: var(--color-bone);
  border-bottom-color: var(--status-info);
}
.rfid-tab-badge {
  display: inline-flex;
  min-width: 23px;
  height: 23px;
  padding: 0 7px;
  margin-left: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.13);
  color: var(--status-info);
  font-size: 12px;
}
.rfid-tab-badge.is-warning {
  background: var(--status-warn-fill);
  color: var(--status-warn);
}
.rfid-tab-panel[hidden] {
  display: none !important;
}
.rfid-latest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
  margin-bottom: 14px;
}
.rfid-latest-icon,
.rfid-unknown-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(96, 165, 250, 0.13);
  color: var(--status-info);
  border: 1px solid rgba(96, 165, 250, 0.28);
}
.rfid-latest-icon.is-warning,
.rfid-unknown-icon {
  background: var(--status-warn-fill);
  color: var(--status-warn);
  border-color: var(--status-warn-edge);
}
.rfid-latest div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rfid-latest small {
  color: var(--color-slate);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.rfid-latest strong {
  color: var(--color-bone);
  font-size: 16px;
  overflow-wrap: anywhere;
}
.rfid-latest span {
  color: var(--color-slate);
  font-size: 13px;
}
.rfid-live-table-wrap {
  overflow: auto;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
}
.rfid-live-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.rfid-live-table th {
  text-align: left;
  color: var(--color-slate);
  font-size: 12px;
  font-weight: 700;
  padding: 11px 13px;
  border-bottom: 1px solid var(--edge-hairline);
}
.rfid-live-table td {
  padding: 12px 13px;
  border-bottom: 1px solid rgba(229, 229, 229, 0.09);
  vertical-align: middle;
}
.rfid-live-table tbody tr:last-child td {
  border-bottom: 0;
}
.rfid-live-table tbody tr.is-unknown {
  background: rgba(251, 191, 36, 0.035);
}
.rfid-live-table td strong {
  display: block;
  color: var(--color-bone);
}
.rfid-live-table td small {
  display: block;
  color: var(--color-slate);
  margin-top: 2px;
}
.rfid-live-table code {
  color: var(--color-bone);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 7px;
  border-radius: 7px;
}
.rfid-result {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--edge-hairline);
}
.rfid-result.is-ok {
  color: var(--status-ok);
  background: var(--status-ok-fill);
  border-color: var(--status-ok-edge);
}
.rfid-result.is-warn,
.rfid-result.is-unknown {
  color: var(--status-warn);
  background: var(--status-warn-fill);
  border-color: var(--status-warn-edge);
}
.rfid-result.is-neutral {
  color: var(--color-smoke);
  background: var(--surface-frosted-soft);
}
.rfid-empty {
  text-align: center;
  color: var(--color-slate);
  padding: 28px !important;
}
.rfid-unknown-head {
  margin-bottom: 14px;
}
.rfid-unknown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.rfid-unknown-card,
.rfid-empty-card {
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
  padding: 15px;
}
.rfid-unknown-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rfid-unknown-card-top div {
  display: grid;
  gap: 2px;
}
.rfid-unknown-card-top small {
  color: var(--color-slate);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.rfid-unknown-card-top strong {
  font-size: 20px;
  color: var(--color-bone);
  overflow-wrap: anywhere;
}
.rfid-unknown-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}
.rfid-unknown-meta span {
  display: grid;
  gap: 2px;
  color: var(--color-smoke);
  font-size: 12px;
}
.rfid-unknown-meta b {
  color: var(--color-slate);
  font-size: 11px;
  font-weight: 600;
}
.rfid-link-button {
  width: 100%;
  justify-content: center;
}
.rfid-permission-note {
  margin: 10px 0 0;
  color: var(--color-slate);
  font-size: 12px;
}
.rfid-empty-card {
  grid-column: 1/-1;
  text-align: center;
  color: var(--color-slate);
  padding: 30px;
  display: grid;
  gap: 5px;
}
.rfid-empty-card strong {
  color: var(--color-bone);
}
.rfid-link-dialog {
  width: min(680px, calc(100vw - 30px));
  border: 1px solid var(--edge-hairline-strong);
  border-radius: 16px;
  background: var(--color-graphite);
  color: var(--color-bone);
  padding: 0;
}
.rfid-link-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}
.rfid-link-dialog form {
  padding: 20px;
}
.rfid-link-code {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--status-warn-fill);
  border: 1px solid var(--status-warn-edge);
  display: grid;
  gap: 3px;
}
.rfid-link-code small {
  color: var(--status-warn);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.rfid-link-code strong {
  font-size: 22px;
}
.rfid-student-search-label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}
.rfid-student-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--edge-hairline);
  border-radius: 10px;
  padding: 0 11px;
  background: rgba(0, 0, 0, 0.18);
}
.rfid-student-search-wrap input {
  width: 100%;
  min-height: 42px;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--color-bone) !important;
}
.rfid-student-results {
  display: grid;
  gap: 7px;
  max-height: 280px;
  overflow: auto;
  margin: 12px 0;
}
.rfid-student-results > p {
  color: var(--color-slate);
  margin: 6px 2px;
}
.rfid-student-results > p.is-error {
  color: var(--status-danger);
}
.rfid-student-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--edge-hairline);
  border-radius: 11px;
  padding: 10px 12px;
  background: var(--surface-frosted-soft);
  color: inherit;
  cursor: pointer;
}
.rfid-student-result:hover,
.rfid-student-result.is-selected {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.08);
}
.rfid-student-result span {
  display: grid;
  gap: 2px;
}
.rfid-student-result strong {
  color: var(--color-bone);
}
.rfid-student-result small {
  color: var(--color-slate);
}
.rfid-student-result em {
  font-style: normal;
  color: var(--status-info);
  font-size: 11px;
  text-align: right;
}
.rfid-selected-student {
  display: grid;
  gap: 2px;
  border: 1px solid var(--status-ok-edge);
  background: var(--status-ok-fill);
  border-radius: 11px;
  padding: 11px 13px;
  margin: 10px 0;
}
.rfid-selected-student small {
  color: var(--status-ok);
}
.rfid-selected-student span,
.rfid-selected-student em {
  color: var(--color-smoke);
  font-size: 12px;
  font-style: normal;
}
.rfid-has-new .rfid-pulse {
  animation: rfidPulse 0.55s ease-out;
}
@keyframes rfidPulse {
  50% {
    transform: scale(1.5);
  }
}
@media (max-width: 720px) {
  .rfid-monitor-head,
  .rfid-unknown-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .rfid-tabs {
    overflow: auto;
  }
  .rfid-tab {
    white-space: nowrap;
  }
  .rfid-unknown-meta {
    grid-template-columns: 1fr;
  }
}

/* Lista de lecturas: filtro por día, búsqueda y páginas de 5 */
.rfid-filters {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr);
  align-items: end;
  gap: 12px 16px;
  margin: 14px 0 6px;
  padding: 14px;
  border: 1px solid var(--edge-hairline);
  border-radius: 14px;
  background: var(--surface-frosted-soft);
}

.rfid-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

.rfid-day-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rfid-filters input {
  min-height: var(--boton-alto);
  padding: 9px 12px;
  border: 1.5px solid #4a5263;
  border-radius: 10px;
  background: #1b1f28;
  color: var(--color-snow-white);
  font: inherit;
  font-size: 15px;
  color-scheme: dark;
}

.rfid-filters input:focus {
  border-color: var(--foco);
  outline: none;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28);
}

.rfid-search-box {
  position: relative;
  display: block;
}

.rfid-search-box svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #c3cad6;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.rfid-search-box input {
  width: 100%;
  padding-left: 40px;
}

.rfid-list-title {
  margin: 10px 0 8px;
  color: var(--color-snow-white);
  font-size: 16px;
  font-weight: 700;
}

.rfid-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 12px;
}

.rfid-pager[hidden],
.rfid-missing[hidden] {
  display: none;
}

.rfid-pager span {
  color: #dfe4ec;
  font-weight: 600;
}

.rfid-pager .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rfid-missing {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #b7791f;
  border-left-width: 5px;
  border-radius: 12px;
  background: #2b2110;
}

.rfid-missing h4 {
  margin: 0 0 10px;
  color: #fff1d0;
  font-size: 16px;
}

.rfid-missing ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rfid-missing li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.rfid-missing li strong {
  display: block;
  color: var(--color-snow-white);
}

.rfid-missing li small {
  color: #d3d9e4;
}

@media (max-width: 720px) {
  .rfid-filters {
    grid-template-columns: 1fr;
  }

  .rfid-day-nav input {
    flex: 1;
  }

  .rfid-pager .btn {
    flex: 1;
  }
}

.rfid-day-nav {
  flex-wrap: nowrap;
}

.rfid-day-nav input[type="date"] {
  flex: 0 0 auto;
  width: 175px;
}

.rfid-day-nav .btn {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .rfid-day-nav input[type="date"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* Mientras se carga lo que pidió la persona, la lista se atenúa un momento. */
.rfid-is-loading .rfid-live-table-wrap,
.rfid-is-loading .rfid-missing {
  opacity: 0.55;
  transition: opacity 120ms ease;
}

/* =========================================================================
   5. PÁGINA · Informes por grupo (calificaciones e inasistencias)
   ========================================================================= */
/* Informes por grupo: concentrado de calificaciones e inasistencias.
   Usan la misma hoja que Horarios (encabezado con logos, leyenda, firmas y pie guinda). */
.ig-sheet {
  font-size: 8pt;
}

.ig-sheet--h {
  width: 279.4mm;
  min-height: 215.9mm;
  padding: 9mm 10mm 0;
}

.ig-sheet .hg-title {
  margin-bottom: 3mm;
}

/* Tabla principal */
.hg-sheet .ig-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 3mm;
  font-size: 7.6pt;
  color: #1d2230;
}

.hg-sheet .ig-grid :is(th, td) {
  padding: 0.7mm 0.6mm;
  border: 0.25mm solid #aeb4be;
  text-align: center;
  vertical-align: middle;
  line-height: 1.15;
  overflow: hidden;
}

.hg-sheet .ig-grid thead th {
  background: #eef0f4;
  font-weight: 700;
  font-size: 7pt;
}

.hg-sheet .ig-grid .ig-fields th {
  font-size: 6.4pt;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hg-sheet .ig-grid .ig-fields th.hg-t1 {
  background: #fdecef;
}
.hg-sheet .ig-grid .ig-fields th.hg-t2 {
  background: #fff4df;
}
.hg-sheet .ig-grid .ig-fields th.hg-t3 {
  background: #ece9fb;
}
.hg-sheet .ig-grid .ig-fields th.hg-t4 {
  background: #e4f5ea;
}
.hg-sheet .ig-grid .ig-fields th.hg-t0 {
  background: #eef0f4;
}

.hg-sheet .ig-grid .ig-n {
  width: 6mm;
}

.hg-sheet .ig-grid .ig-name {
  width: 58mm;
  padding-left: 1.5mm;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 7pt;
}

.hg-sheet .ig-grid tbody td {
  height: 4.6mm;
  font-weight: 700;
  font-size: 8pt;
}

.hg-sheet .ig-grid tbody td.ig-name {
  font-weight: 500;
}

.hg-sheet .ig-grid tbody tr:nth-child(even) td {
  background: #f7f8fa;
}

.hg-sheet .ig-grid td.ig-fail {
  background: #f9c9dd !important;
  color: #9d2449;
}

.hg-sheet .ig-grid td.ig-na {
  color: #aeb4be;
  font-weight: 400;
}

.hg-sheet .ig-grid .ig-prom {
  width: 10mm;
  background: #eef0f4;
}

.hg-sheet .ig-grid .ig-rep {
  width: 8mm;
  color: #9d2449;
}

.hg-sheet .ig-grid .ig-empty {
  padding: 4mm;
  color: #5b6475;
  font-weight: 400;
}

/* Resumen bajo la tabla */
.ig-bottom {
  display: flex;
  flex-direction: column;
  gap: 2mm;
  margin-bottom: 1mm;
  break-inside: avoid;
}

.hg-sheet .ig-summary,
.hg-sheet .ig-dist {
  width: 100%;
  border-collapse: collapse;
  font-size: 7pt;
  color: #1d2230;
}

.hg-sheet .ig-summary :is(th, td),
.hg-sheet .ig-dist :is(th, td) {
  padding: 0.8mm 0.6mm;
  border: 0.25mm solid #aeb4be;
  text-align: center;
}

.hg-sheet .ig-summary thead th,
.hg-sheet .ig-dist thead th {
  background: #eef0f4;
  font-weight: 700;
}

.hg-sheet .ig-summary tbody th {
  width: 30mm;
  text-align: left;
  padding-left: 1.5mm;
  font-weight: 700;
}

.hg-sheet .ig-summary tbody tr:first-child th {
  background: #fff4a8;
}

.hg-sheet .ig-dist tbody th,
.hg-sheet .ig-dist tfoot th {
  text-align: left;
  padding-left: 1.5mm;
  font-weight: 600;
}

.hg-sheet .ig-dist tfoot :is(th, td) {
  background: #fff4a8;
  font-weight: 700;
}

/* Inasistencias */
.hg-sheet .ig-abs {
  font-size: 6.4pt;
}

.hg-sheet .ig-abs .ig-name {
  width: 46mm;
  font-size: 6.4pt;
}

.hg-sheet .ig-abs tbody td {
  height: 3.9mm;
  font-size: 6.8pt;
  font-weight: 600;
}

.hg-sheet .ig-abs .ig-months th {
  font-size: 5.4pt;
  font-weight: 600;
}

.hg-sheet .ig-grid .ig-sub {
  background: #eef0f4;
  font-weight: 800;
}

.hg-sheet .ig-grid .ig-has {
  color: #9d2449;
}

.hg-sheet .ig-grid .ig-allhead,
.hg-sheet .ig-grid .ig-allcell {
  background: #e6f0ff;
}

.hg-sheet .ig-grid .ig-total {
  width: 10mm;
  background: #fff4a8;
}

.hg-sheet .ig-grid .ig-foot :is(th, td) {
  background: #eef0f4;
  font-weight: 800;
}

.hg-sheet .ig-grid .ig-classes :is(th, td) {
  background: #fff;
  font-weight: 600;
  color: #5b6475;
}

.hg-sheet .ig-one .ig-pct {
  width: 13mm;
}

.hg-sheet .ig-one .ig-dates {
  width: 58mm;
  text-align: left;
  font-weight: 500;
  font-size: 6.6pt;
  white-space: normal;
}

/* Tarjetas en Informes */
.inf-cards .inf-card--grades {
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.06));
}

.inf-cards .inf-card--absences {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.06));
}

/* ---------- Impresión ---------- */
@page hoja-horizontal {
  size: letter landscape;
  margin: 0;
}

html:where(.pg-informe_grupo) {
  page: hoja-horario;
}

@media print {
  :where(.pg-informe_grupo)
    :is(
      .side,
      .main > header,
      .school-section-tabs,
      .hg-toolbar,
      .hg-filters,
      .hg-print-tip,
      .hg-empty,
      .alert,
      .nav-backdrop,
      .sidebar-backdrop
    ) {
    display: none !important;
  }

  html:where(.pg-informe_grupo),
  :where(.pg-informe_grupo) :is(body, .app, .main, main) {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* Estas hojas pueden ocupar más de una página si el grupo es grande: el encabezado de la tabla se repite. */
  /* Un poco menos que la hoja: con la altura exacta, el redondeo empuja las firmas a otra página. */
  .ig-sheet {
    height: auto !important;
    min-height: 276mm !important;
    overflow: visible !important;
  }

  .ig-sheet--h {
    page: hoja-horizontal;
    width: 279.4mm !important;
    min-height: 212mm !important;
    padding: 8mm 9mm 0 !important;
  }

  .hg-sheet .ig-grid thead {
    display: table-header-group;
  }

  .hg-sheet .ig-grid tr {
    break-inside: avoid;
  }
}

/* Anchos de columna (la tabla es de ancho fijo: se definen con colgroup) */
.hg-sheet .ig-grid col.c-n {
  width: 6mm;
}
.hg-sheet .ig-grid col.c-name {
  width: 62mm;
}
.hg-sheet .ig-grid col.c-prom {
  width: 10mm;
}
.hg-sheet .ig-grid col.c-rep {
  width: 8mm;
}
.hg-sheet .ig-abs col.c-n {
  width: 5mm;
}
.hg-sheet .ig-abs col.c-name {
  width: 46mm;
}
.hg-sheet .ig-abs col.c-sub {
  width: 4.2mm;
}
.hg-sheet .ig-abs col.c-total {
  width: 8mm;
}
.hg-sheet .ig-one col.c-total {
  width: 11mm;
}
.hg-sheet .ig-one col.c-pct {
  width: 13mm;
}
.hg-sheet .ig-one col.c-dates {
  width: 52mm;
}
.hg-sheet .ig-summary col.c-label {
  width: 30mm;
}
.hg-sheet .ig-summary col.c-prom {
  width: 11mm;
}

.hg-sheet .ig-grid .ig-name {
  width: auto;
}

.hg-sheet .ig-abs :is(th, td) {
  padding: 0.4mm 0.1mm;
}

.hg-sheet .ig-abs tbody td {
  height: 3.5mm;
  font-size: 6.2pt;
}

.hg-sheet .ig-abs .ig-months th {
  font-size: 4.6pt;
  letter-spacing: -0.02em;
}

/* Encabezado compacto: estas hojas llevan muchos renglones y deben caber en una página. */
.ig-sheet .hg-head {
  padding-bottom: 1.5mm;
}

.ig-sheet .hg-head img {
  max-height: 11mm;
}

.ig-sheet .hg-meta {
  margin: 1mm 0 2mm;
  font-size: 7pt;
  line-height: 1.3;
}

.ig-sheet .hg-title {
  padding: 2mm 4mm;
  margin-bottom: 2mm;
}

.ig-sheet .hg-title h3 {
  font-size: 16pt;
}

.ig-sheet .hg-title li {
  padding: 1mm 2.5mm;
}

.hg-sheet .ig-grid tbody td {
  height: 4.1mm;
  padding-top: 0.3mm;
  padding-bottom: 0.3mm;
}

.ig-sheet .hg-key {
  margin: 1.5mm 0 0;
}

.ig-sheet .hg-signs {
  margin-top: 6mm;
}

.ig-sheet .hg-foot {
  margin-top: 3mm;
}

.hg-sheet .ig-dist thead th:first-child,
.hg-sheet .ig-dist tbody th {
  width: 42mm;
  text-align: left;
  padding-left: 1.5mm;
}

.hg-sheet .ig-dist thead th:last-child,
.hg-sheet .ig-dist tbody td:last-child {
  width: 34mm;
  background: #fff4a8;
}

/* Hoja horizontal de inasistencias: todavía más compacta para que quepa el grupo completo. */
.ig-sheet--h .hg-head img {
  max-height: 9mm;
}

.ig-sheet--h .hg-meta {
  margin: 0.5mm 0 1.5mm;
  font-size: 6.4pt;
}

.ig-sheet--h .hg-title {
  padding: 1.5mm 4mm;
}

.ig-sheet--h .hg-title h3 {
  font-size: 14pt;
}

.hg-sheet .ig-abs tbody td {
  height: 3.15mm;
  padding-top: 0;
  padding-bottom: 0;
}

.ig-sheet--h .hg-signs {
  margin-top: 3mm;
}

/* Pie compacto: los campos formativos ya van en el encabezado de la tabla. */
.ig-sheet .hg-key {
  display: none;
}

.ig-sheet .hg-signs {
  margin-top: 3mm;
  padding-top: 0;
}

.ig-sheet .hg-signs .hg-line {
  margin-top: 7mm;
}

.ig-sheet .hg-signs b {
  min-height: 0;
}

.ig-sheet .hg-foot {
  margin-top: 2mm;
  padding-top: 1.5mm;
  padding-bottom: 2.5mm;
  border-top-width: 1mm;
}

.hg-sheet .ig-grid:not(.ig-abs) tbody td {
  height: 3.9mm;
}

/* Ajuste fino para que un grupo de ~40 alumnos quepa en una hoja carta. */
.hg-sheet .ig-grid:not(.ig-abs) tbody td {
  height: 3.55mm;
  line-height: 1;
  font-size: 7.6pt;
}

.hg-sheet .ig-grid thead th {
  padding-top: 0.4mm;
  padding-bottom: 0.4mm;
  line-height: 1.05;
}

.hg-sheet .ig-summary col.c-label {
  width: 38mm;
}

.hg-sheet .ig-summary :is(th, td),
.hg-sheet .ig-dist :is(th, td) {
  padding: 0.45mm 0.5mm;
  line-height: 1.1;
  white-space: nowrap;
}

.ig-sheet .hg-meta {
  margin: 0.5mm 0 1.5mm;
}

/* Horizontal: un poco más compacta para que el grupo completo quepa en una hoja. */
.ig-sheet--h .hg-meta {
  font-size: 6pt;
  line-height: 1.2;
}

.ig-sheet--h .hg-title {
  padding: 1mm 3mm;
}

.ig-sheet--h .hg-title h3 {
  font-size: 12pt;
}

.ig-sheet--h .hg-title li {
  padding: 0.6mm 2mm;
}

.hg-sheet .ig-abs tbody td {
  height: 2.95mm;
  line-height: 1;
}

.ig-sheet--h .hg-signs .hg-line {
  margin-top: 5mm;
}

.ig-sheet--h .hg-foot {
  padding-top: 1mm;
  padding-bottom: 1.5mm;
}

.ig-sheet--h .hg-foot p {
  font-size: 6pt;
  line-height: 1.3;
}

.ig-app .hg-filters label {
  flex: 1 1 130px;
}

.ig-app .hg-filters label:has(input[type="date"]) {
  flex: 0 1 160px;
}

/* =========================================================================
   Estilo de tablas igual al de Horarios: borde redondeado, encabezado oscuro,
   líneas finas y colores por campo formativo.
   ========================================================================= */
.hg-sheet :is(.ig-grid, .ig-summary, .ig-dist) {
  border: 0.7pt solid var(--hg-edge);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 2.2mm;
  overflow: hidden;
  background: #fff;
}

.hg-sheet :is(.ig-grid, .ig-summary, .ig-dist) :is(th, td) {
  border: 0;
  border-right: 0.5pt solid var(--hg-line);
  border-bottom: 0.5pt solid var(--hg-line);
  color: var(--hg-ink);
  background: #fff;
}

.hg-sheet :is(.ig-grid, .ig-summary, .ig-dist) tr > :last-child {
  border-right: 0;
}

.hg-sheet :is(.ig-grid, .ig-summary, .ig-dist) tbody:last-child tr:last-child > * {
  border-bottom: 0;
}

/* Encabezados oscuros */
.hg-sheet :is(.ig-grid, .ig-summary, .ig-dist) thead th {
  background: #1d2230;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-right-color: #3a4152;
  border-bottom-color: #3a4152;
}

.hg-sheet .ig-grid .ig-months th {
  background: #2d3445;
  color: #dfe3ea;
}

/* Renglón de campos formativos: color del campo con su franja */
.hg-sheet .ig-grid .ig-fields th {
  font-size: 6.2pt;
  letter-spacing: 0.03em;
}

.hg-sheet .ig-grid .ig-fields th.hg-t1 {
  background: #fdecef;
  color: #9d2449;
  box-shadow: inset 0 -0.9mm 0 #e3647f;
}
.hg-sheet .ig-grid .ig-fields th.hg-t2 {
  background: #e8f0fe;
  color: #274f9e;
  box-shadow: inset 0 -0.9mm 0 #4f7fe0;
}
.hg-sheet .ig-grid .ig-fields th.hg-t3 {
  background: #e9f7ee;
  color: #23683f;
  box-shadow: inset 0 -0.9mm 0 #3fa56a;
}
.hg-sheet .ig-grid .ig-fields th.hg-t4 {
  background: #fdf4e3;
  color: #8a5a10;
  box-shadow: inset 0 -0.9mm 0 #d99a2b;
}
.hg-sheet .ig-grid .ig-fields th.hg-t0 {
  background: #f1f2f5;
  color: #5b6475;
  box-shadow: inset 0 -0.9mm 0 #9aa1ad;
}

/* Cuerpo */
.hg-sheet .ig-grid tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.hg-sheet .ig-grid tbody td.ig-n {
  background: #f3f4f7 !important;
  color: var(--hg-soft);
  font-weight: 700;
}

.hg-sheet .ig-grid tbody td.ig-name {
  color: var(--hg-ink);
  font-weight: 600;
}

.hg-sheet .ig-grid td.ig-fail {
  background: #fde2e7 !important;
  color: #9d2449;
  font-weight: 800;
}

.hg-sheet .ig-grid td.ig-na {
  color: #c3c8d1;
}

.hg-sheet .ig-grid tbody td.ig-prom {
  background: #f3f4f7 !important;
  font-weight: 800;
}

.hg-sheet .ig-grid tbody td.ig-prom.ig-fail {
  background: #fde2e7 !important;
}

.hg-sheet .ig-grid tbody td.ig-rep {
  color: #9d2449;
  font-weight: 800;
}

.hg-sheet .ig-grid tbody td.ig-sub {
  background: #f3f4f7 !important;
  font-weight: 800;
}

.hg-sheet .ig-grid .ig-has {
  color: #9d2449;
  font-weight: 800;
}

.hg-sheet .ig-grid tbody td.ig-allcell {
  background: #eef3fd !important;
  color: #274f9e;
}

.hg-sheet .ig-grid thead th.ig-allhead {
  background: #274f9e;
}

.hg-sheet .ig-grid tbody td.ig-total,
.hg-sheet .ig-grid thead th.ig-total {
  background: #fbf6ec !important;
  color: #8a6a3a;
  font-weight: 800;
}

.hg-sheet .ig-grid thead th.ig-total {
  background: #b38e5d !important;
  color: #fff;
}

/* Renglones de totales del grupo */
.hg-sheet .ig-grid .ig-foot :is(th, td) {
  background: #f3f4f7 !important;
  border-top: 0.7pt solid var(--hg-edge);
  font-weight: 800;
}

.hg-sheet .ig-grid .ig-foot tr + tr :is(th, td) {
  border-top: 0;
}

.hg-sheet .ig-grid .ig-classes :is(th, td) {
  background: #fff !important;
  color: var(--hg-soft);
  font-weight: 600;
}

/* Resumen y materias reprobadas por alumno */
.hg-sheet .ig-summary tbody th,
.hg-sheet .ig-dist tbody th,
.hg-sheet .ig-dist thead th:first-child {
  background: #f3f4f7;
  color: var(--hg-ink);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.hg-sheet .ig-dist thead th:first-child {
  background: #1d2230;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hg-sheet .ig-summary tbody tr:first-child :is(th, td) {
  background: #fde2e7;
  color: #9d2449;
  font-weight: 800;
}

.hg-sheet .ig-summary tbody td:last-child,
.hg-sheet .ig-summary thead th:last-child {
  font-weight: 800;
}

.hg-sheet .ig-summary thead th:last-child,
.hg-sheet .ig-dist thead th:last-child {
  background: #b38e5d;
  color: #fff;
}

.hg-sheet .ig-summary tbody td:last-child,
.hg-sheet .ig-dist tbody td:last-child {
  background: #fbf6ec !important;
  color: #8a6a3a;
}

.hg-sheet .ig-summary tbody tr:first-child td:last-child {
  background: #fde2e7 !important;
  color: #9d2449;
}

.hg-sheet .ig-dist tbody td {
  font-weight: 700;
}

.hg-sheet .ig-grid thead th.ig-prom,
.hg-sheet .ig-grid thead th.ig-rep,
.hg-sheet .ig-grid thead th.ig-n,
.hg-sheet .ig-grid thead th.ig-name {
  background: #1d2230 !important;
  color: #fff;
}

.hg-sheet .ig-grid tbody td.ig-name {
  font-weight: 500;
}

.hg-sheet .ig-abs .ig-foot :is(th, td) {
  font-size: 5.4pt;
  letter-spacing: -0.03em;
  padding-left: 0;
  padding-right: 0;
}

.hg-sheet .ig-abs .ig-foot th {
  font-size: 6.2pt;
  letter-spacing: 0;
}

/* =========================================================================
   Ajuste final: mismo aspecto que la hoja de Horario personal
   (letra más ligera y espaciada, encabezado oscuro, resumen con cabecera clara,
   celdas marcadas con franja de color como las clases del horario).
   ========================================================================= */
.hg-sheet .ig-grid {
  font-size: 7.4pt;
}

.hg-sheet .ig-grid thead th {
  padding: 1.3mm 0.6mm;
  font-size: 6.6pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: #1d2230;
  color: #fff;
}

.hg-sheet .ig-grid .ig-fields th {
  padding: 0.9mm 0.4mm 1.4mm;
  font-size: 5.8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hg-sheet .ig-grid .ig-fields th:first-child {
  background: #1d2230;
  color: #fff;
}

.hg-sheet .ig-grid:not(.ig-abs) tbody td {
  height: 3.85mm;
  padding: 0 0.6mm;
  font-size: 7.8pt;
  font-weight: 600;
  line-height: 1;
}

.hg-sheet .ig-grid tbody td.ig-name {
  padding-left: 1.8mm;
  font-size: 7pt;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hg-ink);
}

.hg-sheet .ig-grid tbody td.ig-n {
  font-size: 6.6pt;
  font-weight: 600;
  color: var(--hg-soft);
  background: #f5f6f8 !important;
}

.hg-sheet .ig-grid tbody tr:nth-child(even) td {
  background: #fafbfc;
}

/* Reprobada / falta: como una clase del horario (fondo suave con franja a la izquierda). */
.hg-sheet .ig-grid td.ig-fail {
  background: #fdecef !important;
  box-shadow: inset 0.8mm 0 0 #e3647f;
  color: #9d2449;
  font-weight: 700;
}

.hg-sheet .ig-grid tbody td.ig-prom {
  background: #f5f6f8 !important;
  font-weight: 700;
}

.hg-sheet .ig-grid tbody td.ig-prom.ig-fail {
  background: #fdecef !important;
}

.hg-sheet .ig-grid tbody td.ig-rep {
  color: #9d2449;
  font-weight: 700;
}

.hg-sheet .ig-grid .ig-has {
  color: #9d2449;
  font-weight: 700;
}

.hg-sheet .ig-grid tbody td.ig-sub,
.hg-sheet .ig-grid tbody td.ig-allcell,
.hg-sheet .ig-grid tbody td.ig-total {
  background: #f5f6f8 !important;
  color: var(--hg-ink);
  font-weight: 700;
}

.hg-sheet .ig-grid thead th.ig-allhead,
.hg-sheet .ig-grid thead th.ig-total {
  background: #1d2230 !important;
  color: #fff;
}

.hg-sheet .ig-grid .ig-months th {
  background: #eceef2;
  color: var(--hg-ink);
  font-weight: 700;
  letter-spacing: 0;
}

/* Totales del grupo: renglón oscuro como el total del horario personal. */
.hg-sheet .ig-grid .ig-foot tr:first-child :is(th, td) {
  background: #1d2230 !important;
  color: #fff;
  border-top: 0;
  border-right-color: #3a4152;
  font-weight: 700;
}

.hg-sheet .ig-grid .ig-foot .ig-classes :is(th, td) {
  background: #fff !important;
  color: var(--hg-soft);
  font-weight: 500;
}

/* Resumen y materias reprobadas: cabecera clara como el resumen de asignaturas del horario. */
.hg-sheet :is(.ig-summary, .ig-dist) {
  font-size: 7pt;
}

.hg-sheet :is(.ig-summary, .ig-dist) thead th,
.hg-sheet .ig-summary thead th:last-child,
.hg-sheet .ig-dist thead th:first-child,
.hg-sheet .ig-dist thead th:last-child {
  padding: 1mm 0.6mm;
  background: #eceef2;
  color: var(--hg-ink);
  font-size: 6.6pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-right-color: var(--hg-line);
  border-bottom-color: var(--hg-line);
}

.hg-sheet :is(.ig-summary, .ig-dist) tbody :is(th, td) {
  padding: 0.9mm 0.6mm;
  font-weight: 500;
  background: #fff;
  color: var(--hg-ink);
}

.hg-sheet :is(.ig-summary, .ig-dist) tbody th {
  padding-left: 1.8mm;
  text-align: left;
  font-weight: 600;
  background: #fff;
}

.hg-sheet .ig-summary tbody tr:nth-child(even) :is(th, td) {
  background: #fafbfc;
}

.hg-sheet .ig-summary tbody tr:first-child :is(th, td),
.hg-sheet .ig-summary tbody tr:first-child td:last-child {
  background: #fdecef !important;
  color: #9d2449;
  font-weight: 700;
}

.hg-sheet .ig-summary tbody td:last-child,
.hg-sheet .ig-dist tbody td:last-child {
  background: #1d2230 !important;
  color: #fff;
  font-weight: 700;
}

.hg-sheet .ig-summary tbody tr:first-child td:last-child {
  background: #9d2449 !important;
  color: #fff;
}

.hg-sheet .ig-dist tbody td {
  font-weight: 700;
}

.hg-sheet :is(.ig-summary, .ig-dist) tbody :is(th, td) {
  padding-top: 0.55mm;
  padding-bottom: 0.55mm;
}

.hg-sheet :is(.ig-summary, .ig-dist) thead th {
  padding-top: 0.7mm;
  padding-bottom: 0.7mm;
}

.hg-sheet .ig-grid:not(.ig-abs) thead th {
  padding-top: 1mm;
  padding-bottom: 1mm;
}

.ig-sheet .hg-title {
  padding: 1.4mm 3.5mm;
}

.ig-sheet .hg-title h3 {
  font-size: 14pt;
}

.ig-sheet .hg-title li {
  padding: 0.8mm 2.2mm;
}

.ig-sheet .hg-signs .hg-line {
  margin-top: 5.5mm;
}

.ig-sheet .hg-signs {
  margin-top: 2mm;
}

.hg-sheet .ig-one tbody td.ig-dates {
  padding-left: 1.5mm;
  font-weight: 500;
  font-size: 6.8pt;
  color: var(--hg-soft);
}

/* ---------- Pie de página: siempre abajo y del ancho exacto de la hoja ---------- */
.ig-sheet .hg-signs {
  margin-top: auto;
  padding-top: 4mm;
}

.ig-sheet .hg-foot {
  margin-left: -13mm;
  margin-right: -13mm;
  padding-left: 13mm;
  padding-right: 13mm;
}

.ig-sheet--h .hg-foot {
  margin-left: -10mm;
  margin-right: -10mm;
  padding-left: 10mm;
  padding-right: 10mm;
}

@media print {
  .ig-sheet .hg-foot {
    margin-left: -12mm;
    margin-right: -12mm;
    padding-left: 12mm;
    padding-right: 12mm;
  }

  .ig-sheet--h .hg-foot {
    margin-left: -9mm !important;
    margin-right: -9mm !important;
    padding-left: 9mm;
    padding-right: 9mm;
  }

  .ig-sheet {
    min-height: 277mm !important;
  }

  .ig-sheet--h {
    min-height: 213.5mm !important;
  }
}

.ig-sheet--h .hg-signs {
  padding-top: 1.5mm;
}

@media print {
  .ig-sheet--h {
    min-height: 212mm !important;
  }
}

/* Igual que el Horario personal: cabecera de tabla #1d2230 (azul muy oscuro, no negro),
   resumen con cabecera clara y total en #1d2230. */
.hg-sheet .ig-grid thead th,
.hg-sheet .ig-grid .ig-fields th:first-child,
.hg-sheet .ig-grid thead th.ig-prom,
.hg-sheet .ig-grid thead th.ig-rep,
.hg-sheet .ig-grid thead th.ig-allhead,
.hg-sheet .ig-grid thead th.ig-total {
  background: #1d2230 !important;
  color: #fff !important;
  border-right-color: #353b4a;
  border-bottom-color: #353b4a;
}

.hg-sheet .ig-grid .ig-fields th:not(:first-child) {
  border-right-color: #fff;
}

.hg-sheet .ig-grid .ig-months th {
  background: #eceef2 !important;
  color: #1d2230 !important;
}

/* =========================================================================
   Textos que encajan en sus recuadros (nada cortado ni encimado)
   ========================================================================= */
.hg-sheet .ig-grid :is(th, td) {
  text-overflow: clip;
}

/* Campos formativos: pueden ocupar dos renglones. */
.hg-sheet .ig-grid .ig-fields th {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.12;
  padding: 0.8mm 0.8mm 1.3mm;
  vertical-align: middle;
}

/* Nombres completos: si uno es muy largo baja a un segundo renglón en lugar de cortarse. */
.hg-sheet .ig-grid tbody td.ig-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
  padding-top: 0.25mm;
  padding-bottom: 0.25mm;
}

/* Abreviaturas de asignaturas: sin cortar. */
.hg-sheet .ig-grid thead th {
  white-space: nowrap;
  overflow: visible;
}

/* Inasistencias: meses en vertical para que quepan completos. */
.hg-sheet .ig-abs .ig-months th,
.hg-sheet .ig-abs thead th.ig-allhead[rowspan] {
  height: 8mm;
  padding: 0.6mm 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 5.6pt;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

.hg-sheet .ig-abs thead th.ig-total[rowspan] {
  font-size: 5.6pt;
  letter-spacing: 0.04em;
  padding: 0 0.3mm;
}

.hg-sheet .ig-abs col.c-name {
  width: 54mm;
}
.hg-sheet .ig-abs col.c-n {
  width: 5mm;
}
.hg-sheet .ig-abs col.c-sub {
  width: 4.4mm;
}
.hg-sheet .ig-abs col.c-total {
  width: 9mm;
}

.hg-sheet .ig-abs tbody td.ig-name,
.hg-sheet .ig-abs thead th.ig-name {
  font-size: 6pt;
}

.hg-sheet .ig-abs tbody td {
  font-size: 6.2pt;
  padding-left: 0;
  padding-right: 0;
}

/* Totales del grupo: números completos. */
.hg-sheet .ig-abs .ig-foot td {
  font-size: 5.4pt;
  letter-spacing: -0.04em;
  padding: 0.4mm 0;
  white-space: nowrap;
  overflow: visible;
}

.hg-sheet .ig-abs .ig-foot th {
  font-size: 6pt;
  white-space: nowrap;
}

/* Calificaciones: número y franja rosa sin recorrer el número. */
.hg-sheet .ig-grid td.ig-fail {
  box-shadow: inset 0.7mm 0 0 #e3647f;
  padding-left: 0.7mm;
}

/* Resumen: etiquetas completas. */
.hg-sheet .ig-summary col.c-label {
  width: 40mm;
}

.hg-sheet :is(.ig-summary, .ig-dist) :is(th, td) {
  white-space: nowrap;
  overflow: visible;
}

.hg-sheet .ig-dist thead th:first-child,
.hg-sheet .ig-dist tbody th {
  width: 50mm;
}

.hg-sheet .ig-dist thead th:last-child,
.hg-sheet .ig-dist tbody td:last-child {
  width: 42mm;
}

/* Una asignatura: fechas en varios renglones si hace falta. */
.hg-sheet .ig-one tbody td.ig-dates {
  white-space: normal;
  line-height: 1.1;
}

.hg-sheet .ig-one thead th.ig-pct,
.hg-sheet .ig-one thead th.ig-dates {
  letter-spacing: 0.04em;
}

/* Ajuste fino para que cada hoja quepa en una sola página. */
.hg-sheet .ig-grid tbody td {
  padding-top: 0.15mm;
  padding-bottom: 0.15mm;
  line-height: 1.05;
}

.hg-sheet .ig-grid .ig-fields th {
  padding: 0.5mm 0.8mm 0.8mm;
}

.hg-sheet .ig-abs .ig-months th,
.hg-sheet .ig-abs thead th.ig-allhead[rowspan] {
  height: 6.6mm;
  padding: 0.3mm 0;
}

.ig-sheet--h .hg-title {
  margin-top: 1.5mm;
  margin-bottom: 1.5mm;
  padding-top: 1.5mm;
  padding-bottom: 1.5mm;
}

.ig-sheet--h .hg-signs {
  padding-top: 2mm;
}

.hg-sheet .ig-abs tbody td,
.hg-sheet .ig-abs tbody th {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.hg-sheet .ig-grid:not(.ig-abs) tbody td {
  height: 3.7mm;
}

.hg-sheet .ig-abs tbody td {
  height: 2.8mm;
}

.ig-sheet--h .hg-meta {
  margin-bottom: 1mm;
}

.ig-sheet--h .ig-grid {
  margin-bottom: 2mm;
}

.ig-sheet--h .hg-foot {
  margin-top: 1mm;
}

.hg-sheet .ig-abs tbody td.ig-name {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.hg-sheet .ig-abs tbody td.ig-n {
  font-size: 6pt;
  line-height: 1;
}

/* =========================================================================
   Listado de alumnos
   ========================================================================= */
.ig-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ig-app .hg-filters label.ig-wide {
  flex: 2 1 260px;
}

.ig-app .hg-filters label em {
  color: var(--color-ash);
  font-style: normal;
  font-weight: 400;
  opacity: 0.8;
}

.ig-fields-pick {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ig-fields-pick legend {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: var(--color-ash);
  font-size: 13px;
  font-weight: 600;
}

.ig-app .hg-filters .ig-fields-pick label {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--edge-hairline);
  border-radius: 999px;
  font-weight: 500;
  cursor: pointer;
}

.ig-app .hg-filters .ig-fields-pick label:has(input:checked) {
  border-color: var(--accion, #2563eb);
  background: rgba(37, 99, 235, 0.14);
}

.ig-app .hg-filters .ig-fields-pick input {
  width: 16px;
  min-height: 0;
  height: 16px;
  margin: 0;
  accent-color: var(--accion, #2563eb);
}

/* Hoja del listado */
.ig-sheet--list .hg-foot {
  margin-top: auto;
}

.ig-sheet--list .ig-grid {
  margin-bottom: 4mm;
}

.hg-sheet .ig-grid.ig-list tbody td {
  height: var(--ig-row, 4.4mm);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 7.6pt;
  line-height: 1;
  white-space: nowrap;
}

.hg-sheet .ig-grid.ig-list.ig-list--tight tbody td {
  font-size: 6.8pt;
}

.hg-sheet .ig-list tbody td.ig-name {
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}

.hg-sheet .ig-list tbody td.ig-d {
  padding-left: 1mm;
  padding-right: 1mm;
  font-variant-numeric: tabular-nums;
}

.hg-sheet .ig-list tbody td.ig-d--tutor {
  overflow: hidden;
  font-size: 6.6pt;
  text-align: left;
}

.hg-sheet .ig-list tbody td.ig-d--curp {
  font-size: 6.8pt;
  letter-spacing: 0.02em;
}

.hg-sheet .ig-list thead th {
  white-space: normal;
  line-height: 1.1;
}

.hg-sheet .ig-list thead th.ig-blank {
  height: 9mm;
  background: #eceef2;
  border-left: 0.5pt solid #c9ced6;
}

.hg-sheet .ig-list .ig-list-top th {
  background: #fff;
  border: 0;
}

.hg-sheet .ig-list .ig-list-top th[colspan]:last-child {
  background: #1d2230;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hg-sheet .ig-list tbody td:not(.ig-n):not(.ig-name):not(.ig-d) {
  border-left: 0.5pt solid #c9ced6;
}

.hg-sheet .ig-grid.ig-list tbody td.ig-d {
  font-weight: 500;
}

.ig-app .hg-filters label.ig-narrow {
  flex: 0 1 150px;
}

.ig-app .hg-filters label.ig-wide {
  flex: 1.4 1 200px;
}

.ig-app .hg-filters:has(.ig-fields-pick) > label:not(.ig-narrow):not(.ig-wide):not(.hg-group-field) {
  flex: 1 1 120px;
}

/* Inasistencias por asignatura · «Los 3 trimestres»: columnas por trimestre */
.hg-sheet .ig-one col.c-term {
  width: 17mm;
}

/* Lista de docentes: asignaturas y grupos pueden ocupar dos renglones */
.hg-sheet .ig-grid.ig-list.ig-list--wrap tbody td.ig-d--asignaturas,
.hg-sheet .ig-grid.ig-list.ig-list--wrap tbody td.ig-d--grupos,
.hg-sheet .ig-grid.ig-list.ig-list--wrap tbody td.ig-d--correo {
  padding-top: 0.2mm;
  padding-bottom: 0.2mm;
  font-size: 6.6pt;
  line-height: 1.08;
  text-align: left;
  white-space: normal;
}

.hg-sheet .ig-grid.ig-list.ig-list--wrap tbody td.ig-d--correo {
  overflow-wrap: anywhere;
  font-size: 6.2pt;
}

/* =========================================================================
   5. PÁGINA · Actas de calificaciones (hojas impresas)
   ========================================================================= */
@media print {
  /* Hojas del acta repartidas desde PHP: cada salto es explícito y los renglones tienen alto fijo. */
  .ap-break {
    height: 0;
    break-before: page;
    page-break-before: always;
  }

  .ap-list tbody tr > td {
    height: 4.6mm;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    white-space: nowrap;
  }

  .ap-list td small {
    display: inline;
    margin-left: 0.8mm;
  }

  .ap-list td.l {
    overflow: hidden;
    text-overflow: clip;
  }

  .ap-list td.l.long {
    font-size: 7pt;
    letter-spacing: -0.01em;
  }

  .ap-list td.empty {
    height: auto;
    padding: 5mm;
  }

  .ap-title--cont {
    margin-top: 0;
  }

  .ap-title--cont span {
    font-size: 8.5pt;
  }

  .ap-title--cont b {
    font-size: 8pt;
  }

  .ap-signs {
    margin-top: 6mm;
  }
}

/* =========================================================================
   5. PÁGINA · Informes (menú por categorías)
   ========================================================================= */
/* Informes: las tarjetas de siempre, separadas por el título de su categoría. */
.inf-menu {
  display: grid;
  gap: 14px;
}

.inf-menu > .inf-cat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  color: #edf1fb;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inf-menu > .inf-cat-title:first-child {
  margin-top: 0;
}

.inf-menu > .inf-cat-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #2d3443;
}

/* Tarjeta «Listado de alumnos» */
.inf-cards .inf-card--list {
  border-color: rgba(217, 154, 43, 0.55);
  background: linear-gradient(135deg, rgba(217, 154, 43, 0.2), rgba(217, 154, 43, 0.05));
}

/* Botón «Descargar Excel» junto a «Imprimir / Guardar PDF» */
.inf-actions .inf-xlsx {
  border: 1px solid #3a4150;
  background: #1a1f29;
  color: #edf1fb;
}

.inf-actions .inf-xlsx:hover,
.inf-actions .inf-xlsx:focus-visible {
  border-color: #8ab4ff;
  background: #202634;
}

/* =========================================================================
   5. PÁGINA · Padres y tutores (editar)
   ========================================================================= */
/* Botón «Editar datos» debajo del nombre del tutor */
.tutor-name-cell .tutor-edit-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 32px;
  margin-top: 4px;
  padding: 0 12px;
  border: 1px solid var(--edge-hairline, #3a4150);
  border-radius: 999px;
  background: transparent;
  color: #8ab4ff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tutor-name-cell .tutor-edit-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.tutor-name-cell .tutor-edit-btn:hover,
.tutor-name-cell .tutor-edit-btn:focus-visible {
  border-color: #8ab4ff;
  background: rgba(37, 99, 235, 0.14);
}

.tutor-edit-note {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #d99a2b;
  border-radius: 8px;
  background: rgba(217, 154, 43, 0.12);
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================================
   5. PÁGINA · Panel docente
   ========================================================================= */
/* Panel docente (dashboard.php para docentes) */
.pd-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, 0.55), transparent 55%),
    linear-gradient(120deg, #f0a35e 0%, #d9675f 38%, #7b5ea7 70%, #2f6fdc 100%);
  color: #fff;
}

.pd-hero-text {
  min-width: 0;
  flex: 1 1 380px;
}

.pd-hero small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pd-hero h2 {
  margin: 8px 0 6px;
  color: #fff;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pd-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.5;
}

.pd-hero p b {
  color: #fff;
}

.pd-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px !important;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 18, 26, 0.35);
  font-size: 14px !important;
}

.pd-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.3);
}

.pd-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.pd-actions a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 10px;
  border-radius: 14px;
  background: #fff;
  color: #1d2230;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.pd-actions a:hover,
.pd-actions a:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.pd-actions i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eef2fb;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

/* Indicadores */
.pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.pd-kpi {
  --k: #8ab4ff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid #2d3443;
  border-left: 3px solid var(--k);
  border-radius: 16px;
  background: #171b23;
}

.pd-kpi--green {
  --k: #34d399;
}
.pd-kpi--violet {
  --k: #b4a7ff;
}
.pd-kpi--amber {
  --k: #f5b454;
}

.pd-kpi small {
  color: #aebbd2;
  font-size: 13px;
  font-weight: 600;
}

.pd-kpi strong {
  color: #edf1fb;
  font-size: 32px;
  line-height: 1.1;
}

.pd-kpi span {
  color: #9aa6bd;
  font-size: 13px;
  line-height: 1.4;
}

.pd-meter {
  display: block;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #2a3140;
}

.pd-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--k, #b4a7ff);
}

/* Tarjetas */
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.pd-grid--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-card {
  min-width: 0;
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid #2d3443;
  border-radius: 18px;
  background: #171b23;
}

.pd-grid > .pd-card {
  margin-top: 0;
}

.pd-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.pd-card-head h3 {
  margin: 0 0 3px;
  color: #edf1fb;
  font-size: 18px;
}

.pd-card-head p {
  margin: 0;
  color: #9aa6bd;
  font-size: 13px;
  line-height: 1.45;
}

.pd-card-head > a {
  flex: none;
  color: #8ab4ff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pd-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #34405a;
  border-radius: 10px;
  color: #8ab4ff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pd-link:hover,
.pd-link:focus-visible {
  border-color: #8ab4ff;
  background: rgba(37, 99, 235, 0.14);
}

.pd-empty,
.pd-note,
.pd-more {
  margin: 0;
  color: #9aa6bd;
  font-size: 14px;
  line-height: 1.5;
}

.pd-empty--ok {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.1);
  color: #b9ecd6;
}

.pd-note {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-left: 3px solid #f5b454;
  border-radius: 8px;
  background: rgba(245, 180, 84, 0.1);
}

.pd-more {
  margin-top: 10px;
  font-size: 13px;
}

/* Mi día */
.pd-timeline {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-class {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #2a3140;
  border-radius: 12px;
  background: #1a1f29;
}

.pd-class time {
  display: flex;
  flex-direction: column;
  color: #edf1fb;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-class time small {
  color: #7f8aa1;
  font-size: 12px;
  font-weight: 500;
}

.pd-class-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pd-class-body b {
  overflow: hidden;
  color: #edf1fb;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-class-body span {
  color: #9aa6bd;
  font-size: 12.5px;
}

.pd-state {
  padding: 3px 10px;
  border-radius: 99px;
  background: #242b38;
  color: #aebbd2;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pd-class.is-now {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(52, 211, 153, 0.08);
}

.pd-class.is-now .pd-state {
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
}

.pd-class.is-done {
  opacity: 0.72;
}

.pd-class.is-next .pd-state {
  background: rgba(37, 99, 235, 0.18);
  color: #a9c7ff;
}

.pd-abs {
  color: #9aa6bd;
  font-size: 12.5px;
  white-space: nowrap;
}

.pd-abs.has {
  color: #fbbf77;
  font-weight: 700;
}

/* Captura */
.pd-progress {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-progress li {
  --k: #b4a7ff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid #2a3140;
  border-radius: 12px;
  background: #1a1f29;
}

.pd-progress li.is-complete {
  --k: #34d399;
}

.pd-progress li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.pd-progress b {
  overflow: hidden;
  color: #edf1fb;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-progress span {
  flex: none;
  color: #9aa6bd;
  font-size: 12.5px;
}

.pd-progress .pd-meter {
  grid-column: 1;
  margin-top: 0;
}

.pd-progress .pd-link {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Atención */
.pd-table {
  width: 100%;
  border-collapse: collapse;
}

.pd-table th {
  padding: 8px 10px;
  border-bottom: 1px solid #2d3443;
  color: #9aa6bd;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.pd-table td {
  padding: 10px;
  border-bottom: 1px solid #242b38;
  color: #d6ddea;
  font-size: 14px;
  vertical-align: middle;
}

.pd-table tr:last-child td {
  border-bottom: 0;
}

.pd-table .n {
  text-align: center;
  white-space: nowrap;
}

.pd-table td.n small {
  display: block;
  margin-top: 2px;
  color: #7f8aa1;
  font-size: 11.5px;
}

.pd-pill {
  display: inline-block;
  min-width: 34px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.pd-pill--amber {
  background: rgba(245, 180, 84, 0.18);
  color: #fbc77a;
}
.pd-pill--red {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
.pd-pill--ok {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
}

.pd-row-actions {
  text-align: right;
  white-space: nowrap;
}

.pd-row-actions .pd-link + .pd-link {
  margin-left: 6px;
}

/* Mi semana */
.pd-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.pd-weekday {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #2a3140;
  border-radius: 14px;
  background: #1a1f29;
}

.pd-weekday.is-today {
  border-color: rgba(138, 180, 255, 0.7);
  box-shadow: inset 0 3px 0 #8ab4ff;
}

.pd-weekday h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 2px 4px;
  color: #edf1fb;
  font-size: 14px;
}

.pd-weekday h4 small {
  color: #7f8aa1;
  font-size: 12px;
}

.pd-slot {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 9px;
  background: #222836;
}

.pd-slot time {
  color: #8ab4ff;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-slot b {
  color: #edf1fb;
  font-size: 13px;
}

.pd-slot span {
  overflow: hidden;
  color: #9aa6bd;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-off {
  margin: 0;
  padding: 8px;
  color: #7f8aa1;
  font-size: 12.5px;
}

/* Reportes y citatorios */
.pd-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #2a3140;
  border-radius: 12px;
  background: #1a1f29;
}

.pd-list li > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pd-list b {
  overflow: hidden;
  color: #edf1fb;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-list span {
  color: #9aa6bd;
  font-size: 12.5px;
}

.pd-status {
  flex: none;
  padding: 3px 10px;
  border-radius: 99px;
  background: #242b38;
  color: #d6ddea !important;
  font-weight: 600;
}

/* Responsivo */
@media (max-width: 1180px) {
  .pd-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-grid,
  .pd-grid--even {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-week {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

@media (max-width: 640px) {
  .pd-hero {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .pd-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-actions a {
    font-size: 14px;
  }

  .pd-kpis {
    gap: 10px;
  }

  .pd-kpi {
    padding: 14px;
  }

  .pd-kpi strong {
    font-size: 26px;
  }

  .pd-card {
    padding: 16px 14px;
  }

  .pd-class {
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }

  .pd-class .pd-abs {
    grid-column: 2;
  }

  .pd-class .pd-link {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .pd-class .pd-state {
    grid-column: 3;
    grid-row: 1;
    display: none;
  }

  .pd-table thead {
    display: none;
  }

  .pd-table tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid #242b38;
  }

  .pd-table td {
    padding: 0;
    border: 0;
  }

  .pd-table td:first-child,
  .pd-table td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .pd-table td:nth-child(2) {
    color: #9aa6bd;
    font-size: 13px;
  }

  .pd-table td.pd-row-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    margin-top: 4px;
    text-align: left;
  }

  .pd-row-actions .pd-link {
    flex: 1;
    justify-content: center;
  }

  .pd-row-actions .pd-link + .pd-link {
    margin-left: 0;
  }

  .pd-table td.n {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .pd-table td.n small {
    margin: 0;
  }

  .pd-progress b {
    white-space: normal;
  }

  .pd-week {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-slot {
    grid-template-columns: 88px 42px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }
}

/* =========================================================================
   5. PÁGINA · Expediente del alumno (consulta integral)
   ========================================================================= */
/* Expediente del alumno: consulta integral */
.exp-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 99px;
  background: #f5b454;
  color: #1d2230;
  font-size: 11px;
  font-weight: 800;
}

.exp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}

.exp-kpi {
  --k: #7f8aa1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #2d3443;
  border-left: 3px solid var(--k);
  border-radius: 14px;
  background: #1a1f29;
}

.exp-kpi--blue {
  --k: #8ab4ff;
}
.exp-kpi--red {
  --k: #f87171;
}
.exp-kpi--green {
  --k: #34d399;
}
.exp-kpi--amber {
  --k: #f5b454;
}
.exp-kpi--violet {
  --k: #b4a7ff;
}

.exp-kpi small {
  color: #aebbd2;
  font-size: 12.5px;
  font-weight: 600;
}

.exp-kpi strong {
  color: #edf1fb;
  font-size: 28px;
  line-height: 1.15;
}

.exp-kpi strong.is-fail {
  color: #fca5a5;
}

.exp-kpi strong.exp-kpi-small {
  font-size: 18px;
}

.exp-kpi span {
  color: #9aa6bd;
  font-size: 12.5px;
  line-height: 1.4;
}

.exp-overview,
.exp-two {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.exp-box {
  min-width: 0;
  padding: 16px;
  border: 1px solid #2d3443;
  border-radius: 14px;
  background: #171b23;
}

.exp-box h4,
.exp-subtitle {
  margin: 0 0 10px;
  color: #edf1fb;
  font-size: 15px;
}

.exp-box h4:not(:first-child) {
  margin-top: 16px;
}

.exp-subtitle {
  margin: 18px 0 10px;
}

.exp-alerts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp-alerts li {
  --a: #8ab4ff;
  padding: 9px 12px;
  border-left: 3px solid var(--a);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #d6ddea;
  font-size: 14px;
  line-height: 1.45;
}

.exp-alerts li.is-red {
  --a: #f87171;
}
.exp-alerts li.is-amber {
  --a: #f5b454;
}
.exp-alerts li.is-violet {
  --a: #b4a7ff;
}

.exp-ok {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.1);
  color: #b9ecd6;
  font-size: 14px;
}

.exp-contacts,
.exp-entries,
.exp-incidents {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp-contacts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid #2a3140;
  border-radius: 10px;
  background: #1a1f29;
}

.exp-contacts b {
  color: #edf1fb;
  font-size: 14px;
}

.exp-contacts span {
  color: #9aa6bd;
  font-size: 12.5px;
}

.exp-contacts a {
  color: #8ab4ff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.exp-muted {
  margin: 0;
  color: #7f8aa1;
  font-size: 13.5px;
}

.exp-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.exp-cycle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #aebbd2;
  font-size: 12px;
  font-weight: 600;
}

.exp-cycle select {
  min-height: 40px;
}

/* Tablas */
.exp-table {
  width: 100%;
  border-collapse: collapse;
}

.exp-table th,
.exp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #242b38;
  color: #d6ddea;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
}

.exp-table thead th {
  border-bottom: 1px solid #2d3443;
  color: #9aa6bd;
  font-size: 12px;
  font-weight: 600;
}

.exp-table td small,
.exp-table th small {
  display: block;
  margin-top: 2px;
  color: #7f8aa1;
  font-size: 11.5px;
  font-weight: 500;
}

.exp-table .n {
  text-align: center;
  white-space: nowrap;
}

.exp-table tfoot th,
.exp-table tfoot td {
  border-top: 1px solid #2d3443;
  border-bottom: 0;
  color: #edf1fb;
}

.exp-table--compact th,
.exp-table--compact td {
  padding: 7px 8px;
  font-size: 13px;
}

.exp-table td.is-warn {
  color: #fbc77a;
  font-weight: 800;
}

.exp-grade {
  display: inline-block;
  min-width: 36px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
  font-weight: 800;
}

.exp-grade.is-fail {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

.exp-grade.is-empty {
  background: transparent;
  color: #7f8aa1;
  font-weight: 500;
}

.exp-grade--final {
  outline: 1px solid rgba(138, 180, 255, 0.35);
}

.exp-note {
  margin: 10px 0 0;
  color: #7f8aa1;
  font-size: 12.5px;
}

/* Asistencia */
.exp-att-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.exp-att {
  --a: #7f8aa1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid #2d3443;
  border-top: 3px solid var(--a);
  border-radius: 12px;
  background: #1a1f29;
}

.exp-att.is-green {
  --a: #34d399;
}
.exp-att.is-amber {
  --a: #f5b454;
}
.exp-att.is-red {
  --a: #f87171;
}
.exp-att.is-blue {
  --a: #8ab4ff;
}
.exp-att.is-violet {
  --a: #b4a7ff;
}

.exp-att strong {
  color: #edf1fb;
  font-size: 24px;
}

.exp-att small {
  color: #9aa6bd;
  font-size: 12px;
  text-align: center;
}

.exp-entries li,
.exp-incidents li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #1a1f29;
  font-size: 13px;
}

.exp-entries span,
.exp-incidents span {
  min-width: 82px;
  color: #9aa6bd;
  font-variant-numeric: tabular-nums;
}

.exp-entries b {
  color: #edf1fb;
}

.exp-incidents b {
  color: #d6ddea;
}
.exp-incidents b.st-I {
  color: #fca5a5;
}
.exp-incidents b.st-R {
  color: #fbc77a;
}
.exp-incidents b.st-J {
  color: #a9c7ff;
}

.exp-incidents small {
  color: #7f8aa1;
}

.exp-incidents em {
  flex-basis: 100%;
  color: #9aa6bd;
  font-size: 12px;
  font-style: normal;
}

/* Asignaturas y horario */
.exp-subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.exp-subjects article {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid #2a3140;
  border-radius: 12px;
  background: #1a1f29;
}

.exp-subjects b {
  color: #edf1fb;
  font-size: 14px;
}

.exp-subjects span {
  color: #aebbd2;
  font-size: 13px;
}

.exp-subjects small {
  color: #7f8aa1;
  font-size: 12px;
}

.exp-schedule th[scope="row"] {
  width: 80px;
  color: #edf1fb;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exp-schedule td b {
  display: block;
  color: #edf1fb;
  font-size: 13px;
}

.exp-schedule td small {
  color: #9aa6bd;
}

/* Reportes y citatorios */
.exp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.exp-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #2a3140;
  border-radius: 12px;
  background: #1a1f29;
}

.exp-item.is-open {
  border-color: rgba(245, 180, 84, 0.5);
}

.exp-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.exp-item header b {
  color: #edf1fb;
  font-size: 14px;
}

.exp-item > small {
  color: #9aa6bd;
  font-size: 12.5px;
}

.exp-item p {
  margin: 0;
  color: #d6ddea;
  font-size: 13.5px;
  line-height: 1.5;
}

.exp-item .exp-agree {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #c9d2e3;
}

@media (max-width: 980px) {
  .exp-overview,
  .exp-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .exp-att-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .exp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exp-kpi strong {
    font-size: 22px;
  }

  .exp-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .exp-table th,
  .exp-table td {
    padding: 8px 6px;
    font-size: 13px;
  }
}

/* ==========================================================================
   7. BOTONES, LECTURA Y MODALES — un mismo criterio en todas las páginas
   --------------------------------------------------------------------------
   Pensado para personas adultas que no usan computadora todos los días:
   · Azul lleno  = acción principal (Guardar, Crear, Buscar, Imprimir).
   · Gris con borde blanco = acción secundaria (Cancelar, Ver, Limpiar).
   · Rojo lleno  = eliminar o anular.
   · Todos miden al menos 44 px de alto, con letra de 15-16 px en negritas.
   · «← Regresar» vive en la barra superior y «✕ Cerrar» en la cabecera de
     cada ventana: las dos se quedan a la vista aunque se baje en la página.
   ========================================================================== */

/* ---------- Foco visible al usar el teclado ---------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ---------- Botón «Regresar» en la barra superior (siempre visible) ---------- */
.main > header .btn-back {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  font-size: 15px;
}

.main > header .btn-back > span:first-child {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 700px) {
  /* En teléfono solo cabe la flecha y la palabra «Regresar». */
  .main > header .btn-back {
    padding: 8px 12px;
  }

  .main > header .btn-back > span:last-child {
    font-size: 0;
  }

  .main > header .btn-back > span:last-child::after {
    content: "Regresar";
    font-size: 15px;
  }
}

/* ---------- Ventanas (modales): centradas y con «Cerrar» siempre a la vista ---------- */
dialog[open] {
  inset: 0;
  margin: auto;
}

dialog :is(.dialog-head, .attendance-dialog-head, .oa-modalhead):not(.modal-simple-head),
.permission-modal > .panel-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--surface-graphite);
}

.oa.oa-dialog .oa-modalhead {
  top: -28px;
  margin: -28px -28px 22px;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--edge-hairline);
  background: var(--oa-panel, var(--surface-graphite));
}

@media (max-width: 700px) {
  .oa.oa-dialog .oa-modalhead {
    top: -18px;
    margin: -18px -18px 18px;
    padding: 16px 18px 12px;
  }
}

/* El botón de cerrar se lee como botón: «✕ Cerrar». */
.dialog-close,
.attendance-icon-button,
.dialog-head [data-close],
.attendance-dialog-head [data-close],
.oa [data-oa-close] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1.5px solid var(--boton-2-borde);
  border-radius: var(--boton-radio);
  background: var(--boton-2);
  color: var(--color-snow-white);
  font-family: var(--font-dm-sans);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.dialog-close:hover,
.attendance-icon-button:hover,
.dialog-head [data-close]:hover,
.attendance-dialog-head [data-close]:hover,
.oa [data-oa-close]:hover {
  background: var(--boton-2-hover);
  border-color: var(--boton-2-borde-hover);
  color: var(--color-snow-white);
}

.dialog-close > span[aria-hidden],
.attendance-icon-button > span[aria-hidden],
.oa [data-oa-close] > span[aria-hidden] {
  font-size: 14px;
}

/* Botones del pie de las ventanas: tamaño cómodo. */
dialog .form-actions .btn,
dialog .form-actions button,
.attendance-dialog-actions button {
  min-height: var(--boton-alto);
}

/* Sobre las franjas de color de cada módulo, la acción principal va en blanco
   para que resalte más que el fondo. */
.module-banner .btn.primary,
.module-banner .attendance-primary {
  background: var(--color-snow-white);
  border-color: var(--color-snow-white);
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.module-banner .btn.primary:hover,
.module-banner .attendance-primary:hover {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #0f172a;
}

/* ---------- Credenciales: la tarjeta es blanca, así que su texto va oscuro ---------- */
.student-credential .credential-data dt {
  color: #4b5563;
}

.student-credential .credential-data dd {
  color: #111827;
  font-weight: var(--font-weight-medium);
}

.student-credential .credential-year,
.student-credential .qr-missing {
  color: #4b5563;
}

.student-credential .credential-school small {
  color: #4b5563;
}

/* ---------- Docentes: la tabla de carga académica cabe completa ---------- */
.teacher-main .teacher-load-table {
  min-width: 0;
  table-layout: fixed;
}

.teacher-load-table th:nth-child(1) {
  width: 26%;
}
.teacher-load-table th:nth-child(2) {
  width: auto;
}
.teacher-load-table th:nth-child(3) {
  width: 22%;
}
.teacher-load-table th:nth-child(4) {
  width: 84px;
}
.teacher-load-table th:nth-child(5) {
  width: 104px;
}
.teacher-load-table th:nth-child(6) {
  width: 96px;
}

.teacher-load-table td {
  overflow-wrap: anywhere;
}

.teacher-load-table td small {
  display: block;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .teacher-load-table th:nth-child(3),
  .teacher-load-table td:nth-child(3),
  .teacher-load-table th:nth-child(4),
  .teacher-load-table td:nth-child(4) {
    display: none;
  }
}

/* ---------- Registrar inscripción: la cabecera tapa el contenido al desplazarse ---------- */
#enrollmentForm {
  padding-bottom: 0;
}

#enrollmentForm > .modal-simple-head {
  top: -24px;
  margin: -24px -24px 0;
  padding: 20px 24px 16px;
  z-index: 7;
}

@media (max-width: 640px) {
  /* En teléfono la cabecera es alta; el buscador ya no se queda fijo para no encimarse. */
  #enrollmentForm .student-search-container {
    position: relative;
    top: auto;
  }
}

/* ---------- Teléfono: barra superior, encabezados de panel y filtros ---------- */
@media (max-width: 700px) {
  .main > header {
    gap: 8px;
  }

  .main > header > div:not(.user) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main > header > div:not(.user) :is(small, h1) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Con «Regresar» a la vista, el subtítulo sobra en pantallas chicas. */
  .main > header:has(.btn-back) > div:not(.user) small,
  .main > header:has(.btn-back) .user > span {
    display: none;
  }

  .panel-head {
    flex-wrap: wrap;
  }

  .panel-head > .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  /* Llaveros: buscador arriba y los dos filtros lado a lado. */
  .rfid-table-tools {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .rfid-table-tools .table-search-wrap {
    flex: 1 1 100%;
  }

  .rfid-table-tools .rfid-table-filter {
    flex: 1 1 140px;
    height: auto;
  }
}

/* ---------- Impresión: sin menús ni botones de navegación ---------- */
@media print {
  .school-section-tabs,
  .main > header,
  .btn-back {
    display: none !important;
  }
}

/* ---------- Panel global de Redfy: la ventana de cada escuela se desplaza completa ---------- */
.global-dialog-form {
  overflow-y: auto;
}

.global-dialog-form > fieldset {
  flex: 0 0 auto;
  overflow: visible;
}

.global-dialog-form > .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface-graphite);
}

.global-dialog-form > label.token-regenerate {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin: 0 var(--spacing-28) var(--spacing-20);
  padding: 14px 16px;
}

/* ---------- Pequeños ajustes que antes estaban escritos dentro de las páginas ---------- */
.input-upper {
  text-transform: uppercase;
}

.attendance-notify-line {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
}

.attendance-notify-line input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
}

.attendance-notify-line .attendance-muted {
  display: block;
}

.school-brand-spaced {
  margin-bottom: 22px;
}

/* ---------- Portal de familias en teléfono: la barra superior cabe completa ---------- */
@media (max-width: 560px) {
  .parent-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .parent-header .brand-text small {
    display: none;
  }

  .parent-header .parent-user .user-avatar {
    display: none !important;
  }

  .parent-user {
    flex: 1 1 100%;
    justify-content: space-between;
    min-width: 0;
  }

  .parent-user .user-information {
    min-width: 0;
  }

  .parent-user .user-information :is(b, strong, span, small) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------- Botón «Imprimir horario» (Organización académica y Horarios) ---------- */
.oa .oa-groupactions > a.oa-print-link,
#acRoot a.ac-print-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--accion);
  border-radius: var(--boton-radio);
  background: var(--accion);
  color: var(--accion-texto);
  font: 600 15px/1.2 var(--font-dm-sans);
  text-decoration: none;
  white-space: nowrap;
}

.oa .oa-groupactions > a.oa-print-link:hover,
#acRoot a.ac-print-link:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
  color: var(--accion-texto);
}

/* ---------- Padres y tutores: alumno vinculado con su grado y grupo ---------- */
.linked-students .linked-student {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linked-students .linked-student b {
  background: none;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

.linked-students .linked-student small {
  font-size: 12px;
  color: var(--color-ash);
}

.linked-students .linked-student.is-match {
  border-color: var(--accion);
  background: rgba(37, 99, 235, 0.14);
}

.tutor-toolbar label:has(#tutorGroup) {
  flex: 0 1 200px;
}

/* ---------- Catálogo de materias: «Requiere capturar calificaciones» ---------- */
.oa .oa-grades-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--edge-hairline-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.oa .oa-grades-toggle input {
  margin-top: 3px;
}

.oa .oa-grades-toggle span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oa .oa-grades-toggle b {
  font-size: 15px;
  color: var(--color-snow-white);
}

.oa .oa-grades-toggle small {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ash);
}

.oa .oa-nograde {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(217, 154, 43, 0.6);
  border-radius: 999px;
  background: rgba(217, 154, 43, 0.14);
  color: #f5c77a;
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}

/* ==========================================================================
   8. TEMA CLARO / OSCURO GLOBAL
   --------------------------------------------------------------------------
   El sitio inicia en claro. assets/theme.js agrega data-theme="dark" cuando
   el usuario activa el switch y guarda la preferencia en localStorage.
   Estas reglas solo afectan pantalla; la impresión conserva sus estilos.
   ========================================================================== */
@media screen {
  html:not([data-theme="dark"]) {
    color-scheme: light;

    --color-void-canvas: #f3f6fb;
    --color-graphite: #0f172a;
    --color-frosted-glass: #ffffff;
    --color-ink-black: #0f172a;
    --color-bone: #172033;
    --color-ash: #334155;
    --color-slate: #64748b;
    --color-smoke: #475569;
    --color-hairline: #cbd5e1;

    --edge-hairline: rgba(15, 23, 42, 0.13);
    --edge-hairline-strong: rgba(15, 23, 42, 0.24);
    --surface-frosted: rgba(255, 255, 255, 0.92);
    --surface-frosted-soft: rgba(15, 23, 42, 0.035);
    --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.08);

    --surface-void-canvas: #f3f6fb;
    --surface-graphite: #ffffff;
    --surface-snow-white: #ffffff;
    --gradient-radial-spotlight: radial-gradient(120% 70% at 50% -10%, rgba(37, 99, 235, 0.09), rgba(243, 246, 251, 0) 70%);

    --boton-2: #f8fafc;
    --boton-2-hover: #eef2f7;
    --boton-2-borde: #b9c2d0;
    --boton-2-borde-hover: #8b97aa;
    --foco: #2563eb;

    --status-ok: #15803d;
    --status-ok-edge: rgba(21, 128, 61, 0.28);
    --status-ok-fill: rgba(21, 128, 61, 0.09);
    --status-warn: #a16207;
    --status-warn-edge: rgba(161, 98, 7, 0.28);
    --status-warn-fill: rgba(161, 98, 7, 0.09);
    --status-danger: #b91c1c;
    --status-danger-edge: rgba(185, 28, 28, 0.28);
    --status-danger-fill: rgba(185, 28, 28, 0.08);
    --status-info: #1d4ed8;
    --status-info-edge: rgba(29, 78, 216, 0.26);
    --status-info-fill: rgba(29, 78, 216, 0.08);
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  html:not([data-theme="dark"]) body::before {
    opacity: 0.8;
  }

  html:not([data-theme="dark"]) .main > header,
  html:not([data-theme="dark"]) .floating-nav,
  html:not([data-theme="dark"]) .global-main > header,
  html:not([data-theme="dark"]) .parent-header {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
  }

  html:not([data-theme="dark"]) .main > header .user > div b,
  html:not([data-theme="dark"]) .main > header .user > a,
  html:not([data-theme="dark"]) .global-admin a,
  html:not([data-theme="dark"]) .parent-user,
  html:not([data-theme="dark"]) .parent-user a {
    color: var(--color-bone);
  }

  html:not([data-theme="dark"]) .main > header .user > a:hover,
  html:not([data-theme="dark"]) .global-admin a:hover {
    color: #0f172a;
  }

  html:not([data-theme="dark"]) tbody td {
    border-bottom-color: rgba(15, 23, 42, 0.075);
  }

  html:not([data-theme="dark"]) input[type="text"],
  html:not([data-theme="dark"]) input[type="email"],
  html:not([data-theme="dark"]) input[type="password"],
  html:not([data-theme="dark"]) input[type="number"],
  html:not([data-theme="dark"]) input[type="date"],
  html:not([data-theme="dark"]) input[type="datetime-local"],
  html:not([data-theme="dark"]) input[type="month"],
  html:not([data-theme="dark"]) input[type="time"],
  html:not([data-theme="dark"]) input[type="search"],
  html:not([data-theme="dark"]) input[type="tel"],
  html:not([data-theme="dark"]) input[type="url"],
  html:not([data-theme="dark"]) input:not([type]),
  html:not([data-theme="dark"]) textarea,
  html:not([data-theme="dark"]) select {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
  }

  html:not([data-theme="dark"]) :is(input, textarea, select):focus {
    background-color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }

  html:not([data-theme="dark"]) select option,
  html:not([data-theme="dark"]) select optgroup {
    background: #ffffff;
    color: #172033;
  }

  html:not([data-theme="dark"]) input[type="checkbox"],
  html:not([data-theme="dark"]) input[type="radio"] {
    accent-color: #2563eb;
  }

  html:not([data-theme="dark"]) dialog,
  html:not([data-theme="dark"]) dialog :is(.dialog-head, .attendance-dialog-head, .oa-modalhead):not(.modal-simple-head),
  html:not([data-theme="dark"]) .permission-modal > .panel-head,
  html:not([data-theme="dark"]) .global-dialog-form > .form-actions {
    background-color: #ffffff;
    color: #172033;
  }

  html:not([data-theme="dark"]) dialog::backdrop {
    background: rgba(15, 23, 42, 0.42);
  }

  /* Navegación secundaria del panel */
  html:not([data-theme="dark"]) .main > .school-section-tabs {
    background: #ffffff;
    border-color: #d7dee9;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  html:not([data-theme="dark"]) .school-section-tabs a {
    color: #526077;
  }

  html:not([data-theme="dark"]) .school-section-tabs a:hover {
    background: #eef3f9;
    color: #172033;
  }

  html:not([data-theme="dark"]) .school-section-tabs a[aria-current="page"] {
    background: #e8efff;
    border-color: #9db7f5;
    color: #1d4ed8;
  }

  /* Switch global de tema */
  .theme-toggle,
  .theme-toggle-floating {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 5px 10px;
    border: 1px solid var(--edge-hairline-strong);
    border-radius: 999px;
    background: var(--surface-frosted-soft);
    color: var(--color-smoke);
    font-family: var(--font-dm-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .theme-toggle:hover,
  .theme-toggle-floating:hover {
    border-color: var(--edge-hairline-strong);
    background: var(--surface-frosted);
    color: var(--color-bone);
  }

  .theme-toggle-track {
    position: relative;
    width: 34px;
    height: 19px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition: background 160ms ease;
  }

  .theme-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 180ms ease;
  }

  .theme-toggle[aria-pressed="true"] .theme-toggle-track {
    background: #475569;
  }

  .theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
    transform: translateX(15px);
  }

  .theme-toggle-icon {
    font-size: 14px;
    line-height: 1;
  }

  .theme-toggle[aria-pressed="false"] .theme-toggle-sun,
  .theme-toggle[aria-pressed="true"] .theme-toggle-moon {
    color: #d97706;
  }

  .theme-toggle[aria-pressed="true"] .theme-toggle-moon {
    color: #c4b5fd;
  }

  .theme-toggle-text {
    min-width: 42px;
    text-align: left;
  }

  .theme-toggle-floating {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1000;
    background: var(--surface-graphite);
    box-shadow: var(--shadow-subtle);
  }

  /* Login, consola global y portal de familias */
  html:not([data-theme="dark"]) .login-card-modern,
  html:not([data-theme="dark"]) .global-login-card,
  html:not([data-theme="dark"]) .access-box,
  html:not([data-theme="dark"]) .global-side,
  html:not([data-theme="dark"]) .global-admin,
  html:not([data-theme="dark"]) .global-school-card,
  html:not([data-theme="dark"]) .parent-tabs,
  html:not([data-theme="dark"]) .information-item,
  html:not([data-theme="dark"]) .student-hero,
  html:not([data-theme="dark"]) .family-section,
  html:not([data-theme="dark"]) .family-card {
    background-color: #ffffff;
    color: #172033;
  }

  html:not([data-theme="dark"]) .global-login-body {
    background: var(--gradient-radial-spotlight), #f3f6fb;
  }

  html:not([data-theme="dark"]) .global-side nav a.active {
    background: #e8efff;
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]) .global-side nav a:hover {
    background: #eef3f9;
    color: #172033;
  }

  /* Organización académica */
  html:not([data-theme="dark"]) :where(.pg-organizacion_academica) .oa {
    --oa-bg: #f8fafc;
    --oa-panel: #ffffff;
    --oa-line: #d8dee8;
    --oa-text: #172033;
    --oa-muted: #64748b;
    --oa-accent: #2563eb;
    --oa-active: #e8efff;
    --oa-good: #15803d;
    --oa-warn: #a16207;
    color-scheme: light;
  }

  html:not([data-theme="dark"]) .oa .oa-grades-toggle {
    background: #f8fafc;
  }

  html:not([data-theme="dark"]) .oa .oa-grades-toggle b {
    color: #172033;
  }

  /* Horarios / asistencia por clase */
  html:not([data-theme="dark"]) #acRoot,
  html:not([data-theme="dark"]) #acDialog,
  html:not([data-theme="dark"]) #acScheduleDialog {
    color-scheme: light;
    color: #172033;
  }

  html:not([data-theme="dark"]) #acRoot :is(.ac-filterbar, .ac-panel, .ac-exportbar),
  html:not([data-theme="dark"]) #acDialog,
  html:not([data-theme="dark"]) #acScheduleDialog {
    background: #ffffff;
    border-color: #d8dee8;
  }

  html:not([data-theme="dark"]) #acRoot :is(table, .ac-report-preview, .ac-day-cell),
  html:not([data-theme="dark"]) #acRoot :is(input, select, textarea),
  html:not([data-theme="dark"]) #acDialog :is(input, select, textarea),
  html:not([data-theme="dark"]) #acScheduleDialog input {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
  }

  html:not([data-theme="dark"]) #acRoot :is(thead th, .ac-week th:first-child, .ac-report-heading),
  html:not([data-theme="dark"]) #acRoot .ac-week tbody th:first-child {
    background: #eef3f9;
    color: #334155;
  }

  html:not([data-theme="dark"]) #acRoot :is(.ac-note, .ac-counts, a.ac-link) {
    background: #f3f6fb;
    border-color: #d8dee8;
    color: #334155;
  }

  html:not([data-theme="dark"]) #acRoot tbody tr:hover :is(td, th) {
    background: #f8fafc;
  }

  /* Captura / publicación de calificaciones */
  html:not([data-theme="dark"]) #bgRoot {
    --bg-line: #d8dee8;
    --bg-own: #e7f5ff;
    --bg-own-head: #d8efff;
    --bg-other: #f8fafc;
    --bg-other-head: #eef2f7;
    color: #172033;
    color-scheme: light;
  }

  html:not([data-theme="dark"]) #bgRoot :is(select, input:not([type="checkbox"]), .bg-check, .bg-note),
  html:not([data-theme="dark"]) #bgTable .bg-student,
  html:not([data-theme="dark"]) #bgRoot #bgTable input,
  html:not([data-theme="dark"]) #bgConfirm[open] {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
  }

  html:not([data-theme="dark"]) #bgTable thead .bg-student,
  html:not([data-theme="dark"]) .bg-savebar {
    background: #eef3f9;
    color: #172033;
  }

  html:not([data-theme="dark"]) :is(.bg-publication, #bgSummary) {
    background: #eef4ff;
    border-color: #bfdbfe;
  }

  /* Actas */
  html:not([data-theme="dark"]) :where(.pg-actas_calificaciones) :is(.actas-menu, .actas-filters, .acta-card, .actas-empty),
  html:not([data-theme="dark"]) .acta-card > header {
    background: #ffffff;
    border-color: #d8dee8;
    color: #172033;
  }

  html:not([data-theme="dark"]) :where(.pg-actas_calificaciones) :is(select, input[type="date"], .actas-results-head input),
  html:not([data-theme="dark"]) .actas-shell :is(.actas-menu select, .actas-menu input[type="date"], .actas-results-head input) {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
    color-scheme: light;
  }

  html:not([data-theme="dark"]) :is(.actas-results-head, .acta-card th, .actas-periods label span, .actas-status span, .acta-badges span) {
    background: #f3f6fb;
    border-color: #d8dee8;
    color: #475569;
  }

  html:not([data-theme="dark"]) .actas-periods input:checked + span,
  html:not([data-theme="dark"]) .acta-badges .is-own {
    background: #e8efff;
    color: #1d4ed8;
  }

  /* Informes */
  html:not([data-theme="dark"]) :is(.inf-filters, .inf-card, .inf-settings) {
    background: #ffffff;
    border-color: #d8dee8;
    color: #172033;
  }

  html:not([data-theme="dark"]) .inf-app :is(input, select) {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
  }

  html:not([data-theme="dark"]) .inf-edit-table thead th {
    background: #eef3f9;
    color: #475569;
  }

  html:not([data-theme="dark"]) .inf-card:hover,
  html:not([data-theme="dark"]) .inf-card:focus-visible {
    background: #f8fafc;
  }

  /* Regularización */
  html:not([data-theme="dark"]) #rgRoot {
    background: #f8fafc;
    border-color: #d8dee8;
    color: #172033;
    color-scheme: light;
  }

  html:not([data-theme="dark"]) #rgRoot :is(button, input, select, textarea),
  html:not([data-theme="dark"]) :is(.rg-card, .rg-empty, .rg-notice, .rg-tag, .rg-state) {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
  }

  /* Asistencias */
  html:not([data-theme="dark"]) .pg-asistencias :is(.as-filters, .as-date-nav, .as-shift) :is(select, input),
  html:not([data-theme="dark"]) .pg-asistencias :is(button.as-group, button.as-top-item),
  html:not([data-theme="dark"]) .pg-asistencias .as-pop-note input,
  html:not([data-theme="dark"]) .rfid-filters input {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
    color-scheme: light;
  }

  html:not([data-theme="dark"]) :is(.as-table-wrap, #asTable th, #asTable td, #asPop) {
    background: #ffffff;
    border-color: #d8dee8;
    color: #334155;
  }

  html:not([data-theme="dark"]) #asTable thead th,
  html:not([data-theme="dark"]) #asTable thead .as-student,
  html:not([data-theme="dark"]) #asTable .as-student {
    background: #eef3f9;
    color: #334155;
  }

  html:not([data-theme="dark"]) #asTable td.is-today,
  html:not([data-theme="dark"]) #asTable th.as-day.is-today {
    background: #e8efff;
    color: #1d4ed8;
  }

  /* Citatorios */
  html:not([data-theme="dark"]) .pg-citatorios .report-dialog :is(input[type="datetime-local"], input[type="date"], input[type="time"], input[type="text"], textarea, select) {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #172033;
    color-scheme: light;
  }

  html:not([data-theme="dark"]) .pg-citatorios #citationPlace.is-fixed {
    background: #eef4ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
  }

  /* Llaveros RFID */
  html:not([data-theme="dark"]) :is(.rfid-card, .student-results, .student-result, .rfid-help-box, .rfid-table-tools, .rfid-table-filter) {
    background: #ffffff;
    border-color: #d8dee8;
    color: #172033;
  }

  html:not([data-theme="dark"]) .rfid-page :is(input.student-search-input, input.uid-input, input.table-search-input) {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #172033 !important;
  }

  html:not([data-theme="dark"]) .rfid-page :is(input.student-search-input, input.uid-input, input.table-search-input):focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
  }

  html:not([data-theme="dark"]) .rfid-table-modern th,
  html:not([data-theme="dark"]) .student-results-title,
  html:not([data-theme="dark"]) .table-count,
  html:not([data-theme="dark"]) .table-avatar,
  html:not([data-theme="dark"]) .selected-change {
    background: #eef3f9;
    color: #334155;
  }

  html:not([data-theme="dark"]) .student-result:hover,
  html:not([data-theme="dark"]) .student-result.is-active,
  html:not([data-theme="dark"]) .rfid-table-modern tbody tr:hover {
    background: #f5f8fc;
  }

  /* Dashboard docente / expediente */
  html:not([data-theme="dark"]) :is(.pd-kpi, .pd-card, .pd-class, .pd-progress li, .pd-weekday, .pd-slot, .pd-list li, .pd-state,
    .exp-kpi, .exp-box, .exp-contacts li, .exp-att, .exp-entries li, .exp-incidents li, .exp-subjects article, .exp-item) {
    background: #ffffff;
    border-color: #d8dee8;
    color: #334155;
  }

  html:not([data-theme="dark"]) :is(.pd-meter, .exp-item .exp-agree, .exp-alerts li) {
    background: #eef3f9;
    color: #475569;
  }

  html:not([data-theme="dark"]) :is(.pd-card, .exp-box) :is(h2, h3, h4, strong, b),
  html:not([data-theme="dark"]) :is(.pd-kpi, .exp-kpi) strong {
    color: #172033;
  }

  @media (max-width: 760px) {
    .theme-toggle-text,
    .main > header .theme-toggle-icon,
    .parent-header .theme-toggle-icon {
      display: none;
    }

    .theme-toggle {
      padding-inline: 8px;
      gap: 0;
    }
  }
}

@media screen {
  /* Ajustes de contraste que tenían texto claro escrito directamente. */
  html:not([data-theme="dark"]) .floating-nav .school-brand-text strong {
    color: #172033;
  }

  html:not([data-theme="dark"]) .floating-nav .school-brand-text span {
    color: #64748b;
  }

  html:not([data-theme="dark"]) :is(.parent-tabs a, .attendance-tabs button, .attendance-nav-button, .family-bottom-nav a) {
    color: #475569;
    border-color: #cbd5e1;
  }

  html:not([data-theme="dark"]) :is(.parent-tabs a, .attendance-tabs button, .attendance-nav-button, .family-bottom-nav a):hover {
    background: #eef3f9;
    border-color: #b8c3d2;
    color: #172033;
  }

  html:not([data-theme="dark"]) :is(.parent-tabs a.active, .attendance-tabs button.active, .attendance-nav-button.active, .family-bottom-nav a.active) {
    background: #e8efff;
    border-color: #9db7f5;
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]) .global-school-card > a:hover {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]) .actas-results-head b,
  html:not([data-theme="dark"]) .actas-status > b,
  html:not([data-theme="dark"]) .actas-range-title,
  html:not([data-theme="dark"]) .actas-range small b {
    color: #172033;
  }

  html:not([data-theme="dark"]) :is(.actas-results-head p, .actas-search, .actas-menu-grid > label, .actas-periods > span, .actas-range, .actas-start p) {
    color: #64748b;
  }

  html:not([data-theme="dark"]) .acta-card :is(header p, header small) {
    color: #64748b;
  }

  html:not([data-theme="dark"]) .inf-toolbar p,
  html:not([data-theme="dark"]) .inf-settings > p,
  html:not([data-theme="dark"]) .inf-settings h3 + p,
  html:not([data-theme="dark"]) .inf-card p {
    color: #64748b;
  }

  html:not([data-theme="dark"]) .inf-app label,
  html:not([data-theme="dark"]) .inf-settings summary,
  html:not([data-theme="dark"]) .inf-settings h3,
  html:not([data-theme="dark"]) .inf-card h3 {
    color: #172033;
  }

  html:not([data-theme="dark"]) .inf-actions a {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]) .inf-actions a:hover,
  html:not([data-theme="dark"]) .inf-actions a:focus-visible {
    color: #1e40af;
  }
}

/* Llaveros · columna de grado y turno */
.rfid-table-modern .rfid-group-cell .rfid-group { display: block; font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
.rfid-table-modern .rfid-group-cell .shift-badge { white-space: nowrap; }
.rfid-table-modern .pending-badge { white-space: nowrap; }