/* ============================================================================
   Tema GRAFITO — sistema de diseño de la intranet INSAAT.
   ============================================================================
   Este archivo es la ÚNICA fuente de los colores, las tipografías y los
   componentes. Antes cada página repetía a mano su paleta en un <style> propio,
   así que un cambio de imagen eran dieciocho ediciones; ahora es una.

   La marca es el carbón del propio logotipo (#2d3635): el color se reserva casi
   por completo para los datos —positivo, negativo, los tonos pastel de cada
   tarjeta—, de modo que lo que resalta en pantalla es la información y no la
   decoración.

   Convención: todo lo del armazón lleva el prefijo .ap- (aplicación) para no
   chocar con los estilos que cada página ya tiene mientras se migran.
   ========================================================================== */

/* Open Sans para la pantalla; Barlow se queda porque la impresión la sigue
   usando (ver el bloque @media print del final). */
@import url("/fuentes/open-sans.css");
@import url("/fuentes/barlow.css");

:root{
  /* Marca y superficies */
  --ap-pri:#2d3635;          /* carbón del logotipo */
  --ap-pri-hover:#3b4746;
  --ap-pri-ink:#fafbfa;      /* texto sobre la marca */
  --ap-soft:#eceeed;         /* fondo del elemento activo */
  --ap-soft2:#eff1f0;        /* rieles, píldoras neutras */
  --ap-g:#f7f8f7;            /* fondo de página */
  --ap-s:#ffffff;            /* superficie de tarjeta */
  --ap-side:#ffffff;         /* barra lateral */

  /* Tinta */
  --ap-ink:#171a19;
  --ap-mut:#5f6764;          /* gris de apoyo (contraste ≥ 4.5:1 sobre --ap-g) */
  --ap-line:#e5e7e5;

  /* Semánticos: sólo para estado, nunca como acento decorativo */
  --ap-pos:#2f6b4f;
  --ap-pos-bg:#e9f0ec;
  --ap-neg:#a63f34;
  --ap-neg-bg:#f7ebe9;
  --ap-warn:#7d6132;
  --ap-warn-bg:#f5efe4;

  /* Tonos pastel de los chips de icono: uno por familia de módulo. Es la única
     concesión de color de la interfaz, y sirve para reconocer un módulo por el
     rabillo del ojo —lo que hace la referencia con sus categorías—, no para
     decorar. Un quinto tono para Inmobiliario, que antes compartía el de
     Finanzas y por eso las dos familias se veían igual en el mosaico. */
  --ap-c1:#e3e8e6; --ap-i1:#2d3635;   /* panorama */
  --ap-c2:#dde7ea; --ap-i2:#2f5f6b;   /* finanzas */
  --ap-c3:#efe7da; --ap-i3:#7d6132;   /* obra */
  --ap-c4:#e4e2ea; --ap-i4:#4f4a63;   /* operación */
  --ap-c5:#dfe9e2; --ap-i5:#2f6b4f;   /* inmobiliario */

  /* Tipografía: Open Sans en TODA la intranet —títulos, texto y cifras—. Va
     incluida en el proyecto (public/fuentes/), así que se ve idéntica en
     cualquier computadora o celular y sin pedirle nada a internet. Detrás
     quedan tipografías del sistema por si el archivo no llegara a cargar.

     Sustituye a Inter, que se probó en ExtraLight y no convenció al dueño:
     "necesito algo que se vea fácil de leer y que no canse la vista". Open Sans
     está dibujada para eso y se trabaja en su Regular (400), el peso para el
     que fue diseñada.

     El cambio tiene un costo medido: ninguna de las dos es condensada, así que
     cada importe ocupa alrededor de un 13% más que en la condensada original.
     Ese es el trato que se aceptó a cambio de poder leerla todo el día.

     Se conserva la condensada aparte para la impresión: los bloques
     @media print están calibrados a hoja carta con una condensada, y meterles
     una tipografía más ancha descuadraría cada recibo. */
  --ap-fuente:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  --ap-condensada:"Barlow Semi Condensed","Arial Narrow","Liberation Sans Narrow",
              "Avenir Next Condensed","DejaVu Sans Condensed",Arial,sans-serif;
  /* Alias histórico: varias reglas de este archivo nombraban --ap-narrow y
     apuntaban a la condensada. Se conserva el nombre para no reescribirlas,
     pero ya no es "narrow": es la tipografía de la interfaz. */
  --ap-narrow:var(--ap-fuente);
  --ap-display:var(--ap-fuente);
  --ap-body:var(--ap-fuente);
  /* Lo único que NO va en la tipografía de la interfaz. Un código de
     vinculación o un comando se copian a mano, y ahí conviene que cada
     carácter ocupe lo mismo y no se parezca a ninguno. Son monoespaciadas del
     sistema —ninguna se descarga— así que esto no abre la puerta a un servidor
     externo. */
  /* 44px es el blanco mínimo que el dedo acierta; 16px es el tamaño por debajo
     del cual Safari amplía la página al enfocar un campo. Son medidas del
     aparato, no de la escala tipográfica: por eso viven con nombre propio. */
  --ap-tacto:44px;
  --ap-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
            "Liberation Mono","DejaVu Sans Mono",monospace;
  /* Espaciado entre letras de los títulos. Con Inter en ExtraLight había que
     abrirlo un pelo, porque los trazos finos dejaban menos hueco entre sí y el
     título se leía como una mancha. Open Sans viene abierta de fábrica y en
     Regular tiene cuerpo de sobra: separarla más sólo desharía la palabra. */
  --ap-tr:0;

  /* ====================================================================
     ESCALAS — el sistema, no una lista de números sueltos
     ====================================================================
     Hasta aquí cada medida se había ido ajustando a mano, y "hazlo un 30% más
     chico" eran cuarenta ediciones con cosas que se escapaban. Ahora todo sale
     de DOS escalas y un factor.

     --ap-esc es ese factor: 1 era el tamaño anterior, .72 es este. Subirlo o
     bajarlo mueve TODA la interfaz de golpe y se puede deshacer con un número.

     La letra no baja el 30% completo, y es a propósito: 30% menos sobre 13px
     son 9px, que ya no se leen. El espacio, los rellenos y el cromo sí bajan
     entero —que es donde estaba el desperdicio de verdad—, y la letra baja lo
     que aguanta, con piso. La densidad la termina de dar el GROSOR: con nueve
     pesos, la jerarquía se hace con peso y color en vez de con tamaño, y eso
     es lo que deja apretar sin que se vea amontonado. */
  --ap-esc:.72;

  /* Espacio. Seis pasos; nada en la interfaz usa un número que no salga de
     aquí, así que el ritmo vertical es el mismo en las 24 pantallas. */
  --e1:calc(2.1px * var(--ap-esc) + 1.5px);
  --e2:calc(3.5px * var(--ap-esc) + 2.5px);
  --e3:calc(5.6px * var(--ap-esc) + 4px);
  --e4:calc(8.3px * var(--ap-esc) + 6px);
  --e5:calc(12.5px * var(--ap-esc) + 9px);
  --e6:calc(18px * var(--ap-esc) + 13px);

  /* Tipografía. El +px de cada línea es el PISO: por debajo de esos tamaños el
     texto deja de leerse por mucho que el factor baje, así que la escala se
     comprime hacia un mínimo en vez de encogerse a cero. */
  --t1:calc(2.1px * var(--ap-esc) + 8px);     /*  9.5px  etiquetas y sellos */
  --t2:calc(2.8px * var(--ap-esc) + 8.6px);   /* 10.6px  apoyo, pies         */
  --t3:calc(3.3px * var(--ap-esc) + 9.2px);   /* 11.6px  texto secundario    */
  --t4:calc(3.6px * var(--ap-esc) + 10px);    /* 12.6px  cuerpo              */
  --t5:calc(4.4px * var(--ap-esc) + 10.6px);  /* 13.8px  subtítulo, cifra    */
  --t6:calc(5.8px * var(--ap-esc) + 11.8px);  /* 16.0px  título de tarjeta   */
  --t7:calc(9px * var(--ap-esc) + 13px);      /* 19.5px  título de página    */
  --t8:calc(12.5px * var(--ap-esc) + 15px);   /* 24.0px  cifra destacada      */
  --t9:calc(18px * var(--ap-esc) + 17px);     /* 30.0px  número de portada    */
  /* Y un paso por debajo del más chico, para lo que hoy vive en 8px: existe
     para poder normalizar esas reglas sin inventarles un tamaño mayor. */
  --t0:calc(1.4px * var(--ap-esc) + 7.5px);   /*  8.5px  microetiqueta        */

  /* Escala de pesos: qué trabajo hace cada uno. Toda la interfaz trabaja en
     Regular (400) —lo eligió el dueño— que es el peso para el que Open Sans
     está dibujada.
        300 Light     lo más tenue y nada más: pies de cifra, notas al margen.
        400 Regular   el peso de la casa: cuerpo, tablas, navegación, botones,
                      cifras. Es lo que se ve en casi todo.
        600 SemiBold  lo poco que DEBE destacar: título de página, título de
                      tarjeta, encabezado de tabla, la cifra que es EL dato.
     No hay 700. Con un cuerpo en 400, el 600 ya se despega lo suficiente; el
     700 sería la negrita, y la negrita es justo lo que cansa la vista en una
     pantalla que se mira ocho horas.
     El salto de 400 a 600 se salta el 500 a propósito: entre 400 y 500 la
     diferencia no se ve, y una jerarquía que no se ve no es jerarquía, es
     ruido en la hoja.
     Los nombres se conservan —los usan cientos de reglas— aunque varios
     apunten al mismo número: renombrarlos sería tocar cuarenta archivos para
     no cambiar nada de lo que se ve. */
  --p-fino:300;
  --p-suave:400;
  --p-normal:400;
  --p-medio:400;
  --p-fuerte:600;
  --p-recio:600;

  /* Forma. Al formato de la referencia que trajo David: esquinas francamente
     redondeadas y sombra amplia y suave. Los radios NO escalan con el factor:
     una esquina de 16px en una tarjeta de 300px se ve igual de redonda que en
     una de 200, y encogerla sólo la haría parecer más dura. */
  --ap-r:14px;
  --ap-r-sm:9px;
  --ap-r-chip:12px;
  --ap-sh:0 1px 2px rgba(16,24,40,.05);
  --ap-sh-alta:0 8px 24px -10px rgba(23,26,25,.20);

  /* Iconos: sí escalan, con piso, porque un icono chiquito deja de leerse
     antes que un texto chiquito. */
  --ap-ic:calc(5.6px * var(--ap-esc) + 13px);
  --ap-ic-lg:calc(8.3px * var(--ap-esc) + 15px);

  --ap-side-w:224px;

  /* --- Compatibilidad con las páginas que aún usan sus propios componentes ---
     Cada página nombraba así su paleta (--azul para la marca, --fondo para el
     lienzo, etc.). Reapuntándolas al tema, toda su hoja de estilos armoniza con
     Grafito sin tocar una sola de sus reglas. Conforme cada pantalla se rehaga
     con los componentes .ap-, estos alias van sobrando. */
  --azul:var(--ap-pri);
  --cafe:#4a5553;
  --fondo:var(--ap-g);
  --linea:var(--ap-line);
  --verde:var(--ap-pos);
  --rojo:var(--ap-neg);

  /* Tesorería, Nómina y el tablero usan otros nombres para lo mismo. */
  --blue:var(--ap-pri);
  --blue2:#4a5553;
  --ink:var(--ap-ink);
  --muted:var(--ap-mut);
  --line:var(--ap-line);
  --good:var(--ap-pos);
  --bad:var(--ap-neg);
  --warn:var(--ap-warn);
  --bg:var(--ap-g);
  --white:var(--ap-s);
  --beige:#f2efe8;
  --beige2:#fbfaf6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ap-g);color:var(--ap-ink);font-family:var(--ap-body);
     font-size:var(--t4);font-weight:var(--p-normal);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* Los campos y botones NO heredan la tipografía de la página: por norma del
   navegador usan la del sistema. Sin esta línea, "una sola tipografía" se
   rompía en cada cuadro de captura. */
:where(input,select,textarea,button,optgroup){font-family:inherit}
/* …y también el TAMAÑO. Sin esta línea, un <button> sin font-size declarado se
   queda con el de fábrica del navegador —13.333px en Chrome—, que no sale de
   ninguna escala y no coincide con nada de alrededor. Eran los botones de
   media intranet: Documentos, Nómina, Vacaciones, Salas, CFO. Va con :where()
   para que la página que sí declare el suyo siga mandando. */
:where(input,select,textarea,button,optgroup){font-size:inherit}
/* <code>/<pre>/<kbd>/<samp> sí van monoespaciados, que es justo para lo que
   existen: marcan texto que alguien va a teclear o a copiar carácter por
   carácter. Arrastrarlos a la condensada por uniformidad hacía ilegible
   exactamente lo que más exactitud pide. */
:where(code,pre,kbd,samp){font-family:var(--ap-mono)}
/* Pizarra distingue títulos de texto. Los encabezados de las páginas que aún no
   usan los componentes .ap- heredaban la tipografía del cuerpo; con esta regla
   toman la condensada y la intranet entera se lee igual. Se usa :where() para
   que cualquier página pueda seguir imponiendo la suya sin pelear. */
:where(h1,h2,h3,h4,legend,caption,th){font-family:var(--ap-display);letter-spacing:var(--ap-tr)}

/* La negrita que NADIE escribió. El navegador trae la suya de fábrica para
   h1..h6, th, b y strong, y por eso 151 elementos seguían pintando en 700 con
   toda la hoja del proyecto trabajando en 200: no había ningún font-weight que
   corregir porque no había ninguno escrito. Se enrutan por los tokens como el
   resto. Va en :where() —especificidad cero— para que cualquier página pueda
   seguir imponiendo lo suyo: al navegador se le gana igual, porque una regla
   del autor manda sobre la del navegador sea cual sea su especificidad. */
:where(h1,h2,h3,h4,h5,h6,th,b,strong,optgroup){font-weight:var(--p-recio)}

/* ------------------------------------------------------------------ Cifras
   Pizarra trata los importes como un tercer registro, aparte de títulos y
   texto: condensada, letras apretadas (-.02em) y —lo importante— cifras
   TABULARES. Tabular quiere decir que todos los dígitos miden exactamente lo
   mismo, así el 1 ocupa igual que el 8 y las columnas de dinero alinean por
   unidades, decenas y centenas aunque los números tengan distinto largo.
   El primer bloque pone las tabulares en cualquier celda o campo donde puede
   haber un número; el segundo añade la condensada donde el número ES el dato. */
:where(td,th,input,select,.num,.calc,.right,.n,.importe,.folio,.obraaTotal,
       .execMeta,.prFx,.fiscalTable .readonly,.barrow .num,
       .kpi .val,.kpi .valor,.card-kpi strong,.card .value,.donutCenter,
       .ceoKpi b,.fiscalKpi b,.prKpi b,.payKpi b,.totalbox b,.urgentSummary b,
       .paymentReportSummary b,.officialRates b,.execIndicator b,
       .legendRow b,.forecastAlert b,.panelhead > div,.payTable td,
       .mini-bars .bar-row span,.legend-row b,.bar-row b)
  {font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

:where(.num,.calc,.right,.n,.importe,.folio,.obraaTotal,.execMeta,.prFx,
       .fiscalTable .readonly,.barrow .num,
       .kpi .val,.kpi .valor,.card-kpi strong,.card .value,.donutCenter,
       .ceoKpi b,.fiscalKpi b,.prKpi b,.payKpi b,.totalbox b,.urgentSummary b,
       .paymentReportSummary b,.officialRates b,.execIndicator b,
       /* Estos no se veían a simple vista: los encontró un barrido que busca
          textos con forma de importe y avisa cuál no llevaba la condensada. */
       .legendRow b,.forecastAlert b,.panelhead > div,.payTable td,
       .mini-bars .bar-row span,.legend-row b,.bar-row b)
  {font-family:var(--ap-display);letter-spacing:-.02em}

/* Recuadro con scroll propio para las tablas anchas (lo pone shell.js). El
   max-width en 100% es lo que impide que arrastre a la página consigo. */
.ap-tabla-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}

/* El atributo `hidden` del navegador lo tumba cualquier regla de la página que
   le ponga `display` al elemento —y varias pantallas se lo ponen a los botones—.
   El resultado no es un botón mal alineado: es un botón que se manda esconder y
   se queda visible, así que alguien sin permiso ve una opción que al pulsarla
   sólo puede rebotarle. Con `!important` el atributo vuelve a mandar. */
[hidden]{display:none !important}
/* El trazo va en 1.75 y no en 1.6: a 20px una línea más fina se ve desvaída al
   lado de un texto en negrita, y era parte de por qué la interfaz se sentía
   apagada. Las uniones redondeadas son las que dan el aire de la referencia. */
.ap-ic{width:var(--ap-ic);height:var(--ap-ic);flex:0 0 auto;stroke:currentColor;fill:none;
       stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ap-ic-lg{width:var(--ap-ic-lg);height:var(--ap-ic-lg);stroke-width:1.7}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--ap-pri);outline-offset:2px;border-radius:3px}
