/* =====================================================================
   Plano Interactivo — Bienal del Chaco 2026
   Mobile-first · Todo editable desde las variables de :root
   ===================================================================== */

:root{
  /* ---- Paleta institucional (editá acá) ---- */
  --color-primary:   #e52a1c;
  --color-primary-2: #C62E23;
  --color-ink:       #1c1c1c;
  --color-muted:     #6b6b6b;
  --color-surface:   #ffffff;
  --color-surface-2: #f5f5f5;
  --color-line:      #ececec;
  --color-locate:    #1a73e8;   /* punto azul de ubicación */

  /* ---- Formas y sombras ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.10);
  --shadow-2: 0 6px 24px rgba(0,0,0,.16);
  --shadow-3: 0 12px 40px rgba(0,0,0,.22);

  /* ---- Medidas ---- */
  --tap: 48px;                  /* área táctil mínima (accesibilidad) */
  --gap: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Tipografía ---- */
  --font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font);
  color:var(--color-ink);
  background:var(--color-surface-2);
  overscroll-behavior:none;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---------- Layout raíz ---------- */
.app{ position:fixed; inset:0; overflow:hidden; }

/* ---------- Mapa ---------- */
.map{ position:absolute; inset:0; background:#e9ecee; z-index:1;
  overflow:hidden; touch-action:none; cursor:grab; }
.map:active{ cursor:grabbing; }

/* escenario: contiene las dos ilustraciones (color / byn) */
.stage{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.base{ position:absolute; top:0; left:0; display:block; user-select:none;
  -webkit-user-drag:none; pointer-events:none; }
.base--byn{ opacity:0; transition:opacity .35s var(--ease); }

/* capa de dibujo (ruta + precisión) en coordenadas de pantalla */
.ov{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.acc{ fill:var(--color-locate); fill-opacity:.12; stroke:var(--color-locate); stroke-width:1; }

/* capa de pines */
.pins{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.pin-wrap{ position:absolute; top:0; left:0; pointer-events:auto; cursor:pointer;
  margin-left:-20px; margin-top:-40px; will-change:transform; }
.pins.is-edit .pin-wrap{ cursor:grab; touch-action:none; }
.pins.is-edit .pin-wrap:active{ cursor:grabbing; }

/* ---------- Barra superior / buscador ---------- */
.topbar{
  position:absolute; z-index:30;
  top:calc(var(--safe-top) + var(--gap)); left:var(--gap); right:var(--gap);
}
.searchbox{
  display:flex; align-items:center; gap:8px;
  height:52px; padding:0 14px;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);
}
.searchbox__icon{ width:20px; height:20px; flex:0 0 auto; fill:none;
  stroke:var(--color-muted); stroke-width:2; stroke-linecap:round; }
.searchbox__input{
  flex:1 1 auto; border:none; outline:none; background:none;
  font-size:16px; color:var(--color-ink);
}
.searchbox__input::placeholder{ color:var(--color-muted); }
.searchbox__clear{
  width:28px; height:28px; border-radius:50%;
  font-size:22px; line-height:1; color:var(--color-muted);
  background:var(--color-surface-2);
}

/* resultados de búsqueda */
.search-results{
  list-style:none; margin:8px 0 0; padding:6px;
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
  max-height:46vh; overflow:auto;
}
.search-results li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  min-height:var(--tap);
}
.search-results li:hover,.search-results li:focus{ background:var(--color-surface-2); }
.search-results .r-emoji{ font-size:20px; }
.search-results .r-name{ font-weight:700; }
.search-results .r-cat{ margin-left:auto; font-size:12px; color:var(--color-muted); }

/* ---------- Chips de filtro ---------- */
.filters{
  position:absolute; z-index:20;
  top:calc(var(--safe-top) + 74px); left:0; right:0;
  display:flex; gap:8px; padding:2px var(--gap) 8px;
  background:transparent;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 26px),transparent 100%);
}
.filters::-webkit-scrollbar{ display:none; }
.filters::after{ content:""; flex:0 0 8px; }

.chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 13px 0 5px;
  background:var(--color-surface);
  border-radius:999px; box-shadow:var(--shadow-2);
  font-size:13.5px; font-weight:700; color:var(--color-ink);
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:active{ transform:scale(.95); }
.chip:active{ transform:scale(.96); }
.chip[aria-pressed="true"]{
  background:var(--color-primary); color:#fff;
}

