/* Gris · acabado SoftGray inspirado en las superficies de Elipass.
   Esta capa solo participa al seleccionar Gris. La base de contraste oscura
   conserva los estados semánticos y los editores de cada módulo. */
html[data-theme-mode="gray"] {
  color-scheme: dark;
  --ui-canvas: #292929;
  --ui-surface: #3b3b3b;
  --ui-surface-subtle: #444444;
  --ui-surface-muted: #343434;
  --ui-text: #eeeeee;
  --ui-text-muted: #bcbcbc;
  --ui-border: #555555;
  --ui-border-strong: #777777;
  --ui-primary: color-mix(in srgb, var(--user-primary, #1565c0) 50%, #ffffff);
  --ui-on-primary: #111111;
  --ui-primary-soft: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface));
  --ui-primary-muted: color-mix(in srgb, var(--ui-primary) 22%, var(--ui-surface));
  --ui-accent: #e6cc67;
  --ui-accent-soft: #48422e;
  --ui-favorite: #e6cc67;
  --ui-favorite-strong: #f4d96b;
  --ui-favorite-soft: #514813;
  --ui-field-control-surface: #2b2b2b;
  --ui-field-control-hover: #303030;
  --ui-field-control-focus: #1b1b1b;
  --interface-title-color: var(--ui-primary);
  --interface-subtitle-color: var(--ui-text-muted);
  --gray-surface: linear-gradient(180deg, #414141, #353535);
  --gray-surface-hover: linear-gradient(180deg, #4a4a4a, #3d3d3d);
  --gray-inset: linear-gradient(180deg, #262626, #303030);
  --gray-raised-shadow: inset 0 1px 0 rgb(255 255 255 / 13%),
    inset 0 -1px 0 rgb(0 0 0 / 18%), 0 3px 8px rgb(0 0 0 / 24%);
  --gray-inset-shadow: inset 0 1px 3px rgb(0 0 0 / 60%),
    inset 0 -1px 0 rgb(255 255 255 / 14%);
  --gray-groove: linear-gradient(180deg, rgb(0 0 0 / 55%),
    rgb(0 0 0 / 25%) 50%, rgb(255 255 255 / 13%));
  --gray-divider-x: linear-gradient(90deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  --gray-divider-y: linear-gradient(180deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  --ui-shadow-1: var(--gray-raised-shadow);
  --ui-shadow-2: inset 0 1px 0 rgb(255 255 255 / 16%),
    0 18px 48px rgb(0 0 0 / 45%);
  --ui-focus: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 28%, transparent);
}

/* Diario de campo: biblioteca y editor comparten superficies y surcos. */
html[data-theme-mode="gray"] #fieldJournalView {
  --journal-paper: #fffefb;
  --journal-canvas: #303030;
  --journal-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --journal-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
}
html[data-theme-mode="gray"] #fieldJournalView :is(.field-journal-overview, .field-journal-empty) {
  border: 0;
  background: linear-gradient(180deg, #505050, #414141);
  box-shadow: 0 5px 16px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #fieldJournalView :is(
  .field-journal-private-badge, .field-journal-card-icon,
  .field-journal-empty-icon, .field-journal-card-chip
) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 5px 16px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: var(--journal-edge-y);
  transform: none;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:nth-child(odd) {
  box-shadow: var(--journal-edge-x), var(--journal-edge-y);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:last-child,
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:nth-last-child(2):nth-child(odd) {
  --journal-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  --journal-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-card-open:hover {
  background: transparent;
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-card-title {
  color: #ffffff;
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-card-footer {
  border: 0;
  padding-top: 10px;
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-card-delete {
  color: var(--ui-danger);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-editor-controls {
  border: 0;
  background: var(--gray-surface);
  box-shadow: none;
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-meta-grid {
  border: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #fieldJournalView :is(#fieldJournalTitle, #fieldJournalDate) {
  border: 0;
  outline: none;
  color: var(--ui-text);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #fieldJournalView :is(#fieldJournalTitle, #fieldJournalDate):is(:focus, :focus-visible) {
  border: 0;
  outline: none;
  background: var(--ui-field-control-focus);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 65%);
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-date-input > .journal-icon {
  color: var(--ui-primary);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar {
  border: 0;
  background: var(--gray-surface);
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
  backdrop-filter: none;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar .editor-tool {
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar .editor-tool:hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar :is(
  .journal-size-control, .editor-color-control, .field-journal-mention-hint,
  .journal-column-tool.is-selected
) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar .journal-column-tool.is-selected:hover {
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbar :is(.journal-size-label, .editor-tool-select) {
  color: var(--ui-text);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalToolbarSaveButton {
  color: #ffffff;
  background: var(--gray-surface);
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-paper {
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
/* La hoja clara conserva el contraste de los colores elegidos al escribir. */
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalBody {
  --ink: #17203a;
  --muted: #68728a;
  color-scheme: light;
  border: 0;
  outline: none;
  color: #17203a;
  background: var(--journal-paper);
  box-shadow: 0 6px 18px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalBody:focus {
  border: 0;
  outline: none;
  box-shadow: 0 6px 18px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalBody .student-mention {
  color: #245ba1;
  background: #dfebfa;
}
html[data-theme-mode="gray"] #fieldJournalView #fieldJournalMentionSuggestions {
  border: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, #505050, #414141);
  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-mention-option:hover {
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #fieldJournalView .field-journal-mention-avatar {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] :is(#fieldJournalExportDialog, #fieldJournalDeleteDialog, #fieldJournalUnsavedDialog) {
  --interface-title-color: #ffffff;
  border: 0;
  background: linear-gradient(180deg, #505050, #414141) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%) !important;
}
html[data-theme-mode="gray"] :is(#fieldJournalExportDialog, #fieldJournalDeleteDialog, #fieldJournalUnsavedDialog) :is(
  .attendance-export-heading, .field-journal-delete-heading, .field-journal-unsaved-heading
) {
  padding-bottom: 18px;
  border: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #fieldJournalExportDialog .export-split-button {
  gap: 0 !important;
  color: #ffffff !important;
  background: var(--gray-surface) !important;
  box-shadow: 0 3px 9px rgb(0 0 0 / 28%) !important;
}
html[data-theme-mode="gray"] #fieldJournalExportDialog .export-split-button > span {
  color: #ffffff;
  background: transparent;
}
html[data-theme-mode="gray"] #fieldJournalExportDialog .export-split-button__text {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat;
}
@media (max-width: 640px) {
  html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:nth-child(n):not([hidden]) {
    --journal-edge-x: inset 0 0 0 transparent;
    --journal-edge-y: inset 0 -1px 0 #6a6a6a,
      inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  }
  html[data-theme-mode="gray"] #fieldJournalView #fieldJournalList > .field-journal-card:last-child:nth-child(n) {
    --journal-edge-y: inset 0 0 0 transparent;
  }
}

/* Guiones: la hoja conserva el papel y las tintas del modo claro. */
html[data-theme-mode="gray"] #planningPlanEditor {
  --planning-notes-paper: #fffdf6;
  --planning-notes-rule: #dce4e8;
  --planning-notes-ink: #294966;
  --planning-notes-blue: #245ba1;
  --planning-notes-green: #19704a;
  --planning-notes-gold: #8b6500;
  --planning-notes-purple: #773aab;
  --planning-notes-note: #f0e6fa;
}
html[data-theme-mode="gray"] #planningPlanEditor #planningBlocks > .planning-block-card:not(.is-resaltado) {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #planningPlanEditor #planningBlocks > .planning-block-card.is-resaltado {
  background: repeating-linear-gradient(180deg, transparent 0 27px,
    color-mix(in srgb, var(--planning-notes-purple) 13%, transparent) 27px 28px),
    var(--planning-notes-note) !important;
  background-position: 0 calc(var(--planning-notes-baseline, 23px) - 27px), 0 0 !important;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--planning-notes-purple) 12%, transparent) !important;
}

html[data-theme-mode="gray"] body {
  background: linear-gradient(180deg, #303030, #262626);
  background-attachment: fixed;
}

/* Barra superior: superficie suave y un surco en su borde inferior. */
html[data-theme-mode="gray"] .topbar {
  border-bottom-color: #202020;
  background: var(--gray-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%),
    0 1px 0 rgb(255 255 255 / 12%), 0 3px 8px rgb(0 0 0 / 25%);
}

/* Barras de módulos: una superficie continua, con surcos entre sus piezas.
   El contenido conserva su distribución y los menús pueden salir de la barra. */
html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) {
  --gray-toolbar-divider: linear-gradient(90deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  gap: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--gray-surface) !important;
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%) !important;
  overflow: visible;
}
html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) > *,
html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) :is(
  .classroom-toolbar-actions, .contacts-toolbar-actions, .birthdays-toolbar-actions,
  .ui-module-toolbar__controls, .contacts-toolbar-leading, .birthdays-toolbar-leading,
  .ui-expandable-tabs
) {
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) :is(
  .module-context-identity, .ui-module-toolbar__block,
  .classroom-toolbar-actions > *, .contacts-toolbar-actions > *, .birthdays-toolbar-actions > *,
  .ui-expandable-tab
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--gray-toolbar-divider) left top / 3px 100% no-repeat transparent !important;
  box-shadow: none !important;
}
/* El primer bloque y los contenedores de controles no duplican el surco. */
html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) :is(
  .module-back-icon-button, .contacts-toolbar-leading, .birthdays-toolbar-leading,
  .classroom-toolbar-actions, .contacts-toolbar-actions, .birthdays-toolbar-actions,
  .ui-module-toolbar__controls, .classroom-more-button, .planning-overflow-trigger
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) :is(button, summary, a):focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -4px;
}
@media (max-width: 760px) {
  html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar) > :is(
    .classroom-toolbar-actions, .mobile-classroom-picker
  ) {
    background: linear-gradient(180deg,
      rgb(0 0 0 / 80%) 0 1px,
      rgb(0 0 0 / 42%) 1px 2px,
      rgb(255 255 255 / 24%) 2px 3px) left top / 100% 3px no-repeat transparent !important;
  }
  /* Estas barras mantienen las acciones en la primera fila en móvil. */
  html[data-theme-mode="gray"] #appView :is(.classroom-toolbar, .ui-module-toolbar, #birthdaysToolbar, #contactsToolbar):is(
    .subject-toolbar, .documents-module-toolbar, .photos-module-toolbar,
    .auto-coeval-toolbar.is-detail
  ) > .classroom-toolbar-actions {
    background: transparent !important;
  }
}

/* Configuración y escuela activa sobre una sola superficie gris. */
html[data-theme-mode="gray"] #schoolHubView .school-hub-status-actions {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #schoolHubView .school-hub-status-actions > :is(.button, .status-pill) {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #schoolHubView #schoolSettingsButton:hover:not(:disabled) {
  background: rgb(255 255 255 / 5%) !important;
}
html[data-theme-mode="gray"] #schoolHubView #schoolSettingsButton:focus-visible {
  outline-offset: -3px;
}
html[data-theme-mode="gray"] #schoolHubView .school-hub-status-actions > .status-pill {
  position: relative;
}
html[data-theme-mode="gray"] #schoolHubView .school-hub-status-actions > .status-pill::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(90deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  pointer-events: none;
}
html[data-theme-mode="gray"] #schoolHubView .school-hub-status-actions > .status-pill > span {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #37c878;
  box-shadow: none;
  opacity: 1;
}
@media (max-width: 700px) {
  html[data-theme-mode="gray"] #schoolHubView .school-hub-status-actions > .status-pill::before {
    inset: 0 0 auto;
    width: auto;
    height: 3px;
    background: linear-gradient(180deg,
      rgb(0 0 0 / 80%) 0 1px,
      rgb(0 0 0 / 42%) 1px 2px,
      rgb(255 255 255 / 24%) 2px 3px);
  }
}

/* Tarjetas compartidas y paneles: solo cambia su acabado, conservan sus radios,
   distribución y los colores que identifican estados, materias y procesos. */
