/*
AI PROJECT NOTE — LECTURA OBLIGATORIA PARA CUALQUIER IA:
Antes de modificar este archivo, toda IA (Claude, ChatGPT u otra) DEBE
leer primero /AI_RULES.md completo. Sin excepcion, sin importar cuan
chico o simple parezca el cambio, y sin esperar a que el usuario lo
pida o lo recuerde — esta nota es la instruccion, no un recordatorio
opcional. Si /AI_RULES.md ya se leyo en esta misma sesion, alcanza con
revisar /AI_SESSION.md en su lugar.

Despues de modificar este archivo, actualizar /AI_SESSION.md con el
cambio hecho y la verificacion realizada.
*/

/**
 * ============================================================================
 * css/poi-panel.css
 * ----------------------------------------------------------------------------
 * Estilos del panel de POI en formato "Bottom Sheet" minimalista.
 * Namespaced bajo `.poi-panel` para no colisionar con estilos existentes.
 * No usa Tailwind: son clases planas equivalentes a los tokens pedidos,
 * para mantener consistencia con el resto del proyecto (Vanilla CSS).
 * ============================================================================
 */

:root {
  --poi-panel-accent: #0d9488;      /* teal-600 */
  --poi-panel-accent-hover: #0f766e; /* teal-700, por si se necesita */
  --poi-panel-slate-900: #0f172a;
  --poi-panel-slate-800: #1e293b;
  --poi-panel-slate-700: #334155;
  --poi-panel-slate-400: #94a3b8;
  --poi-panel-slate-300: #cbd5e1;
  --poi-panel-gray-200: #e5e7eb;
  --poi-panel-slate-200: #e2e8f0;
  --poi-panel-white: #ffffff;

  /* [PLAN_SISTEMA_SKINS.md] Mismo color que --poi-panel-accent de
     arriba, en formato "R,G,B" para poder usarlo dentro de
     rgba(var(--poi-panel-accent-rgb), .XX) sin repetir el valor a
     mano en cada lugar que necesite una versión translúcida. */
  --poi-panel-accent-rgb: 13, 148, 136;

  --poi-panel-radius: 1rem;         /* rounded-t-2xl */
  --poi-panel-max-width: 28rem;     /* max-w-md */
  --poi-panel-shadow: 0 -8px 30px rgba(15, 23, 42, 0.12);
  --poi-panel-transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  /* [2026-08-14] Estos 2 valores YA NO son fijos — son solo el
     fallback antes de que js/poi-panel.js corra por primera vez
     (_applyPanelSizeVars). En cuanto el panel se crea, estas mismas
     variables se sobreescriben en :root con el % configurado en
     Admin > Global > "Panel de información"
     (globalSettings.panelPctPortrait / panelPctLandscape). */
  --poi-panel-peek-visible: 300px;  /* alto visible en pantallas verticales (bottom sheet) */
  --poi-panel-side-width: 380px;    /* ancho visible en pantallas cuadradas/horizontales (sidebar) */
  --poi-panel-full-top-gap: 8vh;    /* deja 92% de pantalla cubierto en "full", solo bottom sheet */
}

/* --------------------------------------------------------------------
   Sin overlay: por decisión de producto, el mapa de fondo mantiene su
   brillo normal siempre, incluso con el panel abierto en "full".
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   CONTENEDOR PRINCIPAL (mobile-first: Bottom Sheet)
   -------------------------------------------------------------------- */
.poi-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: var(--poi-panel-max-width);
  height: calc(100% - var(--poi-panel-full-top-gap));
  background: var(--poi-panel-white);
  border-radius: var(--poi-panel-radius) var(--poi-panel-radius) 0 0;
  box-shadow: var(--poi-panel-shadow);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Transform base: arranca oculto (fuera de pantalla, hacia abajo) */
  transform: translate(-50%, 100%);
  transition: var(--poi-panel-transition);
  /* Nota: el bloqueo de gestos táctiles NO va acá a nivel de todo el
     panel — si no, el scroll dentro de .poi-panel__scroll también
     quedaría capturado por el navegador como "arrastre de panel".
     touch-action:none vive solo en .poi-panel__handle-zone (línea de
     abajo), y .poi-panel__scroll tiene pan-y explícito para que el
     scroll de texto funcione libre y suave. */
}

