/*
================================================================================
Sistema: Ecovía Comechingones (Smart City & Tourism)
Creador y Desarrollador: Silvio Deandrea
Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
================================================================================
Estilos personalizados sobre Tailwind (cargado vía CDN).
Mantenemos esto liviano y sin reglas pesadas para preservar el TTI mobile.
*/

:root {
  color-scheme: light;
  --color-primary: #0f766e;
  --color-primary-fg: #ffffff;
}

html, body { height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* F44 — papel cálido (identidad "Sierra Comechingona"): reemplaza el stone-50 frío. */
body { background: #f7f5f0; }

/* F44.2 — Fraunces self-hosteada (variable, subset latino cubre ES/EN/PT).
   Sin CDN (respeta la CSP) y precacheada en el SW para no romper el offline. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/turismo/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Títulos con carácter; el cuerpo sigue en sans del sistema (performance). */
.font-display,
header h1,
#view h2,
#view h3 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-optical-sizing: auto; }

/* Barra inferior — F44.8: ícono + label EN LÍNEA (horizontal) en una fila que se
   DESLIZA (overflow-x). Entran las 7 pestañas con texto completo (sin recorte): en
   celular se hace scroll horizontal; en pantallas anchas las tabs llenan el ancho. */
.tab-bar        { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar > li   { flex: 1 0 auto; }
.tab            { display: flex; width: 100%; flex-direction: row; align-items: center; justify-content: center; gap: .35rem; padding: .7rem .55rem; min-width: 4.25rem; color: #78716c; white-space: nowrap; }
.tab-ico        { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.tab-lbl        { font-size: .68rem; line-height: 1.1; white-space: nowrap; }
.tab.is-active  { color: var(--color-primary); font-weight: 600; }
.tab.is-active .tab-ico { transform: scale(1.06); }

/* F44.3 — microinteracciones (sin quitar foco por teclado; respetan reduce-motion) */
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }
.pueblo-card { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .tab, .tab-ico { transition: color .15s ease, transform .15s ease; }
  .pueblo-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .pueblo-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: 0 10px 24px -12px rgba(15, 61, 52, .35); }
  .pueblo-card:active { transform: translateY(0) scale(.99); }
}

/* Burbujas del WebChat */
.bubble        { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.35; white-space: pre-wrap; }
.bubble-user   { background: #e7e5e4; align-self: flex-end; }
.bubble-ai     { background: #ccfbf1; align-self: flex-start; color: #134e4a; }
.bubble-system { background: #fef3c7; align-self: center; color: #78350f; font-size: 0.75rem; }

/* Acordeón */
details.accordion summary { cursor: pointer; list-style: none; }
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion[open] > summary .chevron { transform: rotate(180deg); }
details.accordion .chevron { transition: transform 0.15s ease; }

/* Slot del turnero */
.slot              { padding: 0.4rem 0.25rem; border-radius: 0.5rem; text-align: center; font-size: 0.8rem; border: 1px solid #e7e5e4; }
.slot.is-libre     { background: #ffffff; cursor: pointer; }
.slot.is-libre:hover { border-color: var(--color-primary); }
.slot.is-libre.is-sel { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.slot.is-bloqueado { background: #f5f5f4; color: #a8a29e; text-decoration: line-through; cursor: not-allowed; }

/* Niveles de alerta */
.alerta-rojo     { background: #dc2626; }
.alerta-amarillo { background: #f59e0b; }
.alerta-verde    { background: #16a34a; }

/* F20C.2 — Chips de filtro de capas del Mapa Vivo
   F45 — tonos cálidos (papel) para hermanar con la identidad "Sierra Comechingona". */
.mapa-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 9999px; border: 1px solid #e7e2d8; background: #fff; color: #78716c; cursor: pointer; }
.mapa-chip.is-on { border-color: var(--c); color: #1c1917; background: #f7f5f0; font-weight: 600; }
.mapa-dot { width: .6rem; height: .6rem; border-radius: 9999px; display: inline-block; opacity: .35; }
.mapa-chip.is-on .mapa-dot { opacity: 1; }
/* Popups de Leaflet un poco más anchos en mobile */
.leaflet-popup-content { min-width: 180px; margin: .6rem .8rem; }
/* F45 — título del popup en Fraunces para unificar con el resto del portal */
.leaflet-popup-content strong { font-family: 'Fraunces', ui-serif, Georgia, serif; }

/* ==========================================================================
   F81 · Etapa C — Portal Turismo sobre el Design System Premium.
   Solo layout del shell: ninguna vista cambia de comportamiento acá.
   ========================================================================== */

/* En mobile mandan la tab-bar y el header de siempre: el sidebar es de
   escritorio. Sin hamburguesa duplicando lo que la tab-bar ya ofrece. */
@media (max-width: 1023.98px) {
  .eco-shell__aside,
  .eco-topbar__burger,
  .eco-scrim { display: none !important; }
}

@media (min-width: 1024px) {
  /* El sidebar ya lleva la marca: la topbar se queda solo con contexto e idioma. */
  .eco-topbar__marca { display: none; }

  /* El lienzo respira a todo el ancho; sin tab-bar no hace falta el colchón. */
  #view {
    max-width: none;
    padding: 0 var(--eco-s6) var(--eco-s7);
  }
  /* La tab-bar inferior y su colchón desaparecen: navega el sidebar. */
  body > nav.fixed { display: none; }

  /* El FAB de emergencias sube al lugar del canon (abajo a la derecha). */
  #sos-fab { bottom: var(--eco-s5); right: var(--eco-s5); }
  #webchat-toggle { bottom: calc(var(--eco-s5) + 96px); right: var(--eco-s5); }
}

/* El SOS es seguridad de vida (regla dura #9): mismo botón de siempre, con el
   acabado premium y la etiqueta textual del canon. No cambia su handler. */
#sos-fab {
  width: 84px;
  height: 84px;
  padding: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .9);
  background: linear-gradient(150deg, var(--eco-rose) 0%, var(--eco-red-2) 100%);
  box-shadow: 0 10px 26px rgba(220, 38, 38, .38);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  transition: transform var(--eco-t) var(--eco-ease);
}
#sos-fab:hover { transform: scale(1.04); }
#sos-fab::after {
  content: 'Emergencias';
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .92;
}
@media (prefers-reduced-motion: reduce) { #sos-fab:hover { transform: none; } }

/* --------------------------------------------------------------------------
   F81 · C.2 — Mapa Vivo dentro de `#view`.
   `#view` ya trae su propio padding en mobile: los bloques premium no deben
   sumar el suyo o el contenido queda con doble margen.
   -------------------------------------------------------------------------- */
/* Los bloques premium heredan el padding horizontal de `#view` (que ya lo tiene
   en mobile y lo recibe en escritorio): si además pusieran el suyo, doble margen. */
#view .eco-modhead,
#view .eco-filtercards,
#view .eco-filterbar,
#view .eco-content,
#view .eco-strip { padding-left: 0; padding-right: 0; }

/* Los controles nativos de Leaflet adoptan la cápsula flotante del canon.
   Se estiliza el control que YA existe: no se reemplaza su comportamiento. */
.eco-mapcard .leaflet-control-zoom {
  border: 0;
  border-radius: var(--eco-radius-md);
  box-shadow: var(--eco-shadow-md);
  overflow: hidden;
}
.eco-mapcard .leaflet-control-zoom a {
  width: 38px;
  height: 38px;
  line-height: 38px;
  color: var(--eco-ink-2);
  background: var(--eco-surface);
  border-bottom-color: var(--eco-border);
}
.eco-mapcard .leaflet-control-zoom a:hover { background: var(--eco-surface-soft); }
.eco-mapcard .leaflet-control-attribution {
  border-radius: var(--eco-radius-sm) 0 0 0;
  font-size: 10px;
}
/* La leyenda flotante vive sobre los panes de Leaflet. */
.eco-mapcard .eco-legend,
.eco-mapcard .eco-mapcard__cta { z-index: 500; }