/**
 * Modal de dirección — rediseño.
 *
 * Basado en la maqueta que entregó Federico (proyecto Lovable
 * "Pizza Order Modal"). De ahí salen la estructura de dos columnas, las
 * tarjetas de local, las pestañas y los tamaños.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * QUÉ SE RESPETÓ Y QUÉ NO
 * ─────────────────────────────────────────────────────────────────────────
 * La maqueta usa un azul #1600AA y un rojo #DB0012, que son aproximaciones
 * de la marca. Acá se usan los colores REALES de PizzaPizza —#06038d y
 * #eb1c25— para que el modal no desentone con el resto del sitio. Todo lo
 * demás (radios, tamaños de letra, espaciados, estados) sale de la maqueta.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * NADA DE ESTO TOCA LA LÓGICA
 * ─────────────────────────────────────────────────────────────────────────
 * El markup conserva cada id y cada name del modal anterior, y las tres
 * relaciones de estructura de las que depende el JavaScript:
 *
 *   1. #retiro_btn tiene que tener un padre al que jQuery le cambia las
 *      clases de justificación (forsend_google_maps, línea ~723).
 *   2. .local-pizzapizza-img tiene que ser HERMANA de input.select-local:
 *      al hacer clic en la imagen, el JS busca `siblings('.select-local')`.
 *   3. Los contenedores que el JS muestra y esconde por id siguen ahí:
 *      .direccion_02, #id_container_locales, #reparto_data,
 *      #reparto_invalid, #reparto_faltan_datos.
 *
 * @see docs/19-rediseno-modal-direccion.md
 */

.pp-modal {
    /* Colores de marca, no los de la maqueta */
    --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;

    /*
     * Espaciado y tipografía: los valores salen del sitio, no de la maqueta.
     * El home usa rem (1rem, .9rem, .8rem, .75rem) con AvenirNextLTPro en
     * pesos 400 / 600 / 700. Fijar píxeles acá rompía esa escala.
     */
    --ppm-pad: 1.25rem;      /* respiro lateral del panel */
    --ppm-gap: .75rem;       /* separación entre bloques */
    --ppm-radio: .5rem;
    --ppm-radio-modal: .75rem;

    font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ppm-azul);
}

/* ═══════════════════════════════════════════════════════════════════
   Caja del modal: panel + mapa
   ═══════════════════════════════════════════════════════════════════ */

.pp-modal {
    display: grid;
    /* Móvil: el mapa arriba en franja, el panel debajo. */
    grid-template-rows: 224px minmax(0, 1fr);
    /* Sin esto la columna es "auto" y se ensancha hasta lo que mide la línea más larga de una tarjeta:
       con el horario de toda la semana (PROD, sin horario por local) el modal se pasaba de los 360 px. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'mapa'
        'panel';
    height: 92vh;
    max-height: 92vh;
    overflow: hidden;
    border-radius: var(--ppm-radio-modal);
    background: #fff;
}

@media (min-width: 768px) {
    .pp-modal {
        /* Escritorio: panel 40% · mapa 60%, como la maqueta. */
        grid-template-rows: minmax(0, 1fr);
        /* minmax(0,…) es obligatorio: sin eso las columnas respetan el
           ancho mínimo del contenido y el mapa se aplasta a nada. */
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-areas: 'panel mapa';
        /* 600 y no 560: con la tienda asignada (Reparto) el contenido mide 363 px y justo cabía en los 363 que dejaba el
           panel de 560; 40 px de holgura bastan para un aviso del local o un horario que baje de línea sin scroll. */
        height: 600px;
        max-height: 92vh;
        transition: max-width 0.3s ease, height 0.3s ease;
    }

    /* Expandido: la maqueta lo lleva a 1240 × 640. */
    .pp-modal.is-expandido {
        height: 660px;
        max-height: 92vh;
    }
}

.pp-modal__panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    min-height: 0; /* sin esto el hijo con scroll desborda la grilla */
    border-top: 1px solid var(--ppm-linea);
}

@media (min-width: 768px) {
    .pp-modal__panel {
        border-top: 0;
        border-right: 1px solid var(--ppm-linea);
    }
}

/*
 * 1.2rem = 19,2 px, el mismo tamaño que tiene en producción. A 1rem el
 * título quedaba chico para lo que es: la única pregunta de la pantalla.
 *
 * Va igual en los dos estados a propósito. Se midió que a este tamaño
 * sigue entrando en una línea incluso en el panel angosto (360 px) del
 * estado expandido, así que no hace falta achicarlo después — y un título
 * que cambia de tamaño al escribir la dirección se ve como un salto.
 */
.pp-modal__titulo {
    margin: 0;
    padding: var(--ppm-pad) var(--ppm-pad) 0;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
    color: var(--ppm-azul);
}

/*
 * #form_delivery envuelve todo el panel, así que TAMBIÉN tiene que ser
 * columna flexible. Sin esto el panel ve un solo hijo —el formulario— y el
 * pie con el botón Confirmar queda fuera de la vista, empujado por la lista
 * de locales.
 */
#pp_modal_direccion #form_delivery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.pp-modal__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--ppm-pad) var(--ppm-gap);
}

/* Barra de desplazamiento discreta, del color de la marca. */
.pp-modal__cuerpo { scrollbar-width: thin; scrollbar-color: #c9cdd6 transparent; }
.pp-modal__cuerpo::-webkit-scrollbar { width: 6px; }
.pp-modal__cuerpo::-webkit-scrollbar-thumb {
    background: #c9cdd6;
    border-radius: 999px;
}
.pp-modal__cuerpo::-webkit-scrollbar-track { background: transparent; }

.pp-modal__pie {
    flex: 0 0 auto;
    padding: var(--ppm-gap) var(--ppm-pad) var(--ppm-pad);
    border-top: 1px solid var(--ppm-linea);
    background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   Pestañas: Reparto / Retiro
   ═══════════════════════════════════════════════════════════════════ */

.pp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: var(--ppm-gap) var(--ppm-pad);
}

/*
 * Las pestañas se definen POR ID.
 *
 * delivery-modal-style.css trae `#retiro_btn, #reparto_btn { max-width:47%;
 * height:90px }` — un id contra mis clases, y el id siempre gana. Por eso acá
 * van dos ids: el del modal y el del botón.
 */
#pp_modal_direccion #reparto_btn,
#pp_modal_direccion #retiro_btn {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 3.5rem;
    margin: 0;
    padding: .6rem .75rem;
}

.pp-tabs .pp-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .pp-tabs .pp-tab:hover { border-color: var(--ppm-azul-borde); }
}

.pp-tabs .pp-tab.is-activa {
    border-color: var(--ppm-azul);
    background: var(--ppm-azul-suave);
}

