/* ==========================================================================
   MODERNIZACIÓN INTEGRAL UI/UX "LA MOLINA VIRTUAL"
   Diseño: Bento Grid / Compact SaaS Dashboard
   Objetivo: Cero espacios vacíos huérfanos, alta densidad de información,
   jerarquía tipográfica moderna, paleta institucional cohesiva y consistencia.
   ========================================================================== */

/* --- 1. Variables y Tokens Globales Refinados (Tema Claro por defecto) --- */
:root {
  color-scheme: light dark;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg-app: #f1f5f9; /* Fondo pizarra suave para que las tarjetas resalten con total claridad */
  --bg-surface: #ffffff;
  --bg-muted: #e2e8f0;
  --bg-subtle: #f8fafc;
  --border-card: #cbd5e1; /* Borde nítido Slate-300 para delimitar tarjetas */
  --border-subtle: #e2e8f0;
  --border-hover: #94a3b8;
  --text-primary: #090d16; /* Negro grafito profundo para máxima legibilidad */
  --text-secondary: #334155; /* Gris oscuro pizarra WCAG AAA */
  --text-tertiary: #475569;
  --brand-green: #15803d;
  --brand-green-dark: #123d2b;
  --brand-green-light: #dcfce7;
  --brand-green-hover: #166534;
  --accent-amber: #d97706;
  --accent-amber-light: #fef3c7;
  --accent-blue: #2563eb;
  --accent-blue-light: #eff6ff;
  --accent-indigo: #4f46e5;
  --accent-indigo-light: #e0e7ff;
  --accent-red: #dc2626;
  --accent-red-light: #fee2e2;
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 10px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
}

/* --- MODO OSCURO (Tokens Dark Mode de Alto Contraste y Calidad SaaS) --- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0b0f17; /* Slate ultra profundo */
  --bg-surface: #151d28; /* Superficie de tarjetas elevada con contraste nítido */
  --bg-muted: #1e293b;
  --bg-subtle: #192332;
  --border-card: #29384d; /* Delimitación visible sin deslumbrar */
  --border-subtle: #1e2c3d;
  --border-hover: #475b75;
  --text-primary: #f1f5f9; /* Blanco pizarra de alta legibilidad */
  --text-secondary: #94a3b8; /* Gris medio con ratio contrastado */
  --text-tertiary: #64748b;
  --brand-green: #22c55e;
  --brand-green-dark: #071f13;
  --brand-green-light: rgba(34, 197, 94, 0.18);
  --brand-green-hover: #16a34a;
  --accent-amber: #fbbf24;
  --accent-amber-light: rgba(251, 191, 36, 0.18);
  --accent-blue: #38bdf8;
  --accent-blue-light: rgba(56, 189, 248, 0.18);
  --accent-indigo: #818cf8;
  --accent-indigo-light: rgba(129, 140, 248, 0.18);
  --accent-red: #f87171;
  --accent-red-light: rgba(248, 113, 113, 0.18);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.55), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 10px 24px -4px rgba(0, 0, 0, 0.7), 0 4px 8px -2px rgba(0, 0, 0, 0.45);

  /* Mapeo de tokens heredados para asegurar compatibilidad total */
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --cream: #0b0f17;
  --paper: #151d28;
  --line: #29384d;

  /* Tokens de contraste (modo oscuro) */
  --text-tertiary: #8b9bb0;
  --bg-row-alt: #192332;
  --bg-input: #0f1722;
  --bg-callout-success: rgba(34, 197, 94, 0.14);
  --border-input: #3b4d66;
  --placeholder: #8b9bb0;
}

/* --- SWITCH DE TEMA INTERACTIVO (Modo Oscuro / Modo Claro) --- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  user-select: none;
}

.theme-switch:hover {
  border-color: var(--border-hover);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

.theme-switch:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.theme-switch-track {
  width: 42px;
  height: 22px;
  background: var(--bg-muted);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 1px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.theme-switch.is-dark .theme-switch-track,
[data-theme="dark"] .theme-switch .theme-switch-track {
  background: #1e293b;
  border-color: #38bdf8;
}

.theme-switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease;
  color: #d97706;
}

.theme-switch.is-dark .theme-switch-thumb,
[data-theme="dark"] .theme-switch .theme-switch-thumb {
  transform: translateX(18px);
  background: #0f172a;
  color: #38bdf8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.theme-switch-thumb svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.theme-switch-thumb .icon-moon {
  display: none;
}

.theme-switch.is-dark .theme-switch-thumb .icon-sun,
[data-theme="dark"] .theme-switch .theme-switch-thumb .icon-sun {
  display: none;
}

.theme-switch.is-dark .theme-switch-thumb .icon-moon,
[data-theme="dark"] .theme-switch .theme-switch-thumb .icon-moon {
  display: block;
}

.theme-switch-text {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-weight: 700;
}

.theme-switch-compact {
  padding: 3px;
  border-radius: 999px;
}

.theme-switch-compact .theme-switch-text {
  display: none;
}

.login-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.login-head-top .eyebrow {
  margin-bottom: 0 !important;
}

/* Ocultar sección de comunicados en la parte superior en modo Administrador */
body[data-active-role="admin"] #announcements-banner {
  display: none !important;
}


/* --- 2. Tipografía y Reset Base --- */
body {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--text-primary) !important;
  background: var(--bg-app) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

h1 { font-size: 1.45rem !important; font-weight: 700 !important; }
h2 { font-size: 1.2rem !important; font-weight: 700 !important; }
h3 { font-size: 1.02rem !important; font-weight: 600 !important; }
h4 { font-size: 0.9rem !important; font-weight: 600 !important; }

