/*
 * Plataforma Docente · sistema visual institucional
 *
 * Esta capa es deliberadamente semántica: mantiene los selectores históricos
 * que usa la lógica de cada módulo, pero todos consumen los mismos tokens y
 * patrones visuales. Los alias --clay-* permanecen únicamente por compatibilidad.
 */

:root {
  color-scheme: light;
  --ui-canvas: #e9edef;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f6f8f7;
  --ui-surface-muted: #edf1ef;
  --ui-text: #17211b;
  --ui-text-muted: #5d6861;
  --ui-border: #d5ddd8;
  --ui-border-strong: #b9c5be;
  --ui-primary: var(--user-primary, #388e3c);
  --ui-on-primary: var(--on-user-primary, #ffffff);
  --ui-primary-soft: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface));
  --ui-primary-muted: color-mix(in srgb, var(--ui-primary) 17%, var(--ui-surface));
  --ui-accent: #e5c64f;
  --ui-accent-soft: #fff8d8;
  --ui-favorite: #8a6d00;
  --ui-favorite-strong: #6d5600;
  --ui-favorite-soft: #fff1ae;
  --ui-danger: #b3261e;
  --ui-danger-soft: #fff0ee;
  --ui-success: #176b45;
  --ui-success-soft: #eaf7ef;
  --ui-warning: #8a5a08;
  --ui-warning-soft: #fff7df;
  --ui-radius-xs: 6px;
  --ui-radius-sm: 9px;
  --ui-radius-md: 13px;
  --ui-radius-lg: 17px;
  --ui-shadow-1: 0 1px 2px rgba(23, 33, 27, .06), 0 6px 18px rgba(23, 33, 27, .045);
  --ui-shadow-2: 0 18px 44px rgba(15, 25, 18, .16);
  --ui-focus: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 24%, transparent);

  /* Compatibilidad con módulos existentes mientras migran al vocabulario UI. */
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --surface: var(--ui-surface);
  --surface-soft: var(--ui-canvas);
  --panel: var(--ui-surface);
  --line: var(--ui-border);
  --border: var(--ui-border);
  --primary: var(--ui-primary);
  --primary-dark: color-mix(in srgb, var(--ui-primary) 76%, #000000);
  --primary-soft: var(--ui-primary-soft);
  --accent: var(--ui-accent);
  --accent-soft: var(--ui-accent-soft);
  --danger: var(--ui-danger);
  --success: var(--ui-success);
  --warning: var(--ui-warning-soft);
  --warning-line: #ddc36b;
  --shadow: var(--ui-shadow-1);
  --clay-bg: var(--ui-canvas);
  --clay-surface: var(--ui-surface-subtle);
  --clay-surface-strong: var(--ui-surface);
  --clay-primary: var(--ui-primary);
  --clay-primary-deep: var(--primary-dark);
  --clay-primary-soft: var(--ui-primary-soft);
  --clay-secondary-soft: var(--ui-accent-soft);
  --clay-radius-card: var(--ui-radius-lg);
  --clay-radius-control: var(--ui-radius-sm);
  --clay-shadow-light: transparent;
  --clay-shadow-dark: transparent;
  --clay-card-shadow: var(--ui-shadow-1);
  --clay-card-shadow-soft: var(--ui-shadow-1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: #0b100d;
  --ui-surface: #202923;
  --ui-surface-subtle: #27322c;
  --ui-surface-muted: #303d36;
  --ui-text: #edf3ef;
  --ui-text-muted: #abb8b0;
  --ui-border: #435149;
  --ui-border-strong: #5b6b62;
  --ui-primary-soft: color-mix(in srgb, var(--ui-primary) 20%, var(--ui-surface));
  --ui-primary-muted: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-surface));
  --ui-accent: #e6cc67;
  --ui-accent-soft: #39351f;
  --ui-favorite: #d9be55;
  --ui-favorite-strong: #f4d96b;
  --ui-favorite-soft: #514813;
  --ui-danger: #ffb4ab;
  --ui-danger-soft: #3d2421;
  --ui-success: #8ed5ad;
  --ui-success-soft: #1d3528;
  --ui-warning: #f0cf72;
  --ui-warning-soft: #39311c;
  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px rgba(0, 0, 0, .18);
  --ui-shadow-2: 0 22px 54px rgba(0, 0, 0, .46);
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --surface: var(--ui-surface);
  --surface-soft: var(--ui-canvas);
  --panel: var(--ui-surface);
  --line: var(--ui-border);
  --border: var(--ui-border);
  --danger: var(--ui-danger);
  --success: var(--ui-success);
  --warning: var(--ui-warning-soft);
  --warning-line: #6f6331;
  --clay-bg: var(--ui-canvas);
  --clay-surface: var(--ui-surface-subtle);
  --clay-surface-strong: var(--ui-surface);
  --clay-primary-soft: var(--ui-primary-soft);
  --clay-secondary-soft: var(--ui-accent-soft);
  --clay-shadow-light: transparent;
  --clay-shadow-dark: transparent;
  --clay-card-shadow: var(--ui-shadow-1);
  --clay-card-shadow-soft: var(--ui-shadow-1);
}

* { scrollbar-color: var(--ui-border-strong) transparent; }

body {
  color: var(--ui-text);
  background: var(--ui-canvas);
}

a { color: color-mix(in srgb, var(--ui-primary) 78%, var(--ui-text)); }

button,
input,
select,
textarea { font-family: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Componente: barra institucional                                             */
/* -------------------------------------------------------------------------- */

pd-app-header { display: contents; }

.topbar.ui-app-header,
.topbar {
  position: sticky;
  z-index: 60;
  top: 0;
  min-height: 64px;
  padding: 9px clamp(18px, 3vw, 42px);
  border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  box-shadow: 0 1px 0 rgba(23, 33, 27, .025);
  backdrop-filter: blur(14px);
}

.brand { gap: 11px; }

.brand-mark {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 82%, #000000);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-on-primary);
  background: var(--ui-primary);
  box-shadow: none;
  font-size: .82rem;
  letter-spacing: .035em;
}

.brand-copy { min-width: 0; }
.brand strong { font-size: .92rem; letter-spacing: -.01em; }
.brand small { color: var(--ui-text-muted); font-size: .71rem; }

.topbar-actions { gap: 7px; }

.ui-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ui-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Componente: acciones                                                        */
/* -------------------------------------------------------------------------- */

.button,
.planning-mini-action,
.agenda-icon-button {
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
  font-weight: 760;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.button:hover:not(:disabled),
.planning-mini-action:hover:not(:disabled),
.agenda-icon-button:hover:not(:disabled) { transform: translateY(-1px); }

.button:active:not(:disabled),
.planning-mini-action:active:not(:disabled),
.agenda-icon-button:active:not(:disabled) { transform: translateY(0); }

.button-primary {
  color: var(--ui-on-primary);
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  box-shadow: none;
}

.button-primary:hover:not(:disabled) {
  color: var(--ui-on-primary);
  border-color: color-mix(in srgb, var(--ui-primary) 82%, #000000);
  background: color-mix(in srgb, var(--ui-primary) 88%, #000000);
  filter: none;
}

.button-secondary {
  color: color-mix(in srgb, var(--ui-primary) 78%, var(--ui-text));
  border-color: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-border));
  background: var(--ui-primary-soft);
  box-shadow: none;
}

.button-secondary:hover:not(:disabled) { background: var(--ui-primary-muted); }

.button-quiet {
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: none;
}

.button-quiet:hover:not(:disabled) {
  color: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-text));
  border-color: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-border));
  background: var(--ui-primary-soft);
}

.button-danger { color: #ffffff; border-color: #a31f19; background: #b3261e; }
.button-danger-quiet { color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 42%, var(--ui-border)); background: var(--ui-danger-soft); }

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-quiet { color: var(--ui-text); }

/* -------------------------------------------------------------------------- */
/* Componente: barra de contexto y cabeceras de sección                        */
/* -------------------------------------------------------------------------- */

.module-context-bar,
.grades-top-card,
.auto-coeval-top-card,
.school-hub-heading,
.schedules-module-heading,
.documents-heading,
.civic-module-heading,
.agenda-module-heading,
.field-journal-module-heading {
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
  backdrop-filter: none;
}

.module-context-bar {
  min-height: 52px;
  padding: 6px 9px 6px 6px;
}

