/**
 * La página pública de Locales.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * QUÉ HACE Y QUÉ NO
 * ─────────────────────────────────────────────────────────────────────────
 * Sólo el ARMADO de la página: las tres columnas, los filtros y el menú de
 * "¿Cómo llegar?". La TARJETA de local no se redefine acá: sus clases
 * (.pp-local, .pp-local__nombre, .pp-local__estado, …) ya viven en
 * css/modal-direccion.css, que se encola en todas las páginas. Copiarlas sería
 * abrir una segunda versión del mismo componente para que se desincronicen.
 *
 * Lo único que hay que traer de allá son los tokens: --ppm-* está declarado
 * sobre .pp-modal, así que fuera del modal no existen y las tarjetas saldrían
 * sin color. Se redeclaran acá con los MISMOS valores.
 *
 * @see inc/locales-pagina.php
 */

.pp-locales {
    /* Mismos valores que .pp-modal en css/modal-direccion.css. Si allá
       cambian, acá también: son un solo componente en dos contenedores. */
    --ppm-azul: #06038d;
    --ppm-azul-suave: #eef1ff;
    --ppm-azul-borde: #3453d3;
    --ppm-rojo: #eb1c25;
    --ppm-rojo-suave: #ffebe7;
    --ppm-verde: #007f35;
    --ppm-verde-suave: #dbfce0;
    --ppm-linea: #e3e5e8;
    --ppm-gris: #777a80;
    --ppm-pad: 1.25rem;
    --ppm-gap: .75rem;
    --ppm-radio: .5rem;

    /* Una sola altura para el mapa y la lista: así la lista usa todo el
       alto del mapa para su scroll. La leen .pp-locales__mapa y
       .container_locales_page, más abajo. */
    --pp-locales-alto: 620px;

    color: var(--ppm-azul);
    font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0 auto;
    /* La misma caja que el header (.site-header-container,
       header-style.css:88) y el pie (.pp-footer__inner, footer.css:25):
       1360 px de máximo y 1rem a cada lado. Así el título, los filtros y el
       mapa empiezan y terminan donde empiezan y terminan el logo y el carro. */
    max-width: 1360px;
    padding: 1.75rem 1rem 2.5rem;
    width: 100%;
}

/*
 * El contenedor de Storefront se suelta — sólo en esta página.
 *
 * .col-full trae un max-width y un padding propios del tema padre, más
 * angostos que los del header: con ellos la página se veía más angosta que el
 * logo y el carro. Se lo deja al 100 % y sin padding, y los límites los pone
 * .pp-locales, con la misma caja que el header y el pie (ver arriba).
 *
 * Va acotado con .page-template-page-locales y no suelto, que es lo que ya
 * hacen contacto (css/contacto-style.css:3, con .page-id-23) y el checkout
 * (css/checkout-style.css:680). Tocar .col-full a secas le cambiaría el ancho
 * a todo el sitio.
 */
.page-template-page-locales .site-content .col-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.pp-locales__intro h1 {
    color: var(--ppm-azul);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.pp-locales__intro p {
    color: var(--ppm-gris);
    font-size: .9rem;
    margin: 0 0 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Las tres columnas
   ═══════════════════════════════════════════════════════════════════
   Filtros fijos y angostos, lista y mapa repartiéndose el resto. El mapa se
   lleva algo más porque es donde se mira; la lista no necesita ancho, necesita
   alto.

   La ALTURA es obligatoria y no decorativa: #map_local está declarado con
   height:100% en delivery-modal-style.css:172, así que si el contenedor no
   tiene altura propia el mapa se dibuja con 0 px y la página parece rota. */

.pp-locales__cuerpo {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1.15fr);
}

/* ── Filtros ─────────────────────────────────────────────────────── */

.pp-locales__filtros {
    background: #fff;
    border: 1px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    position: sticky;
    top: 100px;
}

.pp-campo { display: block; margin: 0; }

.pp-campo__etiqueta {
    color: var(--ppm-azul);
    display: block;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.pp-locales__filtros select,
.pp-locales__filtros input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1.5px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    color: var(--ppm-azul);
    font-size: .85rem;
    padding: .55rem .7rem;
    width: 100%;
}

.pp-locales__filtros select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2306038d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-position: right .55rem center;
    background-repeat: no-repeat;
    background-size: 18px;
    padding-right: 2rem;
}

.pp-locales__filtros select:focus,
.pp-locales__filtros input:focus {
    border-color: var(--ppm-azul-borde);
    outline: none;
}

/* La lupa adentro del campo, sin superponerse al texto. */
.pp-campo__caja { display: block; position: relative; }

