/* La barra lateral: el único cromo que comparten todas las pantallas.
   nav.js envuelve lo que ya había en el <body> dentro de .nav-main y mete el <aside> delante,
   así que ninguna página tuvo que reacomodar su marcado para tenerla. En pantalla angosta la
   columna se convierte en un cajón que sale por encima, con su botón en la barra de arriba. */
:root { --nav-w: 232px; }

body.nav-shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }
body.nav-shell > .nav-main { min-width: 0; }

.nav {
  grid-row: 1; position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: .2rem; overflow: hidden;
  padding: .9rem .6rem 1.2rem; background: var(--card); border-right: 1px solid hsl(var(--line));
}
/* La marca y el pie se quedan quietos: quien se desplaza es la lista. Con el riel entero
   como scrollport, una lista larga se llevaba «SERENO» —y con él el tema y el ⟨— fuera de
   la vista. */
.nav-marca { flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; padding: .1rem .55rem .7rem; }
.nav-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* El cuadro verde con la inicial: la misma marca que lleva el riel de la consola de
   Apps Script, para que las dos se lean como un solo producto. */
.nav-marca .logo,
.nav-marca-bar .logo { width: 30px; height: 30px; border-radius: var(--radius); flex: 0 0 auto; font-size: 0;
  background: url(/isla-urbana-marca.png) center/58% no-repeat #00adef; }
.nav-marca .nav-marca-txt { min-width: 0; }
.nav-marca b { display: block; font-size: var(--fs-lg); letter-spacing: .04em; }
.nav-marca span { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* Los dos botones de la cabecera: el tema y el que pliega el riel. Empujados a la derecha
   del nombre, que es donde la vista los busca después de leer la marca. */
.nav-marca-acciones { margin-left: auto; display: flex; align-items: center; gap: .2rem; flex: 0 0 auto; }
.nav-marca-acciones .nav-tema { padding: 0; }
.nav-plegar { padding: .2rem .4rem; font-size: var(--fs-md); line-height: 1; background: transparent;
  color: var(--muted); border: 1px solid transparent; width: auto; }
.nav-plegar:hover { background: var(--bg); color: var(--ink); border-color: hsl(var(--line)); }

/* Interruptor de tema. */
.nav-tema { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .55rem; }
.nav-tema .nav-tema-txt { color: var(--muted); font-size: var(--fs-sm); }
.nav-tema button { width: auto; padding: .25rem .5rem; font-size: var(--fs-lg); line-height: 1; background: transparent;
  color: var(--ink); border: 1px solid hsl(var(--line)); }
.nav-tema-marca button { padding: .2rem .35rem; font-size: var(--fs-md); border-color: transparent; }
.nav-tema-marca button:hover { border-color: hsl(var(--line)); }
.nav-tema button:hover { background: var(--bg); }
.nav-tema .th-dark { display: none; }
[data-theme="dark"] .nav-tema .th-dark { display: block; }
[data-theme="dark"] .nav-tema .th-light { display: none; }
.nav-tema .th-light { display: block; }
.nav .nav-ico { display: inline-flex; align-items: center; justify-content: center; }

.nav-grupo { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; padding: .9rem .55rem .25rem; }
.nav a.nav-item {
  display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: var(--fs-md); line-height: 1.3;
}
.nav a.nav-item:hover { background: var(--bg); }
.nav a.nav-item[aria-current="page"] { background: hsl(var(--primary) / .12); color: hsl(var(--primary-ink)); font-weight: 600; }
.nav .nav-ico { width: 1.15rem; text-align: center; flex: 0 0 auto; font-size: var(--fs-lg); }
.nav .nav-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El pie: quién eres, en qué cliente estás y la salida. */
.nav-pie { flex: 0 0 auto; margin-top: auto; padding-top: .9rem; border-top: 1px solid hsl(var(--line)); display: grid; gap: .4rem; }
.nav-pie .nav-quien { padding: 0 .55rem; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.nav-pie .nav-quien b { color: var(--ink); display: block; font-weight: 600; }
.nav-pie select { width: 100%; font-size: var(--fs-base); padding: .3rem .4rem; }
.nav-pie button { width: 100%; font-size: var(--fs-base); padding: .35rem .5rem; }
/* «Salir» no compite con el acento: gris hasta que el puntero encima la vuelve roja,
   como en la consola de Apps Script. */
.nav-pie > button.ghost { color: var(--muted); border-color: hsl(var(--line)); background: transparent; }
.nav-pie > button.ghost:hover { color: var(--bad); border-color: var(--bad); background: hsl(var(--bad-h) / .08); }

/* El botón del cajón: sólo existe en pantalla angosta. */
.nav-abrir { display: none; }

/* La marca en la barra: sólo cuando el riel no está a la vista — en angosto siempre, y en
   ancho cuando está plegado. Sigue exactamente la misma regla que el ☰ de al lado. */
.nav-marca-bar { display: none; align-items: center; gap: .5rem; order: -1; }
.nav-marca-bar .logo { width: 26px; height: 26px; }
.nav-marca-bar b { font-size: var(--fs-lg); letter-spacing: .04em; }

@media (max-width: 860px) {
  body.nav-shell { grid-template-columns: 1fr; }
  .nav {
    position: fixed; z-index: 50; top: 0; left: 0; width: min(280px, 84vw); height: 100vh;
    transform: translateX(-102%); transition: transform .18s ease; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0);
  }
  body.nav-abierto .nav { transform: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); }
  body.nav-sesion .nav-marca-bar { display: inline-flex; }
  .nav-abrir {
    display: inline-flex; align-items: center; justify-content: center; order: -1;
    padding: .3rem .55rem; background: transparent; color: var(--ink); border-color: hsl(var(--line));
  }
}

/* ── Sin sesión ───────────────────────────────────────────────────────────────
   Mientras la sesión no esté resuelta el riel no se pinta. Antes se quedaba con el
   esqueleto puesto («Ajustes · Listas · Consola completa») junto a la tarjeta de
   entrar, que es navegación a pantallas a las que nadie puede ir todavía: al cerrar
   sesión la consola parecía seguir abierta. La polaridad va invertida a propósito —
   el riel aparece cuando el cuerpo se marca `nav-sesion`, así que el estado por
   defecto, antes de que `pintar()` corra, es oculto y no visible. */
body.nav-shell:not(.nav-sesion) { grid-template-columns: 1fr; }
body.nav-shell:not(.nav-sesion) .nav,
body.nav-shell:not(.nav-sesion) .nav-marca-bar,
body.nav-shell:not(.nav-sesion) .nav-abrir { display: none; }

/* El interruptor suelto de la pantalla de entrar: sólo existe mientras no haya sesión;
   con sesión manda el del pie del riel. */
.nav-tema-flotante { position: fixed; top: .6rem; right: .8rem; z-index: 60; }
body.nav-sesion .nav-tema-flotante { display: none; }

/* ── Riel plegado ─────────────────────────────────────────────────────────────
   En ancho, «⟨» retira la columna y deja la pantalla entera al contenido; el ☰ de la
   barra —que hasta ahora sólo existía en angosto— reaparece para devolverla. La elección
   se guarda (ver nav.js), así que sigue plegado al cambiar de pantalla.
   Va dentro de un media query a propósito: en angosto el riel YA es un cajón, y aplicar
   «plegado» allí escondería también el cajón que el ☰ acaba de abrir. */
@media (min-width: 861px) {
  body.nav-shell.nav-oculto { grid-template-columns: 1fr; }
  body.nav-shell.nav-oculto > .nav { display: none; }
  body.nav-shell.nav-sesion.nav-oculto .nav-marca-bar { display: inline-flex; }
  body.nav-shell.nav-sesion.nav-oculto .nav-abrir {
    display: inline-flex; align-items: center; justify-content: center; order: -1;
    padding: .3rem .55rem; background: transparent; color: var(--ink); border-color: hsl(var(--line));
  }
}

/* ── Pie de página ────────────────────────────────────────────────────────────
   La misma línea que cierra la consola de Apps Script. .nav-main pasa a ser una columna
   que llena la pantalla para que el pie se quede abajo aunque el contenido sea corto.
   Sin sesión no se pinta, igual que el riel. */
body.nav-shell.nav-sesion > .nav-main { display: flex; flex-direction: column; min-height: 100vh; }
/* En una columna flex, `margin: 0 auto` encoge el <main> al ancho de su contenido; con width:100%
   vuelve a comportarse como bloque (llena el ancho, tope en su max-width). */
body.nav-shell.nav-sesion > .nav-main > main { width: 100%; box-sizing: border-box; }
.app-footer { margin-top: auto; padding: 12px 0; text-align: center; font-size: var(--fs-sm);
  color: var(--muted); border-top: 1px solid hsl(var(--line));
  font-family: var(--font-mono); letter-spacing: -.01em; }
body.nav-shell.nav-sesion > .nav-main > .app-footer { margin: auto 1rem 0; }
body.nav-shell:not(.nav-sesion) .app-footer { display: none; }

/* Incrustada en un marco (tema.js): sin riel, barra, tema flotante ni título de pantalla. */
html[data-incrustado] body.nav-shell { display: block; }
html[data-incrustado] .nav, html[data-incrustado] .bar, html[data-incrustado] .nav-tema-flotante,
html[data-incrustado] .pag-titulo, html[data-incrustado] .nav-marca-bar, html[data-incrustado] .app-footer { display: none !important; }
html[data-incrustado], html[data-incrustado] body { background: transparent !important; background-image: none !important; min-height: 0 !important; }
html[data-incrustado] main { padding: 0; max-width: none; }
html[data-incrustado] .nav-main, html[data-incrustado] #pag-grid { display: block; min-height: 0; }
html[data-incrustado] #pag-grid > .card { margin: 0; box-shadow: none; }
/* Dentro del modal de Ajustes de Conciliar (conciliar.js marca el marco con data-ajustes): la tarjeta ya
   no lleva caja ni título propios — el modal pone el suyo y la pestaña dice qué pantalla es. */
html[data-ajustes] #pag-grid > .card { border: 0; padding: 0; background: transparent; }
html[data-ajustes] #pag-grid > .card > h2:first-child { display: none; }
html[data-ajustes] main, html[data-ajustes] #pag-grid { padding: 0; margin: 0; }
html[data-ajustes] #pag-grid > .card > :first-child:not(h2), html[data-ajustes] #pag-grid > .card > h2:first-child + * { margin-top: 0; }

/* Avisos de éxito (nav.js → mostrarAviso): banner verde arriba a la derecha, encima de todo. */
.av-host { position: fixed; inset: .8rem .8rem auto auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible;
  z-index: 1000; display: grid; gap: .4rem; width: min(380px, calc(100vw - 1.6rem)); pointer-events: none; }
.av-toast { pointer-events: auto; cursor: pointer; background: color-mix(in srgb, var(--ok) 12%, var(--card)); color: var(--ink); border: 1px solid var(--ok);
  border-left-width: 4px; border-radius: var(--radius); padding: .55rem .75rem .55rem 2rem; font-size: var(--fs-md); position: relative;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18); white-space: pre-line; }