html[data-theme-mode="gray"] :is(
  .auth-card, .form-card, .ui-content-card, .school-card, .privacy-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, .school-access-card,
  .schools-directory-heading, .account-primary-card, .account-school-card,
  .account-drive-card, .attendance-table-card, .grades-activities-card,
  .grades-matrix-card, .grades-term-summary-card, .grades-final-summary,
  .agenda-calendar-card, .agenda-list-card, .agenda-companion.school-hub-calendar,
  .schedule-navigation-card, .schedule-content-card,
  .documents-navigation-card, .documents-content-panel, .auto-coeval-section-panel,
  .diagnosis-stat, .savings-totals, .grade-plan-empty,
  .evaluation-student-timeline-body, .module-boot-loading, .module-loading-state
) {
  border-color: var(--ui-border);
  background: var(--gray-surface) !important;
  box-shadow: var(--gray-raised-shadow) !important;
}

html[data-theme-mode="gray"] :is(
  .subject-master-card, .activity-card, .evaluation-process-card,
  .planning-plan-card, .agenda-event-card, .civic-script-browser-card,
  .civic-participant-card, .civic-creation-card, .document-item
):hover {
  background: var(--gray-surface-hover) !important;
}

/* Una sola superficie para cada módulo, con un surco entre icono y nombre. */
html[data-theme-mode="gray"] #schoolHubView .module-card,
html[data-theme-mode="gray"] #schoolHubView button.module-card:is(:hover, :active) {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #schoolHubView .module-artwork {
  padding: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #schoolHubView .module-card h3 {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
html[data-theme-mode="gray"] #schoolHubView .module-card h3::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(180deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  pointer-events: none;
}
html[data-theme-mode="gray"] #schoolHubView button.module-card:hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] #schoolHubView button.module-card:hover h3,
html[data-theme-mode="gray"] #schoolHubView button.module-card:hover .module-artwork {
  background: transparent;
  box-shadow: none;
}

/* Calendarios: cuadrícula hundida y días de grafito sin contornos de color. */
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) {
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-weekday {
  border: 0;
  border-radius: 0;
  color: var(--ui-text-muted);
  background: transparent;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 50%),
    0 1px 0 rgb(255 255 255 / 12%);
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day {
  border: 0;
  color: var(--ui-text);
  background: var(--gray-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 28%);
  transform: none;
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day:not(.is-empty):hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day.is-empty {
  background: transparent;
  box-shadow: none;
  opacity: 1;
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day.is-today > span:first-child {
  color: var(--ui-primary);
  text-decoration-thickness: 2px;
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day.is-selected,
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day.is-selected:hover {
  color: var(--ui-primary);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-primary) 20%, #272727),
    color-mix(in srgb, var(--ui-primary) 12%, #353535));
  box-shadow: var(--gray-inset-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--ui-primary) 55%, transparent);
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -2px;
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day-markers {
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
}
html[data-theme-mode="gray"] :is(#agendaCompanionCalendar, #agendaCalendar) .agenda-day-markers i {
  height: 3px;
}

/* Documentos: catálogo continuo, subida y estado de Drive en SoftGray. */
html[data-theme-mode="gray"] #documentsView .documents-navigation-card {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #documentsView .documents-content-panel {
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #505050, #414141) !important;
  box-shadow: 0 5px 16px rgb(0 0 0 / 35%) !important;
}
html[data-theme-mode="gray"] #documentsView .documents-content-heading {
  position: relative;
  margin-bottom: 18px;
  border: 0;
  color: var(--ui-text);
  background: transparent;
}
html[data-theme-mode="gray"] #documentsView .documents-content-heading::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #documentsView #documentsList {
  --document-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --document-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  gap: 0;
  margin: 0 22px 22px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #documentsView #documentsList > .document-item {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: var(--document-edge-y) !important;
  transform: none;
}
html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:nth-child(odd) {
  box-shadow: var(--document-edge-x), var(--document-edge-y) !important;
}
html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:last-child,
html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:nth-last-child(2):nth-child(odd) {
  --document-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  --document-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:hover {
  background: var(--gray-surface-hover) !important;
}
html[data-theme-mode="gray"] #documentsView .document-file-icon {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #documentsView .document-item-title {
  color: #ffffff;
}
html[data-theme-mode="gray"] #documentsView .document-item-actions {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #documentsView .document-item-actions > .button {
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #documentsView .document-item-actions > .button + .button {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #documentsView .document-item-actions > .button-danger-quiet {
  color: var(--ui-danger);
}
html[data-theme-mode="gray"] #documentsView .document-item-actions > .button:hover:not(:disabled) {
  background-color: rgb(255 255 255 / 6%) !important;
}
html[data-theme-mode="gray"] #documentsView .document-status {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #documentsView .document-status.is-pending_upload {
  color: var(--ui-accent);
}
html[data-theme-mode="gray"] #documentsView .documents-content-panel > .empty-state {
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #documentsView .ui-labeled-field {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 14px;
}
html[data-theme-mode="gray"] #documentsView .ui-labeled-field > .ui-labeled-field__header {
  border-radius: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat, var(--gray-surface) !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #documentsView .ui-labeled-field > .ui-labeled-field__control {
  border: 0;
  border-radius: 0;
}
html[data-theme-mode="gray"] #documentsView #driveUploadFile::file-selector-button {
  color: #ffffff;
  background: var(--gray-surface);
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] #documentsView .documents-upload-progress {
  color: var(--ui-text);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #documentsView .documents-audit-issue-list {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #documentsView .documents-audit-issue {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
}
html[data-theme-mode="gray"] #documentsView .documents-audit-issue + .documents-audit-issue {
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #documentsView .documents-audit-issue.is-error strong {
  color: var(--ui-danger);
}
html[data-theme-mode="gray"] #documentsView .documents-audit-issue.is-warning strong {
  color: var(--ui-accent);
}
html[data-theme-mode="gray"] #documentsView .documents-security-note {
  padding-top: 14px;
  border: 0;
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #documentArchiveDialog {
  --interface-title-color: #ffffff;
  border: 0;
  background: linear-gradient(180deg, #505050, #414141) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%) !important;
}
html[data-theme-mode="gray"] #documentArchiveDialog .student-action-dialog-card {
  background: transparent;
}
@media (max-width: 760px) {
  html[data-theme-mode="gray"] #documentsView #documentsList {
    margin-inline: 18px;
  }
}
@media (max-width: 640px) {
  html[data-theme-mode="gray"] #documentsView #documentsList {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:nth-child(n):not([hidden]) {
    --document-edge-x: inset 0 0 0 transparent;
    --document-edge-y: inset 0 -1px 0 #6a6a6a,
      inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  }
  html[data-theme-mode="gray"] #documentsView #documentsList > .document-item:last-child:nth-child(n) {
    --document-edge-y: inset 0 0 0 transparent;
  }
}
@media (max-width: 460px) {
  html[data-theme-mode="gray"] #documentsView .document-item-actions > .button + .button {
    box-shadow: inset 0 1px 0 #0c0c0c, inset 0 2px 0 #222222, inset 0 3px 0 #6a6a6a;
  }
}

/* Horarios: navegación continua y tablas con la retícula hundida compartida. */
html[data-theme-mode="gray"] #schedulesView .schedule-navigation-card {
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface) !important;
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%) !important;
}
html[data-theme-mode="gray"] #schedulesView .schedule-navigation-heading {
  margin: 0;
  padding: 14px;
  border: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #schedulesView :is(.schedule-navigation-heading-icon, .schedule-tab-icon, .schedule-toolbar-icon) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #schedulesView #schedulesTabs {
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #schedulesView #schedulesTabs .schedule-tab:not(.ui-classroom-card) {
  position: relative;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
  transform: none;
}
html[data-theme-mode="gray"] #schedulesView #schedulesTabs .schedule-tab[data-classroom-id="TEACHER"][aria-selected="true"] {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #schedulesView #schedulesTabs .schedule-tab:not(.ui-classroom-card):not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #schedulesView .schedule-board-card {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 5px 16px rgb(0 0 0 / 35%);
}
html[data-theme-mode="gray"] #schedulesView .schedule-table-toolbar {
  position: relative;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: none;
}
html[data-theme-mode="gray"] #schedulesView .schedule-table-toolbar::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #schedulesView .schedule-table-toolbar .button-row {
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gray-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #schedulesView .schedule-table-toolbar .button-row > .button {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #schedulesView .schedule-table-toolbar .button-row > .button + .button {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #schedulesView .schedule-table-toolbar .button-row > .schedule-danger-button {
  color: var(--ui-danger);
}
html[data-theme-mode="gray"] #schedulesView #schedulesWorkspace .schedule-table-wrap {
  border: 0;
  border-radius: 0;
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] :is(#schedulesView .schedule-table, #schedulePreviewDialog .schedule-preview-table) {
  --schedule-cell-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --schedule-cell-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  --schedule-cell-right-gap: 3px;
  --schedule-cell-bottom-gap: 3px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] :is(#schedulesView .schedule-table, #schedulePreviewDialog .schedule-preview-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border: 0 !important;
  box-shadow: var(--schedule-cell-edge-x), var(--schedule-cell-edge-y);
}
html[data-theme-mode="gray"] :is(#schedulesView .schedule-table, #schedulePreviewDialog .schedule-preview-table) tr > :last-child {
  --schedule-cell-edge-x: inset 0 0 0 transparent;
  --schedule-cell-right-gap: 0px;
}
html[data-theme-mode="gray"] :is(#schedulesView .schedule-table, #schedulePreviewDialog .schedule-preview-table) > tbody > tr:last-child > td {
  --schedule-cell-edge-y: inset 0 0 0 transparent;
  --schedule-cell-bottom-gap: 0px;
}
html[data-theme-mode="gray"] :is(#schedulesView .schedule-table, #schedulePreviewDialog .schedule-preview-table) thead th {
  color: var(--ui-on-primary);
  background: var(--ui-primary);
}
html[data-theme-mode="gray"] #schedulesView #schedulesWorkspace .schedule-table :is(.schedule-break-row, .schedule-area-row) > td {
  color: var(--ui-text);
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #schedulesView .schedule-table :is(.schedule-cell-button, .schedule-area-button) {
  width: calc(100% - var(--schedule-cell-right-gap));
  margin: 0 0 var(--schedule-cell-bottom-gap);
  border-radius: 0;
  color: var(--ui-text);
}
html[data-theme-mode="gray"] #schedulesView .schedule-cell-empty {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
  opacity: 1;
}
html[data-theme-mode="gray"] :is(#scheduleCellDialog, #scheduleDeleteDialog, #schedulePreviewDialog) {
  --interface-title-color: #ffffff;
  border: 0;
  background: linear-gradient(180deg, #505050, #414141) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%) !important;
}
html[data-theme-mode="gray"] #scheduleCellDialog .schedule-dialog-heading {
  position: relative;
  padding-bottom: 18px;
  border: 0;
}
html[data-theme-mode="gray"] #scheduleCellDialog .schedule-dialog-heading::after,
html[data-theme-mode="gray"] #scheduleCellDialog .schedule-dialog-actions::before {
  content: '';
  position: absolute;
  inset: auto calc(-1 * var(--ui-modal-padding, 24px)) 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #scheduleCellDialog .schedule-dialog-actions {
  position: relative;
  margin-top: 0;
  padding-top: 18px;
  border: 0;
}
html[data-theme-mode="gray"] #scheduleCellDialog .schedule-dialog-actions::before {
  top: 0;
  bottom: auto;
}
html[data-theme-mode="gray"] #scheduleCellDialog .ui-labeled-field {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
}
html[data-theme-mode="gray"] #scheduleCellDialog .ui-labeled-field > .ui-labeled-field__header {
  border-radius: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat, var(--gray-surface) !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #scheduleCellDialog .ui-labeled-field > .ui-labeled-field__control {
  border: 0;
  border-radius: 0;
}
html[data-theme-mode="gray"] #scheduleCellDialog .schedule-repeat-option {
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #schedulePreviewDialog .schedule-preview-header {
  padding-bottom: 14px;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #schedulePreviewDialog .schedule-preview-classrooms {
  gap: 0;
  border-radius: 12px;
  background: var(--gray-surface);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #schedulePreviewDialog .schedule-preview-classrooms > button {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
}
html[data-theme-mode="gray"] #schedulePreviewDialog .schedule-preview-classrooms > button + button {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #schedulePreviewDialog .schedule-preview-classrooms > button.is-selected {
  color: var(--ui-primary);
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #schedulePreviewDialog .schedule-preview-table :is(.schedule-preview-area, .schedule-preview-break) > td {
  background: var(--gray-inset);
}

