/**
 * com_placemap — Hoja de estilos principal
 * Versión: v0.17
 * Ruta FTP: media/com_placemap/css/placemap.css
 *
 * PERSONALIZACIÓN:
 * Modifica las variables en :root para cambiar colores, tamaños y tipografía
 * sin tocar el resto del archivo. Los cambios se aplican globalmente.
 */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES GLOBALES
   Cambia estos valores para personalizar el componente
═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Colores principales ── */
    --pm-color-primary:       #e67e22;   /* Naranja — botones, acentos, bordes activos  */
    --pm-color-primary-dark:  #cf6d17;   /* Naranja oscuro — hover                      */
    --pm-color-primary-light: rgba(230, 126, 34, 0.08); /* Naranja transparente — fondos */

    /* ── Colores de texto ── */
    --pm-color-text-dark:     #1e293b;   /* Títulos                                      */
    --pm-color-text-mid:      #475569;   /* Cuerpo de texto                              */
    --pm-color-text-light:    #94a3b8;   /* Secundario, hints                            */
    --pm-color-text-comment:  #92400e;   /* Comentarios de pin                           */

    /* ── Colores de superficie ── */
    --pm-color-bg:            #ffffff;   /* Fondo de sheets, popups, listas              */
    --pm-color-bg2: background: rgba(255, 255, 255, 0.6);
    --pm-color-bg-soft:       #f8fafc;   /* Hover en listas                              */
    --pm-color-bg-muted:      #f1f5f9;   /* Fondos secundarios, badges                  */
    --pm-color-border:        #e2e8f0;   /* Bordes generales                             */
    --pm-color-border-light:  #f1f5f9;   /* Separadores sutiles                          */

    /* ── Colores modo noche ── */
    --pm-color-night-bg:      #1e293b;   /* Fondo badge noche                            */
    --pm-color-night-text:    #94a3b8;   /* Texto badge noche                            */

    /* ── Colores semánticos ── */
    --pm-color-success:       #166534;   /* Distancia, geolocalización                   */
    --pm-color-success-bg:    #dcfce7;   /* Fondo distancia                              */
    --pm-color-info:          #1d4ed8;   /* Categorías, badges informativos              */
    --pm-color-info-bg:       #eff6ff;   /* Fondo categorías                             */
    --pm-color-star:          #f1c40f;   /* Estrellas de valoración                      */

    /* ── Overlay oscuro (sheet "Saber más", offcanvas) ── */
    --pm-overlay-bg:          rgba(15, 23, 42, 0.45);
    --pm-overlay-blur:        2px;

    /* ── Tipografía ── */
    --pm-font-family:         system-ui, -apple-system, sans-serif;
    --pm-font-size-xs:        10px;
    --pm-font-size-sm:        11px;
    --pm-font-size-base:      12px;
    --pm-font-size-md:        13px;
    --pm-font-size-lg:        14px;
    --pm-font-size-xl:        15px;
    --pm-font-size-title:     18px;

    /* ── Radio de borde ── */
    --pm-radius-sm:           6px;
    --pm-radius-md:           8px;
    --pm-radius-lg:           12px;
    --pm-radius-xl:           16px;
    --pm-radius-2xl:          20px;
    --pm-radius-pill:         30px;
    --pm-radius-circle:       50%;

    /* ── Sombras ── */
    --pm-shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.08);
    --pm-shadow-md:           0 4px 14px rgba(0, 0, 0, 0.18);
    --pm-shadow-lg:           0 4px 20px rgba(0, 0, 0, 0.12);
    --pm-shadow-xl:           0 8px 40px rgba(0, 0, 0, 0.25);
    --pm-shadow-menu:         0 3px 10px rgba(0, 0, 0, 0.12);

    /* ── Dimensiones del pin en el mapa ── */
    --pm-pin-size:            38px;
    --pm-pin-font:            18px;
    --pm-pin-border:          3px solid #fff;

    /* ── Popup ── */
    --pm-popup-width:         100%;
    --pm-popup-img-height:    110px;
    --pm-popup-nophoto-h:     70px;

    /* ── Offcanvas (lista lateral) ── */
    --pm-oc-width:            320px;

    /* ── Sheet inferior (artículo) ── */
    --pm-sheet-handle-h:      60px;
    --pm-sheet-max-h:         90vh;
    --pm-sheet-radius:        20px 20px 0 0;

    /* ── Carrusel de pines ── */
    --pm-card-width:          140px;
    --pm-card-img-h:          90px;
    --pm-card-radius:         12px;

    /* ── Animaciones ── */
    --pm-transition-fast:     0.2s ease;
    --pm-transition-base:     0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --pm-transition-sheet:    0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index ── */
    --pm-z-map:               1;
    --pm-z-controls:          800;
    --pm-z-sheet:             10;
    --pm-z-overlay:           10000;
    --pm-z-offcanvas:         10001;
    --pm-z-sheet-article:     10002;
    --pm-z-radar:             10003;
    --pm-z-debug:             99999;
}

