/* ==============================================================================
   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 · Etapa C.4 — capa premium del Portal Vecino (referencia `actualizar/3.png`).

   Se carga DESPUÉS de `style.css` y del design system compartido. Dos trabajos:
     1) el shell (sidebar verde + topbar clara + lienzo redondeado);
     2) el "puente": las clases que las 14 vistas ya usan (`.card-vecino`,
        `.badge-estado`, los modales) adoptan el lenguaje del sistema, así todas
        las secciones suben de calidad sin reescribir cada vista.
   ============================================================================== */

/* El acento del portal pasa a verde institucional (la referencia lo pide y el
   white-label por municipio lo sigue sobreescribiendo con `--brand`). */
:root { --brand: #006048; }

body { background: var(--eco-bg); }
:focus-visible { outline-color: var(--brand); }

/* -------------------------------------------------------------------------- */
/* 1. Shell                                                                    */
/* -------------------------------------------------------------------------- */

#app.eco-shell { display: grid; }           /* pisa el `hidden`/`min-h-screen` de Tailwind */
#app .eco-shell__canvas { min-width: 0; }

/* La topbar verde de mobile pasa a la barra clara del canon. */
#vec-topbar {
  display: flex;
  align-items: center;
  gap: var(--eco-s4);
  min-height: var(--eco-topbar-h);
  padding: 10px var(--eco-s5);
  background: var(--eco-surface);
  border-bottom: 1px solid var(--eco-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* La hamburguesa sólo existe mientras el sidebar es cajón (<1024 px). */
#vec-topbar .eco-topbar__burger { display: none; }
@media (max-width: 1023.98px) {
  #vec-topbar .eco-topbar__burger { display: inline-grid; }
}
.vec-breadcrumb { min-width: 0; }
.vec-breadcrumb__mun {
  display: block;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-md);
  font-weight: 700;
  color: var(--eco-ink);
  line-height: 1.15;
}
.vec-breadcrumb__ruta {
  display: block;
  font-size: var(--eco-fs-xs);
  color: var(--eco-muted);
}
.vec-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--eco-radius-pill);
  border: 1px solid var(--eco-border);
  background: var(--eco-surface);
}
.vec-user__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-size: var(--eco-fs-xs);
  font-weight: 800;
  letter-spacing: .04em;
}
.vec-user__nombre { font-size: var(--eco-fs-sm); font-weight: 600; color: var(--eco-ink); }

/* El sidebar del Vecino es verde institucional, no navy. */
#app .eco-shell__aside {
  background: linear-gradient(180deg, #00553f 0%, #003b2c 100%);
}
#app .eco-nav__item--active,
#app .eco-nav__item[aria-current='page'] { background: rgba(255, 255, 255, .14); }
#app .eco-nav__item--active::before,
#app .eco-nav__item[aria-current='page']::before { background: var(--eco-lime); }

/* El contenido vive dentro del lienzo: sin el padding mobile de Tailwind. */
#app #view { padding: var(--eco-s5) var(--eco-s6) var(--eco-s7); }

@media (min-width: 1024px) {
  /* Con sidebar no hace falta la bottom-nav ni su colchón. */
  #bottom-nav { display: none; }
  #app { padding-bottom: 0 !important; }
  #btn-instalar { bottom: var(--eco-s5); }
}
@media (max-width: 1023.98px) {
  /* Mobile: manda la bottom-nav; el sidebar es cajón con hamburguesa. */
  #app #view { padding: var(--eco-s4) var(--eco-s4) 88px; }
}

/* -------------------------------------------------------------------------- */
/* 2. Puente: las clases que ya usan las 14 vistas adoptan el sistema          */
/* -------------------------------------------------------------------------- */

.card-vecino {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  padding: var(--eco-s4);
  box-shadow: var(--eco-shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .card-vecino:hover { border-color: var(--eco-border-strong); box-shadow: var(--eco-shadow-md); }
}

.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--eco-radius-pill);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}

.modal-backdrop-v { background: rgba(7, 28, 38, .55); }
.modal-card-v {
  background: var(--eco-surface);
  border-radius: var(--eco-radius-lg) var(--eco-radius-lg) 0 0;
  padding: var(--eco-s5);
  box-shadow: var(--eco-shadow-lg);
}
@media (min-width: 640px) { .modal-card-v { border-radius: var(--eco-radius-lg); } }

/* Títulos de vista en la display del sistema (ya venía por style.css; se alinea
   el tamaño para que no compitan con el ModuleHeader). */
#view h2 { font-size: var(--eco-fs-xl); }
#view h3 { font-size: var(--eco-fs-lg); }

/* -------------------------------------------------------------------------- */
/* 3. Portada (3.png): saludo, carnet, accesos y KPI                           */
/* -------------------------------------------------------------------------- */

.vec-saludo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--eco-s4); align-items: stretch; }
.vec-saludo > .eco-heroed { height: 100%; }
.vec-saludo .eco-heroed__body { padding: var(--eco-s6); }
.vec-saludo .eco-heroed__title { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem); }

@media (max-width: 1100px) {
  .vec-saludo { grid-template-columns: minmax(0, 1fr); }
}

/* La bottom-nav conserva su rol en mobile, con el acento verde. */
#bottom-nav button.is-active { color: #00553f; background: #e7f3ee; }

/* `.hidden` de Tailwind tiene que ganarle al display de los componentes. */
.eco-btn.hidden, .eco-filtercard.hidden, .eco-card.hidden { display: none !important; }

/* KPI navegable de la portada: el botón no debe verse como botón. */
.vec-kpi-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.vec-kpi-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--eco-radius-md); }
/* Las novedades usan la PlaceCard horizontal dentro de un <button>. */
button.eco-placecard { width: 100%; border: 1px solid var(--eco-border); font: inherit; cursor: pointer; }

/* -------------------------------------------------------------------------- */
/* 4. Topbar en pantallas chicas: la migaja no puede desarmar la barra          */
/* -------------------------------------------------------------------------- */

#vec-topbar { flex-wrap: nowrap; }
.vec-breadcrumb__mun,
.vec-breadcrumb__ruta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767.98px) {
  #vec-topbar { gap: var(--eco-s2); padding-inline: var(--eco-s3); }
  /* La ruta y el nombre ya están en el cajón: en el celular sólo el municipio. */
  .vec-breadcrumb__ruta,
  .vec-user__nombre,
  #vec-topbar #logout { display: none; }
  .vec-user { padding: 2px; border: 0; }
  #lang-switch .eco-lang__btn { padding: 4px 8px; }
}