/* Contenedor Shell */
.shell {
  grid-template-columns: 240px minmax(0, 1fr) !important;
  min-height: 100vh;
}

/* Sidebar Ultra Limpio */
.sidebar {
  padding: 18px 12px !important;
  gap: 16px !important;
  background: var(--brand-green-dark) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.sidebar .brand {
  padding: 0 8px;
}

.sidebar .brand .eyebrow {
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  color: #86efac !important;
  font-weight: 700;
  margin-bottom: 2px !important;
}

.sidebar .brand h1 {
  font-size: 1.15rem !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.side-nav {
  gap: 4px !important;
}

.nav-button {
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  color: #e2e8f0 !important;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.nav-button .icon {
  width: 17px !important;
  height: 17px !important;
}

.nav-button[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.nav-count {
  font-size: 0.72rem !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* Badge de usuario en sidebar */
.user-badge {
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: auto;
}

.user-badge .user-name {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.user-badge .user-role {
  font-size: 0.74rem !important;
  color: #86efac !important;
}

/* --- 3. Workspace Principal --- */
.workspace {
  padding: 14px 22px 32px !important;
  max-width: 1720px;
  margin: 0 auto;
}

/* Barra Superior (Workspace Bar) */
.workspace-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  margin-bottom: 12px !important;
  padding: 6px 14px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.workspace .entry-switch {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border-card) !important;
  padding: 3px !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  margin: 0 0 12px !important;
}

/* No pisar [hidden]: solo admin + vista "nueva" debe ver MANUAL/AUTOMÁTICO */
.workspace .entry-switch[hidden],
#entry-switch[hidden],
.entry-switch[hidden] {
  display: none !important;
}

.workspace .entry-switch button {
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.workspace .entry-switch button[aria-selected="true"] {
  background: var(--bg-surface) !important;
  color: var(--brand-green) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.workspace-role-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.role-switch-title {
  font-size: 0.78rem !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

.role-pill-buttons {
  display: inline-flex !important;
  gap: 4px !important;
}

.role-pill-btn {
  padding: 3px 10px !important;
  font-size: 0.76rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-card) !important;
  background: var(--bg-muted) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.role-pill-btn.active {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  border-color: var(--brand-green) !important;
}

.workspace-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-pending-notes {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 0.8rem !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--border-card) !important;
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}


.btn-pending-notes:hover {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hover) !important;
}

.status {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-card) !important;
  margin: 0 !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Banner de Comunicados e Institucional */
.announcements-banner {
  margin: 0 0 12px 0 !important; /* Elimina la sangría y desalineación */
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.announcements-bar-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.announcements-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--brand-green-dark) !important;
}

.btn-manage-announcements {
  padding: 3px 8px !important;
  font-size: 0.74rem !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(21, 128, 61, 0.2) !important;
  background: rgba(21, 128, 61, 0.06) !important;
  color: var(--brand-green-dark) !important;
  cursor: pointer !important;
}

.announcements-cards {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.announcement-card {
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-card) !important;
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.announcement-title {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--brand-green) !important;
  margin: 0 0 2px !important;
}

.announcement-contact-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.76rem !important;
  color: var(--text-secondary) !important;
}

/* Paneles Contenedores Base */
.panel,
.invite {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 16px 18px !important;
}

.invite {
  color: var(--text-primary) !important;
  border-left: 4px solid var(--brand-green) !important;
}

.invite h2,
.invite pre {
  color: var(--text-primary) !important;
}

.panel-head {
  margin-bottom: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

.panel-head h2 {
  font-size: 1.18rem !important;
  margin: 0 0 2px 0 !important;
}

.panel-head p,
.panel-head .hint {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* Formularios e Inputs Compactos */
form {
  gap: 10px !important;
  margin-top: 8px !important;
}

label {
  gap: 4px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

input,
select,
textarea {
  padding: 7px 10px !important;
  font-size: 0.88rem !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-card) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12) !important;
  outline: none !important;
}

button.primary {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 16px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

button.primary:hover {
  background: var(--brand-green-hover) !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.25) !important;
}

button.ghost {
  border-radius: var(--radius-md) !important;
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
  border: 1px solid var(--border-card) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
}

button.ghost:hover {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hover) !important;
}

/* ==========================================================================
   4. MÓDULO NUEVA CLASE - LAYOUT BENTO GRID COMPACTO
   ========================================================================== */
.nueva-grid-layout {
  display: grid !important;
  grid-template-columns: minmax(330px, 1fr) minmax(380px, 1.25fr) !important;
  gap: 14px !important;
  align-items: start !important;
  margin-top: 8px !important;
}

@media (max-width: 980px) {
  .nueva-grid-layout {
    grid-template-columns: 1fr !important;
  }
}

.panel-card-inner {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px !important;
  box-shadow: var(--shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.col-title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--brand-green) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.set-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.calendar-help {
  font-size: 0.76rem !important;
  margin: 2px 0 4px !important;
  color: var(--text-tertiary) !important;
}

/* Calendario Redimensionado y Compacto */
.calendar {
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 10px !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

.calendar-nav {
  grid-template-columns: 28px 1fr 28px !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
  align-items: center !important;
}

.calendar-nav h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-align: center !important;
}

.month-button {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-muted) !important;
  border: 1px solid var(--border-card) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.month-button:hover {
  background: #e2e8f0 !important;
}

.calendar-weekdays,
.calendar-days {
  gap: 3px !important;
}

.calendar-weekdays {
  margin-bottom: 4px !important;
}

.calendar-weekdays span {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--text-tertiary) !important;
}

.day-blank {
  min-height: 32px !important;
}

.day {
  min-height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  background: #f8fafc !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.day:hover {
  background: var(--brand-green-light) !important;
  color: var(--brand-green-dark) !important;
}

.day[aria-pressed="true"] {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.3) !important;
}

.day.today:not([aria-pressed="true"]) {
  border-color: var(--accent-amber) !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

/* Sesiones Seleccionadas */
.sessions-wrapper {
  margin-top: 8px !important;
  border-top: 1px dashed var(--border-card) !important;
  padding-top: 8px !important;
}

.sessions-heading {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 6px 0 !important;
}

.day-cards {
  gap: 6px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding-right: 4px;
}

.day-card {
  padding: 8px 10px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-card) !important;
  background: #f8fafc !important;
  gap: 4px !important;
}

.day-card header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.day-card h4 {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}

.day-fields {
  gap: 6px !important;
}

.clock {
  gap: 4px !important;
}

.clock select,
.clock input {
  padding: 4px 6px !important;
  font-size: 0.8rem !important;
}

/* Columna Derecha (Datos Curso, Docente, Monitor) */
.course-field {
  gap: 4px !important;
}

.codes-head {
  font-size: 0.78rem !important;
  margin-top: 2px;
}

.code-add {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius-sm) !important;
}

.code-badge {
  font-size: 0.72rem !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
}

.monitor-preview {
  font-size: 0.76rem !important;
  margin: 2px 0 0 !important;
  color: var(--text-tertiary) !important;
}

.license-field-block {
  margin-top: 4px !important;
  padding: 8px 10px !important;
  border-radius: var(--radius-md) !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}

.license-heading {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
}

.chips {
  gap: 4px !important;
}

.create-bar {
  margin-top: 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.create-bar button {
  width: 100%;
  max-width: 300px;
  padding: 9px 18px !important;
  font-size: 0.9rem !important;
}

/* ==========================================================================
   5. MÓDULO PROGRAMACIONES (GESTIÓN DE CURSOS)
   ========================================================================== */
.program-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 6px 10px !important;
  box-shadow: var(--shadow-sm) !important;
}

.course-filter-bar {
  display: inline-flex !important;
  gap: 2px !important;
  background: var(--bg-muted) !important;
  padding: 2px !important;
  border-radius: var(--radius-md) !important;
}

.course-filter-btn {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.course-filter-btn.active {
  background: var(--bg-surface) !important;
  color: var(--brand-green) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

.filter-badge {
  font-size: 0.7rem !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  margin-left: 3px;
}

.program-view-switch {
  display: inline-flex !important;
  gap: 2px !important;
  background: var(--bg-muted) !important;
  padding: 2px !important;
  border-radius: var(--radius-md) !important;
}

.view-switch-btn {
  padding: 4px 8px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
}

.view-switch-btn.active {
  background: var(--brand-green-dark) !important;
  color: #ffffff !important;
}

.program-search-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 240px !important;
  max-width: 360px !important;
}

.program-search-wrap input {
  padding: 5px 8px 5px 30px !important;
  font-size: 0.82rem !important;
  height: 30px !important;
}

.program-search-wrap .search-icon {
  left: 8px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--text-tertiary) !important;
}

/* Bento Cards de Programaciones: Exactamente 3 por fila */
#class-list.program-grid,
.program-grid[data-prog-view="cards"],
.program-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 1100px) {
  #class-list.program-grid,
  .program-grid[data-prog-view="cards"],
  .program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #class-list.program-grid,
  .program-grid[data-prog-view="cards"],
  .program-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Vista Grid: Exactamente 4 por fila */
.program-mini-grid,
.program-grid[data-prog-view="grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 1280px) {
  .program-mini-grid,
  .program-grid[data-prog-view="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .program-mini-grid,
  .program-grid[data-prog-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 580px) {
  .program-mini-grid,
  .program-grid[data-prog-view="grid"] {
    grid-template-columns: 1fr !important;
  }
}

.program-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 14px !important;
  box-shadow: var(--shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.program-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--border-hover) !important;
}

.program-card h3 {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}

.program-card .class-top {
  gap: 4px !important;
}

/* Contenedores de Credenciales y Zoom */
.zoom-credential-item {
  padding: 5px 8px !important;
  font-size: 0.78rem !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-card) !important;
}

.zoom-credential-item strong {
  font-size: 0.74rem !important;
  color: var(--text-secondary) !important;
}

/* Sesiones en Tarjeta */
.session-list {
  gap: 4px !important;
}

.session-list li {
  padding: 5px 8px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Acciones en Tarjetas de Clase */
.class-actions,
.program-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.class-actions button,
.class-actions a {
  padding: 4px 8px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}

/* Vista Tabla Accordion */
.program-accordion-table {
  border-spacing: 0 4px !important;
}

.program-acc-row td {
  padding: 7px 10px !important;
  font-size: 0.84rem !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
}

.program-acc-row:hover td {
  background: var(--bg-subtle) !important;
}

/* ==========================================================================
   6. MÓDULO REPORTE DE HORAS
   ========================================================================== */
.hours-dashboard {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 860px) {
  .hours-dashboard {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.hours-stat {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-top: 3px solid var(--brand-green) !important;
  border-radius: var(--radius-lg) !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.hours-stat strong {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}

.hours-stat span {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important;
}

.hours-stat-name {
  font-size: 0.8rem !important;
  color: var(--brand-green) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Gráfico de Distribución */
.hours-chart {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--shadow-card) !important;
}

.hours-chart h3 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
}

.hours-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.hours-chart-head h3 {
  margin: 0 !important;
}

.hours-search-wrap {
  width: 240px;
  max-width: 100%;
}

.hours-dist {
  gap: 2px !important;
}

.hours-dist-row {
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 42%) 2rem !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 3px 0 !important;
}

.hours-dist-hours {
  font-size: 0.9rem !important;
  white-space: nowrap;
}

.hours-dist-names {
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.hours-dist-count {
  text-align: right;
  font-size: 0.78rem !important;
}

.hours-dist-track {
  height: 7px !important;
  background: var(--bg-muted) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.hours-dist-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #22c55e, #15803d) !important;
  border-radius: 999px !important;
}

/* Barra de Horas y Exportar */
.hours-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.hours-toolbar label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}

.hours-toolbar input[type="month"] {
  width: auto !important;
  padding: 5px 8px !important;
  font-size: 0.82rem !important;
}

/* Lista de Horas por Monitor */
.hours-monitor summary {
  padding: 8px 12px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.hours-monitor summary:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--border-hover) !important;
}

/* ==========================================================================
   7. MÓDULO CORREO ZOOM (LICENCIAS)
   ========================================================================== */
.license-table-wrap {
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  overflow-x: auto !important;
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-card) !important;
}

.license-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.license-table th {
  padding: 8px 12px !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--border-card) !important;
  text-align: left !important;
}