/* ═══════════════════════════════════════════════════════════════
   Reescribe Leaflet
═══════════════════════════════════════════════════════════════ */

.leaflet-popup-content {
    margin: 13px 20px 13px 24x;
    line-height: 1.3;
    font-size: 13px;
    font-size: 1.08333em;
    min-height: 1px;
}



/* ═══════════════════════════════════════════════════════════════
   LAYOUT RAÍZ — artículo 100vh
═══════════════════════════════════════════════════════════════ */
.pm-article-root {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
    font-family: var(--pm-font-family);
}

.pm-map-layer {
    position: absolute;
    inset: 0;
    z-index: var(--pm-z-map);
}


/* ═══════════════════════════════════════════════════════════════
   WRAPPER DEL MAPA (cuando se usa inline sin layout 100vh)
═══════════════════════════════════════════════════════════════ */
.pm-map-wrap {
    position: relative;
    width: 100%;
    border-radius: var(--pm-radius-lg);
    overflow: hidden;
    box-shadow: var(--pm-shadow-lg);
    margin: 1.5rem 0;
    font-family: var(--pm-font-family);
}


/* ═══════════════════════════════════════════════════════════════
   BARRA DE BÚSQUEDA FLOTANTE
═══════════════════════════════════════════════════════════════ */
.pm-searchbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--pm-z-controls);
    width: min(300px, 78%);
    display: flex;
    background: var(--pm-color-bg);
    border-radius: var(--pm-radius-pill);
    box-shadow: var(--pm-shadow-md);
    overflow: hidden;
}

.pm-searchbar input {
    flex: 1;
    border: none;
    padding: 9px 15px;
    font-size: var(--pm-font-size-md);
    outline: none;
    background: transparent;
    font-family: var(--pm-font-family);
}

.pm-searchbar button {
    background: var(--pm-color-primary);
    color: var(--pm-color-bg);
    border: none;
    padding: 0 14px;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--pm-transition-fast);
}

.pm-searchbar button:hover {
    background: var(--pm-color-primary-dark);
}


/* ═══════════════════════════════════════════════════════════════
   SWITCH DÍA / NOCHE (en el mapa)
═══════════════════════════════════════════════════════════════ */
.pm-switch {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: var(--pm-z-controls);
    background: var(--pm-color-bg);
    border-radius: var(--pm-radius-pill);
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: var(--pm-shadow-menu);
    cursor: pointer;
    user-select: none;
}

.pm-switch-btn {
    border: none;
    background: transparent;
    border-radius: 40px;
    padding: 5px 10px;
    font-size: var(--pm-font-size-md);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--pm-transition-fast);
    color: var(--pm-color-text-light);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: var(--pm-font-family);
}

.pm-switch-btn.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--pm-color-bg);
}

.pm-switch-btn.pm-switch-day.active  { background: #f59e0b; }
.pm-switch-btn.pm-switch-night.active { background: var(--pm-color-night-bg); }


/* ═══════════════════════════════════════════════════════════════
   FILTROS DE CATEGORÍA
═══════════════════════════════════════════════════════════════ */
.pm-cats {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--pm-z-controls);
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 6px 10px;
    max-width: 90%;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(8px);
    border-radius: var(--pm-radius-pill);
    box-shadow: var(--pm-shadow-menu);
}

.pm-cat-btn {
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: var(--pm-font-size-xs);
    font-weight: 600;
    cursor: pointer;
    background: var(--pm-color-bg-muted);
    color: #444;
    transition: all var(--pm-transition-fast);
    font-family: var(--pm-font-family);
}

