/* ============================================================================
   PIN-ARMAZON — el armazón de las herramientas de Central (06-10-2026)

   Pedido del usuario: *«la estética tiene que ser igual que el panel de datos
   de Pinamar Datos… no lo supongas nada, calculá detalle por detalle, medición
   por medición… esa va a ser nuestra estética en todas las herramientas, pero
   iniciemos con Presentaciones»*.

   QUÉ ES. La barra oscura que flota, la cabecera con el escudo y sus anillos,
   la trama y las partículas del fondo, las tarjetas de vidrio y las fichas de
   configuración: lo que hace que el Panel de Datos se vea como se ve.

   🔴 DE DÓNDE SALEN LOS VALORES. De su hoja
      (`=PINAMAR_DATOS=/public/command/css/command.css`), regla por regla, y se
      COMPRUEBAN con `node medir-armazon.js`: abre los dos lados en un Chrome de
      verdad y compara lo que el navegador terminó aplicando —pieza por pieza,
      propiedad por propiedad, en los dos temas y con el cursor encima—. Un
      valor de acá no se cambia «a ojo»: se cambia y se vuelve a medir.
      Lo que NO es igual a propósito está escrito en esa herramienta, con su
      motivo, y en `docs/armazon.md`.

   🔴 SE ELIGE, NO SE HEREDA. Todo cuelga de `.pin-armazon`, la clase del
      `<body>`: cargar esta hoja en una página que no la lleva no le cambia nada.
      Hoy la usa UNA página. Cada herramienta que se pase suma la clase, carga
      esta hoja DESPUÉS de `pinamar-ui.css` —pisa reglas del shell con el mismo
      peso, así que gana por orden— y deja de cargar `styles.css` y `tema.css`,
      que son del sitio público.
   🔴 EL SHELL NO SE TOCÓ. `pin-shell.js` dibuja la barra de siempre; esta hoja
      la viste. Por eso las reglas de la barra van con las clases `.pin-*` del
      shell y las de la cabecera con las `g-*` de su origen (es la misma pieza
      que en el Panel de Datos y en Venta Ambulante, con los mismos nombres).

   ⚠️ LO QUE ESTA HOJA SUPONE DE LA PÁGINA (ver `presentaciones.html`):
        <body class="pin-armazon">
          .g-fondo-manchas · .g-fondo-trama · canvas#gParticulas
          aside.pin-sidebar#pinSidebar · .pin-scrim#pinScrim
          .pin-main > .pin-topbar (celular) + .g-lienzo > .g-cabecera + .g-vista…
   ⚠️ Reglas de oro, que son las del panel y costaron caro allá: nada de
      `backdrop-filter` en tarjetas, ninguna sombra animada en bucle sobre algo
      grande, y ningún `transform` en un contenedor que envuelva un `fixed`.
   ============================================================================ */

/* ── La paleta del panel ────────────────────────────────────────────────────
   Tema oscuro («Futurista») de base; el claro («Clásico») la pisa abajo. Son
   los valores de `command.css › :root` y de su bloque `[data-theme="light"]`.
   ⚠️ No son los `--pin-*`: el panel usa otro gris para el texto secundario y
      otro verde para sus tarjetas, y «igual» es con los suyos. */
:is(.pin-armazon, .pin-armazon-barra) {
  --g-fondo:           #030805;
  --g-tarjeta:         rgba(11, 27, 17, 0.66);
  --g-tarjeta-encima:  rgba(15, 35, 20, 0.6);
  --g-borde:           rgba(0, 200, 83, 0.15);
  --g-borde-brillo:    rgba(0, 200, 83, 0.4);
  --g-verde:           var(--pin-accent);
  --g-verde-tenue:     var(--pin-accent-dim);
  --g-ambar:           #f59e0b;
  --g-rosa:            #f43f5e;
  --g-texto:           #f0fdf4;
  --g-texto-2:         #86efac;
  --g-texto-3:         #22c55e;
  /* La placa (la barra) y la cabecera: los mismos tres verdes en los dos temas. */
  --g-placa-a:         #015437;
  --g-placa-b:         #013a27;
  /* Lo que se escribe ENCIMA de la placa: el claro de toda la barra. Es el mismo
     valor de la regla que la pinta, más abajo; tiene nombre para las piezas que
     se arman con los colores de la placa fuera de ella (el visor de una página). */
  --g-placa-tinta:     #ddf6ea;
  --g-cab-centro:      #00895c;
  --g-cab-medio:       #015437;
  --g-cab-borde:       #013a27;
  --g-transicion:      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background-color 0.22s ease, color 0.18s ease, opacity 0.18s ease;
}
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) {
  --g-fondo:           #ffffff;
  --g-tarjeta:         #eaf4ee;
  --g-tarjeta-encima:  #dfeee6;
  --g-borde:           #cfe4d8;
  --g-borde-brillo:    rgba(0, 114, 66, 0.45);
  --g-verde:           #007242;
  --g-verde-tenue:     rgba(0, 114, 66, 0.08);
  --g-ambar:           #d97706;
  --g-rosa:            #e11d48;
  --g-texto:           #333333;
  --g-texto-2:         #4f5f56;
  --g-texto-3:         #6d7972;
}

