/* ==========================================================================
   css/plazas.css — /plazas y /plazas/{barrio} (2-nov-2026)
   Va después de css/estilos.css. Mismo esquema que /colectivos: en el
   celular, mapa arriba y listado abajo; en escritorio, panel a la izquierda
   y mapa a la derecha.
   ========================================================================== */

/* ── Mapa ── */
.pl-mapa{position:relative;height:42vh;height:42dvh;min-height:260px;background:var(--lima-pal);
  border-bottom:3px solid var(--lima);z-index:1}
#mapa{height:100%;width:100%}
.leaflet-container{font-family:var(--cuerpo)}
.pl-aviso{position:absolute;z-index:500;top:12px;left:50%;transform:translateX(-50%);
  background:var(--verde-osc);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;
  border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap}
.pl-aviso[hidden]{display:none}
.pl-pop b{display:block;font-size:14px}
.pl-pop span{display:block;color:var(--suave);font-size:12px;margin:2px 0 6px}
.pl-pop a{color:var(--verde);font-weight:700}

/* ── Panel y filtros ── */
.pl-panel .intro h2,
.pl-panel .intro h1.pl-h1{font-family:var(--disp);font-weight:800;font-size:clamp(22px,5.5vw,28px);letter-spacing:-.02em;margin:4px 0 2px}
.pl-filtros{display:grid;gap:10px;margin:14px 0 0}
.pl-campo{display:flex;align-items:center;gap:11px;background:var(--sup);border:1px solid var(--linea-2);
  border-radius:13px;padding:0 14px;min-height:48px}
.pl-campo svg{width:18px;height:18px;color:var(--verde);flex:none}
.pl-campo input,.pl-campo select{border:0;outline:0;font-family:var(--cuerpo);font-size:15px;color:var(--texto);
  width:100%;background:transparent;padding:12px 0}
