/* ============================================================================
   PINAMAR UI — sistema de diseño compartido de las herramientas municipales.

   🔴 FUENTE ÚNICA. El original vive en =PORTAL_PINAMAR=/public/css/pinamar-ui.css
   y `version-assets.js` lo copia a =PINAMAR_DATOS=/public/css/pinamar-ui.css en
   cada predeploy. NUNCA editar la copia del otro proyecto: se sobrescribe.

   Existe porque Central Pinamar y el Panel de Datos habían llegado por separado
   al mismo verde institucional (#007242) pero con tipografías, radios y nombres
   de token distintos (--card-bg contra --bg-card, --cyan para un verde). Sin una
   fuente común iban a seguir separándose solos, y un funcionario que salta de una
   herramienta a otra no tiene por qué sentir que cambió de organismo.

   CÓMO SE USA
     1. Se carga ANTES del CSS propio del proyecto.
     2. Cada proyecto aliasea sus nombres viejos a estos tokens (ver el bloque
        "Puente" al final de cada hoja) para no reescribir reglas existentes.
     3. Cargarlo NO cambia nada por sí solo: los tokens no se aplican a ningún
        selector. La tipografía y el layout entran sólo dentro de `.pin-app`.
        Una página pública que lo cargue queda exactamente igual.

   REGLAS DE ORO (heredadas del panel de Datos, donde costaron caro)
     · NADA de backdrop-filter en tarjetas. Hay muchas y varias se animan a la
       vez; desenfocar el fondo por tarjeta en cada frame era la causa del lag.
     · No animar box-shadow en bucle.
     · Nada de `transform` en un contenedor que envuelva algo `position: fixed`
       (crea un contexto de apilamiento y el fixed deja de ser fixed).
   ============================================================================ */

:root {
  /* ── Superficies · tema oscuro (base) ───────────────────────────────────── */
  --pin-bg:             #040d08;
  --pin-surface:        rgba(11, 27, 17, 0.66);
  --pin-surface-hover:  rgba(15, 35, 20, 0.60);
  --pin-surface-solid:  #0b1a11;               /* para <option> y menús nativos */
  --pin-line:           rgba(34, 197, 94, 0.15);
  --pin-line-strong:    rgba(34, 197, 94, 0.34);

  /* ── Acento ─────────────────────────────────────────────────────────────── */
  --pin-accent:         #22c55e;
  --pin-accent-soft:    #4ade80;
  --pin-accent-dim:     rgba(34, 197, 94, 0.14);
  --pin-accent-ink:     #04180c;               /* texto sobre el acento lleno */

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --pin-text:           #e8f5ec;
  --pin-text-muted:     rgba(232, 245, 236, 0.58);
  --pin-text-faint:     rgba(232, 245, 236, 0.32);

  /* ── Semánticos (idénticos en ambos temas salvo que se indique) ─────────── */
  --pin-warn:           #fbbf24;
  --pin-danger:         #f43f5e;
  --pin-info:           #38bdf8;
  --pin-violet:         #c084fc;

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  /* Fira Sans es la del sitio oficial pinamar.gob.ar: las herramientas quedan
     pegadas a la marca madre en vez de parecer productos de terceros.
     DM Mono queda reservada a datos duros — expedientes, DNI, fechas, importes,
     porcentajes — donde alinear cifras en columna vale más que la estética. */
  --pin-font:           'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pin-font-mono:      'DM Mono', ui-monospace, 'Cascadia Mono', monospace;

  --pin-fs-xs:          12px;
  --pin-fs-sm:          13px;
  --pin-fs-base:        14px;
  --pin-fs-md:          16px;
  --pin-fs-lg:          20px;
  --pin-fs-xl:          26px;
  --pin-fs-2xl:         34px;

  --pin-lh-tight:       1.25;
  --pin-lh:             1.55;
  --pin-lh-loose:       1.7;

  /* Mayúsculas de etiqueta (encabezados de columna, chips, rótulos de campo) */
  --pin-track-caps:     .07em;

  /* ── Radios ─────────────────────────────────────────────────────────────── */
  /* La escala del panel de Datos. 24px se lee notoriamente más blando que los
     16px con los que había nacido Obras; es la diferencia de "temperatura"
     entre las dos herramientas que más saltaba a la vista. */
  --pin-r-lg:           24px;
  --pin-r-md:           16px;
  --pin-r-sm:           10px;
  --pin-r-xs:           8px;
  --pin-r-pill:         999px;

  /* ── Sombras ────────────────────────────────────────────────────────────── */
  --pin-shadow-card:    inset 0 0 20px rgba(255, 255, 255, 0.01), 0 10px 40px rgba(0, 0, 0, 0.5);
  --pin-shadow-pop:     0 18px 50px rgba(0, 0, 0, 0.55);
  --pin-shadow-modal:   0 30px 90px rgba(0, 0, 0, 0.65);

  /* ── Movimiento ─────────────────────────────────────────────────────────── */
  --pin-ease:           cubic-bezier(0.16, 1, 0.3, 1);   /* salida exponencial */
  --pin-t-fast:         .18s;
  --pin-t:              .28s;

  /* ── Espaciado ──────────────────────────────────────────────────────────── */
  --pin-sp-1:           6px;
  --pin-sp-2:           10px;
  --pin-sp-3:           16px;
  --pin-sp-4:           24px;
  --pin-sp-5:           32px;
  --pin-sp-6:           48px;

  /* ── Layout del panel ───────────────────────────────────────────────────── */
  --pin-sidebar-w:      280px;
  --pin-topbar-h:       60px;                  /* sólo móvil */
}