/* Diario reutiliza la barra contextual también dentro del editor. */
.module-context-bar.journal-editor-context { margin-bottom: 0; }
.journal-editor-context .module-context-identity { flex: 1 1 auto; flex-wrap: wrap; gap: 6px 8px; line-height: 1.3; white-space: normal; }
.journal-editor-context h2 { min-width: 0; margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.journal-editor-context .module-context-actions { width: auto; margin-left: auto; gap: 8px; }
@media (max-width: 520px) {
  .journal-editor-context .module-context-identity { flex-basis: 100px; }
  .journal-editor-context .module-context-actions { flex-shrink: 0; }
}

/* Horarios: el año es una acción contextual compacta, no un campo de
   formulario. Etiqueta, selector y actualización comparten una sola fila. */
.module-context-bar .module-context-actions:has(.schedule-year-control) {
  align-items: center;
  gap: 10px;
}

.module-context-bar .schedule-year-control {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.module-context-bar .schedule-year-control select {
  width: 118px;
  min-width: 118px;
  margin: 0;
}

@media (max-width: 560px) {
  .module-context-bar .module-context-actions:has(.schedule-year-control) {
    flex-wrap: nowrap;
  }

  .module-context-bar .schedule-year-control {
    flex: 1 1 auto;
    gap: 7px;
  }

  .module-context-bar .schedule-year-control select {
    width: 100%;
    min-width: 74px;
  }
}

.module-back-icon-button,
.auto-coeval-back-button,
.grades-back-button,
.civic-editor-back {
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background: var(--ui-surface-subtle);
}

.module-context-school { color: var(--ui-text); }
.module-context-name,
.module-context-separator { color: var(--ui-text-muted); }

.eyebrow {
  color: color-mix(in srgb, var(--ui-primary) 74%, var(--ui-text));
  font-size: .72rem;
  letter-spacing: .105em;
}

/* -------------------------------------------------------------------------- */
/* Componente: superficies, cards y diálogos                                  */
/* -------------------------------------------------------------------------- */

.auth-card,
.form-card,
.school-card,
.privacy-card,
.classroom-sidebar,
.classroom-detail,
.subjects-classroom-sidebar,
.subjects-detail-panel,
.subject-master-card,
.attendance-classroom-sidebar,
.attendance-main-heading,
.attendance-table-card,
.grades-classroom-sidebar,
.grades-main-heading,
.grades-gradebook-heading,
.grades-period-strip,
.grades-term-summary-card,
.grades-activities-card,
.grades-matrix-card,
.grades-final-summary,
.evaluation-classroom-sidebar,
.evaluation-processes-panel,
.planning-subjects-panel,
.planning-subject-main > .planning-web-heading,
.planning-units-panel,
.planning-plans-panel,
.planning-plan-editor,
.field-journal-overview,
.field-journal-editor,
.agenda-calendar-card,
.agenda-list-card,
.civic-classroom-panel,
.civic-scripts-panel,
.schedule-navigation-card,
.schedule-content-card,
.documents-navigation-card,
.documents-content-panel,
.auto-coeval-classroom-sidebar,
.auto-coeval-section-panel,
.appearance-dialog,
.classroom-create-dialog,
.student-dialog,
.student-action-dialog-card,
.subject-editor-dialog,
.subject-delete-dialog,
.grades-dialog,
.evaluation-create-dialog,
.evaluation-students-dialog {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
}

.classroom-create-dialog,
.student-dialog,
.subject-editor-dialog,
.subject-delete-dialog,
.grades-dialog,
.evaluation-create-dialog,
.evaluation-students-dialog,
.appearance-dialog { box-shadow: var(--ui-shadow-2); }

dialog::backdrop {
  background: rgba(5, 12, 8, .58);
  backdrop-filter: blur(3px);
}

/* -------------------------------------------------------------------------- */
/* Componente: modal institucional                                             */
/* -------------------------------------------------------------------------- */

.ui-modal:not(.ui-modal--immersive) {
  --ui-modal-width: 840px;
  --ui-modal-padding: clamp(24px, 3vw, 32px);
  width: min(var(--ui-modal-width), calc(100vw - 36px));
  max-width: var(--ui-modal-width);
  max-height: min(90dvh, 940px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--ui-border-strong);
  border-radius: 20px;
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-2);
}

.ui-modal--compact { --ui-modal-width: 680px; }
.ui-modal--standard { --ui-modal-width: 840px; }
.ui-modal--wide { --ui-modal-width: 1060px; }

.ui-modal:not(.ui-modal--immersive)[open] {
  animation: ui-modal-enter .18s ease-out;
}

.ui-modal:not(.ui-modal--immersive)::backdrop {
  background: rgba(4, 10, 7, .64);
  backdrop-filter: blur(4px) saturate(.82);
}

/* Los diálogos históricos mantienen su estructura y reciben un espaciado
   común. Los shells complejos conservan sus regiones internas propias. */
.ui-modal:not(.ui-modal--immersive):not(.appearance-dialog) > form,
.ui-modal:not(.ui-modal--immersive):not(.appearance-dialog) > .form-stack {
  padding: var(--ui-modal-padding);
}

.ui-modal:not(.ui-modal--immersive) > form > :is(
  .section-heading,
  .dialog-title-row,
  .classroom-dialog-heading,
  .student-dialog-heading,
  .grades-dialog-heading,
  .evaluation-dialog-heading,
  .planning-unit-dialog-heading
):first-child,
.ui-modal:not(.ui-modal--immersive) > .form-stack > :is(
  .section-heading,
  .dialog-title-row,
  .classroom-dialog-heading,
  .student-dialog-heading,
  .grades-dialog-heading,
  .evaluation-dialog-heading,
  .planning-unit-dialog-heading
):first-child {
  margin-bottom: 2px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ui-border);
}

.ui-modal:not(.ui-modal--immersive) > form > :is(.dialog-actions, .button-row):last-child,
.ui-modal:not(.ui-modal--immersive) > .form-stack > :is(.dialog-actions, .button-row):last-child {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--ui-border);
}

/* Gestión de estudiantes: cabecera breve y cards elevadas por contraste. */
#evaluationStudentsDialog {
  --student-dialog-surface: var(--ui-surface-subtle);
  --student-card-surface: var(--ui-surface);
  background: var(--student-dialog-surface);
}

html[data-theme="dark"] #evaluationStudentsDialog {
  --student-dialog-surface: var(--ui-surface);
  --student-card-surface: var(--ui-surface-subtle);
}

#evaluationStudentsDialog .evaluation-students-dialog-heading {
  align-items: center;
  gap: 12px;
  padding: 14px 20px 10px;
}

#evaluationStudentsDialog .evaluation-students-dialog-heading h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

#evaluationStudentsDialog .evaluation-students-dialog-heading p {
  margin: 4px 0 0;
  font-size: .76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#evaluationStudentsDialog .evaluation-dialog-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-muted);
  background: var(--student-card-surface);
  font-size: 1.2rem;
  cursor: pointer;
}

#evaluationStudentsDialog .evaluation-dialog-close:hover { color: var(--ui-text); border-color: var(--ui-primary); }
#evaluationStudentsDialog .evaluation-dialog-close:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }

#evaluationStudentsDialog .evaluation-students-dialog-toolbar {
  align-items: center;
  gap: 12px;
  padding: 0 20px 12px;
  border-color: var(--ui-border);
}

#evaluationStudentsDialog .evaluation-students-search-field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
  gap: 10px;
  font-family: inherit;
}

#evaluationStudentsDialog input[type="search"] {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--ui-radius-sm);
  background: var(--student-card-surface);
}

#evaluationStudentsDialog .evaluation-count {
  flex-shrink: 0;
  color: var(--ui-text);
  background: var(--ui-primary-soft);
}

#evaluationStudentsDialog .evaluation-student-dialog-list { gap: 10px; padding-top: 12px; }

#evaluationStudentsDialog .evaluation-student-row {
  border-color: var(--ui-border);
  background: var(--student-card-surface);
  cursor: pointer;
}

#evaluationStudentsDialog .evaluation-student-row:hover {
  border-color: var(--ui-border-strong);
  background: color-mix(in srgb, var(--ui-primary) 6%, var(--student-card-surface));
}

#evaluationStudentsDialog .evaluation-student-row.is-selected {
  border-color: var(--ui-primary);
  background: color-mix(in srgb, var(--ui-primary) 17%, var(--student-card-surface));
}

#evaluationStudentsDialog .evaluation-student-row:focus-within {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

#evaluationStudentsDialog .evaluation-student-number { background: var(--student-dialog-surface); color: var(--ui-primary); }
#evaluationStudentsDialog .evaluation-students-dialog-footer { background: var(--student-dialog-surface); border-color: var(--ui-border); }

@media (max-width: 520px) {
  #evaluationStudentsDialog .evaluation-students-dialog-heading { padding: 12px 14px 10px; }
  #evaluationStudentsDialog .evaluation-students-dialog-toolbar { align-items: stretch; padding-inline: 14px; gap: 8px; }
  #evaluationStudentsDialog .evaluation-count { align-self: flex-end; }
  #evaluationStudentsDialog .evaluation-student-dialog-list { padding-inline: 14px; }
}

.ui-modal--wide .field-row,
.ui-modal--wide .auto-coeval-target-grid {
  column-gap: 18px;
}

.ui-modal--wide .evaluation-student-dialog-list,
.ui-modal--wide .evaluation-reference-dialog-body,
.ui-modal--wide .planning-block-config-body {
  max-height: min(58dvh, 620px);
}

@keyframes ui-modal-enter {
  from { opacity: 0; transform: translateY(8px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .ui-modal:not(.ui-modal--immersive) {
    --ui-modal-padding: 20px;
    width: min(100% - 18px, var(--ui-modal-width));
    max-height: calc(100dvh - 18px);
    border-radius: 16px;
  }
}

.classroom-dialog-icon,
.student-dialog-icon,
.evaluation-dialog-icon {
  border-radius: var(--ui-radius-md);
  color: var(--ui-on-primary);
  background: var(--ui-primary);
  box-shadow: none;
}

.dialog-icon-close,
.dialog-close-button {
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-muted);
  background: var(--ui-surface-subtle);
}

/* -------------------------------------------------------------------------- */
/* Componente: navegación contextual izquierda                                */
/* -------------------------------------------------------------------------- */

.classroom-sidebar,
.subjects-classroom-sidebar,
.attendance-classroom-sidebar,
.grades-classroom-sidebar,
.evaluation-classroom-sidebar,
.planning-subjects-panel,
.auto-coeval-classroom-sidebar,
.civic-classroom-panel,
.schedule-navigation-card,
.documents-navigation-card,
.documents-sidebar {
  background: var(--ui-surface-subtle);
  box-shadow: none;
}

.civic-browser-card-heading,
.schedule-navigation-heading,
.documents-navigation-heading,
.attendance-sidebar-heading,
.grades-sidebar-heading,
.evaluation-sidebar-heading {
  color: var(--ui-on-primary);
  background: var(--ui-primary);
  box-shadow: none;
}

/* En Evaluaciones, la cabecera pertenece al rail de navegación y no es una
   acción. Se integra al panel para que el primario destaque la selección. */
.evaluation-classroom-sidebar .evaluation-sidebar-heading {
  margin: 0 2px 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
}

.evaluation-classroom-sidebar .evaluation-sidebar-heading .eyebrow {
  color: var(--ui-primary);
}

.evaluation-classroom-sidebar .evaluation-sidebar-heading small {
  color: var(--ui-text-muted);
}

.classroom-list-button,
.subject-classroom-card,
.attendance-classroom-card,
.grades-classroom-card,
.evaluation-classroom-card,
.planning-subject-card,
.auto-coeval-aula-card,
.civic-classroom-card,
.schedule-tab,
.documents-navigation-item,
.civic-history-card,
.document-item {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: none;
}

.classroom-list-button:hover,
.classroom-list-button.is-active,
.subject-classroom-card:hover,
.subject-classroom-card.is-selected,
.attendance-classroom-card:hover,
.attendance-classroom-card.is-selected,
.grades-classroom-card:hover,
.grades-classroom-card.is-selected,
.evaluation-classroom-card:hover,
.evaluation-classroom-card.is-selected,
.planning-subject-card:hover,
.planning-subject-card.is-active,
.auto-coeval-aula-card:hover,
.auto-coeval-aula-card.is-selected,
.civic-classroom-card:hover,
.civic-classroom-card.is-active,
.schedule-tab:hover,
.schedule-tab.is-active,
.documents-navigation-item:hover,
.documents-navigation-item.is-active,
.civic-history-card:hover,
.civic-history-card.is-active {
  border-color: color-mix(in srgb, var(--ui-primary) 52%, var(--ui-border));
  color: var(--ui-text);
  background: var(--ui-primary-soft);
  box-shadow: inset 3px 0 0 var(--ui-primary);
  transform: none;
}

/* Selector contextual reutilizable. Asistencia y Horarios comparten desde
   aquí estructura, espaciado, estados e iconografía; sólo cambia el contenido. */
.ui-context-selector-card {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  text-align: left;
  box-shadow: none;
}

.ui-context-selector-card__icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.ui-context-selector-card__icon svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.ui-context-selector-card__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ui-context-selector-card__copy strong,
.ui-context-selector-card__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-context-selector-card__copy strong {
  color: var(--ui-text);
  font-size: .9rem;
  line-height: 1.2;
}

.ui-context-selector-card__copy small {
  color: var(--ui-text-muted);
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.2;
}

.ui-context-selector-card:is(:hover, .is-active, .is-selected) {
  border-color: color-mix(in srgb, var(--ui-primary) 52%, var(--ui-border));
  color: var(--ui-text);
  background: var(--ui-primary-soft);
  box-shadow: inset 3px 0 0 var(--ui-primary);
  transform: none;
}

html[data-theme="dark"] .ui-context-selector-card:is(:hover, .is-active, .is-selected) {
  background: var(--ui-primary-soft);
}

.ui-context-selector-card .schedule-tab-arrow { display: none; }

/* Tarjeta de aula compartida. Replica el orden visual de AulaCard en Android:
   icono propio, nombre, metadatos y favorito con el secundario dorado. */
.ui-classroom-card.ui-classroom-card {
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  text-align: left;
  box-shadow: none;
  transform: none;
}

.ui-classroom-card span { margin-top: 0; }

.ui-classroom-card > .ui-classroom-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.ui-classroom-card__classroom-icon {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.ui-classroom-card > .ui-classroom-card__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ui-classroom-card .ui-classroom-card__title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-classroom-card__title strong,
.ui-classroom-card__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-classroom-card__title strong {
  min-width: 0;
  color: var(--ui-text);
  font-size: .9rem;
  line-height: 1.2;
}

.ui-classroom-card__copy small {
  color: var(--ui-text-muted);
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.2;
}

.ui-classroom-card .ui-classroom-card__favorite {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  color: var(--ui-favorite);
}

.ui-classroom-card__favorite-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ui-classroom-card:is(:hover, .is-active, .is-selected) {
  border-color: color-mix(in srgb, var(--ui-primary) 52%, var(--ui-border));
  color: var(--ui-text);
  background: var(--ui-primary-soft);
  box-shadow: inset 3px 0 0 var(--ui-primary);
  transform: none;
}

.ui-classroom-card.is-favorite {
  border-color: color-mix(in srgb, var(--ui-favorite) 48%, var(--ui-border));
  background: var(--ui-favorite-soft);
}

.ui-classroom-card.is-favorite .ui-classroom-card__icon {
  color: var(--ui-favorite-strong);
  background: color-mix(in srgb, var(--ui-favorite) 18%, var(--ui-favorite-soft));
}

.ui-classroom-card.is-favorite .ui-classroom-card__title strong,
.ui-classroom-card.is-favorite .ui-classroom-card__copy small {
  color: var(--ui-favorite-strong);
}

.ui-classroom-card.is-favorite:is(:hover, .is-active, .is-selected) {
  border-color: var(--ui-favorite);
  background: color-mix(in srgb, var(--ui-favorite) 18%, var(--ui-favorite-soft));
  box-shadow: inset 3px 0 0 var(--ui-favorite);
}

html[data-theme="dark"] .ui-classroom-card.is-favorite {
  background: var(--ui-favorite-soft);
}

/* Asistencia · selector de mes unificado. El contenedor completo activa el
   picker y el chrome nativo queda oculto para evitar iconos y focos duplicados. */
.attendance-period-context-control.attendance-period-context-control {
  width: 216px;
  min-width: 216px;
  height: 44px;
  margin: 0;
  padding: 0 38px 0 13px;
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
}

.attendance-period-context-control.attendance-period-context-control:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-border));
  background: var(--ui-primary-soft);
  box-shadow: none;
}

