:root {
    /* Estilos dinámicos generales de la aplicación */
    --bg: #1E293B;
    --header-bg: #394C6A;
    --preload-bg: #0f172a;
    
    /* Colores de menú personalizados */
    --menu-desktop-links: #cbd5e1;
    --menu-desktop-hover-bg: rgba(255, 255, 255, 0.05);
    --menu-desktop-hover-color: #ffffff;
    --menu-desktop-active-bg: rgba(99, 102, 241, 0.1);
    --menu-desktop-active-color: #FFFFFF;
    --menu-desktop-height: 60px;
    --menu-desktop-weight: 300;
    --menu-desktop-font-size: 0.85rem;
    --menu-desktop-font-family: inherit;
    
    --menu-mobile-bg: #0f172a;
    --menu-mobile-links: #cbd5e1;
    --menu-mobile-active-bg: rgba(99, 102, 241, 0.1);
    --menu-mobile-active-color: #6366f1;
    --menu-mobile-toggle-color: #ffffff;
    --menu-mobile-weight: 300;
    --menu-mobile-font-size: 0.95rem;
    --menu-mobile-font-family: inherit;
    
    /* Submenú de 2º nivel personalizado */
    --menu-submenu-bg: #FFFFFF;
    --menu-submenu-padding: 0.5rem;
    --menu-submenu-radius: 8px;
    --menu-submenu-links: #2E2E2E;
    --menu-submenu-hover-bg: #6366F1;
    --menu-submenu-hover-color: #ffffff;
    --menu-submenu-active-bg: rgba(99, 102, 241, 0.1);
    --menu-submenu-active-color: #6366f1;
    --menu-submenu-font-size: 0.85rem;
    --menu-submenu-font-family: inherit;
    --menu-submenu-weight: 300;



    /* Variables de la barra de navegación de categoría (para Zero Inline CSS) */
    --nav-color-normal: #4DB7FE;
    --nav-color-hover: #ffffff;
    --nav-icon-size: 1.3rem;
    --nav-text-size: 0.7rem;
    --nav-text-weight: 700;
    --nav-text-color: #4DB7FE;
    --nav-text-font: 'Roboto', system-ui, sans-serif;

            --cat-color: #6366f1;
        --cat-color-alpha: rgba(99, 102, 241, 0.27);
    
    /* Estilos dinámicos para detalle de punto (Landing Page puntourl.php) */
    --url-bg-desktop: #FFFFFF;
    --url-bg-mobile: #FFFFFF;
    --url-title-color: #ffffff;
    --url-title-size: 2.5rem;
    --url-title-weight: 700;
    --url-title-font: 'Nunito', system-ui, sans-serif;
    --url-addr-color: #FFFFFF;
    --url-addr-size: 0.95rem;
    --url-addr-font: 'Roboto', system-ui, sans-serif;
    --url-addr-icon-color: #4DB7FE;
    --url-addr-icon-size: 1.0rem;
    --url-area-color: #FFFFFF;
    --url-area-size: 0.95rem;
    --url-area-font: 'Roboto', system-ui, sans-serif;
    --url-area-icon-color: #4DB7FE;
    --url-area-icon-size: 1.0rem;

    /* Variables de cabecera para móvil */
    --url-mobile-title-color: #FFFFFF;
    --url-mobile-title-size: 1.3rem;
    --url-mobile-title-weight: 600;
    --url-mobile-title-font: 'Nunito', system-ui, sans-serif;
    --url-mobile-addr-color: #FFFFFF;
    --url-mobile-addr-size: 0.85rem;
    --url-mobile-addr-font: 'Roboto', system-ui, sans-serif;
    --url-mobile-addr-icon-color: #4DB7FE;
    --url-mobile-addr-icon-size: 1rem;
    --url-mobile-area-color: #FFFFFF;
    --url-mobile-area-size: 0.85rem;
    --url-mobile-area-font: 'Roboto', system-ui, sans-serif;
    --url-mobile-area-icon-color: #4DB7FE;
    --url-mobile-area-icon-size: 1rem;


    /* Nuevas variables de diseño para las Fichas (Card) y Titulares */
    --url-card-bg: #ffffff;
    --url-card-border-color: rgba(205, 204, 204, 0.6);
    --url-card-border-width: 1px;
    --url-card-border-radius: 0.5rem;
    --url-card-padding: 1.5rem;
    --url-card-blur: 10px;
    --url-card-title-color: #1e293b;
    --url-card-title-size: 1.0rem;
    --url-card-title-weight: 700;
    --url-card-title-font: 'Nunito', system-ui, sans-serif;
    --url-card-content-color: #141414;
    --url-card-content-size: 0.85rem;
    --url-card-content-weight: 300;
    --url-card-content-font: 'Roboto', system-ui, sans-serif;
    --url-gallery-arrow-color: #fbbf24;

    /* Variables de diseño para Horarios */
    --url-hours-text-color: #96919F;
    --url-hours-text-size: 0.85rem;
    --url-hours-text-weight: 400;
    --url-hours-text-font: 'Roboto', system-ui, sans-serif;
    --url-hours-today-color: #fbbf24;
    --url-hours-today-weight: 700;

    /* Variables de diseño para Puntos Aleatorios */
    --url-random-title-color: #1e293b;
    --url-random-title-size: 1rem;
    --url-random-title-weight: 600;
    --url-random-title-font: inherit;
    --url-random-addr-color: #64748b;
    --url-random-addr-size: 0.85rem;
    --url-random-addr-weight: 400;
    --url-random-addr-font: inherit;
    --url-random-cat-color: #6366f1;
    --url-random-cat-size: 0.8rem;
    --url-random-cat-weight: 600;
    --url-random-cat-font: inherit;
    
    /* Variables de diseño para Ficha Información */
            --url-info-titular-color: #1e293b;
        --url-info-titular-size: 0.95rem;
        --url-info-titular-weight: 400;
        --url-info-titular-font: inherit;
        --url-info-titular-icon-color: #4DB7FE;
        --url-info-titular-icon-size: 1.1rem;
                --url-info-direccion-color: #1e293b;
        --url-info-direccion-size: 0.95rem;
        --url-info-direccion-weight: 400;
        --url-info-direccion-font: inherit;
        --url-info-direccion-icon-color: #4DB7FE;
        --url-info-direccion-icon-size: 1.1rem;
                --url-info-categoria-color: #1e293b;
        --url-info-categoria-size: 0.95rem;
        --url-info-categoria-weight: 400;
        --url-info-categoria-font: inherit;
        --url-info-categoria-icon-color: #10b981;
        --url-info-categoria-icon-size: 1.1rem;
                --url-info-area-color: #1e293b;
        --url-info-area-size: 0.95rem;
        --url-info-area-weight: 400;
        --url-info-area-font: 'Roboto', system-ui, sans-serif;
        --url-info-area-icon-color: #4DB7FE;
        --url-info-area-icon-size: 1.1rem;
                --url-info-telefono-color: #1e293b;
        --url-info-telefono-size: 0.95rem;
        --url-info-telefono-weight: 400;
        --url-info-telefono-font: 'Roboto', system-ui, sans-serif;
        --url-info-telefono-icon-color: #4DB7FE;
        --url-info-telefono-icon-size: 1.1rem;
                --url-info-web-color: #1e293b;
        --url-info-web-size: 0.95rem;
        --url-info-web-weight: 400;
        --url-info-web-font: 'Roboto', system-ui, sans-serif;
        --url-info-web-icon-color: #4DB7FE;
        --url-info-web-icon-size: 1.1rem;
        
    /* Variables de disposición de columnas (Layout Sidebar) */
        --url-grid-columns: 1fr auto;
    --url-sidebar-order: 2;
    --url-main-order: 1;

    /* Custom Action Buttons Style variables */
    --btn-diary-icon-color: #ffffff;
    --btn-diary-icon-size: 1rem;
    --btn-diary-font-size: 1rem;
    --btn-diary-bg: #4DB7FE;
    --btn-diary-hover-bg: #32A7F5;
    --btn-diary-text-color: #ffffff;
    --btn-diary-hover-text-color: #ffffff;
    --btn-diary-font-family: 'Roboto', system-ui, sans-serif;
    --btn-diary-saved-color: #22c55e;
    --btn-diary-saved-color-rgb: 34, 197, 94;
    --btn-diary-saved-bg-alpha: rgba(var(--btn-diary-saved-color-rgb), 0.2);
    --btn-diary-saved-border-alpha: rgba(var(--btn-diary-saved-color-rgb), 0.3);

    --btn-web-icon-color: #ffffff;
    --btn-web-icon-size: 1rem;
    --btn-web-font-size: 1rem;
    --btn-web-bg: rgba(59, 130, 246, 0.6);
    --btn-web-hover-bg: rgba(59, 130, 246, 0.8);
    --btn-web-text-color: #ffffff;
    --btn-web-hover-text-color: #ffffff;
    --btn-web-font-family: inherit;
}