.license-table td {
  padding: 8px 12px !important;
  font-size: 0.86rem !important;
  border-top: 1px solid var(--border-subtle) !important;
  vertical-align: middle !important;
}

.license-table tbody tr:hover td {
  background: #f8fafc !important;
}

.license-email-text {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  font-size: 0.84rem !important;
}

.license-zoom-input {
  padding: 4px 6px !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius-sm) !important;
}

.license-gmail-text {
  font-size: 0.84rem !important;
}

/* ==========================================================================
   8. MÓDULO DOCENTES Y USUARIOS
   ========================================================================== */
.teacher-head-tools,
.monitor-head-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.teacher-head-tools input,
.monitor-head-tools input {
  height: 30px !important;
  padding: 3px 8px !important;
  font-size: 0.82rem !important;
}

.teacher-head-tools button,
.monitor-head-tools button {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 0.8rem !important;
}

/* Grid de Docentes */
#teacher-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.teacher-card {
  padding: 10px 12px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  gap: 6px !important;
  background: var(--bg-surface) !important;
}

.teacher-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 0.86rem !important;
}

/* Grid de Usuarios */
.users-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 12px !important;
}

.user-management-card {
  padding: 16px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: var(--bg-surface) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  position: relative !important;
}

.user-management-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: #cbd5e1 !important;
}

