/* ============================================================
   SOLCA Red Nacional v3 — CSS mobile-first
   tbō Soluciones Digitales
   ============================================================ */

/* ── Variables ── */
.solca-mapa-wrapper {
    --solca-azul:       #1a5fa8;
    --solca-bg:         #1180c4;
    --solca-claro:      #5b9bd5;
    --solca-dark:       #0d3c6e;
    --solca-panel-head: #0f5a9e;
    --solca-naranja:    #F5A623;
    --solca-blanco:     #ffffff;
    --solca-gris:       #4a5568;
    --solca-radio:      12px;

    background: var(--solca-bg);
    border-radius: 18px;
    padding: 28px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--solca-blanco);
    overflow: hidden;
}

/* ── Título — siempre arriba ── */
.solca-mapa-titulo-bloque {
    margin-bottom: 20px;
}
.solca-mapa-title {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--solca-dark);
    margin: 0;
    letter-spacing: -0.01em;
}
.solca-mapa-title span {
    color: var(--solca-dark);
}

/* ── Layout inner: mobile = columna (mapa arriba, sidebar abajo) ── */
.solca-mapa-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Mapa ── */
.solca-mapa-google-wrap {
    width: 100%;
    border-radius: var(--solca-radio);
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(13,60,110,.28);
    flex-shrink: 0;
}
.solca-google-map {
    width: 100%;
    display: block;
    min-height: 260px;
}

/* ── Sidebar ── */
.solca-mapa-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Lista de sedes ── */
.solca-mapa-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.solca-mapa-list li {
    margin: 0;
    padding: 0;
}

/* Botón de sede */
.solca-sede-btn {
    width: 100%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: var(--solca-dark);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.solca-sede-btn:hover {
    background: rgba(255,255,255,0.22);
}
.solca-sede-btn.activo {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    font-weight: 700;
}
.solca-sede-btn-texto {
    flex: 1;
}

/* Dot */
.solca-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--solca-dark);
    opacity: 0.5;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s, transform 0.15s;
}
.solca-sede-btn.activo .solca-dot {
    background: var(--solca-naranja);
    opacity: 1;
    transform: scale(1.35);
}

/* Chevron (solo mobile) */
.solca-chevron {
    flex-shrink: 0;
    color: var(--solca-dark);
    opacity: 0.6;
    transition: transform 0.2s;
}
.solca-sede-btn.activo .solca-chevron {
    transform: rotate(180deg);
}

/* ── Panel inline (mobile: debajo de cada botón) ── */
.solca-panel-inline {
    margin-top: 4px;
    border-radius: var(--solca-radio);
    overflow: hidden;
    animation: solcaSlideDown 0.2s ease;
}
.solca-panel-inline[hidden] { display: none; }

@keyframes solcaSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel desktop (oculto en mobile) ── */
.solca-panel-desktop {
    display: none; /* se activa en @media desktop */
}

/* ── Contenido del panel (compartido) ── */
.solca-panel-head {
    background: var(--solca-panel-head);
    padding: 11px 15px;
}
.solca-panel-nombre {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--solca-blanco);
    line-height: 1.35;
}
.solca-panel-body-dir {
    background: var(--solca-claro);
    padding: 10px 15px;
}
.solca-panel-body-dir p {
    margin: 0;
    font-size: 0.79rem;
    color: var(--solca-blanco);
    line-height: 1.5;
    white-space: pre-line;
}
.solca-panel-body-dir p + p { margin-top: 4px; }
.solca-panel-body-hor {
    background: var(--solca-blanco);
    padding: 12px 15px;
}
.solca-panel-hor-label {
    margin: 0;
    font-size: 0.74rem;
    color: var(--solca-gris);
    font-weight: 500;
}
.solca-panel-horario {
    margin: 2px 0 11px;
    font-size: 0.79rem;
    font-weight: 700;
    color: #2d3748;
}
.solca-panel-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--solca-azul);
    text-decoration: none;
}
.solca-panel-maps-link:hover { text-decoration: underline; }

