/* ======================================================================
   shell.css — Presupuestos de Gastos
   Sidebar colapsable + topbar + wrapper + footer.
   Portado de dashboard_alleato/public/css/app.css (mismos nombres de
   clase/variable para que theme-base.css siga recoloreando el shell sin
   cambios — ver CLAUDE.md / task M1.4).
   ====================================================================== */

/* ===== Variables ===== */
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --navbar-height: 56px;
  --sidebar-bg: #1e2a3a;
  --sidebar-hover: rgba(255,255,255,.08);
  --sidebar-active-bg: rgba(13,110,253,.25);
  --sidebar-active-border: #0d6efd;
  --sidebar-text: rgba(255,255,255,.75);
  --sidebar-icon: rgba(255,255,255,.6);
  --transition: all .25s ease;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ===== Navbar ===== */
.top-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-height);
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.top-navbar .brand-wordmark {
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}
/* [R3.12] Logo del cliente en el topbar (esquina superior izquierda) */
.top-navbar .brand-logo-img {
  height: 30px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  display: block;
}
/* Nombre de la app junto al wordmark Alleato (más ligero que la marca) */
.top-navbar .brand-wordmark-app {
  font-weight: 500;
  opacity: .85;
}

/* Buscador (placeholder — se conecta en tarea posterior) */
.cmd-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  white-space: nowrap;
  transition: var(--transition);
  cursor: pointer;
}
.cmd-trigger:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.cmd-trigger kbd {
  font-size: .72rem;
  padding: .05rem .35rem;
  border-radius: .3rem;
  background: rgba(255,255,255,.12);
  color: inherit;
  border: none;
}

/* Selector de sucursal activa (Tarea 2, 17ª ola). El `<select>` usa
   `.form-select` de Bootstrap, que YA hereda los tokens del tema curado
   (`[data-theme-curated] .form-select` en theme-base.css) — no necesita nada
   aquí salvo el ancho.
   Menor 8 de la revisión: el badge (`.sucursal-activa-texto`) llevaba
   `bg-white text-dark` fijo, que Bootstrap aplica con `!important` — blanco
   sólido sin importar el tema. Sobre `--ln-surface` (el fondo real del
   navbar en los temas curados, ver `[data-theme-curated] .top-navbar` más
   abajo) eso se disolvía en los temas claros y quedaba como un parche blanco
   sobre la barra oscura de Terminal. Este bloque es sólo el FALLBACK (sin
   tema curado, que en la práctica no ocurre: `appSettings.theme` siempre cae
   a 'linear'); la apariencia real la da el override por tokens de
   theme-base.css, mismo camino que ya siguió `.cmd-trigger` ahí mismo. */
.sucursal-activa-select { max-width: 200px; }
.sucursal-activa-texto {
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .9);
  color: #1a1a1a;
}

/* ===== Layout wrapper ===== */
.wrapper {
  margin-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--navbar-height));
  background: var(--sidebar-bg);
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--transition);
  z-index: 1020;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.sidebar.collapsed { width: var(--sidebar-collapsed-width); }

/* ===== Sidebar nav ===== */
.sidebar-nav {
  flex: 1;
  padding: .75rem 0;
}

