:root {
    /* Estilos globales del mapa y burbujas (clusters) */
    --cluster-bg: rgba(144, 24, 128, 0.75);
    --cluster-bg-hover: rgba(144, 24, 128, 0.9);
    --cluster-border-color: #FCFCFC;
    --cluster-border-width: 2px;
    --cluster-number-font-family: 'Roboto', system-ui, sans-serif;
    --cluster-number-font-size: 0.85rem;
    --cluster-number-font-weight: 800;

    /* Estilos dinámicos generales de la aplicación */
    --bg: #1E293B;
    --header-bg: #394C6A;
    --preload-bg: #0f172a;
    --perfil-bg-color: #F6F6F6;
    
    /* 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: 'Roboto', system-ui, sans-serif;
    
    --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: 'Roboto', system-ui, sans-serif;
    
    /* 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: 'Roboto', system-ui, sans-serif;
    --menu-submenu-weight: 300;

    /* Rutas Configuration (Global) */
    --rutas-index-bg-color: #0f172a;
    --rutas-url-bg-color: #0f172a;

    /* Rutas Individual Title Typography (PC) */
    --rutas-url-title-font-pc: inherit;
    --rutas-url-title-color-pc: #ffffff;
    --rutas-url-title-size-pc: 2.5rem;
    --rutas-url-title-weight-pc: 700;
    --rutas-url-subtitle-font-pc: inherit;
    --rutas-url-subtitle-color-pc: #94a3b8;
    --rutas-url-subtitle-size-pc: 1.1rem;
    --rutas-url-subtitle-weight-pc: 400;

    /* Rutas Individual Title Typography (Mobile) */
    --rutas-url-title-font-mobile: inherit;
    --rutas-url-title-color-mobile: #ffffff;
    --rutas-url-title-size-mobile: 1.8rem;
    --rutas-url-title-weight-mobile: 700;
    --rutas-url-subtitle-font-mobile: inherit;
    --rutas-url-subtitle-color-mobile: #94a3b8;
    --rutas-url-subtitle-size-mobile: 0.95rem;
    --rutas-url-subtitle-weight-mobile: 400;

    /* Rutas URL Hero Metrics & Card Config */
    --rutas-url-hero-metrics-font: inherit;
    --rutas-url-hero-metrics-size: 0.9rem;
    --rutas-url-hero-metrics-weight: 600;
    --rutas-url-hero-metrics-color: #ffffff;

    --rutas-url-card-num-font: inherit;
    --rutas-url-card-num-size: 1.2rem;
    --rutas-url-card-num-weight: 700;
    --rutas-url-card-num-color: #ffffff;

    --rutas-url-card-name-font: inherit;
    --rutas-url-card-name-size: 0.9rem;
    --rutas-url-card-name-weight: 400;
    --rutas-url-card-name-color: #94a3b8;
    
    --rutas-url-card-icon-size: 1.5rem;
    --rutas-url-card-circle-size: 85px;
    --rutas-url-card-circle-stroke: 2.5;

    /* Rutas Desktop Description Typography */
    --rutas-url-desc-text-font-pc: inherit;
    --rutas-url-desc-text-size-pc: 1rem;
    --rutas-url-desc-text-weight-pc: inherit;
    --rutas-url-desc-text-color-pc: #ffffff;
    --rutas-url-desc-text-transform-pc: none;
    --rutas-url-desc-text-shadow-pc: none;


    /* Rutas Itinerary Typography Config */
    --rutas-url-iti-title-font: inherit;
    --rutas-url-iti-title-size: 1rem;
    --rutas-url-iti-title-weight: inherit;
    --rutas-url-iti-title-color: #ffffff;
    --rutas-url-iti-title-transform: none;
    --rutas-url-iti-title-shadow: none;

    --rutas-url-iti-type-font: inherit;
    --rutas-url-iti-type-size: 1rem;
    --rutas-url-iti-type-weight: inherit;
    --rutas-url-iti-type-color: #ffffff;
    --rutas-url-iti-type-transform: none;
    --rutas-url-iti-type-shadow: none;

    --rutas-url-iti-icon-text-font: inherit;
    --rutas-url-iti-icon-text-size: 1rem;
    --rutas-url-iti-icon-text-weight: inherit;
    --rutas-url-iti-icon-text-color: #ffffff;
    --rutas-url-iti-icon-text-transform: none;
    --rutas-url-iti-icon-text-shadow: none;

    --rutas-url-iti-desc-font: inherit;
    --rutas-url-iti-desc-size: 1rem;
    --rutas-url-iti-desc-weight: inherit;
    --rutas-url-iti-desc-color: #ffffff;
    --rutas-url-iti-desc-transform: none;
    --rutas-url-iti-desc-shadow: none;

    /* Rutas Desktop Filters Configuration */
    --rutas-idx-d-ord-icon: "fas fa-filter";
    --rutas-idx-d-ord-icon-size: 1rem;
    --rutas-idx-d-ord-icon-color: #6366f1;
    --rutas-idx-d-ord-text-font: inherit;
    --rutas-idx-d-ord-text-size: 0.95rem;
    --rutas-idx-d-ord-text-color: #475569;
    --rutas-idx-d-ord-text-weight: 700;
    --rutas-idx-d-ord-text-transform: uppercase;
    
    --rutas-idx-d-fil-font: inherit;
    --rutas-idx-d-fil-size: 0.95rem;
    --rutas-idx-d-fil-color-n: #0f172a;
    --rutas-idx-d-fil-color-h: #000000;
    --rutas-idx-d-fil-icon-color: #0f172a;
    --rutas-idx-d-fil-icon-color-h: #000000;
    --rutas-idx-d-fil-bg-n: #f8fafc;
    --rutas-idx-d-fil-bg-h: #ffffff;
    
    --rutas-idx-d-fil-br-tl: 0.5rem;
    --rutas-idx-d-fil-br-tr: 0.5rem;
    --rutas-idx-d-fil-br-br: 0.5rem;
    --rutas-idx-d-fil-br-bl: 0.5rem;
    
    --rutas-idx-d-fil-exp-br-tl: 0.5rem;
    --rutas-idx-d-fil-exp-br-tr: 0.5rem;
    --rutas-idx-d-fil-exp-br-br: 0.5rem;
    --rutas-idx-d-fil-exp-br-bl: 0.5rem;
    
    /* Rutas Mobile Filters Configuration */
    --rutas-idx-m-ord-icon: "fas fa-filter";
    --rutas-idx-m-ord-icon-size: 1rem;
    --rutas-idx-m-ord-icon-color: #6366f1;
    --rutas-idx-m-ord-text-font: inherit;
    --rutas-idx-m-ord-text-size: 0.95rem;
    --rutas-idx-m-ord-text-color: #475569;
    --rutas-idx-m-ord-text-weight: 700;
    --rutas-idx-m-ord-text-transform: uppercase;
    
    --rutas-idx-m-btn-padding: 0.8rem 1.2rem;
    --rutas-idx-m-btn-radius: 0.5rem;
    --rutas-idx-m-btn-bg: #f8fafc;
    --rutas-idx-m-btn-icon-size: 1.2rem;
    --rutas-idx-m-btn-icon-color: #0f172a;
    
    /* Mobile Overlay Map GPS Button Configuration */
    --rutas-url-m-btn-gps-font: inherit;
    --rutas-url-m-btn-gps-text-size: 1rem;
    --rutas-url-m-btn-gps-text-color: #ffffff;
    --rutas-url-m-btn-gps-icon-size: 1rem;
    --rutas-url-m-btn-gps-icon-color: #ffffff;
    --rutas-url-m-btn-gps-center-icon-color: #10b981;
    --rutas-url-m-btn-gps-center-text-color: #10b981;
    --rutas-url-m-btn-gps-bg: rgba(16, 185, 129, 0.8);
    --rutas-url-m-btn-gps-border: transparent;
    --rutas-url-m-btn-gps-radius: 2rem;

    /* Mobile Overlay Map Back Button Configuration */
    --rutas-url-m-btn-back-font: inherit;
    --rutas-url-m-btn-back-text-size: 1rem;
    --rutas-url-m-btn-back-text-color: #ffffff;
    --rutas-url-m-btn-back-icon-size: 1rem;
    --rutas-url-m-btn-back-icon-color: #ffffff;
    --rutas-url-m-btn-back-bg: rgba(255,255,255,0.2);
    --rutas-url-m-btn-back-border: transparent;
    --rutas-url-m-btn-back-radius: 2rem;

    /* Rutas Pagination Configuration */
    --rutas-idx-pag-font: inherit;
    --rutas-idx-pag-size: 0.95rem;
    --rutas-idx-pag-radius: 0.5rem;
    
    --rutas-idx-pag-color-n: #475569;
    --rutas-idx-pag-bg-n: #ffffff;
    --rutas-idx-pag-border-n: #e2e8f0;
    
    --rutas-idx-pag-color-h: #0f172a;
    --rutas-idx-pag-bg-h: #f8fafc;
    --rutas-idx-pag-border-h: #cbd5e1;
    
    --rutas-idx-pag-color-a: #ffffff;
    --rutas-idx-pag-bg-a: #6366f1;
    --rutas-idx-pag-border-a: #6366f1;
    
    --rutas-idx-m-mod-bg: #ffffff;
    --rutas-idx-m-mod-color: #0f172a;
    --rutas-idx-m-mod-font: inherit;
    --rutas-idx-m-mod-size: 1rem;
    --rutas-idx-m-mod-weight: 500;
    
    /* Rutas Resultados Configuration */
    --rutas-idx-res-font: inherit;
    --rutas-idx-res-size: 0.95rem;
    --rutas-idx-res-color: #64748b;
    --rutas-idx-res-weight: 500;


    /* Estilos dinámicos del visor de mapas */
    --map-accent-color: #394C6A;
    --map-icon-color: #FFFFFF;
    --map-cat-color: #394C6A;
    --map-cat-icon-color: #FFFFFF;
    --map-cat-font-family: 'Roboto', system-ui, sans-serif;
    --map-cat-font-size: 1.2rem;
    --map-cat-font-weight: normal;
    --map-layers-btn-font-family: 'Roboto', system-ui, sans-serif;
    --map-layers-btn-font-size: 1.2rem;
    --map-layers-btn-font-weight: normal;
    --map-panel-bg: #1E293Be6;
    --map-panel-bg-full: #1E293Bf2;
    --modal-bg-color: #394C6A;
    --modal-bg-color-alpha: #394C6Af2;
    --modal-close-tab-bg: #394C6A;
    --modal-close-tab-hover-bg: #4B5E7C;
    --modal-close-tab-font: 'Roboto', system-ui, sans-serif;
    --popup-bg: #FF0000;
    --map-text-color: #F5F5F5;
    --map-title-color: #ffffff;
    --map-title-icon-color: #fbbf24;
    --map-title-font-family: 'Roboto', system-ui, sans-serif;
    --map-title-size: 1.0rem;
    --map-text-size: 0.9rem;
    --map-font-family: 'Roboto', system-ui, sans-serif;
    --map-layers-panel-bg: #1E293Be6;
    --map-layers-panel-bg-full: #1E293Bf2;
    --map-layers-text-color: #F5F5F5;
    --map-layers-title-color: #ffffff;
    --map-layers-title-icon-color: #fbbf24;
    --map-layers-title-font-family: 'Roboto', system-ui, sans-serif;
    --map-layers-title-size: 1.0rem;
    --map-layers-text-size: 0.9rem;
    --map-layers-font-family: 'Roboto', system-ui, sans-serif;
    --gps-inactive-color: #e84f4f;
    --gps-active-color: #5AB054;
    --gps-searching-color: #fbbf24;
    --gps-active-alpha: #5AB05466;
    --gps-searching-alpha: #fbbf2466;
    --selected-point-bg: #EC3C3C;
    --selected-point-border: #fbbf24;
    --origin-point-bg: #10b981;
    --origin-point-border: #ffffff;
    --origin-point-icon: "fas fa-map-marker-alt";
    --dest-point-bg: #ef4444;
    --dest-point-border: #ffffff;
    --dest-point-icon: "fas fa-flag-checkered";
    --popup-title-color: #394C6A;
    --popup-title-size: 1.0rem;
    --popup-title-font-family: 'Nunito', system-ui, sans-serif;
    --popup-title-font-weight: 700;
    --popup-route-btn-bg: #f1f5f9;
    --popup-route-btn-color: #475569;
    --popup-route-btn-border: 1px solid #e2e8f0;
    --popup-route-btn-size: 0.75rem;
    --popup-route-btn-font-family: inherit;
    --popup-route-btn-font-weight: 600;
    --popup-route-btn-hover-bg: #e2e8f0;
    --popup-route-btn-hover-color: #1e293b;
    --popup-details-btn-bg: #eef2ff;
    --popup-details-btn-color: #4f46e5;
    --popup-details-btn-border: 1px solid #c7d2fe;
    --popup-details-btn-size: 0.75rem;
    --popup-details-btn-font-family: 'Roboto', system-ui, sans-serif;
    --popup-details-btn-font-weight: 600;
    --popup-details-btn-hover-bg: #c7d2fe;
    --popup-details-btn-hover-color: #3730a3;
    --search-toggle-bg: #394C6A;
    --search-toggle-color: #ffffff;
    --search-panel-bg: #1e293b;
    --search-title-color: #ffffff;
    --search-title-icon-color: #fbbf24;
    --search-title-size: 0.9rem;
    --search-title-font-family: 'Roboto', system-ui, sans-serif;
    --search-result-text-size: 0.9rem;
    --search-result-font-family: 'Roboto', system-ui, sans-serif;


    /* Variables de la barra de navegación de categoría (para Zero Inline CSS) */
    --nav-color-normal: #4DB7FE;
    --nav-color-hover: #4DB7FE;
    --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);
    
    /* Hero Buttons & Report Modal Customization variables */
    --hero-right-margin-desktop: 50px;
    --save-desktop-size: 62px;
    --save-desktop-radius: 0px;
    --save-bg: #FFFFFF;
    --save-icon-color: #849AF0;
    --save-desktop-icon-size: 30px;
    --save-bg-hover: #EDEDED;
    --save-icon-color-hover: #4D4C4C;
    --save-bg-saved: #FFFFFF;
    --save-icon-color-saved: #3D7B77;
    --save-icon-color-saved-border: #3D7B7733;
    --save-icon-color-saved-border-mobile: #3D7B7755;
    
    --report-desktop-size: 62px;
    --report-desktop-radius: 0px;
    --report-bg: #FFFFFF;
    --report-icon-color: #849AF0;
    --report-desktop-icon-size: 30px;
    --report-bg-hover: #EDEDED;
    --report-icon-color-hover: #4D4C4C;
    
    --hero-right-margin-mobile: 10px;
    --save-mobile-size: 38px;
    --save-mobile-radius: 2px;
    --save-mobile-icon-size: 25px;
    
    --report-mobile-size: 38px;
    --report-mobile-radius: 8px;
    --report-mobile-icon-size: 25px;
    
    --modal-bg: rgba(15, 23, 42, 0.95);
    --modal-text-color: #ffffff;
    --modal-font-family: 'Roboto', system-ui, sans-serif;
    --modal-desktop-font-size: 1rem;
    --modal-mobile-font-size: 0.85rem;
    
    /* Tipografía Global de Modales */
    --modal-global-text-font: 'Roboto', sans-serif;
    --modal-global-text-size: 1rem;
    --modal-global-text-weight: 400;
    --modal-global-text-color: #616161;
    --modal-global-text-transform: none;
    --modal-global-text-shadow: none;

    
    
    /* Variables para Botones del Modal */
        --modal-btn-1-bg: #6366f1;
    --modal-btn-1-color: #ffffff;
    --modal-btn-1-radius: 0.5rem 8px 8px 8px;
    --modal-btn-1-padding: 0.5rem 1rem;
    --modal-btn-1-width: auto;
    --modal-btn-1-height: auto;
    --modal-btn-1-shadow: none;
    --modal-btn-1-font: inherit;
    --modal-btn-1-size: 1rem;
    --modal-btn-1-weight: 600;
    --modal-btn-1-gap: 0.5rem;
    --modal-btn-1-flex-dir: row;
    --modal-btn-1-icon-color: #ffffff;
    --modal-btn-1-icon-size: 1rem;
    --modal-btn-1-icon-display: block;
    --modal-btn-1-bg-hover: #2563eb;
    --modal-btn-1-color-hover: #ffffff;
    --modal-btn-1-icon-hover: #ffffff;
    --modal-btn-1-text-display: block;
        --modal-btn-2-bg: #6366F1;
    --modal-btn-2-color: #ffffff;
    --modal-btn-2-radius: 8px 8px 8px 8px;
    --modal-btn-2-padding: 0.5rem 1rem;
    --modal-btn-2-width: auto;
    --modal-btn-2-height: auto;
    --modal-btn-2-shadow: none;
    --modal-btn-2-font: inherit;
    --modal-btn-2-size: 1rem;
    --modal-btn-2-weight: 600;
    --modal-btn-2-gap: 0.5rem;
    --modal-btn-2-flex-dir: row;
    --modal-btn-2-icon-color: #ffffff;
    --modal-btn-2-icon-size: 1rem;
    --modal-btn-2-icon-display: block;
    --modal-btn-2-bg-hover: #2563eb;
    --modal-btn-2-color-hover: #ffffff;
    --modal-btn-2-icon-hover: #ffffff;
    --modal-btn-2-text-display: block;
    /* Variables Base Globales de Modales */
    --modal-global-bg: #FFFFFF;
    --modal-global-backdrop: rgba(0, 0, 0, 0.75);
    --modal-global-backdrop-blur: 5px;
    --modal-global-border-radius: 1rem;
    --modal-global-border-width: 10px;
    
        --modal-global-border-color: rgba(57, 76, 106, 1);
    --modal-global-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    --modal-global-title-color: #292929;
    --modal-global-title-size: 1.2rem;
    --modal-global-title-font: 'Nunito', system-ui, sans-serif;
    --modal-global-title-weight: 700;

    /* Variables Globales para Elementos de Formulario en Modales */
    --modal-form-container-bg: #FFFFFF;
    --modal-form-container-border-color: #CFCFCF;
    --modal-form-container-border-width: 1px dashed;

    --modal-form-bg: #E6E6E6;
    --modal-form-text: #2E2E2E;
    --modal-form-border: #BFBFBF;
    --modal-form-radius: 0.4rem;
    --modal-form-padding: 0.6rem;
    
    --modal-form-select-bg: #FFFFFF;
    --modal-form-select-text: #333333;
    --modal-form-select-hover-bg: #B8CFF5;
    --modal-form-select-hover-text: #525252;
    
    --save-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    --save-shadow-mobile: 0 4px 12px rgba(0, 0, 0, 0.3);
    --save-shadow-refactored-mobile: 0 2px 6px rgba(0, 0, 0, 0.05);
    --save-shadow-desktop-strip: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    --report-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    --report-shadow-mobile: 0 4px 12px rgba(0, 0, 0, 0.3);
    --report-shadow-refactored-mobile: 0 2px 6px rgba(0, 0, 0, 0.05);
    --report-shadow-desktop-strip: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Estilos dinámicos para detalle de punto (Landing Page puntourl.php) */
    --url-bg-desktop: #F6F6F6;
    --url-bg-mobile: #F6F6F6;
    --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: 1.2rem;
    --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;
    
    /* Weather Header Config */
    --weather-header-temp-font: 'Roboto', sans-serif;
    --weather-header-temp-size: 1rem;
    --weather-header-temp-weight: inherit;
    --weather-header-temp-color: #ffffff;
    --weather-header-temp-transform: none;
    --weather-header-temp-shadow: none;

    --weather-popup-title-font: 'Roboto', sans-serif;
    --weather-popup-title-size: 1rem;
    --weather-popup-title-weight: inherit;
    --weather-popup-title-color: #FBBF24;
    --weather-popup-title-transform: none;
    --weather-popup-title-shadow: none;

    --weather-popup-text-font: 'Roboto', sans-serif;
    --weather-popup-text-size: 1rem;
    --weather-popup-text-weight: inherit;
    --weather-popup-text-color: #ffffff;
    --weather-popup-text-transform: none;
    --weather-popup-text-shadow: none;

    /* Variables de diseño para Ficha Información */
            --url-info-titular-color: #96919F;
        --url-info-titular-size: 1.0rem;
        --url-info-titular-weight: 400;
        --url-info-titular-font: 'Roboto', system-ui, sans-serif;
        --url-info-titular-icon-color: #4DB7FE;
        --url-info-titular-icon-size: 0.8rem;
                --url-info-autor-color: #96919F;
        --url-info-autor-size: 0.90rem;
        --url-info-autor-weight: 400;
        --url-info-autor-font: 'Roboto', system-ui, sans-serif;
        --url-info-autor-icon-color: #4DB7FE;
        --url-info-autor-icon-size: 0.8rem;
                --url-info-direccion-color: #96919F;
        --url-info-direccion-size: 0.90rem;
        --url-info-direccion-weight: 400;
        --url-info-direccion-font: 'Roboto', system-ui, sans-serif;
        --url-info-direccion-icon-color: #4DB7FE;
        --url-info-direccion-icon-size: 0.8rem;
                --url-info-categoria-color: #96919F;
        --url-info-categoria-size: 0.90rem;
        --url-info-categoria-weight: 400;
        --url-info-categoria-font: 'Roboto', system-ui, sans-serif;
        --url-info-categoria-icon-color: #4DB7FE;
        --url-info-categoria-icon-size: 0.8rem;
                --url-info-area-color: #96919F;
        --url-info-area-size: 0.90rem;
        --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: 0.8rem;
                --url-info-altitud-color: #96919F;
        --url-info-altitud-size: 0.90rem;
        --url-info-altitud-weight: 400;
        --url-info-altitud-font: 'Roboto', system-ui, sans-serif;
        --url-info-altitud-icon-color: #4DB7FE;
        --url-info-altitud-icon-size: 0.8rem;
                --url-info-telefono-color: #96919F;
        --url-info-telefono-size: 0.90rem;
        --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: 0.8rem;
                --url-info-web-color: #96919F;
        --url-info-web-size: 0.90rem;
        --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: 0.8rem;
        
    /* 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: 'Roboto', system-ui, sans-serif;

    --btn-gps-icon-color: #ffffff;
    --btn-gps-icon-size: 1rem;
    --btn-gps-font-size: 1rem;
    --btn-gps-bg: #E84F4F;
    --btn-gps-active-bg: #5AB054;
    --btn-gps-text-color: #ffffff;
    --btn-gps-font-family: 'Roboto', system-ui, sans-serif;

    --btn-gps-smart-font-family: 'Nunito', system-ui, sans-serif;
    --btn-gps-smart-font-size: 0.8rem;
    --btn-gps-smart-text-color: rgba(255, 255, 255, 0.8);

    /* Rutas Desktop Popup */
    --rutas-url-popup-type-font-pc: inherit;
    --rutas-url-popup-type-size-pc: 8px;
    --rutas-url-popup-title-font-pc: inherit;
    --rutas-url-popup-title-size-pc: 13px;
    --rutas-url-popup-title-color-pc: #ffffff;

    /* Rutas Mobile Popup */
    --rutas-url-popup-type-font-mobile: inherit;
    --rutas-url-popup-type-size-mobile: 8px;
    --rutas-url-popup-title-font-mobile: inherit;
    --rutas-url-popup-title-size-mobile: 13px;
    --rutas-url-popup-title-color-mobile: #ffffff;

    /* Rutas Mobile Expandir */
    --rutas-url-expand-text-font-mobile: inherit;
    --rutas-url-expand-text-size-mobile: 1rem;
    --rutas-url-expand-text-weight-mobile: inherit;
    --rutas-url-expand-text-color-mobile: #ffffff;
    --rutas-url-expand-text-transform-mobile: none;
    --rutas-url-expand-text-shadow-mobile: none;

    /* Rutas Mobile Botones Iniciar (Mapa) */
    --rutas-url-m-btn-back-font: inherit;
    --rutas-url-m-btn-back-text-size: 1rem;
    --rutas-url-m-btn-back-text-color: #ffffff;
    --rutas-url-m-btn-back-icon-size: 1rem;
    --rutas-url-m-btn-back-icon-color: #ffffff;
    --rutas-url-m-btn-back-bg: rgba(255,255,255,0.2);
    --rutas-url-m-btn-back-border: transparent;
    --rutas-url-m-btn-back-radius: 2rem;

    --rutas-url-m-btn-gps-font: inherit;
    --rutas-url-m-btn-gps-text-size: 1rem;
    --rutas-url-m-btn-gps-text-color: #ffffff;
    --rutas-url-m-btn-gps-icon-size: 1rem;
    --rutas-url-m-btn-gps-icon-color: #ffffff;
    --rutas-url-m-btn-gps-bg: rgba(16, 185, 129, 0.8);
    --rutas-url-m-btn-gps-border: transparent;
    --rutas-url-m-btn-gps-radius: 2rem;
    
    --rutas-url-m-btn-gps-center-text-color: #10b981;
    --rutas-url-m-btn-gps-center-icon-color: #10b981;
}