/* ── Tema claro ─────────────────────────────────────────────────────────────
   Los dos proyectos nombran el tema claro distinto y lo cuelgan de elementos
   distintos: Central usa html[data-theme="clasico"], el panel de Datos usa
   body[data-theme="light"]. La lista de selectores cubre los dos casos sin
   importar de qué elemento cuelgue el atributo. Al unificar tokens NO se
   unificaron esos nombres a propósito: renombrarlos rompería la clave de
   localStorage y todos perderían su preferencia de tema.                     */
[data-theme="clasico"],
[data-theme="light"] {
  --pin-bg:             #ffffff;
  --pin-surface:        #ffffff;
  --pin-surface-hover:  #f4f8f5;
  --pin-surface-solid:  #ffffff;
  --pin-line:           rgba(0, 114, 66, 0.16);
  --pin-line-strong:    rgba(0, 114, 66, 0.45);

  --pin-accent:         #007242;               /* verde institucional exacto */
  --pin-accent-soft:    #00925a;
  --pin-accent-dim:     rgba(0, 114, 66, 0.10);
  --pin-accent-ink:     #ffffff;

  --pin-text:           #333333;               /* mismo gris que pinamar.gob.ar */
  --pin-text-muted:     rgba(51, 51, 51, 0.62);
  --pin-text-faint:     rgba(51, 51, 51, 0.42);

  --pin-warn:           #b45309;
  --pin-danger:         #be123c;
  --pin-info:           #0369a1;
  --pin-violet:         #7c3aed;

  --pin-shadow-card:    0 6px 22px rgba(18, 53, 36, 0.07);
  --pin-shadow-pop:     0 18px 50px rgba(0, 100, 50, 0.16);
  --pin-shadow-modal:   0 30px 80px rgba(18, 53, 36, 0.22);
}

/* ════════════════════════════════════════════════════════════════════════════
   SHELL DE PANEL
   Sitio público = nav superior. Herramienta interna = panel con sidebar.
   Esa es toda la regla, y es lo que hace que Obras, Reclamos y el Panel de
   Datos se lean como la misma familia sin compartir una línea de lógica.

   El sidebar es `position: fixed` y el contenido lleva `margin-left`, en vez
   del `height:100vh; overflow:hidden` del panel de Datos. Así la página
   conserva el scroll normal (y el footer, y el pie de página del navegador en
   móvil, que con 100vh salta cada vez que se esconde la barra de direcciones).
   ════════════════════════════════════════════════════════════════════════════ */