/* Agenda: paneles continuos, filtros hundidos y eventos con acciones por celda. */
html[data-theme-mode="gray"] #agendaView :is(.agenda-main-calendar-card, .agenda-events-panel) {
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #505050, #414141);
  box-shadow: 0 5px 16px rgb(0 0 0 / 35%);
}
html[data-theme-mode="gray"] #agendaView .agenda-month-pill-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #agendaView #agendaMonthPills > .ui-expandable-tab:not(.is-selected):not([aria-selected="true"]) {
  border: 0;
  color: var(--ui-text);
  background: var(--gray-surface);
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] #agendaView #agendaMonthPills > .ui-expandable-tab:is(.is-selected, [aria-selected="true"]) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #agendaView .agenda-month-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #agendaView .agenda-calendar-legend {
  border: 0;
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #agendaView .agenda-calendar-legend i.is-personal,
html[data-theme-mode="gray"] #agendaCalendar .agenda-day-markers i.is-personal {
  background: var(--ui-primary);
}
html[data-theme-mode="gray"] #agendaView .agenda-events-panel {
  padding: 0;
  overflow: hidden;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-tabs-row {
  margin: 0;
  padding: 14px;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-type-tabs {
  gap: 0;
  overflow: hidden;
  border-radius: 13px;
  background: var(--gray-surface);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #agendaView .agenda-event-type-pill {
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-type-pill + .agenda-event-type-pill {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-type-pill.is-selected {
  color: var(--ui-primary);
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #agendaView .agenda-event-type-pill:not(.is-selected):hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] #agendaView .agenda-date-filter {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #agendaView #agendaEventList {
  gap: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row.ui-control-group--row {
  position: relative;
  gap: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row > :is(.agenda-date-badge, .agenda-event-toggle, .agenda-event-action) {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row > .agenda-date-badge {
  color: var(--ui-primary);
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row > :is(.agenda-event-toggle, .agenda-event-action) {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row > .agenda-event-edit {
  color: #ffffff;
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row > .agenda-event-delete {
  color: var(--ui-danger);
}
html[data-theme-mode="gray"] #agendaView .agenda-event-row > :is(.agenda-event-toggle, .agenda-event-action):hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] #agendaView .agenda-events-empty {
  margin: 14px;
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
/* Incluye los selectores de fecha reutilizados fuera de la página Agenda. */
html[data-theme-mode="gray"] :is(dialog.agenda-dialog, #agendaDeleteDialog) {
  --interface-title-color: #ffffff;
  border: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, #505050, #414141) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%) !important;
}
html[data-theme-mode="gray"] .agenda-dialog :is(.agenda-dialog-heading, .agenda-reminder-heading) {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 18px !important;
  border: 0;
  background: transparent;
}
html[data-theme-mode="gray"] .agenda-dialog :is(.agenda-dialog-heading, .agenda-reminder-heading)::after {
  content: '';
  position: absolute;
  inset: auto calc(-1 * var(--ui-modal-padding, 24px)) 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] .agenda-dialog .agenda-dialog-actions {
  position: relative;
  margin-top: 0;
  padding-top: 18px !important;
  border: 0;
}
html[data-theme-mode="gray"] .agenda-dialog .agenda-dialog-actions::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--ui-modal-padding, 24px)) auto;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] .agenda-dialog .ui-labeled-field {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 14px;
}
html[data-theme-mode="gray"] .agenda-dialog .ui-labeled-field > .ui-labeled-field__header {
  border-radius: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat, var(--gray-surface) !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] .agenda-dialog .ui-labeled-field > .ui-labeled-field__control {
  border: 0;
  border-radius: 0;
}
html[data-theme-mode="gray"] #agendaEventDialog .agenda-event-preview-slot .mention-field-preview {
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #agendaExportDialog :is(
  .agenda-export-format-buttons, .agenda-export-range-buttons
) {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #agendaExportDialog :is(
  .agenda-export-format-buttons, .agenda-export-range-buttons
) > button {
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #agendaExportDialog :is(
  .agenda-export-format-buttons, .agenda-export-range-buttons
) > button + button {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #agendaExportDialog :is(
  .agenda-export-format-buttons, .agenda-export-range-buttons
) > button.is-selected {
  color: var(--ui-primary);
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #agendaExportDialog :is(.agenda-export-fixed-row, .agenda-export-comments-card) {
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #agendaExportDialog .export-split-button {
  gap: 0 !important;
  color: #ffffff !important;
  background: var(--gray-surface) !important;
  box-shadow: 0 3px 9px rgb(0 0 0 / 28%) !important;
}
html[data-theme-mode="gray"] #agendaExportDialog .export-split-button > span {
  color: #ffffff;
  background: transparent;
}
html[data-theme-mode="gray"] #agendaExportDialog .export-split-button__text {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat;
}
html[data-theme-mode="gray"] .agenda-reminder-date-dialog :is(
  .agenda-reminder-calendar-card, .agenda-reminder-event-card
) {
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .agenda-reminder-date-dialog :is(
  .agenda-reminder-day, .agenda-reminder-calendar-head button, .agenda-reminder-event-icon
) {
  border: 0;
  color: var(--ui-text);
  background: var(--gray-surface);
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] .agenda-reminder-date-dialog .agenda-reminder-day.is-selected {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .agenda-reminder-date-dialog .agenda-reminder-calendar-footer {
  border: 0;
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}

/* Aulas: el relieve seleccionado se hunde y conserva el matiz de favorito. */
html[data-theme-mode="gray"] .ui-classroom-card.ui-classroom-card {
  --ui-classroom-selected-primary-bg: color-mix(in srgb, var(--ui-primary) 18%, #303030);
  border-color: var(--ui-border);
  background: var(--gray-surface);
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] .ui-classroom-card.ui-classroom-card:hover {
  background: var(--gray-surface-hover);
}
html[data-theme-mode="gray"] .ui-classroom-card.ui-classroom-card:is(.is-active, .is-selected, [aria-pressed="true"]) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-primary) 16%, #292929),
    color-mix(in srgb, var(--ui-primary) 10%, #353535));
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .ui-classroom-card.ui-classroom-card.is-favorite:is(.is-active, .is-selected, [aria-pressed="true"]) {
  background: linear-gradient(180deg, #49412b, #3c382c);
}
html[data-theme-mode="gray"] .ui-classroom-card > .ui-classroom-card__icon {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .ui-classroom-card.is-favorite > .ui-classroom-card__icon {
  background: linear-gradient(180deg, #453e28, #302d23);
}
html[data-theme-mode="gray"] :is(.ui-content-card__icon, .documents-connection-icon) {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}

/* Selectores laterales: una tarjeta continua con divisores hundidos. */
html[data-theme-mode="gray"] #appView :is(
  .ui-classroom-sidebar__list, .planning-subject-list,
  :has(> .ui-context-selector-card)
) {
  --gray-sidebar-divider: linear-gradient(180deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  gap: 0 !important;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #appView :is(
  .ui-classroom-sidebar__list, .planning-subject-list,
  :has(> .ui-context-selector-card)
) > :is(.ui-classroom-sidebar__item, .ui-context-selector-card, .planning-subject-card) {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #appView :is(.ui-classroom-sidebar__item, .ui-context-selector-card) {
  background: transparent !important;
}
html[data-theme-mode="gray"] #appView :is(.ui-classroom-sidebar__item, .ui-context-selector-card):hover {
  background: rgb(255 255 255 / 5%) !important;
}
html[data-theme-mode="gray"] #appView :is(.ui-classroom-sidebar__item, .ui-context-selector-card):is(.is-active, .is-selected, [aria-pressed="true"]) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-primary) 16%, #292929),
    color-mix(in srgb, var(--ui-primary) 10%, #353535)) !important;
}
html[data-theme-mode="gray"] #appView .ui-classroom-sidebar__item.is-favorite:is(.is-active, .is-selected, [aria-pressed="true"]) {
  background: linear-gradient(180deg, #49412b, #3c382c) !important;
}
html[data-theme-mode="gray"] #appView :is(
  .ui-classroom-sidebar__item, .ui-context-selector-card, .planning-subject-card
):not([hidden]):not(:nth-last-child(1 of :not([hidden])))::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-sidebar-divider);
  pointer-events: none;
}
html[data-theme-mode="gray"] #appView :is(.ui-classroom-sidebar__item, .ui-context-selector-card):focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -3px;
}
/* En los módulos que muestran las aulas horizontalmente, el divisor gira. */
@media (max-width: 760px) {
  html[data-theme-mode="gray"] :is(#contactsSidebar, #birthdaysSidebar) .ui-classroom-sidebar__item::after {
    inset: 0 0 0 auto !important;
    width: 3px;
    height: auto !important;
    background: linear-gradient(90deg,
      rgb(0 0 0 / 80%) 0 1px,
      rgb(0 0 0 / 42%) 1px 2px,
      rgb(255 255 255 / 24%) 2px 3px) !important;
  }
}
@media (max-width: 700px) {
  html[data-theme-mode="gray"] #packagesSidebar .ui-classroom-sidebar__item::after {
    inset: 0 0 0 auto !important;
    width: 3px;
    height: auto !important;
    background: linear-gradient(90deg,
      rgb(0 0 0 / 80%) 0 1px,
      rgb(0 0 0 / 42%) 1px 2px,
      rgb(255 255 255 / 24%) 2px 3px) !important;
  }
}

/* Controles secundarios y pestañas mantienen su geometría y muestran el
   relieve hundido al activarse. Las acciones de color conservan su función. */
html[data-theme-mode="gray"] :is(
  .button-secondary, .button-quiet, .ui-header-action, .dialog-icon-close,
  .dialog-close-button, .ui-expandable-tab, .appearance-theme-card
) {
  border-color: var(--ui-border);
  background: var(--gray-surface) !important;
  box-shadow: var(--gray-raised-shadow) !important;
}
html[data-theme-mode="gray"] :is(
  .button-secondary, .button-quiet, .ui-header-action, .dialog-icon-close,
  .dialog-close-button, .ui-expandable-tab, .appearance-theme-card
):hover:not(:disabled):not(.ui-expandable-tab:is(.is-selected, [aria-selected="true"])) {
  background: var(--gray-surface-hover) !important;
}
html[data-theme-mode="gray"] :is(
  .button-secondary, .button-quiet, .ui-header-action, .ui-expandable-tab,
  .appearance-theme-card
):is(:active, .is-selected, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--gray-inset) !important;
  box-shadow: var(--gray-inset-shadow) !important;
}
html[data-theme-mode="gray"] .ui-expandable-tab[aria-selected="true"] {
  color: var(--ui-primary) !important;
}
html[data-theme-mode="gray"] .button-secondary:is(.is-selected, [aria-pressed="true"]) {
  color: var(--ui-primary);
}

/* Campos: borde superior oscuro, brillo inferior y fondo cóncavo de Elipass. */
html[data-theme-mode="gray"] :is(.ui-labeled-field, .ui-labeled-field-page-editor) {
  --ui-tab-control-surface: var(--ui-field-control-surface);
  --ui-tab-control-hover: var(--ui-field-control-hover);
  --ui-tab-control-focus: var(--ui-field-control-focus);
  --ui-labeled-field-control-bg: var(--ui-field-control-surface);
  --ui-page-editor-control-bg: var(--ui-field-control-surface);
}
html[data-theme-mode="gray"] :is(
  .ui-labeled-field__control, .ui-labeled-field-page-editor__control
) {
  color: var(--ui-text) !important;
  background: var(--gray-inset) !important;
  box-shadow: var(--gray-inset-shadow) !important;
}
html[data-theme-mode="gray"] :is(
  .ui-labeled-field__control, .ui-labeled-field-page-editor__control
):is(:focus, :focus-visible, :focus-within) {
  border: 0 !important;
  outline: none !important;
  background: var(--ui-field-control-focus) !important;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 65%) !important;
}
html[data-theme-mode="gray"] :is(
  .ui-labeled-field__control, .ui-labeled-field-page-editor__control
) :where(input, select, textarea) {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] .ui-labeled-field:is(
  .ui-labeled-field--tab, .ui-labeled-field--tab-compact, .ui-labeled-field--tab-bottom
) > .ui-labeled-field__control {
  background: var(--gray-inset) !important;
  box-shadow: var(--gray-inset-shadow) !important;
}
html[data-theme-mode="gray"] .ui-labeled-field:is(
  .ui-labeled-field--tab, .ui-labeled-field--tab-compact, .ui-labeled-field--tab-bottom
) > .ui-labeled-field__control:hover {
  background: var(--ui-field-control-hover) !important;
}
html[data-theme-mode="gray"] .ui-labeled-field:is(
  .ui-labeled-field--tab, .ui-labeled-field--tab-compact, .ui-labeled-field--tab-bottom
):focus-within > .ui-labeled-field__control {
  border: 0 !important;
  outline: none !important;
  background: var(--ui-field-control-focus) !important;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 65%) !important;
}
html[data-theme-mode="gray"] :is(
  .ui-labeled-field__control, .ui-labeled-field-page-editor__control
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):is(:focus, :focus-visible) {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] :is(
  .ui-labeled-field__header, .ui-labeled-field-page-editor__header
) {
  color: var(--ui-text) !important;
  background: var(--gray-surface) !important;
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] :is(input, select, textarea)::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}