.pp-tab__icono {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--ppm-azul-suave);
    color: var(--ppm-azul);
    font-size: 1.062rem;
}

.pp-tab.is-activa .pp-tab__icono {
    background: var(--ppm-azul);
    color: #fff;
}

.pp-tab__texto {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    color: var(--ppm-azul);
}

/*
 * TODA la caja es el botón. El JS de siempre escucha el clic en el <p> del texto (#reparto_map / #retiro_map), así que
 * apretar el ícono, el espacio vacío o el borde no hacía nada. Un ::after del propio <p> que cubre la caja entera
 * (borde incluido: -2px = el grosor del borde) hace que cualquier clic dentro de ella llegue a ese <p>, sin tocar el JS
 * ni el markup. .pp-tab ya es `position: relative`, que es lo que ancla el recubrimiento.
 */
.pp-tabs .pp-tab .pp-tab__texto::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--ppm-radio);
}

/* La marca de seleccionada, arriba a la derecha */
.pp-tab__check {
    position: absolute;
    top: -6px;
    right: -6px;
    display: none;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ppm-azul);
    color: #fff;
    font-size: 0.688rem;
}

.pp-tab.is-activa .pp-tab__check { display: grid; }

/* El radio real queda accesible pero fuera de la vista: el JS lo necesita. */
.pp-tabs input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.pp-tabs .pp-tab:focus-within {
    outline: 2px solid var(--ppm-azul);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Encabezados de sección
   ═══════════════════════════════════════════════════════════════════ */

.pp-modal__seccion {
    margin: var(--ppm-gap) 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ppm-azul);
}

/* ═══════════════════════════════════════════════════════════════════
   Campo de dirección
   ═══════════════════════════════════════════════════════════════════ */

.pp-modal .caja_direccion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .6rem .75rem;
    border: 1px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    background: #fff;
}

.pp-modal .caja_direccion .material-symbols-outlined {
    font-size: 1.125rem;
    color: var(--ppm-rojo);
    flex: none;
}

.pp-modal #pac-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-size: .85rem;
    font-weight: 400;
    color: var(--ppm-azul);
}

.pp-modal #pac-input::placeholder {
    font-weight: 400;
    color: var(--ppm-gris);
}

.pp-modal #pac-input:focus { outline: none; }

.pp-modal .caja_direccion:focus-within {
    border-color: var(--ppm-azul);
    box-shadow: 0 0 0 3px rgba(6, 3, 141, 0.08);
}

/*
 * Desplegable de direcciones de Google. Cuelga del <body> (fuera de .pp-modal), así que no hereda los colores de
 * marca ni las variables --ppm-*: van los valores. Su posición y ancho los fija modal-direccion.js con los del marco
 * del campo (clase .pp-pac). Acá, que se vea hecho del mismo material que el campo: mismo radio y borde, el pin (el mismo
 * ícono, en rojo) justo debajo del ícono del campo y el texto justo debajo del texto que se escribe.
 */
.pac-container.pp-pac {
    box-sizing: border-box;
    border: 1px solid #e3e5e8;
    border-radius: .5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 40, .12);
    font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pac-container.pp-pac .pac-item {
    padding: .55rem .75rem;
    border-top: 1px solid #f0f1f3;
    font-family: inherit;
    font-size: .8rem;
    line-height: 1.3;
    color: #777a80;
}
.pac-container.pp-pac .pac-item:first-child { border-top: 0; }
.pac-container.pp-pac .pac-item:hover,
.pac-container.pp-pac .pac-item-selected { background: #eef1ff; }
/* El pin de Google es un recorte gris de una imagen, 2 px más abajo que el texto y de otro estilo que el del campo. Se
   cambia por el MISMO ícono del campo (location_on, de la fuente Material Symbols que ya carga el modal) en el rojo de la
   marca: queda en la misma columna que el del campo (12 px de relleno + 18,4 de ícono + 8 de espacio, como el campo) y
   centrado con el texto de su fila. */
.pac-container.pp-pac .pac-icon {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 8px 0 0;
    background: none !important;
    vertical-align: middle;
}
/* Mismo tamaño (1.15rem) y mismo trazo (peso 500) que el ícono del campo: es literalmente el mismo pin. */
.pac-container.pp-pac .pac-icon::before {
    content: 'location_on';
    display: block;
    font-family: 'Material Symbols Outlined';
    font-size: 1.15rem;
    line-height: 1.15rem;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'GRAD' 0, 'opsz' 20, 'wght' 500;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    color: #eb1c25;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}
.pac-container.pp-pac .pac-item-query {
    font-size: .85rem;
    color: #06038d;
}

/* Depto / número */
.pp-complemento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.pp-modal #complemento,
.pp-modal #dispatchNote {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    background: #fff;
    box-shadow: none;
    font-size: .85rem;
    font-weight: 400;
    color: var(--ppm-azul);
}

/* ═══════════════════════════════════════════════════════════════════
   Tarjeta de local
   ═══════════════════════════════════════════════════════════════════ */

.pp-modal .direcciones_resultados {
    margin-bottom: .5rem;
}

.pp-local {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: .6rem .75rem;
    border: 2px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Sólo con mouse: en pantallas táctiles :hover queda «pegado» después del toque y el borde se quedaba azul. */
@media (hover: hover) and (pointer: fine) {
    .pp-local:hover { border-color: var(--ppm-azul-borde); }
}

.pp-local.is-elegido {
    border-color: var(--ppm-azul);
    box-shadow: 0 0 0 3px rgba(6, 3, 141, 0.18);
}

/*
 * La marca de local elegido.
 *
 * Es el mismo visto azul que llevan las pestañas: dos marcas distintas para
 * decir "esto está elegido" en la misma pantalla se leen como dos cosas
 * distintas. Antes era un círculo rojo, y el rojo acá compite con el borde
 * azul de la tarjeta seleccionada en vez de acompañarlo.
 *
 * Sólo aparece en Retiro. En Reparto hay una sola tarjeta y no es una
 * elección del usuario: es el local que le corresponde a su dirección.
 * Marcarla como "elegida" sugiere que hay otras entre las cuales optar.
 */
.pp-local__marca {
    position: absolute;
    top: -7px;
    right: -7px;
    display: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ppm-azul);
    color: #fff;
    font-size: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pp-modal.es-retiro .pp-local.is-elegido .pp-local__marca { display: grid; }

/* El radio real y la imagen quedan ocultos pero PRESENTES y hermanos:
   el JS hace siblings('.select-local') desde la imagen. */
.pp-modal .select-local,
.pp-modal .local-pizzapizza-img {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.pp-local__cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
}

.pp-local__nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ppm-azul);
}

.pp-local__nombre .material-symbols-outlined {
    font-size: 1rem;
    flex: none;
}