.av-toast::before { content: "✓"; position: absolute; left: .65rem; top: .5rem; color: var(--ok); font-weight: 700; }
.av-toast.error { background: color-mix(in srgb, var(--bad) 10%, var(--card)); border-color: var(--bad); }
.av-toast.error::before { content: "!"; color: var(--bad); }

/* Título de pantalla fijo arriba (ver nav.js): en ancho la barra lo lleva —con sus iconos— sobre
   el mismo fondo de la página, sin caja blanca ni borde; la fila original de la página se oculta.
   En angosto la barra es la del ☰ y el título se queda en la página. */
.bar .pg-bar-titulo, .bar .pg-bar-ico { display: none; }
@media (min-width: 861px) {
  .bar.pg-bar-fija { background: var(--bg); border-bottom: 0;
    padding: .7rem 1.25rem .15rem; gap: .3rem; }
  .bar.pg-bar-fija .pg-bar-titulo { display: block; font-size: var(--fs-2xl); margin-right: .2rem; }
  .bar.pg-bar-fija .pg-bar-ico { display: inline-flex; }
  .pg-plegable { display: none !important; }
}
.bar .pg-bar-ico[hidden] { display: none !important; }

/* Consola: con sesión, la barra lleva sólo el título de la pantalla, como en las de Trabajo
   (quién eres y Salir viven en el pie del riel). En angosto el título se queda en la página. */
body.nav-sesion .bar #tenant, body.nav-sesion .bar #logout, body.nav-sesion .bar .bar-marca, body.nav-sesion .bar .spacer { display: none; }
@media (min-width: 861px) { body.nav-sesion .pag-titulo { display: none; } }

/* Empresa activa: selector del riel (sólo con dos o más empresas). */
.nav-empresa { padding: 0 .55rem .5rem; border-bottom: 1px solid var(--border, rgba(127,127,127,.25)); }
.nav-empresa[hidden] { display: none; }
.nav-empresa select { width: 100%; box-sizing: border-box; height: 32px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 11.5px; }
body.nav-oculto .nav-empresa { display: none; }