/**
 * Puntos de Atención, Sucursales y Red Asistencial ARL (PUNT_HU0001)
 *
 * Toma el MISMO lenguaje visual que el Directorio Médico
 * (assets/css/red-positiva-salud.css): tipografías Poppins/Roboto, acento
 * naranja #FF7500 sobre azul petróleo #173748, contenedores redondeados de
 * 16px y el layout 55/45 de mapa + resultados. Las clases van con prefijo
 * `pa-` para que ambos componentes convivan en la misma página sin pisarse.
 *
 * El ajuste pixel-perfect final contra el Figma de Transparencia y Atención
 * es trabajo manual posterior (T8); esto deja el punto de partida alineado
 * con el componente que ya está en producción.
 */

/* Utilidad de visibilidad, equivalente a .rps-hidden. */
.pa-hidden {
    display: none !important;
}

.pa-componente {
    width: 100%;
}

/* Separación entre el bloque de filtros y el de resultados. */
.pa-contenido {
    display: flex;
    flex-direction: column;
    gap: 62px;
}

.pa-loading,
.pa-error {
    padding: 24px 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #173748;
}

/* ── Contenedor de filtros ────────────────────────────────────────────────
   Sin fondo, sombra ni radio: aquí los filtros no van dentro de una "tarjeta"
   como en el Directorio Médico. La única separación es el gap de .pa-contenido. */
.pa-containers {
    display: flex;
    flex-direction: column;
}

/* Fila de comboboxes (misma disposición que .rps-filtros-campos). */
.pa-filtros-campos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}

/* Equivalente a .rps-campo: contenedor de label + combobox. */
.pa-filtro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

/* Mismos valores que `.rps-campo label` del Directorio Médico. */
.pa-filtro .pa-filtro-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    margin-left: 13px;
    color: #5D6977;
}

/* ── Combobox de escritura predictiva (idéntico a .rps-combobox) ─────────── */
.pa-combobox {
    position: relative;
}

/* Selector de DOS clases a propósito, igual que `.rps-combobox
   .rps-combobox-input`: con una sola clase, los estilos de input del tema
   (Hello Elementor) y de Elementor ganan por especificidad y sobrescriben el
   borde y el radio. Esta es la razón por la que los campos no se veían
   iguales a los del Directorio Médico. */
.pa-combobox .pa-combobox-input {
    width: 100%;
    padding: 8px 15px 8px 15px;
    font-size: 16px;
    line-height: 24px;
    border: 1px solid #D9DCE3;
    border-radius: 7px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    color: rgba(49, 49, 49, 0.6);
}

.pa-combobox .pa-combobox-input:read-only {
    cursor: pointer;
}

.pa-combobox .pa-combobox-input:not(:read-only) {
    cursor: text;
}

.pa-combobox-list {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 0.5px solid #EDEDED;
    border-radius: 0 0 12px 12px;
    box-shadow: 3px 3px 10px 0px rgba(23, 55, 72, 0.3);
    list-style: none;
}

.pa-combobox-list li {
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
}

.pa-combobox-list li:hover,
.pa-combobox-list li.pa-combobox-opcion-resaltada {
    background: #e8f1fb;
}

.pa-combobox-vacio {
    color: #888;
    cursor: default !important;
}

.pa-combobox-vacio:hover {
    background: transparent !important;
}

/* ── Layout de resultados: mapa 55% + tarjetas 45% ────────────────────────
   El flex-basis usa calc() para descontar la parte proporcional del gap: con
   55%+45% a secas la suma YA es el 100% del contenedor y el gap se pide
   aparte, así que flex-wrap manda la segunda columna a la línea de abajo. */
.pa-resultados-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pa-mapa {
    flex: 1 1 calc(55% - 8px);
    min-width: 0;
}

/* Leaflet exige altura explícita en px sobre su contenedor (no "auto"). */
.pa-mapa-contenedor {
    width: 100%;
    height: 831px;
    border-radius: 8px;
    overflow: hidden;
}