.pp-local__nombre span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-local__estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.pp-local__estado::before {
    content: '';
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}

.pp-local__estado.es-abierto {
    background: var(--ppm-verde-suave);
    color: var(--ppm-verde);
}

.pp-local__estado.es-cerrado {
    background: var(--ppm-rojo-suave);
    color: var(--ppm-rojo);
}

.pp-local__dir {
    margin: .15rem 0 0;
    padding-left: 1.4rem;
    font-size: .75rem;
    color: var(--ppm-gris);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-local__datos {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .35rem;
    padding-left: 1.4rem;
}

.pp-local__dato {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    font-size: .75rem;
}

.pp-local__dato .material-symbols-outlined { font-size: 0.812rem; flex: none; }

.pp-local__dato.es-tel { color: var(--ppm-rojo); font-weight: 600; flex: none; }
.pp-local__dato.es-tel a { color: inherit; text-decoration: none; }
.pp-local__dato.es-horario { color: var(--ppm-gris); }

.pp-local__dato span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un horario largo (la semana completa, cuando el local no tiene horario propio) baja a la línea siguiente
   en vez de cortarse con puntos suspensivos o ensanchar la tarjeta. El horario de hoy, corto, no cambia. */
.pp-local__datos { flex-wrap: wrap; row-gap: .15rem; }
.pp-local__dato.es-horario { flex: 1 1 auto; }
.pp-local__dato.es-horario > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; }

.pp-local__aviso {
    margin: .35rem 0 0;
    padding-left: 1.4rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ppm-rojo);
}

/* Acciones: sólo aparecen en la tarjeta elegida, como en la maqueta */
.pp-local__acciones {
    display: none;
    gap: .5rem;
    margin-top: .5rem;
    padding-left: 1.4rem;
}

.pp-local.is-elegido .pp-local__acciones { display: flex; }

.pp-modal .como-llegar-button,
.pp-modal .ver-mapa-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: .35rem .75rem;
    border: 0;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.pp-modal .como-llegar-button {
    background: var(--ppm-rojo);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.pp-modal .ver-mapa-button {
    background: var(--ppm-azul-suave);
    color: var(--ppm-azul);
}

.pp-modal .como-llegar-button:hover,
.pp-modal .ver-mapa-button:hover { opacity: 0.9; }

.pp-modal .como-llegar-button .material-symbols-outlined { font-size: 0.812rem; }

/*
 * «¿Cómo llegar?» (pestaña Retiro): de la misma familia que «Confirmar» y que los botones de /locales —fondo blanco,
 * borde azul fino, mayúsculas, radio de .3rem—, pero más sutil: más bajo, sin sombra y con el azul sólo en el borde y el
 * texto. Nada de rojo (en un botón se lee como error) ni de píldora. El CSS viejo (delivery-modal-style.css) lo pinta
 * rojo `#eb1b25`, con hover rojo oscuro `#b00009` y `color: #fff !important`: por eso el color va con !important y el
 * selector con el id del modal.
 *
 * Estados: con mouse (sólo en aparatos que lo tienen) el hover lo llena de azul suave y marca el borde azul; en pantallas
 * táctiles el navegador deja :hover «pegado» tras el toque, así que ahí :hover queda igual al estado normal. Al apretarlo
 * o enfocarlo con el teclado se llena de azul pleno.
 */
#pp_modal_direccion .como-llegar-button {
    min-height: 30px;
    padding: .3rem .65rem;
    border: 1px solid #b2c2e8;
    border-radius: .3rem;
    background: #fff;
    color: #000084 !important;
    box-shadow: none;
    font-size: .68rem;
    transition: background-color .2s, border-color .2s, color .2s;
}
#pp_modal_direccion .como-llegar-button .material-symbols-outlined {
    color: #000084;
    font-size: .95rem;
    font-variation-settings: 'FILL' 0;
    transition: color .2s;
}
#pp_modal_direccion .como-llegar-button:hover {
    border: 1px solid #b2c2e8;
    background: #fff;
    color: #000084 !important;
    opacity: 1;
}
#pp_modal_direccion .como-llegar-button:hover .material-symbols-outlined { color: #000084; }
@media (hover: hover) and (pointer: fine) {
    #pp_modal_direccion .como-llegar-button:hover {
        border-color: #000084;
        background: #eef1ff;
    }
}
#pp_modal_direccion .como-llegar-button:active,
#pp_modal_direccion .como-llegar-button:focus-visible {
    border-color: #000084;
    background: #000084;
    color: #fafafa !important;
}
#pp_modal_direccion .como-llegar-button:active .material-symbols-outlined,
#pp_modal_direccion .como-llegar-button:focus-visible .material-symbols-outlined { color: #fafafa; }
#pp_modal_direccion .como-llegar-button:focus-visible {
    outline: 3px solid rgba(6, 3, 141, .35);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Local asignado (pestaña Reparto)
   ═══════════════════════════════════════════════════════════════════ */

/*
 * ORDEN DE LECTURA — por qué acá hay `order` y no un DOM reordenado
 * ─────────────────────────────────────────────────────────────────
 * El orden que pidió Federico, y el del diseño de referencia, es:
 *
 *     dirección → depto y número → LOCAL ASIGNADO → tarjeta del local
 *
 * En el DOM el orden es otro: la lista de locales (#id_container_locales)
 * viene antes que #reparto_data, y no se puede mover. El JavaScript de
 * reparto recorre esos bloques por posición en varios puntos —
 * `parent_locales.children`, los `input[name="local"]` que se marcan por
 * índice— así que tocar el árbol es meterse con la lógica que decide qué
 * local atiende cada dirección. `order` de flexbox cambia sólo cómo se
 * pinta: el DOM queda intacto y el JS sigue encontrando todo donde estaba.
 */
.pp-modal .direccion-container {
    display: flex;
    flex-direction: column;
    /* El CSS viejo le pone `padding: 1.5rem 0` en escritorio (en ≤900 px ya lo ponía en 0): 48 px de aire arriba y abajo
       que empujaban «Local asignado» fuera de la vista y provocaban el scroll. */
    padding: 0;
}

.pp-modal .direccion-container > #reparto_invalid      { order: 1; }
.pp-modal .direccion-container > #reparto_faltan_datos { order: 2; }
.pp-modal .direccion-container > #reparto_data         { order: 3; }
.pp-modal .direccion-container > .pp-modal__seccion    { order: 4; }
.pp-modal .direccion-container > #id_container_locales { order: 5; }

/*
 * "Calle ingresada" repetía, en un campo deshabilitado, la misma dirección
 * que el usuario acaba de escribir dos renglones más arriba. El input sigue
 * en el DOM porque forsend_google_maps lo llena con $("[name='fullDir']") y
 * ese valor viaja con el pedido; lo que se saca es sólo el duplicado en
 * pantalla.
 */