.poi-panel.is-dragging {
  transition: none;
}

.poi-panel[data-state="full"] {
  transform: translate(-50%, 0);
}

.poi-panel[data-state="peek"] {
  transform: translate(
    -50%,
    calc(100% - var(--poi-panel-full-top-gap) - var(--poi-panel-peek-visible))
  );
}

.poi-panel[data-state="closed"] {
  transform: translate(-50%, 100%);
}

/* --------------------------------------------------------------------
   DRAG HANDLE
   -------------------------------------------------------------------- */
.poi-panel__handle-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 6px;
  flex: 0 0 auto;
  cursor: grab;
  /* Único punto de arranque válido para el gesto de arrastrar el panel
     completo — acá sí se bloquea el scroll/gesto nativo del navegador
     para que Pointer Events tenga control total. */
  touch-action: none;
}

.poi-panel__handle-zone:active {
  cursor: grabbing;
}

.poi-panel__handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--poi-panel-gray-200);
}

/* --------------------------------------------------------------------
   IMAGEN HERO — banner debajo del título. Altura fija (no aspect-ratio,
   para que el layout no salte según la proporción de cada foto).
   Ocultación ESTRICTA: si el <img> no tiene src cargado (o falló),
   poi-panel.js le pone el atributo `hidden` a este contenedor — la
   regla de abajo lo saca completamente del flujo (0 alto, sin
   recuadro gris, el texto sube pegado al título).
   -------------------------------------------------------------------- */
.poi-panel__hero {
  flex: 0 0 auto;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--poi-panel-gray-200);
}

.poi-panel__hero[hidden] {
  display: none !important;
  height: 0;
}

.poi-panel__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------
   ENCABEZADO — categoría + título únicamente (el subtitle vive en su
   propia fila, después del hero, para que el orden visual sea
   categoría → título → [banner] → coordenadas → descripción).
   -------------------------------------------------------------------- */
.poi-panel__header {
  flex: 0 0 auto;
  padding: 0 3.6rem 0.75rem 1.5rem; /* [2026-10-01] aire a la derecha: la cruz de cierre */
}

/* [2026-10-01] Cruz de cierre del panel: esquina superior derecha, por encima
   de la zona del asa (que es hermana, no la tapa). Look = .btn-x (base.css). */
.poi-panel__close {
  position: absolute;
  top: 0.5rem;
  right: 0.85rem;
  z-index: 3;
}

/* [I3, 23/10] Ojito: botón igual a la ✕ (clase .btn-x, 32 px), a su izquierda con 8 px de
   separación (misma separación que sonido y ✕ en la ventana de la ruleta) y a la misma altura.
   La fila [data-role="lang-row"] que lo contenía queda como espaciador (mismo alto de antes),
   y el título no se toca porque arranca debajo de esa fila. */
[data-role="lang-row"] { min-height: 1.35rem; }
.poi-panel__eye {
  position: absolute;
  top: 0.5rem;
  right: calc(0.85rem + 32px + 8px);
  z-index: 3;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}
.poi-panel__eye:hover { background: var(--surface2); color: var(--text2); border-color: var(--border); }
.poi-panel__eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.poi-panel__category {
  font-size: 0.75rem;       /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--poi-panel-accent);
  margin: 0 0 0.25rem;
}

.poi-panel__title {
  /* Variables de la pestaña "Tipografía" (nivel 1: Nombre principal),
     con clamp() para que un tamaño extremo elegido en el admin nunca
     rompa el layout en mobile — y fallback al valor de siempre si
     todavía no se guardó ningún preset con scope "pines". */
  font-family: var(--pines-title-font, inherit);
  font-size: clamp(1.1rem, var(--pines-title-size, 1.5rem), 2.5rem);
  color: var(--pines-title-color, var(--poi-panel-slate-900));
  font-weight: 700;
  letter-spacing: -0.02em;  /* tracking-tight */
  margin: 0;
  line-height: 1.2;
}

.poi-panel__subtitle-row {
  flex: 0 0 auto;
  padding: 0.75rem 1.5rem 0;
}

.poi-panel__subtitle {
  font-size: 0.875rem;      /* text-sm */
  color: var(--poi-panel-slate-400);
  margin: 0;
}