.pa-resultados-columna {
    flex: 1 1 calc(45% - 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* La columna se limita al alto del mapa: el contador queda fijo arriba y
       solo la lista de tarjetas hace scroll (ver .pa-cards). */
    max-height: 831px;
}

.pa-contador {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #173748;
}

/* Aviso de tope de resultados: secundario frente al contador, no es un error. */
.pa-aviso-limite {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #5b6b75;
}

/* Sin mapa (vista con 'mapa' => false), las tarjetas ocupan todo el ancho. */
.pa-resultados-columna:only-child {
    flex-basis: 100%;
    max-height: none;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────
   Solo la lista scrollea; min-height:0 es imprescindible para que un hijo
   flex pueda encogerse por debajo de su contenido y active el overflow. */
.pa-cards {
    display: flex;
    flex-direction: column;
    gap: 23px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 8px 0;
}

.pa-card {
    background: #F7F7F7;
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease all;
}

/* Etiqueta superior fija (naranja), equivalente a .rps-card-tipo. El texto
   sale de `tipoLabel` en el registro de vistas del PHP. */
.pa-card-tipo {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    color: #FF7500;
}

.pa-card-titulo {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #173748;
}

/* Bloque de RESUMEN: identificación de la sede (tipo + nombre + sus campos).
   Lleva un padding lateral propio, igual que .rps-card-resumen. */
.pa-card-resumen {
    padding: 0 16px;
}

/* Bloque de DATOS: el detalle. Comparte la grilla de 2 columnas y solo añade
   lo suyo (hoy, el color gris de sus labels). */
.pa-card-datos {
    position: relative;
}

/* Grilla de 2 columnas para los campos. align-items:start evita que un campo
   se estire a la altura de su vecino cuando este ocupa más líneas. */
.pa-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    align-items: start;
    margin-top: 8px;
}

.pa-card-campo {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0; /* evita que un valor largo desborde la celda */
}

/* Mismos valores que la regla base `.rps-card-campo-label` del Directorio
   Médico: label naranja arriba, valor debajo. */
.pa-card-campo-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    color: #FF7500;
}

/* Campos de detalle en gris, igual que `.rps-card-datos .rps-card-campo-label`
   del Directorio Médico. El naranja queda reservado para los campos de
   identificación (Departamento, Ciudad, Dirección), que es lo que jerarquiza
   la tarjeta. Los ÍCONOS siguen en naranja a propósito: en el Directorio
   también conservan el acento dentro del bloque gris. */
/* Los campos del bloque de DETALLE van en gris, igual que
   `.rps-card-datos .rps-card-campo-label`. El color se deriva del grupo al que
   pertenece el campo (config: 'grupo'), no de una lista de nombres: así, mover
   un campo entre resumen y datos cambia su color solo, y Horario puede ser
   naranja en Puntos y gris en ARL sin ninguna regla por vista. */
.pa-card-datos .pa-card-campo-label {
    color: #747474;
}

/* Valor por defecto: 14px / 400, como `.rps-card-datos .rps-card-campo-valor`
   del Directorio Médico. */
.pa-card-campo-valor {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #173748;
    word-break: break-word;
}

/* Excepciones: Departamento y Ciudad van destacados (16px / 700), igual que
   los campos del bloque de resumen del Directorio. El Nombre no aparece aquí
   porque es el <h3> .pa-card-titulo, que ya lleva ese tamaño y peso. */
.pa-card-campo--departamento > .pa-card-campo-valor,
.pa-card-campo--ciudad > .pa-card-campo-valor {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}

/* ── Ancho dentro de la grilla de 2 columnas (config: 'ancho') ───────────── */
.pa-card-campo--full {
    grid-column: 1 / -1;
}

.pa-card-campo--half {
    grid-column: span 1;
}

/* ── Campos con ícono (config: 'icono') ──────────────────────────────────────
   Mismo mecanismo que el Directorio Médico: el ícono va a la IZQUIERDA de todo
   el bloque (label + valor), en el contenedor y no dentro del label. Grid de
   2 columnas: col 1 = ícono, col 2 = label (fila 1) y valor (fila 2).
   El SVG se usa como MÁSCARA, así que el color lo da background-color y no el
   fill del archivo. */
.pa-card-campo[class*="pa-card-campo--icono-"] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 5px;
    row-gap: 0;
    align-items: start;
    margin-top: 16px;
}

.pa-card-campo[class*="pa-card-campo--icono-"] > .pa-card-campo-label,
.pa-card-campo[class*="pa-card-campo--icono-"] > .pa-card-campo-valor {
    grid-column: 2;
}


/* OJO — se usan las propiedades LARGAS de máscara, nunca el atajo `mask`.
   El atajo resetea `mask-image` a `none`, y como este selector lleva un
   selector de atributo tiene MÁS especificidad que las reglas de abajo, que
   son las que asignan el SVG: el reset ganaba y el ícono desaparecía, dejando
   solo el cuadro naranja del background-color. Con las longhand no se pisa
   nada y cada ícono puede definirse con una sola clase. */
.pa-card-campo[class*="pa-card-campo--icono-"]::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 1;
    align-self: center;
    width: 20px;
    height: 20px;
    background-color: #FF7500;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* Rutas relativas a este .css (assets/css/) */
.pa-card-campo--icono-categoria::before {
    -webkit-mask-image: url("../img/card-icons/categoria.svg");
    mask-image: url("../img/card-icons/categoria.svg");
}

.pa-card-campo--icono-telefono::before {
    -webkit-mask-image: url("../img/card-icons/telefono.svg");
    mask-image: url("../img/card-icons/telefono.svg");
}