.ap-hidden{display:none!important}
/* Doce pantallas definen .hidden en su propia hoja; el chat la usa en seis
   botones pero nunca la definió, así que el botón "Miembros" salía siempre. Al
   estar aquí, cualquier página que la use se comporta igual. Sin !important:
   quien ya la tiene declarada manda. */
.hidden{display:none}

/* ---------------------------------------------------------------- Armazón */
/* min-height en dos líneas a propósito: en iOS Safari 100vh incluye la franja
   que tapa la barra del navegador, así que la página queda más alta que lo que
   se ve y aparece un desplazamiento fantasma. 100dvh mide lo REALMENTE visible.
   El navegador que no entienda dvh se queda con la primera, que es la de antes. */
.ap-shell{display:grid;grid-template-columns:var(--ap-side-w) minmax(0,1fr);
          min-height:100vh;min-height:100dvh}

/* --------------------------------------------------------- Barra lateral */
.ap-side{background:var(--ap-side);border-right:1px solid var(--ap-line);display:flex;
         flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
/* La marca respira. Con 8px por lado el logotipo quedaba metido en la esquina:
   una marca necesita aire alrededor para leerse como marca y no como un
   elemento más del menú. Los 12px de los lados no son un número al azar —es
   donde arrancan los iconos del menú de abajo, así que el logotipo y la columna
   de iconos caen en la misma vertical—, y los 18px de arriba y abajo le dan el
   respiro que pedía. */
.ap-brand{position:relative;display:flex;align-items:center;justify-content:center;
          gap:var(--e2);padding:var(--e5) var(--e4);border-bottom:1px solid var(--ap-line)}
/* display:block es indispensable: el logotipo es un <a> y, como enlace, sin él
   sería inline y no tomaría ni ancho ni alto (desaparecía).
   El ancho es fijo y deliberado —más chico que la barra, para que le sobre aire
   por los dos lados en vez de ir de canto a canto— y el alto
   sale solo de aspect-ratio, con la proporción REAL del archivo. Sin eso la caja
   sería más ancha de lo que el logotipo necesita: se usa "contain", así que la
   marca se quedaría corta y sobrarían píxeles muertos a la derecha —se vería más
   chica de lo que en realidad mide. */
/* El alto va antes de aspect-ratio a propósito: los Safari anteriores al 15 no
   entienden aspect-ratio y sin esta línea el logotipo quedaría en alto 0. */
/* Es la IMAGEN, no una máscara. Antes se enmascaraba el archivo y se rellenaba
   con el color de la marca, que servía para un logotipo de un solo tono. El de
   INSAAT ONE lleva "ONE" en azul, y una máscara sólo usa el canal alfa: pintaría
   todo del mismo carbón y se perdería justo lo que distingue al logotipo nuevo.
   La barra lateral es blanca, así que el negro y el azul se leen bien.
   El archivo es la versión transparente RECORTADA a su contenido: el original
   viene en un lienzo cuadrado de 4000x4000 casi todo vacío, y con "contain" el
   logotipo habría salido diminuto en medio de la caja. */
/* 94x24: poco más de la mitad de los 164x43 con los que nació. La marca no
   necesita ese tamaño para identificarse y competía con el menú, que es lo que
   se viene a usar; lo que deja libre es aire alrededor y el sitio de la flecha
   que recoge la lateral. Es el MISMO archivo escalado: el arte de marca no se
   redibuja nunca. */
.ap-brand .wm{display:block;width:94px;height:24px;aspect-ratio:3467/901;
     background:url("/logo-insaat-one-wm.png") no-repeat left center/contain}
/* La flecha va pegada al borde derecho de la fila: junto al logotipo se leería
   como parte de la marca. Y va FUERA del flujo —posicionada, no empujada con
   margin-left:auto— porque si ocupara sitio, el logotipo se centraría en lo que
   sobra y quedaría corrido a la izquierda: se centra respecto al recuadro
   entero, que es lo que se ve. */
.ap-brand .ap-plegar{position:absolute;right:var(--e4);top:50%;transform:translateY(-50%);
           flex:0 0 auto;width:28px;height:28px}
.ap-nav{padding:var(--e2) var(--e2) var(--e1);flex:1}
.ap-grp{margin-bottom:var(--e3)}
.ap-grp-lbl{font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase;color:var(--ap-mut);
            font-weight:var(--p-fuerte);padding:0 var(--e3) var(--e2)}
/* Renglón de menú al formato de la referencia: icono de 20px, texto de 13.4 y
   40px de alto. Los 11.9px con icono de 14 que había antes cabían más, pero
   había que leerlos de cerca y ningún módulo se distinguía de otro de un
   vistazo, que es justo para lo que sirve un menú. */
.ap-nv{display:flex;align-items:center;gap:var(--e2);padding:var(--e1) var(--e2);border-radius:var(--ap-r-sm);
       font-size:var(--t4);font-weight:var(--p-medio);color:var(--ap-ink);text-decoration:none;position:relative;
       margin-bottom:1px;min-height:calc(8.3px * var(--ap-esc) + 22px)}
.ap-nv .ap-ic{color:var(--ap-mut)}
/* Los módulos que cuelgan de otro: sangrados y con una guía a la izquierda, que
   es lo que hace ver de un vistazo que pertenecen al de arriba. Sin la guía, la
   sangría sola se lee como un desajuste. */
.ap-nv-hijo{margin-left:11px;padding-left:12px;border-left:1px solid var(--ap-line)}
.ap-nv-hijo .ap-ic{opacity:.75}
.ap-nv:hover{background:var(--ap-soft2)}
.ap-nv.on{background:var(--ap-soft);font-weight:var(--p-medio);color:var(--ap-pri)}
.ap-nv.on .ap-ic{color:var(--ap-pri)}
.ap-nv.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
                  background:var(--ap-pri);border-radius:0 3px 3px 0}