.attendance-period-context-control.attendance-period-context-control:focus-within {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: none;
}

.attendance-period-context-control.attendance-period-context-control::after {
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--ui-text-muted);
  opacity: .9;
  pointer-events: none;
}

.attendance-period-calendar-icon {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  flex: 0 0 19px;
  color: var(--ui-primary);
}

.attendance-period-calendar-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attendance-period-context-control.attendance-period-context-control input[type="month"] {
  width: 146px;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none !important;
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  pointer-events: none;
}

.attendance-period-context-control input[type="month"]::-webkit-calendar-picker-indicator {
  display: none;
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.attendance-period-context-control input[type="month"]::-webkit-datetime-edit,
.attendance-period-context-control input[type="month"]::-webkit-datetime-edit-fields-wrapper {
  margin: 0;
  padding: 0;
  background: transparent;
}

.attendance-view-mode-button.attendance-view-mode-button {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
}

.attendance-view-mode-button.attendance-view-mode-button:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-border));
  background: var(--ui-primary-soft);
  box-shadow: none;
  transform: none;
}

.attendance-view-mode-button.attendance-view-mode-button[aria-pressed="true"] {
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
  background: var(--ui-primary);
}

.attendance-view-mode-button .attendance-view-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Registro rápido: el patrón Android se adapta a un modal ancho de escritorio.
   La jerarquía mantiene un estudiante y una decisión por paso. */
.quick-attendance-dialog.ui-modal {
  --ui-modal-width: 900px;
  overflow: hidden;
  color: var(--ui-text);
  background: var(--ui-surface);
}

.quick-attendance-dialog-shell {
  display: grid;
  max-height: min(90dvh, 820px);
  overflow: auto;
}

.quick-attendance-dialog-heading {
  padding: 24px 26px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}

.quick-attendance-dialog-heading .eyebrow,
.quick-success .eyebrow {
  margin: 0 0 5px;
  color: var(--ui-primary);
}

.quick-attendance-dialog-heading h2,
.quick-student-card h3,
.quick-success h3 {
  margin: 0;
  color: var(--ui-text);
}

.quick-attendance-dialog-heading h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

.quick-attendance-dialog-heading p {
  margin: 6px 0 0;
  color: var(--ui-text-muted);
}

.quick-student-panel,
.quick-success {
  padding: clamp(22px, 3vw, 30px);
}

.quick-progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ui-text-muted);
}

.quick-progress.quick-progress {
  margin: 0;
  color: var(--ui-text);
  font-size: .82rem;
  letter-spacing: .04em;
}

#quickProgressPercent {
  color: var(--ui-primary);
  font-size: .84rem;
  font-weight: 800;
}

.quick-progress-track {
  height: 8px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-surface-muted);
}

.quick-progress-track > span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--ui-primary);
  transition: width .2s ease;
}

.quick-student-card {
  margin-top: 20px;
  padding: 20px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-primary-soft);
}

.quick-student-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ui-on-primary);
  background: var(--ui-primary);
}

.quick-student-icon svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

.quick-student-card p {
  margin: 0 0 3px;
  color: var(--ui-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.quick-student-card h3 {
  overflow-wrap: anywhere;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

.quick-student-card .muted {
  display: inline-block;
  margin-top: 4px;
  font-size: .88rem;
}

.quick-status-fieldset {
  min-width: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.quick-status-fieldset legend {
  margin-bottom: 10px;
  color: var(--ui-text);
  font-size: .9rem;
  font-weight: 800;
}

.quick-status-buttons.quick-status-buttons {
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quick-status.quick-status {
  min-height: 76px;
  padding: 12px 10px;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text-muted);
  background: var(--ui-surface-subtle);
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.quick-status.quick-status:hover {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-muted);
  transform: none;
}

.quick-status.quick-status .android-attendance-icon {
  width: 25px;
  height: 25px;
}

.quick-status.is-present { color: var(--ui-success); }
.quick-status.is-excused { color: var(--ui-warning); }
.quick-status.is-absent { color: var(--ui-danger); }
.quick-status.is-unmarked { color: var(--ui-text-muted); }

.quick-status.is-selected {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, var(--ui-surface));
  box-shadow: var(--ui-focus);
}

.quick-permission.quick-permission {
  margin-top: 14px;
  padding: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 32%, var(--ui-border));
  border-radius: var(--ui-radius-md);
  background: var(--ui-warning-soft);
}

.quick-permission label {
  display: grid;
  gap: 6px;
  color: var(--ui-text);
  font-size: .82rem;
  font-weight: 800;
}

.quick-permission select {
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.quick-feedback {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--ui-text-muted);
  font-size: .82rem;
}

.quick-navigation.quick-navigation {
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ui-border);
}

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

.quick-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ui-success);
  font-size: 2rem;
  font-weight: 900;
}

.quick-success > p:not(.eyebrow) {
  margin: 7px 0 0;
  color: var(--ui-text-muted);
}

.quick-summary-grid {
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quick-summary-item {
  min-width: 0;
  padding: 16px 10px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.quick-summary-item strong {
  color: currentColor;
  font-size: 1.65rem;
}

.quick-success .quick-summary-item span {
  width: auto;
  height: auto;
  margin: 0;
  display: inline;
  border-radius: 0;
  color: var(--ui-text-muted);
  background: transparent;
  font-size: .78rem;
  font-weight: 750;
}

.quick-summary-item.is-present { color: var(--ui-success); }
.quick-summary-item.is-excused { color: var(--ui-warning); }
.quick-summary-item.is-absent { color: var(--ui-danger); }
.quick-summary-item.is-unmarked { color: var(--ui-text-muted); }

.quick-success .button { min-width: 240px; justify-content: center; }

@media (max-width: 760px) {
  .attendance-period-context-control.attendance-period-context-control {
    width: 190px;
    min-width: 190px;
  }

  .quick-attendance-dialog-heading,
  .quick-student-panel,
  .quick-success { padding: 19px; }

  .quick-status-buttons.quick-status-buttons,
  .quick-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .quick-permission.quick-permission { grid-template-columns: 1fr; }
  .quick-permission .button { width: 100%; justify-content: center; }
}

@media (max-width: 430px) {
  .quick-student-card { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .quick-student-icon { width: 44px; height: 44px; }
  .quick-navigation .button { min-width: 0; padding-inline: 11px; }
  .quick-success .button { width: 100%; min-width: 0; }
}

/* El rail de Horarios usa el mismo lenguaje neutro que los selectores de aula;
   el primario queda reservado para el elemento activo. */
.schedule-navigation-card {
  padding: 12px;
  overflow: hidden;
}

.schedule-navigation-card .schedule-navigation-heading {
  min-height: 0;
  margin: 0 2px 10px;
  padding: 0 0 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  background: transparent;
}

.schedule-navigation-card .schedule-navigation-heading-icon {
  width: 34px;
  height: 34px;
  border-color: var(--ui-border);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.schedule-navigation-card .schedule-navigation-heading .eyebrow {
  color: var(--ui-primary);
  opacity: 1;
}

.schedule-navigation-card .schedule-navigation-heading h2 { color: var(--ui-text); }

.schedule-navigation-card .schedule-tabs {
  padding: 0 2px 0 0;
  gap: 9px;
  background: transparent;
}

/* Toolbar y tabla son dos superficies hermanas. La tabla recupera su borde
   superior redondeado y la toolbar puede reutilizarse sin depender de ella. */
.schedule-board-card {
  gap: 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.schedule-board-card .ui-table-toolbar-card {
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
}

.schedule-board-card .schedule-table-wrap.ui-table-shell {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

/* -------------------------------------------------------------------------- */
/* Componente: cards de contenido                                              */
/* -------------------------------------------------------------------------- */

.module-card,
.subject-master-card,
.activity-card,
.grade-group-action-card,
.evaluation-process-card,
.evaluation-reference-card,
.planning-plan-card,
.planning-block-card,
.field-journal-entry-card,
.agenda-event-card,
.civic-script-browser-card,
.civic-participant-card,
.civic-creation-card,
.document-item {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: none;
}

.module-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
}

.module-artwork {
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-primary);
  box-shadow: none;
}

.module-image { filter: none; }

button.module-card:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 48%, var(--ui-border));
  background: var(--ui-primary-soft);
  box-shadow: 0 8px 22px rgba(23, 33, 27, .10);
  transform: translateY(-2px);
}

button.module-card:hover .module-image { filter: none; transform: scale(1.015); }

button.module-card:active {
  background: var(--ui-primary-muted);
  box-shadow: none;
  transform: translateY(0);
}

.subject-master-card:hover,
.activity-card:hover,
.evaluation-process-card:hover,
.planning-plan-card:hover,
.agenda-event-card:hover,
.civic-script-browser-card:hover,
.civic-participant-card:hover,
.civic-creation-card:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-border));
  background: var(--ui-primary-soft);
}