.pp-modal .dir_inputs.item-1 { display: none; }

/*
 * El label "Dpto, block" también sobra a la vista: el propio select dice
 * "Depto". Se oculta a la vista pero no al lector de pantalla, que sí
 * necesita saber qué es ese campo.
 */
.pp-modal .dir_inputs.item-2 > .text-base {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pp-modal .title-mje-error {
    font-size: 0.75rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ppm-azul);
}

.pp-modal .title-mje-error {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--ppm-rojo);
}

.pp-modal #reparto_faltan_datos h3 {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ppm-azul);
}

.pp-modal #reparto_faltan_datos p {
    font-size: 0.688rem;
    color: var(--ppm-gris);
}

/* ═══════════════════════════════════════════════════════════════════
   Botón confirmar
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Copiado de .repeat-display (css/home-style.css:410), el botón "Repetir un
 * pedido" del carrito. Federico pidió que fueran el mismo botón, y tiene
 * razón: son la misma jerarquía en la misma pantalla.
 *
 * Blanco con texto azul y borde suave — NO un bloque sólido. Al pasar el
 * mouse se invierte, igual que el original.
 */
.pp-modal .btn_modal_continuar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin: 0 !important;
    padding: .7rem;
    background-color: #ffffff;
    color: #000084;
    border: 1px solid #b2c2e8;
    border-radius: .3rem;
    box-shadow: 1px 1px 6px rgb(0 2 138 / 20%);
    font-family: 'AvenirNextLTPro';
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: .5s all;
}

.pp-modal .btn_modal_continuar:hover:not(:disabled) {
    color: #fafafa;
    background-color: #000084;
    border: 1px solid #0000e9;
}

.pp-modal .btn_modal_continuar:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   Mapa
   ═══════════════════════════════════════════════════════════════════ */

.pp-modal__mapa {
    position: relative;
    grid-area: mapa;
    min-height: 0;
    background: var(--ppm-azul-suave);
}

.pp-modal #map {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.pp-mapa__etiqueta {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ppm-azul);
    pointer-events: none;
}

/*
 * Van en la esquina, a la misma distancia del borde de arriba que del de
 * la derecha.
 *
 * Estuvieron corridos 56 px hacia adentro para no pisarse con el botón de
 * pantalla completa de Google, pero ese control se apagó al limpiar el
 * mapa (`fullscreenControl: false` en forsend_google_maps), así que el
 * hueco quedó sin motivo: la X terminaba flotando sobre el mapa en vez de
 * anclada a la esquina, que es donde uno la busca para cerrar.
 *
 * Si alguna vez se vuelve a encender ese control, hay que volver a
 * correrlos.
 */
.pp-mapa__controles {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.pp-mapa__boton {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ppm-azul);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background 0.15s ease;
}

.pp-mapa__boton:hover { background: var(--ppm-azul-suave); }

/*
 * La X es la única acción destructiva de la pantalla —cierra el modal y
 * se pierde lo escrito—, así que se comporta distinto al resto: al pasar
 * el mouse se pinta entera de rojo con la equis en blanco. Un botón que
 * cambia así de fuerte al apuntarlo no se confunde con un control del
 * mapa.
 */
.pp-mapa__boton.es-cerrar {
    color: var(--ppm-rojo);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.pp-mapa__boton.es-cerrar:hover,
.pp-mapa__boton.es-cerrar:focus-visible {
    background: var(--ppm-rojo);
    color: #fff;
}

.pp-mapa__boton.es-cerrar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-mapa__boton, .pp-mapa__boton.es-cerrar { transition: none; }
}
.pp-mapa__boton .material-symbols-outlined { font-size: 1.125rem; }

/* El botón de expandir no tiene sentido en móvil: el mapa es una franja. */
@media (max-width: 767px) {
    .pp-mapa__boton.es-expandir { display: none; }
}

.pp-mapa__pie {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 26px; /* por encima de la atribución de Google */
    z-index: 2;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.625rem;
    color: var(--ppm-gris);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Locales que se ocultan a mano (venía del markup anterior)
   ═══════════════════════════════════════════════════════════════════ */

#local_number_17,
#local_number_19,
#local_number_0 { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .pp-modal,
    .pp-modal * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Encaje dentro del modal de Bootstrap
   El .modal-body traía padding y bordes que recortaban el diseño.
   ═══════════════════════════════════════════════════════════════════ */

#delivery_map.modal .modal-content {
    border: 0;
    border-radius: var(--ppm-radio-modal, 20px);
    overflow: hidden;
    background: transparent;
}

#delivery_map.modal .modal-body {
    overflow: hidden;
    border-radius: 20px;
}


/* ═══════════════════════════════════════════════════════════════════
   Neutralizar el diseño anterior
   ───────────────────────────────────────────────────────────────────
   delivery-modal-style.css sigue cargando —lo necesita el modal de la
   página de Locales, que no se rediseñó— así que sus reglas hay que
   desactivarlas acá, acotadas a este modal. Cada bloque dice qué apaga.
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Los selectores llevan `#delivery_map.modal` y no sólo `#delivery_map`.
 *
 * No es capricho: las reglas viejas tienen exactamente la misma
 * especificidad (un id + dos clases) y viven en una hoja que carga DESPUÉS
 * de ésta, así que a igualdad ganaban ellas. Sumar `.modal` al id agrega una
 * clase y la balanza se inclina para acá — sin recurrir a !important, que
 * dejaría el problema escondido para el próximo que toque esto.
 */

/* Fijaba el ancho en 600 px: por eso el mapa no cabía. */
#delivery_map.modal .modal-content.not-expanded { max-width: none; }

/* Traía 1rem 2rem de relleno, que recortaba el diseño de borde a borde. */
#delivery_map.modal .modal-body { padding: 0; }

/*
 * El diálogo, centrado en la pantalla — vertical y horizontalmente.
 *
 * La regla vieja (style.css:602) lo estiraba a 100dvw × 100dvh y lo
 * centraba con flex. Al quitarle esas medidas para que el modal pudiera
 * tener su propio tamaño se perdió también el centrado vertical, y el
 * modal quedaba pegado arriba.
 *
 * Es el mismo mecanismo que usa Bootstrap en `.modal-dialog-centered`:
 * altura mínima igual a la pantalla menos los márgenes, y el contenido
 * centrado dentro. Así queda al medio con el modal chico —cuando sólo pide
 * la dirección— y también con el grande.
 */
#delivery_map.modal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: calc(100% - 3.5rem);
    max-width: 900px;
    margin: 1.75rem auto;
}

#delivery_map.modal .modal-content {
    width: 100%;
}