.pm-cat-btn.on,
.pm-cat-btn:hover {
    background: var(--pm-color-primary);
    color: var(--pm-color-bg);
}


/* ═══════════════════════════════════════════════════════════════
   MENÚ CONTROL LEAFLET
═══════════════════════════════════════════════════════════════ */
.pm-menu-wrap { display: flex; flex-direction: column; gap: 7px; }

.pm-menu-btn {
    background: var(--pm-color-bg2);
        
        backdrop-filter: blur(10px);
    border: 0px solid rgba(0, 0, 0, 0.13);
    border-radius: var(--pm-radius-pill);
    height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    box-shadow: var(--pm-shadow-menu);
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--pm-font-size-md);
    font-family: var(--pm-font-family);
}

.pm-sub { display: none; flex-direction: column; gap: 5px; }
.pm-sub.on { display: flex; }

.pm-mi {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #444;
    font-size: var(--pm-font-size-base);
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--pm-font-family);
    transition: background var(--pm-transition-fast);
}

.pm-mi:hover { background: var(--pm-color-bg); color: #000; }


/* ═══════════════════════════════════════════════════════════════
   POPUP DE PIN (Leaflet)
═══════════════════════════════════════════════════════════════ */
.pm-pop {
    width: var(--pm-popup-width);
    font-family: var(--pm-font-family);
}

.pm-pop-img {
    width: 100%;
    height: var(--pm-popup-img-height);
    border-radius: var(--pm-radius-md);
    margin-bottom: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pm-pop-nophoto {
    width: 100%;
    height: var(--pm-popup-nophoto-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: var(--pm-radius-md);
    margin-bottom: 8px;
}

.pm-pop-title {
    font-size: var(--pm-font-size-lg);
    font-weight: 700;
    color: var(--pm-color-text-dark);
    margin-bottom: 3px;
}

.pm-pop-cat {
    font-size: var(--pm-font-size-xs);
    background: var(--pm-color-info-bg);
    color: var(--pm-color-info);
    border-radius: 10px;
    padding: 1px 7px;
    display: inline-block;
    margin-bottom: 4px;
}

.pm-pop-stars {
    color: var(--pm-color-star);
    font-size: var(--pm-font-size-base);
    margin-bottom: 4px;
}

.pm-pop-dist {
    background: var(--pm-color-success-bg);
    color: var(--pm-color-success);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--pm-font-size-xs);
    font-weight: 700;
    display: inline-block;
    margin-bottom: 5px;
}

.pm-pop-desc {
    font-size: var(--pm-font-size-base);
    color: #555;
    margin-bottom: 6px;
    line-height: 1.4;
}

.pm-pop-comt {
    padding: 6px 9px;
    border-left: 3px solid var(--pm-color-primary);
    background: var(--pm-color-primary-light);
    font-size: var(--pm-font-size-base);
    font-weight: 600;
    color: var(--pm-color-text-comment);
    border-radius: 0 var(--pm-radius-sm) var(--pm-radius-sm) 0;
    margin-bottom: 7px;
}

.pm-pop-info {
    font-size: var(--pm-font-size-base);
    color: #555;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pm-pop-info a { color: #2563eb; }

.pm-pop-hours {
    font-size: var(--pm-font-size-xs);
    color: #666;
    padding: 4px 7px;
    background: var(--pm-color-bg-soft);
    border-radius: 5px;
    margin-bottom: 7px;
}

.pm-pop-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-pop-btn {
    border: none;
    border-radius: var(--pm-radius-md);
    padding: 7px 10px;
    font-size: var(--pm-font-size-base);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    font-family: var(--pm-font-family);
    transition: opacity var(--pm-transition-fast);
}

.pm-pop-btn:hover { opacity: 0.88; }
.pm-pop-btn-main  { background: var(--pm-color-primary); color: var(--pm-color-bg); }
.pm-pop-btn-gps   { background: #f0fdf4; color: var(--pm-color-success); }
.pm-pop-btn-share { background: #25D366; color: #fff; }
.pm-pop-btn-share::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center/contain; vertical-align: middle; margin-right: 5px; }


/* ═══════════════════════════════════════════════════════════════
   LISTA LATERAL — OFFCANVAS
═══════════════════════════════════════════════════════════════ */
.pm-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--pm-z-offcanvas);
    width: var(--pm-oc-width);
    background: var(--pm-color-bg);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform var(--pm-transition-base);
    display: flex;
    flex-direction: column;
    font-family: var(--pm-font-family);
}

.pm-offcanvas.open { transform: translateX(0); }

.pm-offcanvas-head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--pm-color-border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pm-offcanvas-search {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--pm-color-border);
    border-radius: var(--pm-radius-md);
    font-size: var(--pm-font-size-md);
    outline: none;
    font-family: var(--pm-font-family);
}

.pm-offcanvas-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pm-oc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pm-color-bg-soft);
    cursor: pointer;
    transition: background var(--pm-transition-fast);
}

