/* ==========================================================================
   LLOTA - Dark Mode Overrides
   Diseñado para alto contraste, recuadros nítidos y alertas bien definidas.
   Activo estrictamente cuando html tiene la clase .dark-mode
   ========================================================================== */

/* --- Base & Fondo Global --- */
html.dark-mode {
    color-scheme: dark;
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
}

html.dark-mode body {
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
    background-image: radial-gradient(#1e293b 1px, transparent 1px) !important;
}

/* --- Superficies y Tarjetas (Cards, Paneles, Contenedores) --- */
html.dark-mode .bg-white,
html.dark-mode .bg-slate-50,
html.dark-mode .bg-gray-50,
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .section-card,
html.dark-mode .glass,
html.dark-mode .glass-panel,
html.dark-mode .glass-card {
    background-color: #151c2c !important;
    color: #f8fafc !important;
    border-color: #2a364f !important;
}

/* Chat & tickets messages (contacto.html) */
html.dark-mode .msg-agent {
    background: #1b2438 !important;
    background-color: #1b2438 !important;
    border-color: #3b4761 !important;
    color: #f8fafc !important;
}

html.dark-mode .msg-user {
    background: #151c2c !important;
    background-color: #151c2c !important;
    border-color: #2a364f !important;
    color: #f8fafc !important;
}

html.dark-mode .bg-slate-100,
html.dark-mode .bg-gray-100 {
    background-color: #1b2438 !important;
}

html.dark-mode .bg-slate-200,
html.dark-mode .bg-gray-200 {
    background-color: #243047 !important;
}

html.dark-mode .bg-slate-800,
html.dark-mode .bg-slate-900,
html.dark-mode .bg-slate-950 {
    background-color: #0f172a !important;
}

/* --- Bordes Nítidos y Estructurados --- */
html.dark-mode .border-slate-100,
html.dark-mode .border-gray-100,
html.dark-mode .border-slate-200,
html.dark-mode .border-gray-200,
html.dark-mode .border-white {
    border-color: #2a364f !important;
}

html.dark-mode .border-slate-300,
html.dark-mode .border-gray-300 {
    border-color: #3b4761 !important;
}

/* Divide colors (separadores de listas y tablas) */
html.dark-mode .divide-slate-100 > * + *,
html.dark-mode .divide-gray-100 > * + *,
html.dark-mode .divide-slate-200 > * + *,
html.dark-mode .divide-gray-200 > * + * {
    border-color: #222d42 !important;
}

/* --- Sombras Nítidas para Profundidad --- */
html.dark-mode .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .shadow,
html.dark-mode .shadow-md {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 0 1px #222d42 !important;
}

html.dark-mode .shadow-lg,
html.dark-mode .shadow-xl,
html.dark-mode .shadow-2xl {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 0 1px #2a364f !important;
}

/* ==========================================================================
   SISTEMA DE ALERTAS, MENSAJES Y NOTIFICACIONES (Alto Contraste y Claridad)
   ========================================================================== */

/* Error / Peligro (Rojo) */
html.dark-mode .bg-red-50,
html.dark-mode .bg-red-100,
html.dark-mode .bg-red-200,
html.dark-mode .alert-error,
html.dark-mode .message-error {
    background-color: rgba(239, 68, 68, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
}

html.dark-mode .text-red-500,
html.dark-mode .text-red-600,
html.dark-mode .text-red-700,
html.dark-mode .text-red-800,
html.dark-mode .text-red-900 {
    color: #f87171 !important;
}

html.dark-mode .border-red-100,
html.dark-mode .border-red-200,
html.dark-mode .border-red-300 {
    border-color: rgba(239, 68, 68, 0.45) !important;
}

html.dark-mode .border-red-400,
html.dark-mode .border-red-500 {
    border-color: #ef4444 !important;
}

/* Éxito (Verde) */
html.dark-mode .bg-green-50,
html.dark-mode .bg-green-100,
html.dark-mode .bg-green-200,
html.dark-mode .alert-success,
html.dark-mode .message-success {
    background-color: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
}

html.dark-mode .text-green-500,
html.dark-mode .text-green-600,
html.dark-mode .text-green-700,
html.dark-mode .text-green-800,
html.dark-mode .text-green-900 {
    color: #34d399 !important;
}

html.dark-mode .border-green-100,
html.dark-mode .border-green-200,
html.dark-mode .border-green-300 {
    border-color: rgba(16, 185, 129, 0.45) !important;
}

html.dark-mode .border-green-400,
html.dark-mode .border-green-500 {
    border-color: #10b981 !important;
}

/* Advertencia (Ámbar / Amarillo / Naranja) */
html.dark-mode .bg-amber-50,
html.dark-mode .bg-amber-100,
html.dark-mode .bg-amber-200,
html.dark-mode .bg-yellow-50,
html.dark-mode .bg-yellow-100,
html.dark-mode .bg-yellow-200,
html.dark-mode .alert-warning,
html.dark-mode .message-warning {
    background-color: rgba(245, 158, 11, 0.18) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #fde047 !important;
}

html.dark-mode .text-amber-500,
html.dark-mode .text-amber-600,
html.dark-mode .text-amber-700,
html.dark-mode .text-amber-800,
html.dark-mode .text-amber-900,
html.dark-mode .text-yellow-500,
html.dark-mode .text-yellow-600,
html.dark-mode .text-yellow-700,
html.dark-mode .text-yellow-800,
html.dark-mode .text-yellow-900 {
    color: #facc15 !important;
}

html.dark-mode .border-amber-100,
html.dark-mode .border-amber-200,
html.dark-mode .border-amber-300,
html.dark-mode .border-yellow-100,
html.dark-mode .border-yellow-200,
html.dark-mode .border-yellow-300 {
    border-color: rgba(245, 158, 11, 0.5) !important;
}

html.dark-mode .border-amber-400,
html.dark-mode .border-amber-500,
html.dark-mode .border-yellow-400,
html.dark-mode .border-yellow-500 {
    border-color: #f59e0b !important;
}

html.dark-mode .bg-orange-50,
html.dark-mode .bg-orange-100,
html.dark-mode .bg-orange-200 {
    background-color: rgba(249, 115, 22, 0.18) !important;
    border: 1px solid rgba(249, 115, 22, 0.5) !important;
    color: #fdba74 !important;
}

html.dark-mode .text-orange-500,
html.dark-mode .text-orange-600,
html.dark-mode .text-orange-700,
html.dark-mode .text-orange-800,
html.dark-mode .text-orange-900 {
    color: #fb923c !important;
}

html.dark-mode .border-orange-100,
html.dark-mode .border-orange-200,
html.dark-mode .border-orange-300 {
    border-color: rgba(249, 115, 22, 0.5) !important;
}

/* Información / Marca (Azul / Cyan / Morado) */
html.dark-mode .bg-blue-50,
html.dark-mode .bg-blue-100,
html.dark-mode .bg-blue-200,
html.dark-mode .bg-cyan-50,
html.dark-mode .bg-cyan-100,
html.dark-mode .bg-cyan-200,
html.dark-mode .alert-info,
html.dark-mode .message-info {
    background-color: rgba(59, 130, 246, 0.18) !important;
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
    color: #93c5fd !important;
}

html.dark-mode .text-blue-500,
html.dark-mode .text-blue-600,
html.dark-mode .text-blue-700,
html.dark-mode .text-blue-800,
html.dark-mode .text-blue-900,
html.dark-mode .text-cyan-600,
html.dark-mode .text-cyan-700,
html.dark-mode .text-cyan-800,
html.dark-mode .text-cyan-900 {
    color: #60a5fa !important;
}

html.dark-mode .border-blue-100,
html.dark-mode .border-blue-200,
html.dark-mode .border-blue-300,
html.dark-mode .border-cyan-100,
html.dark-mode .border-cyan-200,
html.dark-mode .border-cyan-300 {
    border-color: rgba(59, 130, 246, 0.45) !important;
}

html.dark-mode .border-blue-400,
html.dark-mode .border-blue-500,
html.dark-mode .border-cyan-400,
html.dark-mode .border-cyan-500 {
    border-color: #3b82f6 !important;
}

html.dark-mode .bg-purple-50,
html.dark-mode .bg-purple-100,
html.dark-mode .bg-purple-200 {
    background-color: rgba(139, 92, 246, 0.18) !important;
    border: 1px solid rgba(139, 92, 246, 0.45) !important;
    color: #c4b5fd !important;
}

html.dark-mode .text-purple-600,
html.dark-mode .text-purple-700,
html.dark-mode .text-purple-800,
html.dark-mode .text-purple-900 {
    color: #c084fc !important;
}

html.dark-mode .border-purple-100,
html.dark-mode .border-purple-200,
html.dark-mode .border-purple-300 {
    border-color: rgba(139, 92, 246, 0.45) !important;
}

html.dark-mode .border-purple-400,
html.dark-mode .border-purple-500 {
    border-color: #8b5cf6 !important;
}

html.dark-mode .text-indigo-600,
html.dark-mode .text-indigo-700,
html.dark-mode .text-indigo-800,
html.dark-mode .text-indigo-900 {
    color: #818cf8 !important;
}

html.dark-mode .bg-indigo-50,
html.dark-mode .bg-indigo-100,
html.dark-mode .bg-indigo-200 {
    background-color: rgba(99, 102, 241, 0.18) !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    color: #a5b4fc !important;
}

html.dark-mode .border-indigo-100,
html.dark-mode .border-indigo-200,
html.dark-mode .border-indigo-300 {
    border-color: rgba(99, 102, 241, 0.45) !important;
}

html.dark-mode .text-pink-600,
html.dark-mode .text-pink-700,
html.dark-mode .text-pink-800,
html.dark-mode .text-pink-900 {
    color: #f472b6 !important;
}

html.dark-mode .border-pink-100,
html.dark-mode .border-pink-200 {
    border-color: rgba(236, 72, 153, 0.45) !important;
}

/* ==========================================================================
   GRADIENTES - Tarjetas con bg-gradient-to-* de colores claros
   Se convierten a superficies oscuras con borde sutil del color dominante
   ========================================================================== */

/* Gradientes morado/índigo (documentacion.html, historia.html) */
html.dark-mode [class*="from-purple-50"],
html.dark-mode [class*="from-indigo-50"],
html.dark-mode [class*="to-indigo-50"],
html.dark-mode [class*="to-purple-50"] {
    background: #151c2c !important;
    background-image: none !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #f8fafc !important;
}

/* Gradientes azul/índigo (reglas.html) */
html.dark-mode [class*="from-blue-50"],
html.dark-mode [class*="to-blue-50"] {
    background: #151c2c !important;
    background-image: none !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #f8fafc !important;
}

/* Gradientes amarillo/ámbar (documentacion.html) */
html.dark-mode [class*="from-yellow-50"],
html.dark-mode [class*="from-amber-50"],
html.dark-mode [class*="to-amber-50"],
html.dark-mode [class*="to-yellow-50"] {
    background: #151c2c !important;
    background-image: none !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #f8fafc !important;
}

/* Gradientes rosa/morado (doc-awards.html) */
html.dark-mode [class*="from-pink-50"],
html.dark-mode [class*="to-pink-50"] {
    background: #151c2c !important;
    background-image: none !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
    color: #f8fafc !important;
}

/* Gradiente to-white (reglas.html, historia.html) — para from-*-50 to-white */
html.dark-mode [class*="to-white"] {
    background: #151c2c !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   TIPOGRAFÍA Y CONTRASTE DE TEXTO
   ========================================================================== */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .text-slate-900,
html.dark-mode .text-gray-900,
html.dark-mode .text-slate-800,
html.dark-mode .text-gray-800 {
    color: #f8fafc !important;
}

html.dark-mode .text-slate-700,
html.dark-mode .text-gray-700,
html.dark-mode .text-slate-600,
html.dark-mode .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark-mode .text-slate-500,
html.dark-mode .text-gray-500,
html.dark-mode .text-slate-400,
html.dark-mode .text-gray-400 {
    color: #94a3b8 !important;
}

html.dark-mode a:not([class*="btn-"]):not([class*="bg-"]) {
    color: #38bdf8 !important;
}

html.dark-mode a:not([class*="btn-"]):not([class*="bg-"]):hover {
    color: #7dd3fc !important;
}

/* ==========================================================================
   FORMULARIOS, INPUTS Y CONTROLES
   ========================================================================== */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark-mode textarea,
html.dark-mode select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #3b4761 !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background-color: #0f172a !important;
    border-color: #8b5cf6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b !important;
}

/* ==========================================================================
   TABLAS CON BORDES DEFINIDOS
   ========================================================================== */
html.dark-mode table {
    background-color: #151c2c !important;
    color: #f8fafc !important;
    border-color: #2a364f !important;
}

html.dark-mode thead,
html.dark-mode th {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom: 2px solid #2a364f !important;
}

html.dark-mode tbody tr {
    border-bottom: 1px solid #222d42 !important;
}

html.dark-mode tbody tr:hover {
    background-color: #1b2438 !important;
}

/* ==========================================================================
   MODALES, DIÁLOGOS Y DROPDOWNS
   ========================================================================== */
html.dark-mode [role="dialog"],
html.dark-mode .modal,
html.dark-mode [role="menu"] {
    background-color: #151c2c !important;
    color: #f8fafc !important;
    border: 1px solid #3b4761 !important;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.85) !important;
}

/* ==========================================================================
   ESTADOS HOVER Y ACCIÓN
   ========================================================================== */
html.dark-mode .hover\:bg-slate-50:hover,
html.dark-mode .hover\:bg-gray-50:hover {
    background-color: #1e283d !important;
}

html.dark-mode .hover\:bg-slate-100:hover,
html.dark-mode .hover\:bg-gray-100:hover {
    background-color: #243047 !important;
}

html.dark-mode .hover\:bg-white:hover {
    background-color: #1b2438 !important;
}

html.dark-mode .hover\:bg-purple-50:hover {
    background-color: rgba(139, 92, 246, 0.22) !important;
}

/* ==========================================================================
   PRESERVACIÓN DE BOTONES Y ACENTOS
   ========================================================================== */
html.dark-mode .btn-primary,
html.dark-mode .bg-blue-600,
html.dark-mode .bg-purple-600,
html.dark-mode .bg-teal-600,
html.dark-mode .bg-green-600,
html.dark-mode .bg-red-600 {
    color: #ffffff !important;
}

/* Badges con fondo semitransparente vivo */
html.dark-mode span.rounded-full {
    border: 1px solid currentColor !important;
}

/* Preservación de bordes de acento lateral (Callouts / Alerts) */
html.dark-mode .border-l-4 {
    border-left-width: 4px !important;
}
html.dark-mode .border-l-2 {
    border-left-width: 2px !important;
}