/*
================================================================================
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 · LAYOUTS.

Anatomía de shell extraída de `actualizar/1.png`:
    [ sidebar oscuro 300px ][ lienzo claro con esquina sup-izq redondeada ]
    y dentro del lienzo:  [ principal 1fr ][ riel derecho 312px ]
                          [ franja inferior a todo el ancho          ]

Depende SOLO de `ecovia-tokens.css`. CSS puro, sin Tailwind: lo puede cargar
`cola.html` igual que los 6 portales. No pisa ninguna clase existente
(`.dep-hero`, `.kpi-card`, `.nav-link`, `table.dyn`… siguen intactas).
El comportamiento responsive vive en `ecovia-responsive.css`.
*/

/* ========================================================================== */
/* 1. AppShellPremium                                                          */
/* ========================================================================== */

.eco-shell {
  display: grid;
  grid-template-columns: var(--eco-aside-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--eco-navy);
  color: var(--eco-ink);
  font-family: var(--eco-font-sans);
}

/* El lienzo claro monta su esquina sobre el sidebar: detalle "app", no "web". */
.eco-shell__canvas {
  position: relative;
  min-width: 0;
  background: var(--eco-bg);
  border-top-left-radius: var(--eco-radius-xl);
  border-bottom-left-radius: var(--eco-radius-xl);
  overflow: clip;
}

/* Textura de curvas de nivel: solo en superficies grandes, opacidad ≤ .06. */
.eco-topo::before,
.eco-shell__aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--eco-topo-url);
  background-size: 600px auto;
  opacity: var(--eco-topo-opacity);
  pointer-events: none;
}
.eco-topo { position: relative; }

/* ========================================================================== */
/* 2. SidebarPremium                                                           */
/* ========================================================================== */

.eco-shell__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--eco-s5);
  padding: var(--eco-s5) var(--eco-s4) var(--eco-s4);
  background: linear-gradient(180deg, var(--eco-navy) 0%, var(--eco-navy-2) 100%);
  color: var(--eco-on-dark);
  overflow-y: auto;
  z-index: var(--eco-z-aside);
}
.eco-shell__aside > * { position: relative; z-index: 1; }

/* --- marca ---------------------------------------------------------------- */
.eco-brand {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  padding: var(--eco-s2) var(--eco-s2) 0;
  color: inherit;
  text-decoration: none;
}
.eco-brand__mark {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--eco-radius-pill);
  background: #fff;
  overflow: hidden;
}
.eco-brand__mark img,
.eco-brand__mark svg { width: 100%; height: 100%; object-fit: cover; }
.eco-brand__text { min-width: 0; }
.eco-brand__name {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-md);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
  color: #fff;
}
.eco-brand__tag {
  display: block;
  margin-top: 3px;
  font-size: var(--eco-fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eco-on-dark-2);
}

/* --- navegación (ítem de 2 líneas) ---------------------------------------- */
.eco-nav { display: flex; flex-direction: column; gap: 2px; }
.eco-nav__section {
  margin: var(--eco-s4) var(--eco-s3) var(--eco-s1);
  font-size: var(--eco-fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eco-on-dark-2);
}
.eco-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  padding: var(--eco-s3) var(--eco-s3);
  border-radius: var(--eco-radius-md);
  color: var(--eco-on-dark);
  text-decoration: none;
  transition: background var(--eco-t) var(--eco-ease),
              color var(--eco-t) var(--eco-ease);
}
.eco-nav__item:hover { background: rgba(255, 255, 255, .06); }
.eco-nav__item:focus-visible {
  outline: 2px solid var(--eco-teal-2);
  outline-offset: 2px;
}
.eco-nav__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--eco-lime);
}
.eco-nav__text { min-width: 0; flex: 1 1 auto; }
.eco-nav__label { display: block; font-size: var(--eco-fs-base); font-weight: 600; line-height: 1.2; }
.eco-nav__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--eco-fs-xs);
  font-weight: 400;
  color: var(--eco-on-dark-2);
}
.eco-nav__badge {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-rose);
  color: #fff;
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Activo: píldora rellena + barra de acento a la izquierda. */
.eco-nav__item--active,
.eco-nav__item[aria-current='page'] {
  background: var(--eco-teal-deep);
  color: #fff;
}
.eco-nav__item--active::before,
.eco-nav__item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 60%;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: var(--eco-lime);
}
.eco-nav__item--active .eco-nav__icon,
.eco-nav__item[aria-current='page'] .eco-nav__icon { color: #fff; }
.eco-nav__item--active .eco-nav__sub,
.eco-nav__item[aria-current='page'] .eco-nav__sub { color: rgba(255, 255, 255, .72); }

/* --- widget de contexto embebido al pie (clima, estado, lo que sea) -------- */
.eco-aside-widget {
  margin-top: auto;
  padding: var(--eco-s4);
  border: 1px solid var(--eco-border-dark);
  border-radius: var(--eco-radius-lg);
  background: rgba(255, 255, 255, .04);
}
.eco-aside-widget__row {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
}
.eco-aside-widget__big {
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-xl);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.eco-aside-widget__label { font-size: var(--eco-fs-sm); color: #fff; font-weight: 600; }
.eco-aside-widget__meta { font-size: var(--eco-fs-xs); color: var(--eco-on-dark-2); }
.eco-aside-widget__foot {
  margin-top: var(--eco-s3);
  padding-top: var(--eco-s3);
  border-top: 1px solid var(--eco-border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eco-s2);
  font-size: var(--eco-fs-xs);
  color: var(--eco-on-dark-2);
}
.eco-aside-widget__link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--eco-lime);
  text-decoration: none;
  font-size: var(--eco-fs-xs);
}
.eco-aside-widget__link:hover { text-decoration: underline; }

