/* ==========================================================================
   Roger Editor — bloque "Puntos de venta". Réplica 1:1 de .pv- de
   style.css del prototipo (info/puntos-de-venta.php). */

.roger-editor-pv-hero {
    position: relative;
    background-image: var(--roger-editor-pv-fondo-desktop, none);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    padding: 10rem 0;
    /* topbar + header + nav + breadcrumb + este hero deben sumar 100vh
       exacto — --pv-hero-top (medido en JS porque el header es sticky)
       se resta de 100vh. */
    min-height: calc(80vh - var(--pv-hero-top, 0px));
    display: flex; align-items: center;
    box-sizing: border-box;
}
.roger-editor-pv-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 100%);
}
.roger-editor-pv-hero-breadcrumb {
    position: absolute; top: 20px; left: 24px; z-index: 2;
    margin: 0;
    font-size: 13px; color: var(--fg-muted);
}
.roger-editor-pv-hero-breadcrumb a { color: var(--fg-muted); }
.roger-editor-pv-hero-breadcrumb a:hover { color: var(--color-primary); }
.roger-editor-pv-hero .container { position: relative; z-index: 1; }
.roger-editor-pv-hero-texto { width: 50%; margin-top: 5rem; }

.roger-editor-pv-directorio { padding: 3rem 0; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.roger-editor-pv-directorio-head {
    justify-content: center; text-align: center;
    padding-top: 2rem; margin-bottom: 32px;
}
/* El eyebrow del hero ("Cobertura") no lleva mayúsculas en el prototipo
   (es un .eyebrow-sm suelto), pero el de "Directorio" sí, porque ahí el
   contenedor tiene además la clase .section-head — acá se replica ese
   mismo contraste sin necesidad de esa segunda clase. */
.roger-editor-pv-directorio-head .roger-editor-eyebrow {
    display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px;
}
.roger-editor-pv-hero h1 { font-size: 34px; margin: 10px 0 14px; line-height: 1.2; }
.roger-editor-pv-subtitulo { color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; max-width: 560px; }

.roger-editor-pv-filtro-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: 22px; margin-bottom: 0;
}
.roger-editor-pv-filtro-row label { font-size: 13.5px; font-weight: 600; color: var(--fg-muted); }
.roger-editor-pv-filtro-row select {
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    padding: 10px 36px 10px 16px;
    border: 1px solid var(--border); border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A2A3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--fg); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.roger-editor-pv-filtro-row select:hover { border-color: var(--color-primary); }

.roger-editor-pv-grupo-depto { margin-bottom: 36px; max-width: 620px; margin-left: auto; margin-right: auto; }
.roger-editor-pv-grupo-depto:last-child { margin-bottom: 0; }
.roger-editor-pv-grupo-depto-vacio .roger-editor-pv-depto-nombre { margin-bottom: 0; }
.roger-editor-pv-grupo-depto-vacio { margin-bottom: 14px; }
.roger-editor-pv-depto-nombre {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: none; border: none; text-align: left; cursor: pointer;
    padding: 10px 0 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-display); font-style: italic; font-weight: 600;
    font-size: 20px; color: var(--color-plum);
    transition: background-color .2s ease, padding-left .2s ease, padding-right .2s ease;
}
.roger-editor-pv-depto-nombre:hover { background: var(--bg-muted); padding-left: 14px; padding-right: 14px; }
.roger-editor-pv-depto-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-primary); flex-shrink: 0;
}
.roger-editor-pv-depto-ver-mapa {
    margin-left: auto;
    font-family: var(--font-sans); font-style: normal; font-weight: 600;
    font-size: 12.5px; color: var(--color-primary);
}
.roger-editor-pv-depto-nombre:hover .roger-editor-pv-depto-ver-mapa { color: var(--color-primary-dark); }

.roger-editor-pv-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.roger-editor-pv-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 20px; position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.roger-editor-pv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.roger-editor-pv-card-icono {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-rose-soft);
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.roger-editor-pv-card-texto { display: flex; flex-direction: column; gap: 2px; }
.roger-editor-pv-card-texto strong { font-size: 14.5px; color: var(--color-plum); }
.roger-editor-pv-card-ciudad { font-size: 12.5px; color: var(--fg-muted); }
.roger-editor-pv-card-linea { font-size: 11.5px; color: var(--color-rose); font-weight: 600; margin-top: 4px; }
.roger-editor-pv-card-badge {
    position: absolute; top: 14px; right: 14px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-primary); background: var(--color-rose-soft);
    padding: 4px 9px; border-radius: 100px;
}