.ap-nv-cnt{margin-left:auto;font-size:var(--t1);font-weight:var(--p-fuerte);color:var(--ap-mut);
           background:var(--ap-soft2);padding:1px var(--e2);border-radius:999px;font-variant-numeric:tabular-nums}
.ap-nv-cnt.alerta{background:var(--ap-neg-bg);color:var(--ap-neg)}
/* Pulso del contador de chat sin leer, para que se note más. */
.ap-nv-cnt.ap-pulse{animation:apPulse 1.6s ease-in-out infinite}
@keyframes apPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.72}}
@media (prefers-reduced-motion:reduce){.ap-nv-cnt.ap-pulse{animation:none}}
/* Pie de la barra lateral: sólo el acceso a la guía. Antes vivía aquí un
   recuadro "Tu acceso — N de N módulos" con barra de progreso; contaba algo que
   nadie necesita saber a diario y competía visualmente con el menú. El enlace
   usa .ap-nv para que se lea como un renglón más de la navegación. */
.ap-side-pie{margin:auto 10px 10px;padding-top:8px;border-top:1px solid var(--ap-line)}

/* --------------------------------------------------------- Barra superior */
.ap-main{min-width:0;display:flex;flex-direction:column}
.ap-top{display:flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e3);background:var(--ap-s);
        border-bottom:1px solid var(--ap-line);position:sticky;top:0;z-index:40}
/* Pastilla completa y más alta: en la referencia el buscador es lo primero que
   se ve y se toca, no un campo de formulario más. */
.ap-search{flex:1;max-width:calc(300px * var(--ap-esc) + 90px);display:flex;align-items:center;
           gap:var(--e2);background:var(--ap-g);border:1px solid var(--ap-line);border-radius:999px;
           padding:0 var(--e3);min-height:calc(8.3px * var(--ap-esc) + 23px)}
.ap-search .ap-ic{color:var(--ap-mut)}
.ap-search input{flex:1;border:0;background:transparent;font:inherit;font-size:var(--t4);
                 font-weight:var(--p-normal);color:var(--ap-ink);padding:var(--e1) 0;min-width:0}
.ap-search input::placeholder{color:var(--ap-mut)}
.ap-search input:focus{outline:none}
.ap-search .kk{flex:0 0 auto;font-size:var(--t1);color:var(--ap-mut);border:1px solid var(--ap-line);
               border-radius:4px;padding:1px var(--e2);font-variant-numeric:tabular-nums}
.ap-top .der{margin-left:auto;display:flex;align-items:center;gap:8px}
/* padding:0 es indispensable, no cosmética. El <button> trae de fábrica
   1px 6px, y con el borde eso deja una caja de contenido de 14px para un icono
   de 17: al no caber, el navegador lo alinea al inicio en vez de centrarlo
   —alineación "segura", para no cortar contenido— y el icono queda 1.5px a la
   derecha del centro. No se nota hasta que aparece el círculo del puntero, y
   entonces se ve el icono descentrado dentro de su propio botón. */
.ap-ib{width:calc(8.3px * var(--ap-esc) + 22px);height:calc(8.3px * var(--ap-esc) + 22px);
       display:grid;place-items:center;padding:0;border-radius:999px;
       border:1px solid transparent;background:transparent;color:var(--ap-mut);position:relative;cursor:pointer}
.ap-ib:hover{background:var(--ap-soft2)}
.ap-ib .pt{position:absolute;top:2px;right:2px;min-width:15px;height:15px;border-radius:999px;
           background:var(--ap-neg);color:#fff;font-size:var(--t0);font-weight:var(--p-fuerte);
           display:grid;place-items:center;padding:0 3px;line-height:1}