@media (min-width: 768px) {
    #delivery_map.modal .modal-dialog:has(.pp-modal.is-expandido) { max-width: 1240px; }
}

/* Cajas vacías de 180 × 90 px que dibujaban los íconos viejos de moto y
   tienda. Los íconos ahora son de la fuente propia, así que estorban —
   pero NO se borran del markup: el JS les pone la clase .selected. */
#pp_modal_direccion .reparto-label,
#pp_modal_direccion .retiro-label {
    display: none !important;
}

/* La botonera vieja imponía su propia caja. */
#pp_modal_direccion .txt_botonera {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* La lista tenía scroll propio y un margen negativo; ahora el scroll lo
   maneja el panel completo. */
#pp_modal_direccion .container_locales {
    max-height: none;
    overflow: visible;
    margin-top: 0;
    width: 100%;
}

/* Aplastaba cada tarjeta a 90 px de alto. */
/*
 * La regla vieja es `.container_locales .form-check-label { display:flex;
 * justify-content:space-around; margin-bottom:1.5rem }`. Al ser flex, el
 * bloque de datos del local se dimensionaba por su CONTENIDO y se salía de
 * la tarjeta: medía 344 px dentro de una caja de 308.
 *
 * Se vuelve a bloque, que es como está pensada la tarjeta nueva.
 */
#pp_modal_direccion .container_locales .form-check-label {
    display: block;
    height: auto;
    margin-bottom: 0;
    padding: .6rem .75rem;
}

/* El bloque de datos ocupa la tarjeta y puede encogerse: sin min-width:0
   los textos largos vuelven a estirarla. */
#pp_modal_direccion .info-local {
    width: 100%;
    min-width: 0;
    padding: 0;
}

/* La tarjeta y su contenedor, al ancho completo del panel. */
#pp_modal_direccion .direcciones_resultados,
#pp_modal_direccion .container_locales .form-check {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Versión móvil de la regla vieja: max-width 49%, height 75px. */
@media (max-width: 767px) {
    #pp_modal_direccion #reparto_btn,
    #pp_modal_direccion #retiro_btn {
        max-width: none;
        height: auto;
    }
}

/* Bootstrap le mete relleno al form-check por el radio, que acá no se ve. */
#pp_modal_direccion .form-check {
    padding: 0;
    margin: 0;
    min-height: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   Aviso bajo el buscador
   Traía estilos en línea del markup anterior (margen de 2rem a la
   izquierda que descuadraba la columna). Ahora sigue la misma escala.
   ═══════════════════════════════════════════════════════════════════ */

#pp_modal_direccion #odd-message {
    margin: .35rem 0 0;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ppm-gris);
}

/* Complemento: mismo espacio que separa los demás bloques. */
#pp_modal_direccion .pp-complemento { margin-top: .5rem; gap: .5rem; }

/* Tipo de vivienda: tres botones en vez del desplegable (que en el celular abre el selector nativo del
   sistema, con otra cara en cada aparato). El <select id="complemento"> sigue en la página y es el que
   lee el código de siempre; los botones sólo le cambian el valor. */
#pp_modal_direccion .pp-complemento,
#delivery_map .text-base_reparto.pp-complemento { position: relative; display: grid; grid-template-columns: 1fr; }
#pp_modal_direccion .pp-complemento > * { min-width: 0; }
#pp_modal_direccion .pp-complemento #complemento {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none;
}
#pp_modal_direccion .pp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
#pp_modal_direccion .pp-seg__op {
    min-height: 42px;
    padding: .5rem .25rem;
    border: 1px solid var(--ppm-linea);
    border-radius: var(--ppm-radio);
    background: #fff;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ppm-azul);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
#pp_modal_direccion .pp-seg__op:hover { border-color: var(--ppm-azul-borde); background: #fff; color: var(--ppm-azul); }
#pp_modal_direccion .pp-seg__op.is-on { border-color: var(--ppm-azul); background: var(--ppm-azul-suave); box-shadow: inset 0 0 0 1px var(--ppm-azul); }
#pp_modal_direccion .pp-seg__op:focus-visible { outline: 2px solid var(--ppm-azul); outline-offset: 2px; }

/* Los bloques que el JS muestra y esconde no deben traer márgenes de
   Bootstrap: la separación la da el flujo del panel. */
#pp_modal_direccion .row { margin: 0; }
#pp_modal_direccion #reparto_data,
#pp_modal_direccion #reparto_invalid,
#pp_modal_direccion #reparto_faltan_datos { margin-top: var(--ppm-gap); }

/* Con `order`, #reparto_data queda pegado al rótulo que le sigue; el aire
   lo pone el propio .pp-modal__seccion. Sin margen arriba: la separación con el campo de la dirección ya la da el
   relleno de abajo del bloque fijo (.pp-modal__fijo, .5rem); un margen más sumaba 12 px de aire que sobraban. */
#pp_modal_direccion .direccion-container > #reparto_data { margin-top: 0; }
#pp_modal_direccion .direccion-container > .pp-modal__seccion { margin-top: 1rem; }

/*
 * Entre el rótulo LOCAL ASIGNADO y la tarjeta había 24 px: 8 del rótulo
 * más 16 de un `margin-top` viejo de .direcciones_resultados que no se
 * había neutralizado. Quedaba el título flotando lejos de lo que titula.
 *
 * Ahora la separación entre tarjetas la da el `gap` de la lista, que sólo
 * cuenta las visibles — en Reparto se muestra una sola y las otras 26
 * siguen en el DOM escondidas. Con márgenes, esas 26 igual sumaban.
 */
#pp_modal_direccion #id_container_locales {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#pp_modal_direccion #id_container_locales .direcciones_resultados { margin: 0; }

#pp_modal_direccion .dir_inputs + .dir_inputs { margin-top: .5rem; }
#pp_modal_direccion .text-reparto {
    display: block;
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ppm-azul);
}


/* ═══════════════════════════════════════════════════════════════════
   ÍCONOS — reglas ancladas al id del modal
   ───────────────────────────────────────────────────────────────────
   Dos reglas globales los estaban rompiendo:

     css/header-style.css:7   .material-symbols-outlined
                              { font-size: 1.5rem; margin-bottom: 4px }
     css/home-style.css:446   .outofstock * { color: #da3832 }

   La primera metía glifos de 24 px en insignias de 18 —por eso salían
   cortados y descentrados— y la segunda los pintaba de rojo, así que el
   ícono del botón "¿Cómo llegar?" quedaba rojo sobre rojo: invisible,
   pero ocupando su espacio. De ahí el texto corrido.

   Ambas son de una sola clase. Anteponer el id del modal alcanza para
   ganarles sin recurrir a !important.
   ═══════════════════════════════════════════════════════════════════ */

