/* =============================================================================
   Sistema de Temas y Modo Oscuro Profesional - Sistema POS
   Auditoría Exhaustiva de Accesibilidad y Alto Contraste (WCAG 2.1 AA / AAA)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens de Diseño y Variables CSS (Modo Claro por Defecto)
   ----------------------------------------------------------------------------- */
:root {
  --theme-name: 'light';
  --bg-body: #f1f5f9;
  /* slate-100 */
  --bg-surface: #ffffff;
  /* white */
  --bg-surface-alt: #f8fafc;
  /* slate-50 */
  --bg-surface-elevated: #ffffff;
  /* white */
  --border-color: #e2e8f0;
  /* slate-200 */
  --border-color-subtle: #f1f5f9;
  /* slate-100 */
  --border-color-strong: #cbd5e1;
  /* slate-300 */
  --text-primary: #0f172a;
  /* slate-900 */
  --text-secondary: #334155;
  /* slate-700 */
  --text-muted: #64748b;
  /* slate-500 */
  --text-dimmed: #94a3b8;
  /* slate-400 */
  --input-bg: #f8fafc;
  /* slate-50 */
  --input-border: #e2e8f0;
  /* slate-200 */
  --input-focus-bg: #ffffff;
  /* white */
  --input-focus-border: #4f46e5;
  /* indigo-600 */
  --badge-default-bg: #f1f5f9;
  --badge-default-text: #334155;
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   2. Tokens de Diseño (Modo Oscuro Elegante y de Ultra Alto Contraste)
   ----------------------------------------------------------------------------- */
html.dark,
[data-theme="dark"] {
  --theme-name: 'dark';
  --bg-body: #090d16;
  /* Slate extra profundo para reducir fatiga */
  --bg-surface: #121a2d;
  /* Slate oscuro para tarjetas y contenedores principales */
  --bg-surface-alt: #0b111e;
  /* Inset / fondos secundarios */
  --bg-surface-elevated: #1a253e;
  /* Superficies flotantes y hover */
  --border-color: #212e4a;
  /* Separadores oscuros de alta definición */
  --border-color-subtle: #172136;
  /* Bordes finos */
  --border-color-strong: #2e3f64;
  /* Bordes marcados */
  --text-primary: #f8fafc;
  /* slate-50 - Contraste superior (18:1) */
  --text-secondary: #e2e8f0;
  /* slate-200 - Contraste alto (15:1) */
  --text-muted: #cbd5e1;
  /* slate-300 - Contraste óptimo (12:1) */
  --text-dimmed: #94a3b8;
  /* slate-400 - Contraste nítido para subtítulos (6.5:1) */
  --input-bg: #0b111e;
  /* Fondo oscuro para inputs */
  --input-border: #263554;
  /* Borde de inputs */
  --input-focus-bg: #101828;
  /* Foco de inputs */
  --input-focus-border: #6366f1;
  /* indigo-500 vibrante */
  --badge-default-bg: #1e293b;
  --badge-default-text: #e2e8f0;
  --scrollbar-track: #090d16;
  --scrollbar-thumb: #263554;
  --scrollbar-thumb-hover: #3b4d75;
  color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   3. Sobrescrituras Universales de Superficies y Fondos para Modo Oscuro
   ----------------------------------------------------------------------------- */

html.dark body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

/* Contenedores y Tarjetas Principales (blancos y derivados) */
html.dark header.bg-white,
html.dark nav.bg-white,
html.dark .bg-white,
html.dark [class*="bg-white/"]:not([class*="hover:"]):not([class*="focus:"]):not(.carta-print):not(.ticket-print) {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fondos secundarios e insets (slate-50, gray-50 y variantes con opacidad) */
html.dark .bg-slate-50,
html.dark .bg-gray-50,
html.dark [class*="bg-slate-50/"]:not([class*="hover:"]):not([class*="focus:"]),
html.dark [class*="bg-gray-50/"]:not([class*="hover:"]):not([class*="focus:"]) {
  background-color: var(--bg-surface-alt) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Fondos terciarios (slate-100, gray-100 y variantes con opacidad) */
html.dark .bg-slate-100,
html.dark .bg-gray-100,
html.dark [class*="bg-slate-100/"]:not([class*="hover:"]):not([class*="focus:"]),
html.dark [class*="bg-gray-100/"]:not([class*="hover:"]):not([class*="focus:"]) {
  background-color: var(--bg-surface-alt) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Badges y fondos gris medio (slate-200 / 300) */
html.dark .bg-slate-200,
html.dark .bg-gray-200,
html.dark [class*="bg-slate-200/"]:not([class*="hover:"]):not([class*="focus:"]),
html.dark [class*="bg-gray-200/"]:not([class*="hover:"]):not([class*="focus:"]) {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark .bg-slate-300,
html.dark .bg-gray-300,
html.dark [class*="bg-slate-300/"]:not([class*="hover:"]):not([class*="focus:"]),
html.dark [class*="bg-gray-300/"]:not([class*="hover:"]):not([class*="focus:"]) {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

/* Barras de navegación superiores y badges de usuario */
html.dark nav a.bg-slate-100 {
  background-color: #1a243c !important;
  color: #cbd5e1 !important;
}

html.dark nav a.bg-slate-100:hover {
  background-color: #273659 !important;
  color: #ffffff !important;
}

html.dark #usuario-badge {
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #c7d2fe !important;
}

/* Bordes y Divisores Universales */
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark [class*="border-slate-200/"],
html.dark [class*="border-slate-300/"],
html.dark [class*="border-gray-200/"],
html.dark [class*="border-gray-300/"] {
  border-color: var(--border-color) !important;
}

html.dark .border-slate-100,
html.dark .border-gray-100,
html.dark [class*="border-slate-100/"],
html.dark [class*="border-gray-100/"] {
  border-color: var(--border-color-subtle) !important;
}

html.dark .divide-slate-100> :not([hidden])~ :not([hidden]),
html.dark .divide-slate-200> :not([hidden])~ :not([hidden]),
html.dark .divide-gray-100> :not([hidden])~ :not([hidden]),
html.dark .divide-gray-200> :not([hidden])~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

/* -----------------------------------------------------------------------------
   4. Textos de Alto Contraste y Accesibilidad (WCAG 2.1 AA / AAA)
   Incluye soporte para modificadores de opacidad (ej. text-amber-950/80)
   ----------------------------------------------------------------------------- */

/* Textos Neutros Principales (Slate / Gray 800 - 950) */
html.dark .text-slate-950,
html.dark [class*="text-slate-950/"],
html.dark .text-slate-900,
html.dark [class*="text-slate-900/"],
html.dark .text-slate-800,
html.dark [class*="text-slate-800/"],
html.dark .text-gray-950,
html.dark [class*="text-gray-950/"],
html.dark .text-gray-900,
html.dark [class*="text-gray-900/"],
html.dark .text-gray-800,
html.dark [class*="text-gray-800/"] {
  color: var(--text-primary) !important;
}

/* Textos Secundarios (Slate / Gray 600 - 700) */
html.dark .text-slate-700,
html.dark [class*="text-slate-700/"],
html.dark .text-slate-600,
html.dark [class*="text-slate-600/"],
html.dark .text-gray-700,
html.dark [class*="text-gray-700/"],
html.dark .text-gray-600,
html.dark [class*="text-gray-600/"] {
  color: var(--text-secondary) !important;
}

/* Textos Atenuados y Etiquetas (Slate / Gray 500) */
html.dark .text-slate-500,
html.dark [class*="text-slate-500/"],
html.dark .text-gray-500,
html.dark [class*="text-gray-500/"] {
  color: var(--text-muted) !important;
}

/* Textos de Subtítulo y Metadatos (Slate / Gray 400) */
html.dark .text-slate-400,
html.dark [class*="text-slate-400/"],
html.dark .text-gray-400,
html.dark [class*="text-gray-400/"] {
  color: var(--text-dimmed) !important;
}

/* Textos Claros Nativos */
html.dark .text-slate-300,
html.dark .text-slate-200,
html.dark .text-slate-100,
html.dark .text-gray-300,
html.dark .text-gray-200,
html.dark .text-gray-100 {
  color: #f8fafc !important;
}

html.dark strong,
html.dark b {
  color: var(--text-primary) !important;
}

/* Azules e Índigos (corrige textos violetas/índigos oscuros en fondos oscuros) */
html.dark .text-indigo-500,
html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark [class*="text-indigo-700/"],
html.dark .text-indigo-800,
html.dark [class*="text-indigo-800/"],
html.dark .text-indigo-900,
html.dark [class*="text-indigo-900/"],
html.dark .text-indigo-950,
html.dark [class*="text-indigo-950/"] {
  color: #a5b4fc !important;
  /* indigo-300: 9.8:1 contraste */
}

html.dark .text-blue-500,
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark [class*="text-blue-700/"],
html.dark .text-blue-800,
html.dark [class*="text-blue-800/"],
html.dark .text-blue-900,
html.dark [class*="text-blue-900/"],
html.dark .text-blue-950,
html.dark [class*="text-blue-950/"] {
  color: #93c5fd !important;
  /* blue-300: 10.5:1 contraste */
}

html.dark .text-purple-500,
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .text-purple-900,
html.dark .text-purple-950,
html.dark .text-violet-500,
html.dark .text-violet-600,
html.dark .text-violet-700,
html.dark .text-violet-800,
html.dark .text-violet-900 {
  color: #d8b4fe !important;
  /* purple-300: 10.1:1 contraste */
}

/* Verdes y Esmeraldas (totales POS, ingresos, estatus activos) */
html.dark .text-emerald-500,
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark [class*="text-emerald-700/"],
html.dark .text-emerald-800,
html.dark [class*="text-emerald-800/"],
html.dark .text-emerald-900,
html.dark [class*="text-emerald-900/"],
html.dark .text-emerald-950,
html.dark [class*="text-emerald-950/"],
html.dark .text-green-500,
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800,
html.dark .text-green-900 {
  color: #6ee7b7 !important;
  /* emerald-300: 10.8:1 contraste */
}

/* Ámbar, Amarillo y Naranja (alertas, advertencias, créditos, COP) */
html.dark .text-amber-500,
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark [class*="text-amber-700/"],
html.dark .text-amber-800,
html.dark [class*="text-amber-800/"],
html.dark .text-amber-900,
html.dark [class*="text-amber-900/"],
html.dark .text-amber-950,
html.dark [class*="text-amber-950/"],
html.dark .text-yellow-500,
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-800,
html.dark .text-orange-500,
html.dark .text-orange-600,
html.dark .text-orange-700,
html.dark .text-orange-800 {
  color: #fcd34d !important;
  /* amber-300: 11.5:1 contraste */
}

/* Rojos y Rosas (errores, deudas, egresos, anulaciones) */
html.dark .text-rose-500,
html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark [class*="text-rose-700/"],
html.dark .text-rose-800,
html.dark [class*="text-rose-800/"],
html.dark .text-rose-900,
html.dark [class*="text-rose-900/"],
html.dark .text-rose-950,
html.dark [class*="text-rose-950/"],
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-red-900 {
  color: #fda4af !important;
  /* rose-300: 10.2:1 contraste */
}

/* Cianes y Teales */
html.dark .text-cyan-500,
html.dark .text-cyan-600,
html.dark .text-cyan-700,
html.dark .text-teal-500,
html.dark .text-teal-600,
html.dark .text-teal-700 {
  color: #67e8f9 !important;
  /* cyan-300 */
}

/* -----------------------------------------------------------------------------
   5. Píldoras, Badges y Fondos Semánticos en Modo Oscuro (Niveles 50, 100, 200, 300)
   ----------------------------------------------------------------------------- */

html.dark [class~="bg-emerald-50"],
html.dark [class*="bg-emerald-50/"],
html.dark [class*="bg-emerald-100"],
html.dark [class*="bg-emerald-200"],
html.dark [class*="bg-emerald-300"] {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

html.dark [class~="bg-amber-50"],
html.dark [class*="bg-amber-50/"],
html.dark [class*="bg-amber-100"],
html.dark [class*="bg-amber-200"],
html.dark [class*="bg-amber-300"] {
  background-color: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
}

html.dark [class~="bg-rose-50"],
html.dark [class*="bg-rose-50/"],
html.dark [class*="bg-rose-100"],
html.dark [class*="bg-rose-200"],
html.dark [class*="bg-rose-300"] {
  background-color: rgba(244, 63, 94, 0.18) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: #fda4af !important;
}

html.dark [class~="bg-indigo-50"],
html.dark [class*="bg-indigo-50/"],
html.dark [class*="bg-indigo-100"],
html.dark [class*="bg-indigo-200"],
html.dark [class*="bg-indigo-300"] {
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #c7d2fe !important;
}

html.dark [class~="bg-blue-50"],
html.dark [class*="bg-blue-50/"],
html.dark [class*="bg-blue-100"],
html.dark [class*="bg-blue-200"],
html.dark [class*="bg-blue-300"] {
  background-color: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

html.dark [class~="bg-purple-50"],
html.dark [class*="bg-purple-50/"],
html.dark [class*="bg-purple-100"],
html.dark [class*="bg-purple-200"],
html.dark [class*="bg-purple-300"] {
  background-color: rgba(168, 85, 247, 0.18) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #d8b4fe !important;
}

/* Bordes Semánticos Translúcidos */
html.dark [class*="border-indigo-100"],
html.dark [class*="border-indigo-200"],
html.dark [class*="border-indigo-300"] {
  border-color: rgba(99, 102, 241, 0.35) !important;
}

html.dark [class*="border-emerald-100"],
html.dark [class*="border-emerald-200"],
html.dark [class*="border-emerald-300"] {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

html.dark [class*="border-amber-100"],
html.dark [class*="border-amber-200"],
html.dark [class*="border-amber-300"] {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

html.dark [class*="border-rose-100"],
html.dark [class*="border-rose-200"],
html.dark [class*="border-rose-300"] {
  border-color: rgba(244, 63, 94, 0.35) !important;
}

/* -----------------------------------------------------------------------------
   6. Sobrescrituras de Estados :hover para Prevenir Inversión y Texto Fantasma
   ----------------------------------------------------------------------------- */

/* Neutros en hover */
html.dark [class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-slate-100"]:hover,
html.dark [class*="hover:bg-gray-50"]:hover,
html.dark [class*="hover:bg-gray-100"]:hover {
  background-color: var(--bg-surface-elevated) !important;
}

html.dark [class*="hover:bg-slate-200"]:hover,
html.dark [class*="hover:bg-gray-200"]:hover {
  background-color: #263554 !important;
}

/* Semánticos en hover */
html.dark [class*="hover:bg-indigo-50"]:hover,
html.dark [class*="hover:bg-indigo-100"]:hover,
html.dark [class*="hover:bg-indigo-200"]:hover {
  background-color: rgba(99, 102, 241, 0.28) !important;
}

html.dark [class*="hover:bg-amber-50"]:hover,
html.dark [class*="hover:bg-amber-100"]:hover,
html.dark [class*="hover:bg-amber-200"]:hover {
  background-color: rgba(245, 158, 11, 0.28) !important;
}

html.dark [class*="hover:bg-emerald-50"]:hover,
html.dark [class*="hover:bg-emerald-100"]:hover,
html.dark [class*="hover:bg-emerald-200"]:hover {
  background-color: rgba(16, 185, 129, 0.28) !important;
}

html.dark [class*="hover:bg-rose-50"]:hover,
html.dark [class*="hover:bg-rose-100"]:hover,
html.dark [class*="hover:bg-rose-200"]:hover {
  background-color: rgba(244, 63, 94, 0.28) !important;
}

html.dark [class*="hover:bg-blue-50"]:hover,
html.dark [class*="hover:bg-blue-100"]:hover,
html.dark [class*="hover:bg-blue-200"]:hover {
  background-color: rgba(59, 130, 246, 0.28) !important;
}

/* Colores de texto en hover */
html.dark [class*="hover:text-indigo-600"]:hover,
html.dark [class*="hover:text-indigo-700"]:hover,
html.dark [class*="hover:text-indigo-800"]:hover {
  color: #c7d2fe !important;
}

html.dark [class*="hover:text-emerald-600"]:hover,
html.dark [class*="hover:text-emerald-700"]:hover,
html.dark [class*="hover:text-emerald-800"]:hover {
  color: #a7f3d0 !important;
}

html.dark [class*="hover:text-amber-600"]:hover,
html.dark [class*="hover:text-amber-700"]:hover,
html.dark [class*="hover:text-amber-800"]:hover {
  color: #fef08a !important;
}

html.dark [class*="hover:text-rose-600"]:hover,
html.dark [class*="hover:text-rose-700"]:hover,
html.dark [class*="hover:text-rose-800"]:hover {
  color: #fecdd3 !important;
}

html.dark [class*="hover:text-slate-900"]:hover,
html.dark [class*="hover:text-slate-800"]:hover,
html.dark [class*="hover:text-slate-700"]:hover {
  color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   7. Formularios, Controles de Entrada y Filtros
   ----------------------------------------------------------------------------- */

html.dark input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark input:not([type="button"]):not([type="submit"]):focus,
html.dark select:focus,
html.dark textarea:focus {
  background-color: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  outline: none;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--text-dimmed) !important;
}

html.dark select option,
html.dark select optgroup {
  background-color: #121a2d !important;
  color: #f8fafc !important;
}

/* Indicador de calendario de fecha nativo en blanco/luminoso */
html.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.9) brightness(1.2);
  cursor: pointer;
}

/* Checkboxes y Radios */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color-strong) !important;
}

/* -----------------------------------------------------------------------------
   8. Componentes Específicos del Punto de Venta (POS)
   ----------------------------------------------------------------------------- */

/* Reloj y Fecha en Vivo del Header POS */
html.dark #pos-reloj-widget {
  background-color: var(--bg-surface-alt) !important;
  border-color: var(--border-color) !important;
}

html.dark #pos-reloj-widget .text-slate-600 {
  color: var(--text-muted) !important;
}

html.dark #pos-reloj-widget .text-slate-300 {
  color: var(--border-color-strong) !important;
}

html.dark #pos-reloj-widget .text-indigo-700 {
  color: #a5b4fc !important;
}

/* Botón de Ventas en Espera en Header */
html.dark #btn-ver-tickets-espera {
  background-color: var(--bg-surface-alt) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

html.dark #btn-ver-tickets-espera:hover {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fcd34d !important;
}

/* Botón Tasa BCV en el Header Superior */
html.dark #btn-tasa-bcv-pos-top {
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #c7d2fe !important;
}

html.dark #btn-tasa-bcv-pos-top:hover {
  background-color: rgba(99, 102, 241, 0.3) !important;
  border-color: #818cf8 !important;
  color: #ffffff !important;
}