.ap-user{display:flex;align-items:center;gap:8px;padding-left:9px;border-left:1px solid var(--ap-line)}
.ap-user .av{width:calc(8.3px * var(--ap-esc) + 20px);height:calc(8.3px * var(--ap-esc) + 20px);
             border-radius:999px;background:var(--ap-c1);color:var(--ap-i1);
             display:grid;place-items:center;font-size:var(--t2);font-weight:var(--p-fuerte);flex:0 0 auto}
.ap-user .n1{font-size:var(--t3);font-weight:var(--p-medio);line-height:1.25;white-space:nowrap}
.ap-user .n2{font-size:var(--t2);font-weight:var(--p-suave);color:var(--ap-mut);line-height:1.25;white-space:nowrap}

/* Panel de notificaciones */
.ap-panel{position:absolute;top:38px;right:0;width:330px;max-width:88vw;max-height:62vh;overflow:auto;
          background:var(--ap-s);border:1px solid var(--ap-line);border-radius:var(--ap-r);
          box-shadow:0 12px 34px rgba(0,0,0,.14);z-index:60;padding:6px;text-align:left;cursor:default}
.ap-panel .tit{font-weight:var(--p-recio);font-size:var(--t4);letter-spacing:.1em;text-transform:uppercase;
               color:var(--ap-mut);padding:8px 10px 5px}
.ap-panel .item{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:var(--ap-r-sm);
                text-decoration:none;color:inherit;font-size:var(--t5);line-height:1.35}
.ap-panel .item:hover{background:var(--ap-soft2)}
.ap-panel .vacio{padding:var(--e5) var(--e4);color:var(--ap-mut);font-size:var(--t5);text-align:center}

/* ------------------------------------------------------------- Contenido */
.ap-cont{padding:var(--e3) var(--e3) var(--e5);max-width:1400px;width:100%}
.ap-crumb{font-size:var(--t2);font-weight:var(--p-normal);color:var(--ap-mut);margin-bottom:var(--e1)}
.ap-crumb b{color:var(--ap-ink);font-weight:var(--p-medio)}
.ap-head{display:flex;align-items:flex-start;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e3)}
/* El título de página baja de tamaño y de caja: en VERSALITAS a 23px gritaba
   más de lo que informa. Ahora manda el peso, no el volumen. */
.ap-head h1{font-family:var(--ap-display);font-size:var(--t7);font-weight:var(--p-recio);margin:0;
            letter-spacing:-.02em;line-height:1.1}
.ap-head .sub{font-size:var(--t3);font-weight:var(--p-suave);color:var(--ap-mut);margin-top:var(--e1)}
.ap-head .sub b{color:var(--ap-ink);font-weight:var(--p-medio)}
.ap-head .der{margin-left:auto;display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}

/* -------------------------------------------------------------- Tarjetas */
.ap-card{background:var(--ap-s);border:1px solid var(--ap-line);border-radius:var(--ap-r);box-shadow:var(--ap-sh)}
.ap-card-hd{display:flex;align-items:center;gap:var(--e2);padding:var(--e3)}
.ap-card-hd .t{font-family:var(--ap-display);font-size:var(--t5);font-weight:var(--p-fuerte);letter-spacing:-.005em}
.ap-card-hd .s{font-size:var(--t2);font-weight:var(--p-suave);color:var(--ap-mut)}
.ap-card-hd .der{margin-left:auto;display:flex;align-items:center;gap:8px}
/* El cuadrito redondeado con el icono dentro, que es la pieza que más se
   repite en la referencia: categorías, tarjetas y fichas. Dos tamaños —40px en
   la cabecera de una tarjeta y 56px en el mosaico del portal— y el tono lo
   pone la familia del módulo, no la decoración. */
.ap-chip{width:calc(9.7px * var(--ap-esc) + 24px);height:calc(9.7px * var(--ap-esc) + 24px);border-radius:var(--ap-r-chip);display:grid;place-items:center;flex:0 0 auto;
         background:var(--ap-c1);color:var(--ap-i1)}
.ap-chip.f{background:var(--ap-c2);color:var(--ap-i2)}
.ap-chip.o{background:var(--ap-c3);color:var(--ap-i3)}
.ap-chip.p{background:var(--ap-c4);color:var(--ap-i4)}
.ap-chip.i{background:var(--ap-c5);color:var(--ap-i5)}
.ap-chip.lg{width:calc(11.1px * var(--ap-esc) + 30px);height:calc(11.1px * var(--ap-esc) + 30px);border-radius:14px}
.ap-chip .ap-ic{width:var(--ap-ic);height:var(--ap-ic)}
.ap-chip.lg .ap-ic{width:var(--ap-ic-lg);height:var(--ap-ic-lg)}