.pin-app {
  font-family: var(--pin-font);
  font-size: var(--pin-fs-base);
  line-height: var(--pin-lh);
}
.pin-app .pin-mono,
.pin-app [data-mono] { font-family: var(--pin-font-mono); }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.pin-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: var(--pin-sidebar-w);
  display: flex; flex-direction: column;
  /* 24px parejos: es el padding del sidebar del panel de Datos. Con 16px a los
     costados los ítems arrancaban 8px más a la izquierda que allá y las dos
     barras no alineaban. */
  padding: var(--pin-sp-4);
  background: var(--pin-bg);
  border-right: 1px solid var(--pin-line);
  overflow-y: auto; overscroll-behavior: contain;
}
[data-theme="clasico"] .pin-sidebar,
[data-theme="light"]   .pin-sidebar { background: #fbfdfc; }

/* Marca del sidebar: MISMA anatomía que el panel de Pinamar Datos — logo arriba
   a 48px de alto, título centrado debajo. Antes iba en horizontal a 38px y al
   lado del panel de Datos se veía chico y descolgado. */
/* Geometría COPIADA del sidebar de Pinamar Datos, medida sobre el render real:
   logo de 48px pegado al borde superior del padding, 12px hasta el título,
   2px entre título y subtítulo. Sin padding propio arriba — si no, la cabecera
   baja unos píxeles y las dos barras dejan de alinear. */
.pin-brand {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 0 28px;
  text-align: center; text-decoration: none; color: inherit;
}
.pin-brand-logo { height: 48px; width: auto; flex-shrink: 0; }
/* 🔴 El SVG del logo es monocromo #007242: sobre el fondo casi negro del tema
   Futurista queda casi invisible, y a 48px se nota mucho más que a 38. Se
   blanquea por filtro (funciona porque es de un solo color) y en los temas
   claros se deja tal cual. */
.pin-brand-logo { filter: brightness(0) invert(1); opacity: .93; }
[data-theme="clasico"] .pin-brand-logo,
[data-theme="light"]   .pin-brand-logo { filter: none; opacity: 1; }

/* Tamaños tomados del panel de Datos (título 1.4rem, subtítulo 0.9rem con mucho
   tracking): al lado del suyo, el nuestro se leía chico. Decisión del usuario. */
/* 1.4rem / 0.9rem con 2px de separación: los valores exactos del panel de Datos. */
/* gap 0: en el panel de Datos el título y el subtítulo van pegados (sin gap),
   y cualquier separación acá corría todo lo de abajo. */
.pin-brand-txt   { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* 🔴 `line-height` EXPLÍCITO en los dos. Sin esto, cada proyecto hereda el suyo
   —Central trae 1.6 del sitio, el panel de Datos el normal (~1.2)— y el bloque
   de la marca queda 7px más alto de un lado que del otro. Eso desalineaba el
   rótulo del grupo y el primer ítem entre las dos barras. */
.pin-brand-txt b {
  font-size: 22.4px; font-weight: 700; color: var(--pin-text);
  line-height: 1.25; letter-spacing: -.005em;
}
.pin-brand-txt span {
  font-size: 14.4px; font-weight: 600; text-transform: uppercase;
  line-height: 1.2; letter-spacing: 2px; color: var(--pin-accent);
}

/* Ninguna lista crece: el sidebar puede tener DOS (las secciones de la herramienta
   y el conmutador de herramientas), y si crecieran ambas se repartirían el hueco
   y quedarían separadas. Al pie lo empuja abajo `margin-top:auto`.
   El `flex:0 0 auto` de los hijos va explícito porque una hoja del sitio que
   estilice el contenedor puede meterle un flex-grow por herencia. */
.pin-nav { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.pin-nav > * { flex: 0 0 auto; }

/* Rótulo de grupo dentro del sidebar */
/* El padding lateral es el MISMO que el de los ítems (10px), para que el rótulo
   del grupo arranque exactamente en la vertical del ícono de abajo. */
/* ⚠️ `line-height` explícito, como en la marca: los dos proyectos heredan uno
   distinto del body (1.6 en Central, normal en Datos) y sin fijarlo el rótulo
   mide 4px más de un lado, corriendo todo el menú hacia abajo. Regla general de
   este archivo: cualquier texto del shell lleva su line-height declarado. */
.pin-grupo {
  padding: 16px 10px 6px; line-height: 1.2;
  font-family: var(--pin-font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pin-text-faint);
}
/* 🔴 NO usar `:first-of-type` acá. Depende de los hermanos, y en el panel de
   Datos `.brand` también es un <div>, así que el rótulo deja de ser el primero
   de su tipo y recibe otro padding: el menú quedaba 10px más abajo de un lado
   que del otro. El espacio sobre el primer grupo lo pone la marca. */

/* Herramienta a la que no se tiene acceso todavía. Se ve, pero apagada: una
   herramienta que no se ve, no se pide — y el circuito de Obras depende de que
   Compras, Contaduría y Hacienda la pidan. Ver la política en pin-accesos.js. */
.pin-bloq { color: var(--pin-text-faint); cursor: pointer; }
.pin-bloq:hover { background: var(--pin-accent-dim); color: var(--pin-text-muted); }
.pin-nav-lock { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; opacity: .8; }
.pin-ic16 { width: 16px; height: 16px; flex-shrink: 0; }
.pin-ic24 { width: 24px; height: 24px; }

.pin-nav-item {
  display: flex; align-items: center; gap: var(--pin-sp-2);
  padding: 11px var(--pin-sp-2); border-radius: var(--pin-r-sm);
  border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: var(--pin-fs-base); font-weight: 500;
  color: var(--pin-text-muted); text-align: left; text-decoration: none;
  cursor: pointer; width: 100%;
  transition: background var(--pin-t-fast), color var(--pin-t-fast),
              border-color var(--pin-t-fast);
}
.pin-nav-item:hover { background: var(--pin-accent-dim); color: var(--pin-text); }
.pin-nav-item .pin-nav-ic { width: 18px; height: 18px; flex-shrink: 0; }
/* `.activa` es la clase que ya togglea obras.js sobre los tabs: al mudar los
   tabs al sidebar la navegación siguió andando sin tocar una línea de JS. */
.pin-nav-item.activa {
  background: var(--pin-accent-dim); color: var(--pin-accent);
  border-color: var(--pin-line-strong); font-weight: 600;
}
.pin-nav-item[hidden] { display: none; }

/* Contador al costado del ítem (bandeja con pendientes, avisos sin leer) */
.pin-nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pin-r-pill); background: var(--pin-accent);
  color: var(--pin-accent-ink); font-family: var(--pin-font-mono);
  font-size: 11px; font-weight: 500;
}
/* 🔴 Obligatoria, no redundante. El badge nace con el atributo `hidden` y se
   togglea por atributo (`obras.js`), pero tiene `display` explícito, que le gana
   al `display:none` que el atributo trae de fábrica. En Central funcionaba de
   prestado gracias a `[hidden]{display:none!important}` de styles.css — que es
   de Central, NO del sistema compartido: en otro proyecto el badge se veía
   siempre, con un 0 pegado a cada ítem. */
.pin-nav-badge[hidden] { display: none; }

/* ── Pie del sidebar ────────────────────────────────────────────────────── */
.pin-side-foot {
  margin-top: auto; padding-top: var(--pin-sp-3);
  border-top: 1px solid var(--pin-line);
  display: flex; flex-direction: column; gap: var(--pin-sp-2);
}
.pin-side-link {
  display: flex; align-items: center; gap: var(--pin-sp-2);
  padding: 9px var(--pin-sp-2); border-radius: var(--pin-r-sm);
  font-size: var(--pin-fs-sm); color: var(--pin-text-muted);
  text-decoration: none; transition: background var(--pin-t-fast), color var(--pin-t-fast);
}
.pin-side-link:hover { background: var(--pin-accent-dim); color: var(--pin-text); }

.pin-user {
  display: flex; align-items: center; gap: var(--pin-sp-2);
  padding: var(--pin-sp-2); border-radius: var(--pin-r-md);
  background: var(--pin-surface); border: 1px solid var(--pin-line);
}
.pin-user-av {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--pin-r-pill);
  display: grid; place-items: center;
  background: var(--pin-accent-dim); border: 1px solid var(--pin-line-strong);
  color: var(--pin-accent); font-size: var(--pin-fs-sm); font-weight: 700;
}
.pin-user-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pin-user-txt b {
  font-size: var(--pin-fs-sm); font-weight: 600; color: var(--pin-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-user-txt span {
  font-size: var(--pin-fs-xs); color: var(--pin-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-user-act {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--pin-r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--pin-line);
  color: var(--pin-text-muted); cursor: pointer;
  transition: color var(--pin-t-fast), border-color var(--pin-t-fast), background var(--pin-t-fast);
}
.pin-user-act:hover {
  color: var(--pin-accent); border-color: var(--pin-line-strong);
  background: var(--pin-accent-dim);
}

/* ── Menú de configuración (engranaje del chip de usuario) ────────────────
   Se abre HACIA ARRIBA porque el chip vive al fondo del sidebar. Mismo patrón
   que el panel de Pinamar Datos: el tema y el cierre de sesión viven acá
   adentro en vez de colgar sueltos de la barra. */
.pin-user-wrap { position: relative; }
.pin-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
  padding: 6px; background: var(--pin-bg);
  border: 1px solid var(--pin-line-strong); border-radius: var(--pin-r-md);
  box-shadow: var(--pin-shadow-pop);
}
.pin-menu[hidden] { display: none; }
/* 🔴 El menú abre HACIA ARRIBA porque su lugar natural es el pie del sidebar,
   donde vive el chip de usuario. Cuando el chip está ARRIBA —la barra superior de
   la raíz— eso lo manda fuera de la pantalla. Este modificador lo baja.
   Es una regla NUEVA a propósito: la de arriba la usan Obras y el panel de
   Pinamar Datos, y ahí abrir hacia arriba es lo correcto. */
.pin-user-wrap.abre-abajo .pin-menu { bottom: auto; top: calc(100% + 8px); }
.pin-menu-label {
  padding: 7px 10px 5px; font-family: var(--pin-font-mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pin-text-faint);
}
.pin-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--pin-r-sm); font-size: var(--pin-fs-sm);
  color: var(--pin-text-muted); text-decoration: none; cursor: pointer;
  transition: background var(--pin-t-fast), color var(--pin-t-fast);
}
/* Una sección con `config: true` entra al menú como <button>, no como <a>: hay
   que neutralizar los estilos propios del control y estirarlo a todo el ancho. */