/* Botón Tasa BCV en el Ticket POS */
html.dark #btn-tasa-bcv-pos {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

html.dark #btn-tasa-bcv-pos:hover {
  background-color: rgba(16, 185, 129, 0.3) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
}

/* Banner de Tasa Requerida en POS */
html.dark #banner-tasa-requerida {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: #ebe7e1 !important;
  color: #fef08a !important;
}

html.dark #banner-tasa-requerida p {
  color: #f8f7f5 !important;
}

/* Botón Fijar Tasa del Día en Modo Claro */
#btn-banner-fijar-tasa {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

#btn-banner-fijar-tasa:hover {
  background-color: #1e293b !important;
  color: #fef08a !important;
}

/* En Modo Oscuro */
html.dark #btn-banner-fijar-tasa {
  background-color: #f59e0b !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.dark #btn-banner-fijar-tasa:hover {
  background-color: #d97706 !important;
  color: #000000 !important;
}

/* Banner de Caja Cerrada */
html.dark #banner-caja-cerrada a {
  background-color: #ffffff !important;
  color: #be123c !important;
}

html.dark #banner-caja-cerrada a:hover {
  background-color: #ffe4e6 !important;
  color: #9f1239 !important;
}

/* Bloques de entrada monetaria multimoneda (USD, BS, COP) */
html.dark .item-moneda-pos {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color-strong) !important;
}