.user-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.user-card-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-md) !important;
  background: var(--brand-green-light) !important;
  color: var(--brand-green-dark) !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(21, 128, 61, 0.15) !important;
}

.user-card-identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.user-card-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
  line-height: 1.25 !important;
}

.user-card-email {
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  word-break: break-all !important;
}

.user-status-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}

.user-status-badge {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.user-status-badge.active {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.user-status-badge.restricted {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

.user-status-badge.pending {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.user-card-phone {
  font-size: 0.78rem !important;
  color: var(--text-tertiary) !important;
  margin: 0 !important;
}

/* ==========================================================================
   SISTEMA DE SWITCHES TOGGLE PARA ROLES DE USUARIO
   ========================================================================== */
.user-roles-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: #f8fafc !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 12px !important;
  margin: 4px 0 !important;
}

.user-roles-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 2px !important;
}

.user-roles-checkboxes {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Tarjeta Fila de cada Rol con Switch alineado */
.role-checkbox-label {
  display: flex !important;
  flex-direction: row-reverse !important; /* Pone el switch a la derecha y el texto a la izquierda */
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  user-select: none !important;
  margin: 0 !important;
}

.role-checkbox-label:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-subtle) !important;
}

/* Texto del Rol con Indicador de Color */
.role-checkbox-text {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--text-primary) !important;
}

.role-checkbox-text::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
}

.role-tag-admin::before {
  background: #4f46e5 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) !important;
}

.role-tag-supervisor::before {
  background: #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important;
}

.role-tag-monitor::before {
  background: #15803d !important;
  box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2) !important;
}

/* INPUT CHECKBOX TRANSFORMADO EN TOGGLE SWITCH */
.role-checkbox-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 38px !important;
  height: 20px !important;
  background: #cbd5e1 !important;
  border-radius: 999px !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* Botón deslizante (Thumb) */
.role-checkbox-input::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Estado ACTIVO del Switch */
.role-checkbox-input:checked {
  background: #15803d !important;
}

.role-checkbox-input:checked::before {
  transform: translateX(18px) !important;
}

/* Colores personalizados de Switch según el Rol */
.role-checkbox-label:has(.role-tag-admin) .role-checkbox-input:checked,
.role-checkbox-label:has(input[value="admin"]:checked) .role-checkbox-input {
  background: #4f46e5 !important;
}

.role-checkbox-label:has(.role-tag-supervisor) .role-checkbox-input:checked,
.role-checkbox-label:has(input[value="supervisor"]:checked) .role-checkbox-input {
  background: #d97706 !important;
}

.role-checkbox-label:has(.role-tag-monitor) .role-checkbox-input:checked,
.role-checkbox-label:has(input[value="monitor"]:checked) .role-checkbox-input {
  background: #15803d !important;
}

/* Tarjeta resaltada sutilmente cuando el switch está encendido */
.role-checkbox-label:has(input[value="admin"]:checked) {
  border-color: #c7d2fe !important;
  background: #f8faff !important;
}

