/* SIGE - Modo oscuro (binario: light | dark) Activar con: Persistencia: per-user en ctr.Persona.theme_preference IMPORTANTE: nunca tocamos --primary-blue / --secondary-blue / --color-primary-* El color de marca lo configura el admin en "Colores del tema". */ html[data-theme="dark"] { /* Paleta dark - DEFAULTS NEUTROS sin tinte de marca. Las 5 vars principales (--ui-bg, --ui-bg-white, --ui-bg-card, --ui-text, --ui-border) las inyecta bs_base.html desde BD (PlatformTemplate.color_dark_*). Las demas (elev, text-dark, text-mid, text-muted, border-light, etc.) se DERIVAN via color-mix() para que sean coherentes con el brand de cada instalacion (vino moderna / azul legacy) sin hardcodear nada. */ --ui-bg: #1a1a1f; /* fallback neutro */ --ui-bg-white: #232328; --ui-bg-card: var(--ui-bg-white); --ui-bg-elev: color-mix(in srgb, var(--ui-bg-white) 75%, var(--ui-text) 10%); /* Bordes derivados del fondo + texto */ --ui-border: color-mix(in srgb, var(--ui-bg-white) 55%, var(--ui-text) 30%); --ui-border-light: color-mix(in srgb, var(--ui-bg-white) 78%, var(--ui-text) 12%); /* Texto: solo --ui-text viene de BD, el resto se deriva */ --ui-text: #e8e8ec; --ui-text-dark: color-mix(in srgb, var(--ui-text) 80%, white 20%); --ui-text-mid: color-mix(in srgb, var(--ui-text) 60%, var(--ui-bg) 40%); --ui-text-muted: color-mix(in srgb, var(--ui-text) 40%, var(--ui-bg) 60%); --ui-text-placeholder: color-mix(in srgb, var(--ui-text) 28%, var(--ui-bg) 72%); --ui-text-disabled: color-mix(in srgb, var(--ui-text) 28%, var(--ui-bg) 72%); /* Bg tinted de estados (semantica intacta) */ --ui-success-bg: rgba(34, 197, 94, 0.15); --ui-warning-bg: rgba(245, 158, 11, 0.15); --ui-danger-bg: rgba(239, 68, 68, 0.15); --ui-info-bg: rgba(14, 165, 233, 0.15); /* Sombras - suaves, no agresivas (en dark las sombras intensas crean halos claros perceptibles, contrarios a la intencion) */ --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); --ui-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.25); /* Backgrounds tinted que en claro derivan del brand (--ui-primary-bg, --ui-primary-bg2): en dark los redirigimos a superficies elevadas oscuras con sutil tinte, asi cards informativas (.rep-info-card, .welcome-banner, hovers de menus) quedan legibles. */ --ui-primary-bg: var(--ui-bg-elev); --ui-primary-bg2: var(--ui-bg-card); --ui-primary-lighter: var(--ui-text-mid); /* Escala de gris (secondary) - se invierte para que componentes que la usan se vean bien */ --color-secondary-50: var(--ui-bg); --color-secondary-100: var(--ui-bg-white); --color-secondary-200: var(--ui-border); --color-secondary-300: var(--ui-text-placeholder); --color-secondary-400: var(--ui-text-muted); --color-secondary-500: var(--ui-text-muted); --color-secondary-600: var(--ui-text-mid); --color-secondary-700: var(--ui-text); --color-secondary-800: var(--ui-text-dark); --color-secondary-900: var(--ui-text-dark); --color-secondary-950: #ffffff; --color-white: var(--ui-bg-white); --light-gray: var(--ui-bg-white); --text-gray: var(--ui-text-mid); --border-gray: var(--ui-border); /* === Aliases --color-* (usados en my_profile y otros templates legacy) === Estos templates usan nombres distintos al sistema --ui-*; en dark los redirigimos a los tokens correctos para que se vean bien sin tocar ningun archivo de template. */ --color-bg-white: var(--ui-bg-white); --color-bg-light: var(--ui-bg); --color-bg-hover: var(--ui-bg-elev); --color-border: var(--ui-border); --color-border-light: var(--ui-border-light); --color-text: var(--ui-text); --color-text-light: var(--ui-text-mid); --color-text-muted: var(--ui-text-muted); --color-text-placeholder:var(--ui-text-placeholder); --color-text-disabled: var(--ui-text-disabled); /* Tonos suaves de estado: en dark los pasamos a bg-tinted al 12% para que los hovers/tabs (.profile-nav-link.active) no queden con fondo verde pastel ilegible. */ --color-success-50: rgba(34, 197, 94, 0.15); --color-success-100: rgba(34, 197, 94, 0.20); --color-success-600: #4ade80; --color-success-700: #86efac; --color-primary-50: var(--ui-bg-elev); --color-primary-100: var(--ui-bg-elev); --color-primary-400: var(--ui-text-mid); } /* Body / main */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .main-content, html[data-theme="dark"] .content-area, html[data-theme="dark"] .page-wrapper { background: var(--ui-bg) !important; color: var(--ui-text); } /* Aula virtual - .av-activity-header tiene gradient metalico (secondary-50 → white) que en dark se ve sucio. Pisamos por gradient oscuro coherente. */ html[data-theme="dark"] .av-activity-header, html[data-theme="dark"] .av-actividad-card, html[data-theme="dark"] .av-recurso-item { background: linear-gradient(135deg, var(--ui-bg-white), var(--ui-bg-elev)) !important; border-bottom-color: var(--ui-border) !important; } /* ============================================================ Redisign .av-activity-card en dark - look moderno tipo Linear/Vercel ============================================================ */ html[data-theme="dark"] .av-activity-card { background: var(--ui-bg-white) !important; border: 1px solid var(--ui-border-light) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.15); } html[data-theme="dark"] .av-activity-card:hover { transform: translateY(-3px); border-color: var(--ui-primary, var(--primary-blue)) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.30), 0 12px 28px rgba(0,0,0,0.25); } html[data-theme="dark"] .av-activity-title { color: var(--ui-text-dark) !important; font-weight: 700; } html[data-theme="dark"] .av-activity-type { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 18%, transparent) !important; color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 60%, white 40%) !important; border: 1px solid color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 30%, transparent); } html[data-theme="dark"] .av-date-row i { color: var(--ui-primary, var(--primary-blue)) !important; opacity: 0.8; } html[data-theme="dark"] .av-date-label { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .av-date-value { color: var(--ui-text-dark) !important; font-weight: 600; } /* Status badges con gradient ya son visibles; reforzar los pasteles */ html[data-theme="dark"] .av-status-badge.calificada, html[data-theme="dark"] .av-status-badge.enviado, html[data-theme="dark"] .av-status-badge.pendiente, html[data-theme="dark"] .av-status-badge.no-entregada { color: #fff !important; } /* "No requiere entrega" amarillo pastel: tinted oscuro */ html[data-theme="dark"] .av-nota-badge, html[data-theme="dark"] [class*="no-requiere"], html[data-theme="dark"] [class*="no-entrega"]:not(.av-status-badge) { background: color-mix(in srgb, #fbbf24 18%, transparent) !important; color: #fde68a !important; border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent) !important; } /* Time remaining badges */ html[data-theme="dark"] .av-time-remaining { background: color-mix(in srgb, #fbbf24 18%, transparent) !important; color: #fde68a !important; } html[data-theme="dark"] .av-time-remaining.expired { background: color-mix(in srgb, #ef4444 18%, transparent) !important; color: #fca5a5 !important; } html[data-theme="dark"] .av-time-remaining.active { background: color-mix(in srgb, #22c55e 18%, transparent) !important; color: #86efac !important; } /* Footer */ html[data-theme="dark"] .av-activity-footer { background: var(--ui-bg) !important; border-top-color: var(--ui-border-light) !important; } html[data-theme="dark"] .av-activity-category { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .av-activity-action-btn:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-blue) 40%, transparent) !important; } /* Filter tabs (Todas / No entregadas / Pendientes / Calificadas) */ html[data-theme="dark"] .av-filter-btn { background: var(--ui-bg-white) !important; color: var(--ui-text-mid) !important; border: 1px solid var(--ui-border) !important; } html[data-theme="dark"] .av-filter-btn:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-filter-btn.active { background: var(--ui-primary, var(--primary-blue)) !important; color: #ffffff !important; border-color: var(--ui-primary, var(--primary-blue)) !important; } /* Botones de accion de tabs en aula virtual (.av-action-btn): Companeros, Calificaciones, Calendario. Hover usaba --color-primary-100 (claro) que en dark se redirige a --ui-bg-elev (oscuro) y el color a --color-primary-700 (vino/azul brand oscuro). Resultado: azul oscuro sobre azul oscuro = invisible. Lo pasamos a celeste tinted con texto celeste claro. */ html[data-theme="dark"] .av-action-btn { background: var(--ui-bg-white) !important; color: var(--ui-text-mid) !important; } html[data-theme="dark"] .av-action-btn:hover { background: rgba(96, 165, 250, 0.18) !important; color: #93c5fd !important; box-shadow: 0 2px 8px rgba(96,165,250,0.18) !important; } html[data-theme="dark"] .av-action-btn:hover i { color: #60a5fa !important; } /* Search box del aula virtual */ html[data-theme="dark"] .av-search-box { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .av-search-input { background: transparent !important; color: var(--ui-text) !important; } html[data-theme="dark"] .av-search-icon, html[data-theme="dark"] .av-search-clear { color: var(--ui-text-muted) !important; } /* ============================================================ Timeline de semanas (.nav-week-item) - el activo usa --ui-primary-darker (vino/azul brand oscuro) que en dark es invisible. Lo aclaramos con color-mix. */ html[data-theme="dark"] .nav-week-item .week-name { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .nav-week-item .week-date { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .nav-week-item.active .week-name { color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 50%, white 50%) !important; } html[data-theme="dark"] .nav-week-item.active .week-date { color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 60%, white 40%) !important; } html[data-theme="dark"] .nav-week-item.active { border-bottom-color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 60%, white 40%) !important; } html[data-theme="dark"] .nav-week-item:hover .week-name, html[data-theme="dark"] .nav-week-item:hover .week-date { color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 50%, white 50%) !important; } /* Stat mini ("43 TOTAL SEMANAS") - numero brand invisible en dark */ html[data-theme="dark"] .av-stat-mini { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .av-stat-mini .av-stat-value { color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 55%, white 45%) !important; } html[data-theme="dark"] .av-stat-mini .av-stat-label { color: var(--ui-text-mid) !important; } /* ============================================================ Detalle de actividad (resumen_actividad.html) - redesign en dark Aplica a las tarjetas internas: Tipo, Cohorte, Categoria, Componente, Descripcion, Detalle, Rubrica. ============================================================ */ html[data-theme="dark"] .av-actividad-detalle-card, html[data-theme="dark"] .av-detalle-section, html[data-theme="dark"] [class*="actividad-detalle"] { background: var(--ui-bg-white) !important; border: 1px solid var(--ui-border-light) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.15); } html[data-theme="dark"] [class*="detalle"] [class*="label"], html[data-theme="dark"] [class*="detalle"] [class*="title"] { color: var(--ui-text-mid) !important; } html[data-theme="dark"] [class*="detalle"] [class*="value"] { color: var(--ui-text-dark) !important; } /* Tabla de rubrica */ html[data-theme="dark"] .rubrica-table, html[data-theme="dark"] .av-rubrica-table { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .rubrica-table th, html[data-theme="dark"] .av-rubrica-table th { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .rubrica-table td, html[data-theme="dark"] .av-rubrica-table td { color: var(--ui-text) !important; border-color: var(--ui-border-light) !important; } /* Containers de modulo (anuncios, etc.) que tienen gradient claro hardcoded tipo "linear-gradient(180deg, var(--color-secondary-50) 0%, #f8fafc 100%)". En dark queda navy -> blanco metalico. Lo pisamos por fondo oscuro plano. */ html[data-theme="dark"] .anuncios-container, html[data-theme="dark"] [class*="-container"][style*="linear-gradient"] { background: var(--ui-bg) !important; } /* Seguimiento academico representante - gradients metalicos hardcoded (#f8fafc → #e2e8f0/#f1f5f9) en cards y containers. */ html[data-theme="dark"] .pago-header-card, html[data-theme="dark"] .calendar-loading, html[data-theme="dark"] #av-calendario { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; } /* Pensiones - icono cuadrado de cada rubro (MATRICULA, PENSION). bg: #f1f5f9 hardcoded queda gris claro feo en dark. */ html[data-theme="dark"] .rubro-icon-box { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 18%, transparent) !important; color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 60%, white 40%) !important; } /* Pensiones - fila de detalle expandida (.bg-light-faded + transacciones) */ html[data-theme="dark"] .bg-light-faded { background-color: var(--ui-bg-elev) !important; } html[data-theme="dark"] .detail-content { background-color: var(--ui-bg-elev) !important; } html[data-theme="dark"] .transaccion-icon { background: var(--ui-bg-card) !important; color: var(--ui-text-mid) !important; } html[data-theme="dark"] .transaccion-fecha, html[data-theme="dark"] .transaccion-usuario { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .transaccion-observacion { background: var(--ui-bg) !important; color: var(--ui-text) !important; } /* Boton descarga (.btn-download) - fondo amarillo claro hardcoded */ html[data-theme="dark"] .btn-download { background: rgba(245, 158, 11, 0.20) !important; color: #fde68a !important; } html[data-theme="dark"] .btn-download:hover { background: #f59e0b !important; color: #ffffff !important; } /* Empty state icon */ html[data-theme="dark"] .empty-state .empty-icon { background: var(--ui-bg-elev) !important; color: var(--ui-text-muted) !important; } /* Status pills sueltas (sin badge-status como prefijo) - usadas en transacciones */ html[data-theme="dark"] .status-success:not(.badge-status) { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; border-color: rgba(34, 197, 94, 0.40) !important; } html[data-theme="dark"] .status-warning:not(.badge-status) { background-color: rgba(251, 191, 36, 0.18) !important; color: #fde68a !important; border-color: rgba(251, 191, 36, 0.40) !important; } /* Hover de filas tabla pensiones - Bootstrap pinta blanco */ html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } /* Cabeceras de seccion con gradient brand suave */ html[data-theme="dark"] .av-semana-header-card { background: linear-gradient(135deg, var(--ui-bg-white), var(--ui-bg-elev)) !important; border-bottom-color: var(--ui-border) !important; color: var(--ui-text-dark) !important; } /* Cards / superficies blancas */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .cfg-card, html[data-theme="dark"] .av-semana-card, html[data-theme="dark"] .av-recursos-section, html[data-theme="dark"] .av-actividades-section, html[data-theme="dark"] .av-recurso-item, html[data-theme="dark"] .av-actividad-card, html[data-theme="dark"] .ah-filters-card, html[data-theme="dark"] .age-card, html[data-theme="dark"] .cfg-wizard-nav, html[data-theme="dark"] .av-metric-pill, html[data-theme="dark"] .quick-access-card, html[data-theme="dark"] .chart-card, html[data-theme="dark"] .panel, html[data-theme="dark"] .box, html[data-theme="dark"] .info-card { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; color: var(--ui-text); } /* Fondos blancos hardcodeados (inline o por utility) */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: #FFFFFF"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background-color:#FFFFFF"], html[data-theme="dark"] [style*="background-color:white"] { background: var(--ui-bg-white) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--ui-bg-white) !important; color: var(--ui-text); } html[data-theme="dark"] .border { border-color: var(--ui-border) !important; } html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } /* Banner de seccion con gradiente (welcome) */ html[data-theme="dark"] .av-section-banner { background: linear-gradient(135deg, var(--ui-bg-white) 0%, var(--ui-bg) 100%) !important; border-color: var(--ui-border) !important; } /* Inputs */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .cfg-input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--ui-text-placeholder) !important; } /* Tablas - redefinimos las variables de Bootstrap (--bs-table-bg pinta las celdas de blanco por default y no se ve en dark) */ html[data-theme="dark"] .table, html[data-theme="dark"] table { color: var(--ui-text); --bs-table-bg: transparent; --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border-light); --bs-table-striped-bg: var(--ui-bg-elev); --bs-table-striped-color: var(--ui-text); --bs-table-hover-bg: var(--ui-bg-elev); --bs-table-hover-color: var(--ui-text-dark); --bs-table-accent-bg: transparent; } html[data-theme="dark"] .table thead th, html[data-theme="dark"] table thead th { background: var(--ui-bg) !important; color: var(--ui-text-mid) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .table tbody tr, html[data-theme="dark"] .table tbody td { background-color: transparent !important; } html[data-theme="dark"] .table tbody tr:hover { background: var(--ui-bg-elev) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--ui-border-light) !important; color: var(--ui-text) !important; } /* Texto - cambio explicito de color en dark */ html[data-theme="dark"] body, html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] div { color: var(--ui-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--ui-text-dark) !important; } html[data-theme="dark"] label { color: var(--ui-text); } html[data-theme="dark"] small { color: var(--ui-text-muted); } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small.text-muted { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .text-dark { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .text-secondary, html[data-theme="dark"] .text-body-secondary { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .text-black, html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color: #000"], html[data-theme="dark"] [style*="color:black"], html[data-theme="dark"] [style*="color: black"] { color: var(--ui-text) !important; } /* Header / topbar */ html[data-theme="dark"] header.header, html[data-theme="dark"] .header, html[data-theme="dark"] .topbar { background: var(--ui-bg) !important; border-bottom-color: var(--ui-border) !important; color: var(--ui-text); } /* Footer */ html[data-theme="dark"] footer.footer, html[data-theme="dark"] .footer { background: var(--ui-bg) !important; border-top: 1px solid var(--ui-border) !important; color: var(--ui-text-mid) !important; } html[data-theme="dark"] .footer-text, html[data-theme="dark"] .footer-institution, html[data-theme="dark"] .footer-credit, html[data-theme="dark"] .footer-credit a, html[data-theme="dark"] .footer-time, html[data-theme="dark"] .date-chip, html[data-theme="dark"] .time-chip { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .footer-highlight { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .footer-bubble { opacity: 0.1; } /* Btn outline - Bootstrap usa vars internas --bs-btn-* que pisamos */ html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--ui-text); --bs-btn-bg: var(--ui-bg-white); --bs-btn-border-color: var(--ui-border); --bs-btn-hover-color: var(--ui-text-dark); --bs-btn-hover-bg: var(--ui-bg-elev); --bs-btn-hover-border-color: var(--ui-text-muted); --bs-btn-active-color: var(--ui-text-dark); --bs-btn-active-bg: var(--ui-bg-elev); --bs-btn-active-border-color: var(--ui-text-muted); background: var(--ui-bg-white) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:focus, html[data-theme="dark"] .btn-outline-secondary:active { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-text-muted) !important; } html[data-theme="dark"] .btn-outline-secondary i { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .btn-outline-secondary:hover i { color: var(--ui-text-dark) !important; } /* btn-primary / btn-secondary de Bootstrap dentro de modales - el texto se vuelve invisible si --bs-btn-color no se setea correctamente. */ html[data-theme="dark"] .btn-primary { --bs-btn-bg: var(--ui-primary, var(--primary-blue)); --bs-btn-border-color: var(--ui-primary, var(--primary-blue)); --bs-btn-color: #ffffff; --bs-btn-hover-bg: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 85%, white 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 85%, white 15%); --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; background: var(--ui-primary, var(--primary-blue)) !important; color: #ffffff !important; border-color: var(--ui-primary, var(--primary-blue)) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 30%, transparent); } html[data-theme="dark"] .btn-primary:hover { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 85%, white 15%) !important; color: #ffffff !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 45%, transparent); } html[data-theme="dark"] .btn-primary i { color: #ffffff !important; } html[data-theme="dark"] .btn-secondary { --bs-btn-bg: var(--ui-bg-elev); --bs-btn-border-color: var(--ui-border); --bs-btn-color: var(--ui-text); --bs-btn-hover-bg: var(--ui-bg-card); --bs-btn-hover-color: var(--ui-text-dark); background: var(--ui-bg-elev) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .btn-secondary:hover { background: var(--ui-bg-card) !important; color: var(--ui-text-dark) !important; } /* ============================================================ Modales (#modalGeneric y .modal de Bootstrap) en dark El template my_profile/view.html define styles especificos para #modalGeneric con !important; aqui los re-blindamos. ============================================================ */ html[data-theme="dark"] .modal-content, html[data-theme="dark"] #modalGeneric .modal-content { background: var(--ui-bg-white) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] #modalGeneric .modal-header, html[data-theme="dark"] #modalGeneric .ui-modal-header, html[data-theme="dark"] #modalGeneric .ui-modal-header-wrap { background: var(--ui-bg-elev) !important; border-bottom-color: var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .modal-body, html[data-theme="dark"] #modalGeneric .modal-body, html[data-theme="dark"] #modalGeneric .ui-modal-body { background: var(--ui-bg-white) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .modal-footer, html[data-theme="dark"] #modalGeneric .modal-footer, html[data-theme="dark"] #modalGeneric .ui-modal-footer { background: var(--ui-bg) !important; border-top-color: var(--ui-border) !important; } /* Btn Cancelar dentro de modales (rompia con bg blanco hardcoded) */ html[data-theme="dark"] #modalGeneric .modal-footer .btn-outline-secondary, html[data-theme="dark"] #modalGeneric .modal-footer .action-close, html[data-theme="dark"] #modalGeneric .ui-modal-footer .btn-outline-secondary { background: var(--ui-bg-white) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] #modalGeneric .modal-footer .btn-outline-secondary:hover, html[data-theme="dark"] #modalGeneric .modal-footer .action-close:hover, html[data-theme="dark"] #modalGeneric .ui-modal-footer .btn-outline-secondary:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-text-muted) !important; } /* ============================================================ Inputs y labels dentro de modales/forms en dark ============================================================ */ html[data-theme="dark"] #modalGeneric label, html[data-theme="dark"] #modalGeneric .form-label, html[data-theme="dark"] .modal-body label, html[data-theme="dark"] .modal-body .form-label { color: var(--ui-text-mid) !important; } html[data-theme="dark"] #modalGeneric .ui-modal-body input[type="text"], html[data-theme="dark"] #modalGeneric .ui-modal-body input[type="email"], html[data-theme="dark"] #modalGeneric .ui-modal-body input[type="password"], html[data-theme="dark"] #modalGeneric .ui-modal-body input[type="number"], html[data-theme="dark"] #modalGeneric .ui-modal-body input[type="date"], html[data-theme="dark"] #modalGeneric .ui-modal-body input[type="datetime-local"], html[data-theme="dark"] #modalGeneric .ui-modal-body textarea, html[data-theme="dark"] #modalGeneric .ui-modal-body select, html[data-theme="dark"] .modal-body .form-control { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] #modalGeneric .ui-modal-body input::placeholder, html[data-theme="dark"] #modalGeneric .ui-modal-body textarea::placeholder { color: var(--ui-text-placeholder) !important; } /* Help text en gris */ html[data-theme="dark"] #modalGeneric .form-text, html[data-theme="dark"] .modal-body .form-text { color: var(--ui-text-muted) !important; } /* ============================================================ Select2 en dark mode ============================================================ */ html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection, html[data-theme="dark"] .select2-container .select2-selection--single, html[data-theme="dark"] .select2-container .select2-selection--multiple { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered, html[data-theme="dark"] .select2-container .select2-selection__rendered { color: var(--ui-text) !important; } html[data-theme="dark"] .select2-selection__placeholder { color: var(--ui-text-placeholder) !important; } html[data-theme="dark"] .select2-selection__arrow b { border-top-color: var(--ui-text-mid) !important; } /* Dropdown abierto */ html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .select2-search--dropdown .select2-search__field, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-search .select2-search__field { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .select2-results__option { color: var(--ui-text) !important; background: transparent !important; } html[data-theme="dark"] .select2-results__option--highlighted, html[data-theme="dark"] .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .select2-results__option[aria-selected="true"], html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected { background: rgba(34,197,94,0.18) !important; color: #86efac !important; } html[data-theme="dark"] .select2-selection__choice { background: var(--ui-bg-elev) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .select2-selection__choice__remove { color: var(--ui-text-muted) !important; } /* Tooltip */ html[data-theme="dark"] .tooltip-inner { background: var(--ui-bg-elev) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border); } /* ============================================================ FullCalendar (.fc-*) en dark mode FullCalendar usa variables --fc-* propias para pintar las celdas (--fc-page-bg-color, --fc-neutral-bg-color, etc.). Las redefinimos asi cada celda hereda el bg/border correcto sin override por celda. ============================================================ */ html[data-theme="dark"] .fc { color: var(--ui-text) !important; --fc-page-bg-color: var(--ui-bg-white); --fc-neutral-bg-color: var(--ui-bg); --fc-neutral-text-color: var(--ui-text-mid); --fc-border-color: var(--ui-border); --fc-today-bg-color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 18%, transparent); --fc-now-indicator-color: var(--ui-primary, var(--primary-blue)); --fc-event-bg-color: var(--ui-primary, var(--primary-blue)); --fc-event-border-color: var(--ui-primary, var(--primary-blue)); --fc-event-text-color: #ffffff; --fc-list-event-hover-bg-color: var(--ui-bg-elev); --fc-non-business-color: var(--ui-bg); --fc-bg-event-opacity: 0.3; --fc-highlight-color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 15%, transparent); } html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .fc .fc-col-header-cell, html[data-theme="dark"] .fc .fc-col-header-cell-cushion { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .fc-theme-standard td, html[data-theme="dark"] .fc-theme-standard th, html[data-theme="dark"] .fc-theme-standard .fc-scrollgrid, html[data-theme="dark"] .fc .fc-scrollgrid { border-color: var(--ui-border) !important; } /* Forzar bg de TODAS las celdas/tablas/contenedor del calendario. FullCalendar inyecta CSS propio para .fc-day-past/.fc-day-other/.fc-day-future con bg blanco. Cubrimos selectores anidados para mayor especificidad. */ html[data-theme="dark"] .fc, html[data-theme="dark"] .fc .fc-view-harness, html[data-theme="dark"] .fc table, html[data-theme="dark"] .fc tbody, html[data-theme="dark"] .fc .fc-scrollgrid, html[data-theme="dark"] .fc .fc-scrollgrid-section > td, html[data-theme="dark"] .fc .fc-scrollgrid-section-body > td, html[data-theme="dark"] .fc .fc-scrollgrid-sync-table, html[data-theme="dark"] .fc .fc-daygrid-body, html[data-theme="dark"] .fc .fc-timegrid-slot, html[data-theme="dark"] .fc .fc-daygrid-day, html[data-theme="dark"] .fc .fc-day, html[data-theme="dark"] .fc .fc-day-past, html[data-theme="dark"] .fc .fc-day-future, html[data-theme="dark"] .fc .fc-day-other, html[data-theme="dark"] .fc .fc-day-disabled { background: var(--ui-bg-card) !important; background-color: var(--ui-bg-card) !important; } html[data-theme="dark"] .fc .fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-daygrid-day-top a { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-top a { color: var(--ui-text-muted) !important; opacity: 0.5; } /* Dia actual */ html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today, html[data-theme="dark"] .fc .fc-day-today { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 14%, var(--ui-bg-card)) !important; } html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-day-today .fc-daygrid-day-top a { color: var(--ui-text-dark) !important; font-weight: 700; } html[data-theme="dark"] .fc .fc-day-disabled { opacity: 0.6; } html[data-theme="dark"] .fc .fc-daygrid-day:hover { background: var(--ui-bg-elev) !important; background-color: var(--ui-bg-elev) !important; } html[data-theme="dark"] .fc .fc-button-primary { background: var(--ui-bg-elev) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .fc .fc-button-primary:hover { background: var(--ui-bg-card) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--primary-blue) !important; border-color: var(--primary-blue) !important; color: #ffffff !important; } html[data-theme="dark"] .fc-event-title { color: inherit !important; } /* ============================================================ FullCalendar - redesign moderno en dark mode ============================================================ */ /* Toolbar */ html[data-theme="dark"] .fc .fc-toolbar { margin-bottom: 1.25rem !important; } html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--ui-text-dark) !important; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: -0.3px; } /* Headers de columna (LUN MAR MIE...) - chip style */ html[data-theme="dark"] .fc th { padding: 0.6rem 0 !important; background: var(--ui-bg-elev) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .fc-col-header-cell-cushion { color: var(--ui-text-mid) !important; text-transform: uppercase; letter-spacing: 1px; font-size: 0.68rem !important; font-weight: 700 !important; padding: 0.25rem 0.5rem !important; } /* Celdas dia - sutil border, hover sutil */ html[data-theme="dark"] .fc .fc-daygrid-day { transition: background-color 0.12s ease; } html[data-theme="dark"] .fc .fc-daygrid-day:hover { background: var(--ui-bg-elev) !important; } /* Numero de dia - chip discreto en esquina superior */ html[data-theme="dark"] .fc .fc-daygrid-day-top { flex-direction: row-reverse; padding: 0.35rem 0.45rem 0; } html[data-theme="dark"] .fc .fc-daygrid-day-number, html[data-theme="dark"] .fc a.fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-daygrid-day-top a, html[data-theme="dark"] .fc .fc-daygrid-day-top a:link, html[data-theme="dark"] .fc .fc-daygrid-day-top a:visited, html[data-theme="dark"] .fc .fc-daygrid-day-top a:hover { color: #f1f5f9 !important; font-weight: 700 !important; font-size: 0.85rem !important; padding: 0.15rem 0.45rem !important; border-radius: 50px !important; text-decoration: none !important; transition: all 0.15s ease !important; } html[data-theme="dark"] .fc .fc-col-header-cell-cushion, html[data-theme="dark"] .fc a.fc-col-header-cell-cushion, html[data-theme="dark"] .fc .fc-col-header-cell a { color: #cbd5e1 !important; text-decoration: none !important; font-weight: 700 !important; } /* Refuerzo dia actual */ html[data-theme="dark"] .fc .fc-day-today .fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-day-today .fc-daygrid-day-top a { color: #fff !important; background: var(--ui-primary, var(--primary-blue, #2563eb)) !important; } /* Dias de otro mes claramente atenuados pero visibles */ html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-top a { color: #64748b !important; opacity: 0.7 !important; } html[data-theme="dark"] .fc .fc-daygrid-day-number:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--ui-text-muted) !important; opacity: 0.45; } /* Hoy - pelota brand redondeada alrededor del numero */ html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today { background: transparent !important; } html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background: var(--ui-primary, var(--primary-blue)) !important; color: #ffffff !important; font-weight: 800; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 50%, transparent); } /* Indicador "+N mas" tipo pill */ html[data-theme="dark"] .fc .fc-daygrid-more-link { color: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 70%, white 30%) !important; font-weight: 700; font-size: 0.72rem !important; padding: 0.15rem 0.5rem; border-radius: 50px; background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 14%, transparent); } html[data-theme="dark"] .fc .fc-daygrid-more-link:hover { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 25%, transparent) !important; color: #ffffff !important; } /* Eventos como pills modernas */ html[data-theme="dark"] .fc-daygrid-event { border-radius: 50px !important; padding: 0.18rem 0.6rem !important; margin: 0.1rem 0.35rem !important; border: none !important; font-size: 0.72rem !important; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.20); } html[data-theme="dark"] .fc-daygrid-event:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.30); } /* Lineas internas */ html[data-theme="dark"] .fc-theme-standard td, html[data-theme="dark"] .fc-theme-standard th, html[data-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: var(--ui-border-light) !important; } /* ============================================================ Tabla de Horario - cards de materia (.clase-card) con bg pastel. El bg pastel se mantiene como acento visual; forzamos TODO el texto interno a OSCURO para que se pueda leer. ============================================================ */ html[data-theme="dark"] .clase-card, html[data-theme="dark"] .clase-card *, html[data-theme="dark"] .clase-titulo, html[data-theme="dark"] .clase-detalle, html[data-theme="dark"] .clase-aula, html[data-theme="dark"] .clase-horario, html[data-theme="dark"] .clase-profesor { color: #0f172a !important; } html[data-theme="dark"] .clase-card .clase-horario { background: rgba(255,255,255,0.85) !important; } /* La columna de turno (1, 2, 3...) que tenia bg primary brand */ html[data-theme="dark"] .turno-cell, html[data-theme="dark"] .horario-table td[class*="turno"] { color: #ffffff !important; } /* ============================================================ Contact badges (correos, telefonos) en cards de companeros/profesor El .contact-badge default tenia bg claro y color claro en dark = invisible ============================================================ */ html[data-theme="dark"] .contact-badge, html[data-theme="dark"] .email-badge, html[data-theme="dark"] .av-profesor-contact-item, html[data-theme="dark"] [class*="profesor-contact"] { background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(59,130,246,0.10)) !important; color: #bfdbfe !important; border: none !important; border-radius: 50px !important; padding: 0.32rem 0.75rem !important; font-weight: 600; letter-spacing: 0.1px; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.30), 0 1px 2px rgba(0,0,0,0.20) !important; transition: all 0.18s ease; } html[data-theme="dark"] .contact-badge i, html[data-theme="dark"] .email-badge i, html[data-theme="dark"] .av-profesor-contact-item i { color: #60a5fa !important; margin-right: 0.15rem; } html[data-theme="dark"] .contact-badge:hover, html[data-theme="dark"] .email-badge:hover, html[data-theme="dark"] .av-profesor-contact-item:hover { background: linear-gradient(135deg, rgba(96,165,250,0.32), rgba(59,130,246,0.20)) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.60), 0 4px 12px rgba(59,130,246,0.30) !important; transform: translateY(-1px); } /* Texto del nombre del profesor en dark */ html[data-theme="dark"] .av-profesor-name { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .contact-badge i, html[data-theme="dark"] .email-badge i, html[data-theme="dark"] .contact-badge .fa, html[data-theme="dark"] .email-badge .fa { color: #60a5fa !important; } html[data-theme="dark"] .contact-badge:hover { background: rgba(96, 165, 250, 0.28) !important; color: #bfdbfe !important; border-color: rgba(96, 165, 250, 0.60) !important; } /* Whatsapp mantiene verde tinted */ html[data-theme="dark"] .contact-badge.whatsapp { background: rgba(34,197,94,0.18) !important; color: #86efac !important; border-color: rgba(34,197,94,0.40) !important; } html[data-theme="dark"] .contact-badge.whatsapp:hover { background: rgba(34,197,94,0.28) !important; color: #bbf7d0 !important; } /* Email badge dentro de .representante-info (bg amarillo): texto oscuro */ html[data-theme="dark"] .representante-info .contact-badge, html[data-theme="dark"] .representante-info .email-badge { background: rgba(255,255,255,0.85) !important; color: #422f00 !important; border-color: rgba(0,0,0,0.10) !important; } /* ============================================================ Companeros: cards de representante con bg amarillo pastel Texto debe quedar OSCURO sobre el pastel claro. ============================================================ */ html[data-theme="dark"] [class*="representante-card"][style*="background"], html[data-theme="dark"] .representante-info, html[data-theme="dark"] [class*="rep-box"][style*="background"], html[data-theme="dark"] [style*="background:#fef9c3"], html[data-theme="dark"] [style*="background: #fef9c3"], html[data-theme="dark"] [style*="background:#fffbeb"], html[data-theme="dark"] [style*="background: #fffbeb"] { color: #422f00 !important; } html[data-theme="dark"] [class*="representante-card"][style*="background"] *, html[data-theme="dark"] .representante-info * { color: #422f00 !important; } /* ============================================================ Filtros pill (.av-filter-*, btn-pill, .filter-chip) Inactivos se ven invisibles en dark cuando usan tonos pasteles. ============================================================ */ html[data-theme="dark"] .av-filter-pill, html[data-theme="dark"] .filter-chip, html[data-theme="dark"] .filter-pill { background: var(--ui-bg-elev) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .av-filter-pill.active, html[data-theme="dark"] .filter-chip.active, html[data-theme="dark"] .filter-pill.active { background: var(--ui-primary) !important; color: #ffffff !important; border-color: var(--ui-primary) !important; } /* Chips de estado en tablas (PENDIENTE, PAGADO, VENCIDO, etc.) */ html[data-theme="dark"] .estado-pendiente, html[data-theme="dark"] .badge-pendiente, html[data-theme="dark"] .chip-warning, html[data-theme="dark"] .badge-status.status-warning, html[data-theme="dark"] [class*="estado"][class*="pendiente"] { background: rgba(251, 191, 36, 0.18) !important; color: #fde68a !important; border: 1px solid rgba(251, 191, 36, 0.40) !important; } html[data-theme="dark"] .badge-status.status-warning i, html[data-theme="dark"] .estado-pendiente i { color: #fbbf24 !important; } html[data-theme="dark"] .estado-pagado, html[data-theme="dark"] .badge-pagado, html[data-theme="dark"] .chip-success, html[data-theme="dark"] .badge-status.status-success { background: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; border: 1px solid rgba(34, 197, 94, 0.40) !important; } html[data-theme="dark"] .badge-status.status-success i, html[data-theme="dark"] .estado-pagado i { color: #4ade80 !important; } html[data-theme="dark"] .estado-vencido, html[data-theme="dark"] .badge-vencido, html[data-theme="dark"] .chip-danger, html[data-theme="dark"] .badge-status.status-danger { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.40) !important; } html[data-theme="dark"] .badge-status.status-info { background: rgba(96, 165, 250, 0.18) !important; color: #93c5fd !important; border: 1px solid rgba(96, 165, 250, 0.40) !important; } /* Boton "Pagos" en tabla de pensiones - usa Bootstrap btn-light-primary */ html[data-theme="dark"] .btn-pagos, html[data-theme="dark"] .btn-detail, html[data-theme="dark"] .btn-detail-toggle, html[data-theme="dark"] .btn-light-primary, html[data-theme="dark"] [class*="btn-pago"] { background: rgba(96, 165, 250, 0.18) !important; color: #93c5fd !important; border: 1px solid rgba(96, 165, 250, 0.40) !important; } html[data-theme="dark"] .btn-pagos i, html[data-theme="dark"] .btn-detail-toggle i, html[data-theme="dark"] .btn-light-primary i { color: #60a5fa !important; } html[data-theme="dark"] .btn-pagos:hover, html[data-theme="dark"] .btn-detail:hover, html[data-theme="dark"] .btn-detail-toggle:hover, html[data-theme="dark"] .btn-light-primary:hover { background: #3b82f6 !important; color: #ffffff !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .btn-detail-toggle:hover i, html[data-theme="dark"] .btn-light-primary:hover i { color: #ffffff !important; } /* ============================================================ Flatpickr (datepicker) en dark mode ============================================================ */ html[data-theme="dark"] .flatpickr-calendar { background: var(--ui-bg-white) !important; border: 1px solid var(--ui-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .flatpickr-calendar.arrowTop::before, html[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ui-border) !important; } html[data-theme="dark"] .flatpickr-calendar.arrowBottom::before, html[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--ui-border) !important; } /* Header con mes/anio */ html[data-theme="dark"] .flatpickr-months, html[data-theme="dark"] .flatpickr-month { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; fill: var(--ui-text-dark) !important; } html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, html[data-theme="dark"] .flatpickr-current-month input.cur-year, html[data-theme="dark"] .flatpickr-monthDropdown-months { background: transparent !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .flatpickr-monthDropdown-month { background: var(--ui-bg-white) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--ui-text-dark) !important; background: var(--ui-bg) !important; border-radius: 4px; } html[data-theme="dark"] .flatpickr-prev-month, html[data-theme="dark"] .flatpickr-next-month { color: var(--ui-text) !important; fill: var(--ui-text) !important; } html[data-theme="dark"] .flatpickr-prev-month:hover, html[data-theme="dark"] .flatpickr-next-month:hover { color: var(--primary-blue, var(--ui-text-dark)) !important; fill: var(--primary-blue, var(--ui-text-dark)) !important; } html[data-theme="dark"] .flatpickr-prev-month svg, html[data-theme="dark"] .flatpickr-next-month svg { fill: currentColor !important; } /* Cabecera dias de semana */ html[data-theme="dark"] .flatpickr-weekdays, html[data-theme="dark"] .flatpickr-weekday { background: var(--ui-bg-elev) !important; color: var(--ui-text-mid) !important; } /* Dias */ html[data-theme="dark"] .flatpickr-days, html[data-theme="dark"] .dayContainer { background: var(--ui-bg-white) !important; } html[data-theme="dark"] .flatpickr-day { color: var(--ui-text) !important; background: transparent !important; border-color: transparent !important; } html[data-theme="dark"] .flatpickr-day:hover, html[data-theme="dark"] .flatpickr-day.prevMonthDay:hover, html[data-theme="dark"] .flatpickr-day.nextMonthDay:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-bg-elev) !important; } html[data-theme="dark"] .flatpickr-day.today { border-color: var(--primary-blue) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .flatpickr-day.today:hover { background: var(--primary-blue) !important; color: #ffffff !important; } html[data-theme="dark"] .flatpickr-day.selected, html[data-theme="dark"] .flatpickr-day.selected:hover, html[data-theme="dark"] .flatpickr-day.startRange, html[data-theme="dark"] .flatpickr-day.endRange { background: var(--primary-blue) !important; border-color: var(--primary-blue) !important; color: #ffffff !important; } html[data-theme="dark"] .flatpickr-day.inRange { background: color-mix(in srgb, var(--primary-blue) 25%, transparent) !important; border-color: color-mix(in srgb, var(--primary-blue) 25%, transparent) !important; box-shadow: -5px 0 0 color-mix(in srgb, var(--primary-blue) 25%, transparent), 5px 0 0 color-mix(in srgb, var(--primary-blue) 25%, transparent) !important; } html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay, html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--ui-text-muted) !important; opacity: 0.4; } /* Footer / confirm button */ html[data-theme="dark"] .flatpickr-confirm { background: var(--primary-blue) !important; color: #ffffff !important; } /* Alerts (mantienen semantica con bg tinted al 10%) */ html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.10) !important; border-color: rgba(245,158,11,0.35) !important; color: #fcd34d !important; } html[data-theme="dark"] .alert-info { background: rgba(14,165,233,0.10) !important; border-color: rgba(14,165,233,0.35) !important; color: #7dd3fc !important; } html[data-theme="dark"] .alert-success { background: rgba(34,197,94,0.10) !important; border-color: rgba(34,197,94,0.35) !important; color: #86efac !important; } html[data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.10) !important; border-color: rgba(239,68,68,0.35) !important; color: #fca5a5 !important; } /* Accesos rapidos del dashboard */ html[data-theme="dark"] .chart-card a[style*="background"], html[data-theme="dark"] .chart-card .rounded-3[style*="background"] { background: var(--ui-bg-elev) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .card-header-compact, html[data-theme="dark"] .rep-tareas-header { background: transparent !important; color: var(--ui-text); } /* ============== TOGGLE BUTTON + POPOVER ============== */ .ui-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary-600, #2563eb) 25%, transparent); background: url("data:image/svg+xml;utf8,"), linear-gradient(135deg, color-mix(in srgb, var(--color-primary-600, #2563eb) 12%, transparent), color-mix(in srgb, var(--color-primary-400, #60a5fa) 6%, transparent)); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--color-primary-600, #2563eb); cursor: pointer; font-size: 1.05rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.4); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .ui-theme-toggle:hover { border-color: color-mix(in srgb, var(--color-primary-600, #2563eb) 50%, transparent); color: var(--color-primary-700, #1d4ed8); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-600, #2563eb) 20%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.5); } html[data-theme="dark"] .ui-theme-toggle { background: radial-gradient(circle at 30% 30%, rgba(252, 211, 77, 0.35) 0%, transparent 60%), linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.08)) !important; border-color: rgba(251, 191, 36, 0.45) !important; color: #fcd34d !important; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.10), 0 0 12px rgba(251, 191, 36, 0.18) !important; } html[data-theme="dark"] .ui-theme-toggle:hover { background: radial-gradient(circle at 30% 30%, rgba(252, 211, 77, 0.55) 0%, transparent 65%), linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.18)) !important; border-color: rgba(251, 191, 36, 0.7) !important; color: #fde68a !important; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.20), 0 0 18px rgba(251, 191, 36, 0.35) !important; } .ui-theme-toggle .icon-light { display: inline-block; position: relative; z-index: 1; } .ui-theme-toggle .icon-dark { display: none; position: relative; z-index: 1; } html[data-theme="dark"] .ui-theme-toggle .icon-light { display: none; } html[data-theme="dark"] .ui-theme-toggle .icon-dark { display: inline-block; } .ui-theme-popover { position: absolute; top: calc(100% + 8px); right: 0; background: var(--ui-bg-white, #fff); border: 1px solid var(--ui-border, #e2e8f0); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,0.18); padding: 0.55rem; display: none; z-index: 1090; min-width: 180px; } .ui-theme-popover.show { display: block; } .ui-theme-popover-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ui-text-muted, #94a3b8); padding: 0.25rem 0.5rem; margin-bottom: 0.25rem; } .ui-theme-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; font-size: 0.8rem; color: var(--ui-text, #1e293b); background: transparent; border: none; width: 100%; text-align: left; transition: background 0.15s ease; } .ui-theme-option:hover { background: var(--ui-bg, #f8fafc); } .ui-theme-option.is-active { background: var(--ui-primary-bg, #eff6ff); color: var(--ui-primary); font-weight: 600; } .ui-theme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ui-bg-white, #fff); box-shadow: 0 0 0 1px rgba(15,23,42,0.15); flex-shrink: 0; } .ui-theme-swatch.swatch-light { background: linear-gradient(135deg, #ffffff 50%, #f1f5f9 50%); } .ui-theme-swatch.swatch-dark { background: linear-gradient(135deg, #2a1c25, #1f131a); } /* Welcome banner (dashboard representante / otros) - el inline gradient usa --ui-primary-bg que es un tono CLARO definido por el admin. En modo oscuro lo pisamos por completo. */ html[data-theme="dark"] .welcome-banner { background: linear-gradient(135deg, var(--ui-bg-white) 0%, var(--ui-bg-elev) 60%, var(--ui-bg-white) 100%) !important; border: 1px solid var(--ui-border) !important; } html[data-theme="dark"] .welcome-banner h1 { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .welcome-banner p, html[data-theme="dark"] .welcome-banner .text-primary { color: var(--ui-text-mid) !important; opacity: 1 !important; } html[data-theme="dark"] .welcome-banner .badge.bg-white { background: var(--ui-bg) !important; color: var(--ui-text-dark) !important; border: 1px solid var(--ui-border) !important; } html[data-theme="dark"] .welcome-banner .badge.bg-white i { color: var(--ui-text-mid) !important; } /* Burbujas decorativas: visibles como en banners claros (acentos vivos sobre el dark) */ html[data-theme="dark"] .welcome-banner .rounded-circle { opacity: 0.22 !important; filter: none; } /* Stat cards dentro del banner (Representados / Deuda / Actividades) */ html[data-theme="dark"] .rep-stat-card, html[data-theme="dark"] .alu-stat-card { background: var(--ui-bg-card) !important; border: none !important; color: var(--ui-text) !important; } html[data-theme="dark"] .rep-stat-card .rep-stat-label, html[data-theme="dark"] .alu-stat-card .alu-stat-label { color: var(--ui-text-mid) !important; } /* Numero grande: el brand oscuro queda invisible sobre bg oscuro. Lo aclaramos 40% con color-mix para mantener semantica y subir contraste. Aplica a stat cards de representante (.rep-stat-*) y de estudiante (.alu-stat-*) */ html[data-theme="dark"] .rep-stat-card .rep-stat-num, html[data-theme="dark"] .alu-stat-card .alu-stat-num { color: color-mix(in srgb, var(--rep-stat-color, var(--alu-stat-color, var(--ui-primary))) 60%, white 40%) !important; } /* Icono cuadrado: subir contraste tambien */ html[data-theme="dark"] .rep-stat-card .rep-stat-icon, html[data-theme="dark"] .alu-stat-card .alu-stat-icon { background: color-mix(in srgb, var(--rep-stat-color, var(--alu-stat-color, var(--ui-primary))) 18%, transparent) !important; color: color-mix(in srgb, var(--rep-stat-color, var(--alu-stat-color, var(--ui-primary))) 60%, white 40%) !important; } /* Silueta detras: visible como acento decorativo */ html[data-theme="dark"] .alu-stat-card .alu-stat-bg-icon { opacity: 0.15 !important; } /* ============================================================ Racha del estudiante (.racha-badge) - el bg/texto vienen de CSS vars inline (--racha-bg, --racha-text) con tonos pasteles que en dark generan un bloque blanco horrible. Pisamos con naranja tinted para mantener semantica "fuego/racha". ============================================================ */ html[data-theme="dark"] .racha-badge { background: rgba(251, 146, 60, 0.18) !important; color: #fdba74 !important; border: 1px solid rgba(251, 146, 60, 0.40); box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .racha-badge::after { color: #fb923c !important; opacity: 0.15 !important; } html[data-theme="dark"] .racha-badge .racha-icon { background: rgba(251, 146, 60, 0.20) !important; color: #fdba74 !important; } html[data-theme="dark"] .racha-badge .racha-label, html[data-theme="dark"] .racha-badge .racha-dias, html[data-theme="dark"] .racha-badge .racha-nombre, html[data-theme="dark"] .racha-badge .racha-meta { color: #fdba74 !important; } html[data-theme="dark"] .racha-badge .racha-label, html[data-theme="dark"] .racha-badge .racha-nombre, html[data-theme="dark"] .racha-badge .racha-meta { opacity: 0.85; } /* Silueta de icono detras: visible como acento (no fantasma sucio) */ html[data-theme="dark"] .rep-stat-card .rep-stat-bg-icon { opacity: 0.15 !important; } /* Chip "Periodo:" tiene bg-white hardcoded - en dark le damos presencia clara */ html[data-theme="dark"] .welcome-banner .badge { background: rgba(255,255,255,0.10) !important; color: var(--ui-text-dark) !important; border: 1px solid rgba(255,255,255,0.18) !important; backdrop-filter: blur(8px); } html[data-theme="dark"] .welcome-banner .badge i { color: var(--ui-text-dark) !important; } /* ============================================================ .page-header — banner identidad con burbujas En dark: fondo VINO OSCURO uniforme + textos BLANCOS. Las burbujas decorativas (rgba blanco/colores semi-transparentes) destacan visualmente mucho mejor sobre el fondo oscuro que sobre el claro. ============================================================ */ html[data-theme="dark"] .page-header { background: linear-gradient(135deg, var(--ui-bg-white) 0%, var(--ui-bg-elev) 55%, var(--ui-bg-white) 100%) !important; border: 1px solid var(--ui-border) !important; } html[data-theme="dark"] .page-header::before { background: var(--ui-text-dark) !important; opacity: 0.05 !important; } html[data-theme="dark"] .page-header::after { background: #22c55e !important; opacity: 0.12 !important; } html[data-theme="dark"] .page-header .page-title h3, html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header h2, html[data-theme="dark"] .page-header h3, html[data-theme="dark"] .page-header h4 { color: var(--ui-text-dark) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .page-header .page-title p, html[data-theme="dark"] .page-header p { color: var(--ui-text) !important; opacity: 0.9 !important; } /* Page header icon - usa el vino del sidebar como acento solido y el icono en blanco. Mantiene continuidad visual con el sidebar/brand. */ html[data-theme="dark"] .page-header-icon { background: linear-gradient(135deg, var(--primary-blue), var(--color-primary-700, var(--primary-blue))) !important; color: #ffffff !important; border: 1.5px solid rgba(255,255,255,0.18) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important; } html[data-theme="dark"] .page-header-icon i { color: #ffffff !important; } /* Burbujas decorativas del page-header banner: bajar opacidad y difuminar */ html[data-theme="dark"] .page-header-bubbles span, html[data-theme="dark"] .page-header::before, html[data-theme="dark"] .page-header::after { opacity: 0.06 !important; filter: blur(2px); } /* ============================================================ Info cards reutilizables (.rep-info-card, .ja-detalle-card, etc.) Usaban --ui-primary-bg que ahora apunta a --ui-bg-elev en dark. Aseguramos color de texto y headings legibles. ============================================================ */ html[data-theme="dark"] .rep-info-card, html[data-theme="dark"] .ja-detalle-card, html[data-theme="dark"] .ja-detalle-obs, html[data-theme="dark"] .adm-info-card, html[data-theme="dark"] .info-bar, html[data-theme="dark"] .info-banner, html[data-theme="dark"] [class*="info-card"] { background: var(--ui-bg-elev) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .rep-info-card h5, html[data-theme="dark"] .adm-info-card h5, html[data-theme="dark"] .info-bar h5, html[data-theme="dark"] .info-banner h5, html[data-theme="dark"] [class*="info-card"] h5, html[data-theme="dark"] [class*="info-card"] h6 { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .rep-info-card p, html[data-theme="dark"] .rep-info-card span, html[data-theme="dark"] [class*="info-card"] p, html[data-theme="dark"] [class*="info-card"] span, html[data-theme="dark"] .info-bar p, html[data-theme="dark"] .info-banner p { color: var(--ui-text) !important; } html[data-theme="dark"] .rep-info-card b, html[data-theme="dark"] .rep-info-card strong, html[data-theme="dark"] [class*="info-card"] b, html[data-theme="dark"] [class*="info-card"] strong { color: var(--ui-text-dark) !important; } /* Stat boxes del page-header (counters tipo "0 SOLICITUDES") */ html[data-theme="dark"] .page-header .page-stat-box, html[data-theme="dark"] .page-header-stats .page-stat-box { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; backdrop-filter: blur(4px); } html[data-theme="dark"] .page-header .page-stat-value { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .page-header .page-stat-label { color: var(--ui-text) !important; opacity: 0.85; } /* Search box dentro del page-header */ html[data-theme="dark"] .page-header .ui-search-box, html[data-theme="dark"] .page-header .ui-search-input { background: rgba(255,255,255,0.06) !important; color: var(--ui-text-dark) !important; border-color: rgba(255,255,255,0.12) !important; } html[data-theme="dark"] .page-header .ui-search-input::placeholder { color: var(--ui-text-mid) !important; opacity: 0.7; } /* Credencial #idCard: el blindaje completo vive en identificacion/view.html (mayor especificidad por cascade order). Aqui solo dejamos el reset de color para que los iconos hereden bien antes de que view.html cargue. */ html[data-theme="dark"] #idCard, html[data-theme="dark"] #idCard * { color: inherit !important; } /* Botones de accion en cards (.btn-action-add/edit/delete) - usados en Mi Perfil y otros CRUDs. En claro usan tonos pasteles; en dark los convertimos en tinted backgrounds con buen contraste y mantienen su semantica (verde=add, ambar=edit, rojo=delete). */ html[data-theme="dark"] .btn-action { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .btn-action-add { background: rgba(34, 197, 94, 0.16) !important; border-color: rgba(34, 197, 94, 0.55) !important; color: #4ade80 !important; } html[data-theme="dark"] .btn-action-add i, html[data-theme="dark"] .btn-action-add .fa, html[data-theme="dark"] .btn-action-add [class*="fa-"] { color: #4ade80 !important; } html[data-theme="dark"] .btn-action-add:hover { background: #22c55e !important; border-color: #22c55e !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(34,197,94,0.30) !important; } html[data-theme="dark"] .btn-action-add:hover i, html[data-theme="dark"] .btn-action-add:hover .fa, html[data-theme="dark"] .btn-action-add:hover [class*="fa-"] { color: #ffffff !important; } html[data-theme="dark"] .btn-action-edit { background: rgba(251, 191, 36, 0.16) !important; border-color: rgba(251, 191, 36, 0.55) !important; color: #fbbf24 !important; } html[data-theme="dark"] .btn-action-edit i, html[data-theme="dark"] .btn-action-edit .fa, html[data-theme="dark"] .btn-action-edit [class*="fa-"] { color: #fbbf24 !important; } html[data-theme="dark"] .btn-action-edit:hover { background: #fbbf24 !important; border-color: #fbbf24 !important; color: #422f00 !important; box-shadow: 0 4px 12px rgba(251,191,36,0.30) !important; } html[data-theme="dark"] .btn-action-edit:hover i, html[data-theme="dark"] .btn-action-edit:hover .fa, html[data-theme="dark"] .btn-action-edit:hover [class*="fa-"] { color: #422f00 !important; } html[data-theme="dark"] .btn-action-delete { background: rgba(239, 68, 68, 0.16) !important; border-color: rgba(239, 68, 68, 0.55) !important; color: #f87171 !important; } html[data-theme="dark"] .btn-action-delete i, html[data-theme="dark"] .btn-action-delete .fa, html[data-theme="dark"] .btn-action-delete [class*="fa-"] { color: #f87171 !important; } html[data-theme="dark"] .btn-action-delete:hover { background: #ef4444 !important; border-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(239,68,68,0.30) !important; } html[data-theme="dark"] .btn-action-delete:hover i, html[data-theme="dark"] .btn-action-delete:hover .fa, html[data-theme="dark"] .btn-action-delete:hover [class*="fa-"] { color: #ffffff !important; } /* Mi Perfil: tabs activas con verde claro (rompen contraste en dark) */ html[data-theme="dark"] .profile-nav { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .profile-nav-link { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .profile-nav-link:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .profile-nav-link.active { background: rgba(34, 197, 94, 0.15) !important; color: #86efac !important; border-bottom-color: #22c55e !important; } html[data-theme="dark"] .profile-nav-link.active i { color: #4ade80 !important; } /* Info items dentro de cards de perfil (labels, values, divisores) */ html[data-theme="dark"] .info-label { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .info-label i { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .info-value { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .info-item { border-bottom-color: var(--ui-border-light) !important; } /* Tablas administrativas (.adm-table) - forzamos el bg correcto en dark y suavizamos el wrapper para evitar el efecto "marco blanco" en el empty state. */ html[data-theme="dark"] .adm-table { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; box-shadow: none !important; } html[data-theme="dark"] .adm-table thead th { background: linear-gradient(135deg, var(--ui-bg-elev), var(--ui-bg-card)) !important; color: var(--ui-text-dark) !important; border-bottom-color: var(--ui-border) !important; } html[data-theme="dark"] .adm-table tbody td { color: var(--ui-text) !important; border-bottom-color: var(--ui-border-light) !important; } html[data-theme="dark"] .adm-table tbody tr:hover { background: var(--ui-bg-elev) !important; } /* ============================================================ Dashboard representante - "Mis Representados" El boton "Ver Rendimiento" y el numero "Promedio" usan --ui-primary-dark (vino brand) sobre --ui-primary-bg (que en dark se redirige a --ui-bg-elev). Resultado: vino sobre vino tinted = invisible. Reforzamos contraste con override puntual. ============================================================ */ html[data-theme="dark"] .chart-card a.btn[style*="background: var(--ui-primary-bg)"], html[data-theme="dark"] .chart-card a.btn[style*="background:var(--ui-primary-bg)"] { background: var(--ui-primary, var(--primary-blue)) !important; color: #ffffff !important; } html[data-theme="dark"] .chart-card a.btn[style*="background: var(--ui-primary-bg)"] i, html[data-theme="dark"] .chart-card a.btn[style*="background:var(--ui-primary-bg)"] i { color: #ffffff !important; } /* Promedio numero - usa color: var(--ui-primary-dark) que es vino oscuro */ html[data-theme="dark"] .chart-card strong[style*="color: var(--ui-primary-dark)"], html[data-theme="dark"] .chart-card strong[style*="color:var(--ui-primary-dark)"] { color: #93c5fd !important; } /* Empty states dentro de tablas (.adm-empty, "Sin solicitudes") Se MEZCLAN con la tabla padre, borde dashed muy sutil */ html[data-theme="dark"] .adm-empty, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .no-results, html[data-theme="dark"] .anuncio-empty-expert, html[data-theme="dark"] [class*="empty-expert"], html[data-theme="dark"] [class*="empty-state"] { background: var(--ui-bg-white) !important; border: 2px dashed var(--ui-border) !important; color: var(--ui-text) !important; } html[data-theme="dark"] .adm-empty i, html[data-theme="dark"] .empty-state i, html[data-theme="dark"] .empty-icon-expert { color: var(--ui-text-muted) !important; opacity: 0.5; background: var(--ui-bg-elev) !important; } html[data-theme="dark"] .adm-empty h4, html[data-theme="dark"] .adm-empty h5, html[data-theme="dark"] .adm-empty h6, html[data-theme="dark"] .empty-state h4, html[data-theme="dark"] .empty-state h5, html[data-theme="dark"] .empty-state h6, html[data-theme="dark"] .empty-title-expert, html[data-theme="dark"] [class*="empty-title"] { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .adm-empty p, html[data-theme="dark"] .empty-state p, html[data-theme="dark"] [class*="empty-text"] { color: var(--ui-text-mid) !important; } /* ============================================================ Paginador (.pagination, .page-link, .page-item) Los links ANTERIOR/SIGUIENTE quedan invisibles en dark ============================================================ */ html[data-theme="dark"] .pagination, html[data-theme="dark"] [class*="pagination"] { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; } /* Links ANTERIOR / SIGUIENTE: celeste tinted */ html[data-theme="dark"] .page-link, html[data-theme="dark"] [class*="page-link"] { background: rgba(96, 165, 250, 0.12) !important; color: #93c5fd !important; border-color: rgba(96, 165, 250, 0.30) !important; font-weight: 600; } html[data-theme="dark"] .page-link:hover, html[data-theme="dark"] [class*="page-link"]:hover { background: rgba(96, 165, 250, 0.25) !important; color: #bfdbfe !important; border-color: rgba(96, 165, 250, 0.55) !important; } /* Activo en verde success (parametrizado) */ html[data-theme="dark"] .page-item.active .page-link { background: var(--ui-success, #22c55e) !important; border-color: var(--ui-success, #22c55e) !important; color: #ffffff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-success, #22c55e) 35%, transparent) !important; } html[data-theme="dark"] .page-item.disabled .page-link { background: var(--ui-bg-white) !important; color: var(--ui-text-muted) !important; border-color: var(--ui-border) !important; opacity: 0.5; } html[data-theme="dark"] .adm-empty h5, html[data-theme="dark"] .adm-empty h6, html[data-theme="dark"] .empty-state h5, html[data-theme="dark"] .empty-state h6 { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .adm-empty p, html[data-theme="dark"] .empty-state p { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .adm-empty-icon, html[data-theme="dark"] .empty-state-icon { color: var(--ui-text-muted) !important; opacity: 0.5; } /* Breadcrumbs justo arriba del banner (Inicio / Representante / Anuncios) */ html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item a { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .breadcrumb-item.active { color: var(--ui-text-dark) !important; } /* Boton Regresar (.breadcrumb-back) */ html[data-theme="dark"] .breadcrumb-back { background: var(--ui-bg-white) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .breadcrumb-back:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-text-muted) !important; } html[data-theme="dark"] .breadcrumb-back i { color: var(--ui-text-mid) !important; } /* ============================================================ .nav-tooltip — tooltip del sidebar colapsado (siempre oscuro) .av-tab-tip — tooltip de tabs del aula virtual En dark el default era usar --ui-text-dark (que es blanco), lo que dejaba un tooltip blanco con texto blanco. ============================================================ */ html[data-theme="dark"] .nav-tooltip, html[data-theme="dark"] .av-tab-tip { background: #0f172a !important; color: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important; } html[data-theme="dark"] .nav-tooltip::before { border-color: transparent #0f172a transparent transparent !important; } html[data-theme="dark"] .av-tab-tip::before { border-color: transparent transparent #0f172a transparent !important; } /* ============================================================ Popup flotante del nav-group (sidebar colapsado en hover) ============================================================ */ html[data-theme="dark"] .sidebar.collapsed .nav-group .nav-group-items { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .sidebar.collapsed .nav-popup-header { background: linear-gradient(135deg, var(--ui-bg-elev) 0%, var(--ui-bg-card) 100%) !important; color: var(--ui-text-dark) !important; border-bottom-color: var(--ui-border) !important; } html[data-theme="dark"] .sidebar.collapsed .nav-popup-header span, html[data-theme="dark"] .sidebar.collapsed .nav-popup-header { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .sidebar.collapsed .nav-group .nav-group-items .nav-link { color: var(--ui-text) !important; } html[data-theme="dark"] .sidebar.collapsed .nav-group .nav-group-items .nav-link:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .sidebar.collapsed .nav-group .nav-group-items .nav-link.active { background: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; border-left-color: #22c55e !important; } html[data-theme="dark"] .sidebar.collapsed .nav-group .nav-group-items .nav-link.active .nav-icon { color: #22c55e !important; } /* ============================================================ Header — botones pill (Periodo, Notificaciones) + dropdowns ============================================================ */ html[data-theme="dark"] .ui-header-btn, html[data-theme="dark"] .ui-header-icon-btn { background: var(--ui-bg-elev) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .ui-header-btn i, html[data-theme="dark"] .ui-header-icon-btn i { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .ui-header-btn:hover, html[data-theme="dark"] .ui-header-icon-btn:hover { background: var(--ui-bg-card) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-text-muted) !important; } html[data-theme="dark"] .ui-header-btn:hover i, html[data-theme="dark"] .ui-header-icon-btn:hover i { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .ui-header-menu { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] .ui-header-menu-title { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .ui-header-menu-title i { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .ui-header-menu-divider { border-top-color: var(--ui-border) !important; } html[data-theme="dark"] .ui-header-menu-item { color: var(--ui-text) !important; } html[data-theme="dark"] .ui-header-menu-item i { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .ui-header-menu-item:hover, html[data-theme="dark"] .ui-header-menu-item.is-active { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .ui-header-menu-item:hover i, html[data-theme="dark"] .ui-header-menu-item.is-active i { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .ui-header-menu-counter { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } /* User profile dropdown (Mariuxi Abad / Representante) */ html[data-theme="dark"] .user-profile { border-color: var(--ui-border) !important; } html[data-theme="dark"] .user-profile .user-name { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .user-profile .user-role { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .user-dropdown { background: var(--ui-bg-white) !important; border-color: var(--ui-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] .dropdown-item-custom { color: var(--ui-text) !important; } html[data-theme="dark"] .dropdown-item-custom:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .dropdown-item-custom.is-active { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .dropdown-divider-custom { border-color: var(--ui-border) !important; } /* Bootstrap tooltip generico (el "Cambiar periodo academico" del title=) */ html[data-theme="dark"] .tooltip-inner { background: #0f172a !important; color: #fff !important; border: 1px solid var(--ui-border) !important; } html[data-theme="dark"] .tooltip .tooltip-arrow::before { border-color: #0f172a !important; } /* Footer - subir contraste */ html[data-theme="dark"] .footer-text, html[data-theme="dark"] .footer-institution, html[data-theme="dark"] .footer-credit, html[data-theme="dark"] .footer-credit a, html[data-theme="dark"] .footer-time { color: var(--ui-text) !important; } html[data-theme="dark"] .footer-institution i, html[data-theme="dark"] .footer-credit i { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .footer-highlight { color: var(--ui-text-dark) !important; font-weight: 600; } html[data-theme="dark"] .date-chip, html[data-theme="dark"] .time-chip { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; border: 1px solid var(--ui-border) !important; } html[data-theme="dark"] .date-chip i, html[data-theme="dark"] .time-chip-ico, html[data-theme="dark"] .time-chip-ico i { color: var(--ui-text-dark) !important; } /* ============================================================ AULA VIRTUAL — PROFESOR (modo oscuro) Cubre: container, tabs, banner materia, navegacion semanas, cards de semana, secciones, paginacion footer. ============================================================ */ /* --- Contenedor principal y body --- */ html[data-theme="dark"] .av-dashboard-container, html[data-theme="dark"] .av-content-area, html[data-theme="dark"] .av-content-body, html[data-theme="dark"] .av-grade-content, html[data-theme="dark"] .av-materia-view, html[data-theme="dark"] .av-materias-view, html[data-theme="dark"] .av-planificacion-container { background: var(--ui-bg) !important; color: var(--ui-text-dark) !important; } /* --- Tabs superiores (Calendario / Semanas / Estudiantes / ...) --- */ html[data-theme="dark"] .av-tabs-container { background: var(--ui-bg-card) !important; border-bottom: 1px solid var(--ui-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important; } html[data-theme="dark"] .av-tab, html[data-theme="dark"] .av-tab i, html[data-theme="dark"] .av-tab span { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .av-tab:hover { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-tab.active, html[data-theme="dark"] .av-tab.active i, html[data-theme="dark"] .av-tab.active span { color: var(--ui-success, #4ade80) !important; background: color-mix(in srgb, var(--ui-success, #16a34a) 16%, transparent) !important; } html[data-theme="dark"] .av-tab-badge { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 20%, transparent) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-tab-tip { color: var(--ui-text-muted) !important; } /* --- Banner de materia (EDUCACION FISICA card) --- */ html[data-theme="dark"] .av-subject-header, html[data-theme="dark"] .av-section-banner, html[data-theme="dark"] .av-section-headline, html[data-theme="dark"] .av-stats-section, html[data-theme="dark"] .av-subject-stats { background: var(--ui-bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-header-bubbles { opacity: 0.35 !important; } /* --- Stat boxes y room info --- */ html[data-theme="dark"] .av-stat-box, html[data-theme="dark"] .av-stat-item, html[data-theme="dark"] .av-room-info, html[data-theme="dark"] .av-metric-pill { background: var(--ui-bg-elev) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-stat-box-label, html[data-theme="dark"] .av-stat-label, html[data-theme="dark"] .av-room-label { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .av-stat-box-value, html[data-theme="dark"] .av-stat-value, html[data-theme="dark"] .av-room-value { color: var(--ui-text-dark) !important; } /* --- Navegacion horizontal de semanas (chips SEMANA 1 MAYO, etc.) --- */ html[data-theme="dark"] .av-navegacion-semanas, html[data-theme="dark"] .av-semana-card, html[data-theme="dark"] .av-semana-header-card { background: var(--ui-bg-card) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-semana-header-left, html[data-theme="dark"] .av-semana-header-right, html[data-theme="dark"] .av-semana-daterange, html[data-theme="dark"] .av-semana-body { color: var(--ui-text-mid) !important; } /* Botones de cambio de semana */ html[data-theme="dark"] .av-nav-semana, html[data-theme="dark"] .av-nav-semana-btn, html[data-theme="dark"] .av-semana-arrow { background: var(--ui-bg-elev) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-nav-semana:hover, html[data-theme="dark"] .av-nav-semana-btn:hover, html[data-theme="dark"] .av-semana-arrow:hover { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 18%, transparent) !important; border-color: var(--ui-primary, var(--primary-blue)) !important; } /* --- Round nav (paginacion redonda < > abajo) --- */ html[data-theme="dark"] .av-nav-round, html[data-theme="dark"] .av-nav-round-primary { background: var(--ui-bg-card) !important; border: 1.5px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-nav-round:hover, html[data-theme="dark"] .av-nav-round-primary:hover { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 22%, transparent) !important; border-color: var(--ui-primary, var(--primary-blue)) !important; color: var(--ui-text-dark) !important; } /* --- Secciones Recursos / Actividades --- */ html[data-theme="dark"] .av-recursos-section, html[data-theme="dark"] .av-actividades-section, html[data-theme="dark"] .av-contenido-section, html[data-theme="dark"] .av-recursos-list, html[data-theme="dark"] .av-recursos-grid, html[data-theme="dark"] .av-actividades-grid { background: var(--ui-bg-card) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-section-title, html[data-theme="dark"] .av-section-headline, html[data-theme="dark"] .av-section-headline-left { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-section-count, html[data-theme="dark"] .av-section-badge, html[data-theme="dark"] .av-section-badge-info, html[data-theme="dark"] .av-section-badge-success, html[data-theme="dark"] .av-section-badge-warning { background: var(--ui-bg-elev) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-border) !important; } /* --- Cards de recurso/actividad individuales --- */ html[data-theme="dark"] .av-recurso-item, html[data-theme="dark"] .av-actividad-card { background: var(--ui-bg-elev) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-recurso-item:hover, html[data-theme="dark"] .av-actividad-card:hover { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 8%, var(--ui-bg-elev)) !important; border-color: var(--ui-primary, var(--primary-blue)) !important; } html[data-theme="dark"] .av-actividad-nombre, html[data-theme="dark"] .av-recurso-link { color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-actividad-fechas, html[data-theme="dark"] .av-recurso-fallback, html[data-theme="dark"] .av-actividad-fallback { color: var(--ui-text-muted) !important; } /* --- Empty states --- */ html[data-theme="dark"] .av-empty-state, html[data-theme="dark"] .av-empty-semana, html[data-theme="dark"] .av-section-empty { background: var(--ui-bg-elev) !important; border: 1px dashed var(--ui-border) !important; color: var(--ui-text-muted) !important; } /* --- Quick access / botones de accion principal --- */ html[data-theme="dark"] .av-quick-access, html[data-theme="dark"] .av-quick-btn { background: var(--ui-bg-card) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } /* --- Sidebar interno del aula virtual --- */ html[data-theme="dark"] .av-sidebar, html[data-theme="dark"] .av-sidebar-header, html[data-theme="dark"] .av-sidebar-menu, html[data-theme="dark"] .av-sidebar-toggle { background: var(--ui-bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-menu-item { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .av-menu-item:hover, html[data-theme="dark"] .av-menu-item.active { background: color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 16%, transparent) !important; color: var(--ui-text-dark) !important; } /* --- Content header / title --- */ html[data-theme="dark"] .av-content-header, html[data-theme="dark"] .av-content-title { color: var(--ui-text-dark) !important; } /* --- Notificaciones panel --- */ html[data-theme="dark"] .av-notifications-panel, html[data-theme="dark"] .av-notifications-header, html[data-theme="dark"] .av-notifications-body, html[data-theme="dark"] .av-notification-item { background: var(--ui-bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-notification-meta, html[data-theme="dark"] .av-notification-dates, html[data-theme="dark"] .av-notifications-empty { color: var(--ui-text-muted) !important; } /* ============================================================ PROFESOR — Pills/badges de estado (Abiertas/Cerradas, etc.) Las hojas inline usan rgba(255,255,255,0.85) como fondo, que se vuelve invisible en oscuro. Override con tinte tema. ============================================================ */ /* Stat badges generales (clases, libro, carnet, etc.) */ html[data-theme="dark"] .cl-stat-badge, html[data-theme="dark"] .libro-stat-badge, html[data-theme="dark"] .carnet-stat-badge, html[data-theme="dark"] .qg-stat-badge, html[data-theme="dark"] .age-stat-badge, html[data-theme="dark"] .ar-stat-badge, html[data-theme="dark"] .asis-stat-badge, html[data-theme="dark"] .sol-stat-badge, html[data-theme="dark"] .vt-stat-badge, html[data-theme="dark"] .mod-stat-badge, html[data-theme="dark"] .stat-badge, html[data-theme="dark"] .hero-stat-badge, html[data-theme="dark"] .hero-stat-pill { background: color-mix(in srgb, var(--ui-bg-card) 75%, transparent) !important; color: var(--ui-text-dark) !important; border: 1px solid var(--ui-border) !important; backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } /* Variantes por estado (open/closed/abierta/cerrada/activa/inactiva/aprobada/rechazada/pendiente) */ html[data-theme="dark"] .cl-stat-badge.open, html[data-theme="dark"] .libro-stat-badge.open, html[data-theme="dark"] .stat-badge.open, html[data-theme="dark"] .stat-badge.activa, html[data-theme="dark"] .stat-badge.aprobada, html[data-theme="dark"] .stat-badge.success { color: var(--ui-success, #4ade80) !important; border-color: color-mix(in srgb, var(--ui-success, #16a34a) 35%, transparent) !important; background: color-mix(in srgb, var(--ui-success, #16a34a) 14%, transparent) !important; } html[data-theme="dark"] .cl-stat-badge.open i, html[data-theme="dark"] .stat-badge.activa i, html[data-theme="dark"] .stat-badge.success i { color: var(--ui-success, #4ade80) !important; } html[data-theme="dark"] .cl-stat-badge.closed, html[data-theme="dark"] .libro-stat-badge.closed, html[data-theme="dark"] .stat-badge.closed, html[data-theme="dark"] .stat-badge.inactiva, html[data-theme="dark"] .stat-badge.cerrada { color: var(--ui-text-mid) !important; border-color: var(--ui-border) !important; background: var(--ui-bg-elev) !important; } html[data-theme="dark"] .cl-stat-badge.closed i, html[data-theme="dark"] .stat-badge.cerrada i { color: var(--ui-text-mid) !important; } html[data-theme="dark"] .stat-badge.warning, html[data-theme="dark"] .stat-badge.pendiente { color: var(--ui-warning, #fbbf24) !important; border-color: color-mix(in srgb, var(--ui-warning, #f59e0b) 35%, transparent) !important; background: color-mix(in srgb, var(--ui-warning, #f59e0b) 14%, transparent) !important; } html[data-theme="dark"] .stat-badge.danger, html[data-theme="dark"] .stat-badge.rechazada { color: var(--ui-danger, #f87171) !important; border-color: color-mix(in srgb, var(--ui-danger, #ef4444) 35%, transparent) !important; background: color-mix(in srgb, var(--ui-danger, #ef4444) 14%, transparent) !important; } /* Filtros del header (buscador y selects) */ html[data-theme="dark"] .cl-header-filter, html[data-theme="dark"] .cl-header-filter .form-select, html[data-theme="dark"] .cl-header-search input, html[data-theme="dark"] .libro-filter input, html[data-theme="dark"] .libro-filter select, html[data-theme="dark"] .age-filter input, html[data-theme="dark"] .age-filter select { background: var(--ui-bg-elev) !important; border-color: var(--ui-border) !important; color: var(--ui-text-dark) !important; } /* Empty states genericos para profesor */ html[data-theme="dark"] .cl-empty, html[data-theme="dark"] .libro-empty, html[data-theme="dark"] .age-empty, html[data-theme="dark"] .qg-empty, html[data-theme="dark"] .sol-empty, html[data-theme="dark"] .ar-empty { background: var(--ui-bg-elev) !important; border: 1px dashed var(--ui-border) !important; color: var(--ui-text-muted) !important; } html[data-theme="dark"] .cl-empty-icon, html[data-theme="dark"] .cl-empty h4 { color: var(--ui-text-mid) !important; } /* Cards del listado de clases */ html[data-theme="dark"] .cl-card, html[data-theme="dark"] .cl-grid .cl-card, html[data-theme="dark"] .cl-materia-card { background: var(--ui-bg-card) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .cl-card:hover { border-color: var(--ui-primary, var(--primary-blue)) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } /* ============================================================ PROFESOR — Fix de banner de materia y pills (alta especificidad) ============================================================ */ /* Banner con gradient: en oscuro el gradient queda invisible porque --ui-primary-bg y --ui-primary-bg2 son tonos oscuros similares. Forzamos un gradient mas perceptible. */ html[data-theme="dark"] .av-section-banner, html[data-theme="dark"] .av-estudiantes-container .av-section-banner { background: linear-gradient(135deg, var(--ui-bg-card) 0%, color-mix(in srgb, var(--ui-primary, var(--primary-blue)) 18%, var(--ui-bg-card)) 100%) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-section-banner h2, html[data-theme="dark"] .av-section-banner p, html[data-theme="dark"] .av-section-banner h2 span, html[data-theme="dark"] .av-section-banner p span { color: var(--ui-text-dark) !important; } /* Bubbles decorativas dentro del banner: bajar opacidad para no manchar */ html[data-theme="dark"] .av-section-banner .position-absolute.rounded-circle { opacity: 0.18 !important; filter: saturate(0.65); } /* Metric pill ("36 Total estudiantes") */ html[data-theme="dark"] .av-metric-pill, html[data-theme="dark"] .av-metric-pill-primary { background: var(--ui-bg-elev) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .av-metric-pill .metric-value, html[data-theme="dark"] .av-metric-pill-primary .metric-value { color: var(--ui-primary, var(--primary-blue)) !important; } html[data-theme="dark"] .av-metric-pill .metric-label, html[data-theme="dark"] .av-metric-pill-primary .metric-label { color: var(--ui-text-mid) !important; } /* Buscador y toolbar de estudiantes */ html[data-theme="dark"] .av-estudiantes-container, html[data-theme="dark"] .av-estudiantes-toolbar, html[data-theme="dark"] .av-estudiantes-search { background: transparent !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-estudiantes-search input, html[data-theme="dark"] .av-estudiantes-search .form-control { background: var(--ui-bg-card) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text-dark) !important; } html[data-theme="dark"] .av-estudiantes-search input::placeholder { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .av-estudiantes-search > i { color: var(--ui-text-muted) !important; } /* Tabla de estudiantes */ html[data-theme="dark"] .av-estudiantes-table { background: var(--ui-bg-card) !important; color: var(--ui-text-dark) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .av-estudiantes-table thead th { background: var(--ui-bg-elev) !important; color: var(--ui-text-mid) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .av-estudiantes-table tbody td, html[data-theme="dark"] .av-estudiantes-table tbody tr { background: transparent !important; color: var(--ui-text-dark) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .av-estudiantes-table tbody tr:hover td { background: var(--ui-bg-elev) !important; } html[data-theme="dark"] .av-estudiante-nombre { color: var(--ui-text-dark) !important; font-weight: 700; } html[data-theme="dark"] .av-estudiantes-table tbody td small.text-muted, html[data-theme="dark"] .av-estudiantes-table tbody td p.small { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .av-estudiantes-table tbody td p.small.font-6 { color: var(--ui-text-mid) !important; } /* ----- Override de mayor especificidad para pills Abiertas/Cerradas Las reglas inline usan .cl-stats-mini .cl-stat-badge (specificity 0,2,0). Igualamos o superamos con html[data-theme="dark"] .cl-stats-mini .cl-stat-badge. */ html[data-theme="dark"] .cl-stats-mini .cl-stat-badge, html[data-theme="dark"] .libro-stats-mini .libro-stat-badge { background: color-mix(in srgb, var(--ui-bg-card) 70%, transparent) !important; color: var(--ui-text-dark) !important; border: 1px solid var(--ui-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .cl-stats-mini .cl-stat-badge.open { color: var(--ui-success, #4ade80) !important; border-color: color-mix(in srgb, var(--ui-success, #16a34a) 35%, transparent) !important; background: color-mix(in srgb, var(--ui-success, #16a34a) 14%, transparent) !important; } html[data-theme="dark"] .cl-stats-mini .cl-stat-badge.closed { color: var(--ui-text-mid) !important; border-color: var(--ui-border) !important; background: var(--ui-bg-elev) !important; } html[data-theme="dark"] .cl-stats-mini .cl-stat-badge i { color: inherit !important; }