/* ---------- Botones flotantes (FAB) ---------- */
.fab-stack{
  position:absolute; z-index:25;
  display:flex; flex-direction:column; gap:10px;
}
.fab-stack--right{ right:var(--gap); bottom:calc(var(--safe-bottom) + 120px); }
.fab{
  width:var(--tap); height:var(--tap);
  display:grid; place-items:center;
  background:var(--color-surface);
  border-radius:16px;
  box-shadow:var(--shadow-2);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fab:active{ transform:scale(.92); }
.fab svg{ width:22px; height:22px; fill:none; stroke:var(--color-ink);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fab--primary{ background:var(--color-primary); }
.fab--primary svg{ stroke:#fff; }
.fab--primary.is-active{ background:var(--color-locate); }

/* ---------- Punto de ubicación ---------- */
.me-dot{
  position:absolute; z-index:5; top:0; left:0; margin:-9px 0 0 -9px;
  pointer-events:none; will-change:transform;
  width:18px; height:18px; border-radius:50%;
  background:var(--color-locate);
  border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.me-dot::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  background:var(--color-locate); opacity:.28;
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{ 0%{transform:scale(.6);opacity:.35} 70%{transform:scale(1.6);opacity:0} 100%{opacity:0} }

/* ---------- Marcadores ---------- */
.pin{
  width:40px; height:40px; position:relative;
  transform:translateY(-4px);
  transition:transform var(--dur) var(--ease);
}
.pin:hover{ transform:translateY(-8px) scale(1.05); }
.pin__body{
  width:40px; height:40px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--_c,var(--color-primary));
  box-shadow:var(--shadow-2);
  display:grid; place-items:center;
}
.pin__emoji{ transform:rotate(45deg); font-size:19px; line-height:1; }

/* ---------- Bottom sheet ---------- */
.sheet{
  position:absolute; z-index:40; left:0; right:0; bottom:0;
  background:var(--color-surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-3);
  transform:translateY(100%);
  transition:transform var(--dur) var(--ease);
  max-height:88vh;
  display:flex; flex-direction:column;
  padding-bottom:var(--safe-bottom);
}
.sheet.is-open{ transform:translateY(calc(100% - var(--sheet-peek,300px))); }
.sheet.is-expanded{ transform:translateY(0); }
.sheet__handle{
  width:44px; height:5px; border-radius:999px;
  background:#d8d8d8; margin:10px auto 4px;
}
.sheet__scroll{ overflow:auto; -webkit-overflow-scrolling:touch; }
.sheet__media{ padding:0 16px; }
.sheet__img{
  width:100%; height:170px; object-fit:cover;
  border-radius:var(--radius-md); background:var(--color-surface-2);
}
.sheet__body{ padding:14px 18px 22px; }
.sheet__cat{
  display:inline-block; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-primary);
}
.sheet__title{ margin:6px 0 2px; font-size:22px; font-weight:800; }
.sheet__hours{ margin:0 0 10px; font-size:13px; color:var(--color-muted); }
.sheet__desc{ margin:0 0 16px; font-size:15px; line-height:1.5; color:#333; }
.sheet__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.sheet__actions .btn{ flex:1 1 0; }
.btn--full{ width:100%; margin-top:10px; }
.sheet__close{
  position:absolute; top:12px; right:14px;
  width:34px; height:34px; border-radius:50%;
  font-size:24px; line-height:1; color:var(--color-muted);
  background:var(--color-surface-2);
}

/* botones de acción */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:0 18px;
  border-radius:14px; font-size:15px; font-weight:800;
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  text-decoration:none;
}
.btn:active{ transform:scale(.97); }
.btn--primary{ background:var(--color-primary); color:#fff; flex:1 1 auto; }
.btn--primary:hover{ filter:brightness(.95); }
.btn--ghost{ background:var(--color-surface-2); color:var(--color-ink); }

/* info de ruta */
.route-info{
  margin-top:14px; padding:12px 14px;
  background:var(--color-surface-2); border-radius:var(--radius-sm);
  font-size:14px; display:flex; align-items:center; gap:10px;
}
.route-info b{ color:var(--color-primary); font-size:16px; }

/* línea de ruta punteada */
.route-line{ fill:none; stroke:var(--color-primary); stroke-width:4;
  stroke-dasharray:2 12; stroke-linecap:round; }

/* ---------- Toast ---------- */
.toast{
  position:absolute; z-index:60; left:50%; bottom:calc(var(--safe-bottom) + 24px);
  transform:translateX(-50%) translateY(20px);
  max-width:88%; padding:12px 18px;
  background:var(--color-ink); color:#fff;
  border-radius:999px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-2);
  opacity:0; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none; text-align:center;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =====================================================================
   TABLET / ESCRITORIO
   ===================================================================== */
@media (min-width:768px){
  .topbar{ left:auto; right:auto; width:380px; top:calc(var(--safe-top) + 18px); left:18px; }
  /* Escritorio: columna a la izquierda con scroll propio */
  .filters{
    top:calc(var(--safe-top) + 84px); left:18px; right:auto;
    width:330px; padding:4px 6px 10px 0;
    flex-wrap:wrap; align-content:flex-start; gap:7px;
    max-height:calc(100vh - 210px);
    overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.3) transparent;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);
  }
  .filters::-webkit-scrollbar{ display:block; width:6px; }
  .filters::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); border-radius:99px; }
  .filters::after{ display:none; }
  .fab-stack--right{ right:24px; bottom:36px; }
  .sheet{
    left:18px; right:auto; bottom:18px;
    width:400px; border-radius:var(--radius-lg);
    max-height:calc(100vh - 36px);
    transform:translateY(0) translateX(-460px);
    opacity:0; pointer-events:none;
  }
  .sheet.is-open,.sheet.is-expanded{
    transform:translateY(0) translateX(0); opacity:1; pointer-events:auto;
  }
  .sheet__handle{ display:none; }
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}