/* --- sello institucional (white-label F51: puede no venir) ----------------- */
.eco-aside__seal {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  padding: 0 var(--eco-s2);
  color: var(--eco-on-dark-2);
  font-size: var(--eco-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eco-aside__seal img { height: 38px; width: auto; opacity: .9; }

.eco-aside__toggle {
  display: flex;
  align-items: center;
  gap: var(--eco-s2);
  width: 100%;
  padding: var(--eco-s3);
  margin-top: var(--eco-s2);
  border: 0;
  border-top: 1px solid var(--eco-border-dark);
  border-radius: 0;
  background: none;
  color: var(--eco-on-dark-2);
  font: inherit;
  font-size: var(--eco-fs-sm);
  cursor: pointer;
}
.eco-aside__toggle:hover { color: #fff; }

/* Sidebar colapsado en escritorio (el "Ocultar menú" de la referencia). */
.eco-shell--collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.eco-shell--collapsed .eco-brand__text,
.eco-shell--collapsed .eco-nav__text,
.eco-shell--collapsed .eco-aside-widget,
.eco-shell--collapsed .eco-aside__seal span,
.eco-shell--collapsed .eco-aside__toggle span { display: none; }
.eco-shell--collapsed .eco-nav__item { justify-content: center; padding-inline: 0; }

/* ========================================================================== */
/* 3. TopbarPremium                                                            */
/* ========================================================================== */

.eco-topbar {
  position: sticky;
  top: 0;
  z-index: var(--eco-z-rail);
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  min-height: var(--eco-topbar-h);
  padding: var(--eco-s3) var(--eco-s6);
  background: color-mix(in srgb, var(--eco-bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.eco-topbar__spacer { flex: 1 1 auto; }
.eco-topbar__burger {
  display: none;            /* aparece <1024px (ver responsive) */
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  color: var(--eco-ink);
  cursor: pointer;
}

/* ========================================================================== */
/* 4. ModuleHeader                                                             */
/* ========================================================================== */

.eco-modhead {
  display: flex;
  align-items: flex-start;
  gap: var(--eco-s4);
  padding: var(--eco-s2) var(--eco-s6) var(--eco-s5);
}
.eco-modhead__bar {
  flex: 0 0 auto;
  width: 5px;
  align-self: stretch;
  min-height: 46px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-teal);
}
.eco-modhead__body { flex: 1 1 0; min-width: 0; }
.eco-modhead__title {
  margin: 0;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--eco-ink);
}
.eco-modhead__sub {
  margin: 6px 0 0;
  font-size: var(--eco-fs-base);
  color: var(--eco-muted);
}
.eco-modhead__actions {
  display: flex;
  align-items: center;
  gap: var(--eco-s2);
  flex-wrap: wrap;
}

/* ========================================================================== */
/* 5. PortalHero — para los portales sin sidebar (Vecino, Transparencia)       */
/* ========================================================================== */

.eco-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--eco-s5);
  flex-wrap: wrap;
  padding: var(--eco-s6);
  border-radius: var(--eco-radius-lg);
  background: linear-gradient(135deg, var(--eco-navy) 0%, var(--eco-teal-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.eco-hero__body { flex: 1 1 320px; min-width: 0; position: relative; z-index: 1; }
.eco-hero__eyebrow {
  font-size: var(--eco-fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eco-lime);
}
.eco-hero__title {
  margin: 6px 0 0;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-xl);
  font-weight: 700;
  line-height: 1.15;
}
.eco-hero__sub { margin: 8px 0 0; color: rgba(255, 255, 255, .78); font-size: var(--eco-fs-base); }
.eco-hero__aside { flex: 0 0 auto; position: relative; z-index: 1; }

/* ========================================================================== */
/* 6. Cuerpo: principal + riel derecho + franja inferior                       */
/* ========================================================================== */

.eco-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--eco-rail-w);
  gap: var(--eco-s5);
  align-items: start;
  padding: 0 var(--eco-s6) var(--eco-s6);
}
.eco-content--full { grid-template-columns: minmax(0, 1fr); }
.eco-main { min-width: 0; display: flex; flex-direction: column; gap: var(--eco-s4); }
.eco-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eco-s4);
  position: sticky;
  top: calc(var(--eco-topbar-h) + var(--eco-s3));
}
.eco-strip { padding: 0 var(--eco-s6) var(--eco-s7); }

/* Grillas auxiliares reutilizables. */
.eco-grid { display: grid; gap: var(--eco-s4); }
.eco-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eco-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ========================================================================== */
/* 7. Drawer mobile (el sidebar se vuelve cajón; ver responsive)               */
/* ========================================================================== */

.eco-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--eco-z-aside) - 1);
  background: rgba(7, 28, 38, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--eco-t) var(--eco-ease), visibility var(--eco-t);
}
.eco-shell--drawer-open .eco-scrim { opacity: 1; visibility: visible; }

/* ========================================================================== */
/* 8. Utilidades de layout                                                     */
/* ========================================================================== */

.eco-row { display: flex; align-items: center; gap: var(--eco-s3); }
.eco-row--between { justify-content: space-between; }
.eco-row--wrap { flex-wrap: wrap; }
.eco-stack { display: flex; flex-direction: column; gap: var(--eco-s3); }
.eco-spacer { flex: 1 1 auto; }
.eco-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .eco-shell *,
  .eco-scrim { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}