/* ── La base ────────────────────────────────────────────────────────────────
   `:where()` deja estas reglas SIN peso: cualquier regla del shell o de la
   página les gana, que es lo que tiene que pasar con un reinicio. */
:where(.pin-armazon), :where(.pin-armazon) *, :where(.pin-armazon) *::before, :where(.pin-armazon) *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  /* Como en el panel (y como en el resto de Central): el texto de la pantalla
     no se selecciona; el de los campos, sí. */
  user-select: none; -webkit-user-select: none;
}
:where(.pin-armazon) input, :where(.pin-armazon) textarea, :where(.pin-armazon) [contenteditable] {
  user-select: text; -webkit-user-select: text;
}
/* El atributo `hidden` siempre oculta, aunque el elemento tenga su `display`. */
.pin-armazon [hidden] { display: none !important; }

.pin-armazon {
  font-family: var(--pin-font);
  /* 🔴 `line-height: normal`, como el panel: cada texto de acá mide lo que mide
     allá. Central traía 1.6 del sitio público y 1.55 de `.pin-app`. */
  line-height: normal;
  background: var(--g-fondo);
  color: var(--g-texto);
  min-height: 100vh;
}
/* Hilo verde institucional en el tope, sólo en el tema claro. */
[data-theme="clasico"] .pin-armazon::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #007242, #00a05c 50%, #007242);
  z-index: 3000; pointer-events: none;
}

/* La barra de scroll. `color-scheme` le dice el tema a los controles NATIVOS:
   sin esto un Windows en modo oscuro dibuja una franja negra al costado del
   tema claro. Acá scrollea el documento (allá, el contenido), así que va en
   `<html>`; `:has()` lo acota a las páginas con armazón. */
html:has(> .pin-armazon) { scrollbar-width: thin; }
html[data-theme="clasico"]:has(> .pin-armazon) { color-scheme: light; scrollbar-color: rgba(0, 114, 66, .32) transparent; }
html:not([data-theme="clasico"]):has(> .pin-armazon) { color-scheme: dark; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.pin-armazon, .pin-armazon .pin-sidebar { scrollbar-width: thin; }
[data-theme="clasico"] .pin-armazon, [data-theme="clasico"] .pin-armazon .pin-sidebar { scrollbar-color: rgba(0, 114, 66, .32) transparent; }
html:not([data-theme="clasico"]) .pin-armazon, html:not([data-theme="clasico"]) .pin-armazon .pin-sidebar { scrollbar-color: rgba(255, 255, 255, .22) transparent; }

/* ── El fondo ───────────────────────────────────────────────────────────────
   Tres capas fijas detrás de todo: dos manchas de color, la trama de 40 px y
   las partículas (`pin-armazon.js`).
   ⚠️ Sin `filter` en las manchas: un desenfoque de pantalla completa se
      recompone en cada cuadro de scroll.
   ⚠️ El alfa de la trama es bajísimo A PROPÓSITO: una línea cruza la pantalla
      entera y suma muchísima tinta. */
.g-fondo-manchas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 50%, rgba(0, 200, 83, 0.06), transparent 42%),
    radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.06), transparent 42%);
}
[data-theme="clasico"] .g-fondo-manchas {
  background:
    radial-gradient(circle at 15% 50%, rgba(0, 114, 66, 0.06), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(124, 58, 237, 0.04), transparent 30%);
}
.g-fondo-trama {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
[data-theme="clasico"] .g-fondo-trama {
  background-image:
    linear-gradient(rgba(0, 114, 66, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 66, 0.05) 1px, transparent 1px);
}
/* Arranca oculto: lo muestra el JS, que también lo pausa. */
.g-particulas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; display: none;
}

/* ── El contenido ───────────────────────────────────────────────────────────
   🔴 `position` + `z-index`: las capas del fondo son `fixed`, y un elemento
      posicionado se pinta ENCIMA del contenido que no lo está. Sin esto la
      trama taparía las tarjetas.
   ⚠️ `display: block` (el shell lo trae en `flex`): la cabecera se ensancha con
      márgenes negativos, y un hijo de un flex en columna con `width: 100%` no
      puede. Los hijos vuelven a `width: auto` por lo mismo. */
.pin-armazon .pin-main { display: block; position: relative; z-index: 1; }
.pin-armazon .pin-main > * { width: auto; }
/* El lienzo: el relleno del contenido. Va en variables para que la cabecera
   pueda descontarlo y quedar a la altura de la barra (las dos en y = 14). */
