/*
================================================================================
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.
================================================================================
F81 — Design System Premium · RESPONSIVE.

Regla de la fase (auditoría §6): la referencia `1.png` es un layout de escritorio,
pero el sistema es MOBILE-FIRST y no puede perderlo. Escalones:

  ≥1280px  shell completo: sidebar + principal + riel derecho
  <1280px  el riel se desarma y sus tarjetas bajan al flujo principal
  <1024px  el sidebar se vuelve DRAWER con hamburguesa (patrón que el Portal
           Municipal ya usa); el lienzo ocupa todo el ancho
   <768px  una sola columna, padding chico, filtros en carrusel horizontal
   <390px  tipografía y FAB compactos
    TV     `.eco-tv` fuerza 16:9 y escala de proyección

Cargar SIEMPRE después de layouts + componentes.
*/

/* ========================================================================== */
/* < 1280px — el riel derecho baja al flujo                                    */
/* ========================================================================== */
@media (max-width: 1279.98px) {
  .eco-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .eco-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }
}

/* ========================================================================== */
/* < 1024px — sidebar → drawer                                                 */
/* ========================================================================== */
@media (max-width: 1023.98px) {
  .eco-shell {
    grid-template-columns: minmax(0, 1fr);
    background: var(--eco-bg);
  }
  .eco-shell__canvas {
    border-radius: 0;
  }
  .eco-shell__aside {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, var(--eco-aside-w));
    transform: translateX(-100%);
    transition: transform var(--eco-t-slow) var(--eco-ease);
    box-shadow: var(--eco-shadow-lg);
  }
  .eco-shell--drawer-open .eco-shell__aside { transform: none; }
  .eco-topbar__burger { display: inline-flex; }
  .eco-aside__toggle { display: none; }   /* en drawer se cierra con el scrim */
  .eco-topbar { padding-inline: var(--eco-s4); }
  .eco-modhead,
  .eco-filtercards,
  .eco-filterbar { padding-inline: var(--eco-s4); }
  .eco-content,
  .eco-strip { padding-inline: var(--eco-s4); }
  .eco-shell--collapsed { grid-template-columns: minmax(0, 1fr); }
}

/* En escritorio el drawer nunca queda "abierto" por un estado viejo. */
@media (min-width: 1024px) {
  .eco-scrim { display: none; }
}

/* ========================================================================== */
/* < 768px — una columna                                                       */
/* ========================================================================== */
@media (max-width: 767.98px) {
  .eco-modhead {
    flex-wrap: wrap;
    padding-bottom: var(--eco-s4);
  }
  .eco-modhead__actions { width: 100%; }
  .eco-modhead__title { font-size: var(--eco-fs-xl); }

  /* Los filtros pasan a carrusel horizontal: siguen siendo tarjetas, no chips. */
  .eco-filtercards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--eco-s3);
  }
  .eco-filtercards::-webkit-scrollbar { display: none; }
  .eco-filtercard {
    flex: 0 0 auto;
    min-width: 168px;
    scroll-snap-align: start;
  }

  .eco-filterbar { gap: var(--eco-s2); }
  .eco-filterbar .eco-select { flex: 1 1 140px; min-width: 0; }
  .eco-search { flex: 1 1 100%; }

  .eco-rail { grid-template-columns: minmax(0, 1fr); }
  .eco-grid--2, .eco-grid--3, .eco-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .eco-kpigrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .eco-mapcard__map { height: clamp(300px, 46vh, 460px); }
  .eco-legend {
    left: var(--eco-s3);
    right: var(--eco-s3);
    bottom: var(--eco-s3);
    max-width: none;
    gap: var(--eco-s3);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .eco-legend::-webkit-scrollbar { display: none; }
  .eco-mapcard__cta { display: none; }   /* la leyenda ya está visible */

  .eco-carousel__nav { display: none; }  /* en touch se desliza con el dedo */
  .eco-hero { padding: var(--eco-s5) var(--eco-s4); }
  .eco-modal__box { padding: var(--eco-s4); }
  .eco-toasts { left: var(--eco-s3); right: var(--eco-s3); max-width: none; }
}

/* ========================================================================== */
/* < 390px — compacto                                                          */
/* ========================================================================== */
@media (max-width: 389.98px) {
  .eco-modhead__title { font-size: var(--eco-fs-lg); }
  .eco-kpi__valor { font-size: var(--eco-fs-xl); }
  .eco-sos { width: 68px; height: 68px; right: var(--eco-s3); bottom: var(--eco-s3); }
  .eco-sos__label { font-size: 13px; }
  .eco-sos__sub { display: none; }
  .eco-filtercard { min-width: 152px; }
}

/* ========================================================================== */
/* Sala de espera / TV — 16:9, legible a 6 metros                              */
/* ========================================================================== */
.eco-tv {
  --eco-tv-unit: min(1vw, 1.78vh);   /* unidad estable en 16:9 y en 4:3 */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30%;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(var(--eco-tv-unit) * 1.6);
  padding: calc(var(--eco-tv-unit) * 2);
  background: var(--eco-bg);
  color: var(--eco-ink);
}
.eco-tv__main   { grid-column: 1; grid-row: 1; min-width: 0; }
.eco-tv__rail   { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; }
.eco-tv__banner { grid-column: 1 / -1; grid-row: 2; }   /* nunca tapa el turno */
.eco-tv__turno {
  font-family: var(--eco-font-display);
  font-size: calc(var(--eco-tv-unit) * 15);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.eco-tv__ventanilla {
  font-size: calc(var(--eco-tv-unit) * 5);
  font-weight: 700;
  color: var(--eco-ok);
}
.eco-tv__label {
  font-size: calc(var(--eco-tv-unit) * 2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eco-muted);
}

/* ========================================================================== */
/* Impresión — el sistema emite comprobantes; que no salgan con el shell        */
/* ========================================================================== */
@media print {
  .eco-shell__aside,
  .eco-topbar,
  .eco-sos,
  .eco-toasts,
  .eco-carousel__nav,
  .eco-mapctl,
  .eco-mapcard__cta { display: none !important; }
  .eco-shell { display: block; background: #fff; }
  .eco-shell__canvas { border-radius: 0; }
  .eco-content { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .eco-card, .eco-tablewrap { box-shadow: none; break-inside: avoid; }
}