/* -------------------------------------------------------------------------- */
/* Componente: formularios, estados y tablas                                  */
/* -------------------------------------------------------------------------- */

/* Las unidades se presentan directamente sobre el lienzo; el editor conserva su card. */
body[data-start-module="planning"] .planning-web-workspace:not(.is-editor-open) .planning-plans-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-start-module="planning"] #planningPlanList .planning-hierarchy-unit {
  background: var(--ui-surface);
}

/* Controles del modo clase: vectores compartidos y una altura uniforme. */
.planning-class-mode-dialog .planning-class-action-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; }
.planning-class-mode-dialog :is(.planning-class-header-button, .planning-class-start-timer) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.planning-class-mode-dialog .planning-class-controls { align-items: stretch; }
.planning-class-mode-dialog .planning-class-control-button { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; gap: 8px; min-height: 44px; padding: 8px 12px; line-height: 1.25; font-size: .9rem; }
.planning-class-mode-dialog .planning-class-keyboard-hint { align-self: center; }
.planning-class-mode-dialog .planning-class-control-button.is-navigation .planning-class-action-icon { width: 28px; height: 28px; flex-basis: 28px; }
.planning-class-mode-dialog .planning-class-control-button.is-timer .planning-class-action-icon { width: 28px; height: 28px; flex-basis: 28px; }
@media (max-width: 680px) {
  .planning-class-mode-dialog .planning-class-control-button { padding-inline: 8px; font-size: .78rem; }
}

/* Preparación del modo clase: aprovecha el ancho sin afectar la presentación. */
.planning-class-mode-dialog:not(.is-session-active) .planning-class-header {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 58px;
  padding-block: 7px;
}
.planning-class-mode-dialog:not(.is-session-active) .planning-class-header-actions { display: none; }
.planning-class-mode-dialog .planning-class-prepare {
  width: min(calc(100% - 40px), 1100px);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  align-content: safe center;
  gap: 14px;
  padding: clamp(12px, 3vh, 28px) 2px;
  overflow: auto;
}
.planning-class-prepare > .planning-class-ready-card { grid-column: 1 / -1; }
.planning-class-prepare > :is(.planning-class-ready-card, .planning-class-duration-block, .planning-class-help-card) {
  min-width: 0;
  padding: 18px 20px;
  gap: 10px;
  align-content: center;
  box-shadow: none;
}
.planning-class-prepare .planning-class-ready-card h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.planning-class-prepare .planning-class-ready-card p { font-size: .9rem; }
.planning-class-prepare .planning-class-duration-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.planning-class-prepare .planning-class-duration-chip { min-height: 42px; padding: 8px 10px; font-size: .9rem; }
.planning-class-prepare .planning-class-help-card span { font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.planning-class-prepare > .planning-class-start-button {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 18px;
  box-shadow: none;
}
.planning-class-prepare .planning-class-start-button svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 680px) {
  .planning-class-mode-dialog .planning-class-prepare { width: calc(100% - 24px); grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 12px; }
  .planning-class-prepare > :is(.planning-class-ready-card, .planning-class-duration-block, .planning-class-help-card) { padding: 14px 16px; gap: 8px; }
  .planning-class-prepare .planning-class-duration-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planning-class-prepare .planning-class-duration-chip { font-size: .8rem; padding-inline: 5px; }
}
@media (max-height: 600px) {
  .planning-class-mode-dialog .planning-class-prepare { gap: 10px; padding-block: 10px; }
  .planning-class-prepare > :is(.planning-class-ready-card, .planning-class-duration-block, .planning-class-help-card) { padding: 12px 16px; gap: 6px; }
  .planning-class-prepare .planning-class-ready-card h2 { font-size: 1.5rem; }
  .planning-class-prepare .planning-class-help-card span { font-size: .8rem; }
}

/* Identidad de los procesos; el color no sustituye a la etiqueta del tipo. */
/* Ilustración apoyada en la base y con espacio superior dentro del área desplazable. */
.planning-class-mode-dialog .planning-class-prepare {
  --class-ready-art-size: clamp(150px, 18vw, 200px);
  --class-ready-art-rise: 32px;
  padding-top: calc(clamp(12px, 3vh, 28px) + var(--class-ready-art-rise));
}
.planning-class-prepare > .planning-class-ready-card {
  position: relative;
  min-height: calc(var(--class-ready-art-size) - var(--class-ready-art-rise));
  padding-right: calc(var(--class-ready-art-size) + 40px);
  overflow: visible;
}
.planning-class-ready-illustration {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: var(--class-ready-art-size);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 680px) {
  .planning-class-mode-dialog .planning-class-prepare { --class-ready-art-size: 130px; --class-ready-art-rise: 24px; padding-top: calc(12px + var(--class-ready-art-rise)); }
  .planning-class-prepare > .planning-class-ready-card { padding-right: calc(var(--class-ready-art-size) + 20px); }
  .planning-class-ready-illustration { right: 8px; }
}
@media (max-height: 600px) {
  .planning-class-mode-dialog .planning-class-prepare { --class-ready-art-size: 140px; --class-ready-art-rise: 24px; padding-top: calc(10px + var(--class-ready-art-rise)); }
}

/* Card de contenido reutilizable: cabecera, cuerpo compacto y acciones. */
.form-card.ui-content-card {
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: none;
}
.ui-content-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}
.ui-content-card__header h3 { margin: 0; font-size: .94rem; line-height: 1.35; }
.ui-content-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.ui-content-card__icon svg { display: block; width: 21px; height: 21px; fill: currentColor; }
.ui-content-card__subtitle { color: var(--ui-text-muted); font-size: .74rem; }
.ui-content-card__body { display: grid; min-width: 0; gap: 10px; padding: 14px 16px; }
.ui-content-card__body > :is(p, .field-help, .button-row) { margin: 0; }
.ui-content-card .field-help { font-size: .72rem; line-height: 1.45; color: var(--ui-text-muted); }
.ui-content-card .button { min-height: 38px; padding: 8px 12px; font-size: .8rem; }
.ui-content-card input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; font-size: .82rem; }
.ui-content-card__help { font-size: .74rem; line-height: 1.45; color: var(--ui-text-muted); }
.ui-content-card__help summary { width: fit-content; cursor: pointer; color: var(--ui-primary); font-weight: 700; }
.ui-content-card__help summary:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
.ui-content-card__help p { margin: 8px 0 0; }
.ui-content-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}
.auto-coeval-detail-grid { align-items: stretch; gap: 14px; }
.auto-coeval-detail-grid > .ui-content-card { align-self: stretch; }
.form-card.ui-content-card.auto-coeval-progress-card { display: flex; flex-direction: column; }
.auto-coeval-progress-card > .ui-content-card__header { flex: 0 0 auto; }
.auto-coeval-progress-card > .ui-content-card__body { flex: 1; align-content: center; }
.auto-coeval-progress-card .auto-coeval-progress-grid { width: 100%; }
.auto-coeval-progress-card .auto-coeval-progress-grid > div { justify-items: center; text-align: center; }
.auto-coeval-gradebook-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 24%); min-width: 0; }
.auto-coeval-gradebook-illustration { display: grid; place-items: center; padding: 16px; border-left: 1px solid var(--ui-border); background: var(--ui-surface-subtle); }
.auto-coeval-gradebook-illustration img { display: block; width: min(100%, 220px); height: auto; aspect-ratio: 1; object-fit: contain; }
.auto-coeval-classroom-table { min-width: 620px; }
.auto-coeval-classroom-table > thead > tr > th { white-space: nowrap; }
.auto-coeval-classroom-table > tbody > tr > td { height: 68px; padding-top: 10px; padding-bottom: 10px; vertical-align: middle; line-height: 1.35; }
.auto-coeval-classroom-table .auto-coeval-student-name { line-height: 1.35; }
.auto-coeval-classroom-table > tbody > tr > td > small { min-height: 1.3em; margin-top: 3px; font-size: .8rem; line-height: 1.3; white-space: nowrap; }
.auto-coeval-classroom-table > tbody > tr > td:not(:first-child) { white-space: nowrap; }
.auto-coeval-classroom-table .button-small { min-height: 36px; padding: 8px 10px; font-size: .78rem; line-height: 1.25; white-space: nowrap; }
.auto-coeval-classroom-table.is-results th:nth-child(1) { width: 44%; }
.auto-coeval-classroom-table.is-results th:nth-child(2) { width: 12%; }
.auto-coeval-classroom-table.is-results th:nth-child(3) { width: 27%; }
.auto-coeval-classroom-table.is-results th:nth-child(4) { width: 17%; }
.ui-content-card .auto-coeval-status-actions { gap: 8px; }
.ui-content-card .auto-coeval-progress-grid { gap: 8px; }
.ui-content-card .auto-coeval-progress-grid > div { padding: 12px; border-radius: var(--ui-radius-sm); background: var(--ui-canvas); }
.ui-content-card .auto-coeval-progress-grid strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ui-content-card .auto-coeval-progress-grid span { font-size: .74rem; }
.ui-content-card .auto-coeval-weight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0; gap: 14px; }
.ui-content-card .auto-coeval-activity-choice { min-width: 0; font-size: .8rem; }
.ui-content-card .percent-input { width: 100%; min-width: 0; }
.ui-content-card .auto-coeval-gradebook-actions { display: flex; border-left: 0; padding: 12px 16px; }
.ui-content-card .auto-coeval-gradebook-actions > .button { width: auto; min-height: 38px; flex: 0 1 auto; }

