/* ============================================
   SISTEMA DE TEMAS - CLARO Y OSCURO
   ============================================ */

/* TEMA CLARO - FORZAR TODO A CLARO SIN EXCEPCIÓN */

/* Base: HTML, Body, Root */
html:not(.dark) {
  background: #f8f9fa !important;
}

html:not(.dark) body {
  background-color: #f8f9fa !important;
  color: #1a1a1a !important;
}

html:not(.dark) #root {
  background-color: #f8f9fa !important;
}

/* TODOS los DIVs con fondo oscuro - SIN EXCEPCIÓN */
html:not(.dark) div[class*="bg-[#"],
html:not(.dark) div[class*="bg-black"],
html:not(.dark) div[class*="bg-gray-"],
html:not(.dark) section[class*="bg-[#"],
html:not(.dark) section[class*="bg-black"],
html:not(.dark) section[class*="bg-gray-"],
html:not(.dark) nav[class*="bg-[#"],
html:not(.dark) nav[class*="bg-black"],
html:not(.dark) nav[class*="bg-gray-"],
html:not(.dark) header[class*="bg-[#"],
html:not(.dark) header[class*="bg-black"],
html:not(.dark) header[class*="bg-gray-"],
html:not(.dark) footer[class*="bg-[#"],
html:not(.dark) footer[class*="bg-black"],
html:not(.dark) footer[class*="bg-gray-"],
html:not(.dark) aside[class*="bg-[#"],
html:not(.dark) aside[class*="bg-black"],
html:not(.dark) aside[class*="bg-gray-"],
html:not(.dark) main[class*="bg-[#"],
html:not(.dark) main[class*="bg-black"],
html:not(.dark) main[class*="bg-gray-"] {
  background-color: #ffffff !important;
}

/* Específicos por código HEX - Todos los tonos oscuros */
html:not(.dark) [class*="bg-[#0"],
html:not(.dark) [class*="bg-[#1"],
html:not(.dark) [class*="bg-[#2"],
html:not(.dark) [class*="bg-[#3"],
html:not(.dark) [class*="bg-[#4"],
html:not(.dark) [class*="bg-[#5"] {
  background-color: #ffffff !important;
}

/* Casos específicos muy usados */
html:not(.dark) [class*="bg-[#0D0D0D]"],
html:not(.dark) [class*="bg-[#252525]"],
html:not(.dark) [class*="bg-[#2A2A2A]"] {
  background-color: #ffffff !important;
}

/* Grises de Tailwind */
html:not(.dark) [class*="bg-gray-700"],
html:not(.dark) [class*="bg-gray-800"],
html:not(.dark) [class*="bg-gray-900"],
html:not(.dark) [class*="bg-gray-950"],
html:not(.dark) [class*="bg-black"] {
  background-color: #ffffff !important;
}

html:not(.dark) [class*="bg-gray-600"] {
  background-color: #f8f9fa !important;
}

/* TODOS los textos blancos a negro - EXCEPTO hovers */
html:not(.dark) [class*="text-white"]:not([class*="hover:text-white"]),
html:not(.dark) [class*="text-gray-100"]:not([class*="hover:"]),
html:not(.dark) [class*="text-gray-200"]:not([class*="hover:"]),
html:not(.dark) [class*="text-gray-300"]:not([class*="hover:"]) {
  color: #1a1a1a !important;
}

html:not(.dark) [class*="text-gray-400"],
html:not(.dark) [class*="text-gray-500"],
html:not(.dark) [class*="text-gray-600"] {
  color: #6b7280 !important;
}

/* Excepción: mantener colores de marca y estados */
html:not(.dark) .text-brand-yellow,
html:not(.dark) [class*="text-yellow"],
html:not(.dark) [class*="text-red"],
html:not(.dark) [class*="text-green"],
html:not(.dark) [class*="text-blue"],
html:not(.dark) [class*="text-orange"],
html:not(.dark) [class*="text-purple"] {
  /* Mantener su color original */
}

/* TODOS los bordes oscuros a claros */
html:not(.dark) [class*="border-white"],
html:not(.dark) [class*="border-gray-700"],
html:not(.dark) [class*="border-gray-800"],
html:not(.dark) [class*="border-gray-900"],
html:not(.dark) [class*="border-black"] {
  border-color: #e5e7eb !important;
}