/* --------------------------------------------------------------------
   ÁREA SCROLLEABLE
   -------------------------------------------------------------------- */
.poi-panel__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 entre secciones */
  -webkit-overflow-scrolling: touch;
  /* Gesto explícito: solo scroll vertical de texto acá adentro, nunca
     arrastre del panel (ese gesto vive únicamente en el handle). */
  touch-action: pan-y;
}

.poi-panel__section-title {
  font-family: var(--pines-section-font, inherit);
  font-size: clamp(0.65rem, var(--pines-section-size, 0.75rem), 1.1rem);
  color: var(--pines-section-color, var(--poi-panel-slate-400));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}

/* [2026-09-28] Fila única con todas las categorías/subcategorías del lugar. */
/* [2026-09-28] Categorías reales del lugar bajo el título: texto simple
   (mismo aspecto que el viejo texto de categoría), UNA sola línea, con
   desplazamiento horizontal si no entran. Separadas por doble espacio. */
.poi-panel__cats-wrap {
  position: relative;
  margin: 0.25rem 0 0;
}
.poi-panel__cats-wrap[hidden] { display: none; }
.poi-panel__cats-row {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.poi-panel__cats-row::-webkit-scrollbar { display: none; }
.poi-panel__cat-chip {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--poi-panel-accent);
}
/* Indicadores minimalistas ‹ › (solo visuales, no reciben toques) */
.poi-panel__cats-wrap::before,
.poi-panel__cats-wrap::after {
  position: absolute;
  top: 0; bottom: 0;
  width: 1.5rem;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--poi-panel-accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.poi-panel__cats-wrap::before {
  content: '‹';
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to right, var(--poi-panel-white), rgba(255, 255, 255, 0));
}
.poi-panel__cats-wrap::after {
  content: '›';
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, var(--poi-panel-white), rgba(255, 255, 255, 0));
}
.poi-panel__cats-wrap.has-left::before,
.poi-panel__cats-wrap.has-right::after { opacity: 1; }

/* [Etapa 5] Sistema de 2 pestañas (Info / Eventos) — solo visible
   cuando el pin tiene ≥1 evento vigente (ver poi-panel.js,
   _renderEventosTab). */
.poi-panel__tabs-row {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.5rem 0.5rem;
}
/* [FIX 2026-10-01] Con 0 eventos vigentes en el lugar, poi-panel.js pone `hidden`
   en esta fila (Info + Eventos), pero el `display: flex` de arriba le ganaba al
   `[hidden]` del navegador, así que la fila y el botón Eventos se veían igual
   aunque el lugar no tuviera ningún evento. Esta regla hace que `hidden` se respete. */
.poi-panel__tabs-row[hidden] { display: none; }
.poi-panel__tab-btn {
  border: none;
  background: var(--poi-panel-gray-200);
  color: var(--poi-panel-slate-700);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.poi-panel__tab-btn.on {
  background: var(--poi-panel-accent);
  color: var(--poi-panel-white);
}

/* [Etapa 12/13, 2026-09-28] Tarjeta de evento (js/evento-card.js) dentro de
   la pestaña Eventos del panel de un lugar.
   [23/10, pedido de Cris] Ya NO es un carrusel horizontal: las tarjetas van una
   debajo de la otra, con la MISMA grilla que el panel "Todos los eventos"
   (.todos-ev__grid, más abajo en este archivo): si cambia una, cambiar la otra.
   El nombre de clase `--carousel` se conserva solo para no tocar js/poi-panel.js. */
.poi-panel__eventos-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  align-items: start;
  min-width: 0;
  padding: 0.5rem 0.5rem 1rem; /* aire para que se vea la sombra del marco Polaroid */
}

/* [2026-09-30] Diseño Polaroid (mockup Gemini, opción 1): marco blanco con
   más aire abajo, esquinas rectas y sombra marcada. La tarjeta completa es
   clickeable (abre .evento-detalle). */