/* 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-how-to-arrive {
    background: var(--btn-gps-bg) !important;
    color: var(--btn-gps-text-color) !important;
    font-size: var(--btn-gps-font-size) !important;
    font-family: var(--btn-gps-font-family) !important;
    border: none !important;
}
#btn-how-to-arrive i {
    color: var(--btn-gps-icon-color) !important;
    font-size: var(--btn-gps-icon-size) !important;
}
#btn-how-to-arrive.active {
    background: var(--btn-gps-active-bg) !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;
}

/* Rutas Custom Action Buttons */
.btn-ruta-volver {
    background: #3b82f6 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 8px 8px !important;
    padding: 0.5rem 1rem !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-direction: row;
}
.btn-ruta-volver i {
    color: #ffffff !important;
    font-size: 1rem !important;
    transition: all 0.3s;
}
.btn-ruta-volver:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}
.btn-ruta-volver:hover i {
    color: #ffffff !important;
}

.btn-ruta-save {
    background: #3b82f6 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 8px 8px !important;
    padding: 0.5rem 1rem !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-direction: row;
}
.btn-ruta-save i {
    color: #ffffff !important;
    font-size: 1rem !important;
    transition: all 0.3s;
}
.btn-ruta-save:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}
.btn-ruta-save:hover i {
    color: #ffffff !important;
}