html:not(.dark) [class*="border-white/"],
html:not(.dark) [class*="border-black/"] {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Inputs, Textareas, Selects */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #d1d5db !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #9ca3af !important;
}

/* Autocomplete fix para tema claro */
html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:focus,
html:not(.dark) input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  caret-color: #1a1a1a !important;
}

/* Buttons - TODOS menos los de color de marca */
html:not(.dark) button:not([class*="hover:text-white"]) {
  color: #1a1a1a !important;
}

html:not(.dark) button[class*="bg-[#"]:not([class*="hover:bg-"]) {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
}

/* Mantener botones de marca */
html:not(.dark) button[class*="bg-brand-yellow"],
html:not(.dark) button[class*="bg-yellow"],
html:not(.dark) button[class*="bg-red"],
html:not(.dark) button[class*="bg-green"],
html:not(.dark) button[class*="bg-blue"] {
  /* Mantener su color original */
}

/* Tablas */
html:not(.dark) table {
  background-color: #ffffff !important;
}

html:not(.dark) thead {
  background-color: #f8f9fa !important;
}

html:not(.dark) th {
  background-color: #f8f9fa !important;
  color: #1a1a1a !important;
  border-color: #e5e7eb !important;
}

html:not(.dark) td {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #e5e7eb !important;
}

html:not(.dark) tbody tr {
  border-color: #e5e7eb !important;
}

html:not(.dark) tbody tr:nth-child(even) {
  background-color: #f9fafb !important;
}

/* Listas */
html:not(.dark) ul,
html:not(.dark) ol,
html:not(.dark) li {
  color: #1a1a1a !important;
}

/* Spans y párrafos */
html:not(.dark) p,
html:not(.dark) span,
html:not(.dark) label,
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
  color: inherit !important;
}

/* SVG Icons - mantener su color */
html:not(.dark) svg {
  /* Los SVG mantienen su color de clase */
}

/* Scrollbar */
html:not(.dark) ::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

html:not(.dark) ::-webkit-scrollbar-track {
  background: #f3f4f6 !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #d1d5db !important;
  border-radius: 4px !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af !important;
}

/* Modales y overlays */
/* Overlay oscuro semi-transparente - mantener para modales */
html:not(.dark) [class*="bg-black/80"],
html:not(.dark) [class*="bg-black/70"],
html:not(.dark) [class*="bg-black/60"],
html:not(.dark) [class*="bg-black/50"] {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Overlay semi-transparente */
}

/* Contenido de modales - fondo blanco */
html:not(.dark) .fixed [class*="bg-[#"],
html:not(.dark) .absolute [class*="bg-[#"] {
  background-color: #ffffff !important;
}

/* Cards y contenedores redondeados */
html:not(.dark) [class*="rounded"] {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Dividers */
html:not(.dark) hr {
  border-color: #e5e7eb !important;
}

/* Select options */
html:not(.dark) select option {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* ========================================
   HOVERS - Permitir efectos interactivos
   ======================================== */

/* Hover de FONDO gris oscuro (navbar y botones) */
html:not(.dark) [class*="hover:bg-white/5"]:hover,
html:not(.dark) [class*="hover:bg-white/10"]:hover,
html:not(.dark) [class*="hover:bg-gray-800"]:hover,
html:not(.dark) [class*="hover:bg-gray-700"]:hover,
html:not(.dark) [class*="hover:bg-gray-900"]:hover {
  background-color: #374151 !important; /* Gris oscuro visible en tema claro */
}

html:not(.dark) [class*="hover:bg-[#"]:hover {
  background-color: #374151 !important; /* Gris oscuro para hovers con hex */
}

/* Efectos internos de hover (Sidebar) */
html:not(.dark) .group:hover .bg-white\/5 {
  background-color: #374151 !important;
}

/* Hover de TEXTO blanco (navbar) */
html:not(.dark) [class*="hover:text-white"]:hover,
html:not(.dark) .group:hover [class*="group-hover:text-white"] {
  color: #ffffff !important;
}

/* Hover de texto amarillo (marca) */
html:not(.dark) [class*="hover:text-brand-yellow"]:hover {
  color: #F3A300 !important;
}

/* Otros hovers de texto con grises */
html:not(.dark) [class*="hover:text-gray-"]:hover {
  /* Permitir que funcione normalmente */
}

/* Focus states */
html:not(.dark) *:focus {
  outline-color: #F3A300 !important;
}

/* Placeholder fix adicional */
html:not(.dark) ::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}