:root {
            --primario: #801336; /* Color Vino CEDECO */
            --resaltado: #e63946;
            --mapa-base: #d1d8e0;
            --mapa-activo: #a8dadc; /* Color para estados con centros */
            --blanco: #ffffff;
        }

        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #f0f2f5; margin: 0; display: flex; flex-direction: column; height: 100vh; }

        .dashboard-container { display: flex; flex: 1; gap: 20px; padding: 20px; overflow: hidden; }

        /* Contenedor del Mapa */
        #contenedor-mapa {
            flex: 2;
            background: var(--blanco);
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg { width: 95%; height: 95%; }
        
        /* Estilos de los Estados */
        svg path { 
            fill: var(--mapa-base); 
            stroke: #fff; 
            stroke-width: 1; 
            transition: fill 0.3s, transform 0.2s; 
            cursor: pointer; 
        }

        .estado-con-centros { fill: var(--mapa-activo); }
        .estado-seleccionado { fill: var(--primario) !important; }
        svg path:hover { filter: brightness(0.9); }

        /* Estilo de los Pines (Puntos) */
        .pin-centro {
            fill: var(--resaltado);
            stroke: #fff;
            stroke-width: 1.5;
            r: 6;
            transition: r 0.3s;
            pointer-events: none; /* Para no interferir con el clic en el estado */
        }

        /* Panel Lateral UX */
        #panel-info {
            flex: 1;
            background: var(--blanco);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }

        #lista-centros { overflow-y: auto; flex-grow: 1; margin-top: 15px; padding-right: 5px; }

        .centro-card {
            border: 1px solid #edf2f7;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 12px;
            background: #fff;
            border-left: 5px solid var(--mapa-base);
            transition: all 0.3s;
        }

        .centro-card.active { border-left-color: var(--primario); background: #fff5f7; transform: scale(1.02); }

        .centro-card h4 { margin: 0; color: var(--primario); }
        .centro-card p { margin: 5px 0 0; font-size: 14px; color: #4a5568; }

        /* Tooltip */
        .tooltip {
            position: absolute;
            background: rgba(26, 32, 44, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            pointer-events: none;
            display: none;
            z-index: 1000;
        }