.btn-ruta-save.btn-ruta-unreg {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
.btn-ruta-save.btn-ruta-unreg i {
    color: #ffffff !important;
}

.btn-ruta-save.btn-ruta-saved {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
}
.btn-ruta-save.btn-ruta-saved i {
    color: #fbbf24 !important;
}

.btn-ruta-start {
    background: #3b82f6 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 8px 8px !important;
    padding: 0.5rem 1rem !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-direction: row;
}
.btn-ruta-start i {
    color: #ffffff !important;
    font-size: 1rem !important;
    transition: all 0.3s;
}
.btn-ruta-start:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}
.btn-ruta-start:hover i {
    color: #ffffff !important;
}

/* Rutas Itinerary Styling */
.route-timeline-card-header h3 {
    font-family: var(--rutas-url-iti-title-font) !important;
    font-size: var(--rutas-url-iti-title-size) !important;
    font-weight: var(--rutas-url-iti-title-weight) !important;
    color: var(--rutas-url-iti-title-color) !important;
    text-transform: var(--rutas-url-iti-title-transform) !important;
    text-shadow: var(--rutas-url-iti-title-shadow) !important;
}

.route-timeline-card-type {
    font-family: var(--rutas-url-iti-type-font) !important;
    font-size: var(--rutas-url-iti-type-size) !important;
    font-weight: var(--rutas-url-iti-type-weight) !important;
        color: var(--rutas-url-iti-type-color) !important;
        text-transform: var(--rutas-url-iti-type-transform) !important;
    text-shadow: var(--rutas-url-iti-type-shadow) !important;
}