.g-lienzo {
  --mc-pad-t: 32px; --mc-pad-x: 40px;
  padding: var(--mc-pad-t) var(--mc-pad-x) 64px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRA — oscura en LOS DOS temas: es lo que le da el carácter institucional.
   La dibuja `pin-shell.js`; acá se la viste.
   ══════════════════════════════════════════════════════════════════════════ */

/* Flota sólo en escritorio. Debajo de 1024 la barra es el cajón del shell —el
   corte de Central, no el de 768 del panel— y un cajón no flota ni se redondea. */
@media (min-width: 1025px) {
  :is(.pin-armazon, .pin-armazon-barra) .pin-sidebar {
    top: 14px; left: 14px; bottom: 14px;
    width: 280px; height: auto;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(1, 22, 14, .2);
  }
  /* En claro la sombra es otra: así está en el panel, medido. */
  [data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-sidebar { box-shadow: 4px 0 24px rgba(18, 53, 36, 0.06); }
  /* 294 = 280 de barra + los 14 de aire. */
  :is(.pin-armazon, .pin-armazon-barra) .pin-main { margin-left: 294px; }
}
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar {
  background: linear-gradient(180deg, var(--g-placa-a) 0%, var(--g-placa-b) 100%);
  border-right: 1px solid rgba(134, 239, 172, .16);
}
/* 🔴 El `:not()` deja AFUERA al menú del engranaje, que es una tarjeta CLARA
   viviendo adentro de una barra oscura: con este color sus ítems quedarían
   invisibles. Si se suma otra tarjeta clara adentro de la barra, va en esta
   lista. */
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar,
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar *:not(.pin-menu, .pin-menu *) { color: var(--g-placa-tinta); }

/* La marca: el logotipo solo y más grande. El nombre NO se repite acá —lo dice
   la cabecera, que es donde vive el <h1>—, pero queda en el documento para que
   el enlace tenga nombre para un lector de pantalla. */
:is(.pin-armazon, .pin-armazon-barra) .pin-brand {
  flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center;
  gap: 12px; padding: 6px 0 22px; margin-bottom: 28px; text-align: start;
}
:is(.pin-armazon, .pin-armazon-barra) .pin-brand-logo {
  height: 54px; width: auto;
  /* Corrido a la izquierda dentro de un bloque centrado: la medida del panel. */
  margin-right: 22px;
  filter: brightness(0) invert(1); opacity: 1;
}
:is(.pin-armazon, .pin-armazon-barra) .pin-brand-txt {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* El rótulo de grupo: al 72 %, que es donde llega al contraste mínimo sobre el
   verde oscuro (al 45 % daba 3,2). */
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar .pin-grupo { color: rgba(221, 246, 234, .72); }

/* La lista de secciones. `flex: 1` como allá: ocupa el alto que sobra. */
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar .pin-nav { flex: 1 1 0%; }
:is(.pin-armazon, .pin-armazon-barra) .pin-nav > .pin-nav-item { position: relative; }
:is(.pin-armazon, .pin-armazon-barra) .pin-nav > .pin-nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
:is(.pin-armazon, .pin-armazon-barra) .pin-nav > .pin-nav-item.activa { background: rgba(34, 197, 94, .2); color: #fff; }
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-nav > .pin-nav-item.activa { border-color: rgba(0, 153, 77, 0.28); }
/* El filo encendido del ítem elegido: late de 12 a 20 px de resplandor cada 3,2 s. */
:is(.pin-armazon, .pin-armazon-barra) .pin-nav > .pin-nav-item.activa::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: #4ade80; box-shadow: 0 0 12px #22c55e;
  animation: g-filo 3.2s ease-in-out infinite;
}
@keyframes g-filo { 50% { box-shadow: 0 0 20px #22c55e; } }

/* El pie: el enlace a Central, el divisor y la cuenta, anclados abajo. */
:is(.pin-armazon, .pin-armazon-barra) .pin-side-foot {
  display: block; flex-direction: row; gap: normal;
  margin-top: auto; padding-top: 18px; border-top: 0; position: relative;
}
:is(.pin-armazon, .pin-armazon-barra) .pin-side-foot > .pin-nav-wrap { margin-bottom: 10px; }
:is(.pin-armazon, .pin-armazon-barra) .pin-side-foot .pin-navbtn { text-decoration: none; }
.g-divisor { height: 1px; background: var(--g-borde); margin-bottom: 14px; }

:is(.pin-armazon, .pin-armazon-barra) .pin-user {
  gap: 12px; padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--pin-r-md);
}
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-user { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.07); }
:is(.pin-armazon, .pin-armazon-barra) .pin-user-av,
:is(.pin-armazon, .pin-armazon-barra) .pin-user-av.con-foto {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--g-verde);
}
/* El nombre y el correo, en bloque: el bloque mide lo que mide su texto (y se
   encoge si no entra), y al engranaje lo empuja su propio margen. */
:is(.pin-armazon, .pin-armazon-barra) .pin-user-txt { display: block; flex: 0 1 auto; flex-direction: row; }
:is(.pin-armazon, .pin-armazon-barra) .pin-user-txt b { display: block; font-size: 0.9rem; font-weight: 600; line-height: normal; }
:is(.pin-armazon, .pin-armazon-barra) .pin-user-txt span { display: block; font-size: 0.75rem; line-height: normal; }

/* El engranaje.
   ⚰️ EN EL PANEL, CON EL CURSOR ENCIMA, EL ÍCONO DESAPARECE EN EL TEMA CLARO
      (medido): su hoja pide «fondo claro + ícono verde», pero la regla que pinta
      de claro todo lo de la barra le gana al verde, y queda claro sobre claro.
      Es lo ÚNICO de la barra que acá NO se copió tal cual: se dejó lo que aquella
      hoja quiso hacer. Está anotado como diferencia en `medir-armazon.js`. */
:is(.pin-armazon, .pin-armazon-barra) .pin-user-act {
  width: auto; height: auto; margin-left: auto; align-self: flex-start; line-height: 0;
  display: block; align-items: normal; justify-content: normal;
  background: transparent; border: none; padding: 6px; border-radius: 10px;
  transition: var(--g-transicion);
}
:is(.pin-armazon, .pin-armazon-barra) .pin-user-act svg { width: 19px; height: 19px; }
:is(.pin-armazon, .pin-armazon-barra) .pin-user-act:hover,
:is(.pin-armazon, .pin-armazon-barra) .pin-user-act[aria-expanded="true"] { background: var(--g-tarjeta-encima); border: none; }
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar .pin-user-act:hover,
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar .pin-user-act:hover *,
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar .pin-user-act[aria-expanded="true"],
:is(.pin-armazon, .pin-armazon-barra) .pin-sidebar .pin-user-act[aria-expanded="true"] * { color: var(--g-verde); }

/* El menú del engranaje: se abre arriba de TODO el pie (no sólo de la cuenta),
   como allá. Por eso el ancla es el pie y no el envoltorio del usuario. */
:is(.pin-armazon, .pin-armazon-barra) .pin-user-wrap { position: static; }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu {
  left: 0; right: 0; bottom: calc(100% - 6px); z-index: 60;
  background: rgba(6, 14, 9, 0.98); border: 1px solid var(--g-borde);
  border-radius: var(--pin-r-md); padding: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: g-panel-entra 0.18s ease both;
}
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-menu { background: #ffffff; box-shadow: 0 18px 50px rgba(18, 53, 36, 0.18); }
@keyframes g-panel-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-label {
  font-family: inherit; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--g-texto-3); padding: 8px 12px 4px;
}
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-menu-label { color: var(--g-verde); opacity: 0.72; }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-item,
:is(.pin-armazon, .pin-armazon-barra) button.pin-menu-item {
  gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--g-texto-2); font-family: var(--pin-font); font-weight: 500; font-size: 0.86rem;
  transition: var(--g-transicion);
}
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-item:hover { background: var(--g-tarjeta-encima); color: var(--g-texto); }
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-menu-item { color: var(--g-verde); }
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-menu-item:hover { background: var(--g-verde-tenue); color: var(--g-verde); }
/* «Cerrar sesión» conserva su rojo al pasar: es de Central (allá vive en otra pantalla). */
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-item.peligro:hover,
[data-theme="clasico"] :is(.pin-armazon, .pin-armazon-barra) .pin-menu-item.peligro:hover { background: rgba(244, 63, 94, .1); color: var(--g-rosa); }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-ic { width: 20px; height: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-ic svg { width: 17px; height: 17px; display: block; }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-sep { height: 1px; background: var(--g-borde); margin: 6px 4px; }
/* Si lo ÚNICO propio de la herramienta en el menú está oculto (una sección que
   es sólo de quien administra), su separador también: si no, el menú de todos
   los demás arranca con una raya suelta debajo del rótulo. */
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-label + .pin-menu-item[hidden] + .pin-menu-sep { display: none; }
:is(.pin-armazon, .pin-armazon-barra) .pin-menu-ver .version-badge { color: var(--g-texto-3); }

/* ══════════════════════════════════════════════════════════════════════════
   LA CABECERA — la marca una sola vez, a la izquierda; la sección, al medio; y
   a la derecha, el estado en cifras. Misma pieza que en el Panel de Datos.
   ══════════════════════════════════════════════════════════════════════════ */
.g-cabecera {
  position: relative; overflow: hidden; color: #fff;
  display: flex; align-items: center; gap: 22px; padding: 18px 30px;
  border-radius: 20px; box-shadow: 0 18px 48px rgba(1, 22, 14, .2);
  /* Se descuenta el relleno del lienzo para quedar a la MISMA altura que la barra. */
  margin: calc(14px - var(--mc-pad-t, 0px)) calc(14px - var(--mc-pad-x, 0px)) 24px;
  background: radial-gradient(120% 180% at 15% 0%,
    var(--g-cab-centro) 0%, var(--g-cab-medio) 60%, var(--g-cab-borde) 100%);
}
/* La luz que cruza la banda. Lenta a propósito: a ocho horas de pantalla, un
   movimiento rápido cansa. */
.g-cab-barrido {
  position: absolute; inset: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, .14), transparent);
  animation: g-cab-barrido 9s linear infinite;
  z-index: 2;
}
@keyframes g-cab-barrido { 0% { left: -40%; } 60%, 100% { left: 140%; } }
.g-cab-astro { position: relative; width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center; }
.g-cab-astro img { width: 26px; height: auto; opacity: .95; }
.g-cab-anillo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(134, 239, 172, .35); border-top-color: #22c55e;
  animation: g-cab-gira 7s linear infinite;
}
.g-cab-anillo.dos {
  inset: 9px; border-color: rgba(134, 239, 172, .18); border-bottom-color: #4ade80;
  animation-duration: 11s; animation-direction: reverse;
}
@keyframes g-cab-gira { to { transform: rotate(360deg); } }
.g-cab-marca h1, .g-cab-marca .g-cab-h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.15; }
.g-cab-marca small {
  display: block; margin-top: 3px; font-family: var(--pin-font-mono, 'DM Mono', monospace);
  font-size: 10.5px; letter-spacing: .08em; color: #bbf7d0; opacity: .8;
}
/* El nombre de la sección: ABSOLUTO, para estar centrado respecto de la banda
   entera y no del hueco que dejan la marca y las cifras. Por DEBAJO del reflejo. */