html.dark .item-moneda-pos:focus-within {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3) !important;
}

html.dark .badge-moneda-pos {
  background-color: #1a253e !important;
  border-right-color: var(--border-color-strong) !important;
  color: #cbd5e1 !important;
}

html.dark .item-moneda-input {
  color: #f8fafc !important;
  background: transparent !important;
}

/* Botón de Tickets en Espera */
html.dark .btn-espera-pos:disabled,
html.dark .btn-espera-pos.is-disabled {
  background-color: #141c2e !important;
  color: #64748b !important;
  border-color: #1e293b !important;
}

html.dark .btn-espera-pos:disabled svg,
html.dark .btn-espera-pos.is-disabled svg {
  color: #64748b !important;
  stroke: #64748b !important;
}

html.dark .btn-espera-pos:not(:disabled):not(.is-disabled) {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

html.dark .btn-espera-pos:not(:disabled):not(.is-disabled) svg {
  color: #fcd34d !important;
  stroke: #fcd34d !important;
}

html.dark .btn-espera-pos:not(:disabled):not(.is-disabled):hover {
  background-color: rgba(245, 158, 11, 0.28) !important;
  color: #fef08a !important;
  border-color: #fbbf24 !important;
}

/* Botones de incremento y decremento en el carrito */
html.dark .btn-sumar,
html.dark .btn-restar {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

html.dark .btn-sumar:hover,
html.dark .btn-restar:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Pestañas de método de pago en POS cuando están inactivas */
html.dark #tab-efectivo:not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-amber-600),
html.dark #tab-electronico:not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-amber-600),
html.dark #tab-credito:not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-amber-600) {
  background-color: #162035 !important;
  color: #cbd5e1 !important;
  border: 1px solid #212e4a !important;
}

html.dark #tab-efectivo:not(.bg-indigo-600):hover,
html.dark #tab-electronico:not(.bg-indigo-600):hover,
html.dark #tab-credito:not(.bg-amber-600):hover {
  background-color: #1f2b45 !important;
  color: #ffffff !important;
}