.route-timeline-icons-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.route-timeline-icon-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--rutas-url-iti-icon-text-font) !important;
    font-size: var(--rutas-url-iti-icon-text-size) !important;
    font-weight: var(--rutas-url-iti-icon-text-weight) !important;
    color: var(--rutas-url-iti-icon-text-color) !important;
    text-transform: var(--rutas-url-iti-icon-text-transform) !important;
    text-shadow: var(--rutas-url-iti-icon-text-shadow) !important;
}

.route-timeline-desc-container p {
    font-family: var(--rutas-url-iti-desc-font) !important;
    font-size: var(--rutas-url-iti-desc-size) !important;
    font-weight: var(--rutas-url-iti-desc-weight) !important;
    color: var(--rutas-url-iti-desc-color) !important;
    text-transform: var(--rutas-url-iti-desc-transform) !important;
    text-shadow: var(--rutas-url-iti-desc-shadow) !important;
}

/* Detalles de Ruta Desktop */
.route-desc-desktop-card .route-desc-content {
    font-family: var(--rutas-url-desc-text-font-pc) !important;
    font-size: var(--rutas-url-desc-text-size-pc) !important;
    font-weight: var(--rutas-url-desc-text-weight-pc) !important;
    color: var(--rutas-url-desc-text-color-pc) !important;
    text-transform: var(--rutas-url-desc-text-transform-pc) !important;
    text-shadow: var(--rutas-url-desc-text-shadow-pc) !important;
    line-height: 1.6;
}