.evento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.6rem 0.6rem 1.4rem;
  background: var(--poi-panel-white);
  border: none;
  border-radius: 0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .evento-card:hover { transform: translateY(-3px); }
}
.evento-card:focus-visible { outline: 2px solid var(--poi-panel-accent); outline-offset: 2px; }
.evento-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--poi-panel-gray-200);
  overflow: hidden;
}
.evento-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Variante SIN foto: el nombre grande ocupa el lugar de la imagen.
   Fuente/tamaño/color = 4to nivel de tipografía (js/typography.js,
   `eventoSinFoto`); con valor de resguardo para presets viejos. */
.evento-card__sinfoto {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.6rem;
  text-align: center;
  background: rgba(var(--poi-panel-accent-rgb), 0.12);
}
.evento-card__sinfoto-titulo {
  font-family: var(--pines-eventoSinFoto-font, var(--font-d, inherit));
  font-size: clamp(1rem, var(--pines-eventoSinFoto-size, 1.4rem), 2.5rem);
  color: var(--pines-eventoSinFoto-color, var(--poi-panel-slate-900));
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Sin foto el nombre ya está arriba, grande — no se repite en el cuerpo. */
.evento-card--sinfoto .evento-card__nombre { display: none; }
.evento-card__locate {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.evento-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.35rem 0;
}
.evento-card__nombre {
  font-family: 'Caveat', cursive;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--poi-panel-slate-900);
  overflow-wrap: anywhere;
}
.evento-card__desc {
  font-size: 0.8rem;
  color: var(--poi-panel-slate-700);
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Fila inferior: recuadros de fecha/horario + entrada en texto gris. */
.evento-card__fila,
.evento-detalle__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.evento-card__entrada {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--poi-panel-slate-400);
}
/* Recuadro negro con letra monoespaciada. VERDE = el evento ocurre en la
   fecha elegida en el filtro (o en hoy si no hay ninguna); ROJO = no. */
.evento-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 0.25rem;
  background: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.evento-card__badge--on  { color: #39ff14; text-shadow: 0 0 8px rgba(57, 255, 20, 0.4); }
.evento-card__badge--off { color: #ff4d4d; }

/* [2026-09-30] VISTA AMPLIADA de un evento (EventoCard.openDetail). Vive
   dentro de .poi-panel (position:fixed + overflow:hidden), así que
   `absolute + inset:0` la deja cubriendo el panel y el translateX(100%)
   inicial la esconde recortada a la derecha; al abrir se desliza al lugar. */
.evento-detalle {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--poi-panel-white);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.evento-detalle.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .evento-detalle, .evento-card { transition: none; }
}
.evento-detalle__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.evento-detalle__scroll::-webkit-scrollbar { display: none; }
.evento-detalle__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(var(--poi-panel-accent-rgb), 0.12);
  overflow: hidden;
}
.evento-detalle__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evento-detalle__hero::after { /* degradé para que el título se lea sobre la foto */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--poi-panel-white) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}
.evento-detalle__hero--sinfoto::after { background: linear-gradient(to top, var(--poi-panel-white) 0%, rgba(255, 255, 255, 0) 45%); }
.evento-detalle__back {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 0 0.2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}
.evento-detalle__cerrar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}
.evento-detalle__hero-txt {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0.9rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.evento-detalle__tags {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.evento-detalle__titulo {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--poi-panel-slate-900);
  overflow-wrap: anywhere;
}
.evento-detalle__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.5rem 1.25rem 1.5rem;
}
.evento-detalle__sec h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--poi-panel-slate-900);
}
.evento-detalle__sec p {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--poi-panel-slate-700);
  overflow-wrap: anywhere;
}
.evento-detalle__barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background: var(--poi-panel-white);
  border-top: 1px solid var(--poi-panel-slate-200);
  box-shadow: 0 -10px 20px rgba(15, 23, 42, 0.05);
}
.evento-detalle__precio { display: flex; flex-direction: column; min-width: 0; }
.evento-detalle__precio small { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: var(--poi-panel-slate-400); }
.evento-detalle__precio strong { font-size: 1.05rem; font-weight: 800; color: var(--poi-panel-slate-900); overflow-wrap: anywhere; }
.evento-detalle__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.evento-detalle__btn {
  border: none;
  border-radius: 1rem;
  padding: 0.7rem 1.1rem;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.evento-detalle__btn--sec {
  background: var(--poi-panel-gray-200);
  color: var(--poi-panel-slate-700);
}

.poi-panel__body {
  font-family: var(--pines-body-font, inherit);
  font-size: clamp(0.8rem, var(--pines-body-size, 0.875rem), 1.25rem);
  color: var(--pines-body-color, var(--poi-panel-slate-700));
  line-height: 1.625; /* leading-relaxed */
  margin: 0;
}

.poi-panel__gancho {
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 500;
  color: var(--poi-panel-slate-700);
  margin: 0 0 0.75rem;
}

/* Lista vertical de campos internos del lugar (título + texto, cantidad
   libre — el título de cada campo lo define el contenido cargado, nunca
   el CSS ni el código). Reemplaza la fila horizontal de chips anterior,
   pensada para valores cortos con el título solo visible en el tooltip. */
.poi-panel__meta-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poi-panel__field-block + .poi-panel__field-block {
  padding-top: 1rem;
  border-top: 1px solid var(--poi-panel-slate-200);
}

.poi-panel__field-title {
  font-family: var(--pines-section-font, inherit);
  font-size: clamp(0.65rem, var(--pines-section-size, 0.75rem), 1.1rem);
  color: var(--pines-section-color, var(--poi-panel-slate-400));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
}

.poi-panel__field-text {
  font-family: var(--pines-body-font, inherit);
  font-size: clamp(0.8rem, var(--pines-body-size, 0.875rem), 1.25rem);
  color: var(--pines-body-color, var(--poi-panel-slate-700));
  line-height: 1.625;
  margin: 0;
  white-space: pre-wrap;
}

/* --------------------------------------------------------------------
   [2026-08-14] La sección de skins (thumbnails + switch on/off) que
   vivía acá se movió al panel admin de cada lugar (ver js/img-slots.js
   y css/base.css .za-toggle) — este panel público ya no la muestra.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   MODO EDICIÓN (inputs inline, mismo look que el texto estático)
   -------------------------------------------------------------------- */
.poi-panel__input,
.poi-panel__textarea {
  width: 100%;
  font-family: inherit;
  border: 1px solid var(--poi-panel-slate-300);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--poi-panel-slate-900);
  background: var(--poi-panel-white);
}