/* Tarjetas de Selección Rápida en Modal de Cobro */
html.dark #modal-sel-efectivo {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
}

html.dark #modal-sel-efectivo:hover {
  background-color: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
}

html.dark #modal-sel-electronico {
  background-color: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  color: #a5b4fc !important;
}

html.dark #modal-sel-electronico:hover {
  background-color: rgba(99, 102, 241, 0.25) !important;
  border-color: #6366f1 !important;
}

html.dark #modal-sel-credito {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fcd34d !important;
}

html.dark #modal-sel-credito:hover {
  background-color: rgba(245, 158, 11, 0.25) !important;
  border-color: #f59e0b !important;
}

/* Tarjetas de Producto en Cuadrícula POS */
html.dark .product-card {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

html.dark .product-card:hover {
  background-color: var(--bg-surface-elevated) !important;
  border-color: #6366f1 !important;
}

html.dark .product-card.opacity-50 {
  background-color: var(--bg-surface-alt) !important;
  opacity: 0.45 !important;
}

/* Botón Kilear en tarjeta de producto */
html.dark .btn-kilear-prod {
  background-color: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fcd34d !important;
}

html.dark .btn-kilear-prod:hover {
  background-color: rgba(245, 158, 11, 0.28) !important;
  border-color: #f59e0b !important;
  color: #fef08a !important;
}

/* Vuelto / Restante en POS */
html.dark #resumen-vuelto {
  background-color: var(--bg-surface-alt) !important;
  border-color: var(--border-color) !important;
}