.role-checkbox-label:has(input[value="supervisor"]:checked) {
  border-color: #fde68a !important;
  background: #fffef7 !important;
}

.role-checkbox-label:has(input[value="monitor"]:checked) {
  border-color: #bbf7d0 !important;
  background: #f6fdf8 !important;
}

/* Deshabilitado (cuando la cuenta no tiene acceso activado aún) */
.role-checkbox-input:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.role-checkbox-label:has(.role-checkbox-input:disabled) {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background: #f1f5f9 !important;
}

/* Botones de Acción de la Tarjeta */
.monitor-card-actions,
.user-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.monitor-card-view {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.monitor-card-view button {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
}

.btn-enable-access {
  background: var(--brand-green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
}

.btn-enable-access:hover {
  background: var(--brand-green-hover) !important;
}

.btn-user-key {
  border: 1px solid var(--border-card) !important;
  background: #ffffff !important;
  color: var(--text-primary) !important;
}

.btn-user-key:hover {
  background: var(--bg-muted) !important;
  border-color: var(--border-hover) !important;
}

/* ==========================================================================
   9. ENTORNOS SUPERVISOR Y MONITOR
   ========================================================================== */
/* Incidencias (Tarjetas Rojas) para Supervisor y Monitor */
.monitor-incidents-section {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  border-radius: var(--radius-lg) !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}

.incidents-title-group h3 {
  font-size: 0.92rem !important;
  color: #9f1239 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.incidents-counter {
  background: #e11d48 !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.monitor-incidents-cards {
  gap: 8px !important;
  margin-top: 6px !important;
}

.incident-card {
  padding: 8px 10px !important;
  border-radius: var(--radius-md) !important;
  background: #ffffff !important;
  border: 1px solid #fecdd3 !important;
}

/* Perfil "Mis Datos" del Monitor */
.profile-card {
  max-width: 540px !important;
  margin: 10px auto !important;
  background: #ffffff !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px 22px !important;
  box-shadow: var(--shadow-card) !important;
  display: grid !important;
  gap: 10px !important;
}

.profile-field {
  display: grid !important;
  gap: 3px !important;
}

.profile-field label {
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
}

.profile-field input:disabled {
  background: #f8fafc !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.profile-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

/* Modales y Diálogos Compactos */
.modal,
.custom-dialog {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  padding: 0 !important;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.25) !important;
}

.modal::backdrop,
.custom-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-form,
.dialog-card {
  padding: 18px 22px !important;
  border-radius: var(--radius-xl) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-card) !important;
}

.modal-form {
  position: relative !important;
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}

.modal-success-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: inherit !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(3px) !important;
}

.modal-success-overlay[hidden] {
  display: none !important;
}

.modal-success-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  background: #1c6844 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 12px 28px rgba(28, 104, 68, 0.28) !important;
  animation: modalSuccessIn 280ms ease-out both !important;
}

.modal-success-badge .icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
}

@keyframes modalSuccessIn {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-form h2 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  line-height: 1.3 !important;
  color: var(--text-primary) !important;
}

.modal-form > .hint {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

.modal-form label {
  display: grid !important;
  gap: 6px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="tel"],
.modal-form input[type="password"],
.modal-form input[type="search"],
.modal-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 12px !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  font: inherit !important;
  font-weight: 400 !important;
}

.modal-form input:focus,
.modal-form textarea:focus {
  outline: 2px solid rgba(34, 197, 94, 0.35) !important;
  border-color: var(--brand-green) !important;
}

.modal-actions {
  margin-top: 4px !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* ==========================================================================
   10. AJUSTES RESPONSIVOS MULTI-ROL (Desktop, Tablet y Smartphone)
   ========================================================================== */

/* Topbar móvil y Drawer Sidebar */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--brand-green-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.btn-mobile-sidebar-toggle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-mobile-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mobile-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

.mobile-brand-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #86efac;
}

.mobile-brand-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.mobile-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Pantallas Medianas y Tablets (<= 860px) */
@media (max-width: 860px) {
  .shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
  }

  .mobile-topbar {
    display: flex !important;
  }

  .sidebar-backdrop {
    display: block !important;
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    z-index: 999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.5) !important;
  }

  .workspace {
    padding: 10px 12px 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Barra de acciones responsive */
  .workspace-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    align-items: stretch !important;
  }

  .workspace-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .workspace-actions button,
  .workspace-actions .status {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-height: 34px !important;
  }

  /* Vista Nueva Clase */
  .nueva-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Vista Programaciones y Auditoría */
  .program-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .program-search-wrap {
    width: 100% !important;
  }

  .course-filter-bar {
    overflow-x: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #class-list.program-grid,
  .program-grid[data-prog-view="cards"],
  .program-grid {
    grid-template-columns: 1fr !important;
  }

  .program-mini-grid,
  .program-grid[data-prog-view="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Vista Reporte de Horas */
  .hours-dashboard {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hours-chart {
    overflow-x: auto !important;
  }

  .hours-dist-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 40%) 1.6rem !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
  }

  /* Tablas de Licencias y Usuarios */
  .license-table-wrap,
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .teacher-head-tools,
  .monitor-head-tools {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .users-grid-container {
    grid-template-columns: 1fr !important;
  }

  #teacher-list {
    grid-template-columns: 1fr !important;
  }

  /* Modales y Diálogos Responsive */
  dialog,
  .custom-dialog,
  .modal,
  .class-detail-modal {
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: auto !important;
    border-radius: var(--radius-lg) !important;
  }

  .modal-form {
    padding: 16px 14px !important;
  }
}