.pa-card-campo--icono-urgencias::before {
    -webkit-mask-image: url("../img/card-icons/urgencias.svg");
    mask-image: url("../img/card-icons/urgencias.svg");
}

.pa-card-campo--icono-direccion::before {
    -webkit-mask-image: url("../img/card-icons/direccion.svg");
    mask-image: url("../img/card-icons/direccion.svg");
}

.pa-card-telefono {
    color: #173748;
    text-decoration: underline;
}

/* ── Interacción Card ↔ mapa (RN-10) ─────────────────────────────────────── */
.pa-card-clicable {
    cursor: pointer;
}

.pa-card-clicable:hover,
.pa-card-clicable:focus-visible {
    box-shadow: 3px 3px 10px 0px rgba(23, 55, 72, 0.3);
    background: #FFFFFF;
    outline: none;
}

/* Card seleccionada: su pin está centrado y con el popup abierto en el mapa. */
.pa-card.is-activa {
    box-shadow: 3px 3px 10px 0px rgba(23, 55, 72, 0.3);
    background: #FFFFFF;
}

/* El teléfono sigue siendo pulsable dentro de una card clicable. */
.pa-card-clicable .pa-card-telefono {
    position: relative;
    z-index: 1;
}

/* ── Popup del mapa: reutiliza la Card, sin su marco propio ───────────────── */
/* El relleno va en el nodo de CONTENIDO, no en el wrapper. Es deliberado:
   Leaflet dimensiona el contenido, no el wrapper, así que con el padding aquí
   el ancho declarado es el de la caja visible y no hay que restarle nada. */
.pa-mapa .leaflet-popup-content-wrapper {
    border-radius: 4px;
    box-shadow: 3px 3px 10px 0px rgba(23, 55, 72, 0.3);
    padding: 0;
}

.pa-mapa .leaflet-popup-content p {
    margin: 0;
}

/* Ancho FIJO, no un tope: la caja debe medir siempre lo que dice Figma, se
   llene o no. `!important` es imprescindible porque Leaflet escribe un width
   en línea calculado a partir del contenido (_updateLayout), y sin esto el
   popup se encogería con los registros cortos. El valor llega heredado desde
   la raíz del componente, publicado por el JS a partir de popup.maxWidth. */
.pa-mapa-popup .leaflet-popup-content {
    margin: 0;
    box-sizing: border-box;
    padding: 8px 16px;
    width: var(--pa-popup-ancho, 320px) !important;
}

.pa-mapa-popup .pa-card {
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
}

/* Variante compacta: los tres bloques (título, datos y enlace a Maps) apilados
   con 8px entre ellos. El gap del contenedor sustituye a cualquier margen
   propio de los bloques, que se anulan más abajo. */
.pa-card.pa-card-mapa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
}

/* Dentro del popup el bloque de resumen no lleva el padding lateral: el
   popup de Leaflet ya aporta el suyo. */
.pa-mapa-popup .pa-card-resumen {
    padding: 0;
}

.pa-mapa-popup .pa-card-titulo {
    font-size: 14px;
    line-height: 22px;
}

/* Valor suelto bajo el nombre (Horario en Puntos, Categoría en ARL): sin
   etiqueta ni ícono, pegado al título — por eso queda dentro del resumen y no
   recibe el gap de 8px del contenedor. */
.pa-card-subvalor {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #173748;
}

/* En el popup cada dato va EN LÍNEA (ícono · etiqueta · valor) en vez de
   apilado, que es lo que lo compacta. Las tres columnas las define el
   CONTENEDOR y cada fila se disuelve en él con `display: contents`: así todas
   las filas comparten el mismo ancho de etiqueta y los valores quedan
   alineados aunque las etiquetas midan distinto ("Dirección" vs
   "Observaciones"). Una rejilla por fila no serviría —cada una calcularía su
   propio ancho— y con flex tampoco hay forma de compartir la medida.

   `margin: 0`: el espaciado entre bloques lo da el gap de .pa-card-mapa, no
   los márgenes de cada uno. */
.pa-mapa-popup .pa-card-grid {
    display: grid;
    grid-template-columns: 10px max-content 1fr;
    column-gap: 5px;
    row-gap: 4px;
    align-items: center;
    margin: 0;
}

.pa-mapa .pa-card-campo {
    display: contents;
}

/* Toda fila del popup reserva la casilla del ícono, tenga o no uno. Sin esto
   las filas sin ícono (Dirección complementaria en ARL) correrían su etiqueta
   a la primera columna y romperían justo la alineación que busca la rejilla.
   Las que sí lo tienen reciben su máscara y color de las reglas base. */
.pa-card-mapa .pa-card-campo::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
}

