/* ===== MODO CLARO ===== Generado: remapea las utilidades del tema oscuro cuando no tiene la clase .dark. .dark-zone mantiene su aspecto oscuro (banners con foto); .on-color conserva texto blanco sobre color. */ html:not(.dark) .text-white:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#0f172a} html:not(.dark) .text-slate-200:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#1e293b} html:not(.dark) .text-slate-300:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#334155} html:not(.dark) .text-slate-400:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-slate-600:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#475569} html:not(.dark) .text-slate-500:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#64748b} html:not(.dark) .text-rose-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-rose-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-rose-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-rose-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#be123c} html:not(.dark) .text-red-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-red-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-red-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-red-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#b91c1c} html:not(.dark) .text-amber-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-amber-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-amber-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-amber-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#b45309} html:not(.dark) .text-emerald-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-emerald-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-emerald-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-emerald-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#047857} html:not(.dark) .text-indigo-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-indigo-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-indigo-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-indigo-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#4338ca} html:not(.dark) .text-cyan-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-cyan-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-cyan-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-cyan-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#0e7490} html:not(.dark) .text-violet-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-violet-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-violet-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-violet-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#6d28d9} html:not(.dark) .text-pink-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-pink-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-pink-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-pink-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#be185d} html:not(.dark) .text-orange-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-orange-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-orange-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-orange-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#c2410c} html:not(.dark) .text-blue-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-blue-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-blue-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-blue-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#1d4ed8} html:not(.dark) .text-sky-100:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-sky-200:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-sky-300:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .text-sky-400:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#0369a1} html:not(.dark) .text-amber-400\/80:not(.dark-zone):not(.dark-zone *):not(.on-color){color:#b45309} html:not(.dark) .hover\:text-amber-300:not(.dark-zone):not(.dark-zone *):not(.on-color):hover,html:not(.dark) .hover\:text-amber-400:not(.dark-zone):not(.dark-zone *):not(.on-color):hover{color:#b45309} html:not(.dark) .bg-white\/5:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.05)} html:not(.dark) .bg-white\/\[\.03\]:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.035)} html:not(.dark) .bg-white\/\[\.04\]:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.045)} html:not(.dark) .bg-white\/10:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.08)} html:not(.dark) .bg-black\/30:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.04)} html:not(.dark) .bg-black\/40:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.05)} html:not(.dark) .bg-black\/50:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(15,23,42,0.06)} html:not(.dark) .hover\:bg-white\/5:not(.dark-zone):not(.dark-zone *):not(.on-color):hover{background-color:rgba(15,23,42,0.06)} html:not(.dark) .hover\:bg-white\/10:not(.dark-zone):not(.dark-zone *):not(.on-color):hover{background-color:rgba(15,23,42,0.09)} html:not(.dark) .hover\:bg-white\/\[\.03\]:not(.dark-zone):not(.dark-zone *):not(.on-color):hover{background-color:rgba(15,23,42,0.045)} html:not(.dark) .hover\:bg-white\/\[\.06\]:not(.dark-zone):not(.dark-zone *):not(.on-color):hover{background-color:rgba(15,23,42,0.07)} html:not(.dark) .bg-\[\#0d1428\]:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:#ffffff} html:not(.dark) .bg-\[\#070b17\]:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:#f3f5fa} html:not(.dark) .bg-\[\#070b17\]\/70:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .bg-\[\#070b17\]\/80:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(243,245,250,.82)} html:not(.dark) .bg-\[\#0a0f1f\]\/95:not(.dark-zone):not(.dark-zone *):not(.on-color){background-color:rgba(255,255,255,.96)} html:not(.dark) .ring-white\/5:not(.dark-zone):not(.dark-zone *):not(.on-color){--tw-ring-color:rgba(15,23,42,.07)} html:not(.dark) .ring-white\/10:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .ring-black\/40:not(.dark-zone):not(.dark-zone *):not(.on-color){--tw-ring-color:rgba(15,23,42,.12)} html:not(.dark) .border-white\/5:not(.dark-zone):not(.dark-zone *):not(.on-color),html:not(.dark) .border-white\/\[\.04\]:not(.dark-zone):not(.dark-zone *):not(.on-color){border-color:rgba(15,23,42,.08)} html:not(.dark) .border-white\/10:not(.dark-zone):not(.dark-zone *):not(.on-color){border-color:rgba(15,23,42,.12)} html:not(.dark) .divide-white\/5:not(.dark-zone):not(.dark-zone *):not(.on-color)>:not([hidden])~:not([hidden]){border-color:rgba(15,23,42,.07)} html:not(.dark) body{color:#1e293b} html:not(.dark) .bg-glow{background:radial-gradient(600px 400px at 85% -5%,rgba(245,158,11,.10),transparent 60%),radial-gradient(700px 500px at 10% 10%,rgba(99,102,241,.08),transparent 60%),radial-gradient(600px 500px at 60% 110%,rgba(16,185,129,.06),transparent 60%)} html:not(.dark) .card:not(.dark-zone):not(.dark-zone *):not([class*="bg-gradient"]){background-image:none} html:not(.dark) .card:not(.dark-zone):not(.dark-zone *){background-color:rgba(255,255,255,.9);border-color:rgba(15,23,42,.07);box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -18px rgba(15,23,42,.18)} html:not(.dark) .card-t{color:#0f172a} html:not(.dark) .nav-link{color:#475569} html:not(.dark) .nav-link:hover{background:rgba(15,23,42,.05);color:#0f172a} html:not(.dark) .nav-on{background:linear-gradient(90deg,rgba(245,158,11,.16),rgba(245,158,11,.02));color:#b45309} html:not(.dark) .tbl th{border-color:rgba(15,23,42,.08)} html:not(.dark) .tbl td{border-color:rgba(15,23,42,.06)} html:not(.dark) .tbl tr:hover td{background:rgba(15,23,42,.025)} html:not(.dark) .chip{background:#fff;border-color:rgba(15,23,42,.1);color:#334155} html:not(.dark) .chip:hover{background:#fef3c7;border-color:#f59e0b;color:#92400e} html:not(.dark) .tab{color:#475569} html:not(.dark) .tab:hover{color:#0f172a;background:rgba(15,23,42,.05)} html:not(.dark) .tab-on,html:not(.dark) .tab-on:hover{color:#1a1205;background:#f59e0b} html:not(.dark) .btn-g{background:#fff;border-color:rgba(15,23,42,.12);color:#1e293b} html:not(.dark) .btn-g:hover{background:#f1f5f9} html:not(.dark) .input{background:#fff;border-color:rgba(15,23,42,.14);color:#0f172a} html:not(.dark) .input option{background:#fff;color:#0f172a} html:not(.dark) .modal-panel{background:#fff;border-color:rgba(15,23,42,.12)} html:not(.dark) .cd-box:not(.dark-zone *){background:#fff;border-color:rgba(15,23,42,.1)} html:not(.dark) .cd-box:not(.dark-zone *) b{color:#0f172a} html:not(.dark) ::-webkit-scrollbar-thumb{background:rgba(15,23,42,.15)} html:not(.dark) select{color-scheme:light} /* Gráficos ApexCharts */ html:not(.dark) .apexcharts-xaxis-label,html:not(.dark) .apexcharts-yaxis-label,html:not(.dark) .apexcharts-yaxis-title-text{fill:#64748b!important} html:not(.dark) .apexcharts-gridline,html:not(.dark) .apexcharts-grid-borders line{stroke:rgba(15,23,42,.08)!important} html:not(.dark) .apexcharts-legend-text{color:#334155!important} html:not(.dark) .apexcharts-datalabel,html:not(.dark) .apexcharts-data-labels text{fill:#1e293b!important} html:not(.dark) .apexcharts-datalabel-value{fill:#0f172a!important} html:not(.dark) .apexcharts-pie-area{stroke:#fff!important} html:not(.dark) .apexcharts-radialbar-track path{stroke:rgba(15,23,42,.07)!important} /* Botón de tema */ .theme-btn .i-sun,.theme-btn .i-moon{width:1.25rem;height:1.25rem} html.dark .theme-btn .i-moon{display:none} html:not(.dark) .theme-btn .i-sun{display:none} html:not(.dark) .field{color:#475569} html:not(.dark) input[type=date],html:not(.dark) input[type=time],html:not(.dark) input[type=month]{color-scheme:light}