/* Pantallas Pequeñas y Smartphones (<= 520px) */
@media (max-width: 520px) {
  .hours-dashboard {
    grid-template-columns: 1fr !important;
  }

  .set-controls {
    grid-template-columns: 1fr !important;
  }

  .calendar-nav {
    grid-template-columns: 24px 1fr 24px !important;
  }

  .workspace .entry-switch {
    width: 100% !important;
    justify-content: center !important;
  }

  .workspace .entry-switch button {
    flex: 1 !important;
    text-align: center !important;
  }

  .login-card {
    padding: 22px 16px !important;
  }

  .modal-actions {
    flex-direction: column-reverse !important;
  }

  .modal-actions button {
    width: 100% !important;
  }
}

/* Sesión sustituida por otro monitor */
.session-list li.session-substituted {
  background: rgba(217, 140, 20, 0.18) !important;
  border: 1px solid rgba(217, 140, 20, 0.45) !important;
}
.session-substitute { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.session-substitute-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid rgba(0, 0, 0, 0.25); cursor: pointer;
}
.session-substitute-btn .icon { width: 16px; height: 16px; }
.session-substitute-picker { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.session-substitute-picker[hidden] { display: none; }

/* Selector de monitor para reasignar: lista como en "nueva clase"; verde libre, rojo ocupado, morado elegido */
.monitor-reassign { display: grid; gap: 6px; margin: 6px 0; width: 100%; min-width: 220px; }
.monitor-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #5b6560; }
.monitor-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.monitor-legend .dot.free { background: #2f9e5a; }
.monitor-legend .dot.busy { background: #c8453b; margin-left: 6px; }
.monitor-legend .dot.pick { background: #6d4aa8; margin-left: 6px; }
.monitor-options.reassign { max-height: 220px; }
.monitor-options.reassign .monitor-option.reassign-free { background: #e4f4e8; color: #1d5f38; }
.monitor-options.reassign .monitor-option.reassign-busy { background: #fdeceb; color: #7a2e28; }
.monitor-options.reassign .monitor-option.reassign-unknown { background: #f3efe3; color: #6b6450; }
.monitor-options.reassign .monitor-option[aria-selected="true"] { background: #6d4aa8; color: #fff; }
.session-substitute-picker button.primary:not(:disabled),
.course-monitor-control button.primary:not(:disabled) { background: #6d4aa8; color: #fff; }
.course-monitor-control { margin: 10px 0; display: grid; gap: 8px; }

/* Panel Respaldo BD */
.backup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 4px 0; }
.backup-card { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--bg-surface); }
.backup-card h3 { margin: 0; }

/* Monitor en la tarjeta del curso */
.card-monitor { display: grid; gap: 6px; width: 100%; }
.card-monitor-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--bg-surface); }
.card-monitor-row .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.card-monitor-row strong { flex: 1; min-width: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.course-reassign-panel { display: grid; gap: 8px; }
.course-reassign-panel button.primary:not(:disabled) { background: #6d4aa8; color: #fff; }

/* Vista Tabla: filas uniformes */
.program-accordion-table col.col-course { width: 36%; }
.program-accordion-table col.col-teacher { width: 17%; }
.program-accordion-table col.col-next { width: 18%; }
.program-accordion-table col.col-zoom { width: 16%; }
.program-accordion-table col.col-actions { width: 13%; min-width: 150px; }
.program-acc-row td { vertical-align: middle !important; overflow-wrap: anywhere; border-top: 1px solid var(--border-card) !important; border-bottom: 1px solid var(--border-card) !important; }
.program-acc-row td:first-child { border-left: 1px solid var(--border-card) !important; border-radius: 12px 0 0 12px; }
.program-acc-row td:last-child { border-right: 1px solid var(--border-card) !important; border-radius: 0 12px 12px 0; }
.program-acc-row.is-expanded td:first-child { border-bottom-left-radius: 0; }
.program-acc-row.is-expanded td:last-child { border-bottom-right-radius: 0; }
.program-acc-row.is-expanded td { border-bottom-color: transparent !important; }
.program-acc-course-inner { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.program-acc-course-text { min-width: 0; }
.program-acc-actions-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-start; }
.program-acc-actions-inner .ghost, .program-acc-actions-inner .primary { white-space: nowrap; }
.program-acc-detail { display: table-row; }
.program-acc-detail[hidden] { display: none; }
.program-acc-detail td { padding: 12px !important; background: var(--bg-surface) !important; border: 1px solid var(--border-card) !important; border-top: 0 !important; border-radius: 0 0 12px 12px; }
.program-acc-detail .program-card { box-shadow: none; margin: 0; max-width: none; }
.reassign-actions { display: flex; gap: 8px; align-items: center; }
.program-accordion-table { border-collapse: separate !important; border-spacing: 0 8px !important; }
.program-acc-row td { display: table-cell; }
@media (max-width: 720px) { .program-acc-row td { display: block; } }

/* Pestañas de rol en Usuarios */
.user-role-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.user-role-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #d6dbe4;
  border-radius: 999px;
  background: #fff;
  color: #3b4558;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.user-role-tab span {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef1f6;
  font-size: 0.75rem;
  text-align: center;
}
.user-role-tab.is-active { background: #1f2937; border-color: #1f2937; color: #fff; }
.user-role-tab.is-active span { background: rgba(255, 255, 255, 0.2); }
.user-role-tab[data-role-tab="admin"].is-active { background: #4f46e5; border-color: #4f46e5; }
.user-role-tab[data-role-tab="supervisor"].is-active { background: #d97706; border-color: #d97706; }
.user-role-tab[data-role-tab="monitor"].is-active { background: #15803d; border-color: #15803d; }

/* Aviso de cierre de sesión por inactividad */
.session-warning { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid #d98c14; box-shadow: 0 8px 24px rgba(0,0,0,0.2); max-width: calc(100vw - 32px); }
.session-warning[hidden] { display: none; }

/* ==========================================================================
   MODO OSCURO: contraste y paleta (WCAG AA)
   Reemplaza fondos claros fijos de styles.css / reglas anteriores de este archivo.
   Solo aplica con [data-theme="dark"]; el modo claro no cambia.
   ========================================================================== */

/* Superficies y tarjetas */
:root[data-theme="dark"] :is(
  .panel-card-inner, .note-card, .teacher-card, .monitor-card, .user-management-card,
  .announcement-card, .zoom-credential-item, .teacher-contact-box, .teacher-contact-btn,
  .hours-stat, .hours-chart, .monitor-form, .day-card, .session-list li, .role-card-choice,
  .btn-ver-horas, .monitor-options, .monitor-option, .entry-switch, .status
) {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
}

:root[data-theme="dark"] :is(.zoom-credential-item.clickable-credential:hover, .teacher-contact-btn:hover, .btn-ver-horas:hover) {
  background: var(--bg-muted) !important;
}

:root[data-theme="dark"] :is(.announcement-contact-row, .import-summary, #import-summary, #modality[readonly]) {
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
}

/* Contadores de cabecera (Cursos en dictado, Total de docentes/usuarios, Activos, Abiertas…) */
:root[data-theme="dark"] :is(.monitor-total, .course-total, .teacher-total, .announcement-total, .incidencias-total, [class*="-total"]:not([class*="hours"])) {
  background: var(--bg-muted) !important;
  border-color: var(--border-hover) !important;
}

:root[data-theme="dark"] :is(.monitor-total, .course-total, .teacher-total, .announcement-total, .incidencias-total) strong {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] :is(.monitor-total, .course-total, .teacher-total, .announcement-total, .incidencias-total) span {
  color: var(--text-secondary) !important;
}

/* Tablas con filas alternas (Correo Zoom) */
:root[data-theme="dark"] .license-table tbody tr td {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .license-table tbody tr:nth-child(even) td {
  background: var(--bg-row-alt) !important;
}

:root[data-theme="dark"] .license-table tbody tr:hover td {
  background: var(--brand-green-light) !important;
}

:root[data-theme="dark"] .license-email-text,
:root[data-theme="dark"] .license-gmail-text {
  color: var(--text-primary) !important;
}

/* Formularios */
:root[data-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  #class-search-input, .login-card input, .profile-field input, .announcement-form input, .announcement-form textarea
) {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

:root[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--placeholder) !important;
  opacity: 1;
}

:root[data-theme="dark"] :is(input, textarea, select):disabled,
:root[data-theme="dark"] :is(input, textarea)[readonly] {
  background: var(--bg-subtle) !important;
  color: var(--text-secondary) !important;
}

/* Calendario */
:root[data-theme="dark"] :is(.calendar) {
  background: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
}

:root[data-theme="dark"] .day {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
}

:root[data-theme="dark"] .day:hover:not(:disabled) {
  background: var(--brand-green-light) !important;
  border-color: var(--brand-green) !important;
}

:root[data-theme="dark"] :is(.day.selected, .day[aria-pressed="true"], .day.is-selected, .day.active) {
  background: var(--brand-green) !important;
  color: #071f13 !important;
}

:root[data-theme="dark"] :is(.day.occupied, .day.light, .day:disabled) {
  background: var(--bg-subtle) !important;
  color: var(--text-tertiary) !important;
}

:root[data-theme="dark"] .day.today {
  border-color: var(--accent-amber) !important;
}

/* Botones */
:root[data-theme="dark"] :is(button.primary, .primary, a.primary, .btn-enable-access, button.btn-primary),
:root[data-theme="dark"] :is(button.primary, .primary, a.primary, .btn-enable-access, button.btn-primary) * {
  color: #052e16 !important;
}

:root[data-theme="dark"] :is(.ghost, .code-remove, .btn-label) {
  color: var(--text-primary);
}

:root[data-theme="dark"] .ghost {
  background: transparent !important;
  border-color: var(--border-hover) !important;
}

:root[data-theme="dark"] .ghost:hover {
  background: var(--brand-green-light) !important;
}

:root[data-theme="dark"] :is(.danger, .danger-ghost, .btn-danger) {
  background: var(--accent-red-light) !important;
  color: var(--accent-red) !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
}

:root[data-theme="dark"] :is(.danger, .danger-ghost, .btn-danger) * {
  color: var(--accent-red) !important;
}

/* Textos que usaban el verde oscuro de marca sobre fondo claro */
:root[data-theme="dark"] :is(.code-badge, .monitor-zoom-title, .hours-monitor-total, .btn-edit-codes-badge) {
  color: #4ade80 !important;
}

:root[data-theme="dark"] .code-badge {
  background: var(--brand-green-light) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
}

/* Badges, roles y chips */
:root[data-theme="dark"] .role-checkbox-item,
:root[data-theme="dark"] .user-roles-box {
  background: var(--bg-subtle) !important;
  border-color: var(--border-card) !important;
}

:root[data-theme="dark"] :is(.role-checkbox-text, .user-roles-label, .user-roles-legend) {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .user-roles-label {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] :is(.user-role.admin, .role-tag-admin) { background: var(--accent-indigo-light) !important; color: var(--accent-indigo) !important; }
:root[data-theme="dark"] :is(.user-role.supervisor, .role-tag-supervisor) { background: var(--accent-amber-light) !important; color: var(--accent-amber) !important; }
:root[data-theme="dark"] :is(.user-role.monitor, .role-tag-monitor, .badge.monitor) { background: var(--brand-green-light) !important; color: #4ade80 !important; }
:root[data-theme="dark"] .chip { background: var(--brand-green-light) !important; color: #4ade80 !important; }
:root[data-theme="dark"] .chip.busy { background: var(--accent-red-light) !important; color: var(--accent-red) !important; }
:root[data-theme="dark"] .chip.unknown { background: var(--accent-amber-light) !important; color: var(--accent-amber) !important; }
:root[data-theme="dark"] :is(.note-badge.pending, .class-note-trigger.has-pending) { background: var(--accent-red-light) !important; color: var(--accent-red) !important; }
:root[data-theme="dark"] .class-note-trigger.no-notes { background: var(--bg-muted) !important; color: var(--text-primary) !important; }

/* Avisos y callouts */
:root[data-theme="dark"] :is(.ok-note, .calendar-help.ok, .hint.ok) {
  background: var(--bg-callout-success) !important;
  color: var(--text-primary) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

:root[data-theme="dark"] .error:not(input) {
  background: var(--accent-red-light) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
}

/* Textos secundarios con contraste suficiente sobre superficies oscuras */
:root[data-theme="dark"] :is(.hint, .calendar-help, .monitor-preview, .user-card-phone, .incidencias-empty, .teacher-contact-info .label) {
  color: var(--text-secondary) !important;
}

/* --- Segunda pasada: comunicados, roles, callouts y vacíos --- */
:root[data-theme="dark"] :is(.announcement-manager-item, .incidencias-empty) {
  background: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .announcement-manager-info span {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .announcement-manager-info strong {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .announcement-manager-actions button {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hover) !important;
}

:root[data-theme="dark"] .announcement-manager-actions button:last-child {
  background: var(--accent-red-light) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
}

:root[data-theme="dark"] .announcement-manager-actions button:last-child * {
  color: #fca5a5 !important;
}

:root[data-theme="dark"] .incidencias-empty {
  color: var(--text-secondary) !important;
}

/* Callout verde "Completa la fecha…" (bloque con fondo #f0fdf4 fijo) */
:root[data-theme="dark"] .license-field-block {
  background: var(--bg-callout-success) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
}

:root[data-theme="dark"] .license-field-block .hint {
  color: var(--text-primary) !important;
}

/* Roles: etiquetas legibles, con el acento a pleno color sobre fondo translúcido */
:root[data-theme="dark"] .role-checkbox-label {
  background: var(--bg-muted) !important;
  border-color: var(--border-hover) !important;
}

:root[data-theme="dark"] .role-checkbox-label:has(.role-tag-admin) { background: var(--accent-indigo-light) !important; }
:root[data-theme="dark"] .role-checkbox-label:has(.role-tag-supervisor) { background: var(--accent-amber-light) !important; }
:root[data-theme="dark"] .role-checkbox-label:has(.role-tag-monitor) { background: var(--brand-green-light) !important; }

:root[data-theme="dark"] .role-checkbox-text.role-tag-admin { color: #c7d2fe !important; }
:root[data-theme="dark"] .role-checkbox-text.role-tag-supervisor { color: #fde68a !important; }
:root[data-theme="dark"] .role-checkbox-text.role-tag-monitor { color: #86efac !important; }

/* Acciones peligrosas con texto más claro para llegar a AA sobre el fondo rojo translúcido */
:root[data-theme="dark"] :is(.danger, .danger-ghost, .btn-danger),
:root[data-theme="dark"] :is(.danger, .danger-ghost, .btn-danger) * {
  color: #fca5a5 !important;
}

/* Enlaces/resúmenes en verde de marca */
:root[data-theme="dark"] :is(.schedule-edit summary, summary) {
  color: #4ade80 !important;
}

/* --- Tercera pasada: barra de entorno, botón principal y acciones destructivas --- */
:root[data-theme="dark"] .workspace-role-switch {
  background: var(--bg-muted) !important;
  border-color: var(--border-hover) !important;
}

:root[data-theme="dark"] .workspace-role-switch .role-switch-title {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] :is(button.primary, .primary, a.primary, .create-bar .primary) {
  background: var(--brand-green) !important;
}

:root[data-theme="dark"] :is(button.primary, .primary, a.primary, .create-bar .primary):hover:not(:disabled) {
  background: #4ade80 !important;
}

:root[data-theme="dark"] :is(.danger, .danger-ghost, .btn-danger),
:root[data-theme="dark"] :is(.danger, .danger-ghost, .btn-danger) * {
  color: #fecaca !important;
}

/* --- Cuarta pasada: mini-tarjetas (Grid) y diálogos de correo --- */
:root[data-theme="dark"] .program-mini-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
}

:root[data-theme="dark"] .program-mini-card h3 {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .program-mini-card :is(.mini-code, .mini-meta, .mini-when) {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .mail-step span {
  background: var(--brand-green) !important;
  color: #052e16 !important;
}

:root[data-theme="dark"] .mail-role.teacher { background: var(--brand-green-light) !important; color: #86efac !important; }
:root[data-theme="dark"] .mail-role.monitor { background: var(--accent-blue-light) !important; color: #7dd3fc !important; }

:root[data-theme="dark"] .bcc-chip.on,
:root[data-theme="dark"] .bcc-chip.on * {
  color: #bae6fd !important;
}

:root[data-theme="dark"] .bcc-chip button:hover {
  color: #fca5a5 !important;
}

:root[data-theme="dark"] .mail-chip.none { color: var(--text-secondary) !important; }