/* ==========================================================================
   9. CORRECCIONES FINALES — contraste claro/oscuro, iconos, formularios y
      diseño para teléfono y tableta
   --------------------------------------------------------------------------
   Esta sección va al final a propósito: corrige textos que quedaban blancos
   sobre blanco (modo claro) u oscuros sobre oscuro (modo oscuro), alinea los
   iconos, unifica el aspecto de etiquetas y campos, y adapta el panel a
   pantallas pequeñas. Solo afecta pantalla; la impresión no cambia.
   ========================================================================== */

@media screen {
  /* ---------- 9.1 Paleta de apoyo por tema ---------- */
  html:not([data-theme="dark"]):not(#fx) {
    --fx-text: #0f172a;
    --fx-text-2: #334155;
    --fx-muted: #5b6b82;
    --fx-line: #d8dee8;
    --fx-soft: #f3f6fb;
    --fx-card: #ffffff;
    --fx-accent: #1d4ed8;
    --fx-accent-soft: #e8efff;
    --fx-accent-line: #bcd0fb;
    --fx-label: #334155;
    --fx-input-bg: #ffffff;
    --fx-input-line: #c3cddb;
    --fx-input-text: #0f172a;
    --fx-placeholder: #8190a5;
    --fx-ok: #15803d;      --fx-ok-bg: #ecfdf3;     --fx-ok-line: #a7e3bd;
    --fx-warn: #a4520a;    --fx-warn-bg: #fff7ed;   --fx-warn-line: #f6c996;
    --fx-danger: #b91c1c;  --fx-danger-bg: #fef2f2; --fx-danger-line: #f5b5b5;
    --fx-info: #1d4ed8;    --fx-info-bg: #eef4ff;   --fx-info-line: #bcd0fb;
  }

  html[data-theme="dark"]:not(#fx) {
    --fx-text: #f1f5f9;
    --fx-text-2: #cbd5e1;
    --fx-muted: #9aa8bc;
    --fx-line: rgba(148, 163, 184, 0.22);
    --fx-soft: #16213a;
    --fx-card: #111b2d;
    --fx-accent: #7cb0ff;
    --fx-accent-soft: rgba(59, 130, 246, 0.16);
    --fx-accent-line: rgba(96, 165, 250, 0.45);
    --fx-label: #cbd5e1;
    --fx-input-bg: #0d1627;
    --fx-input-line: rgba(148, 163, 184, 0.34);
    --fx-input-text: #f1f5f9;
    --fx-placeholder: #7d8ba1;
    --fx-ok: #4ade80;      --fx-ok-bg: rgba(34, 197, 94, 0.12);  --fx-ok-line: rgba(74, 222, 128, 0.35);
    --fx-warn: #fbbf24;    --fx-warn-bg: rgba(245, 158, 11, 0.12); --fx-warn-line: rgba(251, 191, 36, 0.35);
    --fx-danger: #f87171;  --fx-danger-bg: rgba(239, 68, 68, 0.12); --fx-danger-line: rgba(248, 113, 113, 0.38);
    --fx-info: #93c5fd;    --fx-info-bg: rgba(59, 130, 246, 0.12);  --fx-info-line: rgba(147, 197, 253, 0.35);
  }

  /* ---------- 9.1b Tokens del sistema con mejor contraste ---------- */
  html:not([data-theme="dark"]):not(#fx) {
    --as-muted: #5b6b80;
    --as-text-2: #3b4a60;
    --status-ok: #166534;
    --status-warn: #92400e;
    --status-danger: #b91c1c;
  }

  html[data-theme="dark"]:not(#fx) {
    --as-primary: #2563eb;
    --as-primary-hover: #1d4ed8;
    --as-muted: #a3b1c6;
    --accion: #2563eb;
    --accion-hover: #1d4ed8;
  }

  /* En oscuro el azul de acento como TEXTO va más claro para leerse. */
  html[data-theme="dark"]:not(#fx) :is(.side nav a.active, .side nav a.active i, .side nav a:hover i,
    .school-section-tabs a[aria-current="page"], .app-topbar .user > span, .hero small, .metric-card > i,
    .module-kpi-icon, .student-record-page .student-avatar, .record-section-nav .record-tab.active,
    .student-record-page .panel-head small, .enrollment-promotion-panel small,
    .attendance-quick-nav > a > span, .rfid-tab.is-active, .rfid-latest-icon) {
    color: #8ab8ff !important;
  }

  html[data-theme="dark"]:not(#fx) .rfid-tab.is-active {
    border-bottom-color: #8ab8ff !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.st-status, .oa-badge:not(.oa-warn), #oaCycleStatus, .module-kpi-icon.is-success) {
    color: #15803d !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.oa-badge.oa-warn, .module-kpi-icon.is-warning) {
    color: #b45309 !important;
  }

  html:not(#fx) .db-welcome-top .db-eyebrow {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* ---------- Consola global ---------- */
  html:not(#fx) :is(.aulasimple-mark, .school-avatar) {
    background: #2563eb !important;
    color: #ffffff !important;
  }

  html[data-theme="dark"]:not(#fx) .global-side nav a.active {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #8ab8ff !important;
  }

  html:not([data-theme="dark"]):not(#fx) .global-school-card .btn.ghost {
    background: #ffffff !important;
    border: 1px solid #c3cddb !important;
    color: #172033 !important;
  }

  /* ---------- Panel del docente ---------- */
  html:not([data-theme="dark"]):not(#fx) .pd-kpi > small {
    color: #334155 !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.pd-kpi > span, .pd-card-head p, .pd-empty, .pd-card small) {
    color: #5b6b80 !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.pd-card-head a, .pd-card a.pd-link) {
    color: #1d4ed8 !important;
  }

  html:not([data-theme="dark"]):not(#fx) .pd-empty--ok {
    background: #ecfdf3 !important;
    border-color: #a7e3bd !important;
    color: #166534 !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.pd-card-head h2, .pd-card-head h3, .pd-kpi strong) {
    color: #0f172a;
  }

  html:not(#fx) .pd-hero :is(h1, h2) {
    color: #ffffff !important;
  }

  html:not([data-theme="dark"]):not(#fx) .pd-off {
    color: #5b6b80 !important;
  }

  /* ---------- 9.2 Alertas y avisos: siempre legibles en ambos temas ---------- */
  html:not(#fx) .alert,
  html:not(#fx) .flash,
  html:not(#fx) .notice,
  html:not(#fx) .inf-alert {
    border: 1px solid var(--fx-info-line);
    background: var(--fx-info-bg);
    color: var(--fx-text);
  }

  html:not(#fx) :is(.alert, .flash, .notice).success,
  html:not(#fx) :is(.alert, .flash, .notice).ok,
  html:not(#fx) :is(.alert, .flash, .notice).exito {
    border-color: var(--fx-ok-line);
    background: var(--fx-ok-bg);
    color: var(--fx-text);
  }

  html:not(#fx) :is(.alert, .flash, .notice):is(.error, .danger, .err) {
    border-color: var(--fx-danger-line);
    background: var(--fx-danger-bg);
    color: var(--fx-text);
  }

  html:not(#fx) :is(.alert, .flash, .notice):is(.warning, .warn, .aviso) {
    border-color: var(--fx-warn-line);
    background: var(--fx-warn-bg);
    color: var(--fx-text);
  }

  html:not(#fx) .inf-alert {
    border-left: 4px solid var(--fx-warn);
    border-color: var(--fx-warn-line);
    border-left-color: var(--fx-warn);
    background: var(--fx-warn-bg);
    color: var(--fx-text);
  }

  /* ---------- 9.3 Etiquetas y campos de formulario ---------- */
  html:not(#fx) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]), select, textarea) {
    border-width: 1px;
    border-style: solid;
    font-weight: 500;
  }

  html:not(#fx) :is(input, textarea)::placeholder {
    color: var(--fx-placeholder);
    font-weight: 400;
    opacity: 1;
  }

  html:not(#fx) :is(input, textarea, select):focus-visible {
    outline: none;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
  }

  html[data-theme="dark"]:not(#fx) :is(input, textarea, select):focus-visible {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
  }

  html:not(#fx) :is(input, select, textarea):disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }

  /* ---------- 9.4 Botón «Cerrar» de las ventanas ---------- */
  html:not([data-theme="dark"]):not(#fx) :is(.dialog-close, .attendance-icon-button, .dialog-head [data-close], .attendance-dialog-head [data-close], .oa [data-oa-close]) {
    background: #ffffff;
    border-color: #c3cddb;
    color: #172033;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.dialog-close, .attendance-icon-button, .dialog-head [data-close], .attendance-dialog-head [data-close], .oa [data-oa-close]):hover {
    background: #eef3f9;
    border-color: #8b97aa;
    color: #0f172a;
  }

  html:not(#fx) :is(.dialog-close, .attendance-icon-button, .dialog-head [data-close], .oa [data-oa-close]) {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* ---------- 9.5 Interruptores (roles, permisos) ---------- */
  html:not(#fx) .switch-ui {
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    border: 1px solid #b6c2d2;
  }

  html:not(#fx) .switch-ui::after {
    top: 50%;
    left: 3px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  }

  html[data-theme="dark"]:not(#fx) .switch-ui {
    background: #334155;
    border-color: #475569;
  }

  html[data-theme="dark"]:not(#fx) .switch-ui::after {
    background: #e2e8f0;
  }

  html:not(#fx) .switch-row input:checked + .switch-ui,
  html:not(#fx) .switch-row input:checked ~ .switch-ui {
    background: #2563eb;
    border-color: #2563eb;
  }

  html:not(#fx) .switch-row input:checked + .switch-ui::after,
  html:not(#fx) .switch-row input:checked ~ .switch-ui::after {
    transform: translateX(16px);
    background: #ffffff;
  }

  html:not(#fx) .switch-row input:focus-visible + .switch-ui {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  }

  html:not(#fx) .switch-row {
    align-items: center;
  }

  /* ---------- 9.6 Paginación ---------- */
  html:not(#fx) :is(.pagination-control.is-disabled, .st-pagination button:disabled, .rfid-pagination button:disabled) {
    color: var(--fx-muted) !important;
    background: transparent !important;
    border-color: var(--fx-line) !important;
    opacity: 1 !important;
    cursor: not-allowed;
  }

  html:not(#fx) :is(.enr-pages, .tutor-pages) > b {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.rfid-pagination button:not(:disabled), .st-pagination button:not(:disabled)) {
    background: #ffffff;
    border-color: #c3cddb;
    color: #172033;
  }

  html:not(#fx) :is(.rfid-pagination #tablePage, .st-pagination > span) {
    color: var(--fx-muted);
  }

  /* ---------- 9.7 Insignias de turno ---------- */
  html:not([data-theme="dark"]):not(#fx) .shift-badge.shift-morning {
    background: #eaf2ff;
    border-color: #bcd0fb;
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) .shift-badge.shift-afternoon,
  html:not([data-theme="dark"]):not(#fx) .shift-badge.shift-evening {
    background: #fff4e6;
    border-color: #f6c996;
    color: #a4520a;
  }

  /* ---------- 9.8 Franjas de título con fondo de color ---------- */
  html:not(#fx) .module-banner .tenant-address {
    color: inherit;
  }

  html:not([data-theme="dark"]):not(#fx) .module-banner .tenant-address {
    background: #f3f6fb;
    border-color: #d8dee8;
    color: #334155;
  }

  html:not(#fx) .banner-enrollment h2 {
    color: #ffffff !important;
  }

  html:not(#fx) .banner-enrollment > div > small,
  html:not(#fx) .banner-enrollment > div > p {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  html:not(#fx) .banner-enrollment > div > small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  html:not(#fx) .banner-enrollment > div > small::before {
    position: static;
    flex: 0 0 7px;
    border-radius: 50%;
    margin: 0;
  }

  html:not(#fx) .st-hero .st-eyebrow,
  html:not(#fx) .st-hero .st-hero-copy > p {
    color: rgba(255, 255, 255, 0.9);
  }

  /* Acción principal sobre fondo azul claro (modo oscuro) */
  html[data-theme="dark"]:not(#fx) #oaCreateGroups,
  html[data-theme="dark"]:not(#fx) .enr-pages > b {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
  }

  /* ---------- 9.9 Asistencias ---------- */
  html:not([data-theme="dark"]):not(#fx) .pg-asistencias .rfid-list-title,
  html:not([data-theme="dark"]):not(#fx).pg-asistencias .rfid-list-title {
    color: #172033;
  }

  html:not([data-theme="dark"]):not(#fx) .as-kpi > span {
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.as-kpi > small, .as-help, #asHint, #asShifts .as-help) {
    color: #5b6b82;
  }

  html:not([data-theme="dark"]):not(#fx) #asShifts .as-help b,
  html:not([data-theme="dark"]):not(#fx) #asShifts .as-help strong {
    color: #0f172a;
  }

  html:not([data-theme="dark"]):not(#fx) .as-legend .as-chip {
    background: #f3f6fb;
    border-color: #d8dee8;
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) #asTable th.as-day > :is(span, small),
  html:not([data-theme="dark"]):not(#fx) #asTable th.as-student > small {
    color: #475569;
  }

  html:not([data-theme="dark"]):not(#fx) #asTable th.as-day.is-today > :is(span, small) {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) #asTable .as-cell.st-none {
    color: #64748b;
  }

  html:not([data-theme="dark"]):not(#fx) :is(button.as-group, button.as-top-item) {
    background: #ffffff !important;
    border: 1px solid #d8dee8 !important;
    color: #172033 !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(button.as-group, button.as-top-item):hover {
    background: #f5f8fc !important;
    border-color: #9db7f5 !important;
  }

  html:not([data-theme="dark"]):not(#fx) button.as-group :is(small, .as-group-num, .as-group-num em) {
    color: #5b6b80 !important;
  }

  html:not([data-theme="dark"]):not(#fx) button.as-group :is(.as-group-name, .as-group-num b) {
    color: #0f172a !important;
  }

  html:not([data-theme="dark"]):not(#fx) button.as-group .as-bar {
    background: #e7ecf3 !important;
  }

  html[data-theme="dark"]:not(#fx) .rfid-latest-icon {
    color: #93c5fd;
  }

  /* ---------- 9.10 Calificaciones (boleta del grupo) ---------- */
  html:not([data-theme="dark"]):not(#fx) #bgRoot :is(.btn.ghost, #bgRefresh, #bgManage, #bgPeriods > button) {
    background: #ffffff;
    border-color: #c3cddb;
    color: #172033;
  }

  html:not([data-theme="dark"]):not(#fx) #bgRoot #bgPeriods > button small {
    color: #5b6b82;
  }

  html:not([data-theme="dark"]):not(#fx) #bgRoot #bgPeriods > button[aria-pressed="true"],
  html:not([data-theme="dark"]):not(#fx) #bgRoot #bgPeriods > button.active,
  html:not([data-theme="dark"]):not(#fx) #bgRoot #bgPeriods > button.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  html:not([data-theme="dark"]):not(#fx) #bgRoot #bgPeriods > button:is([aria-pressed="true"], .active, .is-active) small {
    color: rgba(255, 255, 255, 0.85);
  }

  html:not([data-theme="dark"]):not(#fx) #bgRoot :is(.bg-key, .bg-legend span) {
    background: #ffffff;
    border-color: #d8dee8;
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) #bgRoot :is(#bgSummary, #bgPublication, .bg-publication) {
    color: #172033;
  }

  html:not([data-theme="dark"]):not(#fx) #bgRoot :is(#bgPublicationStatus, #bgHint, .bg-savebar small) {
    color: #5b6b82;
  }

  html:not([data-theme="dark"]):not(#fx) #bgTable thead th,
  html:not([data-theme="dark"]):not(#fx) #bgTable thead th.bg-own {
    color: #0f172a;
  }

  html:not([data-theme="dark"]):not(#fx) #bgTable thead th small,
  html:not([data-theme="dark"]):not(#fx) #bgTable tbody th.bg-student small,
  html:not([data-theme="dark"]):not(#fx) #bgTable tbody td {
    color: #475569;
  }

  html:not([data-theme="dark"]):not(#fx) #bgTable thead .bg-field-group {
    color: #1e3a8a;
  }

  html:not(#fx) #bgRoot #bgSave:disabled {
    background: transparent !important;
    border-color: var(--fx-line) !important;
    color: var(--fx-muted) !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"]:not(#fx) #bgSave:disabled {
    color: #94a3b8;
  }

  /* ---------- 9.11 Actas ---------- */
  html:not([data-theme="dark"]):not(#fx) .actas-range :is(label, small, em, .actas-range-title) {
    color: #475569;
  }

  /* ---------- 9.12 Horarios / asistencia por clase ---------- */
  html:not([data-theme="dark"]):not(#fx) #acRoot > header {
    background: #ffffff;
    border: 1px solid #d8dee8;
    border-left: 4px solid #2563eb;
    color: #172033;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot > header small {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot > header h2 {
    color: #0f172a;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot > header p,
  html:not([data-theme="dark"]):not(#fx) #acRoot .ac-schedule-head p {
    color: #5b6b82;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot label {
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot tbody td {
    color: #475569;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot th small {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) #acRoot .ac-schedule-head h3,
  html:not([data-theme="dark"]):not(#fx) #acRoot h3 {
    color: #0f172a;
  }

  /* ---------- 9.13 Llaveros RFID ---------- */
  html:not([data-theme="dark"]):not(#fx) .rfid-page :is(.rfid-card h3, .rfid-list-header h3, .rfid-card-header h3) {
    color: #0f172a;
  }

  html:not([data-theme="dark"]):not(#fx) .rfid-page .table-student-name {
    color: #172033;
  }

  html:not([data-theme="dark"]):not(#fx) .rfid-page .field-title > span {
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) .rfid-page :is(.field-title > small, .uid-message span, .student-code, .rfid-card-header p, .rfid-list-header p) {
    color: #5b6b82;
  }

  html:not([data-theme="dark"]):not(#fx) .rfid-page .credential-code {
    background: #eef0ff;
    border-color: #c7cdfb;
    color: #4338ca;
  }

  html:not([data-theme="dark"]):not(#fx) .rfid-page .pending-badge {
    background: #fff4e6;
    border-color: #f6c996;
    color: #a4520a;
  }

  /* ---------- 9.14 Informes ---------- */
  html:not([data-theme="dark"]):not(#fx) .inf-app .inf-cat-title {
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) .inf-app :is(.inf-toolbar small, .inf-card > span) {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) .inf-app .inf-card > b {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) .inf-edit-table td button {
    color: #b91c1c;
  }

  /* ---------- 9.15 Regularización ---------- */
  html:not([data-theme="dark"]):not(#fx) .rg-heading small {
    color: #1d4ed8 !important;
  }

  html:not([data-theme="dark"]):not(#fx) .rg-heading p {
    color: #5b6b82 !important;
  }

  html:not([data-theme="dark"]):not(#fx) .rg-heading :is(h2, h3) {
    color: #0f172a !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.rg-tag, .rg-state) {
    background: #eef3f9;
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) .rg-pendiente { background: #fff4e6; color: #a4520a; }
  html:not([data-theme="dark"]):not(#fx) .rg-regularizada { background: #ecfdf3; color: #166534; }
  html:not([data-theme="dark"]):not(#fx) .rg-anulada { color: #475569; }

  /* ---------- 9.16 Docentes ---------- */
  html:not([data-theme="dark"]):not(#fx) .teacher-summary-line b,
  html:not([data-theme="dark"]):not(#fx) .teacher-card-name h3,
  html:not([data-theme="dark"]):not(#fx) .teacher-stats dd {
    color: #0f172a;
  }

  html:not([data-theme="dark"]):not(#fx) .teacher-groups a {
    background: #eef3f9;
    border-color: #d8dee8;
    color: #1e3a8a;
  }

  html:not([data-theme="dark"]):not(#fx) .teacher-groups a:hover {
    background: #e8efff;
    border-color: #9db7f5;
  }

  html:not([data-theme="dark"]):not(#fx) .teacher-week li.has span {
    color: #1e3a8a;
  }

  /* ---------- 9.17 Usuarios, tutores, expediente, configuración ---------- */
  html:not([data-theme="dark"]):not(#fx) .user-avatar {
    background: #e8efff;
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) .tutor-edit-btn {
    color: #1d4ed8;
    border-color: #bcd0fb;
    background: #f5f8ff;
  }

  html:not([data-theme="dark"]):not(#fx) .student-meta span {
    color: #334155;
  }

  html:not([data-theme="dark"]):not(#fx) .exp-ok {
    background: #ecfdf3;
    border-color: #a7e3bd;
    color: #166534;
  }

  html:not([data-theme="dark"]):not(#fx) .exp-contacts a {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]):not(#fx) .exp-contacts li > span {
    color: #5b6b82;
  }

  html:not([data-theme="dark"]):not(#fx) .settings-section-head > span {
    background: #dcfce7;
    color: #166534;
  }

  html[data-theme="dark"]:not(#fx) .bulk-file-icon {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
  }

  /* ---------- 9.18 Horario de grupo / docente ---------- */
  html:not([data-theme="dark"]):not(#fx) .hg-toolbar h2,
  html:not([data-theme="dark"]):not(#fx) .hg-empty h3 {
    color: #0f172a;
  }

  html:not([data-theme="dark"]):not(#fx) .hg-toolbar small {
    color: #1d4ed8;
  }

  /* ---------- 9.19 Credenciales: la tarjeta siempre es blanca ---------- */
  html[data-theme="dark"]:not(#fx) .student-credential {
    background: #ffffff;
    color: #111827;
  }

  html[data-theme="dark"]:not(#fx) .student-credential :is(.credential-data dd, .credential-school b, .credential-school strong, h3) {
    color: #111827;
  }

  html[data-theme="dark"]:not(#fx) .student-credential :is(.credential-data dt, .credential-school small, .credential-year, .credential-code, .credential-status) {
    color: #4b5563;
  }

  html[data-theme="dark"]:not(#fx) .student-credential .credential-bottom {
    background: #f3f4f6;
  }

  html[data-theme="dark"]:not(#fx) .student-credential .credential-mark {
    background: #1d4ed8;
    color: #ffffff;
  }

  /* ---------- 9.20 Campos con icono: un solo recuadro, sin marco interno ---------- */
  html:not(#fx) .login-v4-input input,
  html:not(#fx) .login-v4-input input:focus,
  html:not(#fx) .login-v4-input input:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html:not(#fx) .login-v4-input :is(.login-v4-input-icon, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }

  html:not(#fx) .login-v4-submit {
    background: #2563eb !important;
    color: #ffffff !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.login-v4-brand p, .login-v4-remember span, .login-v4-help, .login-v4-footer) {
    color: #5b6b80 !important;
  }

  /* ---------- 9.21 Ventana de inscripción ---------- */
  html:not(#fx) #enroll .student-search-container {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  html:not(#fx) #enroll .student-search-icon {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transform: none;
    color: var(--fx-muted);
    line-height: 1;
  }

  html:not(#fx) #enroll .student-search-container input {
    flex: 1 1 auto;
    min-width: 0;
  }

  html:not(#fx) #enroll .student-action:not(.danger) {
    background: var(--fx-accent-soft) !important;
    border: 1px solid var(--fx-accent-line) !important;
    color: var(--fx-accent) !important;
  }

  html:not(#fx) #enroll .student-selector-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  html:not(#fx) #enroll .student-selector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  html:not(#fx) #enroll .student-action {
    min-height: 38px;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  html:not(#fx) #enroll .selected-students-empty strong {
    font-size: 15px !important;
    font-weight: 600;
  }

  html:not(#fx) #enroll .selected-students-empty small {
    color: var(--fx-muted);
  }

  html:not(#fx) #enroll .subject-preview-list:empty {
    display: none;
  }

  html:not(#fx) #enroll > form {
    padding-bottom: 0 !important;
  }

  html:not(#fx) #enroll > form > .form-actions,
  html:not(#fx) dialog form > .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--as-surface, #ffffff) !important;
    background-image: none !important;
  }

  html:not(#fx) #enroll > form > .form-actions {
    margin: 12px -22px 0;
    padding: 12px 22px 16px !important;
    border-top: 1px solid var(--as-border);
  }

  /* ---------- 9.22 Otras ventanas ---------- */
  html:not([data-theme="dark"]):not(#fx) #acScheduleCancel,
  html:not([data-theme="dark"]):not(#fx) #acCancel {
    background: #ffffff !important;
    border: 1px solid #c3cddb !important;
    color: #172033 !important;
  }

  /* Las ventanas de usuarios no deben ocupar toda la pantalla en escritorio. */
  html:not(#fx) dialog.user-dialog {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
  }

  html:not(#fx) dialog.user-dialog label > em,
  html:not(#fx) dialog.user-dialog label em {
    display: inline;
    margin-left: 4px;
    color: var(--fx-muted);
    font-style: normal;
    font-weight: 400;
  }
}

/* ==========================================================================
   9.30 TELÉFONO Y TABLETA
   ========================================================================== */
@media screen {
  /* Cuenta del usuario dentro del menú lateral (solo pantallas medianas y chicas). */
  .side-account {
    display: none;
  }

  html:not(#fx) .side-account-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--as-primary-soft, #eff6ff);
    border: 1px solid var(--as-primary-border, #bfdbfe);
    color: var(--fx-accent);
    font-size: 11px;
    font-weight: 750;
  }

  html:not(#fx) .side-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  html:not(#fx) .side-account-info b {
    overflow: hidden;
    color: var(--fx-text);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(#fx) .side-account-info small {
    overflow: hidden;
    color: var(--fx-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(#fx) .side-account-logout {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--fx-danger-line);
    border-radius: 8px;
    background: var(--fx-danger-bg);
    color: var(--fx-danger);
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
  }

  html:not(#fx) .side-account-role {
    flex: 1 0 100%;
  }

  html:not(#fx) .side-account-role label {
    display: grid;
    gap: 4px;
    color: var(--fx-muted);
    font-size: 11px;
    font-weight: 650;
  }

  html:not(#fx) .side-account-role select {
    width: 100%;
    min-height: 38px;
  }
}

@media screen and (max-width: 1080px) {
  html.is-admin:not(#fx) .side-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--as-border);
    border-radius: 10px;
    background: var(--as-surface);
  }

  html.is-admin:not(#fx) .side .cycle {
    margin-top: auto;
  }

  html.is-admin:not(#fx) .side {
    overflow-y: auto;
  }

  html.is-admin:not(#fx) .side nav {
    flex: 0 0 auto;
    overflow: visible;
  }
}

@media screen and (min-width: 761px) and (max-width: 1080px) {
  /* En tableta la barra superior ya tiene «Salir». */
  html.is-admin:not(#fx) .side-account-logout {
    display: none;
  }
}

/* ---------- Tableta (hasta 1080px) ---------- */
@media screen and (max-width: 1080px) {
  html.is-admin:not(#fx) .app {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  html.is-admin:not(#fx) .app.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#fx) :is(.table-wrap, .student-table-wrap, .tutor-table-wrap, .bulk-preview-table-wrap, .as-table-wrap, .rfid-table-container) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html:not(#fx) dialog {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ---------- Teléfono (hasta 760px) ---------- */
@media screen and (max-width: 760px) {
  /* El menú lateral queda por encima de la capa oscura (antes quedaba debajo y
     se veía borroso, sin poder tocar sus enlaces). */
  html.is-admin:not(#fx) .side {
    z-index: 90 !important;
    width: min(300px, 88vw);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  html:not(#fx) .sidebar-backdrop {
    z-index: 80 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.is-admin:not(#fx) .side nav a {
    min-height: 44px;
  }

  /* Barra superior compacta: «Regresar» solo con la flecha. */
  html.is-admin:not(#fx) .main > .app-topbar {
    gap: 8px;
  }

  html.is-admin:not(#fx) .btn-back {
    min-width: 38px;
    padding: 8px 10px;
    justify-content: center;
  }

  html.is-admin:not(#fx) .btn-back > span:last-child {
    display: none;
  }

  html.is-admin:not(#fx) .topbar-context h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pestañas de sección desplazables con el dedo. */
  html.is-admin:not(#fx) .main > .school-section-tabs {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  html.is-admin:not(#fx) .main > .school-section-tabs::-webkit-scrollbar {
    display: none;
  }

  html.is-admin:not(#fx) .school-section-tabs a {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }

  /* Campos de 16px: iOS no hace zoom al tocarlos. */
  html:not(#fx) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
    font-size: 16px !important;
    min-height: 44px;
  }

  html:not(#fx) :is(.btn, button.primary, button.ghost, .btn-back, .st-action, .student-action) {
    min-height: 42px;
  }

  /* Ventanas: casi a pantalla completa y con el pie siempre visible. */
  html:not(#fx) dialog[open] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
  }

  html:not(#fx) dialog :is(.form-grid, .dialog-form, .report-grid, .citation-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:not(#fx):not(#fx2) dialog :is(.form-actions, .dialog-actions, .as-dialog-actions, .ac-dialog-actions) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px !important;
    align-items: stretch;
  }

  html:not(#fx):not(#fx2) dialog :is(.form-actions, .dialog-actions, .as-dialog-actions, .ac-dialog-actions) > :is(button, .btn, a) {
    width: 100% !important;
    height: auto !important;
    min-height: 44px;
    margin: 0 !important;
    justify-content: center;
  }

  html:not(#fx) #enroll .student-selector-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Filtros de listas en dos columnas en lugar de una fila por campo. */
  html:not(#fx):not(#fx2) :is(.st-toolbar, .enr-toolbar, .tutor-toolbar, .teacher-toolbar, .users-filters) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html:not(#fx):not(#fx2) :is(.st-toolbar, .enr-toolbar, .tutor-toolbar, .teacher-toolbar, .users-filters) > * {
    grid-column: auto !important;
    min-width: 0;
  }

  html:not(#fx):not(#fx2) :is(.st-toolbar, .enr-toolbar, .tutor-toolbar, .teacher-toolbar, .users-filters) > :is(.enr-search-field, .search, .st-filter.search, label:first-child, .tutor-toolbar-actions, .enr-toolbar-actions, .teacher-toolbar-actions) {
    grid-column: 1 / -1 !important;
  }

  html:not(#fx) :is(.tutor-toolbar-actions, .enr-toolbar-actions, .teacher-toolbar-actions) > :is(button, .btn) {
    width: 100%;
    justify-content: center;
  }

  /* Tarjetas de título: texto y botones con aire. */
  html.is-admin:not(#fx) .module-banner h1,
  html.is-admin:not(#fx) .module-banner h2 {
    font-size: 22px !important;
  }

  /* Encabezados con botón al lado: se apilan. */
  html:not(#fx) :is(.ac-schedule-head, .panel-head, .st-list-title, .rfid-list-header, .teacher-results-head, .as-head) {
    flex-wrap: wrap;
    gap: 10px;
  }

  html:not(#fx) #acRoot .ac-schedule-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#fx) #acRoot .ac-schedule-head h3 {
    font-size: 20px;
  }

  html:not(#fx) #acRoot .ac-schedule-head > :is(a, button) {
    justify-self: start;
  }

  /* Organización académica: textos demasiado pequeños en teléfono. */
  html:not(#fx) .oa :is(input, select, button) {
    font-size: 15px !important;
  }

  html:not(#fx) #oaCreateGroups {
    font-size: 14px !important;
    min-height: 44px !important;
  }

  /* Barra de guardado de calificaciones: abajo, sin tapar el contenido. */
  html:not(#fx) #bgRoot .bg-savebar {
    position: sticky !important;
    top: auto !important;
    bottom: 8px !important;
    z-index: 15;
  }

  /* Paginación cómoda de tocar. */
  html:not(#fx) :is(.st-pagination, .enr-pagination, .tutor-pagination, .rfid-pagination) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}

/* Tablas como tarjetas en teléfono y tableta vertical */
@media screen and (max-width: 900px) {
  html:not(#fx) table.fx-stack {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html:not(#fx) table.fx-stack thead {
    display: none !important;
  }

  html:not(#fx) table.fx-stack tbody {
    display: grid;
    gap: 10px;
    width: 100%;
  }

  html:not(#fx) table.fx-stack tbody tr:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--as-border) !important;
    border-radius: 12px;
    background: var(--as-surface) !important;
    box-shadow: var(--as-shadow-sm);
  }

  html:not(#fx) table.fx-stack tbody tr:hover {
    background: var(--as-surface) !important;
  }

  html:not(#fx) table.fx-stack tbody td,
  html:not(#fx) table.fx-stack tbody th {
    display: block;
    position: relative !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 30px;
    padding: 6px 0 6px min(38%, 130px) !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html:not(#fx) table.fx-stack tbody td::before,
  html:not(#fx) table.fx-stack tbody th::before {
    content: attr(data-label);
    position: absolute;
    top: 8px;
    left: 0;
    width: calc(min(38%, 130px) - 10px);
    color: var(--as-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  html:not(#fx) table.fx-stack tbody :is(td, th):is([data-label=""], .fx-main, .fx-full, .fx-actions) {
    padding-left: 0 !important;
  }

  html:not(#fx) table.fx-stack tbody :is(td, th):is([data-label=""], .fx-main, .fx-full, .fx-actions)::before {
    display: none;
  }

  html:not(#fx) table.st-table.fx-stack tbody td.st-num {
    display: none;
  }

  html:not(#fx) table.enr-table.fx-stack tbody td.fx-main {
    padding-right: 36px !important;
  }

  html:not(#fx) table.fx-stack tbody td.fx-main {
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--as-border) !important;
    margin-bottom: 4px;
    font-size: 14px;
  }

  html:not(#fx) table.fx-stack tbody td.fx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px !important;
  }

  html:not(#fx) table.fx-stack tbody td.fx-actions > * {
    flex: 1 1 auto;
  }

  html:not(#fx) table.fx-stack tbody td.fx-actions :is(.st-row-actions, .enr-actions, .users-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  html:not(#fx) table.fx-stack tbody td.fx-actions :is(a, button) {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }

  html:not(#fx) table.fx-stack tbody td.fx-full {
    text-align: center !important;
    color: var(--as-muted);
  }

  /* La casilla de selección de inscripciones va arriba a la derecha. */
  html:not(#fx) table.enr-table.fx-stack tbody tr {
    position: relative;
  }

  html:not(#fx) table.enr-table.fx-stack tbody td:first-child[data-label=""] {
    position: absolute !important;
    top: 10px;
    right: 12px;
    width: auto !important;
    padding: 0 !important;
  }

  /* Los contenedores de tabla ya no necesitan desplazamiento lateral. */
  html:not(#fx) :is(.table-wrap, .student-table-wrap, .tutor-table-wrap, .rfid-table-container, .st-table-wrap, .users-table-wrap):has(> table.fx-stack) {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#fx):not(#fx2) .st-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not(#fx):not(#fx2) .st-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html:not(#fx):not(#fx2) .st-hero .st-hero-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media screen and (max-width: 420px) {
  html.is-admin:not(#fx) .main {
    padding-inline: 10px;
  }

  html.is-admin:not(#fx) .main > .app-topbar {
    width: calc(100% + 20px);
    margin-inline: -10px;
    padding-inline: 10px;
  }

}

@media screen and (max-width: 340px) {
  html:not(#fx):not(#fx2) :is(.st-toolbar, .enr-toolbar, .tutor-toolbar, .teacher-toolbar, .users-filters) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ==========================================================================
   9.40 HOJAS DE INFORMES E IMPRESIÓN: siempre en papel blanco
   --------------------------------------------------------------------------
   Los informes, actas, horarios y listas son hojas para imprimir. En modo
   oscuro se ven como papel (fondo blanco, texto oscuro) y al imprimir el
   sitio usa siempre los colores claros, aunque el usuario esté en oscuro.
   ========================================================================== */
@media screen {
  html[data-theme="dark"]:not(#fx) :is(.inf-sheet, .ap-sheet, .hg-sheet, .ig-sheet) {
    color-scheme: light;
    --as-bg: #f5f7fb; --as-surface: #ffffff; --as-surface-2: #f8fafc; --as-surface-3: #eef3f8;
    --as-sidebar: #ffffff; --as-text: #172033; --as-text-2: #475569; --as-muted: #5b6b80;
    --as-border: #dde4ee; --as-border-strong: #cbd5e1; --as-primary: #2563eb; --as-primary-hover: #1d4ed8;
    --as-primary-soft: #eff6ff; --as-primary-border: #bfdbfe;
    --surface-void-canvas: #ffffff; --surface-graphite: #ffffff; --surface-snow-white: #ffffff;
    --surface-frosted: #f1f5f9; --surface-frosted-soft: #f8fafc;
    --edge-hairline: #dde4ee; --edge-hairline-strong: #cbd5e1;
    --color-bone: #172033; --color-ash: #475569; --color-slate: #5b6b80; --color-smoke: #475569;
    --color-graphite: #172033; --color-void-canvas: #ffffff; --color-frosted-glass: #ffffff; --color-ink-black: #0f172a;
    --fx-text: #0f172a; --fx-text-2: #334155; --fx-muted: #5b6b80; --fx-line: #d8dee8;
    background: #ffffff !important;
    color: #111827 !important;
  }

  html[data-theme="dark"]:not(#fx) :is(.inf-sheet, .ap-sheet, .hg-sheet, .ig-sheet) :is(table, tbody tr, thead tr) {
    color: #111827;
  }

  html[data-theme="dark"]:not(#fx) :is(.inf-sheet, .ap-sheet, .hg-sheet, .ig-sheet) tbody tr,
  html[data-theme="dark"]:not(#fx) :is(.inf-sheet, .ap-sheet, .hg-sheet, .ig-sheet) tbody tr:hover {
    background: transparent !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.inf-print-tip, .hg-print-tip) {
    color: #475569 !important;
  }

  html:not([data-theme="dark"]):not(#fx) :is(.inf-print-tip, .hg-print-tip) :is(b, strong, em) {
    color: #0f172a !important;
  }
}

@media print {
  html[data-theme="dark"],
  html[data-theme="dark"] body {
    color-scheme: light;
    --as-bg: #f5f7fb; --as-surface: #ffffff; --as-surface-2: #f8fafc; --as-surface-3: #eef3f8;
    --as-sidebar: #ffffff; --as-text: #172033; --as-text-2: #475569; --as-muted: #5b6b80;
    --as-border: #dde4ee; --as-border-strong: #cbd5e1; --as-primary: #2563eb; --as-primary-hover: #1d4ed8;
    --as-primary-soft: #eff6ff; --as-primary-border: #bfdbfe;
    --surface-void-canvas: #ffffff; --surface-graphite: #ffffff; --surface-snow-white: #ffffff;
    --surface-frosted: #f1f5f9; --surface-frosted-soft: #f8fafc;
    --edge-hairline: #dde4ee; --edge-hairline-strong: #cbd5e1;
    --color-bone: #172033; --color-ash: #475569; --color-slate: #5b6b80; --color-smoke: #475569;
    --color-graphite: #172033; --color-void-canvas: #ffffff; --color-frosted-glass: #ffffff; --color-ink-black: #0f172a;
    --fx-text: #0f172a; --fx-text-2: #334155; --fx-muted: #5b6b80; --fx-line: #d8dee8;
    background: #ffffff !important;
    color: #111827 !important;
  }

  html[data-theme="dark"] :is(table, tbody tr, thead tr, td, th) {
    color-scheme: light;
  }

  html[data-theme="dark"] tbody tr {
    background: transparent !important;
  }
}

/* Encabezado guinda de las actas (la capa moderna lo dejaba blanco sobre blanco). */
html.is-admin .ap-sheet .ap-list thead th {
  background: #8e2f2d !important;
  color: #ffffff !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ==========================================================================
   9.50 REVISIÓN GENERAL: espaciado, detalles y animaciones
   ========================================================================== */
@media screen {
  /* ---------- Espaciado uniforme entre bloques de cada página ---------- */
  html.is-admin:not(#fx) .main {
    row-gap: 18px;
  }

  html.is-admin:not(#fx) .main > .app-topbar {
    margin-bottom: 4px !important;
  }

  html.is-admin:not(#fx) .main > :not(.app-topbar):not(dialog) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html.is-admin:not(#fx) .main > .school-section-tabs {
    margin-top: 0 !important;
  }

  html.is-admin:not(#fx) #oaRoot.academic-workspace {
    padding-top: 0 !important;
  }

  /* ---------- Botón de archivo (Carga masiva, logotipo) ---------- */
  html:not(#fx) input[type="file"] {
    color: var(--fx-text-2);
    font-size: 13px;
  }

  html:not(#fx) input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid var(--as-border-strong);
    border-radius: 8px;
    background: var(--as-surface-2);
    color: var(--fx-text);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
  }

  html:not(#fx) input[type="file"]::file-selector-button:hover {
    border-color: var(--fx-accent-line);
    background: var(--fx-accent-soft);
    color: var(--fx-accent);
  }

  /* ---------- Barra de guardado de calificaciones: sólida ---------- */
  html:not(#fx) #bgRoot .bg-savebar {
    background: var(--as-surface) !important;
    border: 1px solid var(--as-border-strong) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html[data-theme="dark"]:not(#fx) #bgRoot .bg-savebar {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45) !important;
  }

  /* ---------- Horarios: botones de celda más ligeros ---------- */
  html:not(#fx) #acRoot .ac-add-module,
  html:not(#fx) #acRoot button[data-add] {
    background: transparent !important;
    border: 1px dashed var(--as-border-strong) !important;
    color: var(--fx-accent) !important;
    box-shadow: none !important;
    font-weight: 650;
  }

  html:not(#fx) #acRoot .ac-add-module:hover,
  html:not(#fx) #acRoot button[data-add]:hover {
    background: var(--fx-accent-soft) !important;
    border-color: var(--fx-accent-line) !important;
    border-style: solid !important;
  }

  html:not(#fx) #acRoot .ac-print-link {
    background: var(--as-surface) !important;
    border: 1px solid var(--as-border-strong) !important;
    color: var(--fx-text) !important;
  }

  html:not(#fx) #acRoot .ac-print-link:hover {
    background: var(--as-surface-2) !important;
  }

  /* ---------- Regularización: el botón Buscar es la acción principal ---------- */
  html:not(#fx) #rgRoot .rg-filters > button {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 650;
  }

  html:not(#fx) #rgRoot .rg-filters > button:hover {
    background: #1d4ed8 !important;
  }

  /* ---------- Credenciales (vista en pantalla; la impresión no cambia) ---------- */
  html:not(#fx) .student-credential .credential-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  html:not(#fx) .student-credential .credential-school {
    min-width: 0;
  }

  html:not(#fx) .student-credential .credential-school :is(b, small) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(#fx) .student-credential .credential-status {
    position: static !important;
    inset: auto !important;
    white-space: nowrap;
    font-size: 11px;
  }

  html:not(#fx) .student-credential .credential-body {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 92px;
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
  }

  html:not(#fx) .student-credential .credential-information {
    display: contents !important;
  }

  html:not(#fx) .student-credential .credential-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
  }

  html:not(#fx) .student-credential .credential-information > h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
  }

  html:not(#fx) .student-credential .credential-information > p {
    grid-column: 2;
    grid-row: 2;
    margin: 2px 0 0;
    font-size: 12.5px;
  }

  html:not(#fx) .student-credential .credential-body > .qr-box {
    width: 92px;
    height: 92px;
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  html:not(#fx) .student-credential .credential-data {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 14px 0 0 !important;
    padding-top: 12px;
    border-top: 1px dashed #d8dee8;
  }

  html:not(#fx) .student-credential .credential-data > div {
    margin: 0 !important;
  }

  html:not(#fx) .student-credential .credential-data dt {
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  html:not(#fx) .student-credential .credential-data dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
}

/* ---------- Animaciones ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Entrada suave y uniforme de cada página (antes solo algunas la tenían). */
  @keyframes fxPageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }

  html.is-admin:not(#fx) .main > :not(.app-topbar):not(dialog):not(.school-section-tabs) {
    animation: fxPageIn .32s cubic-bezier(.2, .7, .2, 1) backwards;
  }

  html.is-admin:not(#fx) .main > :not(.app-topbar):not(dialog):not(.school-section-tabs):nth-child(4) { animation-delay: .04s; }
  html.is-admin:not(#fx) .main > :not(.app-topbar):not(dialog):not(.school-section-tabs):nth-child(5) { animation-delay: .08s; }
  html.is-admin:not(#fx) .main > :not(.app-topbar):not(dialog):not(.school-section-tabs):nth-child(n+6) { animation-delay: .12s; }

  /* Los contenedores de módulo ya no repiten su propia entrada. */
  html.is-admin:not(#fx) :is(.students-v4, .dash-v3, .enrollments-page, #oaRoot.academic-workspace) {
    animation: none !important;
  }

  html.is-admin:not(#fx) .main > :is(.students-v4, .dash-v3, .enrollments-page, #oaRoot.academic-workspace) {
    animation: fxPageIn .32s cubic-bezier(.2, .7, .2, 1) backwards !important;
  }

  /* Ventanas: aparecen con un pequeño acercamiento y el fondo se oscurece suave. */
  @keyframes fxDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
  }

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

  html:not(#fx) dialog[open] {
    animation: fxDialogIn .2s cubic-bezier(.2, .7, .2, 1);
  }

  html:not(#fx) dialog[open]::backdrop {
    animation: fxBackdropIn .2s ease;
  }

  /* Menú lateral en teléfono: la capa oscura aparece con transición. */
  html:not(#fx) .sidebar-backdrop {
    transition: opacity .2s ease, visibility .2s ease;
  }

  /* Tarjetas y filas: respuesta suave al pasar el cursor. */
  html.is-admin:not(#fx) :is(.metric-card, .operation-card, .inf-card, .oa-card, .role-card, .access-role-card, .teacher-card, .quick-link, .db-quick a, .st-kpi, .attendance-quick-nav > a) {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }

  html.is-admin:not(#fx) :is(.inf-card, .oa-card, .attendance-quick-nav > a, .db-quick a):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
  }

  html[data-theme="dark"].is-admin:not(#fx) :is(.inf-card, .oa-card, .attendance-quick-nav > a, .db-quick a):hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  }

  html.is-admin:not(#fx) :is(.side nav a, .school-section-tabs a, .btn, button, .st-action, input, select, textarea) {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: .16s;
    transition-timing-function: ease;
  }

  /* Botones: pequeño "clic" al presionar. */
  html:not(#fx) :is(.btn, button.primary, .st-action, .student-action, .login-v4-submit):active:not(:disabled) {
    transform: translateY(1px) scale(.99);
  }
}

/* Quien pidió menos movimiento en su sistema no ve animaciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media screen {
  /* Llaveros: buscador arriba a todo lo ancho; filtros y contador debajo. */
  html:not(#fx):not(#fx2) .rfid-table-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  html:not(#fx):not(#fx2) .rfid-table-tools > .table-search-wrap {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
  }

  html:not(#fx):not(#fx2) .rfid-table-tools > .table-search-wrap input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  html:not(#fx):not(#fx2) .rfid-table-tools > :is(select, .rfid-table-filter, label) {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media screen {
  /* Actas: el rango de fechas no se sale de la tarjeta en teléfono. */
  html:not(#fx):not(#fx2) .actas-range {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  html:not(#fx):not(#fx2) .actas-range > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  html:not(#fx):not(#fx2) .actas-range :is(label, input) {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Teléfono: indicadores más compactos (menos desplazamiento). */
@media screen and (max-width: 760px) {
  html.is-admin:not(#fx):not(#fx2) .main > .cards,
  html.is-admin:not(#fx):not(#fx2) #oaStats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html.is-admin:not(#fx):not(#fx2) #oaStats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.is-admin:not(#fx):not(#fx2) .main > .cards > * {
    min-height: 0 !important;
    padding: 14px !important;
  }

  html.is-admin:not(#fx):not(#fx2) .main > .cards > * :is(strong, b, h3) {
    font-size: 26px !important;
    line-height: 1.1;
  }

  html.is-admin:not(#fx):not(#fx2) .main > .cards > * :is(span, small, p) {
    font-size: 12px !important;
  }

  html.is-admin:not(#fx):not(#fx2) #oaStats > div {
    display: grid !important;
    justify-items: start;
    gap: 4px;
    min-height: 0 !important;
    padding: 12px !important;
  }

  html.is-admin:not(#fx):not(#fx2) #oaStats > div::before,
  html.is-admin:not(#fx):not(#fx2) #oaStats > div::after {
    display: none !important;
  }

  html.is-admin:not(#fx):not(#fx2) #oaStats strong {
    font-size: 22px !important;
  }

  html.is-admin:not(#fx):not(#fx2) #oaStats span {
    font-size: 11px !important;
    line-height: 1.25;
  }

  /* Credenciales: el QR nunca se desborda. */
  html:not(#fx) .student-credential .qr-box {
    overflow: hidden;
  }

  html:not(#fx) .student-credential .qr-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media screen and (min-width: 761px) {
  html:not(#fx) .student-credential .qr-box {
    overflow: hidden;
  }

  html:not(#fx) .student-credential .qr-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media screen {
  /* Flechas para ordenar columnas en Alumnos: visibles en ambos temas. */
  html:not(#fx):not(#fx2) .st-sort > span {
    color: var(--fx-muted) !important;
    opacity: 1 !important;
  }

  html:not(#fx):not(#fx2) .st-sort.active > span {
    color: var(--fx-accent) !important;
  }
}

@media screen and (max-width: 1180px) {
  /* Informes: los filtros se acomodan en lugar de salirse de la pantalla. */
  html:not(#fx):not(#fx2) .inf-filters {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }

  html:not(#fx):not(#fx2) .inf-filters > * {
    min-width: 0 !important;
  }

  html:not(#fx):not(#fx2) .inf-filters :is(select, input) {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media screen {
  /* Alumnos: los iconos de los indicadores van centrados en su recuadro. */
  html:not(#fx):not(#fx2) .st-kpi {
    align-items: center !important;
  }

  html:not(#fx):not(#fx2) .st-kpi-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto;
    line-height: 0 !important;
  }

  html:not(#fx):not(#fx2) .st-kpi-icon > svg {
    display: block;
    margin: 0 !important;
  }

  /* Botones con icono y texto: ambos al mismo nivel. */
  html:not(#fx):not(#fx2) :is(.st-row-action, .st-action) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    line-height: 1 !important;
  }

  html:not(#fx):not(#fx2) :is(.st-row-action, .st-action) > svg {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  /* Pastilla vacía (sin dato de sexo): muestra un guion como las demás. */
  html:not(#fx):not(#fx2) .st-pill:empty::before {
    content: "—";
  }

  html:not(#fx):not(#fx2) .st-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
  }
}

/* Asistencias · encabezado fijo por encima de la columna fija de alumnos.
   Antes el encabezado y los nombres tenían el mismo z-index y, al bajar,
   los nombres se encimaban sobre el encabezado de la tabla. */
html.is-admin .attendance-page #asTable thead th { z-index: 5; }
html.is-admin .attendance-page #asTable thead th.as-student,
html.is-admin .attendance-page #asTable thead th.as-n { z-index: 6; }
html.is-admin .attendance-page #asTable tbody .as-student { z-index: 1; }

/* Campos obligatorios (*) */
.req-mark { color: #dc2626; font-weight: 800; }
html[data-theme="dark"] .req-mark { color: #f87171; }
.req-legend { margin: 6px 0 0; color: var(--as-muted, #64748b); font-size: 12.5px; }
.req-legend .req-mark { margin-right: 2px; }
label > span .req-mark { margin-left: 1px; }

/* Asistencias · retirar el registro de un día anterior */
.pg-asistencias button.as-clear-day {
  display: block;
  width: 100%;
  min-height: 28px;
  margin-top: 5px;
  padding: 3px 6px;
  border: 1.5px solid #f3b4b4;
  border-radius: 8px;
  background: #fff5f5;
  color: #b42318;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.pg-asistencias button.as-clear-day:hover { background: #fee4e2; border-color: #ef4444; }
html[data-theme="dark"] .pg-asistencias button.as-clear-day { background: rgba(239, 68, 68, .1); border-color: rgba(248, 113, 113, .45); color: #fca5a5; }
html[data-theme="dark"] .pg-asistencias button.as-clear-day:hover { background: rgba(239, 68, 68, .2); border-color: #f87171; }
@media print { .pg-asistencias button.as-clear-day { display: none !important; } }

/* Expediente · zona de riesgo (eliminar alumno) */
.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  border: 1.5px solid #fecaca !important;
  background: #fff7f7 !important;
}
.danger-zone[hidden] { display: none !important; }
.danger-zone-text { min-width: 0; max-width: 760px; }
.danger-zone small { display: block; margin-bottom: 4px; color: #b91c1c; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; }
.danger-zone h3 { margin: 0 0 6px; color: #7f1d1d; }
.danger-zone p { margin: 0; color: #7f1d1d; font-size: 13.5px; line-height: 1.55; }
html:not(#fx) .btn.danger-zone-btn { flex: 0 0 auto; border: 1.5px solid #dc2626 !important; background: #fff !important; color: #b91c1c !important; box-shadow: none !important; }
html:not(#fx) .btn.danger-zone-btn:hover { background: #fef2f2 !important; }
html:not(#fx) .btn.danger-zone-btn.is-solid { background: #dc2626 !important; color: #fff !important; }
html:not(#fx) .btn.danger-zone-btn.is-solid:hover { background: #b91c1c !important; }
html:not(#fx) .btn.danger-zone-btn:disabled { opacity: .45; cursor: not-allowed; }
html[data-theme="dark"] .danger-zone { border-color: rgba(248, 113, 113, .4) !important; background: rgba(127, 29, 29, .18) !important; }
html[data-theme="dark"] .danger-zone small { color: #fca5a5; }
html[data-theme="dark"] .danger-zone :is(h3, p) { color: #fecaca; }
html[data-theme="dark"]:not(#fx) .btn.danger-zone-btn:not(.is-solid) { background: transparent !important; color: #fca5a5 !important; border-color: rgba(248, 113, 113, .6) !important; }
.danger-dialog { width: min(560px, calc(100vw - 32px)); }
.danger-list { padding: 12px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #7f1d1d; font-size: 13.5px; }
.danger-list ul { margin: 6px 0 0; padding-left: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.danger-list p { margin: 6px 0 0; }
.danger-note { color: #9f1239; font-size: 12.5px; }
.danger-key { font-family: ui-monospace, Menlo, Consolas, monospace; color: #b91c1c; letter-spacing: .02em; }
html[data-theme="dark"] .danger-list { border-color: rgba(248, 113, 113, .4); background: rgba(127, 29, 29, .22); color: #fecaca; }
html[data-theme="dark"] .danger-note, html[data-theme="dark"] .danger-key { color: #fca5a5; }
@media (max-width: 760px) {
  .danger-zone { flex-direction: column; align-items: stretch; }
  .danger-zone .btn { justify-content: center; }
  .danger-list ul { grid-template-columns: minmax(0, 1fr); }
}
.danger-zone p b { color: inherit; }
@layer aulasimple-modal {
  html:not(#fx):not(#fx2) .danger-dialog .btn.danger-zone-btn.is-solid { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; box-shadow: none !important; }
  html:not(#fx):not(#fx2) .danger-dialog .btn.danger-zone-btn.is-solid:hover:not(:disabled) { background: #b91c1c !important; }
  html:not(#fx):not(#fx2) .danger-dialog .btn.danger-zone-btn.is-solid:disabled { opacity: .45 !important; cursor: not-allowed; }
  html:not(#fx):not(#fx2) .danger-dialog label > span { display: block; }
  html:not(#fx):not(#fx2) .danger-dialog .danger-key { display: inline; font-size: 14px; }
}

/* Expediente › Tutores: aviso de tutor compartido con hermanos */
.tutor-shared-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
html[data-theme="dark"] .tutor-shared-note { background: rgba(59, 130, 246, .12); color: #bfdbfe; border-color: rgba(59, 130, 246, .35); }

/* Usuarios › Generar contraseña */
.pw-field { display: grid; gap: 6px; }
.pw-gen { display: flex; gap: 8px; align-items: stretch; }
.pw-gen input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.pw-gen .btn { flex: 0 0 auto; white-space: nowrap; }
.pw-hint { color: var(--as-muted, #64748b); font-size: 12px; line-height: 1.45; font-weight: 400; }
.pw-hint code { font-size: 12px; }
.pw-link { all: unset; cursor: pointer; color: var(--as-primary, #2563eb); font-weight: 600; }
.pw-link:hover, .pw-link:focus-visible { text-decoration: underline; }
@media (max-width: 480px) { .pw-gen { flex-direction: column; } }

/* Usuarios › Copiar accesos */
/* Columna de acciones: Editar y Accesos uno sobre otro, del mismo ancho, sin salirse de la tabla. */
.users-table th:last-child { width: 132px; }
.acc-row-actions { display: inline-grid; grid-template-columns: 1fr; gap: 6px; width: 100%; max-width: 116px; }
.acc-row-actions .table-action { width: 100%; min-height: 32px !important; padding: 0 10px !important; font-size: 13px; justify-content: center; }
.acc-row-actions .acc-copy-btn::after { content: none !important; }
.acc-row-actions .table-action { margin: 0 !important; }
@media (max-width: 760px) {
  .users-table th:last-child { width: auto; }
  .acc-row-actions { grid-template-columns: 1fr 1fr; max-width: none; }
}
.acc-new { display: grid; gap: 12px; border-left: 4px solid #16a34a; }
.acc-new small { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #15803d; }
.acc-new h3 { margin: 2px 0; }
.acc-new p { margin: 0; color: var(--as-muted, #64748b); }
.acc-text { margin: 0; padding: 12px 14px; border: 1px dashed var(--as-border, #dde4ee); border-radius: 10px; background: var(--as-surface-2, #f8fafc); font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.acc-new .form-actions { justify-content: flex-start; }