/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   NUNIO · LA BARRA DE DESPLAZAMIENTO, UNA SOLA PARA TODO (Pablo, 05/10 · punto 5)
   ──────────────────────────────────────────────────────────────────────────────────────────────────
   🔴 VA APARTE DE LOS TOKENS A PROPÓSITO. Una barra es PIEL: no mueve un píxel de la página. Los
      tokens de tipografía sí cambian el aspecto. Separándolos, esta regla puede ir en las 21
      pantallas —incluido el Dashboard, que Pablo pidió no tocar— sin cambiarle nada más.
   🔴 EL DIAGNÓSTICO ERA EXACTO: el menú se veía distinto según desde qué pantalla se entrara,
      porque nueve pantallas y `style.css` definían cada una la suya, con anchos de 4, 5 y 8 px.
   ⚠️ Van las dos sintaxis: `scrollbar-width`/`scrollbar-color` (la estándar) y
      `::-webkit-scrollbar` (la que entiende el resto). Con una sola, media parte de los
      navegadores se queda con la barra de fábrica — justo el desorden que se viene a quitar.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* el pulgar, por rol. Gris neutro con poca opacidad: se ve en claro y en oscuro sin pedir
     dos colores distintos, y no compite con la línea de color de Nunio. */
  --c-barra:        rgba(127, 127, 127, .22);
  --c-barra-encima: rgba(127, 127, 127, .45);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-barra) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
/* 🔴 LA PISTA, TRANSPARENTE. Una pista pintada es lo que hace que se vea un canal gris
   permanente al costado de todo, esté o no usándose. */
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-barra);
  border-radius: 999px;
  /* el borde transparente deja el pulgar más fino que el canal: casi no se nota en reposo */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-barra-encima); background-clip: padding-box; }

/* 🔴 QUIEN PIDIÓ NO VER MOVIMIENTO, NO LO VE: con «reducir movimiento» la barra se queda en su
   tono visible en vez de aparecer al pasar el mouse. */