button.pin-menu-item {
  width: 100%; background: transparent; border: 0; text-align: left;
  font-family: inherit; font-size: var(--pin-fs-sm); font-weight: 500;
}
.pin-menu-item:hover { background: var(--pin-accent-dim); color: var(--pin-text); }
.pin-menu-item.activa { background: var(--pin-accent-dim); color: var(--pin-accent); }
.pin-menu-item.peligro:hover { background: rgba(244, 63, 94, .1); color: var(--pin-danger); }
.pin-menu-ic { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.pin-menu-sep { height: 1px; margin: 5px 4px; background: var(--pin-line); }

/* Hueco donde theme.js inyecta el conmutador de tema (#themeToggleHost).
   Queda vacío hasta que el script corre, así que no reserva alto de más. */
.pin-side-tema:empty { display: none; }
.pin-side-tema { display: flex; justify-content: flex-start; padding: 0 var(--pin-sp-1); }

/* ── Contenido ──────────────────────────────────────────────────────────── */
.pin-main {
  margin-left: var(--pin-sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
/* 🔴 Los hijos directos NO deben encogerse al ancho de su contenido.
   `.pin-main` es un flex en columna, y en un flex un `margin: 0 auto` horizontal
   en el hijo ANULA el stretch del eje transversal: el elemento pasa a medir lo
   que mide su contenido. Las páginas del sitio centran sus secciones con
   `max-width + margin: 0 auto` (así lo hace `.benef-bento`, de 1280px), y al
   meterlas dentro del shell se achicaban solas — el mapa de Beneficios pasó de
   776px de ancho a 454 y quedó vertical. Con width:100% vuelven a estirarse y el
   max-width hace lo suyo. */
.pin-main > * { width: 100%; }
.pin-head { padding: var(--pin-sp-5) var(--pin-sp-5) var(--pin-sp-4); }
.pin-head h1 {
  font-family: var(--pin-font); font-size: var(--pin-fs-2xl); font-weight: 700;
  line-height: var(--pin-lh-tight); letter-spacing: -.02em; color: var(--pin-text);
}
.pin-head p {
  margin-top: var(--pin-sp-1); font-size: var(--pin-fs-md);
  color: var(--pin-text-muted); max-width: 70ch;
}
.pin-body { flex: 1; padding: 0 var(--pin-sp-5) var(--pin-sp-6); }

/* ── Barra superior móvil ───────────────────────────────────────────────── */
.pin-topbar { display: none; }

/* ── Tarjeta base ───────────────────────────────────────────────────────── */
.pin-card {
  background: var(--pin-surface);
  border: 1px solid var(--pin-line);
  border-radius: var(--pin-r-lg);
  box-shadow: var(--pin-shadow-card);
}

/* ── "Navegar a": árbol completo de la plataforma ─────────────────────────
   Sale del pie del sidebar hacia arriba. Los nodos con hijos se abren al pasar
   el cursor, en cascada. Reemplaza al viejo grupo "Herramientas": acá se ve
   además de qué cuelga cada cosa, que era lo que la lista plana no contaba. */
.pin-nav-wrap { position: relative; }
/* Hereda `.pin-nav-item`: misma tipografía, mismo alto y —con su ícono— el texto
   arranca en la MISMA vertical que los ítems de Secciones. Antes usaba el estilo
   de enlace de pie (13px, sin ícono) y se leía como de otra familia. */
.pin-navbtn { width: 100%; background: transparent; font-family: inherit; cursor: pointer; white-space: nowrap; }
/* 🔴 La flecha lleva su tamaño ACÁ, no en los atributos width/height del SVG.
   `pin-shell.js` los emite, pero cuando el markup del botón lo escribe otra
   página a mano —el panel de Pinamar Datos— es facilísimo omitirlos: entonces un
   SVG con viewBox y sin dimensiones se dibuja enorme, se come el ancho y parte
   "Central Pinamar" en dos renglones. Depender del markup era la trampa. */
.pin-navbtn .pin-navbtn-fl {
  width: 16px; height: 16px; flex-shrink: 0;
  margin-left: auto; transition: transform var(--pin-t-fast);
}
.pin-navbtn.abierto { background: var(--pin-accent-dim); color: var(--pin-text); border-color: var(--pin-line); }
.pin-navbtn.abierto .pin-navbtn-fl { transform: rotate(90deg); }

/* 🔴 `position: fixed`, no absolute: `.pin-sidebar` tiene `overflow-y: auto` y
   eso, por spec, vuelve `auto` también el eje horizontal — un submenú que sale
   hacia la derecha quedaba recortado por el borde de la barra. Fijo escapa a ese
   recorte. La posición la calcula pin-shell.js desde el botón.
   (En móvil el sidebar sí lleva `transform`, que atraparía al fixed; por eso el
   árbol es una función de escritorio y en el cajón va la lista plana.) */
.pin-arbol {
  position: fixed; z-index: 60; padding: 8px; background: var(--pin-bg);
  border: 1px solid var(--pin-line-strong); border-radius: var(--pin-r-md);
  box-shadow: var(--pin-shadow-pop);
}
.pin-arbol[hidden] { display: none; }
.pin-arbol-ul { list-style: none; margin: 0; padding: 0; }
.pin-arbol-li { position: relative; }
/* Los hijos salen HACIA LA DERECHA, en cascada, no hacia abajo.
   `left: 100%` sin separación a propósito: con un hueco entre el padre y el
   submenú, el cursor lo cruza y se pierde el hover a mitad de camino. */
/* Anclados por ABAJO (`bottom`, no `top`): el árbol sale de un botón que está al
   pie del sidebar, así que sus ítems viven pegados al borde inferior de la
   pantalla. Creciendo desde el tope, la lista larga de Central Interna se salía
   fuera de la ventana; creciendo hacia arriba acompaña la dirección del panel. */
.pin-arbol-li.con-hijos > .pin-arbol-ul {
  display: none; position: absolute; left: 100%; bottom: -9px; min-width: 244px;
  padding: 8px; background: var(--pin-bg); border: 1px solid var(--pin-line-strong);
  border-radius: var(--pin-r-md); box-shadow: var(--pin-shadow-pop);
}
/* 🔴 El scroll va SOLO en el último nivel. Un submenú que a su vez tiene hijos no
   puede llevar `overflow`: recortaría a la cascada que sale de él. Con el árbol
   actual el último nivel es `n1` (las herramientas de Central Interna y el Panel
   de Datos); si alguna vez se anida más hondo, hay que mover esta regla. */
.pin-arbol-ul.n1 { max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; }
.pin-arbol-li.con-hijos:hover > .pin-arbol-ul,
.pin-arbol-li.con-hijos:focus-within > .pin-arbol-ul { display: block; }
/* Mismas medidas que `.pin-nav-item`: el menú no puede leerse como de otra
   familia que el sidebar del que sale. */
.pin-arbol-it {
  display: flex; align-items: center; gap: 10px; padding: 11px 10px;
  border-radius: var(--pin-r-sm); font-size: var(--pin-fs-base); font-weight: 500;
  line-height: 1.3; color: var(--pin-text-muted); text-decoration: none;
  transition: background var(--pin-t-fast), color var(--pin-t-fast);
}
a.pin-arbol-it:hover { background: var(--pin-accent-dim); color: var(--pin-text); }
.pin-arbol-it.aca { color: var(--pin-accent); font-weight: 600; }
.pin-arbol-it.dev { color: var(--pin-text-faint); cursor: default; }
.pin-arbol-it em {
  margin-left: auto; font-style: normal; font-family: var(--pin-font-mono);
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pin-text-faint); white-space: nowrap; flex-shrink: 0;
}
.pin-arbol-it.aca em { color: var(--pin-accent); }
.pin-arbol-ext { font-style: normal; font-size: 11px; opacity: .55; }
/* Herramienta a la que todavía no tenés acceso. Se atenúa pero sigue siendo un
   enlace: lleva a la gate, que es donde se solicita. El candado va con
   `margin-left:auto` igual que el `<em>`, así que nunca conviven (un ítem con
   candado no es el actual). */
.pin-arbol-it.bloq { color: var(--pin-text-faint); }
a.pin-arbol-it.bloq:hover { color: var(--pin-text-muted); }
.pin-arbol-lock { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; opacity: .75; }
.pin-arbol-fl { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0;
  opacity: .6; transition: transform var(--pin-t-fast); }
.pin-arbol-it em + .pin-arbol-fl { margin-left: 6px; }

/* ── Modal de solicitud de acceso ────────────────────────────────────────
   No reimplementa el formulario: explica y manda a la gate de la herramienta,
   que es donde vive el flujo real. Dos formularios se desincronizan. */
.pin-modal {
  position: fixed; inset: 0; z-index: 3000; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(2, 8, 5, .78);
}
.pin-modal[hidden] { display: none; }
.pin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: var(--pin-r-sm); cursor: pointer;
  border: 1px solid var(--pin-accent); background: var(--pin-accent);
  color: var(--pin-accent-ink); font-family: var(--pin-font);
  font-size: var(--pin-fs-base); font-weight: 700; text-decoration: none;
  transition: transform var(--pin-t-fast), background var(--pin-t-fast);
}
.pin-btn:hover { transform: translateY(-1px); background: var(--pin-accent-soft); }
.pin-btn.ghost { background: transparent; color: var(--pin-text-muted); border-color: var(--pin-line); }
.pin-btn.ghost:hover { background: var(--pin-accent-dim); color: var(--pin-text); }
.pin-modal-box {
  width: min(440px, 100%); padding: 30px 28px; text-align: center;
  background: var(--pin-bg); border: 1px solid var(--pin-line-strong);
  border-radius: var(--pin-r-lg); box-shadow: var(--pin-shadow-modal);
}
.pin-modal-ic {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: var(--pin-r-pill);
  display: grid; place-items: center; color: var(--pin-warn);
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .38);
}
.pin-modal-box h2 { font-size: var(--pin-fs-lg); font-weight: 600; color: var(--pin-text); margin-bottom: 10px; }
.pin-modal-box p { font-size: var(--pin-fs-base); color: var(--pin-text-muted); line-height: var(--pin-lh); }
.pin-modal-acc { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* ── Scrim del drawer (sólo móvil) ──────────────────────────────────────── */
.pin-scrim {
  position: fixed; inset: 0; z-index: 55; display: none;
  background: rgba(0, 0, 0, .5);
}

/* ════════════════════════════════════════════════════════════════════════════
   MÓVIL — el sidebar pasa a ser un cajón deslizable.
   El corte va en 1024px y no en 768: con la sidebar de 280px, una tabla de
   expedientes en una notebook de 1280 se queda sin ancho útil.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pin-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--pin-shadow-pop);
    transition: transform var(--pin-t) var(--pin-ease);
    width: min(86vw, var(--pin-sidebar-w));
  }
  .pin-drawer-abierto .pin-sidebar { transform: translateX(0); }
  .pin-drawer-abierto .pin-scrim   { display: block; }

  /* Página que ya tiene su propia navegación móvil (Beneficios, con su barra
     inferior de app): abajo de 1024 el sidebar desaparece del todo en vez de
     volverse cajón. Dos navegaciones móviles compitiendo es peor que ninguna. */
  .pin-sin-cajon .pin-sidebar { display: none; }
  .pin-sin-cajon .pin-topbar  { display: none; }

  .pin-main { margin-left: 0; }

  .pin-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: var(--pin-sp-2);
    height: var(--pin-topbar-h); padding: 0 var(--pin-sp-3);
    background: var(--pin-bg); border-bottom: 1px solid var(--pin-line);
  }
  .pin-topbar-btn {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--pin-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--pin-line);
    color: var(--pin-text); cursor: pointer;
  }
  .pin-topbar-txt {
    font-size: var(--pin-fs-md); font-weight: 600; color: var(--pin-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pin-topbar-logo { margin-left: auto; width: 30px; height: 30px; flex-shrink: 0; }

  .pin-head { padding: var(--pin-sp-4) var(--pin-sp-3) var(--pin-sp-3); }
  .pin-head h1 { font-size: var(--pin-fs-xl); }
  .pin-head p  { font-size: var(--pin-fs-base); }
  .pin-body { padding: 0 var(--pin-sp-3) var(--pin-sp-5); }
}

/* El cajón no debe animarse para quien pidió menos movimiento, pero SÍ tiene
   que seguir abriéndose: `transition: none` y nada más. */
@media (prefers-reduced-motion: reduce) {
  .pin-sidebar, .pin-nav-item, .pin-side-link, .pin-user-act { transition: none; }
}