.pm-oc-item:hover { background: var(--pm-color-bg-soft); }

.pm-oc-item.active {
    background: #fff7ed;
    border-left: 3px solid var(--pm-color-primary);
}

.pm-oc-dist {
    background: var(--pm-color-success-bg);
    color: var(--pm-color-success);
    font-size: var(--pm-font-size-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    display: none;
    margin-top: 3px;
}

.pmoc-comt-text,
.pmoc-comt-dynamic {
    font-size: var(--pm-font-size-sm);
    color: var(--pm-color-text-comment);
    border-left: 2px solid var(--pm-color-primary);
    padding-left: 5px;
    margin-top: 3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════
   OVERLAY OSCURO (detrás de sheets y offcanvas)
═══════════════════════════════════════════════════════════════ */
.pm-overlay-dark {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-overlay);
    background: var(--pm-overlay-bg);
    backdrop-filter: blur(var(--pm-overlay-blur));
    opacity: 0;
    transition: opacity 0.3s;
}


/* ═══════════════════════════════════════════════════════════════
   SHEET "SABER MÁS" (artículo del pin)
═══════════════════════════════════════════════════════════════ */
.pm-sheet-article {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--pm-z-sheet-article);
    height: var(--pm-sheet-max-h);
    background: var(--pm-color-bg);
    border-radius: var(--pm-sheet-radius);
    box-shadow: var(--pm-shadow-xl);
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--pm-transition-sheet);
    font-family: var(--pm-font-family);
}

.pm-sheet-article.open { transform: translateY(0); }


/* ═══════════════════════════════════════════════════════════════
   BOTTOM SHEET DEL ARTÍCULO (panel con carrusel)
═══════════════════════════════════════════════════════════════ */
.pm-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--pm-z-sheet);
    background: var(--pm-color-bg);
    border-radius: var(--pm-sheet-radius);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(calc(100% - var(--pm-sheet-handle-h)));
    transition: transform var(--pm-transition-sheet);
    height: var(--pm-sheet-max-h);
    display: flex;
    flex-direction: column;
    touch-action: none;
}

.pm-sheet.open { transform: translateY(0); }

.pm-sheet-handle {
    flex-shrink: 0;
    height: var(--pm-sheet-handle-h);
    padding: 0 20px;
    display: flex;
    align-items: top!important;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.pm-sheet-handle::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--pm-color-border);
    border-radius: 4px;
}

.pm-sheet-drag-hint {
    font-size: var(--pm-font-size-sm);
    color: var(--pm-color-text-light);
    white-space: nowrap;
    transition: opacity var(--pm-transition-fast);
}

.pm-sheet.open .pm-sheet-drag-hint { opacity: 0; pointer-events: none; }

.pm-sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


@media (max-width: 767.98px) {
  
  /* 1. El sheet sigue anclado en bottom:0, pero su z-index supera la nav */
  .pm-sheet {
    z-index: 1001;
    /* Añadir padding inferior para que el contenido no quede bajo la nav */
    padding-bottom: 56px;
  }

  /* 2. El handle necesita un offset extra para que asomar por encima de la nav */
  /*    Reemplazamos el transform para que la parte visible sea el handle + los 56px de nav */
  .pm-sheet:not(.open) {
    transform: translateY(calc(100% - 64px - 56px));
  }
}