#pp_modal_direccion .material-symbols-outlined {
    color: inherit;              /* el ícono toma el color de su contexto */
    vertical-align: middle;
    margin: 0;
    line-height: 1;
    font-size: 1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Tamaños por contexto */
#pp_modal_direccion .pp-tab__icono .material-symbols-outlined,
#pp_modal_direccion .pp-tab__icono { font-size: 1.05rem; }
#pp_modal_direccion .caja_direccion > .material-symbols-outlined { font-size: 1.15rem; color: var(--ppm-rojo); }
#pp_modal_direccion .pp-local__nombre .material-symbols-outlined { font-size: 1rem; color: var(--ppm-rojo); }
#pp_modal_direccion .pp-local__dato .material-symbols-outlined { font-size: .85rem; }
#pp_modal_direccion .como-llegar-button .material-symbols-outlined { font-size: .85rem; }
#pp_modal_direccion .btn_modal_continuar .material-symbols-outlined { font-size: 1rem; }

/* ── Insignias: círculo con el glifo centrado ────────────────────── */
#pp_modal_direccion .pp-tab__check,
#pp_modal_direccion .pp-local__marca {
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    /* El glifo tiene que caber DENTRO del círculo, no al revés. */
    font-size: .7rem;
}

#pp_modal_direccion .pp-tab.is-activa .pp-tab__check { display: flex; }

/* La marca del local elegido sólo en Retiro — ver el bloque "La marca de
   local elegido" más arriba. Va acá también porque este selector pesa más
   (lleva id) y si no, aquel queda sin efecto. */
#pp_modal_direccion.es-retiro .pp-local.is-elegido .pp-local__marca { display: flex; }

#pp_modal_direccion .pp-tab__check {
    width: 1.15rem;
    height: 1.15rem;
    top: -.4rem;
    right: -.4rem;
}

#pp_modal_direccion .pp-local__marca {
    width: 1.3rem;
    height: 1.3rem;
    top: -.45rem;
    right: -.45rem;
    background: var(--ppm-azul);
    font-size: .8rem;
}

/* ── Botones del mapa: cuadrados de verdad ───────────────────────── */
#pp_modal_direccion .pp-mapa__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 0;
    padding: 0;
    line-height: 1;
    color: var(--ppm-azul);
}

/*
 * OJO CON LA ESPECIFICIDAD. Este selector lleva `id` y le gana al bloque
 * de arriba, así que el hover de la X tiene que estar acá también: si
 * sólo estuviera allá, el fondo se pondría rojo pero la equis seguiría
 * roja — invisible.
 */
#pp_modal_direccion .pp-mapa__boton.es-cerrar { color: var(--ppm-rojo); }

#pp_modal_direccion .pp-mapa__boton.es-cerrar:hover,
#pp_modal_direccion .pp-mapa__boton.es-cerrar:focus-visible {
    background: var(--ppm-rojo);
    color: #fff;
}
#pp_modal_direccion .pp-mapa__boton .material-symbols-outlined { font-size: 1.1rem; }

/* ── El aviso del mapa, discreto ─────────────────────────────────────
   Este texto YA venía en el modal anterior, debajo del mapa: aclara que
   los polígonos de reparto dibujados son aproximados. Al moverlo sobre
   el mapa quedó como una barra blanca de lado a lado, que es lo que
   llamó la atención. Ahora es una línea chica y contenida.
   ─────────────────────────────────────────────────────────────────── */

#pp_modal_direccion .pp-mapa__pie {
    left: .6rem;
    right: auto;
    bottom: 1.6rem;
    max-width: 60%;
    padding: .25rem .5rem;
    border-radius: .35rem;
    background: rgba(255, 255, 255, 0.88);
    font-size: .65rem;
    line-height: 1.3;
    color: var(--ppm-gris);
}


/* ═══════════════════════════════════════════════════════════════════
   ESTADO INICIAL — título y campo de dirección
   ───────────────────────────────────────────────────────────────────
   El flujo de siempre, el que ya funciona en producción: primero se pide
   la dirección; cuando hay una, aparecen el mapa y las dos opciones.

   En el markup anterior esto salía solo, porque las pestañas, el mapa y
   el botón Confirmar vivían DENTRO de `.direccion_02`, que arranca
   oculto. Al reordenar el modal en dos columnas el mapa tuvo que salir de
   ahí —necesita ser hermano del panel para que la grilla funcione—, así
   que esta clase reproduce el mismo comportamiento.

   Quien decide cuándo hay dirección sigue siendo el código de siempre:
   acá sólo se refleja.
   ═══════════════════════════════════════════════════════════════════ */

#pp_modal_direccion.es-inicio .pp-modal__mapa,
#pp_modal_direccion.es-inicio .pp-tabs,
#pp_modal_direccion.es-inicio .pp-modal__pie {
    display: none;
}

/* El campo de dirección es lo único que se pide en este momento, así que
   su rótulo sobra: el título del modal ya dice de qué se trata. */
#pp_modal_direccion.es-inicio .pp-modal__seccion {
    display: none;
}

/* Sin mapa ni lista, el modal se encoge a lo que ocupa la pregunta. */
#pp_modal_direccion.es-inicio {
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'panel';
    height: auto;
    max-height: none;
}

#pp_modal_direccion.es-inicio .pp-modal__panel {
    border: 0;
}

#pp_modal_direccion.es-inicio .pp-modal__cuerpo {
    overflow: visible;
    padding-bottom: var(--ppm-pad);
}

/*
 * ── El aire del primer momento ────────────────────────────────────
 *
 * Acá el modal es una pregunta y un campo, nada más, y estaban pegados:
 * el título no tenía relleno abajo, así que el campo arrancaba justo
 * donde terminaba el texto. Producción le da 16 px de separación y 25 de
 * aire arriba, y se lee mejor. Estas medidas son esas.
 *
 * El campo también crece: 13,6 px de texto es poco para lo único que se
 * está pidiendo, y 16 px además evita que iOS haga zoom al tocarlo.
 * Sólo en este estado — más adelante el panel es angosto y una dirección
 * larga entra mejor en cuerpo chico.
 */
#pp_modal_direccion.es-inicio .pp-modal__titulo {
    padding-top: 1.625rem;
    padding-bottom: 1rem;
}

#pp_modal_direccion.es-inicio .caja_direccion { padding: .625rem .75rem; }
#pp_modal_direccion.es-inicio #pac-input { font-size: 1rem; }

@media (min-width: 768px) {
    #delivery_map.modal .modal-dialog:has(.pp-modal.es-inicio) { max-width: 34rem; }
}