/* ── Aviso admin (solo para admins cuando no hay sedes) ── */
.solca-aviso-admin {
    background: rgba(245,166,35,.15);
    border: 1px dashed var(--solca-naranja);
    border-radius: 0 0 var(--solca-radio) var(--solca-radio);
    padding: 10px 16px;
    font-size: 0.82rem;
    color: var(--solca-dark);
}
.solca-aviso-admin a {
    color: var(--solca-azul);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Sin API key ── */
.solca-mapa-no-key {
    background: rgba(255,255,255,0.1);
    border: 2px dashed rgba(255,255,255,0.35);
    border-radius: var(--solca-radio);
    padding: 32px 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.solca-mapa-no-key p { color: #fff; font-size: 0.88rem; line-height: 1.6; }
.solca-mapa-no-key a { color: var(--solca-naranja); text-decoration: underline; }

/* ── InfoWindow de Google Maps ── */
.solca-infowindow {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-width: 190px;
    max-width: 250px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #2d3748;
}
.solca-infowindow h3 {
    font-size: 13px;
    font-weight: 700;
    color: #0d3c6e;
    margin: 0 0 5px;
}
.solca-infowindow p { margin: 0 0 3px; font-size: 12px; }
.solca-infowindow .iw-sep {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #718096;
}
.solca-infowindow .iw-link {
    display: inline-block;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #1a5fa8;
    text-decoration: none;
}
.solca-infowindow .iw-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════
   TABLET (≥ 600px) — mapa más alto
════════════════════════════════════════ */
@media (min-width: 600px) {
    .solca-mapa-wrapper { padding: 36px 32px; }
    .solca-mapa-title   { font-size: 1.75rem; }
    .solca-google-map   { min-height: 340px; }
    /* Ocultar chevron en tablet+ */
    .solca-chevron      { display: none; }
}

/* ════════════════════════════════════════
   DESKTOP (≥ 860px) — layout horizontal
════════════════════════════════════════ */
@media (min-width: 860px) {
    .solca-mapa-wrapper { padding: 44px 40px; }
    .solca-mapa-title   { font-size: 1.9rem; }

    /* Inner: lado a lado — sidebar a la izquierda, mapa a la derecha */
    .solca-mapa-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }

    /* Sidebar fija a 280px */
    .solca-mapa-sidebar {
        flex: 0 0 280px;
        width: 280px;
    }

    /* Botones sin borde, solo texto */
    .solca-sede-btn {
        background: none;
        border: none;
        border-radius: 4px;
        padding: 6px 0;
        transition: transform 0.15s;
    }
    .solca-sede-btn:hover {
        background: none;
        transform: translateX(4px);
    }
    .solca-sede-btn.activo {
        background: none;
        border: none;
    }

    /* Chevron oculto en desktop */
    .solca-chevron { display: none; }

    /* Panel inline oculto en desktop */
    .solca-panel-inline { display: none !important; }

    /* Panel desktop visible */
    .solca-panel-desktop {
        display: block;
        border-radius: var(--solca-radio);
        overflow: hidden;
        box-shadow: 0 6px 28px rgba(13,60,110,.22);
        animation: solcaFadeUp 0.22s ease;
    }
    .solca-panel-desktop[hidden] { display: none; }

    @keyframes solcaFadeUp {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Mapa ocupa el resto */
    .solca-mapa-google-wrap {
        flex: 1;
        min-width: 0;
    }
}

/* ════════════════════════════════════════
   COMPATIBILIDAD ELEMENTOR
   El widget shortcode de Elementor no hereda
   width:100% por defecto — forzarlo aquí.
════════════════════════════════════════ */
.elementor-widget-shortcode,
.elementor-shortcode {
    width: 100%;
}

.elementor-shortcode .solca-mapa-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.elementor-shortcode .solca-mapa-inner {
    width: 100%;
    min-width: 0;
}

.elementor-shortcode .solca-mapa-google-wrap {
    width: 100%;
    min-width: 0;
}

.elementor-shortcode .solca-google-map {
    width: 100% !important;
    min-width: 0;
}