/* ═══════════════════════════════════════════════════════════ TEMA OSCURO — mejoras de contraste Se aplica cuando NO existe la clase 'light' en ═══════════════════════════════════════════════════════════ */ /* Grises demasiado oscuros en fondo negro → se aclaran */ html:not(.light) .text-\[\#444\] { color: #999 !important; } html:not(.light) .text-\[\#555\] { color: #aaa !important; } html:not(.light) .text-\[\#666\] { color: #bbb !important; } /* Botones con borde sutil → más visible */ html:not(.light) .border-white\/10 { border-color: rgba(255,255,255,0.22) !important; } /* Botón de acción secundario (Ver bajas, filtros, toggle, etc.) */ html:not(.light) button.border-white\/10, html:not(.light) a.border-white\/10 { color: #c0c0c0 !important; } html:not(.light) button.border-white\/10:hover, html:not(.light) a.border-white\/10:hover { color: #ffffff !important; border-color: rgba(255,255,255,0.40) !important; } /* Icono de logout en sidebar */ html:not(.light) button[title="Cerrar sesión"] { color: #aaa !important; } html:not(.light) button[title="Cerrar sesión"]:hover { color: #ef4444 !important; } /* ═══════════════════════════════════════════════════════════ TEMA CLARO — TallerMIR Backoffice Se activa añadiendo la clase 'light' en ═══════════════════════════════════════════════════════════ */ /* ── Base ─────────────────────────────────────────────────── */ html.light body { background-color: #f2f4f7 !important; color: #111827 !important; } /* ── Scrollbar ────────────────────────────────────────────── */ html.light ::-webkit-scrollbar-track { background: #e8eaed; } html.light ::-webkit-scrollbar-thumb { background: #c4c8d0 !important; } html.light ::-webkit-scrollbar-thumb:hover { background: #adb3bf !important; } /* ── Login screen ─────────────────────────────────────────── */ html.light .login-grid { background-color: #f2f4f7 !important; background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px) !important; } /* ── Sidebar ──────────────────────────────────────────────── */ html.light #sidebar { background-color: #ffffff !important; border-right-color: rgba(0,0,0,0.08) !important; } html.light .nav-item { color: #6b7280; } html.light .nav-item:hover { background: rgba(0,0,0,0.04) !important; border-left-color: rgba(212,43,43,0.4) !important; color: #374151; } html.light .nav-item.active { background: rgba(212,43,43,0.08) !important; border-left-color: #d42b2b !important; color: #d42b2b !important; } /* ── Header sticky ────────────────────────────────────────── */ html.light header, html.light .main-header { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(0,0,0,0.08) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important; } /* ── Barra de tabs maestros ───────────────────────────────── */ html.light .bg-ink-800\/40 { background-color: rgba(255,255,255,0.97) !important; } html.light .tabs-container { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } html.light .maestro-tab { color: #6b7280 !important; border-color: transparent !important; } html.light .maestro-tab:hover { color: #374151 !important; } html.light .maestro-tab.tab-active { color: #111827 !important; border-color: #d42b2b !important; } html.light .stat-tab { color: #6b7280 !important; border-color: transparent !important; } html.light .stat-tab:hover { color: #374151 !important; border-bottom-color: rgba(212,43,43,0.3) !important; } html.light .stat-tab.active { color: #111827 !important; border-bottom-color: #d42b2b !important; } html.light .fact-tab { color: #6b7280 !important; border-color: transparent !important; } html.light .fact-tab:hover { color: #374151 !important; border-bottom-color: rgba(212,43,43,0.3) !important; } html.light .fact-tab.tab-active { color: #111827 !important; border-bottom-color: #d42b2b !important; } html.light .fact-tab.tab-active::after { background: #d42b2b; box-shadow: none; } html.light .login-tab { color: #6b7280 !important; } html.light .login-tab.active { color: #111827 !important; border-bottom-color: #d42b2b !important; } html.light .tab-btn { color: #6b7280 !important; } html.light .tab-btn.active { color: #111827 !important; border-bottom-color: #d42b2b !important; } /* ── Fondos (colores Tailwind personalizados) ─────────────── */ html.light .bg-ink { background-color: #f2f4f7 !important; } html.light .bg-ink-800 { background-color: #ffffff !important; } html.light .bg-ink-700 { background-color: #f7f8fa !important; } html.light .bg-ink-600 { background-color: #eef0f3 !important; } html.light .bg-ink-800\/60 { background-color: rgba(255,255,255,0.97) !important; } html.light .bg-ink-800\/40 { background-color: rgba(255,255,255,0.97) !important; } html.light .bg-ink-700\/40 { background-color: rgba(247,248,250,0.9) !important; } /* Fondos por hex inline ──────────────────────────────────── */ html.light .bg-\[\#111\], html.light .kpi-card, html.light .section-card, html.light .stat-card { background-color: #ffffff !important; border-color: rgba(0,0,0,0.10) !important; } html.light .kpi-card:hover { border-left-color: rgba(212,43,43,0.4) !important; } html.light .stat-card:hover { border-left-color: rgba(212,43,43,0.4) !important; } html.light .filter-bar { background-color: #f0f2f5 !important; border-color: rgba(0,0,0,0.08) !important; } html.light .filter-bar input, html.light .filter-bar select { background-color: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; color: #374151 !important; } html.light .filter-bar input::placeholder { color: #d1d5db !important; } html.light .fp-select { background-color: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; color: #374151 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important; } html.light .fp-select:hover { background-color: #f7f8fa !important; border-color: rgba(0,0,0,0.2) !important; } /* ── Colores de texto ─────────────────────────────────────── */ html.light .text-white { color: #111827 !important; } html.light .text-\[\#f0ebe3\] { color: #111827 !important; } html.light .text-\[\#aaa\] { color: #4b5563 !important; } html.light .text-\[\#bbb\] { color: #4b5563 !important; } html.light .text-\[\#ccc\] { color: #374151 !important; } html.light .text-\[\#888\] { color: #6b7280 !important; } html.light .text-\[\#777\] { color: #6b7280 !important; } html.light .text-\[\#666\] { color: #6b7280 !important; } html.light .text-\[\#555\] { color: #4b5563 !important; } html.light .text-\[\#444\] { color: #9ca3af !important; } html.light .text-\[\#333\] { color: #c4c8d0 !important; } /* Textos de KPI / estadísticas */ html.light .kpi-label { color: #6b7280 !important; } html.light .kpi-value { color: #111827 !important; } html.light .kpi-sub { color: #9ca3af !important; } /* Columnas de tabla custom */ html.light .data-table thead tr { background-color: #f7f8fa !important; border-color: rgba(0,0,0,0.08) !important; } html.light .data-table thead th { color: #9ca3af !important; } /* ── Sidebar footer ───────────────────────────────────────── */ html.light #sidebarUser { color: #111827 !important; } html.light #sidebarRole { color: #9ca3af !important; } /* ── Placeholders ─────────────────────────────────────────── */ html.light .placeholder-\[\#333\]::placeholder { color: #c4c8d0 !important; } html.light input::placeholder, html.light textarea::placeholder { color: #c4c8d0 !important; } /* ── Bordes ───────────────────────────────────────────────── */ html.light .border-white\/\[\.07\] { border-color: rgba(0,0,0,0.10) !important; } html.light .border-white\/\[\.06\] { border-color: rgba(0,0,0,0.08) !important; } html.light .border-white\/\[\.05\] { border-color: rgba(0,0,0,0.08) !important; } html.light .border-white\/\[\.04\] { border-color: rgba(0,0,0,0.06) !important; } html.light .border-white\/10 { border-color: rgba(0,0,0,0.12) !important; } html.light .border-white\/\[\.3\] { border-color: rgba(0,0,0,0.15) !important; } html.light .border-white\/\[\.08\] { border-color: rgba(0,0,0,0.10) !important; } /* Divisores h-px */ html.light .bg-white\/\[\.05\] { background-color: rgba(0,0,0,0.07) !important; } html.light .bg-white\/\[\.04\] { background-color: rgba(0,0,0,0.05) !important; } html.light .bg-white\/\[\.02\] { background-color: rgba(0,0,0,0.03) !important; } /* ── Inputs y formularios ─────────────────────────────────── */ html.light input[type="text"], html.light input[type="email"], html.light input[type="password"], html.light input[type="tel"], html.light input[type="number"], html.light input[type="date"], html.light input[type="datetime-local"], html.light input[type="time"], html.light input[type="search"], html.light select, html.light textarea { background-color: #f7f8fa !important; color: #111827 !important; border-color: rgba(0,0,0,0.12) !important; } html.light input:focus, html.light select:focus, html.light textarea:focus { border-color: #d42b2b !important; outline: none !important; } /* ── Tablas ───────────────────────────────────────────────── */ html.light .row-hover:hover { background: rgba(0,0,0,0.025) !important; } html.light .cita-row:hover { background: rgba(0,0,0,0.025) !important; } /* ── Calendario (admin.html) ──────────────────────────────── */ html.light .cal-day:hover { background: rgba(0,0,0,0.04) !important; } html.light .cal-day.today { outline-color: rgba(212,43,43,0.5) !important; } /* ── Botones con bordes ───────────────────────────────────── */ html.light button.border-white\/10 { border-color: rgba(0,0,0,0.12) !important; } /* hover:text-white en botones que no son primarios */ html.light .hover\:text-white:hover:not(.bg-red):not(.bg-red-dark):not([class*="bg-red"]) { color: #111827 !important; } /* ── Modales overlay ──────────────────────────────────────── */ html.light .bg-black\/70 { background-color: rgba(0,0,0,0.45) !important; } /* ── Toggle configuración ─────────────────────────────────── */ html.light .toggle-slider { background-color: #d1d5db !important; } html.light .toggle-slider:before { background-color: #ffffff !important; } /* ── Calendario cabecera ──────────────────────────────────── */ html.light .bg-ink-800\/60 { background-color: rgba(255,255,255,0.97) !important; } /* ── Botón de tema en la cabecera (inyectado por theme.js) ── */ html.light header button[title*="claro"], html.light header button[title*="oscuro"] { border-color: rgba(0,0,0,0.12) !important; color: #6b7280 !important; } html.light header button[title*="claro"]:hover, html.light header button[title*="oscuro"]:hover { color: #111827 !important; border-color: rgba(0,0,0,0.25) !important; } /* ── Transición suave al cambiar de tema ──────────────────── */ html.light *, html.light *::before, html.light *::after { transition-property: background-color, border-color, color; transition-duration: 0.18s; transition-timing-function: ease; } /* Excepciones: no transición en animaciones y SVG */ html.light svg *, html.light .fade-in, html.light [class*="animate-"] { transition: none !important; }