/* ═══════════════════════════════════════════════════════════════
   CARRUSEL DE PINES (dentro del sheet)
═══════════════════════════════════════════════════════════════ */
.pm-pin-carousel {
    display: flex;
    gap: 12px;
    padding: 16px 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pm-pin-carousel::-webkit-scrollbar { display: none; }

.pm-pin-card {
    flex-shrink: 0;
    width: var(--pm-card-width);
    scroll-snap-align: start;
    border-radius: var(--pm-card-radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--pm-color-border-light);
    background: var(--pm-color-bg);
    box-shadow: var(--pm-shadow-sm);
    transition: border-color var(--pm-transition-fast), transform var(--pm-transition-fast);
}

.pm-pin-card:hover,
.pm-pin-card.active {
    border-color: var(--pm-color-primary);
    transform: translateY(-2px);
}

.pm-pin-card.active {
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.25);
}

.pm-pin-card-img {
    width: 100%;
    height: var(--pm-card-img-h);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.pm-pin-card-body { padding: 8px 10px 10px; }

.pm-pin-card-name {
    font-size: var(--pm-font-size-base);
    font-weight: 700;
    color: var(--pm-color-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-pin-card-stars {
    color: var(--pm-color-star);
    font-size: var(--pm-font-size-xs);
    margin-top: 2px;
}

.pm-pin-card-comt {
    font-size: var(--pm-font-size-xs);
    color: var(--pm-color-text-comment);
    border-left: 2px solid var(--pm-color-primary);
    padding-left: 4px;
    margin-top: 3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════
   SWITCH DÍA/NOCHE EN EL SHEET (barra del artículo)
═══════════════════════════════════════════════════════════════ */
.pm-sheet-switch {
    display: flex;
    background: var(--pm-color-bg-muted);
    border-radius: var(--pm-radius-pill);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.pm-sheet-switch-btn {
    border: none;
    border-radius: 25px;
    padding: 4px 10px;
    font-size: var(--pm-font-size-base);
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--pm-color-text-light);
    transition: all var(--pm-transition-fast);
    font-family: var(--pm-font-family);
}

.pm-sheet-switch-btn.active-day   { background: #f59e0b; color: var(--pm-color-bg); }
.pm-sheet-switch-btn.active-night { background: var(--pm-color-night-bg); color: var(--pm-color-bg); }


/* ═══════════════════════════════════════════════════════════════
   OVERLAY SVG (capa sobre el mapa)
═══════════════════════════════════════════════════════════════ */
.pm-svg-overlay {
    /* Leaflet aplica opacity via JS — aquí solo el filtro opcional */
    transition: opacity 0.4s ease;
}

.pm-overlay-toggle {
    position: absolute;
    bottom: 56px;
    right: 12px;
    z-index: var(--pm-z-controls);
    background: var(--pm-color-bg);
    border-radius: var(--pm-radius-circle);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 18px;
    transition: background var(--pm-transition-fast);
    user-select: none;
}

.pm-overlay-toggle[data-active="0"] {
    background: var(--pm-color-bg-muted);
    opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════
   RADAR MODAL
═══════════════════════════════════════════════════════════════ */
.pm-radar-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-radar);
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.pm-radar-inner {
    background: var(--pm-color-bg);
    border-radius: var(--pm-radius-xl);
    padding: 24px;
    width: 280px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.pm-radar-select {
    width: 100%;
    padding: 9px;
    margin-bottom: 14px;
    border: 1px solid var(--pm-color-border);
    border-radius: var(--pm-radius-md);
    font-size: var(--pm-font-size-lg);
    font-family: var(--pm-font-family);
    outline: none;
}

.pm-radar-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--pm-radius-md);
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
    font-family: var(--pm-font-family);
    transition: opacity var(--pm-transition-fast);
}

.pm-radar-btn:hover { opacity: 0.88; }
.pm-radar-btn-apply  { background: var(--pm-color-primary); color: var(--pm-color-bg); }
.pm-radar-btn-cancel { background: var(--pm-color-bg-muted); color: #444; }


/* ═══════════════════════════════════════════════════════════════
   CONSOLA DE DEBUG (solo admins)
═══════════════════════════════════════════════════════════════ */
.pm-debug-console {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--pm-z-debug);
    width: 340px;
    max-height: 80vh;
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    border-radius: 10px;
    border: 1px solid #334155;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════════════════════════════ */
.pm-close-btn {
    background: var(--pm-color-bg-muted);
    border: none;
    border-radius: var(--pm-radius-circle);
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-color-text-light);
    flex-shrink: 0;
    transition: background var(--pm-transition-fast);
}

.pm-close-btn:hover { background: var(--pm-color-border); }

/* Ocultar extra fields automáticos de Joomla */
.fields-container,
.com-fields-container,
ul.fields-container,
.field-entry.map-id,
.field-entry.pines-dia,
.field-entry.pines-noche,
.field-entry.pines-comentarios-dia,
.field-entry.pines-comentarios-noche,
.field-entry.comentarios-pines-dia,
.field-entry.comentarios-pines-noche {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   MAPA — WRAPPER E INSTANCIAS (selectores genéricos por prefijo)
   Estos estilos cubren cualquier instancia del componente.
   El único estilo dinámico (height) se emite inline desde PHP.
═══════════════════════════════════════════════════════════════ */

/* Wrapper general del mapa */
[id^="pmwrap-"] {
    position: relative;
    width: 100%;
    /* height: se sobreescribe inline desde PHP según $mapHeight */
    border-radius: var(--pm-radius-lg);
    overflow: hidden;
    box-shadow: var(--pm-shadow-lg);
    margin: 1.5rem 0;
    font-family: var(--pm-font-family);
    
}

[id^="pmmap-"] {
    width: 100%;
    height: 100%;
}

/* ── Barra de búsqueda flotante ── */
[class^="pmsearch-"] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--pm-z-controls);
    width: min(300px, 78%);
    display: flex;
    background: var(--pm-color-bg);
    border-radius: var(--pm-radius-pill);
    box-shadow: var(--pm-shadow-md);
    overflow: hidden;
}







[class^="pmsearch-"] input {
    flex: 1;
    border: none;
    padding: 9px 15px;
    font-size: var(--pm-font-size-md);
    outline: none;
    background: transparent;
    font-family: var(--pm-font-family);
}

[class^="pmsearch-"] button {
    background: var(--pm-color-primary);
    color: var(--pm-color-bg);
    border: none;
    padding: 0 14px;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--pm-transition-fast);
}

[class^="pmsearch-"] button:hover {
    background: var(--pm-color-primary-dark);
}

/* ── Switch día/noche ── */
[id^="pmswitch-"] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: var(--pm-z-controls);

    border-radius: var(--pm-radius-pill);
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: var(--pm-shadow-menu);
    cursor: pointer;
    user-select: none;
         background: var(--pm-color-bg2);
        backdrop-filter: blur(10px);
}

[class^="pmswitch-btn-"] {
    border: none;
    background: transparent;
    border-radius: 40px;
    padding: 5px 10px;
    font-size: var(--pm-font-size-md);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--pm-transition-fast);
    color: var(--pm-color-text-light);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: var(--pm-font-family);
}