/* Barra Operativa Dinámica de Caja Abierta en POS */
html.dark #banner-caja-abierta {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

html.dark #banner-caja-abierta #caja-sesion-info {
  color: var(--text-primary) !important;
}

html.dark #banner-caja-abierta #btn-ver-tickets-espera {
  background-color: var(--bg-surface-elevated) !important;
  border-color: var(--border-color-strong) !important;
  color: #e2e8f0 !important;
}

html.dark #banner-caja-abierta #btn-ver-tickets-espera:hover {
  background-color: #263554 !important;
  border-color: #f59e0b !important;
  color: #fef08a !important;
}

/* -----------------------------------------------------------------------------
   9. Controles de Reportes, Gastos e Inventario
   ----------------------------------------------------------------------------- */

html.dark .input-filtro-reportes {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
}

html.dark .input-filtro-reportes:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.25) !important;
}

html.dark .btn-limpiar-compacto {
  color: #cbd5e1 !important;
  border-color: var(--border-color-strong) !important;
}

html.dark .btn-limpiar-compacto:hover {
  background-color: var(--bg-surface-elevated) !important;
  color: #ffffff !important;
}

html.dark .btn-periodo:not(.bg-indigo-600):not(.bg-rose-600):not(.bg-emerald-600) {
  background-color: #162035 !important;
  color: #cbd5e1 !important;
  border: 1px solid #212e4a !important;
}

html.dark .btn-periodo:not(.bg-indigo-600):not(.bg-rose-600):not(.bg-emerald-600):hover {
  background-color: #22304c !important;
  color: #ffffff !important;
}

/* Botones de acción e impresión dentro del modal de detalle de venta en Modo Oscuro */
html.dark #btn-despachar-venta {
  background-color: #1d4ed8 !important;
  border: 1px solid #3b82f6 !important;
  color: #ffffff !important;
}

