/* ════════════════════════════════════════════════════════════════════════════
   LA BARRA LATERAL DE OBRAS — lo que es SÓLO de este módulo
   ════════════════════════════════════════════════════════════════════════════
   Existe por una razón concreta y medida (03-sep-2026): el sistema de diseño
   (`pinamar-ui.css`) y el set de íconos del shell (`pin-shell.js`) los cargan
   páginas de OTRAS herramientas —Beneficios entre ellas—, así que un retoque
   que sólo le hace falta a Obras, escrito ahí, le dispara el aviso de «hay una
   versión nueva» a los 267 jubilados que usan Beneficios. Pedido textual del
   usuario: *«buscá otra salida para el ícono, que no toque Beneficios»*.

   🔴 ESTA HOJA LA CARGAN LAS DOS PÁGINAS QUE DIBUJAN LA BARRA DE OBRAS, y sólo
   ésas: `obras.html` (que declara sus secciones a mano) y `accesos.html` (que
   la reconstruye con `obras-nav.js` cuando llega con `?de=obras`). Si algún día
   aparece una tercera, hay que sumarle el `<link>` — sin él, el ícono queda en
   blanco y el ítem del pie vuelve a latir, sin ningún error.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── El ícono de «Solicitar una obra» ────────────────────────────────────────
   🔴 POR QUÉ SE PINTA DESDE ACÁ Y NO SE AGREGA AL SET DEL SHELL. El shell
   resuelve `icono` contra un mapa propio y, ante un nombre que no conoce,
   dibuja un `<svg>` VACÍO — sin ningún error. Ese hueco es justamente lo que
   esta regla rellena. Las alternativas se descartaron con motivo:
     · agregarlo al set de `pin-shell.js` → lo cargan 6 páginas y mueve
       Beneficios y Estadísticas, que es lo que el usuario pidió evitar;
     · reusar un ícono ya tomado → `sobre` es «Mi bandeja» y `obras` (carpeta)
       es «Expedientes»: un mismo dibujo con dos significados en la misma barra
       es de lo que más cuesta desaprender, y eso queda para siempre.

   🔴 VA CON `mask` Y `currentColor`, NO con `background-image`. Un fondo trae
   el color horneado en el archivo, así que no seguiría al estado ACTIVO —que
   pinta el ítem de verde— ni al cambio de tema. Con máscara, el ícono toma
   exactamente el color del texto, igual que los del shell.

   El dibujo es una hoja con un más: PEDIR una obra. Cuatro trazos y nada más:
   a 18 px, más detalle se vuelve una mancha. */
:root {
  --ob-ic-pedido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5'/%3E%3Cpolyline points='14 3 20 9 20 12'/%3E%3Cline x1='17' y1='15' x2='17' y2='21'/%3E%3Cline x1='14' y1='18' x2='20' y2='18'/%3E%3C/svg%3E");
}

/* 🔴 Dos selectores porque el shell emite el ítem de DOS formas distintas: en
   `obras.html` es una vista propia y sale como `<button data-seccion="…">`; en
   `accesos.html` es un enlace de vuelta y sale como `<a href="obras.html?v=…">`
   SIN `data-seccion` (una sección con `url` no lo lleva). Con uno solo, el
   ícono aparece en una pantalla y falta en la otra. */
.pin-sidebar [data-seccion="solicitar"] .pin-nav-ic,
.pin-sidebar a[href*="v=solicitar"] .pin-nav-ic {
  background-color: currentColor;
  -webkit-mask: var(--ob-ic-pedido) center / contain no-repeat;
  mask: var(--ob-ic-pedido) center / contain no-repeat;
}

/* ── «Solicitar una obra» va PEGADA A LA LÍNEA, no debajo de «Archivadas» ─────
   Pedido del usuario, y la primera versión se quedó a mitad de camino: al
   volverla un ítem normal quedó pegada arriba, con todo el hueco del sidebar
   debajo — *«te pedí arriba de la línea, el botón lo pusiste justo abajo de
   Archivadas»*. Tiene que caer al fondo de ese hueco, tocando la línea que
   separa el pie, para quedar **separada de las otras secciones** — que es
   textualmente lo que se pidió: «así no queda junta con las otras opciones».

   🔴 Son las DOS mitades, y con una sola no pasa nada:
     · `.pin-nav` crece para ocupar el hueco (viene `flex: 0 0 auto`, o sea que
       mide lo que sus ítems y el sobrante queda por fuera, fuera de su alcance);
     · el ítem se empuja al fondo con `margin-top: auto`.
   🔴 `flex: 1 0 auto` y NO `flex: 1`: con base 0 la lista podría encogerse por
   debajo de su contenido en una pantalla baja y recortar ítems. Con `0 auto`
   nunca baja de su alto natural — crece si sobra, y si falta, el sidebar
   scrollea como siempre.
   ⚠️ El `margin-bottom` lo despega de la línea: pegado contra ella se lee como
   si formara parte del pie, que es justo de donde se lo sacó. Pedido del usuario.
   ⚠️ Si no hay sobrante (pantalla corta), `margin-top: auto` vale 0 y el ítem
   queda donde estaba: no puede romper nada.
   ⚠️ Los mismos dos selectores que el ícono: el shell emite este ítem como
   `<button data-seccion>` en `obras.html` y como `<a href>` en `accesos.html`. */
.pin-sidebar .pin-nav { flex: 1 0 auto; }
.pin-sidebar .pin-nav [data-seccion="solicitar"],
.pin-sidebar .pin-nav a[href*="v=solicitar"] { margin-top: auto; margin-bottom: 12px; }

/* ── En el pie no late nada ───────────────────────────────────────────────────
   La ranura del pie trae un anillo que respira: se diseñó cuando ahí vivía sólo
   el Manual, para invitar a entrar. Decisión del usuario (03-sep-2026): **que
   nada lata**. Con una pantalla que ya se usa todos los días, un elemento que se
   mueve solo en el rincón no invita — distrae.

   🔴 Se apaga DESDE ACÁ y no en la hoja compartida, que la cargan 16 páginas.
   Se puede porque `obras.html` es hoy la ÚNICA del sitio que usa esa ranura
   (verificado, no supuesto).
   🔴 Y con un selector MÁS ESPECÍFICO, no confiando en quedar más abajo: dos
   reglas de igual peso las decide el orden de fuente, y el día que alguien
   reordene los `<link>` el latido volvería — con el mismo síntoma invisible que
   ya mordió en este proyecto con el aviso del mapa.
   ⚠️ Alcanza SÓLO al ítem del pie. La invitación a instalar de Beneficios usa
   el mismo latido con otras clases y no se toca. */
.pin-sidebar .pin-side-pie .pin-nav-pie::after { animation: none; opacity: 0; }