/* ------------------------------------------------------ Mosaico de módulos */
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--e2)}
.ap-tile{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3);background:var(--ap-s);
         border:1px solid var(--ap-line);border-radius:var(--ap-r);box-shadow:var(--ap-sh);
         text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.ap-tile:hover{border-color:#cdd2d0;transform:translateY(-2px);box-shadow:var(--ap-sh-alta)}
.ap-tile .t{font-family:var(--ap-display);font-size:var(--t5);font-weight:var(--p-fuerte);letter-spacing:-.005em}
.ap-tile .d{font-size:var(--t3);font-weight:var(--p-suave);color:var(--ap-mut);line-height:1.45;flex:1}
.ap-tile .pie{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* -------------------------------------------------- Botones y etiquetas */
/* El botón sale de la escala como todo lo demás. Con ratón no hace falta
   blanco táctil; en pantalla chica vuelve a 44px (bloque de 900px, abajo). */
/* Y una consecuencia de todo lo anterior que hay que decir en voz alta: esta
   hoja le escribe `display` a cientos de elementos, y `display` es justo la
   propiedad con la que el navegador esconde lo marcado con [hidden]. Cualquier
   regla de aquí le gana a esa, así que un <button hidden> SE SEGUÍA VIENDO.
   No es teoría: apareció como una cajita vacía en la cabecera de Tesorería.
   Como [hidden] significa "esto no está", y no "esto está pero tenue", aquí sí
   se justifica el !important: no hay ningún caso en el que algo marcado como
   ausente deba pintarse. */
:where([hidden]){display:none!important}

/* Las MEDIDAS del botón, en un solo sitio y para TODOS los botones.
   Hasta hoy había siete botones distintos: veinticinco usaban .ap-btn y otros
   doscientos sesenta y siete llevaban la clase de su propia página, cada una
   con su alto y su letra —el .del medía 21px con letra de 9.5, que es tamaño
   de microetiqueta en algo que se toca con el dedo—. Se midieron en el
   navegador, no leyendo el CSS.
   Por eso la regla no nombra sólo a .ap-btn: alcanza a `button` y `.btn` dentro
   del contenido, que es donde esas páginas ponen SUS medidas. Los colores de
   cada página se quedan como están; lo que se unifica es la geometría.
   Se queda fuera lo que tiene una geometría propia y deliberada: el botón de
   icono (cuadrado), el filtro en pastilla, el renglón de navegación, la barra
   de pestañas, los renglones de hoja, el globo de ayuda, las piezas del
   organigrama (.nodo, .fila, .plegar, .sug), las opciones de un menú
   desplegable (.menu *) y las celdas de la barra de secciones (.secnav *):
   son tarjetas y renglones escritos como <button> para que se puedan
   recorrer con el teclado, no botones con la geometría del sistema.
   Lo de .secnav se pagó caro: la celda apila icono sobre etiqueta y pide
   14px de aire arriba y abajo; con el padding de esta regla encima quedaba
   en 41px de alto en vez de 72 y la barra no se parecía a lo aprobado.
   Empatan a especificidad —las dos valen (0,2,0)— y gana la de aquí por ir
   después, así que subirle la especificidad a la página sería una carrera
   sin final: la salida es declarar aquí que esa geometría no es la suya. Un renglón de menú alinea su contenido a la IZQUIERDA; si le cae
   el justify-content:center de aquí, cada opción arranca en una x distinta y
   el menú se ve desalineado consigo mismo.
   NO va colgada de .ap-cont, y eso importa: el armazón saca los diálogos y los
   overlays fijos fuera del contenedor, así que colgarla de ahí dejaba sin
   tocar justo los botones de las fichas de captura. La especificidad la da el
   :not() —cuenta como una clase—, así que la regla vale (0,2,0) y le gana a
   los `button.chico` de cada página sin necesidad del contenedor. */
:is(button,.btn,.ap-btn):not(.ap-ib,.ap-tab,.ap-nv,.ap-hoja-item,.ap-tabbar *,.ap-check,.ayuda-fab,.nodo,.fila,.plegar,.sug,.menu *,.secnav *){
        display:inline-flex;align-items:center;justify-content:center;gap:var(--e1);
        padding:0 var(--e2);border-radius:0;
        min-height:22px;
        font-family:var(--ap-body);font-size:var(--t3);font-weight:var(--p-recio);
        white-space:nowrap;cursor:pointer}
/* El .ap-btn del sistema añade lo suyo —borde y superficie—, que las páginas
   viejas ya traen por su cuenta y no hay que pisarles. */
.ap-btn{border:1px solid var(--ap-line);background:var(--ap-s);color:var(--ap-ink);
        text-decoration:none}
.ap-btn.pri{font-weight:var(--p-recio)}
.ap-btn:hover{background:var(--ap-soft2)}
.ap-btn.pri{background:var(--ap-pri);color:var(--ap-pri-ink);border-color:var(--ap-pri)}
.ap-btn.pri:hover{background:#3b4746}
.ap-btn.peligro{color:var(--ap-neg);border-color:var(--ap-neg);background:transparent}
/* La etiqueta de estado de la referencia es un rectángulo redondeado en
   VERSALITAS, no una pastilla larga: se lee como un sello y no compite con el
   nombre. La pastilla completa se reserva para los filtros (.ap-tab). */
.ap-pill{display:inline-block;padding:1px var(--e2);border-radius:6px;font-size:var(--t1);
         font-weight:var(--p-fuerte);letter-spacing:.02em;background:var(--ap-soft2);color:var(--ap-mut);
         white-space:nowrap;line-height:1.6}
/* Las VERSALITAS de la referencia son para un sello de una palabra —ONLINE, EN
   OBRA—, no para una frase: puestas en todas, "3 por autorizar" se leía como un
   grito, y así lo cazó el verificador del armazón móvil de Tesorería. */
.ap-pill.tag{text-transform:uppercase;letter-spacing:.07em;font-size:var(--t0)}
.ap-pill.ok{background:var(--ap-pos-bg);color:var(--ap-pos)}
.ap-pill.esp{background:var(--ap-warn-bg);color:var(--ap-warn)}
.ap-pill.mal{background:var(--ap-neg-bg);color:var(--ap-neg)}

/* ------------------------------------------------------------ Listas */
.ap-list .row{display:flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e3);border-top:1px solid var(--ap-line);
              text-decoration:none;color:inherit}
.ap-list .row:hover{background:var(--ap-soft2)}
.ap-list .row .ci{width:28px;height:28px;border-radius:999px;background:var(--ap-soft);color:var(--ap-pri);
                  display:grid;place-items:center;flex:0 0 auto;font-size:var(--t6)}
.ap-list .row .t{font-size:var(--t4);font-weight:var(--p-medio)}
.ap-list .row .s{font-size:var(--t2);font-weight:var(--p-suave);color:var(--ap-mut)}
.ap-list .row .der{margin-left:auto;color:var(--ap-mut);flex:0 0 auto}

.ap-vacio{padding:var(--e4) var(--e3);text-align:center;color:var(--ap-mut);font-size:var(--t3);
          background:var(--ap-s);border:1px dashed var(--ap-line);border-radius:var(--ap-r)}

/* ------------------------------------------------------------ Responsivo */
@media(max-width:900px){
  /* minmax(0,1fr), no 1fr: una columna "1fr" tiene ancho mínimo automático, así
     que una tabla ancha estiraba la columna y con ella la página entera, y el
     teléfono terminaba deslizándose de lado con encabezado y todo. Con el mínimo
     en 0 la columna se queda del ancho de la pantalla y lo ancho scrollea dentro
     de su propio recuadro. */
  .ap-shell{grid-template-columns:minmax(0,1fr)}
  .ap-side{position:fixed;left:0;top:0;bottom:0;width:var(--ap-side-w);z-index:80;
           transform:translateX(-100%);transition:transform .18s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  /* El chat estiliza su propia lista de conversaciones con "aside.abierta", y
     esa regla caía también sobre la lateral del armazón —que es un <aside> con
     la misma clase—: la mandaba al fondo (z-index 20, por debajo del velo) y
     por eso el menú salía sombreado y no se podía tocar nada. Repitiendo aquí
     posición y capa sobre .ap-side.abierta, que pesa más que aside.abierta, la
     lateral queda a salvo de cualquier página que estilice <aside> a secas. */
  .ap-side.abierta{transform:none;position:fixed;inset:0 auto 0 0;
                   width:var(--ap-side-w);z-index:80}
  .ap-burger{display:grid}
  .ap-velo{position:fixed;inset:0;background:rgba(23,26,25,.4);z-index:70}
  .ap-user .txt{display:none}

  /* La barra superior era lo que empujaba la página en las pantallas SIN tablas:
     un campo de texto no baja de su ancho natural (unos 230px) porque como
     elemento flexible su mínimo es "auto". Con el mínimo en 0 sí se encoge, y
     el recordatorio de atajo de teclado sobra en un teléfono. */
  /* Safari en iPhone hace zoom automático al enfocar un campo cuya letra mide
     menos de 16px, y deja la página ampliada: había 77 campos así, sobre todo
     en el tablero de Tesorería y en Control de proyectos. Con 16px no hay zoom.
     Sólo aplica en pantalla chica; en monitor los tamaños quedan como están. */
  /* Con !important porque cada página fija el tamaño de sus campos con un
     selector de etiqueta, y :where() no le gana: pesa cero a propósito. */
  input,select,textarea{font-size:var(--t6)!important}

  /* Un botón DENTRO de una tabla no manda sobre su ancho: se lo da la celda, y
     en un teléfono esa celda mide lo que mide. Por eso "Imprimir", "Anular" o
     "Eliminar" salían con la palabra cortada. */
  /* Ya no hace falta compactar los secundarios aparte —bajarles la letra a
     --t1 con !important— porque ahora TODOS los botones traen la misma medida
     de la regla de abajo. Aquella excepción existía para domar siete botones
     distintos; con uno solo, sobra. */

  /* 28px, por decisión del dueño. Queda por debajo de los 44px que el dedo
     acierta: con menos blanco se falla el toque y la gente pulsa dos veces.
     Está anotado aquí, no escondido, y se sube cambiando este número. */
  :is(button,.btn,.ap-btn):not(.ap-ib,.ap-tab,.ap-nv,.ap-hoja-item,.ap-tabbar *,.ap-check,.ayuda-fab,.nodo,.fila,.plegar,.sug,.menu *,.secnav *){
    min-height:28px;padding:0 var(--e2);font-size:var(--t3)}
  .ap-ib{width:40px;height:40px}
  .ap-search{min-height:calc(var(--ap-tacto) - 2px);max-width:none}
  .ap-search input{padding:var(--e3) 0;font-size:var(--t6)}
  .ap-nv{min-height:calc(var(--ap-tacto) - 2px);font-size:var(--t5);padding:var(--e3) var(--e4)}

  /* El avatar y el botón de salir SOBRAN en el teléfono: hacen exactamente lo
     mismo que la pestaña "Mi cuenta" de abajo y se llevaban 80px de los 390,
     que eran justo los que le faltaban al buscador para no cortar el texto. */
  .ap-user{display:none}

  .ap-top{padding:10px 12px;gap:8px}
  .ap-search{max-width:none;min-width:0}
  .ap-search input{min-width:0}
  .ap-search .kk{display:none}

  /* Las pantallas anteriores reparten su contenido en columnas pensadas para
     monitor. En un teléfono se apilan. Las de style="" van con !important
     porque un estilo escrito en la etiqueta le gana a cualquier hoja. */
  .ap-cont :where(.wrap,.toolbar,.grid,.cols,.two,.split,.splitGrid,.grid2,.grid3,
                  .grid-form,.logo-grid,.filtros,.form-grid,.dos,.tres,.app,.portal),
  .ap-cont [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Las filas de barras (bancos, avances) fijan 170px de nombre y 110px de
     importe: con la barra en medio no bajan de 460px. Se dejan proporcionales
     para que quepan sin perder la lectura de tres columnas. */
  .ap-cont :where(.bar-row,.barrow){
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr)!important;
  }

  /* La regla de oro del ancho: un elemento dentro de una rejilla o de una fila
     flexible tiene, por omisión, un ancho mínimo igual al de su contenido. Por
     eso una tabla de doce columnas metida en una columna "1fr" estiraba a sus
     padres hasta empujar la página entera. Con el mínimo en cero cada bloque se
     queda del ancho de la pantalla y lo que no cabe se desliza en su recuadro. */
  .ap-cont :where(div,section,main,article,form,ul,ol,fieldset){min-width:0}
}
/* Menos movimiento para quien lo pide, que no es lo mismo que NADA de
   movimiento. Aquí había un `*{transition:none!important;animation:none!important}`
   y hacía dos daños:

   · apagaba el logotipo del acceso desde el otro archivo. Por más que su propia
     hoja pidiera moverlo, el !important de aquí le ganaba, y la pantalla se veía
     como una fotografía. Así se reportó: "el logo sigue sin moverse";
   · y no era un caso raro. En Windows el interruptor de "efectos de animación"
     viene apagado en muchos equipos sin que su dueño lo sepa, así que era medio
     parque de máquinas viendo una intranet sin una sola transición.

   Y era desproporcionado: en TODA la intranet hay tres animaciones, y la única
   que de verdad molesta a quien activa esta preferencia es el latido del
   contador de chat —escala 1→1.18 cada 1.6 segundos, justo lo que se pide
   evitar—. Ésa se apaga (arriba, junto a su propia regla). Una marca de agua al
   7% que deriva a trece píxeles por segundo, no.

   Lo que queda: las transiciones se vuelven instantáneas —eso sí es universal y
   no se discute— y las animaciones las decide cada pieza en su hoja, que es
   donde se sabe si la de uno molesta o no. */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important}
}

/* ==========================================================================
   MENOS TINTA — aros, barras y tablas
   ==========================================================================
   Lo eligió el dueño de entre seis maquetas: "la gráfica deja de competir con
   el dato". La idea entera cabe en una frase: se quita todo lo que no dice
   nada. Un carril de 16px no dice más que uno de 3; una línea vertical entre
   dos columnas no separa nada que el espacio en blanco no separe mejor; un
   círculo relleno de 190px no informa mejor que un aro de trazo fino.

   Vive AQUÍ y no en cada página a propósito. Estas tres piezas estaban
   copiadas en seis archivos con seis medidas distintas —carriles de 11, 12,
   14 y 16px, columnas de valor de 80, 90 y 95px—, que es como se desafina un
   sistema sin que nadie tome nunca la decisión de desafinarlo.               */

/* ---- El aro -------------------------------------------------------------
   El SVG lo arma apAro() en shell.js; aquí sólo va su forma y su color. */
.ap-aro{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}
.ap-aro-cifra{fill:var(--ap-ink);font-weight:var(--p-recio);
  font-family:var(--ap-body);font-variant-numeric:tabular-nums}
.ap-aro-pie{fill:var(--ap-mut);font-family:var(--ap-body)}

/* La leyenda: un renglón por trozo, con su valor alineado a la derecha, para
   que se lea como una lista de datos y no como el pie de una imagen. */
.ap-leyenda{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e3)}
.ap-leyenda > *{display:flex;align-items:center;gap:var(--e2);font-size:var(--t3);
  color:var(--ap-ink);min-width:0}