.pp-campo__lupa {
    color: var(--ppm-gris);
    left: .6rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pp-campo__caja input[type="search"] { padding-left: 2.1rem; }

.pp-check {
    align-items: center;
    color: var(--ppm-azul);
    cursor: pointer;
    display: flex;
    font-size: .82rem;
    gap: .5rem;
    margin: 0;
}

.pp-check input { accent-color: var(--ppm-azul); margin: 0; }

.pp-locales__cuenta {
    border-top: 1px solid var(--ppm-linea);
    color: var(--ppm-gris);
    font-size: .78rem;
    margin: .25rem 0 0;
    padding-top: .75rem;
}

/* ── Lista ───────────────────────────────────────────────────────── */

.pp-locales__lista { margin: 0; }

/*
 * La lista mide lo mismo que el mapa, siempre: así su scroll usa todo el alto
 * que el mapa ya ocupa al lado.
 *
 * El selector lleva .pp-locales por delante —(0,2,0)— porque
 * delivery-modal-style.css:5 declara `.container_locales_page` para el modal,
 * con max-height 300px y margin-top -23px, y a igual peso decidiría el orden
 * en que se encolan las hojas. Por eso margin-top y max-height se fijan acá
 * aunque parezcan redundantes.
 */
.pp-locales .container_locales_page {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    height: var(--pp-locales-alto);
    margin-top: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: .35rem;
    width: 100%;
}

/*
 * Esconder una tarjeta: (0,2,0) y con !important.
 *
 * La lección del filtro del home: Bootstrap declara utilidades con
 * !important, y un estilo en línea sin !important no le gana. Además, a
 * igualdad de !important decide la especificidad — y si también empatara,
 * decidiría el orden de carga de las hojas, que es demasiado frágil. Con la
 * clase repetida el selector pesa (0,2,0) y gana siempre.
 */
.pp-oculto-local.pp-oculto-local { display: none !important; }

.pp-locales__vacio {
    color: var(--ppm-gris);
    font-size: .88rem;
    padding: 1.5rem .5rem;
    text-align: center;
}

.pp-enlace {
    background: none;
    border: 0;
    color: var(--ppm-azul);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
}

/*
 * El PNG de la casita se mantiene en el DOM pero no se ve.
 *
 * No se puede borrar: forsend_google_maps.v1.9.js:1997 lo busca por
 * alt="store-pizzapizza-img" para disparar el radio hermano. Se lo achica a
 * 1×1 en vez de display:none porque un elemento oculto del todo no recibe
 * clics — es el mismo truco que ya usa el modal.
 *
 * Su lugar lo ocupa el ícono de tienda AZUL del encabezado de la tarjeta, que
 * es lo que pedía la maqueta: el ícono del local no debe ser rojo ni dominar
 * la tarjeta.
 */
.pp-locales .pp-local__png,
.pp-locales .select-local {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.pp-locales .pp-local { cursor: pointer; position: relative; }

/*
 * El "¿Cómo llegar?" se ve SIEMPRE, no sólo en el local elegido.
 *
 * css/modal-direccion.css:538 esconde .pp-local__acciones hasta que la tarjeta
 * tiene .is-elegido. En el modal tiene sentido: ahí primero elegís dónde
 * comprar y después ves qué hacer con eso. Acá no: esta página existe para
 * encontrar un local e ir, así que esconder el botón hasta que hagas clic
 * esconde justamente la acción que la persona vino a buscar.
 *
 * La cadena lleva .pp-locales por delante para ganarle a esa regla sin
 * !important.
 */
.pp-locales .pp-local .pp-local__acciones {
    display: flex;
    margin-top: .5rem;
}

/* La tarjeta, más compacta que en el modal: acá se ven muchas a la vez. */
.pp-locales .pp-local { padding: .7rem .85rem; }
.pp-locales .pp-local__nombre { font-size: .88rem; }
.pp-locales .pp-local__dir { font-size: .78rem; margin: .15rem 0 0; }
.pp-locales .pp-local__datos { gap: .75rem; margin-top: .3rem; }
.pp-locales .pp-local__dato { font-size: .76rem; }

/* ── Mapa ────────────────────────────────────────────────────────── */

.pp-locales__mapa {
    border: 1px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    height: var(--pp-locales-alto);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.pp-locales__mapa #map_local { height: 100%; width: 100%; }

/* ── ¿Cómo llegar? ───────────────────────────────────────────────── */

.pp-btn--ruta {
    align-items: center;
    background: var(--ppm-rojo);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 700;
    gap: .3rem;
    letter-spacing: .3px;
    padding: .45rem .85rem;
    text-transform: uppercase;
}

/*
 * El ícono, en blanco y explícito.
 *
 * Salía en un rojo apenas más oscuro que el botón —casi invisible— porque el
 * color no llegaba a heredarse. Se fija a mano; `inherit` no alcanza cuando
 * hay una regla de más peso pintando .material-symbols-outlined.
 */
.pp-btn--ruta .material-symbols-outlined {
    color: #fff;
    font-size: 15px;
    font-variation-settings: 'FILL' 1;
}
.pp-btn--ruta:hover { filter: brightness(.94); }

.pp-btn--fantasma {
    background: none;
    border: 1.5px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    color: var(--ppm-azul);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    padding: .5rem .75rem;
}

.pp-btn--fantasma:hover { border-color: var(--ppm-azul-borde); }

/* ── Semana, distancia y ruta en la tarjeta ─────────────────────────── */

.pp-local__ver-semana {
    background: none;
    border: 0;
    color: var(--ppm-azul);
    cursor: pointer;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    margin-top: .35rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pp-local__ver-semana::after { content: ' ▾'; }
.pp-local__ver-semana[aria-expanded="true"]::after { content: ' ▴'; }

.pp-local__semana {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: .35rem 0 0;
    max-width: 290px;
}

.pp-local__semana[hidden] { display: none; }

.pp-local__semana-fila {
    border-radius: 4px;
    display: flex;
    font-size: .74rem;
    gap: .75rem;
    justify-content: space-between;
    padding: .15rem .4rem;
}

.pp-local__semana-fila dt { color: var(--ppm-gris); font-weight: 600; margin: 0; }
.pp-local__semana-fila dd { color: var(--ppm-azul); font-variant-numeric: tabular-nums; margin: 0; }
.pp-local__semana-fila.es-hoy { background: var(--ppm-azul-suave); }
.pp-local__semana-fila.es-hoy dt,
.pp-local__semana-fila.es-hoy dd { color: var(--ppm-azul); font-weight: 700; }

.pp-local__dato.es-distancia[hidden] { display: none; }

/* La marca del local más cercano a la casa del socio. */
.pp-local__cercano {
    background: var(--ppm-azul);
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: .3rem 0 .1rem;
    padding: .18rem .55rem;
    text-transform: uppercase;
}

.pp-local__ruta {
    color: var(--ppm-azul);
    font-size: .76rem;
    font-weight: 600;
    margin: .45rem 0 0;
}

.pp-local__ruta[hidden] { display: none; }

/* El globo de "Tu casa" en el mapa. */
.pp-casa-info { color: var(--ppm-azul); font-size: 12px; line-height: 1.35; max-width: 220px; }
.pp-casa-info strong { display: block; font-size: 13px; }

/* ── ¿Cómo llegar? ─────────────────────────────────────────────────────
   Un <dialog>: se lleva el foco, se cierra con Esc y oscurece el fondo. */

.pp-ruta-modal {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(6, 3, 141, .28);
    color: var(--ppm-azul);
    max-width: 380px;
    padding: 0;
    width: calc(100% - 32px);
}

.pp-ruta-modal::backdrop { background: rgba(10, 12, 40, .5); }

.pp-ruta-modal__caja { padding: 1.4rem 1.3rem 1.1rem; position: relative; }

.pp-ruta-modal__cerrar {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--ppm-gris);
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: .6rem;
    top: .6rem;
    width: 34px;
}

.pp-ruta-modal__cerrar:hover { background: var(--ppm-azul-suave); color: var(--ppm-azul); }

.pp-ruta-modal__titulo { font-size: 1.1rem; font-weight: 700; margin: 0 2rem .2rem 0; }

.pp-ruta-modal__destino { color: var(--ppm-gris); font-size: .85rem; margin: 0 0 1rem; }

.pp-ruta-modal__apps { display: flex; flex-direction: column; gap: .6rem; }

/* Las tres apps: píldoras de 40 px con el logo de cada una, iguales a los
   botones de Google y Apple del acceso (css/tu-cuenta-style.css). Con
   .pp-ruta-modal delante para que no les ganen los estilos de enlace del tema. */
.pp-ruta-modal .pp-ruta-app {
    align-items: center;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 999px;
    color: #3c4043;
    display: flex;
    font-size: .95rem;
    font-weight: 500;
    gap: .6rem;
    height: 40px;
    justify-content: center;
    padding: 0 1.25rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.pp-ruta-modal .pp-ruta-app:hover { background: #f8faff; border-color: #d2e3fc; color: #3c4043; text-decoration: none; }
.pp-ruta-modal .pp-ruta-app:focus-visible { border-color: var(--ppm-azul); box-shadow: 0 0 0 3px rgba(6, 3, 141, .2); outline: none; }
.pp-ruta-modal .pp-ruta-app[hidden] { display: none; }
.pp-ruta-app__logo { flex: none; height: 20px; width: auto; }

.pp-ruta-modal__nota { color: var(--ppm-gris); font-size: .76rem; margin: .9rem 0 0; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   Angosto
   ═══════════════════════════════════════════════════════════════════
   El mapa sube al tope, como en el modal: en un teléfono lo primero que
   orienta es ver dónde estás parado. Después los filtros, después la lista. */

@media (max-width: 1100px) {
    .pp-locales__cuerpo { grid-template-columns: 230px minmax(0, 1fr); }
    .pp-locales__mapa { grid-column: 1 / -1; grid-row: 1; height: 340px; position: static; }
    .pp-locales__filtros { position: static; }
}

@media (max-width: 767px) {
    .pp-locales { padding: 1.25rem 1rem 2rem; }
    .pp-locales__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .pp-locales__mapa { height: 260px; }
    /* En una columna la lista ya no está al lado del mapa: va entera y el
       scroll es el de la página. */
    .pp-locales .container_locales_page { height: auto; overflow: visible; padding-right: 0; }

    /* Área táctil: el kit pide 44 px de mínimo. */
    .pp-btn--ruta { min-height: 40px; }
    .pp-btn--fantasma { min-height: 44px; }
}