@media (max-width: 620px) {
  .auto-coeval-gradebook-body { grid-template-columns: minmax(0, 1fr); }
  .auto-coeval-gradebook-illustration { border-left: 0; border-top: 1px solid var(--ui-border); padding: 12px; }
  .auto-coeval-gradebook-illustration img { width: min(100%, 150px); }
  .ui-content-card__header { padding: 10px 12px; }
  .ui-content-card__body { padding: 12px; }
  .ui-content-card .auto-coeval-weight-grid { grid-template-columns: 1fr; }
  .ui-content-card .auto-coeval-gradebook-actions { padding: 12px; }
  .ui-content-card .auto-coeval-gradebook-actions > .button { flex: 1 1 100%; }
}

.auto-coeval-top-controls { align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-coeval-top-detail { min-width: 0; }
.auto-coeval-top-detail-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.auto-coeval-top-detail h2 { margin: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.auto-coeval-top-detail .status-chip { padding: 3px 8px; font-size: .68rem; }
.auto-coeval-top-detail > p { margin: 4px 0 0; font-size: .76rem; line-height: 1.4; overflow-wrap: anywhere; }
#autoCoevalCreateDialog :is(.auto-coeval-create-context-row, .auto-coeval-weight-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
#autoCoevalCreateDialog label { display: grid; gap: 6px; min-width: 0; }
#autoCoevalCreateDialog :is(select, input, .percent-input) {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  #autoCoevalCreateDialog :is(.auto-coeval-create-context-row, .auto-coeval-weight-grid) { grid-template-columns: 1fr; }
}

.auto-coeval-top-controls .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }

#autoCoevalSectionPanel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.auto-coeval-campaign-list .auto-coeval-campaign-card {
  grid-template-columns: 52px minmax(0, 1fr) auto 16px;
  gap: 12px;
  min-height: 80px;
  padding: 13px 15px;
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-primary);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.auto-coeval-campaign-list .auto-coeval-campaign-card:hover {
  border-color: var(--ui-primary);
  background: color-mix(in srgb, var(--ui-primary) 5%, var(--ui-surface));
  box-shadow: none;
  transform: none;
}
.auto-coeval-campaign-list .auto-coeval-campaign-card:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
.auto-coeval-campaign-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ui-radius-md);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.auto-coeval-campaign-vector { display: block; width: 30px; height: 30px; fill: currentColor; }
.auto-coeval-campaign-card .auto-coeval-campaign-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.auto-coeval-campaign-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.auto-coeval-campaign-card .auto-coeval-campaign-main strong { font-size: .94rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.auto-coeval-campaign-card .auto-coeval-campaign-main > small { grid-column: 1; font-size: .76rem; line-height: 1.4; overflow-wrap: anywhere; }
.auto-coeval-campaign-title-row .status-chip { padding: 3px 8px; font-size: .68rem; }
.auto-coeval-campaign-card .auto-coeval-campaign-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 8px 10px;
  background: var(--ui-surface-subtle);
  border-radius: var(--ui-radius-sm);
  font-size: .72rem;
}
.auto-coeval-campaign-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ui-text-muted); }
.auto-coeval-campaign-progress b { color: var(--ui-text); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .auto-coeval-top-controls .button { width: auto; flex: 1 1 auto; }
  .auto-coeval-campaign-list .auto-coeval-campaign-card { grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 10px; padding: 12px; }
  .auto-coeval-campaign-icon { width: 44px; height: 44px; }
  .auto-coeval-campaign-vector { width: 27px; height: 27px; }
  .auto-coeval-campaign-card .auto-coeval-campaign-progress { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-self: stretch; }
  .auto-coeval-campaign-progress > span { gap: 6px; }
  .auto-coeval-campaign-card .auto-coeval-campaign-arrow { grid-column: 3; grid-row: 1 / 3; }
}

.evaluation-reference-workspace .module-context-bar.evaluation-process-heading {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0;
  padding: 8px 12px 8px 6px;
}

.module-context-bar.evaluation-process-heading .evaluation-process-back { width: 38px; height: 38px; border-radius: var(--ui-radius-sm); }
.evaluation-process-heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.module-context-bar.evaluation-process-heading .evaluation-process-heading-copy h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.module-context-bar.evaluation-process-heading .evaluation-process-heading-copy > p {
  margin: 3px 0 0;
  font-size: .76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.module-context-bar.evaluation-process-heading .evaluation-revision {
  margin: 0;
  padding: 3px 8px;
  font-size: .68rem;
  line-height: 1.3;
}
.module-context-bar.evaluation-process-heading .evaluation-process-settings-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  padding: 9px 12px;
  font-size: .82rem;
  white-space: nowrap;
}
.evaluation-process-settings-button > svg { flex: 0 0 18px; }

/* La misma superficie de los inputs, también cuando las listas están vacías. */
.evaluation-reference-workspace :is(.evaluation-catalog-list, .evaluation-selected-list) {
  background: var(--ui-surface);
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
}
.evaluation-reference-workspace :is(.evaluation-catalog-item, .evaluation-selected-item) { background: transparent; }
.evaluation-reference-workspace :is(.evaluation-catalog-list, .evaluation-selected-list) > p { margin: 0; padding: 14px 16px; }

@media (max-width: 680px) {
  .evaluation-reference-workspace .module-context-bar.evaluation-process-heading { grid-template-columns: 38px minmax(0, 1fr); }
  .module-context-bar.evaluation-process-heading .evaluation-process-settings-button { grid-column: 2; justify-self: end; }
}

.evaluation-processes-main .evaluation-process-card {
  --process-color: #1d7541;
  --process-tint: #36a865;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--process-tint) 32%, var(--ui-border));
  border-left: 4px solid var(--process-tint);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  transition: border-color .18s ease, background-color .18s ease;
}

.evaluation-process-card[data-process-type="ORDINARY_RECOVERY"] {
  --process-color: #905400;
  --process-tint: #f0a322;
}

.evaluation-process-card[data-process-type="EXTRAORDINARY_RECOVERY"] {
  --process-color: #b52550;
  --process-tint: #e94c76;
}

html[data-theme="dark"] .evaluation-process-card[data-process-type="ORDINARY_ASSESSMENT"] { --process-color: #83dba0; }
html[data-theme="dark"] .evaluation-process-card[data-process-type="ORDINARY_RECOVERY"] { --process-color: #ffc15b; }
html[data-theme="dark"] .evaluation-process-card[data-process-type="EXTRAORDINARY_RECOVERY"] { --process-color: #ff8faa; }

.evaluation-processes-main .evaluation-process-card:hover,
.evaluation-processes-main .evaluation-process-card:focus-within {
  border-color: var(--process-tint);
  background: color-mix(in srgb, var(--process-tint) 4%, var(--ui-surface));
}

.evaluation-process-type-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--process-tint) 38%, var(--ui-border));
  color: var(--process-color);
  background: color-mix(in srgb, var(--process-tint) 16%, var(--ui-surface));
}

.evaluation-process-type-vector {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor;
  transform-origin: center;
}

.evaluation-process-card:is(:hover, :focus-within) .evaluation-process-type-vector {
  animation: evaluation-type-float 2.4s ease-in-out infinite;
}

.evaluation-process-type-label {
  display: inline-flex;
  padding: 3px 8px;
  margin: 0;
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--process-tint) 12%, var(--ui-surface));
  color: var(--process-color);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.5;
}

.evaluation-process-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.evaluation-process-card-heading .evaluation-chip { padding: 3px 8px; }
.evaluation-process-card-main h3 { margin: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.evaluation-process-card-main > .evaluation-process-card-context { margin: 4px 0 0; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }

.evaluation-process-card-actions { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.evaluation-process-card-actions .button { padding: 8px 12px; font-size: .82rem; }
.evaluation-process-card .evaluation-process-card-actions .button-secondary {
  border-color: color-mix(in srgb, var(--process-tint) 45%, var(--ui-border));
  background: color-mix(in srgb, var(--process-tint) 12%, var(--ui-surface));
  color: var(--process-color);
}
.evaluation-process-card .evaluation-process-card-actions .button-secondary:hover {
  background: color-mix(in srgb, var(--process-tint) 22%, var(--ui-surface));
}
.evaluation-process-card .evaluation-process-card-actions .button-quiet { color: var(--ui-danger); }

@keyframes evaluation-type-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 960px) {
  .evaluation-processes-main .evaluation-process-card { grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; padding: 12px; }
  .evaluation-process-type-icon { width: 48px; height: 48px; border-radius: 13px; }
  .evaluation-process-type-vector { width: 28px; height: 28px; }
  .evaluation-process-card-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .evaluation-process-card-actions { grid-column: 1 / -1; }
  .evaluation-process-card-actions .button { flex: 1; }
}

/* Alta de escuela: formulario compacto, hasta tres campos por fila. */
#schoolCreateDialog {
  --ui-modal-width: 820px;
  width: min(820px, calc(100vw - 32px));
  max-width: 820px;
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
  border-radius: var(--ui-radius-lg);
}
#schoolCreateDialog > .school-create-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 42px);
  margin: 0;
  padding: 0;
  gap: 0;
}
.school-create-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 22px 16px; border-bottom: 1px solid var(--ui-border); }
.school-create-header h2 { margin: 0; color: var(--ui-text); font-size: 1.15rem; line-height: 1.4; letter-spacing: -.02em; }
.school-create-header p { margin: 5px 0 0; color: var(--ui-text-muted); font-size: .77rem; line-height: 1.5; }
#schoolCreateDialog .school-create-close { flex: 0 0 30px; width: 30px; min-height: 30px; padding: 5px; border-color: transparent; background: transparent; box-shadow: none; }
.school-create-body { display: grid; gap: 18px; min-height: 0; padding: 18px 22px; overflow-y: auto; overscroll-behavior: contain; }
.school-create-section { min-width: 0; }
.school-create-section h3 { margin: 0 0 10px; color: var(--ui-text-muted); font-size: .71rem; font-weight: 700; line-height: 1.4; }
.school-create-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; min-width: 0; }
.school-create-span-two { grid-column: span 2; }
#schoolCreateDialog label { min-width: 0; gap: 5px; color: var(--ui-text); font-size: .72rem; font-weight: 600; line-height: 1.4; }
#schoolCreateDialog label small { color: var(--ui-text-muted); font-size: .67rem; font-weight: 400; }
#schoolCreateDialog input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 36px; padding: 7px 10px; border-radius: var(--ui-radius-xs); font-size: .78rem; }
#schoolCreateDialog input[type="file"] { padding: 5px 7px; font-size: .7rem; }
#schoolCreateDialog input[type="file"]::file-selector-button { margin-inline-end: 8px; padding: 4px 7px; border: 0; border-radius: 4px; background: var(--ui-primary-soft); color: var(--ui-text); font: inherit; cursor: pointer; }
.school-create-options { padding-top: 14px; border-top: 1px solid var(--ui-border); }
#schoolCreateDialog .school-create-default { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; cursor: pointer; }
#schoolCreateDialog .school-create-default input { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--ui-primary); }
.school-create-default > span { min-width: 0; }
.school-create-default small { display: block; margin-top: 2px; }
#schoolCreateDialog .notice { margin: 0; padding: 10px 12px; font-size: .77rem; overflow-wrap: anywhere; }
.school-create-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin: 0; padding: 13px 22px; border-top: 1px solid var(--ui-border); background: var(--ui-surface-subtle); }
#schoolCreateDialog .school-create-actions .button { min-height: 36px; padding: 7px 15px; border-radius: var(--ui-radius-sm); font-size: .78rem; }
.school-onboarding-empty { padding: 32px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.school-onboarding-empty h2 { margin: 10px 0; font-size: 1.3rem; }
.school-onboarding-empty p { margin: 0 0 20px; color: var(--ui-text-muted); font-size: .86rem; line-height: 1.6; }

@media (max-width: 700px) {
  .school-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-create-options > .school-create-default { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  #schoolCreateDialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  #schoolCreateDialog > .school-create-form { max-height: calc(100dvh - 26px); }
  .school-create-header { padding: 16px; }
  .school-create-body { padding: 16px; }
  .school-create-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .school-create-span-two { grid-column: auto; }
  .school-create-actions { padding: 12px 16px; }
}

/* Escuelas: acceso al centro educativo con los mismos tokens de los módulos. */
.page-shell:has(#appView:not([hidden]) #schoolListView:not([hidden])),
.page-shell:has(#appView:not([hidden]) #onboardingView:not([hidden])) {
  width: min(1180px, calc(100% - 48px));
  padding-top: 38px;
  padding-bottom: 48px;
}

#dashboardHeading.schools-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 32px;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--ui-border);
}
.schools-welcome-copy { min-width: 0; }
#dashboardHeading.schools-welcome h1 {
  margin: 8px 0;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.schools-welcome-description { margin: 0; color: var(--ui-text-muted); font-size: .88rem; line-height: 1.6; }
.schools-account { display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 44%; }
.schools-account > div { min-width: 0; }
.schools-account-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--ui-surface); color: var(--ui-text-muted); }
.schools-account-icon svg { width: 22px; height: 22px; fill: currentColor; }
.schools-account-label { color: var(--ui-text-muted); font-size: .72rem; }
.schools-account #sessionEmail { margin: 3px 0 0; color: var(--ui-text); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }

#schoolListView .schools-directory-heading { align-items: center; gap: 24px; margin: 0; }
.schools-directory-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.schools-directory-title h2 { margin: 0; font-size: 1.18rem; line-height: 1.4; letter-spacing: -.025em; }
.schools-count { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface); color: var(--ui-text-muted); font-size: .7rem; font-weight: 600; }
.schools-count:empty { display: none; }
.schools-directory-heading p { margin: 7px 0 0; font-size: .82rem; line-height: 1.6; }
#schoolListView #newSchoolButton { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; min-height: 40px; padding: 9px 15px; border-radius: var(--ui-radius-sm); font-size: .82rem; }
#schoolListView #schoolGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; }

#schoolListView .school-access-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 24px;
  padding: 26px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
  transition: border-color .16s ease;
}
#schoolListView .school-access-card.is-default { border-inline-start: 4px solid var(--ui-primary); padding-inline-start: 23px; }
#schoolListView .school-access-card:focus-within { border-color: var(--ui-primary); }
.school-access-emblem { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ui-primary) 22%, var(--ui-border)); border-radius: 18px; background: var(--ui-primary-soft); color: color-mix(in srgb, var(--ui-primary) 75%, var(--ui-text)); }
.school-access-emblem .ui-icon { width: 38px; height: 38px; }
.school-access-identity { min-width: 0; }
.school-access-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.school-access-role { color: var(--ui-text-muted); font-size: .72rem; font-weight: 600; }
.school-default-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: var(--ui-favorite-soft); color: var(--ui-favorite-strong); font-size: .66rem; font-weight: 700; line-height: 1.2; }
.school-default-badge .ui-icon { width: 13px; height: 13px; }
#schoolListView .school-access-card h3 { margin: 0; font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
.school-access-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: var(--ui-text-muted); font-size: .77rem; line-height: 1.55; }
.school-access-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.school-access-meta .ui-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.school-access-code { padding-inline-start: 16px; border-inline-start: 1px solid var(--ui-border); }
.school-access-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding-inline-start: 22px; border-inline-start: 1px solid var(--ui-border); }
#schoolListView .school-access-card .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 40px; margin: 0; padding: 9px 12px; border-radius: var(--ui-radius-sm); font-size: .78rem; }
#schoolListView .school-access-card .button-quiet { min-height: 32px; padding: 5px; border-color: transparent; background: transparent; box-shadow: none; font-size: .69rem; }
#schoolListView .school-access-card .button-quiet:hover { background: var(--ui-primary-soft); }
.school-access-default-note { color: var(--ui-text-muted); text-align: center; font-size: .66rem; line-height: 1.5; }
.schools-directory-note { display: flex; align-items: flex-start; gap: 8px; margin: 20px 2px 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.6; }
.schools-directory-note .ui-icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--ui-favorite); }

@media (max-width: 900px) {
  #dashboardHeading.schools-welcome { flex-direction: column; align-items: flex-start; gap: 18px; }
  .schools-account { max-width: 100%; }
  #schoolListView .school-access-card { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 22px; }
  #schoolListView .school-access-card.is-default { padding-inline-start: 19px; }
  .school-access-emblem { width: 62px; height: 62px; border-radius: 15px; }
  .school-access-emblem .ui-icon { width: 32px; height: 32px; }
  .school-access-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; padding: 16px 0 0; border-inline-start: 0; border-top: 1px solid var(--ui-border); }
  #schoolListView .school-access-card .button { width: auto; }
  .school-access-default-note { margin-inline-end: auto; order: -1; text-align: start; }
}
@media (max-width: 560px) {
  .page-shell:has(#appView:not([hidden]) #schoolListView:not([hidden])),
  .page-shell:has(#appView:not([hidden]) #onboardingView:not([hidden])) { width: calc(100% - 28px); padding-top: 22px; }
  #dashboardHeading.schools-welcome { margin-bottom: 24px; padding-bottom: 22px; }
  #schoolListView .schools-directory-heading { flex-direction: column; align-items: stretch; gap: 15px; }
  #schoolListView #newSchoolButton { align-self: flex-start; }
  #schoolListView .school-access-card { grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px; }
  #schoolListView .school-access-card.is-default { padding-inline-start: 15px; }
  .school-access-emblem { width: 46px; height: 46px; border-radius: 12px; }
  .school-access-emblem .ui-icon { width: 27px; height: 27px; }
  .school-access-topline { margin-bottom: 8px; }
  .school-access-meta { flex-direction: column; align-items: flex-start; gap: 7px; }
  .school-access-code { padding-inline-start: 0; border: 0; }
  .school-access-actions { flex-wrap: wrap; }
  .school-access-default-note { flex-basis: 100%; }
  #schoolListView .school-access-actions .button-primary { flex: 1 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .evaluation-process-type-vector,
  .evaluation-process-card:is(:hover, :focus-within) .evaluation-process-type-vector { animation: none; }
}

input,
select,
textarea {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: none;
}

input:hover,
select:hover,
textarea:hover { border-color: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border-strong)); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus);
}

/* Selector de color compartido: la altura mínima de los campos no debe deformarlo. */
input.ui-color-input[type="color"] {
  --ui-color-size: 40px;
  box-sizing: border-box;
  display: block;
  flex: 0 0 var(--ui-color-size);
  width: var(--ui-color-size);
  min-width: var(--ui-color-size);
  max-width: var(--ui-color-size);
  height: var(--ui-color-size);
  min-height: var(--ui-color-size);
  max-height: var(--ui-color-size);
  aspect-ratio: 1;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 50%;
  background: var(--ui-surface);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
input.ui-color-input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input.ui-color-input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
input.ui-color-input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
input.ui-color-input[type="color"]:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; box-shadow: none; }
.editor-color-control input.ui-color-input[type="color"] { --ui-color-size: 28px; padding: 2px; }
.editor-color-control { gap: 8px; flex-shrink: 0; }
.subject-color-control { background: var(--ui-surface-subtle); border-color: var(--ui-border); }
.planning-unit-palette .planning-unit-color-swatch {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border-radius: 50%;
}

.notice {
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background: var(--ui-surface-subtle);
}

.notice.is-success,
.status-pill { color: var(--ui-success); border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)); background: var(--ui-success-soft); box-shadow: none; }
.notice.is-warning,
.notice-warning { color: var(--ui-warning); border-color: color-mix(in srgb, var(--ui-warning) 38%, var(--ui-border)); background: var(--ui-warning-soft); }
.notice.is-error { color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 38%, var(--ui-border)); background: var(--ui-danger-soft); }

.step-badge,
.period-chip,
.subject-state,
.document-status,
.status-chip,
.status-pill {
  border-radius: 999px;
  font-weight: 760;
}

.student-table-wrap,
.attendance-table-card,
.grades-matrix-card,
.grade-matrix-table-wrap,
.planning-table-scroll {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
}

.student-table thead th,
.attendance-real-table thead th,
.grades-real-table thead th,
.grade-matrix-table thead th {
  color: var(--ui-on-primary);
  background: var(--ui-primary);
  box-shadow: none;
}

.student-table tbody tr:nth-child(even) td,
.attendance-real-table tbody tr:nth-child(even) td,
.grades-real-table tbody tr:nth-child(even) td {
  background: var(--ui-surface-subtle);
}

/* Porcentajes legibles sobre cualquier color primario, como la etiqueta Android. */
#gradeMatrixTableWrap .grade-activity-heading > .grade-weight-badge {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--ui-on-primary) 24%, transparent);
  border-radius: var(--ui-radius-xs);
  color: var(--ui-text);
  background: var(--ui-surface);
  font-size: .65rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Calificaciones conserva la matriz aun cuando el trimestre no tenga
   actividades: Estudiante y Total siguen permitiendo registrar estados del
   periodo. La guía de indicadores vive en el botón de información, no ocupa
   una fila permanente sobre la tabla. */
.grades-matrix-card > .grade-state-legend { display: none !important; }

.grades-period-pill-shell.grades-period-pill-shell {
  padding-right: 90px;
  overflow: visible;
}

.grades-state-info-menu {
  position: absolute;
  top: 50%;
  right: 43px;
  z-index: 30;
  transform: translateY(-50%);
}

.grades-state-info-menu > summary {
  list-style: none;
}

.grades-state-info-menu > summary::-webkit-details-marker { display: none; }