.g-cab-seccion {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--pin-font); font-size: 1.85rem; font-weight: 700;
  color: #ffffff; letter-spacing: -.015em; white-space: nowrap;
  text-shadow: 0 2px 18px rgba(1, 22, 14, .45);
  pointer-events: none; z-index: 1;
}
.g-cab-seccion:empty { display: none; }
/* Debajo de 1280 la marca y las cifras ya se tocan con el título. */
@media (max-width: 1279px) { .g-cab-seccion { display: none; } }
.g-cab-cifras { margin-left: auto; display: flex; gap: 34px; }
.g-cab-cifras > div { text-align: right; }
.g-cab-cifras b {
  display: block; font-family: var(--pin-font-mono, 'DM Mono', monospace);
  font-size: 34px; font-weight: 500; line-height: 1; color: #f0fff7;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(34, 197, 94, .4);
}
.g-cab-cifras span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .68; }
.g-cab-cifras .ok b { color: #86efac; }
/* Mientras no hay cifras, la cabecera no reserva un hueco. */
.g-cab-cifras:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LAS VISTAS, SU ENCABEZADO Y LAS TARJETAS
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ SOLO OPACIDAD, sin `transform`: una animación de transform en la vista la
   vuelve el marco de cualquier `fixed` que tenga adentro. */
.g-vista { display: none; animation: g-vista-entra 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.g-vista.activa { display: block; }
@keyframes g-vista-entra { from { opacity: 0; } to { opacity: 1; } }

/* El encabezado de cada vista: sólo la bajada, centrada. El título se LEE en la
   cabecera; el <h2> sale de la vista pero no del documento, así el orden de
   encabezados (h1 en la cabecera, h2 por vista) se mantiene para un lector. */
.g-encabezado {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 18px; margin-bottom: 40px;
  /* ⚠️ Este bloque anima `transform` al entrar, y eso crea un contexto de
     apilamiento: sin `position` + `z-index`, un desplegable suyo quedaría
     tapado por las tarjetas de abajo. */
  position: relative; z-index: 20;
}
.g-titulo { max-width: 820px; }
.g-titulo h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.g-titulo p { color: var(--g-texto-2); font-size: 1.1rem; margin-left: auto; margin-right: auto; }

/* La entrada escalonada: sube 14 px y aparece. */
@keyframes g-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.g-entra-1 { animation: g-sube 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.03s; }
.g-entra-2 { animation: g-sube 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.07s; }
.g-entra-3 { animation: g-sube 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.11s; }
.g-entra-4 { animation: g-sube 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.15s; }

/* El vidrio: la superficie de toda tarjeta. Sin `backdrop-filter`. */
.g-vidrio {
  background: var(--g-tarjeta);
  border: 1px solid var(--g-borde);
  border-radius: var(--pin-r-lg);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.01), 0 10px 40px rgba(0, 0, 0, 0.5);
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="clasico"] .g-vidrio {
  border-color: rgba(0, 153, 77, 0.18);
  box-shadow:
    0 4px 24px rgba(0, 100, 50, 0.07),
    0 1px 4px rgba(0, 100, 50, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
[data-theme="clasico"] .g-vidrio:hover {
  background: var(--g-tarjeta-encima);
  border-color: rgba(0, 153, 77, 0.35);
  box-shadow: 0 8px 32px rgba(0, 100, 50, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* La tarjeta que se elige: centrada, con su resplandor al pasar el cursor y la
   luz que lo sigue.
   ⚰️ NO SE LEVANTA. La hoja del panel pide `translateY(-5px) scale(1.02)` al
      pasar el cursor, y medido NO ocurre: la animación de entrada deja fijado
      su último cuadro y le gana. Acá no se escribió, para que quede como SE VE
      allá y no como aquella hoja dice. (Con «reducir movimiento» activado allá
      sí se levanta —la entrada se apaga—: una rareza que tampoco se copió.) */
.g-tarjeta {
  padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer; transition: var(--g-transicion);
  position: relative; text-decoration: none; color: inherit;
}
.g-tarjeta.g-vidrio:hover {
  border-color: var(--g-borde-brillo);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 200, 83, 0.40),
    0 0 30px 6px rgba(0, 200, 83, 0.32),
    inset 0 0 20px rgba(0, 200, 83, 0.05);
}
[data-theme="clasico"] .g-tarjeta.g-vidrio:hover {
  background: var(--g-tarjeta-encima);
  border-color: rgba(0, 153, 77, 0.55);
  box-shadow:
    0 12px 34px rgba(0, 100, 50, 0.16),
    0 0 0 1px rgba(0, 153, 77, 0.38),
    0 0 28px 6px rgba(0, 153, 77, 0.30);
}
/* La luz que sigue al cursor: `pin-armazon.js` actualiza --mx/--my. */
.g-tarjeta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 230, 118, 0.14), transparent 62%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 1;
}
.g-tarjeta:hover::after { opacity: 1; }
.g-tarjeta > * { position: relative; z-index: 2; }
/* Todas las tarjetas de una grilla miden lo mismo: el último renglón (la chapa)
   se empuja al pie para que quede a la misma altura en todas. */
.g-tarjeta > *:last-child { margin-top: auto; }
/* El título de la tarjeta: <h3> o <h4>, según qué encabezado tenga arriba la página. */
.g-tarjeta h3, .g-tarjeta h4 { font-family: var(--pin-font); font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }
.g-tarjeta p { font-size: 0.75rem; color: var(--g-texto-2); margin-bottom: 8px; }
.g-tarjeta:focus-visible { outline: 2px solid var(--g-verde); outline-offset: 3px; }

/* La chapa: el renglón de estado al pie de la tarjeta. */
.g-chapa {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  background: rgba(0, 200, 83, 0.15); color: var(--g-verde); border: 1px solid rgba(0, 200, 83, 0.3);
}
[data-theme="clasico"] .g-chapa { background: rgba(0, 153, 77, 0.12); color: #00994d; border-color: rgba(0, 153, 77, 0.3); }
.g-chapa-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
/* La chapa de «ojo con esto», en ámbar (allá, «por vencer»). */
.g-chapa.aviso { background: rgba(245, 158, 11, 0.15); color: var(--g-ambar); border-color: rgba(245, 158, 11, 0.3); }
[data-theme="clasico"] .g-chapa.aviso { background: rgba(217, 119, 6, 0.12); color: #d97706; border-color: rgba(217, 119, 6, 0.3); }

/* La imagen enmarcada dentro de una tarjeta: allá es la foto redonda del
   secretario; acá, lo que la página ponga (la forma y el tamaño son suyos).
   Con el cursor sobre la tarjeta se enciende su borde y crece un 4 %. */
.g-foto {
  background-color: var(--g-tarjeta-encima);
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
  transition: var(--g-transicion);
  overflow: hidden;
}
.g-tarjeta:hover .g-foto { border-color: var(--g-borde-brillo); transform: scale(1.04); }

/* Lo que se dice y no se ve: sale de la vista pero NO del documento, así un
   lector de pantalla lo sigue encontrando. `display: none` lo borraría. */
.g-solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CONFIGURACIÓN — una columna centrada de fichas, como «Accesos especiales»
   ══════════════════════════════════════════════════════════════════════════ */
.g-config { display: flex; gap: 22px; align-items: flex-start; justify-content: center; }
.g-config-col { flex: 0 1 780px; min-width: 0; max-width: 780px; }
/* Lo que entra deslizándose es el PANEL de adentro, no la columna. */
.g-panel { animation: g-panel-entra 0.34s ease both; }
/* El encabezado de una vista de configuración comparte esa columna. */
.g-vista.g-de-config .g-encabezado { max-width: 780px; margin-left: auto; margin-right: auto; }

.g-ficha { padding: 28px; display: flex; flex-direction: column; width: 100%; }
.g-ficha-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.g-ficha-cab h3 { font-family: var(--pin-font); font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.g-ficha-cab p { font-size: 0.8rem; color: var(--g-texto-2); }
.g-ficha-ic {
  font-size: 1.6rem; flex-shrink: 0; width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: var(--g-verde);
}
[data-theme="clasico"] .g-ficha-ic { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.07); }
.g-ficha-ic svg { width: 24px; height: 24px; }
.g-ficha-div { height: 1px; background: rgba(255, 255, 255, 0.07); margin-bottom: 20px; }
[data-theme="clasico"] .g-ficha-div { background: rgba(0, 0, 0, 0.08); }

/* La insignia al lado de un título («Solo admin»). */
.g-insignia {
  font-family: var(--pin-font); font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0, 200, 83, 0.15); color: var(--g-verde); border: 1px solid rgba(0, 200, 83, 0.3);
  vertical-align: middle;
}
[data-theme="clasico"] .g-insignia { background: rgba(0, 153, 77, 0.12); color: #00994d; border-color: rgba(0, 153, 77, 0.3); }

/* Un subtítulo dentro de una ficha, con su contador. */
.g-sub { font-family: var(--pin-font); font-weight: 700; font-size: 0.9rem; color: var(--g-texto); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.g-cuenta { background: rgba(255, 255, 255, 0.1); color: var(--g-texto-2); font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
/* ⚰️ En el tema claro del panel esta píldora no se ve: blanco al 10 % sobre una
   ficha clara. Acá lleva un verde tenue. Anotado en `medir-armazon.js`. */
[data-theme="clasico"] .g-cuenta { background: rgba(0, 114, 66, 0.1); }

/* Un renglón de una lista: quién, y a la derecha qué se le puede hacer. */
.g-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 7px;
}
.g-fila-info { min-width: 0; }
.g-fila-nombre { font-weight: 700; color: var(--g-texto); font-size: 0.88rem; }
.g-fila-dato { color: var(--g-texto-2); font-size: 0.78rem; margin-top: 1px; word-break: break-all; }
.g-fila-acc { display: flex; gap: 7px; flex: none; }

/* Los botones chicos de un renglón. */
.g-btn-chico {
  border: 1px solid transparent; border-radius: 8px; padding: 6px 12px;
  font-family: var(--pin-font); font-weight: 600; font-size: 0.78rem;
  cursor: pointer; white-space: nowrap;
  transition: filter 0.15s ease, background 0.15s ease;
}
.g-btn-chico.si { background: rgba(0, 200, 83, 0.16); color: var(--g-verde); border-color: rgba(0, 200, 83, 0.4); }
.g-btn-chico.si:hover { background: rgba(0, 200, 83, 0.28); }
.g-btn-chico.quitar { background: transparent; color: var(--g-texto-2); border-color: var(--g-borde); }
.g-btn-chico.quitar:hover { color: var(--g-rosa); border-color: rgba(244, 63, 94, 0.4); }
.g-btn-chico:disabled { opacity: 0.6; cursor: default; }

/* El campo de texto. */
.g-alta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; max-width: 460px; }
.g-campo {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--g-texto);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--pin-font);
  transition: var(--g-transicion);
}
.g-campo:focus { outline: none; border-color: var(--g-verde); box-shadow: 0 0 10px rgba(0, 200, 83, 0.2); }
[data-theme="clasico"] .g-campo { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, 0.1); }
[data-theme="clasico"] .g-campo:focus { border-color: var(--g-verde); box-shadow: 0 0 10px rgba(0, 153, 77, 0.15); }
/* El texto de ayuda del campo, con su gris por tema (5,6 de contraste en cada uno). */
.g-campo::placeholder { color: #7f8f85; opacity: 1; }
[data-theme="clasico"] .g-campo::placeholder { color: #5a6660; }

/* El hueco de «todavía no hay nada» o «cargando». */
.g-vacio {
  border: 1px dashed rgba(255, 255, 255, 0.13); border-radius: 14px;
  padding: 22px 14px; text-align: center;
  color: var(--g-texto-3); font-size: 0.82rem; line-height: 1.5;
}
[data-theme="clasico"] .g-vacio { border-color: rgba(0, 0, 0, 0.12); }

/* El botón principal y su versión secundaria. */
.g-btn {
  background: linear-gradient(135deg, var(--g-verde), #00e676);
  color: #000; font-family: var(--pin-font); font-size: 0.9rem; font-weight: 700;
  padding: 10px 24px; border-radius: 12px; border: none; cursor: pointer;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); transition: var(--g-transicion);
  display: flex; align-items: center; gap: 10px;
}
[data-theme="clasico"] .g-btn { box-shadow: 0 0 20px rgba(0, 114, 66, 0.18); }
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(0, 200, 83, 0.5); }
.g-btn.secundario {
  background: rgba(255, 255, 255, 0.05); color: var(--g-texto); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none;
}
.g-btn.secundario:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
[data-theme="clasico"] .g-btn.secundario { border-color: rgba(0, 0, 0, 0.12); color: var(--g-texto); background: rgba(0, 0, 0, 0.03); }
[data-theme="clasico"] .g-btn.secundario:hover { background: rgba(0, 0, 0, 0.06); }

/* ══════════════════════════════════════════════════════════════════════════
   EL CELULAR Y LA TABLET — debajo de 1024 manda el shell de Central: la barra
   es su cajón y arriba va su barra superior. El armazón sólo se acomoda.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* La barra superior del shell, con los colores del panel. */
  .pin-armazon .pin-topbar { background: var(--g-fondo); border-bottom-color: var(--g-borde); }
  .pin-armazon .pin-topbar-btn { border-color: var(--g-borde); color: var(--g-texto); }
  .pin-armazon .pin-topbar-txt { color: var(--g-texto); }
  /* El logotipo de la barra superior es verde: sobre el fondo casi negro del tema
     oscuro no se ve. Se blanquea, como el de la barra lateral. */
  html:not([data-theme="clasico"]) .pin-armazon .pin-topbar-logo { filter: brightness(0) invert(1); opacity: .9; }
  .g-lienzo { --mc-pad-t: 24px; --mc-pad-x: 24px; padding-bottom: 40px; }
}
@media (max-width: 768px) {
  .g-lienzo { --mc-pad-t: 16px; --mc-pad-x: 16px; }
  .g-cabecera { margin: 0 0 18px; flex-wrap: wrap; gap: 14px; padding: 14px 18px; border-radius: 16px; }
  .g-cab-cifras { gap: 20px; }
  .g-cab-cifras b { font-size: 26px; }
  .g-encabezado { gap: 14px; margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .g-alta { max-width: none; }
  .g-fila { flex-wrap: wrap; }
  .g-ficha { padding: 20px 16px; }
  /* El título de la ficha y su insignia: si no entran en un renglón, la insignia baja. */
  .g-ficha-cab { align-items: flex-start; }
  .g-ficha-cab h3 { flex-wrap: wrap; }
}

/* Quien pidió menos movimiento no tiene por qué ver nada girar, barrer ni subir. */
@media (prefers-reduced-motion: reduce) {
  /* La barra, con `:is()`: la usan también las páginas que sólo tomaron la barra y la
     cabecera (`pin-armazon-barra`). ⚰️ Hasta el 15-10-2026 decía sólo `.pin-armazon`,
     y en Obras el filo del ítem elegido y el menú se seguían moviendo. */
  .g-cab-barrido, .g-cab-anillo, :is(.pin-armazon, .pin-armazon-barra) .pin-nav > .pin-nav-item.activa::before { animation: none; }
  .g-cab-barrido { display: none; }
  .g-entra-1, .g-entra-2, .g-entra-3, .g-entra-4, .g-vista, .g-panel, :is(.pin-armazon, .pin-armazon-barra) .pin-menu { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SÓLO LA BARRA Y LA CABECERA — `<body class="pin-armazon-barra">` (15-10-2026)
   Para una herramienta cuyo contenido TODAVÍA no se pasó al armazón: toma la
   barra y la cabecera, y nada más. Sin el reinicio de toda la página, sin el
   fondo y sin dejar de cargar las hojas del sitio, así sus tarjetas y sus
   gráficos quedan como estaban. La primera es Obras. Pedido del usuario: «Obras
   … la estética de la barra lateral y el banner superior».
   🔴 Los colores y la barra son las MISMAS reglas de arriba (`:is()`, con el
      mismo peso): no hay una segunda copia que se separe.
   📌 El día que esa herramienta se pase entera, cambia esta clase por
      `pin-armazon` y esto deja de usarla.
   ══════════════════════════════════════════════════════════════════════════ */
/* El reinicio y la letra del armazón, SÓLO adentro de la barra y de la cabecera
   (sin peso, como el de la página entera). Sin esto miden distinto: el sitio
   trae `line-height: 1.6`. */
:where(.pin-armazon-barra .pin-sidebar), :where(.pin-armazon-barra .pin-sidebar) *,
:where(.pin-armazon-barra .pin-sidebar) *::before, :where(.pin-armazon-barra .pin-sidebar) *::after,
:where(.pin-armazon-barra .g-cabecera), :where(.pin-armazon-barra .g-cabecera) *,
:where(.pin-armazon-barra .g-cabecera) *::before, :where(.pin-armazon-barra .g-cabecera) *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
/* El cuerpo de letra de base, también: la página trae 14 px del sitio y el armazón
   arranca del de siempre del navegador (16). Lo que se mide en em, se mide igual. */
.pin-armazon-barra .pin-sidebar, .pin-armazon-barra .g-cabecera { font-family: var(--pin-font); font-size: 16px; line-height: normal; }
.pin-armazon-barra .pin-sidebar { scrollbar-width: thin; }
html[data-theme="clasico"] .pin-armazon-barra .pin-sidebar { scrollbar-color: rgba(0, 114, 66, .32) transparent; }
html:not([data-theme="clasico"]) .pin-armazon-barra .pin-sidebar { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
/* La cabecera es un hijo más del contenido del shell (un flex en columna cuyos
   hijos van a lo ancho): con `width: auto` se estira y respeta sus márgenes, y
   queda a la altura de la barra (y = 14) y a 14 px de ella, como en el armazón.
   Una página SIN barra lateral (el manual público de Obras) la lleva suelta en el
   <body>, con los mismos márgenes. */
.pin-armazon-barra .pin-main > .g-cabecera,
.pin-armazon-barra > .g-cabecera { width: auto; margin: 14px 14px 24px; }
/* La barra de desplazamiento de la PÁGINA, la fina y del color del tema, como en
   Presentaciones. La hoja del sitio le reserva el lugar siempre
   (`scrollbar-gutter: stable`, para que nada salte entre una sección corta y una
   larga), y con la gruesa de Windows esa franja eran 15 px a la derecha de la
   cabecera. Sin `color-scheme`, a propósito: cambiaría también los controles del
   contenido, que acá no se pasó. */
html:has(> .pin-armazon-barra) { scrollbar-width: thin; }
html[data-theme="clasico"]:has(> .pin-armazon-barra) { scrollbar-color: rgba(0, 114, 66, .32) transparent; }
html:not([data-theme="clasico"]):has(> .pin-armazon-barra) { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
/* El título de la página lo dice la cabecera, al medio: el grande de la página
   quedaría repetido. Se deja para un lector de pantalla —es el único <h1>— y
   queda la bajada, centrada como en el armazón. */
.pin-armazon-barra .pin-head { padding-top: 0; }
.pin-armazon-barra .pin-head h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; animation: none;
}