:root { --primary: #4833E2; --primary-dark: #3522b3; --text-dark: #282828; --bg-light: #fbfbfb; --white: #ffffff; }
        
        body { 
            font-family: 'Poppins', sans-serif; 
            background-color: var(--bg-light); 
            color: var(--text-dark); 
            height: 100vh;
            height: 100dvh; 
            display: flex; 
            flex-direction: column; 
            overflow: hidden; 
        }

.leaflet-container a {
  color: var(--primary)!important;
}

        /* NAVBAR */
        .navbar-custom { 
            background-color: var(--white); 
            box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
            z-index: 1000; 
            flex-shrink: 0;  
            height: auto;
            min-height: 60px;
            padding-bottom: 10px;
            padding-top: calc(10px + env(safe-area-inset-top)); 
        }

        .btn-huellita { background-color: var(--primary); color: white; border-radius: 50px; padding: 6px 20px; font-weight: 500; text-decoration: none; transition: 0.3s; font-size: 14px; }
        .btn-huellita:hover { background-color: var(--primary-dark); color: white; }
        .navbar-logo { max-height: 35px; }

        .logo-responsive { position: relative; transform: none; left: auto; top: auto; }
        @media (min-width: 768px) {
            .logo-responsive { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: calc(env(safe-area-inset-top) / 2); }
        }

        /* LAYOUT PRINCIPAL */
        .main-container { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
        
        /* SIDEBAR (LISTA) */
        #sidebar-list { 
            width: 320px; 
            min-width: 320px; 
            background-color: var(--white); 
            height: 100%; 
            box-shadow: 5px 0 15px rgba(0,0,0,0.05); 
            z-index: 3; 
            transition: transform 0.3s ease-in-out; 
            position: relative; 
            display: flex; 
            flex-direction: column; 
            overflow: visible !important; 
        }
        
        .filter-section {
            padding: 15px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
        }
        .filter-label { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; margin-bottom: 5px; display: block; }
        .form-select-sm, .form-control-sm { border-radius: 8px; border: 1px solid #ddd; font-size: 13px; }
        .form-select-sm:focus, .form-control-sm:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(72, 51, 226, 0.1); }

        .sidebar-header { padding: 10px 15px 0 15px; flex-shrink: 0; position: relative; }
        .sidebar-header--location { padding-bottom: 10px; }
        .sidebar-header--location .btn-location { margin-bottom: 0; }
        .location-icon, .pet-location .fa-map-marker-alt, .popup-location .fa-map-marker-alt { color: var(--primary); }
        #pets-container { flex: 1; overflow-y: auto; padding: 10px 15px; scrollbar-width: thin; scrollbar-color: #ddd transparent; }
        .pets-message { padding: 25px 10px; text-align: center; color: #666; font-size: 13px; }
        .pets-message--error { color: #b42318; }

        /* BOTÓN CERRAR SIDEBAR (FLECHITA) */
        .close-sidebar-btn {
            display: flex !important; align-items: center; justify-content: center; position: absolute;
            background-color: var(--white); border-radius: 50%; box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
            color: var(--primary); z-index: 1001; width: 40px; height: 40px; border: 1px solid #eee;
            cursor: pointer; transition: 0.2s;
        }
        .close-sidebar-btn:hover { background-color: #f0f0f0; transform: scale(1.05); }
        .sidebar-hidden .close-sidebar-btn { display: none !important; }
        @media (min-width: 769px) { .close-sidebar-btn { top: 20px; right: -50px; } }

        /* PET CARDS */
        .pet-card { background: var(--white); border: 1px solid #eee; border-radius: 12px; padding: 10px; margin-bottom: 15px; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; gap: 12px; }
        .pet-card:hover, .pet-card.active { border-color: var(--primary); box-shadow: 0 5px 15px rgba(72, 51, 226, 0.15); background-color: #fcfbff; }
        
        .pet-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background-color: #eee; flex-shrink: 0; }
        .pet-info { flex: 1; min-width: 0; } 
        .pet-info h4 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text-dark); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pet-status { font-size: 10px; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 3px; }
        .status-lost { background: #ffebeb; color: #ff4d4d; }
        .status-found { background: #e6fffa; color: #00b894; }
        .pet-location { font-size: 11px; color: #666; display: flex; align-items: center; gap: 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pet-date { font-size: 10px; color: #888; display: flex; align-items: center; gap: 4px; margin-top: 2px; }

        /* CARRUSEL DE PUBLICIDAD */
        .ad-banner-container { padding: 15px; background: white; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; z-index: 2; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
        .ad-track { display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 5px; width: 100%; }
        .ad-track::-webkit-scrollbar { display: none; }
        .ad-slide { min-width: 100%; scroll-snap-align: center; border-radius: 12px; overflow: hidden; }
        .ad-banner { display: block; padding: 15px; color: white; text-align: center; text-decoration: none; position: relative; border-radius: 12px; }
        .ad-banner:hover { color: white; opacity: 0.95; }
        .ad-banner.v1 { background: linear-gradient(135deg, var(--primary) 0%, #8E2DE2 100%); }
        .ad-banner.v2 { background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%); }
        .ad-banner.v3 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
        .ad-title { font-weight: 700; margin-bottom: 4px; position: relative; z-index: 1; font-size: 14px; }
        .ad-text { font-size: 11px; opacity: 0.9; margin: 0; position: relative; z-index: 1; }
        .ad-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.2); font-size: 8px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-weight: bold; }
        .ad-indicators { display: flex; gap: 5px; margin-top: 8px; cursor: pointer; }
        .ad-dot { width: 8px; height: 8px; background-color: #ddd; border-radius: 50%; transition: all 0.3s ease; }
        .ad-dot.active { background-color: var(--primary); width: 14px; border-radius: 10px; }
        .ad-dot:hover { background-color: #bbb; }

        /* MAPA & COMPONENTES */
        #map-container { flex: 1; height: 100%; position: relative; z-index: 1; background-color: #fdfbfe; }
        .sidebar-hidden #sidebar-list { transform: translateX(-100%); position: absolute; }
        
        /* BOTÓN FLOTANTE "VER LISTA" */
        #open-sidebar-btn { 
            position: absolute; top: 20px; left: 20px; z-index: 2; 
            background: white; border: none; padding: 12px 20px; border-radius: 50px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.2); font-weight: 600; color: var(--primary); 
            cursor: pointer; display: none; align-items: center; gap: 8px; 
        }
        .sidebar-hidden #open-sidebar-btn { display: flex; }
        
        .btn-location { width: 100%; background-color: #f0f0f0; color: var(--text-dark); border: none; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
        
        /* LEAFLET & POPUPS */
        .custom-marker-wrapper { background: transparent; }
        .custom-marker-icon { background-color: var(--map-marker, #4a32e6); color: white; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 3px 6px rgba(0,0,0,0.3); font-size: 16px; width: 35px !important; height: 35px !important; }
        .cluster-custom-icon { background: transparent; }
        .cluster-custom-inner { width: 40px; height: 40px; background-color: var(--map-marker, #4a32e6); color: white; border-radius: 50%; border: 2px solid white; box-shadow: 0 3px 6px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 14px; }

        .leaflet-popup-content-wrapper { border-radius: 10px; padding: 0; overflow: hidden; }
        .leaflet-popup-content { margin: 0; width: 270px !important; }
        
        .popup-header-container { position: relative; width: 100%; }
        .popup-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
        .popup-badge { position: absolute; top: 10px; left: 10px; z-index: 10; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        .bg-lost { background-color: #ff4d4d; }
        .bg-found { background-color: #00b894; }
        .popup-info { padding: 6px 10px; text-align: center; }
        .popup-name { font-weight: 700; color: var(--primary); margin: 0; line-height: 1.2; }
        .popup-location { margin: 2px 0 0; font-size: 13px; color: #666; line-height: 1.2; }
        .popup-date { margin: 2px 0 5px; font-size: 12px; color: #888; line-height: 1.2; }
        .popup-actions { display: flex; gap: 5px; }
        .popup-actions .btn-ws-popup, .popup-actions .btn-ver-mas { flex: 1; margin-top: 4px; }
        
        .btn-ver-mas { display: block; width: 100%; background-color: white; border: 1px solid var(--primary); color: var(--primary); text-align: center; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 6px; transition: 0.2s; }
        .btn-ver-mas:hover { background-color: var(--primary); color: white; }
        .btn-ws-popup { display: block; background: #2FF077; color: white; text-align: center; padding: 6px; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 600; margin-top: 8px; }
        .leaflet-container a.leaflet-popup-close-button { color: var(--primary) !important; font-size: 24px !important; font-weight: 300; top: 5px; right: 5px; text-shadow: 0 0 5px #c7b7ff; }

        /* PANEL DESLIZANTE DETALLE */
        .pet-detail-panel {
            position: fixed; top: 0; right: -400px; width: 380px; height: 100%;
            background: white; box-shadow: -5px 0 20px rgba(0,0,0,0.1); z-index: 9999;
            transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex; flex-direction: column;
        }
        .pet-detail-panel.active { right: 0; }
        .panel-header { padding: 15px; display: flex; align-items: center; border-bottom: 1px solid #eee; padding-top: calc(15px + env(safe-area-inset-top)); }
        .close-panel-btn { background: none; border: none; font-size: 18px; color: #333; cursor: pointer; margin-right: 15px; }
        .panel-title { font-weight: 700; font-size: 16px; margin: 0; }
        .panel-content { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom));text-align: center; }
        .detail-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .detail-status { display: inline-block; padding: 5px 12px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
        .detail-name { font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
        .detail-meta { color: #666; font-size: 13px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 5px; }
        .detail-label { font-weight: 600; color: #333; margin-top: 15px; display: block; font-size: 13px; }
        .detail-desc { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 20px; }
        .contact-box { background: #f8f9fa; padding: 15px; border-radius: 12px; border: 1px solid #eee; }
        .contact-name { font-weight: 700; font-size: 14px; margin-bottom: 5px; }
        .contact-phone { font-size: 13px; color: #666; align-items: center; gap: 5px; }
        .contact-label { margin-top: 0; margin-bottom: 10px; }
        .contact-whatsapp { display: block; text-align: center; margin-top: 15px; }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            
            .main-container { flex-direction: column; }
            #map-container { height: 100%; width: 100%; position: absolute; top: 0; left: 0; }
            
            #sidebar-list { 
                width: 100%; min-width: auto; 
                /* CAMBIO 1: Altura automática para ajustarse solo al contenido visible */
                height: auto; 
                max-height: 60vh;
                position: absolute; bottom: 0; left: 0; 
                border-radius: 20px 20px 0 0; box-shadow: 0 -5px 20px rgba(0,0,0,0.15); 
                display: flex; flex-direction: column; z-index: 1000;
                padding-bottom: env(safe-area-inset-bottom);
                
                /* POR DEFECTO VISIBLE EN MÓVIL */
                transform: translateY(0); 
            }
            
            /* CLASE PARA OCULTAR (cuando el usuario cierra la lista) */
            .sidebar-hidden #sidebar-list { transform: translateY(100%); }
            
            /* POSICIONAMIENTO BOTÓN "VER LISTA" (MÁS ABAJO) */
            #open-sidebar-btn { 
                top: auto; 
                bottom: 25px; 
                left: 50%; transform: translateX(-50%); 
                width: auto; white-space: nowrap; 
                box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            }
            .close-sidebar-btn { top: -45px; right: 15px; }

            /* Filtros compactos */
            .filter-section { padding: 8px 15px; }
            .filter-label { margin-bottom: 2px; font-size: 10px; }
            .sidebar-header { padding-top: 5px; }

            /* Grid Layout Móvil - CAMBIO 2: Ocultar la lista de mascotas */
            #pets-container { 
                
            }
            
            .ad-banner-container { padding: 10px; }
            .ad-banner { padding: 10px; }
            .ad-title { font-size: 12px; }

            /* Popup mapa móvil */
            .leaflet-popup-content { width: 200px !important; } 
            .popup-info { padding: 5px !important; }
            .popup-info h5 { font-size: 12px !important; margin-bottom: 2px !important; }
            .popup-info p { font-size: 9px !important; margin-bottom: 2px !important; }
            .btn-ws-popup, .btn-ver-mas { font-size: 9px !important; padding: 4px !important; margin-top: 3px !important; }
            .leaflet-container a.leaflet-popup-close-button { font-size: 18px !important; top: 2px; right: 2px; }

            .pet-detail-panel { width: 100%; right: -100%; }
        }