/* Las reglas base de los campos con ícono fijan posiciones EXPLÍCITAS (ícono
   en columna 1 / fila 1; etiqueta y valor en columna 2), pensadas para la
   rejilla de dos columnas que arma cada fila del listado. Aquí la rejilla es
   otra —una sola, compartida por todas las filas—, así que hay que devolverlos
   a colocación automática: si no, `grid-row: 1 / 1` amontonaría TODOS los
   íconos en la primera fila y etiqueta y valor se pisarían en la columna 2. */
.pa-card-mapa .pa-card-campo::before,
.pa-card-mapa .pa-card-campo > .pa-card-campo-label,
.pa-card-mapa .pa-card-campo > .pa-card-campo-valor {
    grid-column: auto;
    grid-row: auto;
}

.pa-card-mapa .pa-card-campo-label {
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
    color: #747474;
}

.pa-card-mapa .pa-card-campo-valor {
    font-size: 12px;
    line-height: 20px;
}

/* Alineación vertical del ícono con la primera línea del valor: la fila puede
   ocupar dos líneas si el valor es largo (una dirección), y centrar el ícono
   contra toda la fila lo dejaría flotando a media altura. */
.pa-card-mapa .pa-card-campo::before {
    align-self: start;
    margin-top: 5px;
}

.pa-card-mapa .pa-card-campo-label {
    align-self: start;
    margin-top: 4px;
}

.pa-mapa .pa-card-telefono {
    color: #FF7500;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-decoration: underline;
}

/* Enlace "Ver en Google Maps". Sin margen propio: la separación de 8px con el
   bloque anterior la da el gap de .pa-card-mapa. */
.pa-card-maps {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #0a5cab;
    text-decoration: underline;
}

.pa-card-maps:hover {
    color: #FF7500;
}

.pa-card-mapa a.pa-card-maps {
    color: #FF7500;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES POR VISTA

   Todo lo anterior es común a las tres vistas. Aquí abajo va SOLO lo que se
   desvía de ese patrón, agrupado por vista y acotado con el atributo
   `data-pa-vista` que el template escribe en el contenedor raíz.

   La intención es que esta sección se mantenga corta: si una regla vale para
   todas las vistas, va arriba; si aquí crece mucho un bloque, es señal de que
   esa vista pide su propio componente (ver la nota de extensibilidad en
   includes/class-puntos-atencion.php).

   OJO: el ancho del popup del mapa NO se declara aquí. Lo trae cada vista en
   `popup.maxWidth` (PHP) y el JS lo publica como --pa-popup-ancho. Repetirlo
   por vista en el CSS sería el mismo número en dos archivos, con la garantía
   de que tarde o temprano uno de los dos se queda viejo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Puntos de Atención ─────────────────────────────────────────────────── */

/* Divisor entre Sábado y Observaciones cuando van lado a lado.
   Se usa el selector de hermano ADYACENTE a propósito: la fila de Sábado solo
   existe en el DOM cuando el registro trae un valor útil (crearFilaCard omite
   los vacíos, RN-02), así que el borde aparece exactamente cuando hay algo a
   la izquierda de lo que separarse. Sin esto, los 31 de 34 puntos que no
   atienden sábado mostrarían una línea suelta. */
[data-pa-vista="puntos"] .pa-card-campo--sabado + .pa-card-campo--observaciones {
    padding-left: 16px;
    border-left: 1px solid #D9DCE3;
}

/* ── Sucursales Positiva ────────────────────────────────────────────────── */

/* Sin ajustes propios: se comporta como el patrón común. */

/* ── Red Asistencial ARL ────────────────────────────────────────────────── */

/* Sus campos con ícono forman una grilla compacta (Categoría, Teléfono,
   Servicio, Horario), así que el margen superior que sí necesitan en Puntos
   de Atención —donde Sábado y Observaciones cierran la tarjeta— aquí sobra. */
[data-pa-vista="arl"] .pa-card-campo[class*="pa-card-campo--icono-"] {
    margin-top: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pa-containers {
        gap: 24px;
        padding: 16px;
        border-radius: 16px;
    }

    /* Los comboboxes se apilan en vez de comprimirse. */
    .pa-filtros-campos {
        flex-direction: column;
        gap: 16px;
    }

    /* El layout 55/45 se apila: mapa arriba, tarjetas abajo, ambos al 100%. */
    .pa-mapa,
    .pa-resultados-columna {
        flex-basis: 100%;
    }

    .pa-mapa-contenedor {
        height: 380px;
    }

    /* En móvil la columna no se limita en alto ni scrollea por dentro: la
       página entera es la que se desplaza. */
    .pa-resultados-columna {
        max-height: none;
    }

    .pa-cards {
        overflow: visible;
    }

    /* Espacio horizontal escaso: los campos vuelven a una sola columna. */
    .pa-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}