/* ═════════════════════════════════════════════
   Celular: Confirmar siempre visible y la dirección siempre a la vista
   (26-10-2026, a raíz del video de La Dehesa)
   ═════════════════════════════════════════════

   El problema, medido en un celular de 360 × 640:
     · la barra inferior (position: fixed, z-index 9999) tapaba el pie del
       modal: el botón Confirmar quedaba con 18 px escondidos detrás de ella;
     · el modal medía 92vh, y en el navegador del celular 1vh incluye la franja
       de la barra de direcciones, así que se salía de la pantalla visible;
     · con el mapa de 224 px, el título y las pestañas, la lista de tiendas
       quedaba en 158 px: una tarjeta y media;
     · la dirección salía de la pantalla al recorrer la lista.

   Lo que se hace:
     · el modal usa dvh (la altura visible de verdad);
     · con el modal abierto la barra inferior pasa DEBAJO del fondo oscuro, así
       que el modal se apoya en el borde de la pantalla y Confirmar no se tapa;
     · el pie respeta la zona segura del teléfono y lleva una sombra suave;
     · el mapa se achica en el celular y la lista gana ese espacio;
     · el rótulo y el campo de dirección quedan fijos arriba de la lista; */

.pp-modal__fijo {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 calc(-1 * var(--ppm-pad));
    padding: 0 var(--ppm-pad) .5rem;
    background: #fff;
}

/* Los rótulos pegados a lo que titulan: poco aire entre rótulo y campo, y
   más aire entre un grupo y el siguiente. */
.pp-modal__fijo .pp-modal__seccion { margin: .75rem 0 .3rem; }
#pp_modal_direccion .direccion-container > .pp-modal__seccion { margin: 1rem 0 .3rem; }

/* Un degradado corto bajo el bloque fijo: la lista pasa por debajo. */
.pp-modal__fijo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    background: linear-gradient(#fff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Qué tienda quedó elegida, a la vista junto al botón. */
.pp-modal__resumen {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--ppm-azul);
}
.pp-modal__resumen[hidden] { display: none; }

/* El pie siempre por encima de la lista y con la zona segura del teléfono. */
/* Confirmar: 1 rem arriba y 1 rem abajo, sin márgenes. Antes eran 12 px arriba, 20 abajo y 8 de margen (más 1 rem de
   `.direcciones_resultados { margin-top: 1rem }` en el CSS viejo de PROD, que el pie hereda por llevar esa clase).
   En un teléfono con barra de gestos el pie crece sólo lo que ésta ocupe. */
#pp_modal_direccion .pp-modal__pie {
    margin: 0;
    padding-top: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
.pp-modal__pie {
    position: relative;
    z-index: 4;
    box-shadow: 0 -6px 14px rgba(0, 0, 40, .07);
}

@media (max-width: 992px) {
    /* Con cualquier modal abierto, la barra inferior queda bajo el fondo oscuro
       (Bootstrap: fondo 1050, modal 1055). */
    body.modal-open .storefront-handheld-footer-bar { z-index: 1000; }
}

@media (max-width: 767px) {
    .pp-modal {
        height: 92vh;
        max-height: 92vh;
        /* El mapa es una franja de apoyo: la lista es lo importante. */
        grid-template-rows: clamp(110px, 24dvh, 240px) minmax(0, 1fr);
    }

    @supports (height: 1dvh) {
        .pp-modal {
            height: 94dvh;
            max-height: 94dvh;
        }
    }
}

/* Celulares de poca altura (640 px y menos): el mapa es sólo una cinta y el
   título ocupa menos, para que la lista de tiendas tenga espacio. */
@media (max-width: 767px) and (max-height: 700px) {
    .pp-modal { grid-template-rows: clamp(96px, 20dvh, 150px) minmax(0, 1fr); }
    .pp-modal__titulo { padding-top: .75rem; font-size: 1.05rem; }
    .pp-tabs { padding-top: .5rem; padding-bottom: .25rem; }
}

/* ═════════════════════════════════════════════
   Tienda fijada (Retiro): sólo la tarjeta elegida, mapa grande y «Cambiar tienda»
   (26-10-2026). Ver assets/js/modal-direccion.js, bloque «La tienda elegida queda fijada».
   ═════════════════════════════════════════════ */

/* Se recoge la lista: queda sólo la tarjeta elegida. */
#pp_modal_direccion.tienda-fijada #id_container_locales > .direcciones_resultados:not(.es-la-fijada) {
    display: none !important;
}

/* El resumen sobra: la propia tarjeta dice la tienda. */
#pp_modal_direccion.tienda-fijada .pp-modal__resumen { display: none; }

/* «Cambiar tienda»: botón secundario «tonal» (fondo azul suave, sin borde), de la misma
   familia que Confirmar —mayúsculas, mismo radio y mismo ancho— pero más liviano, para que
   el principal siga siendo Confirmar. */
.pp-modal__cambiar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 .5rem;
    padding: .6rem;
    border: 1px solid transparent;
    border-radius: .3rem;
    background: var(--ppm-azul-suave);
    font-family: 'AvenirNextLTPro', inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    color: var(--ppm-azul);
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.pp-modal__cambiar[hidden] { display: none; }
.pp-modal__cambiar:hover { border-color: #b2c2e8; }
.pp-modal__cambiar:active { background: #dfe5fb; }
.pp-modal__cambiar:focus-visible { outline: 2px solid var(--ppm-azul); outline-offset: 2px; }

@media (max-width: 767px) {
    /* Sin la lista, el mapa puede crecer y mostrar la tienda centrada. */
    #pp_modal_direccion.tienda-fijada {
        grid-template-rows: clamp(170px, 40dvh, 340px) minmax(0, 1fr);
    }
}

/* El mapa se ve también en el celular. El CSS heredado (delivery-modal-style.css)
   traía `#map { display: none }` para pantallas de hasta 900 px: el modal viejo no
   mostraba mapa en el celular, y por eso la franja de arriba salía vacía. */
#pp_modal_direccion .pp-modal__mapa #map { display: block !important; }

/* En Retiro no se pide dirección: es para elegir una tienda. La dirección ya
   ingresada sigue guardada (sirve para ordenar las tiendas por cercanía); para
   cambiarla se vuelve a «Reparto a domicilio». */
#pp_modal_direccion.es-retiro .pp-modal__fijo { display: none; }

.pp-modal__pista {
    display: block;
    margin-top: .15rem;
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ppm-gris);
}

/* El CSS viejo (delivery-modal-style.css) fija el bloque de la dirección en `height: 480px; min-height: 425px;
   margin-top: -31px`, de cuando traía el mapa adentro. Con el markup nuevo sólo abría un hueco y un scroll enorme en el
   panel, y escondía la tarjeta de «Local asignado». El alto lo da el contenido. (En ≤900 px el CSS viejo ya lo ponía en
   `auto`; esto lo deja igual en todas las pantallas.) */