.ap-leyenda i,.ap-leyenda .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.ap-leyenda b{margin-left:auto;font-variant-numeric:tabular-nums;
  font-weight:var(--p-recio);flex:0 0 auto}

/* ---- Las barras de montos ----------------------------------------------
   El markup ya existente —etiqueta, carril, valor— se reacomoda sin tocar el
   JavaScript de ninguna página: etiqueta y valor comparten renglón, y el
   carril pasa DEBAJO, a todo lo ancho.

   Eso resuelve de paso un defecto que no era de estilo: la columna del valor
   estaba fija en 80, 90 o 95px según el archivo, y un importe de nueve
   dígitos no cabe en 90px. Ahora el valor ocupa lo que necesita y la etiqueta
   cede, que es el orden correcto: el número es el dato.

   Los tres hijos se colocan a mano —1/1, 2/1-3, 1/2— porque con colocación
   automática el carril, al ocupar las dos columnas, empuja al valor a un
   tercer renglón. */
.ap-barras,.bars{display:flex;flex-direction:column;gap:var(--e4)}
.barrow,.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--e3);row-gap:5px;align-items:baseline;margin:0;font-size:var(--t3)}
.barrow > :nth-child(1),.bar-row > :nth-child(1){grid-area:1/1;min-width:0;width:auto;
  color:var(--ap-ink);font-weight:var(--p-normal);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow > :nth-child(3),.bar-row > :nth-child(3){grid-area:1/2;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:var(--p-recio);color:var(--ap-ink);
  white-space:nowrap}
.barrow > :nth-child(2),.bar-row > :nth-child(2){grid-area:2/1/3/3;
  height:3px;border-radius:2px;background:var(--ap-line);overflow:hidden;
  min-width:0;flex:none;width:auto}
.barrow .fill,.barrow > :nth-child(2) > i,
.bar-row .fill,.bar-row > :nth-child(2) > i{display:block;height:100%;
  border-radius:2px;background:var(--ap-ink)}

/* ---- Las tablas ---------------------------------------------------------
   Sin una sola línea vertical: entre dos columnas, el aire separa mejor que
   una raya. El encabezado en minúscula alta y color tenue —es un rótulo, no
   un dato—, y los números en CIFRAS TABULARES, que es lo que hace que una
   columna de importes se pueda leer de arriba abajo: con las cifras
   proporcionales de Open Sans, el 1 es más angosto que el 8 y los millares de
   dos renglones seguidos no quedan uno encima del otro.

   Va en :where() —especificidad cero— porque son veinte archivos con sus
   propias reglas de tabla y esto es el suelo, no el techo: cualquier página
   que tenga una razón para pintar distinto sigue mandando sobre esto sin
   pelear con !important. */
:where(table){border-collapse:collapse;width:100%}
:where(th){text-align:left;font-size:var(--t2);font-weight:var(--p-recio);
  color:var(--ap-mut);letter-spacing:.04em;text-transform:uppercase;
  padding:var(--e2) var(--e3);border-bottom:1px solid var(--ap-line);
  border-left:0;border-right:0}
:where(td){padding:var(--e3);font-size:var(--t3);border-bottom:1px solid var(--ap-line);
  border-left:0;border-right:0}
:where(tbody tr:last-child td){border-bottom:0}
/* La fila de totales se marca con una regla más firme arriba y nada más: no
   necesita fondo ni negrita de más para que el ojo la encuentre. */
:where(tfoot th,tfoot td){border-top:1.5px solid var(--ap-ink);border-bottom:0;
  font-weight:var(--p-recio);color:var(--ap-ink);text-transform:none;
  letter-spacing:0;font-size:var(--t3)}
/* Las columnas de números, alineadas a la derecha y con el dígito de ancho
   fijo. .num y .right son los dos nombres que ya usaban las páginas. */
:where(td.num,th.num,td.right,th.right,.num,.right){text-align:right;
  font-variant-numeric:tabular-nums}

/* Impresión: fuera el armazón, sólo el contenido. */
@media print{
  /* La hoja impresa vuelve a la condensada. No es nostalgia: los bloques
     @media print de Tesorería, Nómina y los recibos tienen sus tamaños
     calibrados uno por uno para que quepan en hoja carta CON una condensada.
     Con Open Sans, que es bastante más ancha, cada uno de esos cálculos deja de
     cuadrar y se rompen los documentos que la empresa de verdad imprime.
     Cambiarlos es un trabajo aparte, con la hoja medida en la mano. */
  :root{--ap-fuente:var(--ap-condensada)}
  .ap-side,.ap-top,.ap-hoja,.ap-hoja-velo,.ap-sumabar{display:none!important}
  .ap-shell{display:block}
  .ap-cont{padding:0}
}

/* Páginas que ocupan toda la ventana (el chat): el contenido llena el alto
   disponible para que la conversación no quede en una franja. */
.ap-cont.ap-alto{display:flex;flex-direction:column;min-height:calc(100vh - 54px);
                 min-height:calc(100dvh - 54px);padding-bottom:0}
.ap-cont.ap-alto > :last-child{flex:1 1 auto;min-height:0}

/* El botón de chat que common.js inserta en el encabezado de cada página sobra
   cuando hay armazón: el chat ya está en la lateral, con su contador. */
.ap-shell .chat-header-btn{display:none}

/* ===== Ocultar la barra lateral =========================================
   El botón de la barra superior la esconde y la recupera. La preferencia se
   recuerda, así que quien trabaja con tablas anchas no tiene que repetirlo. */
.ap-burger{display:grid}
/* Con la lateral a la vista, recogerla se hace desde SU flecha. El botón de la
   barra superior sólo tiene sentido cuando ya está recogida, que es cuando hace
   falta algo que la traiga de vuelta; mientras tanto sobra y sólo repetía —al
   revés— lo que ya dice la flecha. En pantalla chica no aplica: ahí la lateral
   es un cajón y ese botón es lo único que lo abre. */
@media(min-width:901px){
  .ap-shell:not(.ap-oculta) .ap-burger{display:none}
}
/* Una sola columna, no "0 y el resto": al ocultar la lateral con display:none
   ésta sale de la retícula, y el contenido pasaría a ocupar la primera columna
   —la de ancho 0— quedando aplastado contra el borde izquierdo. */
.ap-shell.ap-oculta{grid-template-columns:minmax(0,1fr)}
/* La cuenta externa no tiene lateral que plegar ni que abrir: el marco es una
   sola columna de nacimiento. */
.ap-shell.ap-sin-lateral{grid-template-columns:minmax(0,1fr)}
.ap-shell.ap-oculta .ap-side{display:none}

/* ------------------------------------------------------------------- Móvil
   Componentes del patrón móvil acordado (tarjetas en vez de tablas, hoja
   inferior para elegir/actuar, barra de suma para selección múltiple).
   Nacen con Tesorería y son la receta para el resto de los módulos: la
   visibilidad la decide cada pantalla; aquí sólo vive la pieza. */
.ap-hoja-velo{position:fixed;inset:0;background:rgba(23,26,25,.42);z-index:120;display:none}
.ap-hoja-velo.abierta{display:block}
.ap-hoja{position:fixed;left:0;right:0;bottom:0;z-index:121;background:var(--ap-s);color:var(--ap-ink);
         border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.18);
         max-height:76vh;max-height:76dvh;display:none;flex-direction:column}