/* ===== Sidebar direct links ===== */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  color: var(--sidebar-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sidebar-link i {
  font-size: 1.05rem;
  color: var(--sidebar-icon);
  min-width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.sidebar-link:hover,
.sidebar-link:focus {
  background: var(--sidebar-hover);
  color: #fff;
  outline: none;
}

.sidebar-link:hover i,
.sidebar-link:focus i { color: #fff; }

.sidebar-link.active {
  background: var(--sidebar-active-bg);
  border-left-color: var(--sidebar-active-border);
  color: #fff;
}

.sidebar-link.active i { color: #7ab3ff; }

/* ===== Sidebar sublinks (dentro de grupos) ===== */
.sidebar-sublink {
  padding-left: 2.75rem;
  font-size: .88rem;
  border-left: 3px solid transparent;
}

.sidebar-sublink i {
  font-size: .9rem;
  min-width: 1.2rem;
}

/* ===== Sidebar group button ===== */
.sidebar-group-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  color: var(--sidebar-text);
  text-decoration: none;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.sidebar-group-btn i {
  font-size: 1.05rem;
  color: var(--sidebar-icon);
  min-width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.sidebar-group-btn:hover,
.sidebar-group-btn:focus {
  background: var(--sidebar-hover);
  color: #fff;
  outline: none;
}

.sidebar-group-btn:hover i { color: #fff; }

.sidebar-group-btn.active { color: #fff; }

.sidebar-group-btn.active i { color: #7ab3ff; }

/* Rotación del chevron */
.sidebar-chevron {
  margin-left: auto !important;
  font-size: .7rem !important;
  min-width: auto !important;
  opacity: .5;
  transition: transform .2s ease !important;
}

.sidebar-group-btn[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
}

/* Ayuda — enlace fijo al fondo del área de nav */
.sidebar-link-ayuda {
  margin-top: .25rem;
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: .75rem;
}

/* ===== Sidebar colapsado: ocultar labels y contenido de grupo ===== */
.sidebar-label {
  transition: opacity .2s ease, width .2s ease;
  overflow: hidden;
  flex: 1;
}

.sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
  flex: 0;
}

.sidebar.collapsed .sidebar-group-collapse {
  display: none !important;
}

.sidebar.collapsed .sidebar-chevron {
  display: none;
}

/* ===== Sidebar footer ===== */
.sidebar-footer {
  padding: .75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

.sidebar-version {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255,255,255,.3);
  font-size: .75rem;
}

.sidebar-version i { min-width: 1.5rem; text-align: center; }

.sidebar.collapsed .sidebar-footer .sidebar-label {
  opacity: 0;
  width: 0;
}

/* ===== Tooltip al colapsar ===== */
.sidebar.collapsed .sidebar-link,
.sidebar.collapsed .sidebar-group-btn {
  position: relative;
}

.sidebar.collapsed .sidebar-link::after,
.sidebar.collapsed .sidebar-group-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(var(--sidebar-collapsed-width) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: .3rem .6rem;
  border-radius: .35rem;
  font-size: .8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 9999;
}

.sidebar.collapsed .sidebar-link:hover::after,
.sidebar.collapsed .sidebar-group-btn:hover::after { opacity: 1; }

/* ===== Main content ===== */
.main-content {
  margin-left: var(--sidebar-width);
  transition: var(--transition);
  min-height: calc(100vh - var(--navbar-height));
}

.main-content.expanded {
  margin-left: var(--sidebar-collapsed-width);
}

/* Sin tope de ancho: al colapsar el menú lateral, .main-content reduce su
   margin-left de 240px a 64px y esos 176px deben volverse ancho de cuadrícula,
   no margen muerto. Un max-width fijo aquí los desperdiciaba (27 Jul 2026). */
.content-area {
  max-width: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sidebar {
    width: 0;
    overflow: hidden;
  }
  .sidebar.mobile-open {
    width: var(--sidebar-width);
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
  }
  .main-content {
    margin-left: 0 !important;
  }
  .cmd-trigger .cmd-trigger-label { display: none; }
}

/* ===== Global Footer ===== */
.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  font-size: .75rem;
  color: var(--bs-secondary-color, #6c757d);
  border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.075));
  background: transparent;
}
.app-footer-brand {
  font-weight: 700;
  color: #2E5575;
  letter-spacing: .01em;
}
.app-footer-sep { opacity: .5; }

/* Curated themes — usan design tokens */
[data-theme-curated] .app-footer {
  color: var(--ln-fg-muted, #6c757d);
  border-top-color: var(--ln-border, rgba(0,0,0,.08));
  font-family: var(--ln-font-sans);
}
[data-theme-curated] .app-footer-brand { color: var(--ln-accent, #2E5575); }

/* ===== [S2.4] Page header ===== */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ln-border, rgba(0,0,0,.08));
}
.page-header-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ln-fg, #1a1a1a);
  letter-spacing: -.01em;
}
.page-header-sub {
  font-size: .875rem;
  margin: .2rem 0 0;
  color: var(--ln-fg-muted, #6c757d);
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
[data-theme-curated] .page-header-title { font-family: var(--ln-font-sans); }
[data-theme-curated] .page-header-sub { font-family: var(--ln-font-sans); }

/* [D7.3] Botón "?" de Ayuda contextual en el page-header */
.page-header-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--ln-border, #dee2e6);
  background: var(--ln-surface-2, #f8f9fa);
  color: var(--ln-fg-muted, #6c757d);
  text-decoration: none;
  transition: var(--transition, all .15s ease);
  flex-shrink: 0;
}
.page-header-help:hover {
  background: var(--ln-accent-soft, #e7e9ff);
  border-color: var(--ln-accent, #4f46e5);
  color: var(--ln-accent, #4f46e5);
}

/* [D7.12] HelpTip inline (popover "i") */
.helptip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: .25rem;
  border: none;
  background: none;
  color: var(--ln-fg-subtle, #adb5bd);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
.helptip:hover, .helptip:focus { color: var(--ln-accent, #4f46e5); outline: none; }

/* ===== Print ===== */
@media print {
  .sidebar, .top-navbar, .app-footer, .banda-revision { display: none !important; }
  .main-content { margin-left: 0 !important; }
}

/* Motor de Catálogos — encabezado de Grupo del ERP dentro de la sección Catálogos.
   No es un enlace: sólo rotula el grupo (Tesorería, Compras, …) que declara
   `Modulos.grupo` → `Grupos` en la base del cliente. */
.sidebar-subgrupo {
  padding: .45rem .75rem .2rem 1.6rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ln-text-muted, #8a8a8a);
}
.sidebar.collapsed .sidebar-subgrupo { display: none; }

/* ── Banda de base atrasada (12a ola) ────────────────────────────────────────
   Sin boton de cerrar a proposito: mientras la base siga atrasada, lo que se
   guarde puede no quedar como el usuario espera. Vive en shell.css y no en
   app.css porque es chrome de la aplicacion, junto a la topbar y el sidebar.

   Va FIJA bajo la topbar, no en flujo: `.top-navbar` es `position: fixed` con
   `z-index: 1030`, asi que un div en flujo justo despues arrancaria en y=0 —
   TAPADO por la topbar, invisible — y ademas empujaria `.wrapper` por su altura
   ADEMAS del `margin-top` que ya trae, desalineandolo del `.sidebar`, que
   tambien es fijo. Entre 1030 (topbar) y 1020 (sidebar): 1029.

   Como esta fuera del flujo, su altura no corre nada por si sola: la publica en
   `--banda-height` y `.con-banda` (clase que main.ejs le pone al <body> con la
   MISMA bandera que decide pintar la banda) empuja wrapper y sidebar con ella.
   El valor de abajo es el respaldo de UN renglon; el script del parcial lo
   sustituye por la altura medida, que en pantallas angostas son dos o tres. */
.con-banda { --banda-height: 2.25rem; }

.banda-revision {
  position: fixed;
  top: var(--navbar-height);
  left: 0; right: 0;
  z-index: 1029;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: #b02a37;
  color: #fff;
  font-size: .9rem;
  line-height: 1.35;
}
.banda-revision i { flex: 0 0 auto; font-size: 1.05rem; }

/* Dos clases contra una: le ganan por especificidad a `.wrapper`/`.sidebar`/
   `.main-content` de arriba sin depender del orden dentro del archivo. */
.con-banda .wrapper {
  margin-top: calc(var(--navbar-height) + var(--banda-height));
  min-height: calc(100vh - var(--navbar-height) - var(--banda-height));
}
.con-banda .sidebar {
  top: calc(var(--navbar-height) + var(--banda-height));
  height: calc(100vh - var(--navbar-height) - var(--banda-height));
}
.con-banda .main-content {
  min-height: calc(100vh - var(--navbar-height) - var(--banda-height));
}