/**
 * 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);
    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';
        height: 560px;
        max-height: 90vh;
        transition: max-width 0.3s ease, height 0.3s ease;
    }

    /* Expandido: la maqueta lo lleva a 1240 × 640. */
    .pp-modal.is-expandido {
        height: 640px;
        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);
    }
}

.pp-modal__titulo {
    margin: 0;
    padding: var(--ppm-pad) var(--ppm-pad) 0;
    font-size: 1rem;
    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;
}

.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);
}

/* 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);
}

/* 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;
}

.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;
}

.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; }

/* ═══════════════════════════════════════════════════════════════════
   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;
}

.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;
}

/*
 * Google pone sus propios controles en las esquinas: tipo de mapa arriba a
 * la izquierda, pantalla completa arriba a la derecha, zoom y street view
 * abajo a la derecha. Los nuestros se corren hacia adentro para no pisarse
 * con el de pantalla completa.
 */
.pp-mapa__controles {
    position: absolute;
    top: 10px;
    right: 56px;
    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); }
.pp-mapa__boton.es-cerrar { color: var(--ppm-rojo); }
.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; }

/* 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. */
#pp_modal_direccion .direccion-container > #reparto_data { margin-top: .75rem; }
#pp_modal_direccion .direccion-container > .pp-modal__seccion { margin-top: 1rem; }

#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; }
#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);
}

#pp_modal_direccion .pp-mapa__boton.es-cerrar { color: var(--ppm-rojo); }
#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);
}

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