.poi-panel__input:focus,
.poi-panel__textarea:focus {
  outline: none;
  border-color: var(--poi-panel-accent);
}

.poi-panel__title-input {
  font-size: 1.5rem;
  font-weight: 700;
}

.poi-panel__textarea {
  resize: vertical;
  min-height: 5rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

/* --------------------------------------------------------------------
   FOOTER FIJO
   -------------------------------------------------------------------- */
.poi-panel__footer {
  flex: 0 0 auto;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--poi-panel-gray-200);
}

.poi-panel__action-btn {
  width: 100%;
  border: none;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--poi-panel-slate-900);
  color: var(--poi-panel-white);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.poi-panel__action-btn:hover {
  background: var(--poi-panel-slate-800);
}

.poi-panel__action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------
   RESPONSIVE (mobile) — en pantallas angostas, el panel ocupa el 100%
   del ancho
   -------------------------------------------------------------------- */
/* Ancho completo en celulares angostos EN MODO VERTICAL/bottom sheet
   únicamente — se excluye data-orientation="landscape" a propósito:
   una pantalla angosta pero horizontal (poco común, pero posible)
   debe seguir usando --poi-panel-side-width, no saltar a 100% de
   ancho y taparse todo el mapa. */
@media (max-width: 480px) {
  .poi-panel:not([data-orientation="landscape"]) {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------
   MODO LATERAL — pantallas cuadradas u horizontales (ancho >= alto,
   INCLUYE desktop). El panel deja de ser Bottom Sheet y se convierte
   en una barra lateral fija anclada a la izquierda, con ancho
   configurable (--poi-panel-side-width, ver Admin > Global > "Panel
   de información"). Ya NO es un @media de ancho fijo — el criterio
   real es de ORIENTACIÓN, decidido en JS (js/poi-panel.js,
   _isLandscapeScreen()) y volcado acá como atributo
   data-orientation="landscape", para poder tratar igual una pantalla
   cuadrada angosta que un desktop ancho (antes, por debajo de
   1024px, una pantalla cuadrada quedaba en bottom sheet aunque el
   cálculo de centrado del mapa ya asumiera sidebar — ver CAMBIOS.txt,
   quedaba pendiente de decisión; ahora coinciden siempre).
   -------------------------------------------------------------------- */
.poi-panel[data-orientation="landscape"] {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--poi-panel-side-width);
  max-width: var(--poi-panel-side-width);
  height: 100vh;
  border-radius: 0 var(--poi-panel-radius) var(--poi-panel-radius) 0;
  box-shadow: 8px 0 30px rgba(15, 23, 42, 0.12);

  /* En modo lateral no hay drag: el panel entra/sale con un slide
     horizontal simple en vez de translateY. */
  transform: translateX(-100%);
}

/* "full" y "peek" se tratan igual en modo lateral: el sidebar está
   simplemente abierto, a su ancho configurado. Solo "closed" lo
   oculta. Estas reglas tienen más especificidad que las
   [data-state="..."] de más arriba (2 atributos vs 1), así que
   ganan sin necesitar !important. */
.poi-panel[data-orientation="landscape"][data-state="full"],
.poi-panel[data-orientation="landscape"][data-state="peek"] {
  transform: translateX(0);
}

.poi-panel[data-orientation="landscape"][data-state="closed"] {
  transform: translateX(-100%);
}

/* El drag handle no tiene sentido en un sidebar fijo. */
.poi-panel[data-orientation="landscape"] .poi-panel__handle-zone {
  display: none;
}

/* --------------------------------------------------------------------
   [Etapa 15, PLAN_USUARIOS_EVENTOS.md, 2026-09-29] MODO "TODOS LOS EVENTOS"
   El mismo panel, sin un lugar puntual (js/poi-panel.js →
   openTodosEventos, contenido en js/eventos-todos.js). Se oculta todo lo
   propio de un lugar: ojito, categorías, banner, pestañas, subtítulo y el
   footer (botón Editar). !important porque algunos de esos nodos se
   muestran/ocultan por atributo `hidden` o estilo en línea desde
   _render(). Sin esto el panel no puede mostrar el modo "Todos" limpio.
   -------------------------------------------------------------------- */
.poi-panel--todos [data-role="lang-row"],
.poi-panel--todos [data-role="cats-wrap"],
.poi-panel--todos [data-role="hero"],
.poi-panel--todos [data-role="tabs-row"],
.poi-panel--todos [data-role="subtitle-row"],
.poi-panel--todos [data-role="aviso"],
.poi-panel--todos .poi-panel__footer {
  display: none !important;
}
.poi-panel--todos .poi-panel__header { padding-top: 0.25rem; }

.todos-ev {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.todos-ev__search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.todos-ev__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.todos-ev__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 2.4rem;
  padding: 0 2.4rem 0 0.8rem; /* lugar a la derecha para el + */
  border: 1px solid var(--poi-panel-slate-300);
  border-radius: 999px;
  background: var(--poi-panel-white);
  color: var(--poi-panel-slate-900);
  font-size: 1rem; /* 16px: evita el zoom automático de iOS al enfocar el campo */
}
.todos-ev__add {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem; height: 1.8rem; padding: 0;
  border: none; border-radius: 50%;
  background: var(--poi-panel-accent);
  color: var(--poi-panel-white);
  font-size: 1.2rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.todos-ev__add:disabled { opacity: 0.35; cursor: default; }
.todos-ev__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  white-space: nowrap;
  margin-top: -0.25rem;
}
.todos-ev__tags::-webkit-scrollbar { display: none; }
.todos-ev__tags[hidden] { display: none; }
.todos-ev__tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem; /* mismo aspecto que las categorías del pin */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--poi-panel-accent);
}
.todos-ev__tag-x {
  padding: 0 0.1rem;
  border: none; background: none;
  color: var(--poi-panel-slate-400);
  font-size: 0.65rem; line-height: 1;
  cursor: pointer;
}
.todos-ev__tag-x:hover { color: #dc2626; }
.todos-ev__input { -webkit-appearance: none; appearance: none; }
/* [2026-10-01] PC: Chrome/Edge/Brave de escritorio dibujan su propia "x" azul en
   los input type=search y pisaba al +; en celular no aparece. Se anula en todos. */
.todos-ev__input::-webkit-search-cancel-button,
.todos-ev__input::-webkit-search-decoration,
.todos-ev__input::-webkit-search-results-button,
.todos-ev__input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.todos-ev__add, .todos-ev__cal-btn, .todos-ev__tag-x { font-family: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.todos-ev__add:focus-visible, .todos-ev__cal-btn:focus-visible { outline: 2px solid rgba(var(--poi-panel-accent-rgb), 0.5); outline-offset: 2px; }
@media (hover: hover) {
  .todos-ev__add:not(:disabled):hover { filter: brightness(1.1); }
  .todos-ev__cal-btn:not(.has-value):hover { border-color: var(--poi-panel-accent); }
  .todos-ev__cal-btn.has-value:hover { filter: brightness(1.08); }
}
.todos-ev__input:focus {
  outline: 2px solid rgba(var(--poi-panel-accent-rgb), 0.5);
  outline-offset: 1px;
}
.todos-ev__cal-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.4rem;
  padding: 0 0.8rem;
  border: 1px solid var(--poi-panel-slate-300);
  border-radius: 999px;
  background: var(--poi-panel-white);
  color: var(--poi-panel-slate-700);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.todos-ev__cal-btn.has-value {
  background: var(--poi-panel-accent);
  border-color: var(--poi-panel-accent);
  color: var(--poi-panel-white);
}
.todos-ev__cal-ico { display: inline-flex; width: 1rem; height: 1rem; }
.todos-ev__cal-ico svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.todos-ev__cal-x {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 0.1rem; padding: 0 0.1rem;
  font-size: 0.7rem; line-height: 1;
  opacity: 0.85;
  cursor: pointer;
}
.todos-ev__cal-x:hover { opacity: 1; }
.todos-ev__cal-x[hidden] { display: none; }
.todos-ev__cal {
  box-sizing: border-box;
  max-width: 22rem;
  width: 100%;
  align-self: center;
  padding: 0.85rem;
  border: 1px solid var(--poi-panel-slate-200);
  border-radius: 0.9rem;
  background: rgba(var(--surface-rgb, 255, 255, 255), 1);
}
.todos-ev__cal[hidden] { display: none; }
.todos-ev__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  align-items: start;
}
.todos-ev__grid[hidden] { display: none; }
.todos-ev__vacio {
  margin: 1.5rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--poi-panel-slate-400);
}
.todos-ev__vacio[hidden] { display: none; }