.ap-hoja.abierta{display:flex}
.ap-hoja-asa{width:40px;height:4px;border-radius:999px;background:var(--ap-line);margin:8px auto 0;flex:0 0 auto}
.ap-hoja-hd{display:flex;align-items:center;gap:10px;padding:8px 18px 10px;border-bottom:1px solid var(--ap-line);
            font-size:var(--t6);font-weight:var(--p-recio);flex:0 0 auto}
.ap-hoja-bd{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
/* Renglón de la hoja: 54px de blanco táctil, el aviso sólo si el renglón lo trae. */
.ap-hoja-item{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 18px;
              border:0;border-bottom:1px solid var(--ap-line);background:transparent;color:var(--ap-ink);
              font:inherit;font-size:var(--t6);font-weight:var(--p-fuerte);text-align:left;cursor:pointer}
.ap-hoja-item:last-child{border-bottom:0}
.ap-hoja-item.act{background:var(--ap-soft);font-weight:var(--p-recio)}
/* Barra de suma: aparece con la primera casilla marcada y lleva el total. */
.ap-sumabar{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--ap-s);
            border-top:1px solid var(--ap-line);box-shadow:0 -6px 18px rgba(16,24,40,.06);
            padding:12px 14px calc(12px + env(safe-area-inset-bottom));
            display:none;align-items:center;gap:12px}
.ap-sumabar.abierta{display:flex}
.ap-sumabar .et{font-size:var(--t3);font-weight:var(--p-recio);color:var(--ap-mut);text-transform:uppercase;letter-spacing:.06em}
.ap-sumabar .total{font-family:var(--ap-display);font-size:var(--t7);font-weight:var(--p-recio);letter-spacing:-.02em;
                   font-variant-numeric:tabular-nums}
/* Casilla de selección (24px visual dentro de un blanco táctil mayor). */
.ap-check{width:24px;height:24px;border-radius:5px;border:1.5px solid var(--ap-mut);background:var(--ap-s);
          display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ap-check.si{background:var(--ap-pri);border-color:var(--ap-pri)}
.ap-check svg{width:15px;height:15px;stroke:var(--ap-pri-ink);fill:none;stroke-width:3;
              stroke-linecap:round;stroke-linejoin:round;display:none}
.ap-check.si svg{display:block}
/* Tarjeta de renglón (la tabla hecha tarjeta). La selección marca el borde sin
   mover el contenido: refuerza con sombra interior, no con grosor. */
.ap-tarjs{display:flex;flex-direction:column;gap:8px}
.ap-tarj{background:var(--ap-s);border:1px solid var(--ap-line);border-radius:var(--ap-r);
         box-shadow:var(--ap-sh);padding:12px 14px}
.ap-tarj.sel{border-color:var(--ap-pri);box-shadow:inset 0 0 0 .5px var(--ap-pri)}

/* Los botones de una celda de tabla ya NO se encogen aparte. Aquella regla
   —relleno mínimo y letra de 9.5px, con !important— existía para que
   "Imprimir" o "Eliminar" no salieran con la palabra cortada cuando cada
   página traía su propio botón. Con una sola medida para todos, encoger sólo
   estos rompía la unidad que se acaba de conseguir, y el corte se resuelve
   donde toca: con el relleno de --e2 que ya trae la regla del botón. */

/* ------------------------------------------- La tabla hecha tarjeta (móvil)
   El sistema de tablas acordado, ya como pieza del tema: la página marca su
   <table> con data-movil y shell.js arma el espejo de tarjetas. Aquí sólo
   viven las formas; quién se ve y cuándo lo deciden estas dos reglas.

   El corte va en 760px —no en los 900 del armazón— porque a esa altura la
   lateral ya se plegó y lo que estorba es la tabla, no el menú: es el mismo
   corte con el que se construyó el patrón en las Autorizaciones CEO. */
.ap-tarjs.ap-tabla-tarjs{display:none}
@media(max-width:760px){
  .ap-solo-escritorio{display:none!important}
  .ap-tarjs.ap-tabla-tarjs{display:flex}
}
/* Antetítulo: donde caen los folios y las columnas que van antes del título.
   Pequeño y gris a propósito: identifica el renglón, no es lo que se lee. */
.ap-tarj-ante{font-size:var(--t3);font-weight:var(--p-recio);color:var(--ap-mut);letter-spacing:.04em;
              text-transform:uppercase;margin-bottom:2px}
.ap-tarj-tit{font-family:var(--ap-display);font-size:var(--t6);font-weight:var(--p-recio);line-height:1.25;
             letter-spacing:var(--ap-tr)}
/* Etiqueta a la izquierda y dato a la derecha, con la línea punteada de por
   medio: es lo que sustituye a la cabecera de la columna, que en una tarjeta
   ya no existe. El dato manda (más peso), la etiqueta sólo lo nombra. */
.ap-tarj-dato{display:flex;align-items:baseline;gap:10px;margin-top:5px;font-size:var(--t5);
              line-height:1.35}
.ap-tarj-dato .et{flex:0 0 auto;max-width:45%;color:var(--ap-mut);font-size:var(--t4);
                  font-weight:var(--p-fuerte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-tarj-dato .va{flex:1;min-width:0;text-align:right;font-weight:var(--p-fuerte);
                  overflow-wrap:anywhere}
.ap-tarj-dato .va.num{font-family:var(--ap-display);letter-spacing:-.02em;
                      font-variant-numeric:tabular-nums}
/* Sin etiqueta (una columna sin cabecera) el dato ocupa el renglón entero en
   vez de dejar un hueco a la izquierda. */
.ap-tarj-dato .et:empty{display:none}

/* Pie de acciones. 44px es el mínimo táctil: por debajo de eso el dedo falla y
   la gente toca dos veces. Se reparten el ancho para que no haya que apuntar. */
.ap-tarj-acc{display:flex;gap:var(--e2);margin-top:var(--e4);flex-wrap:wrap}
.ap-tarj-acc > *{flex:1 1 auto;min-height:var(--ap-tacto);display:inline-flex;align-items:center;
                 justify-content:center;padding:0 14px;border-radius:var(--ap-r-sm);
                 border:1px solid var(--ap-line);background:var(--ap-s);color:var(--ap-ink);
                 font-family:var(--ap-body);font-size:var(--t5);font-weight:var(--p-fuerte);
                 text-decoration:none;cursor:pointer;white-space:nowrap}
.ap-tarj-acc > *:active{background:var(--ap-soft2)}
/* En una tarjeta de DECISIÓN la acción principal —la primera que la página
   pone en su columna de acciones— va en carbón: es lo que se viene a hacer.
   En una de consulta todas quedan discretas: ahí sólo se está mirando. */
.ap-tarj-decision .ap-tarj-acc > :first-child{background:var(--ap-pri);color:var(--ap-pri-ink);
                                              border-color:var(--ap-pri)}
/* Una tarjeta de consulta es para leer de corrido: menos aire y el título sin
   competir con nada. Una de decisión respira más, porque termina en un botón. */
.ap-tarj-consulta{padding:11px 13px}

/* ------------------------------------------- Filtros en pastilla (.ap-tab)
   La fila "Todos · En obra · Vencen pronto" de la referencia. Es distinta de
   .ap-pill a propósito: .ap-pill es un sello que informa, .ap-tab es un control
   que se toca, así que va con blanco táctil y pastilla completa. */
.ap-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 6px;
         scrollbar-width:none}
.ap-tabs::-webkit-scrollbar{display:none}
.ap-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--e2);
        min-height:calc(8.3px * var(--ap-esc) + 30px);padding:0 var(--e4);
        border-radius:999px;border:1px solid var(--ap-line);background:var(--ap-s);color:var(--ap-mut);
        font:inherit;font-size:var(--t4);font-weight:var(--p-medio);cursor:pointer;white-space:nowrap}
/* Con el dedo, un filtro de 36px se falla: en pantalla chica sube al blanco
   táctil. En monitor se queda compacto, que es donde la densidad sí ayuda. */
@media(max-width:900px){
  .ap-tab{min-height:var(--ap-tacto);padding:0 var(--e5)}
}
.ap-tab.on{background:var(--ap-pri);border-color:var(--ap-pri);color:var(--ap-pri-ink)}

/* ------------------------------------------------- Barra inferior (teléfono)
   Las tres pestañas de abajo de la referencia. En un teléfono el pulgar llega
   al borde inferior y no a la esquina superior izquierda, que es donde vivía
   lo único que había: el botón del menú. La lateral sigue existiendo como
   cajón —"Módulos" es quien la abre—, así que esto no quita nada, añade.
   Sólo en pantalla chica: en monitor manda la lateral. */