@media (prefers-reduced-motion: reduce) {
  *::-webkit-scrollbar-thumb { background: var(--c-barra-encima); }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════
   QUE EL MENÚ QUEPA ENTERO A 1366×768 (Pablo, 06/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   🔴 EL PROBLEMA, MEDIDO: a 1366×768 la barra tiene 768px y se reparte en header 94 + nav 529 +
      pie 145. Con `padding: 11px 16px` cada entrada mide 50px, y DOCE entradas necesitan 624. El
      nav tiene `overflow-y:auto`, así que no se rompía nada — simplemente «Automatizaciones» y
      «Configuración» quedaban abajo del borde y había que desplazar el menú para verlas. Peor:
      en el punto donde debería estar «Configuración» respondía el botón «Mi perfil» del pie, así
      que parecía que la entrada no existía.
   🔴 POR QUÉ CRECIÓ: el 06/10 se sumó la entrada «Automatizaciones» (11 → 12 entradas, +52px) y
      el botón «Mi perfil» al pie (105 → 145px, −40px para el nav). Dos cambios chicos el mismo
      día, cada uno inocente por su lado.
   ⚠️ NO SE TOCA LA LETRA DEL MENU. (Aca decia «15,12px con la escala 1.12» y «198×34»: las dos
      cifras quedaron viejas el 07/10, cuando la escala paso a 1.08 —`--t-base` 14,58px— y el pie
      a dos columnas —los botones a ~100×29—. Lo que sigue valiendo es que la letra del menu no
      se toca.) Lo único que baja es el AIRE vertical de cada
      entrada, de 11px a 8px arriba y abajo — 50px → 44px, y 12 × 44 = 528, que entra en los 529.
   ⚠️ `.sidebar .nav-item` (dos clases) le gana a `.nav-item` (una) que cada pantalla define en su
      `<style>` inline. Sin `!important`: la especificidad alcanza, y el `<style>` de la pantalla
      sigue mandando sobre todo lo demás que quiera cambiar.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 Y EL `min-height`, O NADA DE ESTO SIRVE. `style.css:43` y seis de las copias inline
   declaran `.nav-item{min-height:45px}` con `box-sizing:border-box`: ese 45 es el alto TOTAL, así
   que tocar solo el padding no baja de 45 y doce entradas siguen midiendo 540 contra los 529 que
   hay. ⚠️ Lo medí mal la primera vez: comprobé en el DASHBOARD, que es la ÚNICA pantalla sin ese
   `min-height` (ahí daba 44 y sin desplazamiento), y di por buenas las otras veinticinco. En
   /messages, /crm, /settings, /numeros y /asesoras seguía desplazándose. Lo cazó la revisión. */
.sidebar .nav-item { padding-top: 8px; padding-bottom: 8px; min-height: 44px; }
/* Y los 24px muertos del propio nav (`padding: 12px 0`): con las entradas en 44px, DOCE suman 528
   y el hueco disponible es 529 — esos 24 eran justo lo que lo desbordaba. El aire de arriba ya lo
   da el header y el de abajo, el pie.
   ⚠️ QUEDA JUSTO: 528 de 529. Con una entrada más (13) el menú vuelve a desplazarse, y entonces
      hay que decidir de verdad —agrupar entradas o un menú plegable—, no seguir quitando píxeles. */
.sidebar .sidebar-nav { padding-top: 0; padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL PIE Y EL ENCABEZADO DEL MENU, COMPACTOS · para que entren las 12 opciones (Pablo, 07/10)
   ───────────────────────────────────────────────────────────────────────────────────────────
   🔴 EL PROBLEMA MEDIDO: el menu necesitaba 765 px de alto (94 de encabezado + 528 de las 12
      entradas + 144 de pie) y un navegador real en una pantalla de 1366×768 deja unos 700 de
      viewport — la barra de pestanas, la de direcciones y la de tareas se comen el resto. A 700
      faltaban 65 px y el menu se cortaba justo en «Automatizaciones». Yo lo habia medido a 768 de
      viewport, que es la resolucion de la PANTALLA, no el alto util del navegador, y me daba que
      entraba. Entraba por 3 px: o sea, en ningun navegador de verdad.
   🔴 NO SE ACHICA NI LA LETRA DEL MENU NI LOS 44 px DE CADA OPCION (Pablo lo pidio asi). Los
      65 px salen del pie y del encabezado, que son cromo:
      · el pie pasa a `grid` de dos columnas: «Mi perfil» y «Cerrar sesion» quedan lado a lado en
        UNA fila en vez de apilados, y el estado de la linea ocupa la fila de arriba, mas bajo.
      · el encabezado baja su relleno vertical de 18 a 8 px. El logo no se toca.
   ⚠ LA ESPECIFICIDAD NO ES CAPRICHO: `nunio.css` fija el pie con `body .sidebar-footer .btn`
      (0,2,2) y de ahi vienen el `width:100%` y el `margin-top:8px` que apilaban los botones. Se
      agrega `.sidebar` en el medio para llegar a (0,3,1), contra el (0,2,1) de `nunio.css`, y
      ganarle sin un solo `!important`.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
body .sidebar .sidebar-header { padding-top: 8px; padding-bottom: 8px; }
/* el rotulo de seccion debajo del logo, mas pegado: 5 → 2 px */
body .sidebar .sidebar-logo .logo-seccion { margin-top: 2px; }

body .sidebar .sidebar-footer {
  display: grid;
  /* 🔴 LAS COLUMNAS SE ADAPTAN AL CONTENIDO, Y NO MIDEN LO MISMO. ESTA MEDIDO, Y ES A PROPOSITO.
     `1fr` es `minmax(auto,1fr)`: el minimo de cada columna es su min-content, asi que con dos
     rotulos de largo distinto salen anchos distintos — medido, «Mi perfil» 91 px y «Cerrar
     sesion» 109, los dos centrados y del mismo alto.
     ⚠️ SE PROBO `repeat(2, minmax(0,1fr))` para igualarlos, como pedia la revision, Y SALIO PEOR:
     la columna queda en 100 px y deja 86,4 para el texto, pero «Cerrar sesion» necesita 92 —
     medido con un clon fuera de pantalla. Partia en dos lineas en las diez pantallas, el boton
     pasaba de 29 a 47 px de alto y el pie de 72 a 90, o sea 18 px que le robaba al menu, que es
     justo lo que vinimos a ganar. Igualarlos de verdad en un menu de 230 px solo se puede
     achicando la letra de esos dos botones, y eso lo decide Pablo.
     El relleno del pie baja a 8 px de lado para que sobre lugar: las dos cajas suman 171 de los
     208 disponibles, 37 px de aire, en vez de los 2 que habia con 12. */
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 8px;
}
/* el estado de la linea ocupa las dos columnas, y mas bajo que antes */
body .sidebar .sidebar-footer .wa-status-pill {
  grid-column: 1 / -1;
  padding: 3px 9px;
  font-size: var(--t-micro, 11px);
}
/* los dos botones, uno por columna: sin el `width:100%` ni el `margin-top` que los apilaban */
/* 🔴 LOS DOS BOTONES DEL PIE SALEN DE ACA, Y DE NINGUN OTRO LADO (Pablo, 07/10).
   «Cerrar sesion» traia `style="width:100%;margin-top:8px"` escrito en el HTML de 24 pantallas y
   «Mi perfil», que lo crea `common.js`, no lo traia. Resultado medido: en /crm y /dashboard el
   grid estiraba uno a 37 px y el otro a 29 — dos botones pegados, de distinta altura. El 07/10 se
   borro ese atributo de las 21 que lo traian (23 tienen `#logoutBtn`; integraciones y numeros ya
   no lo tenian) y por eso aca no hace falta un solo `!important`: cuatro pantallas
   —dashboard, costos, integraciones, numeros— todavia declaran `.sidebar-footer .btn` en su
   propio <style>, pero eso es (0,2,0) contra el (0,3,1) de abajo y pierde. Medido en numeros: el
   pie da los mismos 72 px que en las otras siete. */
body .sidebar .sidebar-footer .btn,
body .sidebar .sidebar-footer button {
  width: auto;
  margin-top: 0;
  padding: 5px 6px;
  /* 🔴 `nowrap` ES LO QUE SOSTIENE LAS DOS COLUMNAS, Y SE PROBO SACARLO. Sin el, el min-content
     de «Cerrar sesion» pasa a ser su palabra mas larga («sesion», 45 px) en vez de la frase, asi
     que `1fr 1fr` deja de adaptarse al contenido y parte las dos columnas por igual: medido en las
     doce pantallas, 104 px cada una, que dejan 90,4 para un texto que necesita 92 — partia en dos
     lineas, el boton pasaba de 29 a 47 px y el pie de 72 a 90.
     ⚠️ EL RIESGO QUE TRAE, CON SU NUMERO: con `nowrap` el rotulo no puede partir, asi que si crece
     mucho el boton se sale del menu, que no declara `overflow`. Hoy las dos cajas suman 171 px de
     los 208 disponibles: hay 37 px de aire, o sea que el texto tendria que crecer un 21 % de golpe.
     Por eso el relleno del pie esta en 8 px de lado y no en 12 (con 12 el aire era de 2 px). */
  white-space: nowrap;
}
/* 🔴 SI QUEDA UN SOLO BOTON, QUE OCUPE LAS DOS COLUMNAS. `Mi perfil` lo crea `common.js`:
   si esa hoja no corriera, el pie quedaria con `Cerrar sesion` solo — medido: 109 px pegado a la
   izquierda y un hueco a la derecha. `:nth-child(2):last-child` es exactamente ese caso (el
   estado de la linea y un boton) y no toca el normal, que son tres hijos.
   ⚠️ DECIA `:nth-child(2):last-child` Y TENIA UN AGUJERO (medido el 07/10): si el pie no tuviera
      el estado de la linea, el SEGUNDO boton seria el hijo 2 y se llevaba la fila entera, asi que
      los dos botones caian en renglones distintos. `\.wa-status-pill + ...:last-child` dice
      exactamente lo que se quiere decir: el boton que viene DESPUES del estado y es el ultimo.
      Con TRES botones el
   grid baja el tercero a un segundo renglon, que tampoco se rompe: tambien medido. */
body .sidebar .sidebar-footer > .wa-status-pill + .btn:last-child,
body .sidebar .sidebar-footer > .wa-status-pill + button:last-child { grid-column: 1 / -1; }