/* --------------------------------------------------------------------
   SKINS (PLAN_SISTEMA_SKINS.md)
   Mismo mecanismo que css/base.css: [data-skin="..."] en <html> pisa
   estas variables, el resto del archivo no se toca. "default" queda
   vacío a propósito (son los mismos valores que ya están en :root
   arriba). "neobrutal-night" traduce el mockup subido a estos mismos
   nombres de variable.
   -------------------------------------------------------------------- */
[data-skin="default"] {
  /* Vacío a propósito — ver comentario arriba. */
}

[data-skin="neobrutal-night"] {
  --poi-panel-accent: #facc15;
  --poi-panel-accent-hover: #eab308;
  --poi-panel-accent-rgb: 250, 204, 21;

  --poi-panel-slate-900: #f4f1ea; /* texto principal (título) */
  --poi-panel-slate-800: #e4e4e7; /* sin uso visual hoy (ver .poi-panel__action-btn más abajo) */
  --poi-panel-slate-700: #a1a1aa; /* texto de cuerpo/secundario */
  --poi-panel-slate-400: #71717a; /* texto terciario / etiquetas de sección */
  --poi-panel-slate-300: #3f3f46; /* borde de inputs */
  --poi-panel-gray-200: #27272a;  /* divisores/fondos de chip */
  --poi-panel-slate-200: #27272a; /* divisores */
  --poi-panel-white: #18181b;     /* superficie del panel (antes: blanco de fondo) */
}