.grades-state-info-trigger {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.grades-state-info-trigger svg {
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.grades-state-info-trigger svg .is-filled {
  fill: currentColor;
  stroke: none;
}

.grades-state-info-trigger:is(:hover, :focus-visible),
.grades-state-info-menu[open] .grades-state-info-trigger {
  outline: none;
  border-color: color-mix(in srgb, var(--ui-primary) 48%, var(--ui-border));
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.grades-state-info-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: -42px;
  z-index: 40;
  width: min(370px, calc(100vw - 34px));
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-2);
}

.grades-state-info-popover > strong {
  display: block;
  font-size: .86rem;
}

.grades-state-info-popover > p {
  margin: 3px 0 12px;
  color: var(--ui-text-muted);
  font-size: .7rem;
  line-height: 1.4;
}

.grades-state-info-popover .grades-state-legend.grade-state-legend {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.grade-state-legend .grade-state-chip {
  --grade-indicator-color: var(--ui-text-muted);
  min-height: 28px;
  padding: 3px 9px 3px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--grade-indicator-color) 32%, var(--ui-border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--grade-indicator-color) 78%, var(--ui-text));
  background: color-mix(in srgb, var(--grade-indicator-color) 10%, var(--ui-surface));
  font-size: .72rem;
  font-weight: 780;
  line-height: 1;
}

.grades-state-info-popover .grade-state-chip {
  width: 100%;
  min-height: 42px;
  padding: 6px 9px 6px 6px;
  align-items: center;
  border-radius: var(--ui-radius-sm);
}

.grades-state-info-popover .grade-state-chip > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.grades-state-info-popover .grade-state-chip b {
  font-size: .73rem;
  line-height: 1.1;
}

.grades-state-info-popover .grade-state-chip small {
  color: var(--ui-text-muted);
  font-size: .65rem;
  font-weight: 620;
  line-height: 1.25;
}

.grade-state-legend .grade-state-chip strong {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--grade-indicator-color);
  font-size: .67rem;
  font-weight: 900;
}

.grade-state-legend .grade-state-chip.is-recovery { --grade-indicator-color: #ff9800; }
.grade-state-legend .grade-state-chip:is(.is-ordinary-recovery, .is-extraordinary-recovery) { --grade-indicator-color: #d81b60; }
.grade-state-legend .grade-state-chip.is-extra { --grade-indicator-color: #2196f3; }
.grade-state-legend .grade-state-chip.is-comment { --grade-indicator-color: #4caf50; }

/* Resúmenes de calificaciones: mismos bloques y acciones de copia que Android. */
.grades-insight-dialog .grades-insight-content {
  min-width: 0;
  max-height: 56dvh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px;
}

.grades-insight-dialog .grades-insight-sections {
  gap: 14px;
  align-items: start;
}

.grades-summary-section {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.grades-summary-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.grades-insight-dialog .grades-summary-section h3 {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.grades-summary-section ol {
  margin: 0;
  padding-left: 1.8em;
}

.grades-summary-section li {
  padding: 7px 0 7px 4px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.grades-summary-section li + li { border-top: 1px solid var(--ui-border); }
.grades-summary-section li::marker { color: var(--ui-text-muted); font-weight: 700; }
.grades-summary-section > p { margin: 0; }

.grades-summary-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.grades-summary-section-head .grades-summary-copy { padding: 7px 10px; font-size: .8rem; }

.grades-summary-copy-icon {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: currentColor;
  background: none;
}

.grades-insight-footer {
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.grades-insight-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.grades-summary-status { color: var(--ui-text-muted); margin: 0 0 12px; }
.grades-summary-status:empty { display: none; }
.grades-summary-copy-fallback { width: 100%; min-height: 100px; margin-bottom: 10px; }

.grades-student-summary,
.grades-summary-subjects,
.grades-summary-detail { display: grid; min-width: 0; gap: 16px; }

.grades-summary-subject-title {
  margin: 0 0 12px;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ui-primary);
}

.grades-summary-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 3px 8px;
}

.grades-summary-tabs .button { flex-shrink: 0; }
.grades-summary-tabs [aria-selected="true"] {
  color: var(--ui-on-primary);
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

.grades-summary-detail > .grades-insight-list + .grades-insight-list {
  border-top: 1px solid var(--ui-border);
  padding-top: 14px;
}

.grades-summary-detail .grades-insight-row { background: var(--ui-surface-subtle); padding: 12px 14px; }
.grades-summary-detail .grades-insight-row strong { font-size: .9rem; overflow-wrap: anywhere; }
.grades-summary-detail .is-summary-total { color: var(--ui-primary); background: var(--ui-primary-soft); }
.grades-summary-detail .is-summary-extra { color: color-mix(in srgb, #2196f3 70%, var(--ui-text)); }
.grades-summary-detail .is-summary-recovery { color: color-mix(in srgb, #d81b60 70%, var(--ui-text)); }
.grades-insight-dialog .grades-insight-comment { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .grades-insight-dialog .grades-insight-sections { grid-template-columns: 1fr; }
  .grades-insight-dialog .grades-insight-content { max-height: 48dvh; }
  .grades-summary-section-head { flex-wrap: wrap; }
}

.grades-cell-menu-option.is-ordinary-recovery {
  color: color-mix(in srgb, #d81b60 82%, var(--ui-text));
}

.grades-cell-menu-option.is-ordinary-recovery .grades-cell-menu-icon {
  color: #d81b60;
}

#gradeMatrixTableWrap.has-no-activities .grades-real-table .grade-student-heading,
#gradeMatrixTableWrap.has-no-activities .grades-real-table .grade-student-cell {
  width: auto;
}

#gradeMatrixTableWrap.has-no-activities .grades-real-table .grade-average-heading,
#gradeMatrixTableWrap.has-no-activities .grades-real-table .grade-period-average {
  width: clamp(118px, 20%, 180px);
  min-width: 118px;
  max-width: 180px;
}

#gradeMatrixTableWrap .grade-period-average .grade-cell-indicators .is-ordinary-recovery,
#finalSummaryTableWrap .grade-cell-indicators .is-ordinary-recovery,
#finalSummaryTableWrap .grade-cell-indicators .is-extraordinary-recovery {
  color: #fff;
  background: #d81b60;
}

#gradeMatrixTableWrap .grade-period-average .grade-cell-indicators .is-extra,
#finalSummaryTableWrap .grade-cell-indicators .is-extra {
  color: #fff;
  background: #2196f3;
}

#gradeMatrixTableWrap .grade-period-average .grade-cell-indicators .is-comment,
#finalSummaryTableWrap .grade-cell-indicators .is-comment {
  color: #fff;
  background: #4caf50;
}

#finalSummaryTableWrap :is(.final-period-score, .final-score) {
  position: relative;
}

#finalSummaryTableWrap :is(.final-period-score, .final-score) .grade-cell-indicators {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
}

#finalSummaryTableWrap :is(.final-period-score, .final-score) .grade-cell-indicators span {
  width: 16px;
  min-width: 16px;
  height: 14px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: .5rem;
  font-weight: 900;
  line-height: 1;
}

#finalSummaryTableWrap :is(.final-period-score, .final-score) .grade-cell-indicators span:last-child {
  border-bottom-left-radius: 6px;
}

@media (max-width: 760px) {
  .grades-period-pill-shell.grades-period-pill-shell { padding-right: 82px; }
  .grades-state-info-menu { right: 39px; }
  .grades-state-info-popover { right: -38px; }
}

/* Nota Final utiliza la misma estructura nativa y densidad que los periodos. */
#gradebookFinalSummary.grades-final-summary {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#gradebookFinalSummary.grades-final-summary:not([hidden]) {
  display: grid;
  gap: 12px;
}

#finalSummaryTableWrap.grades-real-table-wrap {
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  isolation: isolate;
  scrollbar-gutter: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

#finalSummaryTableWrap .grades-real-table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
}

#finalSummaryTableWrap .grades-real-table :is(th, td) {
  position: static;
  left: auto;
  display: table-cell;
  box-sizing: border-box;
  min-width: 0;
  height: 54px;
  padding: 8px 10px;
  vertical-align: middle;
}

#finalSummaryTableWrap .grades-real-table :is(.grade-index-heading, .grade-index-cell) {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
}

#finalSummaryTableWrap .grades-real-table :is(.grade-student-heading, .grade-student-cell) {
  width: 34%;
  min-width: 0 !important;
  max-width: none;
  text-align: left;
}

#finalSummaryTableWrap .grade-student-cell strong {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: .78rem;
  line-height: 1.25;
}

#finalSummaryTableWrap .grade-student-cell small {
  display: block;
  margin-top: 3px;
  color: var(--ui-text-muted);
  font-size: .64rem;
  line-height: 1.2;
}

#finalSummaryTableWrap .grades-real-table :is(.final-period-heading, .grade-average-heading, .final-period-score, .final-score) {
  width: auto;
  min-width: 0;
  max-width: none;
  text-align: center;
}

#finalSummaryTableWrap .grades-real-table :is(.final-period-score, .final-score) {
  position: relative;
  padding: 0;
  cursor: pointer;
}

#finalSummaryTableWrap .grade-total-score-value {
  min-height: 54px;
  height: auto;
  padding: 10px 16px;
  display: grid;
  place-items: center;
  font-size: .86rem;
  line-height: 1.2;
}

#finalSummaryTableWrap .grades-real-table :is(.final-period-score, .final-score):hover {
  background-color: var(--ui-primary-soft);
}

:is(#finalSummaryTableWrap, #gradeMatrixTableWrap) [role="button"]:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -3px;
}

.grades-final-footer {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

#gradebookFinalSummary .grades-final-footer h3 {
  margin: 0 0 10px;
  font-size: .82rem;
}

.grades-final-footer .grades-summary-stats {
  margin: 0;
  padding: 0;
  border: 0;
}

.grades-final-footer .grade-summary-stat {
  border-color: var(--ui-border);
  background: var(--ui-surface-subtle);
}

#gradebookFinalSummary .grades-final-footer .final-summary-help {
  margin: 10px 0 0 !important;
  padding: 0;
  border: 0;
  color: var(--ui-text-muted);
  font-size: .68rem;
}

/* Umbrales Android; tonos con contraste sobre superficies claras y oscuras. */
:is(#gradeMatrixTableWrap, #finalSummaryTableWrap) {
  --grade-number-good: #237a36;
  --grade-number-warning: #8c6500;
  --grade-number-low: #b3261e;
}

html[data-theme="dark"] :is(#gradeMatrixTableWrap, #finalSummaryTableWrap) {
  --grade-number-good: #66d16f;
  --grade-number-warning: #ffd35a;
  --grade-number-low: #ff8077;
}