[class^="pmswitch-btn-"].active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--pm-color-bg);
}

[class^="pmswitch-btn-"].active.day-btn   { background: #f59e0b; }
[class^="pmswitch-btn-"].active.night-btn { background: var(--pm-color-night-bg); }

/* ── Filtros categoría ── */
[class^="pmcats-"] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--pm-z-controls);
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 6px 10px;
    max-width: 90%;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(8px);
    border-radius: var(--pm-radius-pill);
    box-shadow: var(--pm-shadow-menu);
}

[class^="pmcat-"] {
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: var(--pm-font-size-xs);
    font-weight: 600;
    cursor: pointer;
    background: var(--pm-color-bg-muted);
    color: #444;
    transition: all var(--pm-transition-fast);
    font-family: var(--pm-font-family);
}

[class^="pmcat-"].on,
[class^="pmcat-"]:hover {
    background: var(--pm-color-primary);
    color: var(--pm-color-bg);
}

/* ── Offcanvas lista lateral ── */
.pm-offcanvas {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: var(--pm-z-offcanvas);
    width: var(--pm-oc-width);
    background: var(--pm-color-bg);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform var(--pm-transition-base);
    display: flex;
    flex-direction: column;
    font-family: var(--pm-font-family);
}

.pm-offcanvas.open { transform: translateX(0); }

