<?php
function getDarkModeStyles() {
    return <<<HTML
    <style>
        /* Variables del tema oscuro */
        [data-theme="dark"] {
            --color-fondo: #1a1a1a;
            --color-texto: #ffffff;
            --color-fondo-tarjetas: #2d2d2d;
            --color-borde-tarjetas: #404040;
            --color-fondo-header: #2d2d2d;
            --color-texto-header: #ffffff;
            --color-enlaces: #ffffff;
            --color-hover-enlaces: var(--color-principal);
            --color-fondo-footer: #2d2d2d;
            --color-texto-footer: #ffffff;
            --color-input-fondo: #333333;
            --color-input-texto: #ffffff;
            --color-borde: #404040;
            --color-texto-small: #e0e0e0;
        }

        /* Estilos base para el modo oscuro - nivel raíz */
        [data-theme="dark"] {
            // ...variables existentes...
        }

        /* Asegurar que el fondo se aplique desde la raíz */
        [data-theme="dark"],
        [data-theme="dark"] html,
        [data-theme="dark"] body {
            background-color: var(--color-fondo) !important;
            min-height: 100vh !important;
        }

        /* Forzar el fondo en contenedores principales */
        [data-theme="dark"] #app,
        [data-theme="dark"] .wrapper,
        [data-theme="dark"] .main-container,
        [data-theme="dark"] .content,
        [data-theme="dark"] main,
        [data-theme="dark"] .page-wrapper {
            background-color: var(--color-fondo) !important;
            min-height: 100vh !important;
        }

        /* Asegurar que los contenedores internos hereden el fondo */
        [data-theme="dark"] body > *,
        [data-theme="dark"] body > div {
            background-color: inherit !important;
        }

        /* Excepciones para contenedores que necesitan su propio fondo */
        [data-theme="dark"] .card,
        [data-theme="dark"] .modal-content,
        [data-theme="dark"] .navbar,
        [data-theme="dark"] .dropdown-menu {
            background-color: var(--color-fondo-tarjetas) !important;
        }

        /* Estilos para iconos */
        [data-theme="dark"] .nav-link i,
        [data-theme="dark"] .navbar i,
        [data-theme="dark"] .menu-icon,
        [data-theme="dark"] .fa,
        [data-theme="dark"] .fas,
        [data-theme="dark"] .far,
        [data-theme="dark"] .fab,
        [data-theme="dark"] .feather,
        [data-theme="dark"] .material-icons,
        [data-theme="dark"] .icon {
            color: var(--color-texto) !important;
        }

        /* Iconos en botones y enlaces */
        [data-theme="dark"] .btn i,
        [data-theme="dark"] .nav-link i,
        [data-theme="dark"] .dropdown-item i {
            color: inherit !important;
        }

        /* Iconos en el menú de navegación */
        [data-theme="dark"] .navbar-nav .nav-link i,
        [data-theme="dark"] .sidebar .nav-link i,
        [data-theme="dark"] .menu-item i {
            color: var(--color-texto) !important;
        }

        /* Iconos en estado hover */
        [data-theme="dark"] .nav-link:hover i,
        [data-theme="dark"] .navbar-nav .nav-link:hover i,
        [data-theme="dark"] .menu-item:hover i {
            color: var(--color-hover-enlaces) !important;
        }

        /* Estilos específicos para el botón de menú */
        [data-theme="dark"] .navbar-toggler,
        [data-theme="dark"] .menu-toggle {
            background-color: var(--color-fondo-tarjetas) !important;
            color: var(--color-texto) !important;
            border-color: var(--color-borde) !important;
        }

        [data-theme="dark"] .navbar-toggler-icon {
            background-image: none !important;
            position: relative;
        }

        [data-theme="dark"] .navbar-toggler-icon::before {
            content: "\f0c9";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: var(--color-texto) !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        [data-theme="dark"] .navbar-toggler:hover,
        [data-theme="dark"] .menu-toggle:hover {
            background-color: var(--color-input-fondo) !important;
        }

        /* Estilos para el menú móvil */
        [data-theme="dark"] .navbar-collapse,
        [data-theme="dark"] .mobile-menu {
            background-color: var(--color-fondo-tarjetas) !important;
            border-color: var(--color-borde) !important;
        }

        /* Estilos base para el modo oscuro - aplicar a todos los contenedores posibles */
        [data-theme="dark"] body,
        [data-theme="dark"] html,
        [data-theme="dark"] main,
        [data-theme="dark"] section,
        [data-theme="dark"] div,
        [data-theme="dark"] aside {
            background-color: var(--color-fondo) !important;
            color: var(--color-texto) !important;
        }

        /* Excepciones para contenedores específicos */
        [data-theme="dark"] .container,
        [data-theme="dark"] .container-fluid,
        [data-theme="dark"] .content-wrapper,
        [data-theme="dark"] .row,
        [data-theme="dark"] .col,
        [data-theme="dark"] [class^="col-"],
        [data-theme="dark"] .card,
        [data-theme="dark"] .modal-content,
        [data-theme="dark"] .form-check,
        [data-theme="dark"] .precios-container,
        [data-theme="dark"] .precio-bloque,
        [data-theme="dark"] .list-group,
        [data-theme="dark"] .list-group-item {
            background-color: var(--color-fondo-tarjetas) !important;
            color: var(--color-texto) !important;
            border-color: var(--color-borde-tarjetas) !important;
        }

        /* Fondos específicos y clases de Bootstrap */
        [data-theme="dark"] .bg-light,
        [data-theme="dark"] .bg-white,
        [data-theme="dark"] .bg-transparent {
            background-color: var(--color-fondo) !important;
        }

        /* Inputs y controles de formulario - expandido */
        [data-theme="dark"] input,
        [data-theme="dark"] select,
        [data-theme="dark"] textarea,
        [data-theme="dark"] .form-control,
        [data-theme="dark"] .input-group,
        [data-theme="dark"] .input-group-text,
        [data-theme="dark"] .custom-select,
        [data-theme="dark"] .custom-file-label {
            background-color: var(--color-input-fondo) !important;
            color: var(--color-input-texto) !important;
            border-color: var(--color-borde) !important;
        }

        /* Headers y navegación */
        [data-theme="dark"] .navbar,
        [data-theme="dark"] .nav,
        [data-theme="dark"] .header,
        [data-theme="dark"] .card-header,
        [data-theme="dark"] .modal-header,
        [data-theme="dark"] .dropdown-menu {
            background-color: var(--color-fondo-tarjetas) !important;
            border-color: var(--color-borde) !important;
            color: var(--color-texto) !important;
        }

        /* Tablas - estilos completos */
        [data-theme="dark"] table,
        [data-theme="dark"] .table,
        [data-theme="dark"] .table-responsive {
            background-color: var(--color-fondo-tarjetas) !important;
            color: var(--color-texto) !important;
        }

        [data-theme="dark"] table th,
        [data-theme="dark"] table td,
        [data-theme="dark"] .table th,
        [data-theme="dark"] .table td,
        [data-theme="dark"] thead th,
        [data-theme="dark"] tbody td,
        [data-theme="dark"] tfoot td {
            background-color: var(--color-fondo-tarjetas) !important;
            color: var(--color-texto) !important;
            border-color: var(--color-borde) !important;
        }

        /* Tablas con rayas */
        [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.15) !important;
        }

        [data-theme="dark"] .table-hover tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.075) !important;
            color: var(--color-texto) !important;
        }

        /* Encabezados de tabla */
        [data-theme="dark"] thead,
        [data-theme="dark"] .table thead th {
            background-color: var(--color-fondo-header) !important;
            color: var(--color-texto-header) !important;
            border-bottom: 2px solid var(--color-borde) !important;
        }

        /* Footer de tabla */
        [data-theme="dark"] tfoot,
        [data-theme="dark"] .table tfoot td {
            background-color: var(--color-fondo-header) !important;
            color: var(--color-texto-header) !important;
            border-top: 2px solid var(--color-borde) !important;
        }

        /* Bordes de tabla */
        [data-theme="dark"] .table-bordered,
        [data-theme="dark"] .table-bordered td,
        [data-theme="dark"] .table-bordered th {
            border: 1px solid var(--color-borde) !important;
        }

        /* Estados de tabla */
        [data-theme="dark"] .table .thead-dark th {
            background-color: var(--color-fondo-header) !important;
            color: var(--color-texto-header) !important;
        }

        [data-theme="dark"] .table-active,
        [data-theme="dark"] .table-active > td,
        [data-theme="dark"] .table-active > th {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

        /* Botones y elementos interactivos - expandido */
        [data-theme="dark"] .btn,
        [data-theme="dark"] .btn-outline-secondary,
        [data-theme="dark"] .dropdown-item {
            color: var(--color-texto) !important;
            border-color: var(--color-borde) !important;
        }

        [data-theme="dark"] .btn:hover,
        [data-theme="dark"] .btn-outline-secondary:hover,
        [data-theme="dark"] .dropdown-item:hover {
            background-color: var(--color-input-fondo) !important;
        }

        /* Agregar después de la sección de botones */

        /* Estilos específicos para el botón volver */
        [data-theme="dark"] .btn-back {
            background-color: var(--color-fondo-tarjetas) !important;
            color: var(--color-texto) !important;
            border: 1px solid var(--color-borde) !important;
        }

        [data-theme="dark"] .btn-back:hover {
            background-color: var(--color-input-fondo) !important;
            color: var(--color-texto) !important;
        }

        [data-theme="dark"] .btn-back i {
            color: var(--color-texto) !important;
        }

        /* Estilos para imágenes y logos */
        [data-theme="dark"] .d-flex.align-items-center.mb-3 img,
        [data-theme="dark"] .d-flex.align-items-center img,
        [data-theme="dark"] .navbar-brand img,
        [data-theme="dark"] .logo img,
        [data-theme="dark"] .brand-image {
            filter: brightness(0) invert(1) !important;
        }

        /* Excepción para imágenes que no deben invertirse */
        [data-theme="dark"] img.no-invert,
        [data-theme="dark"] .keep-image img {
            filter: none !important;
        }

        /* Estilos específicos para SVG - Método 1: Fill y Stroke */
        [data-theme="dark"] svg *,
        [data-theme="dark"] svg path,
        [data-theme="dark"] svg line,
        [data-theme="dark"] svg polyline,
        [data-theme="dark"] svg rect,
        [data-theme="dark"] svg circle,
        [data-theme="dark"] svg polygon {
            fill: currentColor !important;
            stroke: currentColor !important;
            color: var(--color-texto) !important;
        }

        /* Método 2: Filtro CSS */
        [data-theme="dark"] svg,
        [data-theme="dark"] .menu-icon svg,
        [data-theme="dark"] button svg,
        [data-theme="dark"] .navbar-toggler svg {
            filter: brightness(0) invert(1) !important;
        }

        /* Método 3: Color directo para elementos específicos */
        [data-theme="dark"] .menu-toggle svg,
        [data-theme="dark"] .navbar-toggler svg,
        [data-theme="dark"] button[aria-label="Menu"] svg,
        [data-theme="dark"] .menu-icon svg {
            color: var(--color-texto) !important;
            fill: var(--color-texto) !important;
            stroke: var(--color-texto) !important;
        }

        /* Método 4: Usar CSS Variables */
        [data-theme="dark"] {
            --svg-color: #ffffff;
        }

        [data-theme="dark"] svg {
            color: var(--svg-color) !important;
        }

        /* Método 5: Forzar color blanco directamente */
        [data-theme="dark"] .menu-icon svg,
        [data-theme="dark"] button svg {
            color: #ffffff !important;
            fill: #ffffff !important;
            stroke: #ffffff !important;
        }

        /* Agregar después de la sección de SVG */

        /* Estilos específicos para icon-menu */
        [data-theme="dark"] .icon-menu {
            filter: brightness(0) invert(1) !important;
            fill: #ffffff !important;
        }

        [data-theme="dark"] img.icon-menu {
            filter: brightness(0) invert(1) !important;
            fill: #ffffff !important;
        }

        /* Sobrescribir estilo inline */
        [data-theme="dark"] img[src*="menu.svg"] {
            filter: brightness(0) invert(1) !important;
            fill: #ffffff !important;
        }

        [data-theme="dark"] img[class*="icon-menu"] {
            filter: brightness(0) invert(1) !important;
            fill: #ffffff !important;
        }

        /* Agregar después de la sección de estilos para SVG */

        /* Estilos super específicos para el icono de menú */
        [data-theme="dark"] img[src*="icons/menu.svg"],
        [data-theme="dark"] img[alt="Menú"] {
            filter: brightness(0) invert(1) !important;
        }

        [data-theme="dark"] img[src*="icons/menu.svg"][style*="filter"],
        [data-theme="dark"] img[alt="Menú"][style*="filter"] {
            filter: brightness(0) invert(1) !important;
        }

        [data-theme="dark"] img.icon-menu[style*="fill"] {
            fill: #ffffff !important;
            filter: brightness(0) invert(1) !important;
        }

        /* Sobrescribir cualquier estilo inline */
        [data-theme="dark"] img[src*="menu.svg"][style],
        [data-theme="dark"] .icon-menu[style] {
            filter: brightness(0) invert(1) !important;
            fill: #ffffff !important;
        }

        /* Estilos para paginación */
        [data-theme="dark"] .pagination > li > a,
        [data-theme="dark"] .pagination > li > span,
        [data-theme="dark"] .page-link,
        [data-theme="dark"] .page-item:not(.active) .page-link {
            background-color: var(--color-fondo-tarjetas) !important;
            border-color: var(--color-borde) !important;
            color: var(--color-texto) !important;
        }

        [data-theme="dark"] .pagination > li > a:hover,
        [data-theme="dark"] .pagination > li > span:hover,
        [data-theme="dark"] .page-link:hover {
            background-color: var(--color-input-fondo) !important;
            border-color: var(--color-borde) !important;
            color: var(--color-texto) !important;
        }

        [data-theme="dark"] .pagination > .active > a,
        [data-theme="dark"] .pagination > .active > span,
        [data-theme="dark"] .pagination > .active > a:hover,
        [data-theme="dark"] .pagination > .active > span:hover,
        [data-theme="dark"] .page-item.active .page-link {
            background-color: var(--color-principal) !important;
            border-color: var(--color-principal) !important;
            color: #ffffff !important;
        }

        [data-theme="dark"] .pagination > .disabled > a,
        [data-theme="dark"] .pagination > .disabled > span,
        [data-theme="dark"] .page-item.disabled .page-link {
            background-color: var(--color-fondo) !important;
            border-color: var(--color-borde) !important;
            color: #666666 !important;
        }

        /* Bordes y separadores */
        [data-theme="dark"] hr,
        [data-theme="dark"] .border,
        [data-theme="dark"] .border-top,
        [data-theme="dark"] .border-bottom,
        [data-theme="dark"] .border-left,
        [data-theme="dark"] .border-right {
            border-color: var(--color-borde) !important;
        }

        /* Forzar color de texto en todos los elementos de texto */
        [data-theme="dark"] *:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(i):not(.fa):not(.fas):not(.far):not(.fab) {
            color: var(--color-texto) !important;
        }

        /* Estilos específicos para títulos y textos */
        [data-theme="dark"] h1,
        [data-theme="dark"] h2,
        [data-theme="dark"] h3,
        [data-theme="dark"] h4,
        [data-theme="dark"] h5,
        [data-theme="dark"] h6,
        [data-theme="dark"] .h1,
        [data-theme="dark"] .h2,
        [data-theme="dark"] .h3,
        [data-theme="dark"] .h4,
        [data-theme="dark"] .h5,
        [data-theme="dark"] .h6,
        [data-theme="dark"] .card-title,
        [data-theme="dark"] .modal-title,
        [data-theme="dark"] label,
        [data-theme="dark"] .label,
        [data-theme="dark"] legend {
            color: var(--color-texto) !important;
        }

        /* Asegurar que los textos en tarjetas sean visibles */
        [data-theme="dark"] .card *,
        [data-theme="dark"] .modal-content * {
            color: var(--color-texto) !important;
        }

        /* Excepciones para botones y elementos con colores específicos */
        [data-theme="dark"] .btn-primary,
        [data-theme="dark"] .btn-success,
        [data-theme="dark"] .btn-danger,
        [data-theme="dark"] .btn-warning,
        [data-theme="dark"] .btn-info {
            color: inherit !important;
        }

        /* Asegurar que los enlaces sean visibles */
        [data-theme="dark"] a:not(.btn) {
            color: var(--color-enlaces) !important;
        }

        [data-theme="dark"] a:hover:not(.btn) {
            color: var(--color-hover-enlaces) !important;
        }

        /* Asegurar que los textos en tablas sean visibles */
        [data-theme="dark"] .table * {
            color: var(--color-texto) !important;
        }

        /* Asegurar que los textos en formularios sean visibles */
        [data-theme="dark"] .form-group label,
        [data-theme="dark"] .form-check-label,
        [data-theme="dark"] .custom-control-label {
            color: var(--color-texto) !important;
        }

        /* Textos pequeños específicamente */
        [data-theme="dark"] small,
        [data-theme="dark"] .small,
        [data-theme="dark"] .text-muted,
        [data-theme="dark"] .text-secondary,
        [data-theme="dark"] .form-text,
        [data-theme="dark"] .help-block,
        [data-theme="dark"] .caption,
        [data-theme="dark"] footer,
        [data-theme="dark"] .footer,
        [data-theme="dark"] .meta,
        [data-theme="dark"] .description,
        [data-theme="dark"] .subtitle,
        [data-theme="dark"] .info-text,
        [data-theme="dark"] .text-sm,
        [data-theme="dark"] .text-xs,
        [data-theme="dark"] .details,
        [data-theme="dark"] figcaption,
        [data-theme="dark"] cite,
        [data-theme="dark"] time {
            color: var(--color-texto-small) !important;
        }

        /* Asegurar que los spans y elementos inline sean visibles */
        [data-theme="dark"] span,
        [data-theme="dark"] p,
        [data-theme="dark"] div,
        [data-theme="dark"] td,
        [data-theme="dark"] th,
        [data-theme="dark"] li,
        [data-theme="dark"] dt,
        [data-theme="dark"] dd {
            color: inherit !important;
        }

        /* Específicamente para elementos de formulario */
        [data-theme="dark"] .form-control::placeholder,
        [data-theme="dark"] input::placeholder {
            color: #888 !important;
        }

        /* Para textos de ayuda y validación */
        [data-theme="dark"] .invalid-feedback,
        [data-theme="dark"] .valid-feedback,
        [data-theme="dark"] .form-control-feedback {
            color: var(--color-texto-small) !important;
        }

        /* Para tooltips y popovers */
        [data-theme="dark"] .tooltip,
        [data-theme="dark"] .popover {
            --bs-tooltip-color: var(--color-texto);
            --bs-popover-color: var(--color-texto);
        }

        /* Para badges y etiquetas pequeñas */
        [data-theme="dark"] .badge:not(.badge-primary):not(.badge-success):not(.badge-danger):not(.badge-warning):not(.badge-info) {
            color: var(--color-texto) !important;
            background-color: var(--color-fondo-tarjetas) !important;
        }

        /* Agregar una nueva clase para elementos que mantendrán su fondo original */
        [data-theme="dark"] .keep-background {
            background-color: inherit !important;
        }

        /* Y para elementos específicos que quieres mantener con su fondo original */
        [data-theme="dark"] .navbar.keep-background,
        [data-theme="dark"] .card.keep-background,
        [data-theme="dark"] .section.keep-background {
            background-color: initial !important;
        }

        /* Para mantener también el color del texto original */
        [data-theme="dark"] .keep-style,
        [data-theme="dark"] .keep-style * {
            color: initial !important;
            background-color: initial !important;
            border-color: initial !important;
        }

        /* Agregar después de la sección de estilos SVG */

        /* Estilos específicos para iconos SVG del sistema */
        [data-theme="dark"] img[src*="icons/"] {
            filter: brightness(0) invert(1) !important;
        }

        /* Iconos específicos */
        [data-theme="dark"] img[src*="icons/box.svg"],
        [data-theme="dark"] img[src*="icons/cart.svg"],
        [data-theme="dark"] img[src*="icons/user.svg"],
        [data-theme="dark"] img[src*="icons/menu.svg"],
        [data-theme="dark"] img[src*="icons/search.svg"],
        [data-theme="dark"] img[src*="icons/settings.svg"],
        [data-theme="dark"] img[src*="icons/dashboard.svg"] {
            filter: brightness(0) invert(1) !important;
        }

        /* Selector para cualquier imagen SVG en modo oscuro */
        [data-theme="dark"] img[src$=".svg"]:not(.keep-color) {
            filter: brightness(0) invert(1) !important;
        }

        /* Asegurar que los iconos en botones también sean claros */
        [data-theme="dark"] button img[src$=".svg"],
        [data-theme="dark"] a img[src$=".svg"],
        [data-theme="dark"] .nav-link img[src$=".svg"] {
            filter: brightness(0) invert(1) !important;
        }

        /* Si necesitas mantener el color original en algunos SVG */
        [data-theme="dark"] img[src$=".svg"].keep-color,
        [data-theme="dark"] .keep-color img[src$=".svg"] {
            filter: none !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for(let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1);
                    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
                }
                return null;
            }

            const darkMode = getCookie('darkMode');
            if (darkMode === 'true') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        });
    </script>
HTML;
}