.ap-tabbar{display:none}
@media(max-width:900px){
  .ap-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;
             background:var(--ap-s);border-top:1px solid var(--ap-line);
             box-shadow:0 -4px 16px rgba(16,24,40,.06);
             padding-bottom:env(safe-area-inset-bottom)}
  .ap-tabbar button{flex:1;min-width:0;min-height:58px;display:flex;flex-direction:column;
                    align-items:center;justify-content:center;gap:3px;border:0;background:transparent;
                    color:var(--ap-mut);font:inherit;font-size:var(--t3);font-weight:var(--p-fuerte);cursor:pointer;
                    position:relative;padding:6px 4px}
  .ap-tabbar button .ap-ic{width:23px;height:23px}
  /* El subrayado corto bajo la pestaña activa es de la referencia: dice dónde
     estás sin pintar de color todo el renglón. */
  .ap-tabbar button.on{color:var(--ap-pri);font-weight:var(--p-recio)}
  .ap-tabbar button.on::after{content:"";position:absolute;bottom:4px;width:22px;height:3px;
                              border-radius:3px;background:var(--ap-pri)}
  .ap-tabbar .pt{position:absolute;top:5px;right:calc(50% - 20px);min-width:16px;height:16px;
                 border-radius:999px;background:var(--ap-neg);color:#fff;font-size:var(--t2);font-weight:var(--p-recio);
                 display:grid;place-items:center;padding:0 4px;line-height:1}
  /* Aire suficiente para que la barra no tape el último renglón de la página. */
  .ap-cont{padding-bottom:78px}
  .ap-cont.ap-alto{min-height:calc(100dvh - 54px - 58px)}
  /* El "?" de ayuda flota justo donde ahora está la barra. */
  .ayuda-fab{bottom:74px!important}
}
@media print{.ap-tabbar{display:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMATO DE IMPRESIÓN INSAAT  ·  «Portada de cifras»
   ═══════════════════════════════════════════════════════════════════════════
   Antes cada pantalla imprimía a su manera: diez archivos con estilos propios
   —azul marino, dorado, morado, amarillo— que no salían de aquí, y la
   «Relación de ventas de viviendas» ni siquiera eso: un window.print() pelón
   que mandaba la pantalla entera, menú incluido, y el navegador la encogía
   hasta que cabía. De ahí que "todo se encoja y desobedezca la armonía".

   Esto es el formato único. La pantalla que quiera imprimirse:
     1. llama a apMembrete({...}) y mete el resultado en un contenedor,
     2. le pone la clase .imp-hoja a lo que SÍ debe imprimirse,
     3. pone .imp-fuera a lo que no (filtros, botones, buscadores).
   Nada más. Los tamaños están en milímetros y en puntos porque la hoja es una
   hoja: escalar la interfaz al papel es lo que producía la letra minúscula.  */

@media print{
  @page{ size:letter portrait; margin:14mm 13mm 12mm; }
  @page landscape{ size:letter landscape; }

  html,body{background:#fff!important;-webkit-print-color-adjust:exact!important;
            print-color-adjust:exact!important;color:#20302c!important}
  /* El armazón entero se queda fuera del papel: lateral, barra superior,
     pestañas del teléfono, botón de ayuda y avisos flotantes. */
  .ap-side,.ap-top,.ap-tabbar,.ayuda-fab,.ap-crumb,.imp-fuera,
  #toast,.barraSel,.ap-hoja,.ap-hoja-velo,
  /* Los avisos flotantes de sincronización viven fuera del contenido y con
     z-index altísimo: en papel salían encima del documento. */
  #multiUserStatus,#multiUserConflict{display:none!important}
  .ap-shell,.ap-main,.ap-cont{display:block!important;margin:0!important;padding:0!important;
                              width:auto!important;max-width:none!important;box-shadow:none!important}
  /* El encabezado del armazón (título y botones de acción) sobra cuando la
     hoja trae su propio membrete: si no, el documento empieza dos veces. Se
     quita SÓLO en ese caso, para no dejar sin título a una pantalla que
     todavía imprima a la antigua. */
  body:has(.imp-hoja) .ap-head{display:none!important}

  /* -------- Membrete ---------------------------------------------------- */
  .imp-membrete{display:flex;justify-content:space-between;align-items:center;
                gap:8mm;margin:0 0 4mm}
  .imp-membrete .marca{width:44mm;flex:0 0 auto}
  /* El arte ocupa el 86.8 % del ancho del archivo y el 49.2 % del alto: no se
     recorta ni se aproxima, se coloca con esa medida. */
  .imp-membrete .marca img{display:block;width:100%;height:auto}
  .imp-membrete .ficha{text-align:right;font-size:7.6pt;line-height:1.55;color:#5f6764;
                       white-space:nowrap}
  .imp-membrete .ficha b{color:#2d3635;font-weight:600}
  .imp-titulo{font-size:15pt;font-weight:600;letter-spacing:-.01em;margin:0 0 2.4mm;
              padding-bottom:2mm;border-bottom:.7mm solid #2d3635}
  .imp-titulo .sub{display:block;font-size:8pt;font-weight:400;color:#5f6764;
                   letter-spacing:0;margin-top:1mm}

  /* -------- Cifras de portada ------------------------------------------- */
  .imp-cifras{display:grid;grid-template-columns:repeat(var(--imp-cols,5),minmax(0,1fr));
              gap:1.6mm;margin:0 0 4mm}
  .imp-cifras .c{border:.18mm solid #b9c0be;padding:1.9mm 2mm 2.2mm;min-width:0}
  .imp-cifras .e{font-size:5.9pt;text-transform:uppercase;letter-spacing:.08em;
                 color:#6d7573;font-weight:600;display:block}
  .imp-cifras .v{font-size:11pt;font-weight:600;letter-spacing:-.03em;margin-top:.6mm;
                 font-variant-numeric:tabular-nums;white-space:nowrap;display:block}
  .imp-cifras .s{font-size:5.9pt;color:#8a918f;display:block;margin-top:.3mm}

  /* -------- Tablas ------------------------------------------------------- */
  /* thead como grupo de encabezado: en una tabla que pasa de página, los
     títulos de columna se repiten arriba en vez de aparecer una sola vez. */
  .imp-hoja table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .imp-hoja thead{display:table-header-group}
  .imp-hoja tr{break-inside:avoid;page-break-inside:avoid}
  .imp-hoja th{background:#2d3635!important;color:#fff!important;font-size:6.4pt;
               text-transform:uppercase;letter-spacing:.06em;font-weight:600;text-align:left;
               padding:1.5mm 1.6mm;white-space:nowrap;border:0}
  .imp-hoja td{font-size:7.4pt;padding:1.4mm 1.6mm;border-bottom:.12mm solid #dfe3e1;
               color:#20302c}
  .imp-hoja th.num,.imp-hoja td.num,.imp-hoja th.n,.imp-hoja td.n,
  .imp-hoja th.calc,.imp-hoja td.calc,.imp-hoja th.right,.imp-hoja td.right{text-align:right}
  .imp-hoja tbody tr:nth-child(even) td{background:#f4f6f5!important}
  .imp-hoja tfoot td,.imp-hoja tfoot th{font-weight:600;font-size:7.6pt;color:#20302c!important;
    text-transform:none;letter-spacing:0;
    border-top:.35mm solid #2d3635;border-bottom:0;background:#eef1f0!important;padding:1.7mm 1.6mm}
  /* Un recuadro que se desliza en pantalla no tiene sentido en papel: si se
     queda con overflow, corta la última columna sin avisar. */
  .imp-hoja .tablewrap,.imp-hoja .ap-tabla-scroll,.imp-hoja .tabla{overflow:visible!important;
    max-height:none!important}
  /* El espejo de tarjetas es para el teléfono; en papel manda la tabla. */
  .imp-hoja .ap-tabla-tarjs{display:none!important}
  .imp-hoja table.ap-hidden,.imp-hoja .ap-hidden table{display:table!important}

  /* -------- Pie ---------------------------------------------------------- */
  .imp-pie{margin-top:5mm;padding-top:2mm;border-top:.18mm solid #b9c0be;
           display:flex;justify-content:space-between;font-size:6.2pt;color:#7a8280;
           letter-spacing:.03em}

  /* Un botón en papel no es un botón: es el texto que lleva dentro. Sin esto,
     el nombre de cada desarrollo salía subrayado y con caja, como si fuera un
     enlace que se pudiera pulsar en una hoja. */
  .imp-hoja :is(button,.btn){background:none!important;border:0!important;padding:0!important;
    color:inherit!important;font:inherit!important;text-decoration:none!important;
    box-shadow:none!important;min-height:0!important;display:inline!important}

  /* Cada sección marcada arranca en hoja nueva. */
  .imp-salto{break-before:page;page-break-before:always}
}