.pm-offcanvas-head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--pm-color-border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pm-offcanvas-search {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--pm-color-border);
    border-radius: var(--pm-radius-md);
    font-size: var(--pm-font-size-md);
    outline: none;
    font-family: var(--pm-font-family);
}

.pm-offcanvas-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

[class^="pmoc-item-"] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pm-color-bg-soft);
    cursor: pointer;
    transition: background var(--pm-transition-fast);
}

[class^="pmoc-item-"]:hover { background: var(--pm-color-bg-soft); }

[class^="pmoc-item-"].active {
    background: #fff7ed;
    border-left: 3px solid var(--pm-color-primary);
}

[class^="pmoc-dist-"] {
    background: var(--pm-color-success-bg);
    color: var(--pm-color-success);
    font-size: var(--pm-font-size-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    display: none;
    margin-top: 3px;
}

/* ── Sheet "Saber más" ── */
[id^="pmsheet-"]:not([id*="title"]):not([id*="body"]) {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--pm-z-sheet-article);
    height: var(--pm-sheet-max-h);
    background: var(--pm-color-bg);
    border-radius: var(--pm-sheet-radius);
    box-shadow: var(--pm-shadow-xl);
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--pm-transition-sheet);
    font-family: var(--pm-font-family);
}

.pm-sheet-article-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 40px;
    font-size: var(--pm-font-size-xl);
    line-height: 1.7;
    color: var(--pm-color-text-dark);
}

/* ── Overlay oscuro ── */
.pm-overlay-dark {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-overlay);
    background: var(--pm-overlay-bg);
    backdrop-filter: blur(var(--pm-overlay-blur));
    opacity: 0;
    transition: opacity 0.3s;
}

/* ── Radar modal ── */
.pm-radar-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-radar);
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* ── Toggle overlay SVG ── */
.pm-overlay-toggle {
    position: absolute;
    bottom: 56px;
    right: 12px;
    z-index: var(--pm-z-controls);
    background: var(--pm-color-bg);
    border-radius: var(--pm-radius-circle);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 18px;
    transition: background var(--pm-transition-fast);
    user-select: none;
}




/* ── Sheet "Saber más" — estructura interna ── */
.pm-sheet-art-header {
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--pm-color-border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}

.pm-sheet-art-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--pm-color-border);
    border-radius: 4px;
}

.pm-sheet-art-title {
    font-size: var(--pm-font-size-xl);
    font-weight: 700;
    color: var(--pm-color-text-dark);
    flex: 1;
    padding-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Controles del mapa en móvil: todo en una línea compacta ── */


@media (max-width: 767.98px) {

    
      /* Ocultar buscador nativo del componente — la nav tiene el suyo */
  [class^="pmsearch-"] {
    display: none !important;
  }
    
    
  /* Buscador: más corto, separado del ≡ y del switch */
  [class^="pmsearch-"] {
    left: 66px !important;
    right: 230px !important;
    width: auto !important;
    transform: none !important;
    top: 10px !important;
    height: 33px !important;
    overflow: hidden !important;
 
  }
  [class^="pmsearch-"] input {
    padding: 0 8px !important;
    font-size: 12px !important;
    height: 33px !important;
  }
  [class^="pmsearch-"] button {
    height: 33px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  /* Switch compacto */
  [id^="pmswitch-"] {
    top: 10px !important;
    right: 10px !important;
    gap: 2px !important;
  }
  [id^="pmswitch-"] button {
    padding: 4px 7px !important;
    font-size: 11px !important;
  }

  /* Botón 🗺️ sin margin */
  [id^="pmoverlay-toggle-"] {
    margin-left: 0 !important;
    padding: 4px 7px !important;
  }

  /* Botón ≡ solo icono */
  .pm-menu-btn {
    font-size: 0 !important;
    padding: 6px 1px 6px 9px !important;
  }
  .pm-menu-btn svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
  }
    
      [class^="pmsearch-"] input {
    padding: 0 8px !important;
    font-size: 16px !important;   /* ← mínimo para evitar zoom en iOS/Android */
    height: 33px !important;
    line-height: 33px !important;
  }
    
}