html.dark #btn-despachar-venta:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.dark #btn-asociar-factura-modal {
  background-color: #6b21a8 !important;
  border: 1px solid #a855f7 !important;
  color: #ffffff !important;
}

html.dark #btn-asociar-factura-modal:hover {
  background-color: #7e22ce !important;
  color: #ffffff !important;
}

html.dark #btn-imprimir-comprobante {
  background-color: #4338ca !important;
  border: 1px solid #6366f1 !important;
  color: #ffffff !important;
}

html.dark #btn-imprimir-comprobante:hover {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

html.dark #btn-imprimir-carta-venta,
html.dark #btn-imprimir-ticket-venta,
html.dark #btn-imprimir-forma-libre-venta {
  background-color: #1a253e !important;
  border-color: #2e3f64 !important;
  color: #e2e8f0 !important;
}

html.dark #btn-imprimir-carta-venta:hover,
html.dark #btn-imprimir-ticket-venta:hover,
html.dark #btn-imprimir-forma-libre-venta:hover {
  background-color: #263554 !important;
  color: #ffffff !important;
}

html.dark #btn-imprimir-carta-venta.ring-2,
html.dark #btn-imprimir-ticket-venta.ring-2,
html.dark #btn-imprimir-forma-libre-venta.ring-2 {
  background-color: rgba(99, 102, 241, 0.28) !important;
  border-color: #818cf8 !important;
  color: #c7d2fe !important;
}

html.dark #btn-cerrar-modal-venta-footer {
  background-color: #1a253e !important;
  color: #cbd5e1 !important;
  border: 1px solid #2e3f64 !important;
}

html.dark #btn-cerrar-modal-venta-footer:hover {
  background-color: #263554 !important;
  color: #ffffff !important;
}

html.dark #btn-cerrar-modal-venta,
html.dark #btn-cerrar-modal-asociar-factura {
  color: #94a3b8 !important;
}

html.dark #btn-cerrar-modal-venta:hover,
html.dark #btn-cerrar-modal-asociar-factura:hover {
  color: #ffffff !important;
  background-color: #1e293b !important;
}

/* -----------------------------------------------------------------------------
   10. Tablas y Filas
   ----------------------------------------------------------------------------- */

html.dark thead.bg-slate-50,
html.dark thead.bg-slate-100,
html.dark thead {
  background-color: var(--bg-surface-alt) !important;
  color: var(--text-muted) !important;
}

html.dark th {
  color: var(--text-muted) !important;
}

html.dark tbody tr {
  border-color: var(--border-color-subtle) !important;
}

html.dark tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* -----------------------------------------------------------------------------
   11. Modales, Diálogos y Notificaciones Toast In-App
   ----------------------------------------------------------------------------- */

html.dark .modal-dialog-in-app,
html.dark .fixed .bg-white,
html.dark [id^="modal-"] .bg-white {
  background-color: #121a2d !important;
  border-color: #212e4a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
  color: var(--text-primary) !important;
}

/* Notificaciones Toast en Modo Oscuro */
html.dark .toast-success {
  background-color: rgba(5, 36, 21, 0.96) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #a7f3d0 !important;
}

html.dark .toast-error {
  background-color: rgba(46, 11, 18, 0.96) !important;
  border-color: rgba(244, 63, 94, 0.5) !important;
  color: #fecdd3 !important;
}

html.dark .toast-warning {
  background-color: rgba(43, 27, 7, 0.96) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fef08a !important;
}

html.dark .toast-info {
  background-color: rgba(18, 24, 52, 0.96) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #c7d2fe !important;
}