/* ---------- Brújula ---------- */
.fab--compass .needle{
  display:block; width:22px; height:22px; position:relative;
  transition:transform .12s linear;
}
.fab--compass .needle::before,
.fab--compass .needle::after{
  content:""; position:absolute; left:50%; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  transform:translateX(-50%);
}
.fab--compass .needle::before{ top:0; border-bottom:11px solid var(--color-primary); }
.fab--compass .needle::after{ bottom:0; border-top:11px solid #c9c9c9; }

/* FAB activo (ubicación) */
.fab.is-on{ background:var(--color-locate); }
.fab.is-on svg{ stroke:#fff; }


/* ---------- Zonas (manchas por categoría) ---------- */
.zones{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.zone{
  fill-opacity:.75; stroke-width:2; stroke-opacity:.95;
  vector-effect:non-scaling-stroke;
  transition:fill-opacity .3s var(--ease), stroke-opacity .3s var(--ease);
}
.zone.is-dim{ fill-opacity:.4; stroke-opacity:.5; }


/* ---------- Badges (círculo con el código de referencia) ---------- */
.badge{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--_b,var(--color-primary)); color:#111;
  font-size:10px; font-weight:800; letter-spacing:-.02em;
  border:1.5px solid rgba(0,0,0,.28);
}
.pin__code{
  transform:rotate(45deg); font-size:13px; font-weight:800;
  color:#111; letter-spacing:-.03em; line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.pin__body{ border:2px solid rgba(255,255,255,.9); }
.search-results li{ gap:12px; }

.chip__t{ white-space:nowrap; }
.chip:hover{ background:#fafafa; }
.chip[aria-pressed="true"]{ background:var(--color-primary); color:#fff; }
.chip[aria-pressed="true"] .badge{ border-color:rgba(255,255,255,.6); }



/* ---------- Badges con iconito (emoji) ---------- */
.badge--icon{
  font-size:13px; line-height:1;
  background:#fff !important; border-color:rgba(0,0,0,.18);
}
.pin__code--icon{ font-size:17px; text-shadow:none; }

/* ---------- Escritorio: chips casi transparentes para no tapar el plano ---------- */
@media (min-width:768px){
  .filters{ padding-top:4px; }
  .chip{
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 2px 8px rgba(0,0,0,.14);
    color:#1c1c1c;
  }
  .chip .badge{ opacity:1; }
  .chip:hover{ background:#fff; box-shadow:var(--shadow-2); }
  .chip[aria-pressed="true"]{
    background:var(--color-primary); color:#fff; box-shadow:var(--shadow-2);
  }
  .chip[aria-pressed="true"] .badge{ opacity:1; }
}

/* zonas nuevas editables */
.zone--new{ pointer-events:auto; cursor:grab; fill-opacity:.6; stroke-width:2.5; stroke-dasharray:4 3; }
.zone--new:active{ cursor:grabbing; }
.zone--new.is-sel{ fill-opacity:.7; stroke-width:3; stroke-dasharray:none; }

/* tiradores de edición de zona */
.zhandle{ position:absolute; top:0; left:0; z-index:6; width:20px; height:20px;
  margin:-10px 0 0 -10px; border-radius:50%; background:#fff;
  border:2px solid var(--color-primary); box-shadow:0 1px 4px rgba(0,0,0,.3);
  cursor:pointer; touch-action:none; display:none; }
.zhandle.zh-se{ border-radius:4px; }
.zhandle.zh-rot{ border-color:#16a34a; }
.zhandle.zh-e::after,.zhandle.zh-s::after{ content:""; }