/* Custom Action Buttons CSS styling */
#btn-save-diary-modal {
    background: var(--btn-diary-bg) !important;
    color: var(--btn-diary-text-color) !important;
    font-size: var(--btn-diary-font-size) !important;
    font-family: var(--btn-diary-font-family) !important;
    border: none !important;
}
#btn-save-diary-modal i {
    color: var(--btn-diary-icon-color) !important;
    font-size: var(--btn-diary-icon-size) !important;
}
#btn-save-diary-modal:hover {
    background: var(--btn-diary-hover-bg) !important;
    color: var(--btn-diary-hover-text-color) !important;
}

#btn-view-web-modal {
    background: var(--btn-web-bg) !important;
    color: var(--btn-web-text-color) !important;
    font-size: var(--btn-web-font-size) !important;
    font-family: var(--btn-web-font-family) !important;
    border: none !important;
}
#btn-view-web-modal i {
    color: var(--btn-web-icon-color) !important;
    font-size: var(--btn-web-icon-size) !important;
}
#btn-view-web-modal:hover {
    background: var(--btn-web-hover-bg) !important;
    color: var(--btn-web-hover-text-color) !important;
}

.btn-diary-saved {
    background: var(--btn-diary-saved-bg-alpha) !important;
    color: var(--btn-diary-saved-color) !important;
    border: 1px solid var(--btn-diary-saved-border-alpha) !important;
    opacity: 1 !important;
    cursor: default !important;
    font-size: var(--btn-diary-font-size) !important;
    font-family: var(--btn-diary-font-family) !important;
}
.btn-diary-saved i {
    color: var(--btn-diary-saved-color) !important;
    font-size: var(--btn-diary-icon-size) !important;
}