/* ===========================================================================
   Ecollibres — Variante A · "Consola Ecollibres" (app-shell con riel lateral)
   SISTEMA DE LAYOUT NO-SCROLL DE PÁGINA. Solo consume tokens semánticos de
   /assets/styles.css (var(--...)). No hay color crudo: theming intacto.

   Principio: la PÁGINA nunca scrollea. body es un grid a 100dvh con
   filas auto/1fr/auto y columnas riel/contenido. El ÚNICO scroll-host de la
   página es .app-content (fila central). Cualquier desbordamiento (catálogo,
   tablas) se concentra ahí; las regiones críticas tienen su propio overflow.
   =========================================================================== */

:root{
  --rail:232px;        /* ancho del riel lateral en desktop */
  --rail-gap:.5rem;
}

/* ---- 0) NO-SCROLL DE PÁGINA ----------------------------------------------- */
html{height:100%;overflow:hidden}
html,body{height:100%}
body.app-shell{
  margin:0;
  height:100dvh;            /* dvh, no vh: respeta barras dinámicas en móvil */
  min-height:0;            /* anula el min-height:100vh heredado de styles.css */
  overflow:hidden;         /* la página jamás scrollea */
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;   /* topbar · contenido · footer */
  grid-template-areas:
    "topbar  topbar"
    "rail    content"
    "rail    footer";
}

/* Todo ancestro de la zona scrollable debe poder encogerse */
body.app-shell > *{min-width:0}

/* ---- 1) TOPBAR (fila 1, ocupa ambas columnas) ----------------------------- */
.app-topbar{
  grid-area:topbar;
  position:static;          /* ya no sticky: vive en su celda del grid */
  min-height:auto;
  z-index:var(--z-topbar);
}

/* ---- 2) RIEL LATERAL (col 1, filas 2-3) ----------------------------------- */
.app-rail{
  grid-area:rail;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:.25rem;
  align-content:start;
  padding:var(--space-3) var(--space-2);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border-inline-end:1px solid var(--border);
  overflow-y:auto;            /* si el riel no cupiera, scrollea SOLO el riel */
  overscroll-behavior:contain;
  min-height:0;
  position:static;            /* anula el position:absolute del .nav móvil base */
  inset:auto;
  box-shadow:none;
}
.app-rail a{
  width:100%;
  justify-content:flex-start;
  border-radius:var(--r-sm);
  padding:.6rem .8rem;
}
/* Separación visual entre el grupo de familias y el de AFA: el primer
   enlace data-mode="afa" visible recibe un filete superior. */
.app-rail a[data-mode="afa"]{
  margin-top:auto;            /* empuja el bloque AFA hacia el pie del riel */
}
.app-rail a[data-mode="afa"] ~ a[data-mode="afa"]{
  margin-top:0;
}

/* ---- 3) ÁREA DE CONTENIDO (col 2, fila 2) · ÚNICO scroll-host ------------- */
.app-content{
  grid-area:content;
  min-height:0;               /* imprescindible para que overflow funcione en grid */
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  padding:0;
}

/* ---- 4) SECCIONES: compactar y neutralizar alturas mínimas ---------------- */
/* styles.css da a .section padding enorme y a .hero min-height grande; aquí lo
   reducimos para que cada vista entre como pantalla de app. */
.app-content .section{
  max-width:none;             /* el ancho lo gobierna el área, no content-max */
  margin:0;
  padding:clamp(1.1rem,2.6vw,2rem) clamp(1rem,3vw,2.4rem);
  scroll-margin-top:1rem;
}
.app-content .hero{
  min-height:0;               /* anula min-height:clamp(26rem,...) */
  align-content:center;
  gap:clamp(1.2rem,3vw,2rem);
}
.app-content .section-title{margin-bottom:var(--space-3)}

/* El catálogo: su grid puede crecer; le damos su propio scroll interno para
   que no obligue al área a ser el único que crece sin control. */
#catalogGrid{
  overscroll-behavior:contain;
}

/* Tablas y resultados con scroll interno propio + altura acotada */
.app-content .table-wrap{
  max-height:min(46vh,420px);
  overflow:auto;
  overscroll-behavior:contain;
}
.app-content .table-wrap table{min-width:520px}

/* ---- 5) FOOTER (col 2, fila 3) -------------------------------------------- */
.app-footer{
  grid-area:footer;
  margin:0;
  max-width:none;
  padding:.55rem var(--space-4);
  border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.app-footer .muted{margin:0;font-size:.8rem}
.app-footer nav{font-size:.82rem}

/* ---- 6) OVERLAYS: anclados al viewport con safe-area --------------------- */
/* El FAB de chat y el de feedback de pantalla deben respetar el área segura
   inferior en móvil (notch/gesto). Reutilizan su position:fixed del base. */
.chat-fab{inset-block-end:calc(1rem + env(safe-area-inset-bottom))}
.screen-fb-fab{inset-block-end:calc(1rem + env(safe-area-inset-bottom))}
.chat-panel{inset-block-end:calc(5.2rem + env(safe-area-inset-bottom))}
.feedback-widget{inset-block-end:calc(1rem + env(safe-area-inset-bottom))}

/* ---- 7) RESPONSIVE · móvil (~380px): 1 columna, riel plegable ------------- */
@media (max-width:850px){
  body.app-shell{
    grid-template-columns:minmax(0,1fr);   /* una sola columna */
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "topbar"
      "content"
      "footer";
  }
  /* El riel se pliega tras #navToggle (reusa la lógica .nav.open de app.js):
     se saca del flujo del grid y se muestra como drawer sobre el contenido. */
  .app-rail{
    grid-area:auto;
    position:fixed;
    top:var(--topbar-h);
    inset-inline:0;
    z-index:var(--z-drawer);
    display:none;
    flex-direction:column;
    border-inline-end:0;
    border-bottom:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-3);
    max-height:calc(100dvh - var(--topbar-h));
    overflow-y:auto;
  }
  .app-rail.open{display:flex}
  .app-rail a[data-mode="afa"]{margin-top:0}   /* sin empuje en drawer */
  .nav-toggle{display:inline-flex}

  /* dos columnas apiladas y tablas con scroll interno */
  .app-content .two-col,
  .app-content .admin-panels{grid-template-columns:1fr}
  .app-content .two-col.reverse>.intro{order:0}
  .app-content .filters{grid-template-columns:1fr}
  .app-content .hero{grid-template-columns:1fr}

  /* KPIs AFA a 2x2 en móvil */
  .app-content .admin-grid{grid-template-columns:repeat(2,1fr)}

  /* el área sigue siendo el único scroll-host a 1fr */
  .app-content .table-wrap{max-height:min(52vh,380px)}
}

/* Pantallas muy estrechas (~380px): inputs ≥16px para no provocar zoom iOS */
@media (max-width:480px){
  .app-content input,
  .app-content select,
  .app-content textarea{font-size:16px}
  .app-content .section{padding:1rem .85rem}
  .app-topbar{gap:.4rem}
}

/* ---- 8) Salvaguarda anti-scroll de página -------------------------------- */
/* scroll-margin de styles.css asumía topbar sticky; aquí el ancla scrollea
   dentro de .app-content, así que basta un margen pequeño. Ya cubierto arriba.
   Garantía extra: nada fuera del grid puede empujar el body. */
html, body.app-shell{max-width:100%}