/* ESQUEMA DE COLOR NATIVO DEL NAVEGADOR */
html.dark, html.theme-cyberpunk {
    color-scheme: dark;
}
html:not(.dark):not(.theme-cyberpunk) {
    color-scheme: light;
}

/* TEMA CLARO POR DEFECTO (Con paleta oficial Quihui: Turquesa #01D1C3 y Lima #76E000) */
html:not(.dark) {
    --bg-color: #eef2f3;
    --surface-lowest: #ffffff;
    --surface-low: #f4f7f7;
    --surface-container: #e5ecec;
    --surface-container-high: #d5dfdf;
    --surface-container-highest: #b8c7c7;
    --text-main: #111827;
    --text-muted: #4b5563;
    --border: #cbd5d5;
    --primary-accent: #008f85;
    --primary-btn: #01d1c3;
    --primary-btn-hover: #00b8ac;
    --primary-btn-text: #00201e;
}

/* TEMAS ADICIONALES */
html.theme-ocean {
    --bg-color: #e0f2fe;
    --surface-lowest: #ffffff;
    --surface-low: #f0f9ff;
    --surface-container: #bae6fd;
    --surface-container-high: #7dd3fc;
    --surface-container-highest: #38bdf8;
    --text-main: #0c4a6e;
    --text-muted: #0284c7;
    --border: #7dd3fc;
    --primary-accent: #0ea5e9;
}
html.theme-forest {
    --bg-color: #dcfce7;
    --surface-lowest: #ffffff;
    --surface-low: #f0fdf4;
    --surface-container: #bbf7d0;
    --surface-container-high: #86efac;
    --surface-container-highest: #4ade80;
    --text-main: #14532d;
    --text-muted: #166534;
    --border: #86efac;
    --primary-accent: #22c55e;
}
html.theme-sunset {
    --bg-color: #fef3c7;
    --surface-lowest: #ffffff;
    --surface-low: #fffbeb;
    --surface-container: #fde68a;
    --surface-container-high: #fcd34d;
    --surface-container-highest: #fbbf24;
    --text-main: #78350f;
    --text-muted: #92400e;
    --border: #fcd34d;
    --primary-accent: #f59e0b;
}
html.theme-lavender {
    --bg-color: #f3e8ff;
    --surface-lowest: #ffffff;
    --surface-low: #faf5ff;
    --surface-container: #e9d5ff;
    --surface-container-high: #d8b4fe;
    --surface-container-highest: #c084fc;
    --text-main: #4c1d95;
    --text-muted: #6b21a8;
    --border: #d8b4fe;
    --primary-accent: #a855f7;
}
html.theme-cyberpunk {
    --bg-color: #09090b;
    --surface-lowest: #18181b;
    --surface-low: #27272a;
    --surface-container: #3f3f46;
    --surface-container-high: #52525b;
    --surface-container-highest: #71717a;
    --text-main: #f472b6;
    --text-muted: #a1a1aa;
    --border: #be185d;
    --primary-accent: #06b6d4;
}

/* APLICAR VARIABLES PARA SUPERAR A TAILWIND */
html:not(.dark) body, html.theme-ocean body, html.theme-forest body, html.theme-sunset body, html.theme-lavender body, html.theme-cyberpunk body {
    background-color: var(--bg-color) !important; color: var(--text-main) !important;
}
html:not(.dark) .bg-background, html.theme-ocean .bg-background, html.theme-forest .bg-background, html.theme-sunset .bg-background, html.theme-lavender .bg-background, html.theme-cyberpunk .bg-background { background-color: var(--bg-color) !important; }

html:not(.dark) .bg-surface-container-lowest, html.theme-ocean .bg-surface-container-lowest, html.theme-forest .bg-surface-container-lowest, html.theme-sunset .bg-surface-container-lowest, html.theme-lavender .bg-surface-container-lowest, html.theme-cyberpunk .bg-surface-container-lowest { background-color: var(--surface-lowest) !important; border-color: var(--border) !important; }

html:not(.dark) .bg-surface-container-low, html.theme-ocean .bg-surface-container-low, html.theme-forest .bg-surface-container-low, html.theme-sunset .bg-surface-container-low, html.theme-lavender .bg-surface-container-low, html.theme-cyberpunk .bg-surface-container-low { background-color: var(--surface-low) !important; border-color: var(--border) !important; }