/* Login Card Específica */
html.dark .bg-white\/95 {
  background-color: rgba(18, 26, 45, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
}

/* Botones de demostración en login */
html.dark .btn-demo {
  background-color: #162035 !important;
  border-color: #263554 !important;
}

html.dark .btn-demo:hover {
  background-color: #1f2b45 !important;
}

/* Banners no fiscales */
html.dark .banner-no-fiscal {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-left-color: #f59e0b !important;
  color: #fcd34d !important;
}

/* Iconos SVG monocromáticos para visibilidad */
html.dark img[src*="/icons/"]:not(.no-dark-invert) {
  filter: invert(0.88) brightness(1.15);
}

/* Contenedores interactivos de toggle en Administración */
html.dark [id^="contenedor-toggle-"] {
  background-color: var(--bg-surface-alt) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark [id^="contenedor-toggle-"]:hover {
  background-color: var(--bg-surface-elevated) !important;
}

/* Pestañas (Tabs) */
html.dark .tab-btn:not(.active):not(.bg-indigo-600) {
  color: var(--text-muted) !important;
}

html.dark .tab-btn:not(.active):not(.bg-indigo-600):hover {
  background-color: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
}

/* Tarjetas de Selección de Tema */
html.dark .card-selector-tema h3 {
  color: var(--text-primary) !important;
}

html.dark .card-selector-tema p {
  color: var(--text-muted) !important;
}

/* Scrollbars */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html.dark ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 9999px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* -----------------------------------------------------------------------------
   12. Interruptor de Tema y Selector de Temas
   ----------------------------------------------------------------------------- */
.btn-toggle-tema-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  background-color: var(--bg-surface-alt);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-toggle-tema-nav:hover {
  background-color: var(--bg-surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-color-strong);
  transform: translateY(-0.5px);
}

.btn-toggle-tema-nav:active {
  transform: translateY(0);
}

.btn-toggle-tema-nav svg {
  width: 1rem;
  height: 1rem;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-toggle-tema-nav:hover svg {
  transform: rotate(15deg) scale(1.08);
}

.card-selector-tema {
  cursor: pointer;
  user-select: none;
  border: 2px solid var(--border-color);
  background-color: var(--bg-surface-alt);
  border-radius: 1rem;
  padding: 1rem;
  transition: all 180ms ease;
  position: relative;
}

.card-selector-tema:hover {
  border-color: #818cf8;
  background-color: var(--bg-surface-elevated);
  transform: translateY(-1px);
}

.card-selector-tema.tema-activo {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 1px #6366f1, 0 4px 12px -2px rgba(99, 102, 241, 0.2);
}

.card-selector-tema .check-indicator {
  display: none;
}

.card-selector-tema.tema-activo .check-indicator {
  display: flex;
}

/* -----------------------------------------------------------------------------
   13. Protección Absoluta de Comprobantes de Impresión Físicos y Previsualización
   Garantiza texto negro puro sobre papel blanco para formatos Carta y Ticket.
   ----------------------------------------------------------------------------- */
html.dark .carta-print,
html.dark .carta-print *,
html.dark .ticket-print,
html.dark .ticket-print *,
html.dark #seccion-carta-print,
html.dark #seccion-carta-print *,
html.dark #seccion-ticket-print,
html.dark #seccion-ticket-print *,
html.dark #seccion-factura-fiscal-print,
html.dark #seccion-factura-fiscal-print * {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #cbd5e1 !important;
}

html.dark .carta-print thead,
html.dark #seccion-carta-print thead {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.dark .carta-print strong,
html.dark .carta-print b,
html.dark .ticket-print strong,
html.dark .ticket-print b {
  color: #000000 !important;
}

html.dark .carta-print span,
html.dark .ticket-print span {
  color: #000000 !important;
}

@media print {

  html.dark,
  html.dark body,
  [data-theme="dark"],
  [data-theme="dark"] body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  html.dark * {
    color-scheme: light !important;
    color: inherit !important;
  }
}

/* =============================================================================
   DARK MODE — DROPDOWN DE USUARIO EN NAVBAR
   ============================================================================= */

html.dark #usuario-badge:hover {
  background-color: rgba(99, 102, 241, 0.28) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
}

html.dark .usuario-dropdown-panel {
  background-color: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.3);
}

html.dark .usuario-dropdown-header {
  border-bottom-color: #2d3f5a;
}

html.dark .usuario-dropdown-header .dd-nombre {
  color: #e2e8f0;
}

html.dark .usuario-dropdown-header .dd-rol {
  color: #64748b;
}

html.dark .usuario-dropdown-item {
  color: #94a3b8;
}

html.dark .usuario-dropdown-item:hover {
  background-color: #273659;
  color: #e2e8f0;
}

html.dark .usuario-dropdown-item.item-peligro:hover {
  background-color: rgba(225, 29, 72, 0.12);
  color: #fb7185;
}

html.dark .usuario-dropdown-divisor {
  background-color: #2d3f5a;
}

/* =============================================================================
   15. Reglas de Alto Contraste para Botones Ámbar y Tabs DEV (Ambos Modos)
   ============================================================================= */

/* Regla crítica: Soporte nativo para botones ámbar ausentes en tailwind.min.css */
button.bg-amber-500,
a.bg-amber-500 {
  background-color: #f59e0b !important;
  color: #0f172a !important;
}

button.bg-amber-500:hover,
a.bg-amber-500:hover {
  background-color: #fbbf24 !important;
  color: #0f172a !important;
}

button.bg-amber-400,
a.bg-amber-400 {
  background-color: #fbbf24 !important;
  color: #0f172a !important;
}

button.bg-amber-500 *,
a.bg-amber-500 * {
  color: #0f172a !important;
}

/* Botones de acción en Banner de Turno Previo Interrumpido (POS) - Alto Contraste */
#banner-caja-interrumpida #btn-pos-cargar-libreta,
#banner-caja-interrumpida #btn-pos-cargar-libreta * {
  color: #ffffff !important;
}

#banner-caja-interrumpida a,
#banner-caja-interrumpida a *,
#banner-caja-interrumpida #btn-pos-ir-arqueo-z,
#banner-caja-interrumpida #btn-pos-ir-arqueo-z * {
  color: #ffffff !important;
}

/* Tab activa DEV: fondo gradiente ámbar real de alto impacto */
.tab-btn[aria-selected="true"],
#dev-tabs-nav .tab-btn[aria-selected="true"] {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
  color: #0f172a !important;
  border: 1px solid #d97706 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
  font-weight: 800 !important;
}

.tab-btn[aria-selected="true"] *,
#dev-tabs-nav .tab-btn[aria-selected="true"] * {
  color: #0f172a !important;
}