.pl-tipos{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pl-chip{border:1px solid var(--linea-2);border-radius:999px;padding:7px 12px;font:600 13px var(--cuerpo);
  background:var(--sup);color:var(--suave);cursor:pointer}
.pl-chip span{font-weight:500;color:var(--tenue)}
.pl-chip.on{background:var(--verde);border-color:var(--verde);color:#fff}
.pl-chip.on span{color:rgba(255,255,255,.8)}
.pl-botones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pl-btn{border:1px solid var(--linea);border-radius:999px;padding:9px 15px;font:600 14px var(--cuerpo);
  cursor:pointer;background:#fff;color:var(--verde);display:inline-flex;align-items:center;gap:6px}
.pl-btn svg{width:15px;height:15px}
.pl-btn.on{background:var(--verde);border-color:var(--verde);color:#fff}
.pl-btn[disabled]{opacity:.6;cursor:default}
.pl-btn[hidden]{display:none}
.pl-msg{font-size:13px;color:var(--suave);margin:8px 0 0}
.pl-msg:empty{display:none}
.pl-msg a{color:var(--verde);font-weight:700}

/* ── Para conocer (las que tienen foto) ── */
.pl-dest{margin-top:20px}
.pl-dest[hidden]{display:none}
.pl-dest h2,.pl-grupo-tit,.pl-sec h2{font-family:var(--disp);font-weight:700;font-size:15.5px;color:var(--texto);margin:0 0 10px}
.pl-dest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pl-dest-grid .card{flex:none}
.pl-dest-grid .card .ph{height:110px}

/* ── Listado ── */
.pl-lista{margin-top:22px}
.pl-grupo{margin-bottom:20px}
.pl-grupo[hidden],.pl-item[hidden]{display:none}
.pl-grupo-tit{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pl-grupo-tit small{font-family:var(--cuerpo);font-weight:500;color:var(--suave);font-size:12.5px}
.pl-grupo-tit a{margin-left:auto;font-family:var(--cuerpo);font-size:12.5px;font-weight:700;color:var(--verde)}
.pl-items{display:flex;flex-direction:column;gap:10px}
.pl-item{padding:13px 15px;cursor:pointer}
.pl-item.activa{border-color:var(--lima);box-shadow:0 0 0 2px rgba(152,198,26,.25)}
.pl-item .nom{font-size:15.5px}
.pl-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.pl-tipo,.pl-donde{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.pl-tipo{color:var(--verde-osc);background:var(--lima-pal)}
.pl-donde{color:var(--verde);background:rgba(0,121,92,.08)}
/* Dentro del grupo de su barrio el chip sobra; en la lista de cercanía, no. */
.pl-grupo[data-g^="b:"] .pl-donde{display:none}
.pl-item .dir{font-size:13px}
.pl-item .dir::before{content:"";width:14px;height:14px;flex:none;background:var(--tenue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
.pl-cole{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
.pl-cole-et{font-size:12px;color:var(--suave);margin-right:2px}
.pl-linea{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--texto);
  background:var(--sup);border:1px solid var(--linea-2);border-left:4px solid var(--c,#00795c);
  padding:1px 8px;border-radius:7px}
.pl-linea:hover{border-color:var(--c,#00795c)}
.pl-mas{font-size:12px;color:var(--suave)}
.pl-acc{display:flex;gap:16px;margin-top:9px}
.pl-acc a{font-size:13px;font-weight:700;color:var(--verde)}
.pl-sin{padding:24px 0;text-align:center;color:var(--suave)}
.pl-sin[hidden]{display:none}
.pl-sin a{color:var(--verde);font-weight:700}

/* Modo "cerca": lista plana ordenada por distancia */
.pl-cerca-lista{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.pl-cerca-lista:empty{display:none}
.pl-item .dist{margin-left:auto}

/* ── Secciones de abajo: barrios, ayuda ── */
.pl-sec{padding-top:30px}
.pl-sec > p{color:var(--suave);font-size:14px;margin:-4px 0 14px}
.pl-barrios{display:flex;flex-wrap:wrap;gap:8px}
.pl-barrios a{display:inline-flex;align-items:center;gap:6px;background:var(--sup);border:1px solid var(--linea);
  border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;color:var(--texto)}
.pl-barrios a span{color:var(--suave);font-weight:500;font-size:12.5px}
.pl-barrios a:hover{border-color:var(--lima);color:var(--verde)}
.pl-faq{background:var(--sup);border:1px solid var(--linea);border-radius:16px;overflow:hidden}
.pl-faq details{border-top:1px solid var(--linea)}
.pl-faq details:first-child{border-top:0}
.pl-faq summary{cursor:pointer;padding:13px 16px;font-weight:600;font-size:14px;list-style:none;
  display:flex;justify-content:space-between;gap:12px}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq summary::after{content:"+";font-weight:700;color:var(--verde)}
.pl-faq details[open] summary::after{content:"–"}
.pl-faq details p{padding:0 16px 14px;font-size:13.5px;color:var(--suave);line-height:1.55}
.pl-faq a{color:var(--verde);font-weight:600}
.pl-nota{margin-top:14px;font-size:12.5px;color:var(--tenue);line-height:1.5}
.pl-nota a{color:var(--verde);font-weight:600}

/* Página de barrio */
.pl-resumen-lineas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pl-miga{font-size:12.5px;color:var(--suave);margin-top:14px}
.pl-miga a{color:var(--verde);font-weight:600}

@media(min-width:640px){
  .pl-filtros{grid-template-columns:1.3fr 1fr}
  .pl-dest-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:900px) and (max-width:1023.98px){
  .pl-mapa{height:420px;border-radius:0 0 28px 28px;overflow:hidden;border-bottom:0}
}

/* ── Escritorio: panel a la izquierda, mapa fijo a la derecha ── */
@media(min-width:1024px){
  .pl-app{display:grid;grid-template-columns:460px minmax(0,1fr);height:calc(100vh - 60px);min-height:560px}
  .pl-app .pl-mapa{order:2;height:100%;min-height:0;border-bottom:0}
  .pl-panel{order:1;max-width:none;margin:0;padding:0 22px 130px;overflow-y:auto;
    background:var(--fondo);border-right:1px solid var(--linea-2);box-shadow:6px 0 18px rgba(47,54,52,.06);z-index:2}
  .pl-panel .intro{padding-top:20px}
  .pl-filtros{grid-template-columns:1fr}
  .pl-dest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-sec-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
}