html:not(.dark) .bg-surface-container, html.theme-ocean .bg-surface-container, html.theme-forest .bg-surface-container, html.theme-sunset .bg-surface-container, html.theme-lavender .bg-surface-container, html.theme-cyberpunk .bg-surface-container { background-color: var(--surface-container) !important; border-color: var(--border) !important; }

/* NUEVOS CONTENEDORES HIGH Y HIGHEST */
html:not(.dark) .bg-surface-container-high, html.theme-ocean .bg-surface-container-high, html.theme-forest .bg-surface-container-high, html.theme-sunset .bg-surface-container-high, html.theme-lavender .bg-surface-container-high, html.theme-cyberpunk .bg-surface-container-high { background-color: var(--surface-container-high) !important; border-color: var(--border) !important; }

html:not(.dark) .bg-surface-container-highest, html.theme-ocean .bg-surface-container-highest, html.theme-forest .bg-surface-container-highest, html.theme-sunset .bg-surface-container-highest, html.theme-lavender .bg-surface-container-highest, html.theme-cyberpunk .bg-surface-container-highest { background-color: var(--surface-container-highest) !important; border-color: var(--border) !important; }

html:not(.dark) .text-on-surface, html.theme-ocean .text-on-surface, html.theme-forest .text-on-surface, html.theme-sunset .text-on-surface, html.theme-lavender .text-on-surface, html.theme-cyberpunk .text-on-surface { color: var(--text-main) !important; }

html:not(.dark) .text-on-surface-variant, html.theme-ocean .text-on-surface-variant, html.theme-forest .text-on-surface-variant, html.theme-sunset .text-on-surface-variant, html.theme-lavender .text-on-surface-variant, html.theme-cyberpunk .text-on-surface-variant { color: var(--text-muted) !important; }

html:not(.dark) .text-outline, html.theme-ocean .text-outline, html.theme-forest .text-outline, html.theme-sunset .text-outline, html.theme-lavender .text-outline, html.theme-cyberpunk .text-outline { color: var(--text-muted) !important; }

html:not(.dark) .border-surface-container, html:not(.dark) .border-surface-container-high,
html.theme-ocean .border-surface-container, html.theme-ocean .border-surface-container-high,
html.theme-forest .border-surface-container, html.theme-forest .border-surface-container-high,
html.theme-sunset .border-surface-container, html.theme-sunset .border-surface-container-high,
html.theme-lavender .border-surface-container, html.theme-lavender .border-surface-container-high,
html.theme-cyberpunk .border-surface-container, html.theme-cyberpunk .border-surface-container-high { border-color: var(--border) !important; }