#pp_modal_direccion .direccion_02 .container-data {
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
}
#pp_modal_direccion .row.direccion_02.visible { margin-bottom: 0; }

/* Globo con la dirección escrita (el InfoWindow de Google, sólo en computador: en el celular se esconde
   más abajo). De fábrica reserva una franja de 48 px arriba sólo para la X y el texto queda debajo con
   mucho aire. La X pasa a la esquina, a la altura del título, y el globo queda del alto de su texto. */
#pp_modal_direccion .pp-modal__mapa .gm-style-iw-c {
    padding: 0 !important;
    border-radius: var(--ppm-radio-modal);
    box-shadow: 0 6px 18px rgba(0, 0, 40, .22);
}
#pp_modal_direccion .pp-modal__mapa .gm-style-iw-chr {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    height: auto;
}
#pp_modal_direccion .pp-modal__mapa .gm-style-iw-chr .gm-ui-hover-effect {
    width: 28px !important;
    height: 28px !important;
}
#pp_modal_direccion .pp-modal__mapa .gm-style-iw-chr .gm-ui-hover-effect > span {
    width: 14px !important;
    height: 14px !important;
    margin: 7px !important;
}
#pp_modal_direccion .pp-modal__mapa .gm-style-iw-d {
    overflow: visible !important;
    max-height: none !important;
    padding: 10px 34px 10px 12px;
}
/* style_map.css lo esconde (`#infowindow-content { display: none }`) hasta que Google lo mete en el globo. */
#pp_modal_direccion .gm-style-iw-d #infowindow-content {
    display: grid;
    grid-template-columns: 16px auto;
    column-gap: .4rem;
    align-items: center;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--ppm-gris);
}
#pp_modal_direccion .gm-style-iw-d #infowindow-content br { display: none; }
#pp_modal_direccion .gm-style-iw-d #infowindow-content .title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ppm-azul);
}
#pp_modal_direccion .gm-style-iw-d #infowindow-content #place-address { grid-column: 2; }

@media (max-width: 767px) {
    /* El botón de ampliar no hace nada en el celular (el mapa ya ocupa todo el ancho);
       una regla con id lo volvía a mostrar. */
    #pp_modal_direccion .pp-mapa__boton.es-expandir { display: none; }

    /* La burbuja con la dirección escrita tapaba medio mapa de la franja. */
    #pp_modal_direccion .pp-modal__mapa .gm-style-iw-c,
    #pp_modal_direccion .pp-modal__mapa .gm-style-iw-t { display: none !important; }
}

/* «Ver mapa» sobra: el mapa del modal ya está arriba y muestra la tienda. En el celular
   lo mostraba una regla heredada (delivery-modal-style.css) con su diseño viejo: rojo,
   sin relleno lateral. Se esconde en todas las pantallas. */
#pp_modal_direccion .ver-mapa-button { display: none !important; }

/* En el celular «¿Cómo llegar?» también está escondido por la regla heredada: sin botones
   visibles, la fila de acciones sólo dejaba un hueco bajo la tarjeta. */
@media (max-width: 767px) {
    #pp_modal_direccion .pp-local__acciones { display: none !important; }
}

/* En «Tu tienda» el nombre va completo (en la lista se corta con puntos suspensivos). */
#pp_modal_direccion.tienda-fijada .pp-local__nombre,
#pp_modal_direccion.tienda-fijada .pp-local__nombre span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* El ícono de la pestaña activa va en blanco sobre el círculo azul: la regla
   `#pp_modal_direccion .material-symbols-outlined { color: inherit }` (más fuerte) lo
   dejaba azul sobre azul y el círculo se veía vacío. */
#pp_modal_direccion .pp-tab.is-activa .pp-tab__icono { color: #fff; }

/* Calle y número arriba; comuna y región debajo, más suaves. */
#pp_modal_direccion .pp-local__dir { display: flex; flex-direction: column; gap: .1rem; }
#pp_modal_direccion .pp-local__zona { font-size: .72rem; color: var(--ppm-gris); }

/* Qué falta para poder confirmar: una línea sobre el botón mientras está desactivado. */
.pp-modal__ayuda {
    margin: 0 0 .5rem;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    color: var(--ppm-gris);
}
.pp-modal__ayuda[hidden] { display: none; }

/* La marca de «seleccionado» va en verde (el mismo verde de «Abierto»), en la pestaña
   activa y en la tarjeta de la tienda elegida. */
#pp_modal_direccion .pp-tab__check,
#pp_modal_direccion .pp-local__marca { background: var(--ppm-verde); }


/* Zoom del mapa del modal: botones + y − en computador; en pantallas táctiles se esconden y se usa el pellizco. */
@media (pointer: coarse) {
    #pp_modal_direccion #map .gm-bundled-control { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Ajustes de celular y lista de tiendas (29-10, tarde)
   ═══════════════════════════════════════════════════════════════════ */

/* «Selecciona una tienda» y su subtítulo («Las más cercanas…», que el JS agrega dentro de este mismo <p>) quedan
   fijos arriba mientras se recorre la lista: sólo se mueven las tarjetas. El relleno de arriba y el fondo blanco
   tapan lo que pasa por debajo. */
#pp_modal_direccion .direccion-container > .pp-solo-retiro {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 .3rem;
    padding: 1rem 0 .4rem;
    background: #fff;
}

@media (max-width: 767px) {
    /* Sin la franja blanca de 28 px arriba y abajo del modal (el margen de Bootstrap): el mapa pega arriba y la
       pantalla que sólo pide la dirección queda centrada igual. */
    #delivery_map.modal .modal-dialog {
        margin: 0 auto;
        min-height: 100%;
    }

    /* Con pestañas y lista, el modal ocupa toda la pantalla: Confirmar queda abajo y la lista gana ese alto. */
    #pp_modal_direccion.pp-modal:not(.es-inicio) {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    @supports (height: 1dvh) {
        #pp_modal_direccion.pp-modal:not(.es-inicio) {
            height: 100dvh;
            max-height: 100dvh;
        }
    }

    /* Tipo de vivienda y número en UNA fila: un tercio para el desplegable (en el celular abre el selector nativo)
       y el resto para el número, así el número se ve siempre y el local asignado gana espacio. Los tres botones
       quedan para pantallas grandes. */
    #pp_modal_direccion .pp-seg { display: none; }
    #pp_modal_direccion .pp-complemento,
    #delivery_map .text-base_reparto.pp-complemento { grid-template-columns: minmax(6.5rem, 1fr) 2fr; }
    #pp_modal_direccion .pp-complemento #complemento {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: .6rem .5rem;
        border: 1px solid var(--ppm-linea);
        overflow: visible;
        clip: auto;
        opacity: 1;
        pointer-events: auto;
        font-size: .85rem;
        font-weight: 600;
    }
}