/* --poi-panel-slate-900 hace doble uso en el archivo original: texto
   principal Y fondo del botón de acción (mismo valor por coincidencia
   en el skin default, donde ambos son "casi negro"). Al oscurecer
   slate-900 para que sirva como texto claro, el botón necesitaría
   fondo claro con texto blanco encima = ilegible. Se resuelve con una
   excepción puntual para este botón en este skin, en vez de forzar un
   único token a cumplir 2 roles que necesitan valores opuestos. */
/* [23/10, pedido de Cris] En Neo-Brutalist Night el panel sigue gris oscuro, pero la
   TARJETA del evento (Polaroid) mantiene su marco blanco. Como la tarjeta lee los
   mismos colores del panel, acá se le devuelven los valores claros SOLO a ella
   (y a lo que tiene adentro): fondo blanco, textos oscuros. */
[data-skin="neobrutal-night"] .evento-card {
  --poi-panel-white: #ffffff;
  --poi-panel-slate-900: #0f172a;
  --poi-panel-slate-700: #334155;
  --poi-panel-slate-400: #64748b;
  --poi-panel-gray-200: #e5e7eb;
  --poi-panel-slate-200: #e2e8f0;
  --poi-panel-slate-300: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

[data-skin="neobrutal-night"] .poi-panel__action-btn {
  background: var(--poi-panel-accent);
  color: #000;
}
[data-skin="neobrutal-night"] .poi-panel__action-btn:hover {
  background: var(--poi-panel-accent-hover);
}

/* La FORMA característica del Neo-Brutalist (no solo el color) para
   las pestañas Información/Eventos: borde grueso, esquinas superiores
   cuadradas, línea de acento gruesa abajo de toda la fila — traducido
   1:1 de .tabs/.tab-btn del mockup. Solo geometría, no color (el
   color ya sale de --poi-panel-* de arriba). */
[data-skin="neobrutal-night"] .poi-panel__tabs-row {
  gap: 4px;
  padding-bottom: 0;
  border-bottom: 3px solid var(--poi-panel-accent);
}
[data-skin="neobrutal-night"] .poi-panel__tab-btn {
  flex: 1;
  border: 2px solid var(--poi-panel-slate-300);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 0.5rem 0.7rem;
}
[data-skin="neobrutal-night"] .poi-panel__tab-btn.on {
  border-color: var(--poi-panel-accent);
}

/* --------------------------------------------------------------------
   [A7b, 19/10/2026] AVISO, HORARIOS Y BOTONES DE CONTACTO
   - .poi-panel__aviso: franja destacada arriba de todo (js/poi-panel.js →
     _renderAviso). Colores propios (ámbar), legibles en cualquier tema.
   - .poi-panel__contacto / .poi-panel__horarios: bloque de horarios + fila
     de botones; solo existe si hay algún dato (_renderContacto).
   - .cl-fila / .cl-btn: fila de botones, la arma ContactoLugar.crearFila y la
     usan el panel del lugar Y la vista ampliada del evento.
   -------------------------------------------------------------------- */
.poi-panel__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.4rem 0 0.5rem; /* arranca debajo de la cruz de cierre */
  padding: 0.6rem 1.5rem;
  background: #fef3c7;
  border-top: 1px solid #f59e0b;
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
}
.poi-panel__aviso[hidden] { display: none; }
.poi-panel__aviso-ico { flex: 0 0 auto; }
.poi-panel__aviso-txt { min-width: 0; overflow-wrap: anywhere; }

.poi-panel__contacto {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--poi-panel-slate-200);
}
.poi-panel__contacto[hidden],
.poi-panel__horarios[hidden] { display: none; }
.poi-panel__horarios { margin-bottom: 0.9rem; }

.cl-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--poi-panel-gray-200);
  color: var(--poi-panel-slate-900);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  min-height: 2.5rem; /* zona de toque cómoda en celular */
  -webkit-tap-highlight-color: transparent;
}
.cl-btn:hover,
.cl-btn:focus-visible { background: var(--poi-panel-slate-300); }
.cl-btn:active { transform: scale(0.97); }
.cl-btn--como_llegar {
  background: var(--poi-panel-accent);
  color: #fff;
}
.cl-btn--como_llegar:hover,
.cl-btn--como_llegar:focus-visible { background: var(--poi-panel-accent-hover); }
.cl-btn__ico { font-size: 1rem; }

/* En la vista ampliada del evento la fila va dentro de una sección propia. */
.evento-detalle__contacto-fila { margin-top: 0.75rem; }
/* Tema nocturno: el acento es amarillo, el texto del botón va oscuro para que se lea. */
[data-skin="neobrutal-night"] .cl-btn--como_llegar { color: #18181b; }