/* ================= PERFIL DYNAMIC CSS ================= */

        .perfil-content-cards {
            background-color: #F6F6F6 !important;
        }
        .perfil-username {
            font-family: 'Nunito', sans-serif !important;
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: #1E293B !important;
            text-transform: capitalize !important;
            text-shadow: 0 4px 8px rgba(0,0,0,0.8) !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        
        /* --- Menu Navegación Perfil --- */
        .perfil-unified-layout .sub-nav a {
            font-family: 'Roboto', sans-serif !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #363E69 !important;
            text-transform: none !important;
            text-shadow: none !important;
            background: #DEDEDE !important;
        }
        .perfil-unified-layout .sub-nav a:hover {
            color: #ffffff !important;
            background: #74A8FB  !important;
        }
        .perfil-unified-layout .sub-nav a.active {
            color: #ffffff !important;
            background: #3b82f6  !important;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
        }

        
        /* --- Cajas de Texto (Inputs) --- */
        .perfil-unified-layout .info-item-editable input, 
        .perfil-unified-layout .info-item-editable select,
        .perfil-unified-layout .visit-add-form input,
        .perfil-unified-layout .visit-add-form select,
        .perfil-unified-layout .visit-add-form textarea {
            background: #E8E8E8 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 0.7rem 1rem !important;
            border-radius: 0.25rem !important;
        }

        .perfil-unified-layout .info-item-editable input:focus, 
        .perfil-unified-layout .info-item-editable select:focus,
        .perfil-unified-layout .visit-add-form input:focus,
        .perfil-unified-layout .visit-add-form select:focus,
        .perfil-unified-layout .visit-add-form textarea:focus {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: var(--primary) !important;
            outline: none !important;
        }

        /* Labels Desktop */
        .perfil-unified-layout .info-item-editable .info-label,
        .perfil-unified-layout .profile-ext-style-32,
        .perfil-unified-layout .profile-info form label,
        .perfil-unified-layout .visit-add-form label {
            font-family: 'Roboto', sans-serif !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #242424 !important;
            text-transform: none !important;
            text-shadow: none !important;
            display: block;
            margin-bottom: 0.5rem;
        }

        /* Inputs Desktop */
        .perfil-unified-layout input[type="text"],
        .perfil-unified-layout input[type="date"],
        .perfil-unified-layout input[type="password"],
        .perfil-unified-layout select,
        .perfil-unified-layout textarea {
            font-family: 'Roboto', sans-serif !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #242424 !important;
            text-transform: none !important;
            text-shadow: none !important;
            width: 100%;
            padding: 0.8rem;
            border-radius: 0.8rem;
            background: rgba(0,0,0,0.2);
            border: 1px solid rgba(255,255,255,0.05);
            outline: none;
        }

        /* Btn Save Desktop */
        .perfil-unified-layout button[name="update_profile"],
        .perfil-unified-layout .btn-primary {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            flex-direction: row !important;
            background: #3b82f6 !important;
            color: #ffffff !important;
            border-radius: 8px 8px 8px 8px !important;
            font-family: inherit !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            box-shadow: none !important;
            padding: 0.5rem 1rem !important;
            cursor: pointer;
            width: 100%;
            border: none;
            transition: all 0.3s;
        }
        .perfil-unified-layout button[name="update_profile"]:hover,
        .perfil-unified-layout .btn-primary:hover {
            background: #2563eb !important;
            color: #ffffff !important;
        }
        
        /* Btn Password Desktop */
        .perfil-unified-layout .perfil-btn-password-custom {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            flex-direction: row !important;
            background: #3b82f6 !important;
            color: #ffffff !important;
            border-radius: 8px 8px 8px 8px !important;
            font-family: inherit !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            box-shadow: none !important;
            padding: 0.5rem 1rem !important;
            border: none;
            transition: all 0.3s;
        }
        .perfil-unified-layout .perfil-btn-password-custom:hover {
            background: #2563eb !important;
            color: #ffffff !important;
        }
        
        /* Btn Logout Desktop */
        .perfil-btn-logout-custom {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            flex-direction: row !important;
            background: #E28769 !important;
            color: #ffffff !important;
            border-radius: 8px 8px 8px 8px !important;
            font-family: inherit !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            box-shadow: none !important;
            padding: 0.5rem 1rem !important;
            border: none;
            transition: all 0.3s;
        }
        .perfil-btn-logout-custom:hover {
            background: #2563eb !important;
            color: #ffffff !important;
        }
        
        .perfil-avatar-wrapper {
            position: relative;
            margin-top: -120px; /* Avatar y texto completamente dentro del hero con margen inferior */
            margin-bottom: 3rem;
            display: flex;
            align-items: center;
            gap: 1.5rem; /* Espacio entre el avatar y el nombre */
        }
        .perfil-avatar-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid #F6F6F6;
            background: #F6F6F6;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            z-index: 10;
            flex-shrink: 0;
        }
        .perfil-avatar-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* --- VISITADOS: DIARY CARDS --- */
        .perfil-unified-layout .diary-card {
            background: #1E293B !important;
            padding: 1.5rem !important;
            border-radius: 1.25rem !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
            backdrop-filter: blur(5px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
        }

        .perfil-unified-layout .diary-content h4 {
            margin: 0 !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #F7F7F7 !important;
            line-height: 1.3 !important;
            font-family: 'Roboto', sans-serif !important;
        }

        .perfil-unified-layout .diary-date {
            font-size: 0.8rem !important;
            font-weight: inherit !important;
            color: #CFCFCF !important;
            font-family: 'Roboto', sans-serif !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.35rem !important;
        }

        .perfil-unified-layout .visits-title {
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: #EDB525 !important;
            font-family: 'Roboto', sans-serif !important;
        }

        .perfil-unified-layout .visits-title i {
            color: #EDB525 !important;
            font-size: 1.2rem !important;
        }

        /* --- VISITADOS: FILTROS --- */
        .perfil-unified-layout .profile-ext-style-37 {
            color: #2D2965 !important;
            font-size: 1rem !important;
        }

        .perfil-unified-layout .profile-ext-style-38 {
            background: #F6F6F6 !important;
            border: none !important;
            border-radius: 0.5rem !important;
            padding: 0.5rem !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #2D2965 !important;
            font-family: 'Roboto', sans-serif !important;
            outline: none !important;
        }

        .perfil-unified-layout .diary-content h4 {
                        font-family: 'Roboto', sans-serif !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #F7F7F7 !important;
            text-shadow: none !important;
            margin: 0 !important;
            line-height: 1.5 !important;
        }

        .perfil-unified-layout .diary-date {
                        font-family: 'Roboto', sans-serif !important;
            font-size: 0.8rem !important;
            font-weight: inherit !important;
            color: #CFCFCF !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.35rem !important;
        }

        /* --- RUTAS: FILTER --- */
        .perfil-unified-layout .perfil-routes-filter-form {
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            background: rgba(255,255,255,0.1) !important;
            border: none !important;
            border-radius: 0.5rem !important;
            padding: 0.5rem !important;
        }

        .perfil-unified-layout .perfil-routes-filter-icon {
            color: #1c0fd2 !important;
            font-size: 1rem !important;
        }

        .perfil-unified-layout .perfil-routes-filter-select {
            background: transparent !important;
            border: none !important;
            color: #1c0fd2 !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            font-family: inherit !important;
            outline: none !important;
            cursor: pointer !important;
            appearance: none !important;
            -webkit-appearance: none !important;
        }
        
        .perfil-unified-layout .perfil-routes-filter-select option {
            background: #1e293b !important;
            color: white !important;
        }

        .perfil-unified-layout .perfil-routes-btn-view {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.4rem !important;
            text-decoration: none !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            margin-left: auto !important;
            background: #6366f1 !important;
            color: #ffffff !important;
            border-radius: 0.5rem !important;
            padding: 0.4rem 0.8rem !important;
            font-weight: 600 !important;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
        }
        
        .perfil-unified-layout .perfil-routes-btn-view:hover {
            transform: translateY(-2px) !important;
            opacity: 0.9 !important;
        }

        .perfil-unified-layout .routes-content .routes-title {
                        font-family: 'Roboto', sans-serif !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #ffffff !important;
            text-shadow: none !important;
            margin: 0 !important;
            line-height: 1.5 !important;
        }

        .perfil-unified-layout .routes-date {
                        font-family: 'Roboto', sans-serif !important;
            font-size: 1rem !important;
            font-weight: inherit !important;
            color: #ffffff !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.35rem !important;
        }

        @media (max-width: 768px) {
            .perfil-desktop-hero {
                height: 320px !important;
            }
            .perfil-desktop-title.perfil-username, .perfil-username {
                font-family: 'Nunito', sans-serif !important;
                font-size: 1.5rem !important;
                font-weight: 600 !important;
                color: #1E293B !important;
                text-transform: capitalize !important;
                text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
            }

            /* Labels Mobile */
            .perfil-unified-layout .info-item-editable .info-label,
            .perfil-unified-layout .profile-ext-style-32,
            .perfil-unified-layout .profile-info form label,
            .perfil-unified-layout .visit-add-form label {
                font-family: 'Roboto', sans-serif !important;
                font-size: 1rem !important;
                font-weight: inherit !important;
                color: #242424 !important;
                text-transform: none !important;
                text-shadow: none !important;
            }

            /* Inputs Mobile */
            .perfil-unified-layout input[type="text"],
            .perfil-unified-layout input[type="date"],
            .perfil-unified-layout input[type="password"],
            .perfil-unified-layout select,
            .perfil-unified-layout textarea {
                font-family: 'Roboto', sans-serif !important;
                font-size: 1rem !important;
                font-weight: inherit !important;
                color: #242424 !important;
                text-transform: none !important;
                text-shadow: none !important;
            }

            /* Btn Save Mobile */
            .perfil-unified-layout button[name="update_profile"],
            .perfil-unified-layout .btn-primary {
                gap: 0.5rem !important;
                flex-direction: row !important;
                background: #3b82f6 !important;
                color: #ffffff !important;
                border-radius: 8px 8px 8px 8px !important;
                font-family: inherit !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                padding: 0.5rem 1rem !important;
                cursor: pointer;
                width: 100%;
                border: none;
                transition: all 0.3s;
            }
            .perfil-unified-layout button[name="update_profile"]:hover,
            .perfil-unified-layout .btn-primary:hover {
                background: #2563eb !important;
                color: #ffffff !important;
            }
                            .perfil-unified-layout button[name="update_profile"] span,
                .perfil-unified-layout .btn-primary span,
                .perfil-unified-layout button[name="update_profile"] i,
                .perfil-unified-layout .btn-primary i { display: inline !important; }
            
            /* Btn Password Mobile */
            .perfil-unified-layout .perfil-btn-password-custom {
                gap: 0.5rem !important;
                flex-direction: row !important;
                background: #3b82f6 !important;
                color: #ffffff !important;
                border-radius: 8px 8px 8px 8px !important;
                font-family: inherit !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                padding: 0.5rem 1rem !important;
                border: none;
                transition: all 0.3s;
            }
            .perfil-unified-layout .perfil-btn-password-custom:hover {
                background: #2563eb !important;
                color: #ffffff !important;
            }
                            .perfil-unified-layout .perfil-btn-password-custom span,
                .perfil-unified-layout .perfil-btn-password-custom i { display: inline !important; }
            
            /* Btn Logout Mobile */
            .perfil-btn-logout-custom {
                gap: 0.5rem !important;
                flex-direction: row !important;
                background: #E28769 !important;
                color: #ffffff !important;
                border-radius: 8px 8px 8px 8px !important;
                font-family: inherit !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                padding: 0.5rem 1rem !important;
                border: none;
                transition: all 0.3s;
            }
            .perfil-btn-logout-custom:hover {
                background: #2563eb !important;
                color: #ffffff !important;
            }
                            .perfil-btn-logout-custom span,
                .perfil-btn-logout-custom i { display: inline !important; }
                        /* Labels Mobile */
            .perfil-unified-layout .info-item-editable .info-label,
            .perfil-unified-layout .profile-ext-style-32,
            .perfil-unified-layout .profile-info form label,
            .perfil-unified-layout .visit-add-form label {
                font-family: 'Roboto', sans-serif !important;
                font-size: 1rem !important;
                font-weight: inherit !important;
                color: #242424 !important;
                text-transform: none !important;
                text-shadow: none !important;
            }

            /* Inputs Mobile */
            .perfil-unified-layout input[type="text"],
            .perfil-unified-layout input[type="date"],
            .perfil-unified-layout input[type="password"],
            .perfil-unified-layout select,
            .perfil-unified-layout textarea {
                font-family: 'Roboto', sans-serif !important;
                font-size: 1rem !important;
                font-weight: inherit !important;
                color: #242424 !important;
                text-transform: none !important;
                text-shadow: none !important;
            }

            /* Btn Save Mobile */
            .perfil-unified-layout button[name="update_profile"],
            .perfil-unified-layout .btn-primary {
                gap: 0.5rem !important;
                flex-direction: row !important;
                background: #3b82f6 !important;
                color: #ffffff !important;
                border-radius: 8px 8px 8px 8px !important;
                font-family: inherit !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                padding: 0.5rem 1rem !important;
                cursor: pointer;
                width: 100%;
                border: none;
                transition: all 0.3s;
            }
            .perfil-unified-layout button[name="update_profile"]:hover,
            .perfil-unified-layout .btn-primary:hover {
                background: #2563eb !important;
                color: #ffffff !important;
            }
                            .perfil-unified-layout button[name="update_profile"] span,
                .perfil-unified-layout .btn-primary span,
                .perfil-unified-layout button[name="update_profile"] i,
                .perfil-unified-layout .btn-primary i { display: inline !important; }
            
            /* Btn Password Mobile */
            .perfil-unified-layout .perfil-btn-password-custom {
                gap: 0.5rem !important;
                flex-direction: row !important;
                background: #3b82f6 !important;
                color: #ffffff !important;
                border-radius: 8px 8px 8px 8px !important;
                font-family: inherit !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                padding: 0.5rem 1rem !important;
                border: none;
                transition: all 0.3s;
            }
            .perfil-unified-layout .perfil-btn-password-custom:hover {
                background: #2563eb !important;
                color: #ffffff !important;
            }
                            .perfil-unified-layout .perfil-btn-password-custom span,
                .perfil-unified-layout .perfil-btn-password-custom i { display: inline !important; }
            
            /* Btn Logout Mobile */
            .perfil-btn-logout-custom {
                gap: 0.5rem !important;
                flex-direction: row !important;
                background: #E28769 !important;
                color: #ffffff !important;
                border-radius: 8px 8px 8px 8px !important;
                font-family: inherit !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                padding: 0.5rem 1rem !important;
                border: none;
                transition: all 0.3s;
            }
            .perfil-btn-logout-custom:hover {
                background: #2563eb !important;
                color: #ffffff !important;
            }
                            .perfil-btn-logout-custom span,
                .perfil-btn-logout-custom i { display: inline !important; }
            
            .perfil-avatar-circle {
                width: 80px;
                height: 80px;
            }
            .perfil-avatar-wrapper {
                margin-top: -100px;
                margin-bottom: 2rem;
                gap: 1rem;
            }
        }

/* --- Estilos dinámicos del Footer --- */
.main-footer {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: inherit;
    color: #ffffff;
    text-transform: none;
    text-shadow: none;
}

.main-footer a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.main-footer a:hover {
    color: #fbbf24;
}

/* --- Estilos de las Burbujas (Clusters) - Refactorizado desde Javascript --- */
.custom-cluster-marker {
    background: var(--cluster-bg) !important;
    border: var(--cluster-border-width) solid var(--cluster-border-color) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 15px var(--cluster-border-color) !important;
    --cluster-color: var(--cluster-border-color);
}
.custom-cluster-marker:hover {
    background: var(--cluster-bg-hover) !important;
}
.cluster-pulse-ring {
    border-color: var(--cluster-border-color) !important;
}
.cluster-badge-count {
    font-family: var(--cluster-number-font-family) !important;
    font-size: var(--cluster-number-font-size) !important;
    font-weight: var(--cluster-number-font-weight) !important;
    color: #ffffff !important;
}