/* Tabs inactivas DEV en Modo Oscuro */
html.dark .tab-btn[aria-selected="false"],
html[data-theme="dark"] .tab-btn[aria-selected="false"] {
  background: transparent !important;
  color: #94a3b8 !important;
  border-color: transparent !important;
}

html.dark .tab-btn[aria-selected="false"]:hover,
html[data-theme="dark"] .tab-btn[aria-selected="false"]:hover {
  background: #1e293b !important;
  color: #f8fafc !important;
}

/* Tabs inactivas DEV en Modo Claro */
html:not(.dark) .tab-btn[aria-selected="false"],
html[data-theme="light"] .tab-btn[aria-selected="false"] {
  background: transparent !important;
  color: #475569 !important;
  border-color: transparent !important;
}

html:not(.dark) .tab-btn[aria-selected="false"]:hover,
html[data-theme="light"] .tab-btn[aria-selected="false"]:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* =============================================================================
   16. Adaptación Completa de Modo Claro para Panel DEV
   ============================================================================= */
html:not(.dark) body.dev-panel-body,
html[data-theme="light"] body.dev-panel-body {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html:not(.dark) .dev-panel-body header,
html[data-theme="light"] .dev-panel-body header {
  background-color: #ffffff !important;
  border-color: #fde68a !important;
  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.08) !important;
}

html:not(.dark) .dev-panel-body nav#dev-tabs-nav,
html[data-theme="light"] .dev-panel-body nav#dev-tabs-nav {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.07) !important;
}

html:not(.dark) .dev-panel-body .bg-slate-900,
html[data-theme="light"] .dev-panel-body .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .dev-panel-body [class*="bg-slate-900/"],
html[data-theme="light"] .dev-panel-body [class*="bg-slate-900/"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .dev-panel-body .bg-slate-800,
html:not(.dark) .dev-panel-body [class*="bg-slate-800/"],
html[data-theme="light"] .dev-panel-body .bg-slate-800,
html[data-theme="light"] .dev-panel-body [class*="bg-slate-800/"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html:not(.dark) .dev-panel-body input,
html:not(.dark) .dev-panel-body textarea,
html:not(.dark) .dev-panel-body select,
html[data-theme="light"] .dev-panel-body input,
html[data-theme="light"] .dev-panel-body textarea,
html[data-theme="light"] .dev-panel-body select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) .dev-panel-body input::placeholder,
html:not(.dark) .dev-panel-body textarea::placeholder,
html[data-theme="light"] .dev-panel-body input::placeholder,
html[data-theme="light"] .dev-panel-body textarea::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark) .dev-panel-body .border-slate-800,
html:not(.dark) .dev-panel-body .border-slate-700,
html[data-theme="light"] .dev-panel-body .border-slate-800,
html[data-theme="light"] .dev-panel-body .border-slate-700 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .dev-panel-body .text-slate-100,
html:not(.dark) .dev-panel-body .text-slate-200,
html[data-theme="light"] .dev-panel-body .text-slate-100,
html[data-theme="light"] .dev-panel-body .text-slate-200 {
  color: #0f172a !important;
}

html:not(.dark) .dev-panel-body .text-slate-300,
html:not(.dark) .dev-panel-body .text-slate-400,
html[data-theme="light"] .dev-panel-body .text-slate-300,
html[data-theme="light"] .dev-panel-body .text-slate-400 {
  color: #475569 !important;
}

html:not(.dark) .dev-panel-body .text-slate-500,
html:not(.dark) .dev-panel-body .text-slate-600,
html[data-theme="light"] .dev-panel-body .text-slate-500,
html[data-theme="light"] .dev-panel-body .text-slate-600 {
  color: #64748b !important;
}

html:not(.dark) .dev-panel-body .text-amber-400,
html[data-theme="light"] .dev-panel-body .text-amber-400 {
  color: #d97706 !important;
}

html:not(.dark) .dev-panel-body .text-amber-300,
html:not(.dark) .dev-panel-body [class*="text-amber-300/"],
html[data-theme="light"] .dev-panel-body .text-amber-300,
html[data-theme="light"] .dev-panel-body [class*="text-amber-300/"] {
  color: #b45309 !important;
}

html:not(.dark) .dev-panel-body .bg-amber-950,
html:not(.dark) .dev-panel-body [class*="bg-amber-950/"],
html[data-theme="light"] .dev-panel-body .bg-amber-950,
html[data-theme="light"] .dev-panel-body [class*="bg-amber-950/"] {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
}

html:not(.dark) .dev-panel-body #usuario-badge,
html:not(.dark) .dev-panel-body #btn-dev-ver-terminos,
html[data-theme="light"] .dev-panel-body #usuario-badge,
html[data-theme="light"] .dev-panel-body #btn-dev-ver-terminos {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

html:not(.dark) .dev-panel-body #btn-toggle-tema,
html[data-theme="light"] .dev-panel-body #btn-toggle-tema {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #4f46e5 !important;
}

html:not(.dark) .dev-panel-body #btn-logout,
html[data-theme="light"] .dev-panel-body #btn-logout {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

html:not(.dark) .dev-panel-body #btn-logout:hover,
html[data-theme="light"] .dev-panel-body #btn-logout:hover {
  background-color: #ffe4e6 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}