html:not(.dark) .bg-primary { background-color: var(--primary-btn, var(--primary-accent)) !important; color: var(--primary-btn-text, #00201e) !important; font-weight: 600 !important; }
html:not(.dark) .bg-primary:hover { background-color: var(--primary-btn-hover, var(--primary-accent)) !important; }
html.theme-ocean .bg-primary, html.theme-forest .bg-primary, html.theme-sunset .bg-primary, html.theme-lavender .bg-primary, html.theme-cyberpunk .bg-primary { background-color: var(--primary-accent) !important; color: white !important; }

html:not(.dark) .text-primary, html.theme-ocean .text-primary, html.theme-forest .text-primary, html.theme-sunset .text-primary, html.theme-lavender .text-primary, html.theme-cyberpunk .text-primary { color: var(--primary-accent) !important; }
html:not(.dark) .border-primary, html.theme-ocean .border-primary, html.theme-forest .border-primary, html.theme-sunset .border-primary, html.theme-lavender .border-primary, html.theme-cyberpunk .border-primary { border-color: var(--primary-accent) !important; }

/* CORRECCIÓN DE BUGS DE HOVER EN MODO CLARO */
html:not(.dark) .hover\:bg-surface-container-low:hover, html.theme-ocean .hover\:bg-surface-container-low:hover, html.theme-forest .hover\:bg-surface-container-low:hover, html.theme-sunset .hover\:bg-surface-container-low:hover, html.theme-lavender .hover\:bg-surface-container-low:hover, html.theme-cyberpunk .hover\:bg-surface-container-low:hover { background-color: var(--surface-low) !important; }

html:not(.dark) .hover\:bg-surface-container:hover, html.theme-ocean .hover\:bg-surface-container:hover, html.theme-forest .hover\:bg-surface-container:hover, html.theme-sunset .hover\:bg-surface-container:hover, html.theme-lavender .hover\:bg-surface-container:hover, html.theme-cyberpunk .hover\:bg-surface-container:hover { background-color: var(--surface-container) !important; }

html:not(.dark) .hover\:bg-surface-container-high:hover, html.theme-ocean .hover\:bg-surface-container-high:hover, html.theme-forest .hover\:bg-surface-container-high:hover, html.theme-sunset .hover\:bg-surface-container-high:hover, html.theme-lavender .hover\:bg-surface-container-high:hover, html.theme-cyberpunk .hover\:bg-surface-container-high:hover { background-color: var(--surface-container-high) !important; }

html:not(.dark) .hover\:bg-surface-container-highest:hover, html.theme-ocean .hover\:bg-surface-container-highest:hover, html.theme-forest .hover\:bg-surface-container-highest:hover, html.theme-sunset .hover\:bg-surface-container-highest:hover, html.theme-lavender .hover\:bg-surface-container-highest:hover, html.theme-cyberpunk .hover\:bg-surface-container-highest:hover { background-color: var(--surface-container-highest) !important; }

html:not(.dark) .hover\:bg-surface-container-lowest:hover, html.theme-ocean .hover\:bg-surface-container-lowest:hover, html.theme-forest .hover\:bg-surface-container-lowest:hover, html.theme-sunset .hover\:bg-surface-container-lowest:hover, html.theme-lavender .hover\:bg-surface-container-lowest:hover, html.theme-cyberpunk .hover\:bg-surface-container-lowest:hover { background-color: var(--surface-lowest) !important; }

/* FIX PARA focus Y focus-within EN INPUTS */
html:not(.dark) .focus\:border-primary:focus, html.theme-ocean .focus\:border-primary:focus, html.theme-forest .focus\:border-primary:focus, html.theme-sunset .focus\:border-primary:focus, html.theme-lavender .focus\:border-primary:focus, html.theme-cyberpunk .focus\:border-primary:focus { border-color: var(--primary-accent) !important; }

/* CORRECCIÓN DE HOVER Y GROUP-HOVER PARA TEXTOS */
html:not(.dark) .hover\:text-primary:hover, html.theme-ocean .hover\:text-primary:hover, html.theme-forest .hover\:text-primary:hover, html.theme-sunset .hover\:text-primary:hover, html.theme-lavender .hover\:text-primary:hover, html.theme-cyberpunk .hover\:text-primary:hover { color: var(--primary-accent) !important; }

html:not(.dark) .group:hover .group-hover\:text-primary, html.theme-ocean .group:hover .group-hover\:text-primary, html.theme-forest .group:hover .group-hover\:text-primary, html.theme-sunset .group:hover .group-hover\:text-primary, html.theme-lavender .group:hover .group-hover\:text-primary, html.theme-cyberpunk .group:hover .group-hover\:text-primary { color: var(--primary-accent) !important; }

html:not(.dark) .hover\:text-on-surface:hover, html.theme-ocean .hover\:text-on-surface:hover, html.theme-forest .hover\:text-on-surface:hover, html.theme-sunset .hover\:text-on-surface:hover, html.theme-lavender .hover\:text-on-surface:hover, html.theme-cyberpunk .hover\:text-on-surface:hover { color: var(--text-main) !important; }

/* LOGO DINÁMICO MODO CLARO / OSCURO */
html.dark .logo-light,
html.theme-cyberpunk .logo-light {
    display: none !important;
}
html.dark .logo-dark,
html.theme-cyberpunk .logo-dark {
    display: block !important;
}
html:not(.dark):not(.theme-cyberpunk) .logo-light {
    display: block !important;
}
html:not(.dark):not(.theme-cyberpunk) .logo-dark {
    display: none !important;
}