:is(#gradeMatrixTableWrap, #finalSummaryTableWrap) .grade-total-score-value.is-good { color: var(--grade-number-good); }
:is(#gradeMatrixTableWrap, #finalSummaryTableWrap) .grade-total-score-value.is-warning { color: var(--grade-number-warning); }
:is(#gradeMatrixTableWrap, #finalSummaryTableWrap) .grade-total-score-value.is-low { color: var(--grade-number-low); }

@media (max-width: 680px) {
  .grades-final-footer .grades-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------- */
/* Componente: tabla institucional                                             */
/* -------------------------------------------------------------------------- */

.ui-table-shell {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: none;
  scrollbar-gutter: auto;
}

.ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-text);
  background: var(--ui-surface);
  font-variant-numeric: tabular-nums;
}

.ui-table > thead > tr > th {
  border-top: 0;
  color: var(--ui-on-primary) !important;
  background: var(--ui-primary) !important;
  font-size: .72rem;
  font-weight: 820;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.ui-table > thead > tr > th:first-child { border-top-left-radius: calc(var(--ui-radius-md) - 1px); }
.ui-table > thead > tr > th:last-child { border-top-right-radius: calc(var(--ui-radius-md) - 1px); }

.ui-table > tbody > tr > :is(th, td),
.ui-table > tfoot > tr > :is(th, td) {
  border-bottom-color: var(--ui-border);
  color: var(--ui-text);
  background-color: var(--ui-surface);
}

.ui-table:not(.ui-table--attendance) > :is(thead, tbody, tfoot) > tr > :is(th, td):not(:last-child) {
  border-right: 1px solid var(--ui-border);
}

.ui-table > tbody > tr:nth-child(even) > :is(th, td) {
  background-color: var(--ui-surface-subtle);
}

.ui-table > tbody > tr:last-child > :is(th, td),
.ui-table > tfoot > tr:last-child > :is(th, td) { border-bottom: 0; }

.ui-table--data > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding: 12px 14px; }
.ui-table--schedule > thead > tr > th { padding: 11px 12px; }
.ui-table--editor > :is(thead, tbody, tfoot) > tr > :is(th, td) { border-color: var(--ui-border); }

/* Evaluaciones conservaba radios de 4/6 px y tablas colapsadas. El shell
   recorta ahora la tabla con la misma curva institucional del resto del sitio. */
.evaluation-reference-workspace .evaluation-criteria-table-shell.ui-table-shell,
.evaluation-reference-workspace .evaluation-table-editor.ui-table-shell {
  overflow: auto;
  border-radius: var(--ui-radius-md);
  isolation: isolate;
}

.evaluation-reference-workspace .evaluation-criteria-table.ui-table,
.evaluation-reference-workspace .evaluation-table-editor .ui-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ui-table--data > tbody > tr:hover > :is(th, td) {
  background-color: var(--ui-primary-soft);
}

/* Asistencia usa ritmo horizontal: se eliminan incluso las líneas especiales
   de cierre de semana heredadas, sin modificar columnas fijas ni botones. */
.ui-table--attendance > :is(thead, tbody, tfoot) > tr > :is(th, td),
.ui-table--attendance .is-week-end {
  border-left: 0 !important;
  border-right: 0 !important;
}

.ui-table--attendance > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border-bottom: 1px solid var(--ui-border);
}

.ui-table--attendance > tbody > tr:last-child > :is(th, td) { border-bottom: 0; }

#attendanceMonthlyView .monthly-table.attendance-real-table.ui-table--attendance
  > thead > tr > th.attendance-index-column:first-child {
  color: var(--ui-on-primary) !important;
  background: var(--ui-primary) !important;
  border-radius: calc(var(--ui-radius-md) - 1px) 0 0 0 !important;
}

.ui-table--attendance > tbody > tr:hover > :is(th, td) {
  background-color: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-surface));
}

.ui-table caption {
  padding: 11px 14px;
  color: var(--ui-text-muted);
  background: var(--ui-surface-subtle);
  font-size: .78rem;
  font-weight: 700;
  text-align: left;
}

.ui-table :is(button, input, select, textarea):focus-visible {
  position: relative;
  z-index: 2;
}

html[data-theme="dark"] .ui-table > tbody > tr:nth-child(even) > :is(th, td) {
  background-color: var(--ui-surface-subtle);
}

@media (max-width: 720px) {
  .ui-table--data > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding: 10px 11px; }
}

/* -------------------------------------------------------------------------- */
/* Apariencia y carga: misma familia visual                                    */
/* -------------------------------------------------------------------------- */

.appearance-head {
  border-bottom-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
}

.appearance-theme-card,
.appearance-tone-palette {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  box-shadow: none;
}

.appearance-theme-card.is-selected {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  box-shadow: inset 3px 0 0 var(--ui-primary);
}

.module-boot-loading,
.module-loading-state {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
}

html.pd-session-pending body[data-start-module] .page-shell::before {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: linear-gradient(100deg, var(--ui-surface) 20%, var(--ui-surface-muted) 50%, var(--ui-surface) 80%);
  background-size: 220% 100%;
  box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/* Lunes Cívicos: bloques del guion compactos y legibles                       */
/* -------------------------------------------------------------------------- */

#civicScriptPreview .civic-program-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

#civicScriptPreview .civic-program-card > h3 {
  grid-column: 1 / -1;
  margin: 2px 0 4px;
  text-transform: none;
}

#civicScriptPreview .civic-program-card > label {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  gap: 8px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#civicScriptPreview .civic-program-card > label:last-child { grid-column: 1 / -1; }

#civicScriptPreview .civic-editable {
  margin-top: 0;
  padding: 10px 12px;
  color: var(--ui-text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  #civicScriptPreview .civic-program-card { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------- */
/* Lunes Cívicos: participantes e iconos compartidos con Android               */
/* -------------------------------------------------------------------------- */

#civicRoles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#civicRoles .civic-participant-card { min-width: 0; }
#civicRoles .civic-flag-card { grid-column: span 2; }
#civicRoles .civic-flag-card .civic-role-copy > span { white-space: normal; overflow-wrap: anywhere; }
#civicGenerateAi .civic-ai-star-icon { fill: none; stroke: currentColor; }
#civicGenerateAi .civic-creation-icon {
  color: #654600;
  background: #ffedab;
  border: 1px solid #d4ac3d;
}
#civicGenerateAi .civic-ai-star-icon { width: 27px; height: 27px; stroke-width: 2.2; }

.civic-arrow-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }
.civic-option-arrow,
.civic-script-card-arrow { display: inline-flex; align-items: center; }
.civic-role-action .civic-arrow-icon { width: 18px; height: 18px; }
#civicPresentationPrev,
#civicPresentationNext { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#civicRoles .civic-role-copy strong { white-space: normal; overflow-wrap: anywhere; }
#civicRoles .civic-role-icon svg { width: 24px; height: 24px; }

.civic-monthly-value-icon {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url('../assets/icons/civic-monthly-value.png') center / contain no-repeat;
  mask: url('../assets/icons/civic-monthly-value.png') center / contain no-repeat;
}

@media (max-width: 1100px) {
  #civicRoles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #civicRoles .civic-flag-card { grid-column: auto; }
}

@media (max-width: 620px) {
  #civicRoles { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------- */
/* Lunes Cívicos: una sola cabecera al editar                                  */
/* -------------------------------------------------------------------------- */

#civicMondaysView.is-editing > .module-context-bar { display: none; }

#civicMondaysView .civic-editor-toolbar.module-context-bar {
  position: static;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  gap: 12px;
  margin: 0;
  padding: 9px 12px 9px 8px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
}

.civic-editor-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ui-text-muted);
  font-size: .75rem;
  line-height: 1.3;
}

.civic-editor-context strong { color: var(--ui-text); }
#civicMondaysView .civic-editor-toolbar-copy h2 { margin: 4px 0; white-space: normal; overflow-wrap: anywhere; }
#civicMondaysView .civic-editor-actions { gap: 8px; flex-wrap: wrap; }
#civicMondaysView .civic-editor-back { display: grid; place-items: center; }

@media (max-width: 720px) {
  #civicMondaysView .civic-editor-toolbar.module-context-bar { grid-template-columns: auto minmax(0, 1fr); }
  #civicMondaysView .civic-editor-actions { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------- */
/* Documentos: identidad de Google Drive                                      */
/* -------------------------------------------------------------------------- */

.documents-connection-icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Agenda: meses independientes y exportación compacta                         */
/* -------------------------------------------------------------------------- */

#agendaView .agenda-top-actions {
  gap: 8px;
  align-items: center;
}

#agendaView .agenda-top-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 14px;
  white-space: nowrap;
}

#agendaView .agenda-top-actions svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: currentColor;
}

#agendaExportButton {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  box-shadow: none;
}

#agendaView .agenda-month-pill-shell {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#agendaView .agenda-month-pills {
  padding: 4px;
  gap: 7px;
}

#agendaCalendar .agenda-weekday {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 5px;
  border-radius: var(--ui-radius-xs);
  color: var(--ui-on-primary);
  background: var(--ui-primary);
  font-size: .8rem;
  font-weight: 850;
  line-height: 1.2;
}

#agendaExportDialog .form-stack { gap: 18px; }
#agendaExportDialog .section-heading p { margin: 7px 0 0; }

.agenda-export-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agenda-export-dates > label {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.agenda-export-dates input { width: 100%; min-width: 0; }

#agendaExportDialog .agenda-export-comments-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
  color: var(--ui-text);
  cursor: pointer;
}

#agendaExportDialog .agenda-export-comments-card input {
  appearance: auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-primary);
}

.agenda-export-comments-card > span { display: grid; gap: 5px; min-width: 0; }
.agenda-export-comments-card strong { font-size: .95rem; line-height: 1.4; }
.agenda-export-comments-card small { color: var(--ui-text-muted); font-weight: 400; line-height: 1.5; }
#agendaExportDialog .agenda-export-comments-card:has(input:checked) { border-color: var(--ui-primary); background: var(--ui-primary-soft); }
#agendaExportDialog .agenda-export-comments-card:focus-within { box-shadow: var(--ui-focus); }

#agendaExportDialog .agenda-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}

.agenda-export-actions .button { width: 100%; }
#agendaExportCancel { grid-column: 1 / -1; justify-self: end; width: auto; }

@media (max-width: 860px) {
  #agendaView .agenda-top-actions { margin-left: 0; justify-content: flex-end; }
}

@media (max-width: 420px) {
  .agenda-export-dates,
  #agendaExportDialog .agenda-export-actions { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------- */
/* Ritmo de escritorio y adaptación compacta                                  */
/* -------------------------------------------------------------------------- */

.page-shell { padding-bottom: 48px; }

.school-hub-shell,
.subjects-master-layout,
.attendance-desktop-layout,
.grades-desktop-layout,
.evaluation-desktop-layout,
.auto-coeval-workspace,
.civic-browser-panel,
.schedule-master-detail,
.documents-master-detail {
  gap: 16px;
}

/* En escritorio, la Agenda ocupa exactamente la altura visual del bloque de
   encabezado + cuadrícula de módulos que comparte su misma fila. */
@media (min-width: 1101px) {
  .agenda-companion.school-hub-calendar {
    align-self: stretch;
    height: auto;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .topbar.ui-app-header,
  .topbar { padding-inline: 12px; }

  .brand small { display: none; }
  .topbar-actions { gap: 5px; }
  .ui-header-action { width: 40px; min-width: 40px; padding: 0; }
  .ui-header-action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  .module-context-bar,
  .grades-top-card,
  .auto-coeval-top-card { border-left-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}