/* Modo oscuro. app.js añade la clase .theme-dark a <html> según el tema del
   sistema o el botón de la barra superior. Se carga después del resto de hojas. */

html.theme-dark {
  --primary: #3b8ae8;
  --primary-dark: #2f74c9;
  --ink: #e6edf7;
  --ice: #0b1220;
  --paper: #111a2b;
  --muted: #9aabc2;
  --line: #24334d;
  --line-strong: #31435f;
  --sky: #3b8ae8;
  --shadow: 0 14px 34px rgba(0, 0, 0, .35);
  --shadow-hover: 0 18px 42px rgba(0, 0, 0, .45);
  --surface: #111a2b;
  --surface-2: #16223a;
  --surface-3: #1b2a46;
  --accent-soft: rgba(59, 138, 232, .16);
  --text-2: #c6d2e3;
  --primary-soft: rgba(59, 138, 232, .18);
  --ring: rgba(59, 138, 232, .35);
  --brand-navy: #1d4f99;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Fondos principales */
html.theme-dark,
html.theme-dark body,
html.theme-dark .main,
html.theme-dark .login-wrap {
  background-color: var(--ice);
}

html.theme-dark .main,
html.theme-dark .login-wrap {
  background-image: none;
}

/* Superficies (tarjetas, barras, ventanas, controles) */
html.theme-dark .sidebar,
html.theme-dark .topbar,
html.theme-dark .card,
html.theme-dark .modal,
html.theme-dark .login-card,
html.theme-dark .notifications-panel,
html.theme-dark .notification-item,
html.theme-dark .day-agenda,
html.theme-dark .calendar-toolbar,
html.theme-dark .week-strip button,
html.theme-dark .calendar-control,
html.theme-dark .calendar-jump,
html.theme-dark .calendar-event-actions button,
html.theme-dark .subject-actions button,
html.theme-dark .recipient-option,
html.theme-dark .chat-bubble,
html.theme-dark .chat-composer,
html.theme-dark .timetable-hours,
html.theme-dark .bell,
html.theme-dark .icon-button,
html.theme-dark .search-trigger,
html.theme-dark .menu-button,
html.theme-dark .secondary,
html.theme-dark .search,
html.theme-dark .filter,
html.theme-dark .form-input,
html.theme-dark .code-input,
html.theme-dark .name-choice,
html.theme-dark .quick-link,
html.theme-dark .chip,
html.theme-dark .event-kind span,
html.theme-dark .classroom-link,
html.theme-dark .sidebar-rail span,
html.theme-dark .next-class {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

html.theme-dark .topbar {
  background: rgba(17, 26, 43, .92);
}

html.theme-dark .sidebar-close {
  background: var(--surface-2);
}

/* Fondos suaves dentro de las tarjetas */
html.theme-dark .note,
html.theme-dark .empty-block,
html.theme-dark .empty-state,
html.theme-dark .section-empty--large,
html.theme-dark .calendar-event,
html.theme-dark .user-request-card,
html.theme-dark .subject-card,
html.theme-dark .chat-head,
html.theme-dark .chat-composer textarea,
html.theme-dark .recipient-list,
html.theme-dark .notifications-footer,
html.theme-dark .timetable-table thead th,
html.theme-dark .timetable-table tbody th,
html.theme-dark .access-code code,
html.theme-dark .access-code button,
html.theme-dark .table-action,
html.theme-dark .content-actions button,
html.theme-dark .documents-note,
html.theme-dark .documents-warning,
html.theme-dark .submission-status,
html.theme-dark .announcement-quota,
html.theme-dark .tutor-card,
html.theme-dark .mini-profile,
html.theme-dark .search-footer,
html.theme-dark kbd,
html.theme-dark .teacher-card {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

/* Elementos activos o resaltados */
html.theme-dark .tag,
html.theme-dark .note-icon,
html.theme-dark .empty-icon,
html.theme-dark .quick-link-icon,
html.theme-dark .search-result-icon,
html.theme-dark .shared-document-icon,
html.theme-dark .recipient-avatar,
html.theme-dark .week-strip i,
html.theme-dark .audit-source,
html.theme-dark .file-input::file-selector-button,
html.theme-dark .nav button.active,
html.theme-dark .week-strip button.selected,
html.theme-dark .name-choice.selected,
html.theme-dark .notification-item.unread,

html.theme-dark .recipient-option:has(input:checked),
html.theme-dark .search-result.active,
html.theme-dark .event-kind input:checked + span {
  border-color: rgba(59, 138, 232, .45);
  background: var(--accent-soft);
  color: #8cc0ff;
}

html.theme-dark .nav button.active {
  box-shadow: inset 3px 0 var(--primary);
}

html.theme-dark .nav button:hover,
html.theme-dark .notification-item:hover,
html.theme-dark .notifications-footer:hover,
html.theme-dark .secondary:hover,
html.theme-dark .calendar-control:hover,
html.theme-dark .week-strip button:hover,
html.theme-dark .content-actions button:hover,
html.theme-dark .table-action:hover,
html.theme-dark .access-code button:hover,
html.theme-dark .name-choice:hover,
html.theme-dark .app-shell .logout:hover {
  background: var(--surface-3);
}

html.theme-dark .tag.lime,
html.theme-dark .chat-bubble header span,
html.theme-dark .chat-live,
html.theme-dark .audit-source--drive,
html.theme-dark .announcement-quota.unlimited,
html.theme-dark .shared-document-card--spreadsheet .shared-document-icon {
  background: rgba(16, 185, 129, .14);
  color: #6ee7b7;
}

html.theme-dark .chip.active,
html.theme-dark .week-strip button.selected i {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

/* Cabeceras de sección */
html.theme-dark .hero {
  border-color: var(--line);
  background: linear-gradient(112deg, #111a2b 0%, #13203a 60%, #16294a 100%);
}

html.theme-dark .hero::before {
  border-color: rgba(59, 138, 232, .18);
}

html.theme-dark .hero-quickfacts span {
  border-color: var(--line);
  background: rgba(17, 26, 43, .7);
  color: var(--muted);
}

html.theme-dark .next-class {
  background: rgba(17, 26, 43, .86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

/* Textos con colores fijos en las hojas originales */
html.theme-dark .filter,
html.theme-dark .secondary,
html.theme-dark .chip,
html.theme-dark .login-label,
html.theme-dark .form-group label,
html.theme-dark .calendar-event small {
  color: var(--muted);
}

html.theme-dark .nav-label {
  color: #8a9bb3;
}

html.theme-dark .announcement,
html.theme-dark .agenda-item,
html.theme-dark .table th,
html.theme-dark .table td,
html.theme-dark .side-bottom {
  border-color: var(--line);
}

html.theme-dark .search::placeholder,
html.theme-dark .form-input::placeholder,
html.theme-dark .code-input::placeholder,
html.theme-dark .search-field input::placeholder {
  color: #6f819b;
}

html.theme-dark .chat-messages {
  background: linear-gradient(180deg, #0f1828 0, var(--surface) 100%);
}

html.theme-dark .modal-backdrop {
  background: rgba(2, 6, 14, .66);
}

html.theme-dark .secondary.danger-text,
html.theme-dark .content-actions button.danger,
html.theme-dark .calendar-event-actions button:last-child {
  color: #f19999;
}

html.theme-dark .progress {
  background: var(--surface-3);
}

/* Agenda: tarjetas de eventos por color de asignatura */
html.theme-dark .calendar-event--amber {
  background: rgba(245, 158, 11, .1);
}

html.theme-dark .calendar-event--success,
html.theme-dark .calendar-event--classroom {
  background: rgba(16, 185, 129, .1);
}

html.theme-dark .calendar-event--classroom time,
html.theme-dark .calendar-event--classroom .event-subject,
html.theme-dark .classroom-link {
  color: #6ee7b7;
}

html.theme-dark .calendar-event--classroom time small {
  color: #8fd6ae;
}

/* Horario: cada módulo conserva su color, adaptado al fondo oscuro */
html.theme-dark .timetable-class { background: rgba(59, 130, 246, .14); }
html.theme-dark .timetable-class strong { color: #93c5fd; }
html.theme-dark .timetable-class span { color: var(--ink); }
html.theme-dark .timetable-class small { color: var(--muted); }
html.theme-dark .timetable-class--gbda { background: rgba(99, 102, 241, .16); }
html.theme-dark .timetable-class--gbda strong { color: #a5b4fc; }
html.theme-dark .timetable-class--pare { background: rgba(16, 185, 129, .14); }
html.theme-dark .timetable-class--pare strong { color: #6ee7b7; }
html.theme-dark .timetable-class--isop { background: rgba(249, 115, 22, .14); }
html.theme-dark .timetable-class--isop strong { color: #fdba74; }
html.theme-dark .timetable-class--fuha { background: rgba(239, 68, 68, .14); }
html.theme-dark .timetable-class--fuha strong { color: #fca5a5; }
html.theme-dark .timetable-class--itpeem { background: rgba(139, 92, 246, .16); }
html.theme-dark .timetable-class--itpeem strong { color: #c4b5fd; }
html.theme-dark .timetable-class--ingprof { background: rgba(6, 182, 212, .14); }
html.theme-dark .timetable-class--ingprof strong { color: #67e8f9; }
html.theme-dark .timetable-class--soapsipr { background: rgba(132, 204, 22, .14); }
html.theme-dark .timetable-class--soapsipr strong { color: #bef264; }
html.theme-dark .timetable-class--diapsepr { background: rgba(244, 63, 94, .14); }
html.theme-dark .timetable-class--diapsepr strong { color: #fda4af; }

html.theme-dark .timetable-break th {
  background: rgba(245, 158, 11, .08) !important;
}

html.theme-dark .timetable-break td {
  background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .06), rgba(245, 158, 11, .06) 8px, rgba(245, 158, 11, .1) 8px, rgba(245, 158, 11, .1) 16px);
}

html.theme-dark .chat-message.own .chat-bubble {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}

/* Bordes con colores claros fijos en las hojas originales */
html.theme-dark .topbar,
html.theme-dark .day-agenda header,
html.theme-dark .notifications-head,
html.theme-dark .key-date,
html.theme-dark .timetable-table th,
html.theme-dark .timetable-table td,
html.theme-dark .teacher-card,
html.theme-dark .chat-bubble,
html.theme-dark .access-code code,
html.theme-dark .content-actions button,
html.theme-dark .documents-note,
html.theme-dark .documents-warning {
  border-color: var(--line);
}

html.theme-dark .card:hover,
html.theme-dark .note:hover,
html.theme-dark .quick-link:hover,
html.theme-dark .next-class:hover,
html.theme-dark .chip:hover,
html.theme-dark .search-trigger:hover,
html.theme-dark .icon-button:hover,
html.theme-dark .bell:hover {
  border-color: #35507a;
}

html.theme-dark .note:hover {
  background: var(--surface-3);
}

/* Decoración de las cabeceras: más discreta sobre fondo oscuro */
html.theme-dark .hero::after {
  display: none;
}

html.theme-dark .day-agenda.today {
  border-color: rgba(59, 138, 232, .5);
}

html.theme-dark .content-actions button {
  background: var(--surface-2);
  color: #8cc0ff;
}

html.theme-dark .content-actions button.danger {
  border-color: rgba(241, 153, 153, .3);
  background: rgba(241, 153, 153, .08);
}

html.theme-dark .toast {
  border-color: var(--line);
  background: #1b2a46;
  color: var(--ink);
}

html.theme-dark .event-kind input[value="classroom"]:checked + span {
  border-color: rgba(16, 185, 129, .45);
  background: rgba(16, 185, 129, .14);
  color: #6ee7b7;
}

/* Chat: personas en línea y menciones */
html.theme-dark .mention-box {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

html.theme-dark .mention-option.active,
html.theme-dark button.online-person:hover {
  background: var(--accent-soft);
}

html.theme-dark .online-count {
  background: rgba(16, 185, 129, .14);
  color: #6ee7b7;
}

html.theme-dark .online-person {
  border-color: var(--line);
}

html.theme-dark .mention {
  background: rgba(59, 138, 232, .2);
  color: #8cc0ff;
}

html.theme-dark .mention.mention-me {
  background: rgba(245, 158, 11, .2);
  color: #fbbf5c;
}

html.theme-dark .chat-bubble p {
  color: var(--ink);
}

html.theme-dark .chat-help,
html.theme-dark .chat-bubble header time {
  color: var(--muted);
}

html.theme-dark .presence-toggle {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

html.theme-dark .presence-toggle.active {
  background: var(--surface-3);
  color: var(--ink);
}

html.theme-dark .wordmark {
  color: var(--ink);
}

html.theme-dark .wordmark span {
  color: #8cc0ff;
}

html.theme-dark .brand img,
html.theme-dark .login-brand img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

/* Capa moderna (modern.css) en modo oscuro */
html.theme-dark .topbar {
  background: rgba(17, 26, 43, .78);
}

html.theme-dark .dashboard-hero {
  background:
    radial-gradient(900px 260px at 100% 0%, rgba(59, 138, 232, .16), transparent 65%),
    var(--surface);
}

html.theme-dark .hero {
  background-color: var(--surface);
}

html.theme-dark .hero:not(.dashboard-hero) {
  background: var(--surface);
}

html.theme-dark .chip.active {
  border-color: var(--primary);
  background: var(--primary);
}

html.theme-dark .tag.lime {
  background: rgba(16, 185, 129, .14);
  color: #6ee7b7;
}

html.theme-dark .login-wrap {
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(59, 138, 232, .14), transparent 60%),
    var(--ice);
}

html.theme-dark .chat-messages {
  background: var(--ice);
}