/* Diálogos y menús comparten las superficies elevadas, sin tocar las hojas
   de documentos ni la presentación a pantalla completa. */
html[data-theme-mode="gray"] :is(
  dialog.ui-modal:not(.ui-modal--immersive), .appearance-dialog,
  .classroom-actions-dropdown, .planning-overflow-panel, .grades-state-info-popover
) {
  border-color: var(--ui-border);
  color: var(--ui-text);
  background: var(--gray-surface) !important;
  box-shadow: var(--ui-shadow-2) !important;
}
html[data-theme-mode="gray"] :is(dialog.ui-modal, .appearance-dialog)::backdrop {
  background: rgb(0 0 0 / 70%);
}
html[data-theme-mode="gray"] #webAppearanceDialog :is(.appearance-section, .appearance-head) {
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] #webAppearanceDialog .appearance-section {
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] #webAppearanceDialog .appearance-theme-card.is-selected > strong {
  color: var(--ui-primary);
}
html[data-theme-mode="gray"] #webAppearanceDialog .appearance-theme-card.is-selected .appearance-theme-icon {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}

/* Procesos de Evaluaciones: mismo acabado unificado que las campañas. */
html[data-theme-mode="gray"] :is(#evaluationsView, #civicMondaysView) .evaluation-processes-main {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) > .evaluation-process-card {
  --interface-title-color: var(--ui-text);
  position: relative;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) > .evaluation-process-card:is(:hover, :focus-within) {
  background: rgb(255 255 255 / 5%) !important;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) > .evaluation-process-card:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-type-icon {
  color: var(--process-color);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) :is(.evaluation-process-card-chips, .evaluation-process-card-actions) {
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-card-chips > span {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-card-chips > .evaluation-process-type-label {
  color: var(--process-color);
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-card-actions > .button {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-card-actions > .button-quiet {
  color: var(--ui-danger);
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) :is(.evaluation-process-card-chips, .evaluation-process-card-actions) > :not(:first-child) {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent !important;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-card-actions > .button:hover:not(:disabled) {
  background-color: rgb(255 255 255 / 6%) !important;
}
html[data-theme-mode="gray"] :is(#evaluationsView #evaluationProcessList, #civicMondaysView #civicHistory) .evaluation-process-card-actions > .button:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -4px;
}

/* Lunes Cívicos: editor coherente con la lista de procesos SoftGray. */
html[data-theme-mode="gray"] #civicMondaysView .civic-editor-toolbar {
  gap: 0 !important;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-editor-toolbar > :not([hidden]) {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-editor-toolbar > :nth-child(n + 2 of :not([hidden])) {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-editor-toolbar > #civicEditorBackButton {
  border-radius: 18px 0 0 18px;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-editor-toolbar > .civic-editor-icon-button:not(:disabled):hover {
  background-color: rgb(255 255 255 / 6%);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-card {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #505050, #444444) !important;
  box-shadow: 0 5px 16px rgb(0 0 0 / 35%) !important;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-card > .evaluation-reference-card-header {
  position: relative;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-card > .evaluation-reference-card-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-card :is(
  .evaluation-reference-number, .evaluation-reference-count, .civic-inline-icon
) { color: var(--ui-primary); }
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-body {
  background: transparent;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-body .ui-labeled-field {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 14px;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-body .ui-labeled-field > .ui-labeled-field__header {
  border-radius: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat, var(--gray-surface) !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-reference-body .ui-labeled-field > .ui-labeled-field__control {
  border: 0;
  border-radius: 0;
}
/* La pestaña inferior conserva su silueta original, sin recorte rectangular. */
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview .civic-program-field {
  overflow: visible;
  border-radius: 0;
}
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview .civic-program-field > .ui-labeled-field__control {
  border-radius: var(--ui-labeled-field-tab-radius) var(--ui-labeled-field-tab-radius)
    var(--ui-labeled-field-tab-radius) 0;
}
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview .civic-program-field > .ui-labeled-field__header {
  border-radius: 0 0 var(--ui-labeled-field-tab-radius) var(--ui-labeled-field-tab-radius);
  background-position: left top, 0 0 !important;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-participant-summary {
  padding-bottom: 14px;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-flag-count {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles {
  --civic-role-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --civic-role-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: var(--civic-role-edge-x), var(--civic-role-edge-y) !important;
  transform: none;
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:nth-child(3n) {
  --civic-role-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:nth-last-child(-n + 2) {
  --civic-role-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:hover {
  background: var(--gray-surface-hover) !important;
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-flag-card {
  --civic-role-edge-x: inset 0 0 0 transparent;
  --civic-role-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles .civic-role-icon {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles .is-assigned .civic-role-icon {
  color: var(--ui-success);
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles .is-assigned .civic-role-copy > span {
  color: var(--ui-text);
}
html[data-theme-mode="gray"] #civicMondaysView #civicRoles .civic-role-action {
  color: var(--ui-primary);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gray-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options > .planning-editor-action-card {
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent !important;
  box-shadow: none;
  animation: none;
  transform: none;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options > .planning-editor-action-card + .planning-editor-action-card {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options > .planning-editor-action-card:hover:not(:disabled) {
  background: var(--gray-surface-hover) !important;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options > .planning-editor-action-card::before {
  content: none;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options :is(.planning-editor-action-badge, .planning-editor-action-arrow, .planning-editor-action-copy small) {
  color: var(--ui-text);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options .planning-editor-action-badge {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-compatibility-panel {
  padding-top: 14px;
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #civicMondaysView .civic-compatibility-content textarea {
  border: 0;
  color: var(--ui-text);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-compatibility-content textarea:focus {
  outline: none;
  background: var(--ui-field-control-focus);
}
html[data-theme-mode="gray"] #civicMondaysView .civic-prompt-actions > .button {
  color: #ffffff;
  background: var(--gray-surface);
  box-shadow: var(--gray-raised-shadow);
}
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview :is(.civic-program-card, .civic-speech-card) {
  border: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, #5b5b5b, #4d4d4d);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview :is(h3, .civic-number) {
  color: #ffffff;
}
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview .civic-number {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #civicMondaysView #civicScriptPreview [contenteditable="true"]:focus {
  outline: none;
  background-color: var(--ui-field-control-focus);
}
/* Los participantes se desplazan bajo los divisores de cabecera y pie. */
html[data-theme-mode="gray"] #civicStudentDialog .evaluation-students-dialog-shell {
  isolation: isolate;
  background: linear-gradient(180deg, #505050, #444444);
}
html[data-theme-mode="gray"] #civicStudentDialog :is(.evaluation-students-dialog-heading, .evaluation-students-dialog-footer) {
  position: relative;
  z-index: 2;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] #civicStudentDialog .evaluation-students-dialog-heading::after,
html[data-theme-mode="gray"] #civicStudentDialog .evaluation-students-dialog-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #civicStudentDialog .evaluation-students-dialog-footer::before {
  inset: 0 0 auto;
}
html[data-theme-mode="gray"] #civicStudentDialog #civicStudentList {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #civicStudentDialog .evaluation-student-row {
  border: 0;
  border-radius: 0;
  background: var(--gray-surface);
  box-shadow: inset 0 -1px 0 #6a6a6a, inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
}
html[data-theme-mode="gray"] #civicStudentDialog .evaluation-student-row.is-selected {
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] :is(#civicImportDialog, #civicExportDialog, #civicConfirmDialog) {
  --interface-title-color: #ffffff;
  border: 0;
  background: linear-gradient(180deg, #505050, #444444) !important;
}
html[data-theme-mode="gray"] #civicImportDialog :is(.evaluation-reference-dialog-heading, .evaluation-reference-dialog-body) {
  background: transparent;
}
html[data-theme-mode="gray"] #civicExportDialog .export-split-button {
  gap: 0 !important;
  color: #ffffff !important;
  background: var(--gray-surface) !important;
  box-shadow: 0 3px 9px rgb(0 0 0 / 28%) !important;
}
html[data-theme-mode="gray"] #civicExportDialog .export-split-button > span {
  color: #ffffff;
  background: transparent;
}
html[data-theme-mode="gray"] #civicExportDialog .export-split-button__text {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat;
}
/* La retícula original cambia de tres a dos columnas y después a una. */
@media (max-width: 1100px) {
  html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:nth-child(n) {
    --civic-role-edge-x: inset -1px 0 0 #6a6a6a,
      inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
    --civic-role-edge-y: inset 0 -1px 0 #6a6a6a,
      inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  }
  html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:nth-child(2n) {
    --civic-role-edge-x: inset 0 0 0 transparent;
  }
  html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:nth-last-child(-n + 2) {
    --civic-role-edge-y: inset 0 0 0 transparent;
  }
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:nth-child(n) {
    --civic-role-edge-x: inset 0 0 0 transparent;
    --civic-role-edge-y: inset 0 -1px 0 #6a6a6a,
      inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  }
  html[data-theme-mode="gray"] #civicMondaysView #civicRoles > .civic-participant-card:last-child {
    --civic-role-edge-y: inset 0 0 0 transparent;
  }
}
@media (max-width: 760px) {
  html[data-theme-mode="gray"] #civicMondaysView .civic-creation-options > .planning-editor-action-card + .planning-editor-action-card {
    box-shadow: inset 0 1px 0 #0c0c0c, inset 0 2px 0 #222222, inset 0 3px 0 #6a6a6a;
  }
}

/* Detalle de Auto y Coevaluación: enlace, respuestas, calificaciones y tablas. */
html[data-theme-mode="gray"] #autoCoevalView .ui-content-card {
  border: 0;
  background: linear-gradient(180deg, #505050, #444444) !important;
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%) !important;
}
html[data-theme-mode="gray"] #autoCoevalView :is(.ui-content-card__header, .auto-coeval-table-heading) {
  --interface-title-color: var(--ui-text);
  --interface-subtitle-color: var(--ui-text-muted);
  position: relative;
  border: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #autoCoevalView :is(.ui-content-card__header, .auto-coeval-table-heading)::after,
html[data-theme-mode="gray"] #autoCoevalView .ui-content-card__footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #autoCoevalView .ui-content-card__footer {
  position: relative;
  border: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .ui-content-card__footer::before { inset: 0 0 auto; }
html[data-theme-mode="gray"] #autoCoevalView :is(.ui-content-card__icon, .auto-coeval-table-heading-icon) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-link-info-popover {
  border: 0;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
}
html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-link-row, .auto-coeval-progress-grid, .percent-input) {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #autoCoevalView #autoCoevalStudentLink {
  border: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #autoCoevalView #autoCoevalCopyLink {
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: var(--gray-divider-x) left top / 3px 100% no-repeat, var(--gray-surface);
  box-shadow: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-progress-grid > div {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-progress-grid > div + div::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-status-actions, .auto-coeval-gradebook-controls) {
  --auto-action-divider: var(--gray-divider-x);
  --auto-action-divider-size: 3px 100%;
  gap: 0 !important;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-status-actions, .auto-coeval-gradebook-controls) > .button {
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-status-actions, .auto-coeval-gradebook-controls) > .button:not([hidden]):not(:nth-child(1 of :not([hidden]))) {
  background: var(--auto-action-divider) left top / var(--auto-action-divider-size) no-repeat transparent !important;
}
html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-status-actions, .auto-coeval-gradebook-controls) > .button:hover:not(:disabled) {
  background-color: rgb(255 255 255 / 6%) !important;
}
html[data-theme-mode="gray"] #autoCoevalView #autoCoevalArchiveButton {
  background: var(--auto-action-divider) left top / var(--auto-action-divider-size) no-repeat #b3261e !important;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-gradebook-content {
  gap: 0;
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--gray-inset);
  box-shadow: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-gradebook-card .auto-coeval-weight-grid { gap: 0; }
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-gradebook-card :is(.auto-coeval-activity-choice, .auto-coeval-gradebook-targets, .auto-coeval-gradebook-help) {
  position: relative;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-activity-choice + .auto-coeval-activity-choice::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-gradebook-targets, .auto-coeval-gradebook-help)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-gradebook-illustration {
  border: 0;
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-gradebook-card .percent-input > :is(input, span) {
  border: 0 !important;
  outline: none !important;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-gradebook-card .percent-input > span {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .percent-input:focus-within {
  background: var(--ui-field-control-focus);
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table-panel {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table-heading {
  margin: 0;
  border-radius: 0;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-classroom-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table {
  --auto-cell-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --auto-cell-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table :is(th, td) {
  border: 0 !important;
  box-shadow: var(--auto-cell-edge-x), var(--auto-cell-edge-y) !important;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table :is(th, td):last-child {
  --auto-cell-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table tbody > tr:last-child > td {
  --auto-cell-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table thead th {
  border-radius: 0 !important;
  color: var(--ui-on-primary) !important;
  background: var(--ui-primary) !important;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table.is-results tbody td:last-child {
  position: relative;
  padding: 0;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-table.is-results tbody td:last-child > .button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #autoCoevalView :is(.auto-coeval-status-actions, .auto-coeval-gradebook-controls) {
    --auto-action-divider: var(--gray-divider-y);
    --auto-action-divider-size: 100% 3px;
  }
  html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-activity-choice + .auto-coeval-activity-choice::before {
    inset: 0 0 auto;
    width: auto;
    height: 3px;
    background: var(--gray-divider-y);
  }
}

/* Campañas de Autoevaluación y Coevaluación: lista continua SoftGray. */
html[data-theme-mode="gray"] #autoCoevalView #autoCoevalSectionPanel {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-list {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-card {
  position: relative;
  border: 0;
  border-radius: 0 !important;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
  transform: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-card:hover {
  background: rgb(255 255 255 / 5%);
  box-shadow: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-card:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-card:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -4px;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-icon {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-chips {
  gap: 0;
  border-radius: 12px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-chips > span {
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #autoCoevalView .auto-coeval-campaign-chips > span:not(:first-child) {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent;
}

/* Vinculada: consulta de la actividad sobre una tarjeta de datos SoftGray. */
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details,
html[data-theme-mode="gray"] dialog.evaluation-rubric-dialog.is-link-details.ui-modal {
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--gray-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%) !important;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-rubric-dialog-header {
  position: relative;
  z-index: 2;
  padding: 18px 20px;
  border: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-rubric-dialog-header::after,
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-block > h3::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-rubric-dialog-body {
  min-height: 0;
  margin: 0;
  padding: 20px;
  overflow-y: auto;
  background: transparent;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-block {
  gap: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-block > h3 {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-content {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-content > p {
  padding: 0 16px;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-row {
  position: relative;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-row::after {
  position: absolute;
  grid-column: auto;
  grid-row: auto;
  inset: auto 0 0;
  height: 3px;
  margin: 0;
  border: 0;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-row:last-child::after { content: none; }
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-row dt {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--ui-text-muted);
  background: var(--gray-divider-x) right top / 3px 100% no-repeat;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-link-details .evaluation-linked-activity-row dd {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  color: var(--ui-text);
}

/* Asistente de IA: mensajes SoftGray y controles integrados. */
html[data-theme-mode="gray"] #evaluationAiChatPanel {
  border: 0;
  background: var(--gray-surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 38%);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel :is(.evaluation-ai-chat-header, .evaluation-ai-chat-composer) {
  position: relative;
  z-index: 2;
  border: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-header::after,
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-composer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-composer::before { inset: 0 0 auto; }
html[data-theme-mode="gray"] #evaluationAiChatPanel :is(.evaluation-ai-chat-mark, .evaluation-ai-chat-message-label) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-mark { color: #ffffff; }
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-icon-button {
  border: 0;
  color: var(--ui-text);
  background: var(--gray-surface);
  box-shadow: 0 2px 5px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-bubble {
  border: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-message.is-user .evaluation-ai-chat-bubble {
  color: var(--ui-text);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-primary) 18%, #303030),
    color-mix(in srgb, var(--ui-primary) 12%, #353535));
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-message.is-error .evaluation-ai-chat-bubble {
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-message.is-pending .evaluation-ai-chat-bubble {
  color: var(--ui-text-muted);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-bubble pre {
  border: 0;
  color: var(--ui-text);
  background: #242424;
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-suggestions {
  width: auto;
  gap: 0;
  margin: 0 12px 10px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-suggestions > .evaluation-ai-chat-quick-action {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-suggestions > .evaluation-ai-chat-quick-action:not(:first-child) {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent;
}
html[data-theme-mode="gray"] #evaluationAiChatPanel .evaluation-ai-chat-suggestions > .evaluation-ai-chat-quick-action:hover:not(:disabled) {
  background-color: rgb(255 255 255 / 6%);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel #evaluationAiChatInput {
  border: 0;
  outline: none;
  color: var(--ui-text);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel #evaluationAiChatInput:is(:focus, :focus-visible) {
  border: 0;
  outline: none;
  background: var(--ui-field-control-focus);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 65%);
}
html[data-theme-mode="gray"] #evaluationAiChatPanel #evaluationAiChatInput::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}

/* Registrar actividad entregada: escáner, herramientas y previsualización. */
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog {
  border: 0;
  background: var(--gray-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%) !important;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(.evaluation-capture-heading, .evaluation-capture-footer) {
  position: relative;
  z-index: 3;
  border: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-heading::after,
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-footer::before { inset: 0 0 auto; }
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-body {
  z-index: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(
  .evaluation-capture-icon, .evaluation-capture-secondary-button, .evaluation-capture-apply-crop
) {
  border: 0;
  color: #ffffff;
  background: var(--gray-surface) !important;
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(
  .evaluation-capture-sources, .evaluation-capture-tools, .evaluation-capture-document-actions
) {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(
  .evaluation-capture-sources, .evaluation-capture-tools, .evaluation-capture-document-actions
) > .button {
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(
  .evaluation-capture-sources, .evaluation-capture-tools, .evaluation-capture-document-actions
) > .button:not(:first-child) {
  background: var(--gray-divider-y) left top / 100% 3px no-repeat transparent !important;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(
  .evaluation-capture-sources, .evaluation-capture-tools, .evaluation-capture-document-actions
) > .button:hover:not(:disabled):not([aria-pressed="true"]) {
  background-color: rgb(255 255 255 / 6%) !important;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-tools > .button[aria-pressed="true"] {
  color: var(--ui-primary);
  background-color: #242424 !important;
  box-shadow: var(--gray-inset-shadow) !important;
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-page {
  border: 0;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-page[aria-current="true"] {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow), inset 0 0 0 2px var(--ui-primary);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-canvas-shell {
  border: 0;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-canvas-shell canvas {
  box-shadow: 0 4px 14px rgb(0 0 0 / 45%);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog :is(
  .evaluation-capture-info, .evaluation-capture-file, .evaluation-capture-empty
) {
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-progress-track {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog button:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -3px;
}
@media (max-width: 560px) {
  html[data-theme-mode="gray"] #evaluationSubmittedCaptureDialog .evaluation-capture-sources > .button:not(:first-child) {
    background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent !important;
  }
}

/* Calificar instrumento: tabla temática y barra inferior fija. Se conserva
   el ajuste automático del instrumento completo dentro de la ventana. */
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading,
html[data-theme-mode="gray"] dialog.evaluation-rubric-dialog.is-grading.ui-modal {
  padding: 0;
  border: 0;
  color: var(--ui-text);
  background: var(--gray-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%) !important;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-dialog-body {
  padding: 0;
  background: transparent;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-dialog-footer {
  position: relative;
  z-index: 3;
  border: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-dialog-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table {
  --grading-cell-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --grading-cell-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  border: 0;
  border-radius: 12px 12px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-text);
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table :is(th, td) {
  border: 0 !important;
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--grading-cell-edge-x), var(--grading-cell-edge-y) !important;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table :is(th, td):last-child {
  --grading-cell-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table tbody > tr:last-child > :is(th, td) {
  --grading-cell-edge-y: inset 0 0 0 transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table thead th {
  color: var(--ui-on-primary) !important;
  background: var(--ui-primary) !important;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table tbody th[scope="row"] {
  background: linear-gradient(180deg, #535353, #474747);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-grading-rubric-table td.is-selected {
  color: var(--ui-text) !important;
  background: var(--evaluation-cell-selected-bg, var(--ui-primary-muted)) !important;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-cell-choice {
  color: inherit;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-cell-choice:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -4px;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-observations-row > :is(th, td) {
  color: var(--ui-text);
  background: #292929;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-observations-row > td:focus-within {
  background: var(--ui-field-control-focus);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-observations-input {
  color: var(--ui-text);
  background: transparent;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-score-summary {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-score { color: var(--ui-primary); }
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-dialog-student { color: var(--ui-text); }
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-manual-grade input {
  border: 0;
  color: var(--ui-text);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading .evaluation-rubric-manual-grade input:focus {
  outline: none;
  background: var(--ui-field-control-focus);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading.is-checklist .evaluation-grading-rubric-table thead th:first-child {
  width: 50%;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading.is-checklist .evaluation-rubric-dialog-body {
  gap: 0;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading.is-checklist .evaluation-rubric-manual-grade {
  position: relative;
  flex-shrink: 0;
  min-height: 84px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  gap: 14px;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading.is-checklist .evaluation-rubric-manual-grade::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-rubric-dialog.is-grading.is-checklist .evaluation-rubric-manual-grade input {
  width: 128px;
  min-height: 52px;
  height: 52px;
  font-size: 1rem;
  font-weight: 700;
}

/* Grupos de calificación: gestor, editor e integrantes con superficies SoftGray. */
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog,
html[data-theme-mode="gray"] dialog.evaluation-grading-groups-dialog.ui-modal {
  border: 0;
  background: var(--gray-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%) !important;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog > :is(
  .evaluation-grading-groups-heading, .evaluation-grading-groups-footer
) {
  position: relative;
  z-index: 2;
  border: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] .evaluation-grading-groups-heading::after,
html[data-theme-mode="gray"] .evaluation-grading-groups-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-footer::before { inset: 0 0 auto; }
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-groups-list { gap: 12px; }
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-summary {
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #575757, #494949);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-summary > div:first-child {
  padding: 14px 16px;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-tools {
  position: relative;
  align-self: stretch;
  gap: 0;
}
html[data-theme-mode="gray"] .evaluation-grading-group-tools::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-tools > .button {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  color: var(--ui-primary);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] .evaluation-grading-group-tools > .button + .button {
  color: var(--ui-danger);
  background: var(--gray-divider-y) left top / 100% 3px no-repeat transparent !important;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-tools.ui-control-group--column > .button:hover:not(:disabled) {
  background: rgb(255 255 255 / 5%) !important;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-tools.ui-control-group--column > .button + .button:hover:not(:disabled) {
  background: var(--gray-divider-y) left top / 100% 3px no-repeat
    color-mix(in srgb, var(--ui-danger) 8%, transparent) !important;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-editor-controls {
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] .evaluation-grading-group-editor-controls > .evaluation-grading-group-count {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-picker {
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* El listado llega a la barra inferior: solo ella dibuja el divisor de cierre.
   Sus filas se recortan en el área de scroll, bajo los controles y el pie. */
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor > .evaluation-grading-groups-body {
  position: relative;
  isolation: isolate;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-editor-controls {
  position: relative;
  z-index: 2;
  padding: 18px 24px;
  border-radius: 0;
  box-shadow: none;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-editor-controls::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-picker {
  position: relative;
  z-index: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 24px;
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor > .evaluation-grading-groups-body > .notice {
  margin: 8px 24px;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-choice {
  position: relative;
  min-height: 68px;
  border: 0;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #4a4a4a, #404040);
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-choice:has(:checked) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-primary) 16%, #292929),
    color-mix(in srgb, var(--ui-primary) 10%, #353535));
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .evaluation-grading-group-choice::after,
html[data-theme-mode="gray"] .evaluation-group-full-members > li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-choice:last-child::after {
  content: none;
}
@media (min-width: 621px) {
  html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-choice:nth-last-child(2):nth-child(odd)::after {
    content: none;
  }
}
@media (max-width: 720px) {
  html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-editor-controls {
    padding: 16px;
  }
  html[data-theme-mode="gray"] .evaluation-grading-groups-dialog.is-groups-editor .evaluation-grading-group-picker {
    padding-inline: 16px;
  }
}
html[data-theme-mode="gray"] .evaluation-grading-group-choice:nth-child(odd)::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] .evaluation-grading-group-choice:focus-within {
  outline: 2px solid var(--ui-primary);
  outline-offset: -3px;
}
html[data-theme-mode="gray"] .evaluation-group-full-members {
  gap: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] .evaluation-group-full-members > li {
  position: relative;
  border-radius: 0;
  background: transparent;
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] .evaluation-grading-group-choice:nth-child(odd)::before { content: none; }
}
@media (max-width: 600px) {
  html[data-theme-mode="gray"] .evaluation-grading-groups-dialog .evaluation-grading-group-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-theme-mode="gray"] .evaluation-grading-group-tools::before {
    inset: 0 0 auto;
    width: auto;
    height: 3px;
    background: var(--gray-divider-y);
  }
}

/* Calificar y Registrar: tarjeta de estudiante SoftGray con un solo acabado. */
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-entry:not(:last-child)::before {
  width: 3px;
  background: var(--gray-divider-x);
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-marker {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-card {
  gap: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #5b5b5b, #4d4d4d);
  box-shadow: 0 6px 16px rgb(0 0 0 / 40%);
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-card > .evaluation-closure-head {
  position: relative;
  border: 0;
  border-radius: 18px 18px 0 0;
  color: var(--ui-text) !important;
  background: transparent !important;
  font-family: var(--font-body);
  letter-spacing: .02em;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-card > .evaluation-closure-head::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body {
  border: 0;
  border-radius: 0 0 18px 18px;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body .button {
  --export-button-gradient: var(--gray-surface) !important;
  border: 0;
  color: #ffffff !important;
  background: var(--gray-surface) !important;
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%) !important;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body .button:hover:not(:disabled) {
  --export-button-gradient: var(--gray-surface-hover) !important;
  background: var(--gray-surface-hover) !important;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body .evaluation-registration-grade-chips {
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body .evaluation-grade-score-chip {
  position: relative;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-registration-grade-chips > .evaluation-grade-score-chip:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body :is(select, input:not([type="checkbox"]):not([type="radio"])) {
  border: 0 !important;
  color: var(--ui-text) !important;
  background: var(--gray-inset) !important;
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-student-timeline-body :is(select, input):focus {
  outline: none;
  background: var(--ui-field-control-focus) !important;
}
@media (max-width: 560px) {
  html[data-theme-mode="gray"] #evaluationClosurePanel .evaluation-registration-grade-chips > .evaluation-grade-score-chip:not(:last-child)::after {
    inset: auto 0 0;
    width: auto;
    height: 3px;
    background: var(--gray-divider-y);
  }
}

/* Iconos y etiquetas legibles sobre las acciones de grafito. */
html[data-theme-mode="gray"] :is(
  .evaluation-process-actions > .button,
  .planning-add-block-fab, .planning-save-fab,
  .classroom-evaluation-button.evaluation-publication-action-card
) {
  color: #ffffff !important;
}

/* Instrumentos y tablas de actividades: retícula hundida y edición integrada. */
html[data-theme-mode="gray"] #evaluationsView :is(.evaluation-criteria-table-shell, .evaluation-table-editor) {
  border: 0;
  border-radius: 16px;
  background: var(--gray-surface);
  box-shadow: 0 6px 16px rgb(0 0 0 / 32%), 0 2px 5px rgb(0 0 0 / 20%);
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-table, .evaluation-table-editor table, .evaluation-rich-editor table
) {
  --evaluation-cell-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --evaluation-cell-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-text);
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-table, .evaluation-table-editor table, .evaluation-rich-editor table
) :is(th, td) {
  border: 0 !important;
  box-shadow: var(--evaluation-cell-edge-x), var(--evaluation-cell-edge-y) !important;
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-table, .evaluation-table-editor table, .evaluation-rich-editor table
) :is(th, td):last-child {
  --evaluation-cell-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-table, .evaluation-table-editor table, .evaluation-rich-editor table
) tr:last-child > td {
  --evaluation-cell-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-table, .evaluation-table-editor table, .evaluation-rich-editor table
) thead th {
  color: var(--ui-on-primary) !important;
  background: var(--ui-primary) !important;
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-table, .evaluation-table-editor table, .evaluation-rich-editor table
) tbody tr:nth-child(even) > td {
  background: var(--ui-surface-subtle);
}
html[data-theme-mode="gray"] #evaluationsView :is(.evaluation-criteria-table td, .evaluation-table-editor td):focus-within {
  background: var(--ui-field-control-focus) !important;
}
html[data-theme-mode="gray"] #evaluationsView :is(
  .evaluation-criteria-cell-input, .evaluation-table-editor textarea,
  .evaluation-table-cell-preview
) {
  border: 0 !important;
  outline: none !important;
  color: var(--ui-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-criteria-row-actions {
  position: relative;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-criteria-remove {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-danger);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-criteria-remove:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-danger) 10%, transparent);
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-criteria-remove:focus-visible {
  outline: 2px solid var(--ui-danger);
  outline-offset: -4px;
}

/* Catálogo curricular: unidades SoftGray y columnas de tipo, texto y acción. */
.evaluation-catalog-viewport { display: contents; }
html[data-theme-mode="gray"] #evaluationsView .evaluation-catalog-viewport {
  display: block;
  position: relative;
  isolation: isolate;
  min-width: 0;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-catalog-viewport::before,
html[data-theme-mode="gray"] #evaluationsView .evaluation-catalog-viewport::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 3px;
  background: var(--gray-divider-y);
  background-color: var(--ui-surface);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationsView .evaluation-catalog-viewport::after {
  inset: auto 0 0;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults {
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-unit-group {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-unit-heading {
  position: relative;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  color: var(--ui-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-unit-heading::after,
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-unit-items {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item {
  position: relative;
  grid-template-columns: 176px minmax(0, 1fr) 112px;
  align-items: stretch;
  min-height: 48px;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item:hover {
  background: rgb(255 255 255 / 4%);
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item > div {
  display: contents;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item small {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: var(--ui-text-muted);
  background: var(--gray-divider-x) right top / 3px 100% no-repeat;
  text-align: center;
  overflow-wrap: anywhere;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item p {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: var(--ui-text);
  overflow-wrap: anywhere;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item > .button {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  color: var(--ui-primary);
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item > .button:hover:not(:disabled) {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat rgb(255 255 255 / 5%) !important;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item > .button:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -4px;
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #evaluationsView #evaluationCurriculumResults .evaluation-catalog-item {
    grid-template-columns: 100px minmax(0, 1fr) 80px;
  }
}

/* Currículo seleccionado: tipo, contenido y acción en tres columnas. */
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum > .evaluation-selected-item {
  position: relative;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 112px;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum > .evaluation-selected-item:hover {
  background: rgb(255 255 255 / 4%);
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum > .evaluation-selected-item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-item-content {
  display: contents;
  padding: 0;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: auto;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  color: var(--ui-primary);
  background: transparent;
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-chip--objective {
  color: var(--ui-accent);
  background: transparent;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-chip::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-item-content > p {
  display: flex;
  align-items: center;
  min-height: 64px;
  margin: 0;
  padding: 12px 16px;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-item > .button-danger-quiet {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  color: var(--ui-danger);
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-item > .button-danger-quiet:hover:not(:disabled) {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat
    color-mix(in srgb, var(--ui-danger) 10%, transparent);
}
html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum .evaluation-selected-item > .button-danger-quiet:focus-visible {
  outline: 2px solid var(--ui-danger);
  outline-offset: -4px;
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #evaluationsView #evaluationSelectedCurriculum > .evaluation-selected-item {
    grid-template-columns: 100px minmax(0, 1fr) 80px;
  }
}

/* Evaluaciones · gestionar estudiantes: cabecera y pie fijos, selección SoftGray. */
html[data-theme-mode="gray"] #evaluationStudentsDialog {
  border: 0;
  background: var(--gray-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%) !important;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog :is(
  .evaluation-students-dialog-shell, .evaluation-students-dialog-heading,
  .evaluation-students-dialog-footer
) {
  background: transparent;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog :is(
  .evaluation-students-dialog-heading, .evaluation-students-dialog-footer
) {
  position: relative;
  z-index: 2;
  border: 0;
  background: var(--gray-surface);
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-heading::after,
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-footer::before {
  inset: 0 0 auto;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-icon,
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-number {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-dialog-close {
  border: 0;
  background: var(--gray-surface) !important;
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%) !important;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-list.evaluation-student-dialog-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-color: var(--ui-border-strong) transparent;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row {
  position: relative;
  min-height: 76px;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row:not(.is-selected):hover {
  background: rgb(255 255 255 / 5%);
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row.is-selected,
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row.is-selected:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-primary) 16%, #292929),
    color-mix(in srgb, var(--ui-primary) 10%, #353535));
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row:nth-child(odd)::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-main strong {
  color: var(--ui-text);
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-check {
  accent-color: var(--ui-primary);
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-toolbar-actions {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-toolbar-actions > :is(button, .evaluation-count) {
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-students-dialog-toolbar-actions .evaluation-count {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat transparent !important;
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-list.evaluation-student-dialog-list {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0 16px;
  }
  html[data-theme-mode="gray"] #evaluationStudentsDialog .evaluation-student-row:nth-child(odd)::before {
    content: none;
  }
}

/* Registro individual y rápido: superficies SoftGray y estados en una tarjeta. */
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) {
  border: 0;
  background: var(--gray-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%) !important;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(
  .attendance-dialog-heading-row, .quick-attendance-dialog-heading
) {
  position: relative;
  border: 0;
  padding-bottom: 20px;
  background: transparent !important;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(
  .attendance-dialog-heading-row, .quick-attendance-dialog-heading
)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(
  .attendance-apply-all-row, .attendance-comment-card, .quick-student-card, .quick-permission
) {
  border: 0;
  background: linear-gradient(180deg, #4a4a4a, #404040);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #quickAttendanceView :is(.quick-student-icon, .quick-progress-track) {
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #quickAttendanceView .quick-student-icon svg {
  fill: currentColor;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) .is-unmarked { --gray-attendance-tone: #c7c7c7; }
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) .is-excused { --gray-attendance-tone: #f0cf72; }
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) .is-absent { --gray-attendance-tone: #ffaaa2; }
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) .is-present { --gray-attendance-tone: #8ed5ad; }
html[data-theme-mode="gray"] :is(#quickStatusButtons, #attendanceStatusOptions) {
  gap: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--gray-surface);
  box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(.attendance-state-option, .quick-status) {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff;
  background: var(--attendance-state-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(.attendance-state-option, .quick-status):not(.is-current):not(.is-selected):hover:not(:disabled) {
  background: var(--attendance-state-hover) !important;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(.attendance-state-option.is-current, .quick-status.is-selected) {
  background: var(--attendance-state-selected) !important;
  box-shadow: var(--gray-inset-shadow) !important;
}
html[data-theme-mode="gray"] :is(#attendanceStatusDialog, #quickAttendanceView) :is(.attendance-state-option, .quick-status):focus-visible {
  outline: 2px solid var(--gray-attendance-tone, var(--ui-primary));
  outline-offset: -4px;
}
html[data-theme-mode="gray"] #quickStatusButtons > :not(:last-child)::after,
html[data-theme-mode="gray"] #attendanceStatusOptions > :nth-child(odd)::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: 3px;
  background: var(--gray-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #attendanceStatusOptions > :nth-child(-n + 2)::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #quickAttendanceView .quick-summary-item {
  border: 0;
  color: #ffffff;
  background: var(--attendance-state-surface);
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-theme-mode="gray"] #quickAttendanceView .quick-summary-item span {
  color: #ffffff !important;
  background: transparent !important;
}
@media (max-width: 760px) {
  html[data-theme-mode="gray"] #quickStatusButtons > :nth-child(2)::after { content: none; }
  html[data-theme-mode="gray"] #quickStatusButtons > :nth-child(-n + 2)::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 3px;
    background: var(--gray-divider-y);
    pointer-events: none;
  }
}

/* Calificaciones: todos los diálogos comparten el acabado Gris. */
html[data-theme-mode="gray"] #subjectsView dialog.grades-dialog {
  --interface-title-color: #ffffff;
  --grades-modal-surface: linear-gradient(180deg, #505050, #414141);
  --grades-modal-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --grades-modal-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  border: 0;
  border-radius: 20px;
  color: var(--ui-text);
  background: var(--grades-modal-surface) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%) !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(.dialog-title-row, .grades-dialog-heading) {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  padding-bottom: 18px;
  border: 0;
  box-shadow: none;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(.dialog-title-row, .grades-dialog-heading)::after {
  content: '';
  position: absolute;
  inset: auto calc(-1 * var(--ui-modal-padding, 22px)) 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog > .grades-dialog-heading::after {
  right: 0;
  left: 0;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .dialog-actions, .grade-cell-form-actions, .grades-insight-footer,
  .grades-period-archive-actions, .grades-activity-archive-confirm-actions,
  .grades-group-clear-confirm-actions
) {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-top: 18px;
  border: 0;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .dialog-actions, .grade-cell-form-actions, .grades-insight-footer,
  .grades-period-archive-actions, .grades-activity-archive-confirm-actions,
  .grades-group-clear-confirm-actions
)::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--ui-modal-padding, 22px)) auto;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-dialog-title-icon, .grades-add-menu-icon, .grades-activity-option-icon
) {
  border: 0;
  color: var(--ui-primary);
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .ui-labeled-field {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .ui-labeled-field > .ui-labeled-field__header {
  border: 0;
  border-radius: 0;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat, var(--gray-surface) !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .ui-labeled-field > .ui-labeled-field__control {
  border: 0;
  border-radius: 0;
}
/* Opciones y acciones unidas: surcos interiores en lugar de tarjetas sueltas. */
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-add-menu-options, .grades-activity-options-grid, .grades-cell-options-grid,
  .grades-period-move-actions, .grade-group-action-grid, .grades-clear-options,
  .grades-final-breakdown-nav
) {
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--gray-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-add-menu-option, .grades-activity-option, .grades-cell-menu-option,
  .grade-group-action-card, .grades-choice-row, .grades-period-move-actions > .button,
  .grades-final-breakdown-nav > *
) {
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-add-menu-option, .grades-activity-option, .grades-cell-menu-option,
  .grades-choice-row, .grades-period-move-actions > .button,
  .grades-final-breakdown-nav > .button
):hover:not(:disabled) {
  background: var(--gray-surface-hover) !important;
  transform: none;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-add-menu-option + .grades-add-menu-option,
  .grade-group-action-card + .grade-group-action-card,
  .grades-period-move-actions > .button + .button,
  .grades-final-breakdown-nav > * + *
) {
  box-shadow: inset 1px 0 0 #0c0c0c, inset 2px 0 0 #222222, inset 3px 0 0 #6a6a6a !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-activity-options-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-activity-option {
  box-shadow: var(--grades-modal-edge-y) !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-activity-option:nth-child(odd) {
  box-shadow: var(--grades-modal-edge-x), var(--grades-modal-edge-y) !important;
}
/* Opciones de actividad: cabecera de lado a lado y retícula completa de 2 × 3. */
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog {
  --ui-modal-width: 800px;
  width: min(800px, calc(100vw - 28px));
  max-width: 800px;
  padding: 0;
  scrollbar-gutter: auto;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog > .form-stack {
  gap: 0;
  padding: 0;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .dialog-title-row {
  margin: 0;
  padding: 22px 24px;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .dialog-title-row::after {
  right: 0;
  left: 0;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsContext {
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.4;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-options-grid {
  width: auto;
  margin: 20px 24px 24px;
  padding: 0;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-option {
  min-height: 84px;
  padding: 14px;
  border-radius: 0;
  box-shadow: var(--grades-modal-edge-y) !important;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-option:nth-child(odd) {
  box-shadow: var(--grades-modal-edge-x), var(--grades-modal-edge-y) !important;
}
html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-option:nth-last-child(-n + 2) {
  --grades-modal-edge-y: inset 0 0 0 transparent;
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .dialog-title-row {
    padding: 18px 16px;
  }
  html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-options-grid {
    grid-template-columns: minmax(0, 1fr);
    margin: 16px;
  }
  html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-option:nth-child(n) {
    --grades-modal-edge-y: inset 0 -1px 0 #6a6a6a,
      inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
    box-shadow: var(--grades-modal-edge-y) !important;
  }
  html[data-theme-mode="gray"] #subjectsView #activityOptionsDialog .grades-activity-option:last-child {
    --grades-modal-edge-y: inset 0 0 0 transparent;
  }
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-cell-options-grid {
  padding: 0;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-cell-options-column {
  gap: 0;
  padding: 0;
  border: 0;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-cell-options-column:not(:last-child) {
  padding-right: 3px;
  background: var(--gray-divider-x) right top / 3px 100% no-repeat;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-cell-menu-option:not(:last-child), .grades-choice-row:not(:last-child)
) {
  box-shadow: var(--grades-modal-edge-y) !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-choice-row:has(input:checked) {
  background: var(--gray-inset) !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-dialog :is(
  .grades-activity-option.is-danger strong, .grades-activity-option.is-danger .grades-activity-option-icon,
  .grades-cell-menu-option.is-danger, .grade-group-action-card.is-danger-zone > strong
) { color: var(--ui-danger); }
html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-cell-menu-icon-image {
  filter: brightness(0) invert(1);
}
/* Exportar: controles grises con texto blanco; se conservan los logos. */
html[data-theme-mode="gray"] #subjectsView #gradebookExportDialog .grades-export-options {
  gap: 0;
  margin: 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gray-surface);
  box-shadow: 0 3px 9px rgb(0 0 0 / 28%);
}
html[data-theme-mode="gray"] #subjectsView #gradebookExportDialog .export-split-button {
  gap: 0 !important;
  color: #ffffff !important;
  background: var(--gray-surface) !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #subjectsView #gradebookExportDialog .export-split-button > span {
  border: 0;
  color: #ffffff;
  background: transparent !important;
}
html[data-theme-mode="gray"] #subjectsView #gradebookExportDialog .export-split-button__text {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat !important;
}
/* Las listas se recortan dentro del cuerpo, bajo la cabecera y el pie opacos. */
html[data-theme-mode="gray"] #subjectsView :is(#gradeSameNoteDialog, #gradeInsightDialog) > .form-stack {
  gap: 0;
  padding: 0;
  isolation: isolate;
}
html[data-theme-mode="gray"] #subjectsView :is(#gradeSameNoteDialog, #gradeInsightDialog) :is(
  .dialog-title-row, .dialog-actions, .grades-insight-footer
) {
  flex-shrink: 0;
  margin: 0;
  padding: 20px var(--ui-modal-padding, 22px);
  background: var(--grades-modal-surface);
}
html[data-theme-mode="gray"] #subjectsView :is(#gradeSameNoteDialog, #gradeInsightDialog) :is(
  .dialog-title-row::after, .dialog-actions::before, .grades-insight-footer::before
) {
  right: 0;
  left: 0;
}
html[data-theme-mode="gray"] #subjectsView #gradeSameNoteDialog .grades-same-note-list {
  gap: 0;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] #subjectsView #gradeSameNoteDialog .grades-same-note-row {
  border-radius: 0;
  background: transparent;
  box-shadow: var(--grades-modal-edge-y);
}
html[data-theme-mode="gray"] #subjectsView #gradeSameNoteDialog .grades-same-note-row:nth-child(odd) {
  box-shadow: var(--grades-modal-edge-x), var(--grades-modal-edge-y);
}
html[data-theme-mode="gray"] #subjectsView #gradeSameNoteDialog .grades-same-note-row:has(input:checked) {
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog :is(.grades-insight-content, .grades-summary-subjects) {
  border-radius: 0;
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog :is(.grades-insight-list, .grades-insight-sections) {
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog :is(.grades-insight-row, .grades-summary-section, .grades-summary-subject) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog .grades-insight-row:not(:last-child) {
  box-shadow: var(--grades-modal-edge-y);
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog .grades-summary-section + .grades-summary-section {
  background: var(--gray-divider-x) left top / 3px 100% no-repeat;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog :is(
  .grades-summary-subject + .grades-summary-subject,
  .grades-activity-summary-entry + .grades-activity-summary-entry
) {
  border: 0;
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog .grades-activity-summary-score {
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog .grades-summary-tabs {
  margin-block: 12px;
}
/* Los desgloses cortos no necesitan scroll interno ni una pista reservada. */
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog:is(.is-note-breakdown, .is-final-breakdown) {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog:is(.is-note-breakdown, .is-final-breakdown) > .form-stack {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog:is(.is-note-breakdown, .is-final-breakdown) .grades-insight-content {
  min-width: 0;
  max-width: 100%;
  max-height: none;
  padding: 0;
  overflow: visible;
  scrollbar-gutter: auto;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog:is(.is-note-breakdown, .is-final-breakdown) .grades-insight-sections {
  min-width: 0;
  max-width: 100%;
}
html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog.is-note-breakdown .grades-insight-open-period {
  margin-bottom: 20px;
}
@media (max-width: 880px) {
  html[data-theme-mode="gray"] #subjectsView #gradeGroupEditor .grade-group-action-card + .grade-group-action-card {
    box-shadow: inset 0 1px 0 #0c0c0c, inset 0 2px 0 #222222, inset 0 3px 0 #6a6a6a !important;
  }
}
@media (max-width: 620px) {
  html[data-theme-mode="gray"] #subjectsView .grades-dialog .grades-cell-options-column:not(:last-child) {
    padding: 0 0 3px;
    background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
  }
  html[data-theme-mode="gray"] #subjectsView #gradeSameNoteDialog .grades-same-note-row:nth-child(odd) {
    box-shadow: var(--grades-modal-edge-y);
  }
}
@media (max-width: 680px) {
  html[data-theme-mode="gray"] #subjectsView #gradeInsightDialog .grades-summary-section + .grades-summary-section {
    background: var(--gray-divider-y) left top / 100% 3px no-repeat;
  }
}
/* El importador de Classroom se crea fuera del contenedor del módulo. */
html[data-theme-mode="gray"] body[data-start-module="grades"] .classroom-grades-dialog {
  --interface-title-color: #ffffff;
  border: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, #505050, #414141) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%) !important;
}
html[data-theme-mode="gray"] body[data-start-module="grades"] .classroom-grades-header {
  border: 0;
  padding-bottom: 18px;
  background: var(--gray-divider-y) left bottom / 100% 3px no-repeat;
}
html[data-theme-mode="gray"] body[data-start-module="grades"] .classroom-grades-students {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] body[data-start-module="grades"] .classroom-grades-student {
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme-mode="gray"] body[data-start-module="grades"] .classroom-grades-student + .classroom-grades-student {
  background: var(--gray-divider-y) left top / 100% 3px no-repeat;
}

/* Calificaciones: una superficie continua con la retícula hundida del tema.
   Se conservan el encabezado fijo, los anchos y los estados de las notas. */
html[data-theme-mode="gray"] #subjectsView #gradeMatrixSection {
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--ui-surface) !important;
  box-shadow: 0 5px 16px rgb(0 0 0 / 38%) !important;
}
html[data-theme-mode="gray"] #subjectsView #gradebookFinalSummary {
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-mode="gray"] #subjectsView :is(#gradeMatrixTableWrap, #finalSummaryTableWrap) {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] #subjectsView #finalSummaryTableWrap {
  border-radius: 18px;
  box-shadow: 0 5px 16px rgb(0 0 0 / 38%);
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table {
  --grades-chip-inset-x: 3px;
  --grades-chip-inset-y: 3px;
  --grades-cell-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --grades-cell-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  --grades-cell-mark: inset 0 0 0 transparent;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ui-surface);
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border: 0 !important;
  box-shadow: var(--grades-cell-edge-x), var(--grades-cell-edge-y), var(--grades-cell-mark) !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table tr > :is(th, td):last-child {
  --grades-cell-edge-x: inset 0 0 0 transparent;
  --grades-chip-inset-x: 0px;
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table > tbody:last-child > tr:last-child > :is(th, td) {
  --grades-cell-edge-y: inset 0 0 0 transparent;
  --grades-chip-inset-y: 0px;
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table thead th {
  border-radius: 0;
  color: var(--ui-on-primary);
  background: var(--ui-primary);
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table thead th span {
  color: var(--ui-on-primary);
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table tbody td.is-marked {
  --grades-cell-mark: inset 0 0 0 transparent;
  outline: none !important;
}
html[data-theme-mode="gray"] #subjectsView .grades-real-table tbody td.is-marked:not(.is-recovery-active) {
  background: var(--ui-surface) !important;
}
/* Los indicadores terminan antes del surco de la siguiente columna/fila. */
html[data-theme-mode="gray"] #subjectsView .grades-real-table tbody td .grade-cell-indicators {
  top: 0;
  right: var(--grades-chip-inset-x);
  max-height: calc(100% - var(--grades-chip-inset-y));
  overflow: hidden;
}
html[data-theme-mode="gray"] #subjectsView #gradeMatrixTableWrap .grades-real-table tbody tr > .grade-score-cell.is-recovery-active {
  background: var(--ui-surface) !important;
}
html[data-theme-mode="gray"] #subjectsView #gradeMatrixTableWrap .grades-real-table tbody tr > .grade-score-cell.is-recovery-active:hover {
  background: color-mix(in srgb, var(--ui-primary) 22%, var(--ui-surface)) !important;
}
/* Solo la estela recorre el interior; los divisores quedan fuera del efecto. */
@keyframes grayGradeMarkedTrail {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
html[data-theme-mode="gray"] #subjectsView #gradeMatrixTableWrap :is(.grade-score-cell, .grade-total-score-cell).is-marked::before {
  content: '';
  inset: 0 var(--grades-chip-inset-x) var(--grades-chip-inset-y) 0;
  width: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(110deg, transparent 30%,
    rgb(255 106 0 / 10%) 40%, rgb(255 106 0 / 32%) 47%,
    rgb(255 45 26 / 42%) 50%, rgb(255 106 0 / 26%) 55%, transparent 65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  animation: grayGradeMarkedTrail 1650ms linear infinite;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-mode="gray"] #subjectsView #gradeMatrixTableWrap :is(.grade-score-cell, .grade-total-score-cell).is-marked::before {
    animation: none;
    background-position: 50% 0;
  }
}
html[data-theme-mode="gray"] #subjectsView #finalSummaryTableWrap .final-score {
  background: var(--gray-inset);
}
html[data-theme-mode="gray"] #subjectsView #finalSummaryTableWrap .final-score:hover {
  background: color-mix(in srgb, var(--ui-primary) 14%, #292929);
}
html[data-theme-mode="gray"] #autoCoevalView #autoCoevalSavePdfEvidence,
html[data-theme-mode="gray"] #autoCoevalView #autoCoevalSavePdfEvidence :is(.auto-coeval-save-title, .auto-coeval-save-name, .auto-coeval-save-count) {
  color: #ffffff !important;
}

/* Asistencia: la misma retícula hundida, sin alterar las columnas fijas ni
   los fondos de estado. Las sombras interiores no cambian el ancho de celdas. */
html[data-theme-mode="gray"] #attendanceView .attendance-real-table {
  --attendance-cell-edge-x: inset -1px 0 0 #6a6a6a,
    inset -2px 0 0 #222222, inset -3px 0 0 #0c0c0c;
  --attendance-cell-edge-y: inset 0 -1px 0 #6a6a6a,
    inset 0 -2px 0 #222222, inset 0 -3px 0 #0c0c0c;
  border-collapse: separate;
  border-spacing: 0;
}
html[data-theme-mode="gray"] #attendanceView .attendance-real-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border: 0 !important;
  box-shadow: var(--attendance-cell-edge-x), var(--attendance-cell-edge-y) !important;
}
html[data-theme-mode="gray"] #attendanceView .attendance-real-table > :is(thead, tbody, tfoot) > tr > :is(th, td):last-child {
  --attendance-cell-edge-x: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #attendanceView .attendance-real-table > tbody > tr:last-child > :is(th, td),
html[data-theme-mode="gray"] #attendanceView .attendance-real-table > tfoot > tr:last-child > :is(th, td) {
  --attendance-cell-edge-y: inset 0 0 0 transparent;
}
html[data-theme-mode="gray"] #attendanceView .attendance-real-table-wrap {
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #attendanceView .attendance-table.attendance-real-table {
  border-radius: 15px;
  border: 0;
  box-shadow: none;
}
html[data-theme-mode="gray"] #attendanceView .attendance-table-card {
  border: 0;
  box-shadow: none !important;
}

/* Nómina de Aulas: retícula hundida y una celda por acción. */
html[data-theme-mode="gray"] #classroomsView #studentTableWrap {
  padding: 3px;
  border: 0;
  border-radius: 18px;
  background: var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions {
  --student-action-column-width: 150px;
  --student-table-divider-x: linear-gradient(90deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  --student-table-divider-y: linear-gradient(180deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  min-width: 960px;
  table-layout: fixed;
  border-radius: 15px;
  overflow: hidden;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions :is(th, td) {
  position: relative;
  border: 0;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions thead th {
  color: var(--ui-on-primary);
  background: var(--ui-primary);
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions :is(th, td):not(:first-child)::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 3px;
  background: var(--student-table-divider-x);
  pointer-events: none;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions :is(thead th, tbody tr:not(:last-child) td)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 3px;
  background: var(--student-table-divider-y);
  pointer-events: none;
}
/* El surco del encabezado descansa sobre grafito para que el azul no
   se transparente por debajo ni en los cruces de los divisores. */
html[data-theme-mode="gray"] #classroomsView .student-table.student-table--split-actions thead th::after,
html[data-theme-mode="gray"] #classroomsView .student-table.student-table--split-actions thead th:not(:first-child)::before {
  background-color: var(--ui-surface);
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions th:nth-child(3),
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions td:nth-child(n + 3) {
  width: var(--student-action-column-width);
  text-align: center;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions thead th:last-child {
  width: calc(var(--student-action-column-width) * 3);
  text-align: center;
  background-color: var(--ui-primary);
  background-image: var(--student-table-divider-x), var(--student-table-divider-x);
  background-size: 3px 100%;
  background-position: var(--student-action-column-width) 0,
    calc(var(--student-action-column-width) * 2) 0;
  background-repeat: no-repeat;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions tbody td {
  height: 64px;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions .student-action-cell {
  padding: 0;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions .student-action-cell > .student-action-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions .student-action-button.is-danger {
  color: var(--ui-danger);
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions .student-action-button:hover {
  background: rgb(255 255 255 / 6%);
}
html[data-theme-mode="gray"] #classroomsView .student-table--split-actions .student-action-button:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -4px;
}

/* Materias: separación hundida entre la identidad del aula y sus cuadernos. */
html[data-theme-mode="gray"] #subjectsView .subjects-detail-heading {
  position: relative;
  border-bottom: 0;
}
html[data-theme-mode="gray"] #subjectsView .subjects-detail-heading::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}

/* Bloque de diálogo compartido: superficie unida, icono y conector hundidos.
   Los acentos de cada variante se conservan en el icono. */
html[data-theme-mode="gray"] .ui-dialog-block__main {
  gap: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #505050, #444444);
  box-shadow: 0 4px 12px rgb(0 0 0 / 32%);
}
html[data-theme-mode="gray"] .ui-dialog-block .ui-dialog-block__heading {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-mode="gray"] .ui-dialog-block__heading::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gray-divider-y);
  pointer-events: none;
}
html[data-theme-mode="gray"] .ui-dialog-block .ui-dialog-block__content {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
html[data-theme-mode="gray"] .ui-dialog-block .ui-dialog-block__icon {
  border: 0;
  color: var(--ui-dialog-block-tint);
  background: linear-gradient(
    color-mix(in srgb, var(--ui-dialog-block-tint) 10%, transparent),
    color-mix(in srgb, var(--ui-dialog-block-tint) 6%, transparent)), var(--gray-inset);
  box-shadow: var(--gray-inset-shadow);
}
html[data-theme-mode="gray"] .ui-dialog-block::before {
  bottom: 4px;
  width: calc(var(--ui-dialog-block-icon-size) + var(--ui-dialog-block-gap) - var(--ui-dialog-block-connector-inset) + 18px);
  border: 0;
  border-left: 3px solid #191919;
  border-bottom: 3px solid #191919;
  border-bottom-left-radius: 18px;
  background: none;
  filter: drop-shadow(1px 1px 0 rgb(255 255 255 / 32%));
}

html[data-theme-mode="gray"] .subject-notebook .subject-action-edit {
  background: #ffffff;
}

/* Misceláneos: el encabezado termina en el mismo surco del tema Gris. */
html[data-theme-mode="gray"] #schoolMiscellany .school-miscellany-heading {
  position: relative;
  border-bottom: 0;
}
html[data-theme-mode="gray"] #schoolMiscellany .school-miscellany-heading::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(180deg,
    rgb(0 0 0 / 80%) 0 1px,
    rgb(0 0 0 / 42%) 1px 2px,
    rgb(255 255 255 / 24%) 2px 3px);
  pointer-events: none;
}

/* Surcos de dos tonos: sombra arriba y un reflejo fino debajo. */
html[data-theme-mode="gray"] :is(hr, .classroom-menu-separator) {
  height: 2px;
  border: 0;
  background: var(--gray-groove);
}
html[data-theme-mode="gray"] .editor-tool-separator {
  width: 2px;
  background: linear-gradient(90deg, rgb(0 0 0 / 55%), rgb(255 255 255 / 13%));
}
html[data-theme-mode="gray"] :is(
  .ui-content-card__header, .appearance-head, .savings-editor-header
) {
  border-bottom-color: #242424;
  box-shadow: 0 1px 0 rgb(255 255 255 / 13%);
}
html[data-theme-mode="gray"] .savings-totals dl > div + div {
  border-top-color: #242424;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}