/* ---- Modal: mapa real del departamento + su listado ---- */
.roger-editor-pv-modal-overlay {
    position: fixed; inset: 0; background: rgba(36,27,33,.6);
    opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 9995;
}
.roger-editor-pv-modal-overlay.abierto { opacity: 1; visibility: visible; }
.roger-editor-pv-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.96);
    width: min(940px, 94vw);
    max-height: 90vh;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 9996;
}
.roger-editor-pv-modal.abierto { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.roger-editor-pv-modal-panel {
    display: grid; grid-template-columns: 1fr 1.1fr;
    background: #fff; border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px -18px rgba(74,42,58,.4);
    max-height: 90vh;
}
.roger-editor-pv-modal-mapa {
    background: var(--bg-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
}
.roger-editor-pv-modal-mapa-img { width: 100%; height: auto; max-height: 56vh; object-fit: contain; }
.roger-editor-pv-modal-whatsapp {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 28px;
    padding: 12px 22px;
    background: #25D366; color: #fff;
    border-radius: 100px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 24px -10px rgba(37,211,102,.55);
    transition: transform .2s ease, box-shadow .2s ease;
}
.roger-editor-pv-modal-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(37,211,102,.65); }
.roger-editor-pv-modal-whatsapp svg { flex-shrink: 0; }
.roger-editor-pv-modal-info {
    padding: 28px; position: relative;
    overflow-y: auto; max-height: 90vh;
}
.roger-editor-pv-modal-titulo { font-size: 24px; margin: 6px 0 20px; }
.roger-editor-pv-modal-cerrar {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-muted); font-size: 16px; border: none; background: none; cursor: pointer;
}
.roger-editor-pv-modal-cerrar:hover { background: var(--bg-muted); }
.roger-editor-pv-modal-lista { display: flex; flex-direction: column; gap: 12px; }
.roger-editor-pv-modal-lista .roger-editor-pv-card { padding: 16px; }

/* ---- Cobertura de envíos por agencia (dentro del modal del mapa) ---- */
.roger-editor-pv-modal-envios { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.roger-editor-pv-modal-envios .roger-editor-eyebrow { display: block; margin-bottom: 12px; }
.roger-editor-pv-envio-lista { display: flex; flex-direction: column; gap: 16px; }
.roger-editor-pv-envio-provincia { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.roger-editor-pv-envio-provincia:last-child { padding-bottom: 0; border-bottom: none; }
.roger-editor-pv-envio-provincia strong { display: block; font-size: 14.5px; color: var(--color-plum); margin-bottom: 8px; }
.roger-editor-pv-envio-agencias { display: flex; flex-wrap: wrap; gap: 8px; }
.roger-editor-pv-agencia-pill {
    display: inline-flex; align-items: center;
    background: var(--bg-muted); border-radius: 100px;
    padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--color-primary);
}

@media (max-width: 760px) {
    .roger-editor-pv-lista { grid-template-columns: 1fr; }
    .roger-editor-pv-modal-panel { grid-template-columns: 1fr; overflow-y: auto; }
    .roger-editor-pv-modal-mapa { padding: 16px; }
    .roger-editor-pv-modal-info { max-height: none; overflow-y: visible; }
    .roger-editor-pv-hero {
        padding: 2.5rem 0; min-height: 0; display: block;
        background-image: var(--roger-editor-pv-fondo-movil, var(--roger-editor-pv-fondo-desktop, none));
    }
    .roger-editor-pv-hero-breadcrumb { position: static; margin-bottom: 16px; }
    .roger-editor-pv-hero-texto { width: 100%; margin-top: 0; }
    .roger-editor-pv-hero-texto .roger-editor-eyebrow { font-size: 11px; line-height: 1.2; }
    .roger-editor-pv-hero h1 { font-size: 22px; margin: 6px 0 8px; line-height: 1.2; }
    .roger-editor-pv-subtitulo { font-size: 13px; line-height: 1.4; }
    .roger-editor-pv-filtro-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .roger-editor-pv-directorio-head h2 { line-height: 1.15; }
    .roger-editor-pv-depto-nombre { font-size: 16px; }
}