/* PNL Casas — la vista rediseñada (25-sep-2026). Ver pnl-casas.js.
   Todo lleva el prefijo px- para no pisar el cuadro del PNL SKY, que sigue con
   table.pnl de styles.css. Los colores de los renglones (--pnl-*) son los mismos.

   Color con significado, siempre el mismo en toda la vista:
     · azul    = mejor / gana        · naranja = peor / pierde
     · verde-azulado = ingreso       · gris    = costo
   Azul/naranja y no verde/rojo: se distinguen igual con daltonismo, que es la
   razón por la que las buenas prácticas de visualización financiera los usan. */
:root {
  --px-azul: #2F6B9A;     --px-azul-rgb: 47, 107, 154;   --px-azul-txt: #1F5A86;     /* 7,3:1 vs #fff */
  --px-naranja: #C7662B;  --px-naranja-rgb: 199, 102, 43; --px-naranja-txt: #9A4512;  /* 6,5:1 vs #fff */
  --px-ingreso: #4F8A7A;  --px-costo: #B7BDC4;  --px-oficina: #8C96A1;  --px-sub: #5B6B7B;
  --px-serie1: #2F4B66;   --px-serie2: #B8973E; --px-serie3: #4F8A7A;   --px-serie4: #9E6B4A;
  --px-cruz: rgba(27, 42, 59, .07);
  --px-tip-bg: #1B2A3B;   --px-tip-txt: #EFEAE1; --px-tip-2: #A7B3BF;
}
:root[data-tema="oscuro"] {
  --px-azul: #6FA8D6;     --px-azul-rgb: 111, 168, 214;  --px-azul-txt: #9CC6EA;
  --px-naranja: #E39A62;  --px-naranja-rgb: 227, 154, 98; --px-naranja-txt: #F2B98E;
  --px-ingreso: #6FB5A1;  --px-costo: #5B6877;  --px-oficina: #8190A0;  --px-sub: #9AAAB9;
  --px-serie1: #8FB3D6;   --px-serie2: #D9B268; --px-serie3: #6FB5A1;   --px-serie4: #D39B77;
  --px-cruz: rgba(255, 255, 255, .06);
  --px-tip-bg: #0E1620;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --px-azul: #6FA8D6;     --px-azul-rgb: 111, 168, 214;  --px-azul-txt: #9CC6EA;
    --px-naranja: #E39A62;  --px-naranja-rgb: 227, 154, 98; --px-naranja-txt: #F2B98E;
    --px-ingreso: #6FB5A1;  --px-costo: #5B6877;  --px-oficina: #8190A0;  --px-sub: #9AAAB9;
    --px-serie1: #8FB3D6;   --px-serie2: #D9B268; --px-serie3: #6FB5A1;   --px-serie4: #D39B77;
    --px-cruz: rgba(255, 255, 255, .06);
    --px-tip-bg: #0E1620;
  }
}

/* ---------- el armazón: filtros y KPIs quietos, lo de abajo scrollea ---------- */
body[data-vista="pnl"] .px { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.px > .px-barra, .px > .px-kpis, .px > .px-aviso { flex: 0 0 auto; }
.px-cuerpo { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.px-v-matriz .px-cuerpo { display: flex; flex-direction: column; overflow: hidden; }
.px-ico { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.px-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.px .neg, .px-cajon .neg { color: var(--px-naranja-txt); }
.px .pos, .px-cajon .pos { color: var(--px-azul-txt); }
.px-cero { color: var(--ink-3); opacity: .5; }
.px-sub { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.px-nota { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 0; }
.px-aviso { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.px-alerta-txt { color: var(--warn-txt); display: inline-flex; align-items: center; gap: 4px; }
.px-alerta > * .px-ico, .px-alerta .px-rk-id .px-ico, .px-o .px-ico, .px-tr-obra .px-ico, .px-cj-cab .px-ico:first-child { color: var(--warn-txt); }

/* ---------- la barra de filtros ---------- */
.px-barra { margin-bottom: 0; row-gap: 8px; }
/* los grupos no se achican ni se parten por dentro: si no entran, pasan al renglón de abajo */
.px-barra > *, .px-barra-der > * { flex-shrink: 0; }
.px-seg { flex-wrap: nowrap; }
.px-barra .seg { margin-bottom: 0; }
.px-seg { padding: 3px; gap: 3px; margin-bottom: 0; }
.px-seg button { padding: 5px 11px; font-size: 12.5px; min-height: 0; }
.px-barra-der { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.px-cuenta { background: var(--petroleo); color: #fff; border-radius: 999px; font-size: 10.5px; padding: 0 6px; margin-left: 3px; font-weight: 700; }
.px-pdf, .px-info-btn { display: inline-flex; align-items: center; gap: 6px; }
.px-info { position: relative; }
.px-info > summary { list-style: none; cursor: pointer; }
.px-info > summary::-webkit-details-marker { display: none; }
.px-info.con-aviso > summary::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.px-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(440px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra-overlay);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-height: 70vh; overflow: auto; }
@media (max-width: 760px) {
  .px-info[open] > .px-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; z-index: 60;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .28); }
}
.px-pop h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin: 10px 0 3px;
  display: flex; align-items: center; gap: 5px; }
.px-pop h4:first-child { margin-top: 0; }
.px-pop p { margin: 0 0 6px; }
.px-pop-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }

/* ---------- KPIs ---------- */
.px-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.px-kpi { background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio, 6px); padding: 9px 12px 8px; min-width: 0; }
.px-kpi-l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.px-kpi-v { font-size: 22px; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 1px; }
.px-kpi-v small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-right: 4px; letter-spacing: .02em; }
.px-kpi-v .px-kpi-u { margin: 0 0 0 6px; font-size: 13px; }
.px-kpi-s { font-size: 11.5px; line-height: 1.35; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.px-kpi-s b { font-weight: 650; }
/* el resultado y el margen, más fuertes que el resto: es lo que se viene a mirar */
.px-k-rdo, .px-k-margen { border-width: 1px 1px 1px 4px; }
.px-k-rdo.pos, .px-k-margen.pos { border-left-color: var(--px-azul); background: rgba(var(--px-azul-rgb), .06); }
.px-k-rdo.neg, .px-k-margen.neg { border-left-color: var(--px-naranja); background: rgba(var(--px-naranja-rgb), .07); }
.px-kpi.pos .px-kpi-v { color: var(--px-azul-txt); }
.px-kpi.neg .px-kpi-v { color: var(--px-naranja-txt); }
.px-vs.bien { color: var(--px-azul-txt); }
.px-vs.mal { color: var(--px-naranja-txt); }

/* ---------- Resumen ---------- */
.px-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; align-items: start; }
.px-p-rank { grid-row: span 2; }
.px-p-tabla { grid-column: 1 / -1; }
.px-panel { margin: 0; padding: 12px 14px; min-width: 0; }
.px-panel > header { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.px-panel h3 { font-size: 14px; margin: 0; font-weight: 650; }
.px-panel > header .seg, .px-panel > header .px-buscar { margin-left: auto; }
.px-ley { font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.px-panel > header .px-ley { margin-left: auto; }
.px-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; flex: none; }
.px-sw-b { background: rgba(var(--px-azul-rgb), .6); }
.px-sw-m { background: rgba(var(--px-naranja-rgb), .6); }
.px-sw-ing { background: var(--px-ingreso); }
.px-sw-costo { background: var(--px-costo); }
.px-sw-med { display: inline-block; width: 14px; border-top: 1.5px dashed var(--ink-2); vertical-align: 3px; }
.px-sw.px-s1, .px-gb-f i.px-s1 { background: var(--px-serie1); }
.px-sw.px-s2, .px-gb-f i.px-s2 { background: var(--px-serie2); }
.px-sw.px-s3, .px-gb-f i.px-s3 { background: var(--px-serie3); }
.px-sw.px-s4, .px-gb-f i.px-s4 { background: var(--px-serie4); }

/* ranking: barras divergentes en torno a 0, la mediana punteada de arriba a abajo */
.px-rank { display: flex; flex-direction: column; }
.px-rk, .px-rk-eje { display: grid; grid-template-columns: 118px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 0 4px; }
.px-rk { height: 22px; width: 100%; text-align: left; border-radius: 4px; }
.px-rk:hover, .px-rk:focus-visible { background: var(--surface-hover, var(--pnl-hover)); }
.px-rk-id { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.px-rk-pista { position: relative; display: block; height: 100%; }
.px-rk-cero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); opacity: .55; }
.px-rk-med { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--ink-2); opacity: .6; }
.px-rk-barra { position: absolute; top: 5px; height: 12px; border-radius: 2px; }
.px-rk-barra.pos { background: var(--px-azul); }
.px-rk-barra.neg { background: var(--px-naranja); }
/* un margen fuera de escala se corta y se desvanece en la punta: el número real va al lado */
.px-rk-barra.cortada.neg { -webkit-mask-image: linear-gradient(to right, transparent, #000 16px); mask-image: linear-gradient(to right, transparent, #000 16px); }
.px-rk-barra.cortada.pos { -webkit-mask-image: linear-gradient(to left, transparent, #000 16px); mask-image: linear-gradient(to left, transparent, #000 16px); }
.px-rk-v { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; white-space: nowrap; }
.px-rk.px-alerta { opacity: .55; }
.px-rk.px-alerta .px-rk-barra { background: repeating-linear-gradient(135deg, var(--ink-3) 0 3px, transparent 3px 6px); }
.px-rk-eje { height: 30px; margin-top: 2px; }
.px-rk-eje .px-rk-pista { border-top: 1px solid var(--pnl-linea); }
.px-rk-eje em { position: absolute; top: 3px; transform: translateX(-50%); font-size: 10.5px; color: var(--ink-3); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-rk-eje em.med { top: 16px; color: var(--ink-2); }

/* cascada horizontal: cada renglón es un paso, el tramo flota donde corresponde */
.px-wf { display: flex; flex-direction: column; gap: 1px; }
.px-wf-f { display: grid; grid-template-columns: 158px minmax(0, 1fr) 72px; gap: 8px; align-items: center; height: 23px; }
.px-wf-t { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-wf-pista { position: relative; display: block; height: 100%; }
.px-wf-cero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); opacity: .5; }
.px-wf-b { position: absolute; top: 4px; height: 15px; border-radius: 2px; }
.px-wf-b.ing { background: var(--px-ingreso); }
.px-wf-b.costo { background: var(--px-costo); }
.px-wf-b.oficina { background: var(--px-oficina); }
.px-wf-b.ajuste { background: repeating-linear-gradient(135deg, var(--px-oficina) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--px-oficina); }
.px-wf-b.sub { background: transparent; box-shadow: inset 0 0 0 1.5px var(--px-sub); }
.px-wf-b.pos { background: var(--px-azul); }
.px-wf-b.neg { background: var(--px-naranja); }
.px-wf-v { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.px-wf-sub, .px-wf-fin { border-top: 1px solid var(--pnl-linea); }
.px-wf-sub .px-wf-t, .px-wf-fin .px-wf-t, .px-wf-base .px-wf-t { font-weight: 650; }
.px-wf-fin .px-wf-v, .px-wf-sub .px-wf-v, .px-wf-base .px-wf-v { font-weight: 700; }
.px-wf.chico .px-wf-f { grid-template-columns: 116px minmax(0, 1fr) 54px; height: 18px; gap: 6px; }
.px-wf.chico .px-wf-b { top: 3px; height: 12px; }
.px-wf.chico .px-wf-t, .px-wf.chico .px-wf-v { font-size: 11px; }

/* tamaño contra margen */
.px-disp { width: 100%; height: auto; display: block; }
.px-disp-env { border-radius: 0; }
@media (max-width: 600px) { .px-disp-env .px-disp { min-width: 560px; } }
/* la barra de controles de una matriz puede achicarse y bajar de renglón: en 768 «Densidad»
   quedaba cortado contra el borde, y en el teléfono «Expandir todo» (responsive, 25-sep-2026) */
.px-m-top > .px-mat-barra { flex: 0 1 auto; min-width: 0; }
@media (max-width: 760px) {
  .px-m-top > .px-mat-barra { flex: 1 1 100%; }
  /* SKY «Mes a mes»: el nombre del renglón en dos líneas, no «Gastos admini…» */
  .px-sky-mat .c0 { white-space: normal; line-height: 1.25; }
  .px-sky-mat .c0 .px-tg span { white-space: normal; text-align: left; }
}
/* Obras en tablet: sin Tipo y Año entra entera y no se corta «Por cobrar» */
@media (min-width: 761px) and (max-width: 1100px) {
  .px-ob-t :is(th, td):nth-child(2), .px-ob-t :is(th, td):nth-child(4) { display: none; }
  .px-ob-obra { min-width: 170px; }
  .px-ob-avc { min-width: 104px; }
  .px-ob-av { width: 48px; }
  .px-ob-t th, .px-ob-t td { padding-left: 8px; padding-right: 8px; }
}
.px-disp .px-g { stroke: var(--pnl-linea); stroke-width: 1; }
.px-disp .px-tk, .px-disp .px-eje-t { font-size: 10.5px; fill: var(--ink-3); font-family: var(--fuente, system-ui); }
.px-disp .px-cero-l { stroke: var(--ink-3); stroke-width: 1; }
.px-disp .px-med-l { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .65; }
.px-pt { cursor: pointer; outline: none; }
.px-pt circle { stroke-width: 1.2; transition: stroke-width .1s; }
.px-pt.pos circle { fill: rgba(var(--px-azul-rgb), .42); stroke: var(--px-azul); }
.px-pt.neg circle { fill: rgba(var(--px-naranja-rgb), .42); stroke: var(--px-naranja); }
.px-pt.alerta circle { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 2; }
.px-pt:hover circle { stroke-width: 2.6; }
.px-pt:focus-visible circle { stroke: var(--ink); stroke-width: 2.6; }
.px-pt-fuera { fill: var(--ink-3); }

/* la tabla con las obras como filas */
.px-buscar { border: 1px solid var(--borde); border-radius: 6px; padding: 5px 9px; background: var(--surface); color: var(--ink);
  min-width: 200px; font-size: 12.5px; }
.px-tr-env { overflow: auto; }
table.px-tr { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.px-tr th, .px-tr td { padding: 5px 8px; border-bottom: 1px solid var(--pnl-linea); white-space: nowrap; }
.px-tr thead th { position: sticky; top: 0; z-index: 2; background: var(--pnl-cab); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-2); text-align: left; }
.px-tr thead th.num { text-align: right; }
.px-tr thead th button { font: inherit; font-weight: 700; color: inherit; text-transform: inherit; letter-spacing: inherit; padding: 2px 0; }
.px-tr td.num { position: relative; text-align: right; font-variant-numeric: tabular-nums; }
.px-tr td.num > span { position: relative; }
.px-tr .fuerte { font-weight: 700; }
.px-db { position: absolute; right: 4px; top: 4px; bottom: 4px; border-radius: 2px; }
.px-db.ing { background: var(--px-ingreso); opacity: .2; }
.px-db.costo { background: var(--px-costo); opacity: .38; }
.px-db.pos { background: var(--px-azul); opacity: .2; }
.px-db.neg { background: var(--px-naranja); opacity: .22; }
.px-tr-obra button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; }
.px-tr-obra b { display: inline-flex; gap: 4px; align-items: center; }
/* el ⚠ va al lado del código: afuera, en absoluto, caía encima de la casilla de comparar (responsive, 25-sep-2026) */
.px-tr-obra small { color: var(--ink-3); font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.px-tr-txt { color: var(--ink-2); }
.px-tr .px-chk { width: 30px; text-align: center; padding-left: 6px; padding-right: 0; }
.px-tr tr.px-alerta td:not(.px-chk):not(.px-tr-obra) { opacity: .55; }
.px-tr tr.px-sel td { background: var(--surface-sel, #DDE5EE); }
.px-tr tfoot td { font-weight: 700; border-top: 2px solid var(--ink-3); background: var(--surface-2, #FBF9F5); position: sticky; bottom: 0; }
.px-tr .px-sin { text-align: center; color: var(--ink-3); padding: 18px; }
/* calor: la intensidad sale del desvío contra la mediana; opacidad baja para no tapar el número */
/* Va como CAPA (background-image) sobre el fondo de la fila, no en su lugar: en el pie
   fijo, un fondo semitransparente dejaba ver las filas que pasan por abajo. */
.px-hb { background-image: linear-gradient(rgba(var(--px-azul-rgb), var(--h)), rgba(var(--px-azul-rgb), var(--h))) !important; }
.px-hm { background-image: linear-gradient(rgba(var(--px-naranja-rgb), var(--h)), rgba(var(--px-naranja-rgb), var(--h))) !important; }

/* ---------- Matriz ---------- */
.px-mat-barra { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.px-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.px-mat-barra .px-ley { margin-left: auto; }
.px-mat-env { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface);
  border: 1px solid var(--borde); border-radius: var(--radio, 6px); }
table.px-mat { border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; --pie-h: 25px; }
.px-mat th, .px-mat td { padding: 3px 8px; height: 25px; border-bottom: 1px solid var(--pnl-linea); }
.px-mat.comoda { font-size: 12.5px; --pie-h: 33px; }
.px-mat.comoda th, .px-mat.comoda td { padding: 6px 10px; height: 33px; }
.px-mat td.num, .px-mat th.num { text-align: right; font-variant-numeric: tabular-nums; }
.px-mat thead th { position: sticky; top: 0; z-index: 3; background: var(--pnl-cab); vertical-align: bottom;
  box-shadow: inset 0 -2px 0 var(--ink-3); height: auto; font-weight: 700; }
.px-mat thead th.c0 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.px-mat thead th.c1, .px-mat thead th.c2 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.px-mat th.px-o { min-width: 98px; }
.px-mat th.px-o button { font-weight: 700; font-size: 11.5px; color: var(--ink); display: inline-flex; gap: 3px; align-items: center;
  text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
.px-mat th.px-o small { display: block; font-size: 10px; font-weight: 500; color: var(--ink-3); }
/* la cuenta, el total y la mediana quedan fijos a la izquierda: siempre hay contra qué comparar */
.px-mat .c0 { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 232px; min-width: 232px; max-width: 232px;
  overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 400; }
.px-mat .c1 { position: sticky; left: 232px; z-index: 2; background: var(--pnl-finzona); width: 108px; min-width: 108px; max-width: 108px; }
.px-mat .c2 { position: sticky; left: 340px; z-index: 2; background: var(--pnl-finzona); width: 96px; min-width: 96px; max-width: 96px;
  border-right: 2px solid var(--ink-3); color: var(--ink-2); }
.px-mat thead .c0, .px-mat thead .c1, .px-mat thead .c2 { z-index: 5; background: var(--pnl-cab); }
.px-mat td.fuerte { font-weight: 700; }
.px-mat .px-pc { display: block; font-style: normal; font-size: 10px; color: var(--ink-3); line-height: 1.1; }
.px-mat td.neg { color: var(--px-naranja-txt); }
/* jerarquía: categorías fuertes, subcuentas tenues */
.px-mat .px-n0 > * { font-weight: 700; }
.px-mat .px-n1 > * { font-weight: 600; }
.px-mat .px-n2 > * { color: var(--ink-2); font-size: 11.5px; font-weight: 400; }
.px-mat .px-n2 .c0 { padding-left: 30px; }
:is(.px-mat, .px-dt) tr.pnl-bloque > * { background-color: var(--pnl-bloque); }
:is(.px-mat, .px-dt) tr.pnl-tot-ing > *, :is(.px-mat, .px-dt) tr.pnl-ing-h > * { background-color: var(--pnl-ingreso); }
:is(.px-mat, .px-dt) tr.pnl-tot > * { background-color: var(--pnl-egreso); }
:is(.px-mat, .px-dt) tr.pnl-res > *, :is(.px-mat, .px-dt) tr.pnl-res-final > * { background-color: var(--pnl-res); }
:is(.px-mat, .px-dt) tr.pnl-aux > * { font-style: italic; color: var(--ink-3); }
.px-mat tr.px-meta > * { background-color: var(--pnl-cab); color: var(--ink-2); font-size: 11px; }
.px-tg { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; max-width: 100%; }
.px-tg span { overflow: hidden; text-overflow: ellipsis; }
.px-tg em { font-style: normal; font-size: 10px; color: var(--ink-3); font-weight: 500; }
.px-tg .px-ico { width: 12px; height: 12px; transition: transform .15s; }
.px-tg[aria-expanded="true"] .px-ico { transform: rotate(90deg); }
/* la obra con % no representativo se atenúa, no se esconde */
.px-mat .px-aten { opacity: .5; }
/* en el encabezado y el pie fijos no: con opacidad se verían las filas que pasan por abajo */
.px-mat thead .px-aten, .px-mat tfoot .px-aten { opacity: 1; color: var(--ink-3); }
.px-mat thead th.px-aten button { color: var(--ink-3); }
.px-exp { padding: 5px 12px; min-height: 0; font-size: 12.5px; }
/* la cruz: la fila la da el hover general de las tablas; la columna, esto */
.px-mat .px-cx { box-shadow: inset 0 0 0 999px var(--px-cruz); }
.px-mat thead th.px-cx { box-shadow: inset 0 -2px 0 var(--ink), inset 0 0 0 999px var(--px-cruz); }
/* el resultado y el margen, fijos abajo */
.px-mat tfoot th, .px-mat tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--pnl-res); font-weight: 700; }
.px-mat tfoot .px-pie-rdo > * { bottom: var(--pie-h); border-top: 2px solid var(--ink-3); font-size: 12.5px; }
.px-mat tfoot .c0, .px-mat tfoot .c1, .px-mat tfoot .c2 { z-index: 5; }
.px-mat tfoot .c1, .px-mat tfoot .c2 { background: var(--pnl-res); }

/* ---------- detalle de una obra ---------- */
.px-cajon-fondo { position: fixed; inset: 0; background: rgba(19, 30, 41, .35); z-index: 80; }
.px-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--surface); color: var(--ink);
  z-index: 81; box-shadow: var(--sombra-overlay); overflow: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 10px; }
.px-cajon:focus { outline: none; }
.px-cj-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.px-cj-cab h3 { font-size: 19px; display: flex; gap: 6px; align-items: center; margin: 0; }
.px-cj-cab h3 .px-ico { width: 18px; height: 18px; }
.px-cj-cab p { color: var(--ink-3); font-size: 12.5px; margin: 2px 0 0; }
.px-cj-x { padding: 6px; border-radius: 6px; color: var(--ink-2); }
.px-cj-x:hover { background: var(--surface-hover, var(--pnl-hover)); }
.px-cj-x .px-ico { width: 18px; height: 18px; }
.px-cj-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.px-cj-acc a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.px-cj-al { margin: 0; display: flex; gap: 6px; }
.px-mks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.px-mk { border: 1px solid var(--borde); border-radius: 6px; padding: 7px 10px; display: flex; flex-direction: column; min-width: 0; }
.px-mk span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; }
.px-mk b { font-size: 18px; font-variant-numeric: tabular-nums; }
.px-mk b small { font-size: 11px; color: var(--ink-3); margin-right: 3px; font-weight: 600; }
.px-mk small { font-size: 11px; color: var(--ink-3); }
.px-mk.pos b { color: var(--px-azul-txt); }
.px-mk.neg b { color: var(--px-naranja-txt); }
.px-cajon h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 8px 0 0; font-weight: 700; }
.px-cajon h4 .px-sub { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.px-cj-tabla { overflow: auto; }
table.px-dt { width: 100%; border-collapse: collapse; font-size: 12px; }
.px-dt th, .px-dt td { padding: 3px 7px; height: 26px; border-bottom: 1px solid var(--pnl-linea); white-space: nowrap; }
.px-dt td.num, .px-dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.px-dt thead th { background: var(--pnl-cab); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); text-align: left; }
.px-dt thead th.num { text-align: right; }
.px-dt tbody th { text-align: left; font-weight: 400; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.px-dt .px-n0 > * { font-weight: 700; }
.px-dt .px-n1 > * { font-weight: 600; }
.px-dt .px-n2 > * { color: var(--ink-3); }
.px-dt .px-n2 th { padding-left: 18px; }
.px-dt td.neg { color: var(--px-naranja-txt); }
.px-d-med { color: var(--ink-3); }
.px-d-dif.mal { color: var(--px-naranja-txt); font-weight: 650; }
.px-d-dif.bien { color: var(--px-azul-txt); font-weight: 650; }

/* ---------- comparar ---------- */
.px-cmp-cab { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; margin: 0 0 10px; }
.px-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.px-chips select { width: auto; flex: 0 0 auto; max-width: 100%; border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px; background: var(--surface); color: var(--ink); font-size: 12.5px; }
.px-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--borde); border-radius: 999px;
  font-weight: 650; font-size: 12.5px; background: var(--surface); }
.px-chip.px-s1 { box-shadow: inset 4px 0 0 var(--px-serie1); }
.px-chip.px-s2 { box-shadow: inset 4px 0 0 var(--px-serie2); }
.px-chip.px-s3 { box-shadow: inset 4px 0 0 var(--px-serie3); }
.px-chip.px-s4 { box-shadow: inset 4px 0 0 var(--px-serie4); }
.px-chip button { display: inline-flex; padding: 3px; border-radius: 50%; color: var(--ink-3); }
.px-chip button:hover { background: var(--surface-hover, var(--pnl-hover)); color: var(--ink); }
.px-cmp { grid-auto-flow: dense; }
.px-p-mult { grid-column: 1 / -1; }
.px-cmp-k th .px-sw { margin-right: 5px; }
.px-mults { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.px-mult h4 { font-size: 12.5px; display: flex; gap: 6px; align-items: center; margin: 0 0 4px; }
.px-gb { display: flex; flex-direction: column; gap: 9px; }
.px-gb-g { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 8px; align-items: start; }
.px-gb-t { font-size: 12px; }
.px-gb-bs { display: flex; flex-direction: column; gap: 2px; }
.px-gb-f { display: flex; align-items: center; gap: 6px; height: 12px; }
.px-gb-f i { display: block; height: 10px; border-radius: 2px; min-width: 1px; }
.px-gb-f em { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-vacio { padding: 20px; color: var(--ink-3); }

/* ---------- el tooltip ---------- */
#px-tip { position: fixed; z-index: 200; pointer-events: none; max-width: 330px; background: var(--px-tip-bg); color: var(--px-tip-txt);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: 8px 11px; font-size: 12px; line-height: 1.45; box-shadow: var(--sombra-overlay); }
#px-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 5px 0 0; }
#px-tip dt { color: var(--px-tip-2); }
#px-tip dd { margin: 0; font-variant-numeric: tabular-nums; }
#px-tip .px-tip-al { margin: 6px 0 0; color: #F2C98E; display: flex; gap: 5px; align-items: flex-start; }
#px-tip .px-tip-pie { margin: 5px 0 0; color: var(--px-tip-2); font-size: 11px; }

/* ---------- pantallas medianas y chicas ---------- */
@media (max-width: 1240px) { .px-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .px-grid { grid-template-columns: minmax(0, 1fr); }
  .px-p-rank { grid-row: auto; }
}
/* En el teléfono la página scrollea entera (no hay alto para dos zonas quietas): primero
   los KPIs y el ranking, que es lo que se mira; la matriz, con su propio scroll. */
@media (max-width: 760px) {
  body[data-vista="pnl"]:has(.px) { height: auto; overflow: visible; }
  body[data-vista="pnl"]:has(.px) .shell { height: auto; overflow: visible; }
  body[data-vista="pnl"]:has(.px) main { overflow: visible; }
  body[data-vista="pnl"]:has(.px) .vista { display: block; }
  body[data-vista="pnl"] .px { display: block; }
  .px > * + * { margin-top: 10px; }
  .px-cuerpo, .px-v-matriz .px-cuerpo { overflow: visible; display: block; }
  .px-mat-env { max-height: 72vh; }
  .px-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .px-kpi { padding: 7px 9px; }
  .px-kpi-v { font-size: 18px; }
  /* componentes.css vuelve .filtros una grilla de 3 columnas en el teléfono (pensada
     para formularios de filtros): esta barra es de botones segmentados y se lee mejor
     en renglones: cuadro y visual · año y moneda · vista, (i) y PDF. */
  .filtros.px-barra { display: flex; flex-wrap: wrap; gap: 6px; }
  .filtros.px-barra select { flex: 1 1 120px; width: auto; min-width: 0; }
  .px-barra .btn-sec, .px-mat-barra .btn-sec { width: auto; }
  .px-barra-der { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .px-barra-der > .px-seg { flex: 1 1 auto; }
  .px-barra-der > .px-seg button { flex: 1; }
  .px-info-btn span { display: none; }
  .px-mat .c0 { width: 138px; min-width: 138px; max-width: 138px; }
  .px-mat .c1, .px-mat .c2 { position: static; }
  .px-mat .px-n2 .c0 { padding-left: 16px; }
  .px-rk, .px-rk-eje { grid-template-columns: 88px minmax(0, 1fr) 56px; gap: 6px; }
  .px-wf-f { grid-template-columns: 112px minmax(0, 1fr) 60px; gap: 6px; }
  .px-gb-g { grid-template-columns: 1fr; gap: 3px; }
  .px-panel > header .px-buscar { margin-left: 0; min-width: 0; flex: 1 1 100%; }
  .px-mat-barra .px-ley { margin-left: 0; }
  .px-cajon { padding: 12px 12px 24px; }
}

/* ---------- papel ---------- */
#px-imprimir { display: none; }
@media print {
  body.px-imprimiendo .shell, body.px-imprimiendo #px-tip, body.px-imprimiendo #toast, body.px-imprimiendo #modal-raiz { display: none !important; }
  body.px-imprimiendo #px-imprimir { display: block; }
  /* en papel siempre claro, aunque la pantalla esté en oscuro */
  #px-imprimir {
    --surface: #fff; --ink: #1B2A3B; --ink-2: #4A4A4A; --ink-3: #6A6E73; --borde: #D9D2C6;
    --pnl-bloque: #E7ECEF; --pnl-ingreso: #DCEBDD; --pnl-egreso: #F7E7C8; --pnl-res: #DDE5EE; --pnl-cab: #F1ECE3; --pnl-linea: #E2DCD1;
    --px-azul: #2F6B9A; --px-azul-rgb: 47, 107, 154; --px-azul-txt: #1F5A86; --px-naranja: #C7662B; --px-naranja-rgb: 199, 102, 43;
    --px-naranja-txt: #9A4512; --px-ingreso: #4F8A7A; --px-costo: #B7BDC4; --px-oficina: #8C96A1; --px-sub: #5B6B7B;
    --px-serie1: #2F4B66; --px-serie2: #B8973E; --px-serie3: #4F8A7A; --px-serie4: #9E6B4A; --warn-txt: #8A5407;
    background: #fff; color: #1B2A3B; font-size: 8pt;
  }
  #px-imprimir .neg { color: var(--px-naranja-txt); }
  #px-imprimir .pos { color: var(--px-azul-txt); }
  .px-imp-cab h1 { font-size: 14pt; margin: 0; }
  .px-imp-cab p { font-size: 8pt; color: #555; margin: 2px 0 8px; }
  #px-imprimir h2 { font-size: 10.5pt; margin: 10px 0 5px; }
  #px-imprimir .px-kpis { grid-template-columns: repeat(6, 1fr); gap: 5px; }
  #px-imprimir .px-kpi { padding: 5px 7px; break-inside: avoid; }
  #px-imprimir .px-kpi-v { font-size: 13pt; }
  #px-imprimir .px-kpi-s, #px-imprimir .px-kpi-l { font-size: 6.8pt; }
  #px-imprimir .px-rk, #px-imprimir .px-rk-eje { grid-template-columns: 96px 1fr 52px; height: 12.5px; }
  #px-imprimir .px-rk-eje { height: 24px; }
  #px-imprimir .px-rk-id, #px-imprimir .px-rk-v { font-size: 7pt; }
  #px-imprimir .px-rk-barra { top: 2.5px; height: 7.5px; }
  #px-imprimir .px-rk-eje em { font-size: 6.5pt; }
  #px-imprimir .px-rk-eje em.med { top: 12px; }
  .px-salto { break-before: page; }
  table.px-imp-mat { width: 100%; border-collapse: collapse; font-size: 6.4pt; table-layout: fixed; margin: 0 0 6px; }
  .px-imp-mat th, .px-imp-mat td { font-size: 6.4pt; line-height: 1.25; letter-spacing: 0; padding: 1.4px 3px; height: auto; border-bottom: .5px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* el total y la mediana llevan siete dígitos y paréntesis: necesitan más que una obra */
  .px-imp-mat th:nth-child(2), .px-imp-mat th:nth-child(3) { width: 74px; }
  /* los nombres largos de obra («TINGLADO GRUPO NORTE») se parten en vez de cortarse */
  .px-imp-mat thead th { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
  /* con el id: styles.css agranda la letra de las filas de resultado (tr.pnl-res td) */
  #px-imprimir .px-imp-mat th, #px-imprimir .px-imp-mat td { font-size: 6.4pt; }
  .px-imp-mat thead { display: table-header-group; }
  .px-imp-mat thead th { background: #F1ECE3; font-weight: 700; vertical-align: bottom; }
  .px-imp-mat tr { break-inside: avoid; }
  .px-imp-mat th:first-child { width: 150px; text-align: left; }
  .px-imp-mat td.num, .px-imp-mat th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .px-imp-mat small { display: block; font-weight: 400; color: #666; }
  .px-imp-mat .px-n0 > * { font-weight: 700; }
  .px-imp-mat .px-n1 > * { font-weight: 600; }
  .px-imp-mat tr.pnl-bloque > * { background: #EEF2F4; }
  .px-imp-mat tr.pnl-res > *, .px-imp-mat tr.pnl-res-final > *, .px-imp-mat tr.px-imp-mg > * { background: #DDE5EE; font-weight: 700; }
  .px-imp-mat td.neg { color: #9A4512; }
  #px-imprimir .px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #px-imprimir .card { border: 1px solid #ddd; box-shadow: none; padding: 8px; break-inside: avoid; }
}

/* =============================================================================
   REDISEÑO PREMIUM (25-sep-2026) — Nico, sobre la primera versión: «le falta jerarquía,
   calidad premium». Aprobó la dirección en Claude Design («vamos por ese»).
   · Jerarquía: el veredicto (cuánto se ganó o perdió y por qué) → las cifras de apoyo →
     el detalle, en silencio salvo lo que se aparta.
   · La familia tipográfica de la app de obra: Cormorant Garamond para títulos y cifras
     grandes, Montserrat para rótulos, Lato para el texto y los números. Se sirven desde
     /obra/fuentes/ (mismo servidor): ni CDN ni archivos duplicados.
   · La página scrollea entera; la matriz, al llegar, ocupa la pantalla y scrollea adentro
     con sus encabezados y su resultado fijos.
   Va al final del archivo a propósito: pisa lo de arriba donde el diseño cambió.
   ============================================================================= */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url(/obra/fuentes/cormorant-garamond-500.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(/obra/fuentes/cormorant-garamond-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(/obra/fuentes/montserrat-500.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/obra/fuentes/montserrat-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(/obra/fuentes/montserrat-700.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url(/obra/fuentes/lato-400.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url(/obra/fuentes/lato-700.woff2) format("woff2"); }

.px, .px-cajon, #px-imprimir, #px-tip {
  --px-serif: "Cormorant Garamond", Georgia, serif;
  --px-ui: "Montserrat", system-ui, sans-serif;
  --px-texto: "Lato", system-ui, sans-serif;
  --px-dorado-t: #8F722A;
  --px-sup: var(--surface, #fff); --px-sup2: #FBF9F5; --px-clave: #F4F8F5;
  --px-linea: #E8E2D8; --px-linea2: #D9D1C4; --px-fila: #F1ECE4; --px-pista: #F2EEE7;
  --px-tinta: var(--ink, #1B2A3B); --px-tinta2: #566170; --px-tinta3: #7E858E;
  --px-sel: #1B2A3B; --px-sel-t: #FFFFFF;
  --px-pie: #1B2A3B; --px-pie2: #24374D; --px-pie-neg: #F4B98C; --px-pie-pos: #A9CFEF;
  --px-sombra: 0 1px 2px rgba(27, 42, 59, .05), 0 14px 34px rgba(27, 42, 59, .07);
  --px-hero-der: rgba(199, 102, 43, .05); --px-hero-der-pos: rgba(47, 107, 154, .05);
  --px-pill-b: rgba(47, 107, 154, .12); --px-pill-m: rgba(199, 102, 43, .13);
}
:root[data-tema="oscuro"] :is(.px, .px-cajon) {
  --px-dorado-t: #D5B36A; --px-sup2: #203244; --px-clave: #1C3033;
  --px-linea: #2B3F55; --px-linea2: #35495F; --px-fila: #243548; --px-pista: #26384B;
  --px-tinta2: #B3BDC8; --px-tinta3: #8E9BAA;
  --px-sel: #E9DDBF; --px-sel-t: #15212D; --px-pie: #0E1620; --px-pie2: #142130;
  --px-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .22);
  --px-hero-der: rgba(227, 154, 98, .07); --px-hero-der-pos: rgba(111, 168, 214, .07);
  --px-pill-b: rgba(111, 168, 214, .16); --px-pill-m: rgba(227, 154, 98, .17);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) :is(.px, .px-cajon) {
    --px-dorado-t: #D5B36A; --px-sup2: #203244; --px-clave: #1C3033;
    --px-linea: #2B3F55; --px-linea2: #35495F; --px-fila: #243548; --px-pista: #26384B;
    --px-tinta2: #B3BDC8; --px-tinta3: #8E9BAA;
    --px-sel: #E9DDBF; --px-sel-t: #15212D; --px-pie: #0E1620; --px-pie2: #142130;
    --px-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .22);
    --px-hero-der: rgba(227, 154, 98, .07); --px-hero-der-pos: rgba(111, 168, 214, .07);
    --px-pill-b: rgba(111, 168, 214, .16); --px-pill-m: rgba(227, 154, 98, .17);
  }
}

/* ---------- la página scrollea entera ---------- */
body[data-vista="pnl"]:has(.px) { height: auto; overflow: visible; }
body[data-vista="pnl"]:has(.px) .shell { height: auto; min-height: 100vh; overflow: visible; }
body[data-vista="pnl"]:has(.px) main { overflow: visible; }
body[data-vista="pnl"]:has(.px) .vista { display: block; }
body[data-vista="pnl"] .px { display: flex; flex-direction: column; gap: 22px; flex: none; min-height: 0; font-family: var(--px-texto); padding-bottom: 12px; }
.px .px-cuerpo, .px.px-v-matriz .px-cuerpo { display: block; overflow: visible; flex: none; min-height: 0; }
.px .card { border: 0; border-radius: 16px; box-shadow: var(--px-sombra); background: var(--px-sup); margin: 0; }

/* ---------- la barra: píldoras ---------- */
.px .px-barra { gap: 8px; }
:root .px-barra .px-seg { border: 1px solid var(--px-linea2); border-radius: 999px; background: var(--px-sup); padding: 3px; gap: 2px; }
:root .px-barra .px-seg button, :root .px .px-seg button { font-family: var(--px-ui); font-size: 12px; font-weight: 500; letter-spacing: .01em;
  padding: 6px 12px; border-radius: 999px; color: var(--px-tinta2); background: transparent; box-shadow: none; }
:root .px-barra .px-seg button.activo, :root .px .px-seg button.activo { background: var(--px-sel); color: var(--px-sel-t); }
:root .px .px-seg { border: 1px solid var(--px-linea2); border-radius: 999px; background: var(--px-sup); padding: 3px; gap: 2px; }
.px-barra select { height: 34px; border-radius: 999px; border: 1px solid var(--px-linea2); background-color: var(--px-sup);
  font-family: var(--px-ui); font-size: 12px; font-weight: 500; padding: 0 12px; color: var(--px-tinta); }
.px-barra .px-info-btn, .px-barra .px-pdf { height: 34px; border-radius: 999px; border: 1px solid var(--px-linea2); background: var(--px-sup);
  color: var(--px-tinta); font-family: var(--px-ui); font-size: 12px; font-weight: 500; padding: 0 14px; }
.px-cuenta { background: var(--px-sel-t); color: var(--px-sel); }
.px-seg button:not(.activo) .px-cuenta { background: var(--px-sel); color: var(--px-sel-t); }

/* ---------- el veredicto ---------- */
.px-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background: var(--px-sup); border-radius: 16px;
  box-shadow: var(--px-sombra); overflow: hidden; }
.px-hero-izq { padding: 30px 34px 28px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.px-eyebrow { margin: 0; font-family: var(--px-ui); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--px-dorado-t); }
.px .px-titulo { margin: 4px 0 0; font-family: var(--px-serif); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -.01em; color: var(--px-tinta); }
.px-meta { margin: 0; font-size: 14px; color: var(--px-tinta3); }
.px-relato { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--px-tinta2); max-width: 68ch; }
.px-relato b { color: var(--px-tinta); }
.px-brecha { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.px-br-f { display: grid; grid-template-columns: 136px minmax(0, 1fr) 70px; align-items: center; gap: 14px; }
.px-br-t { font-size: 13px; color: var(--px-tinta2); }
.px-br-v { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--px-tinta); }
.px-br-pista { position: relative; height: 14px; border-radius: 3px; background: var(--px-pista); }
.px-br-pista i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.px-br-ing { background: var(--px-ingreso); }
.px-br-c { background: var(--px-costo); }
.px-br-perd { background: repeating-linear-gradient(135deg, var(--px-naranja) 0 4px, transparent 4px 7px), rgba(var(--px-naranja-rgb), .25); }
.px-br-gan { background: repeating-linear-gradient(135deg, var(--px-azul) 0 4px, transparent 4px 7px), rgba(var(--px-azul-rgb), .25); }
.px-br-perd em, .px-br-gan em { position: absolute; right: 0; top: 19px; font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.px-br-perd em { color: var(--px-naranja-txt); }
.px-br-gan em { color: var(--px-azul-txt); }
.px-hero-der { padding: 30px 34px; border-left: 1px solid var(--px-linea); display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background: var(--px-hero-der); min-width: 0; }
.px-hero:has(.px-k-grande.pos) .px-hero-der { background: var(--px-hero-der-pos); }
.px-kl { margin: 0; font-family: var(--px-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--px-tinta3); }
.px-k-grande { margin: 0; font-family: var(--px-serif); font-weight: 600; font-size: clamp(54px, 5.4vw, 80px); line-height: .95; letter-spacing: -.02em;
  font-variant-numeric: lining-nums; white-space: nowrap; }
.px-mon { font-family: var(--px-ui); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--px-tinta3); margin-right: 10px; vertical-align: 1.1em; }
.px-k-par { display: flex; gap: 32px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--px-linea); flex-wrap: wrap; }
.px-k-medio { margin: 4px 0 0; font-family: var(--px-serif); font-weight: 600; font-size: 32px; line-height: 1.1; font-variant-numeric: lining-nums; color: var(--px-tinta); }
.px-k-nota { margin: 2px 0 0; font-size: 12px; color: var(--px-tinta3); }

/* ---------- las cifras de apoyo: sin recuadros ---------- */
.px-apoyo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.px-ap { padding: 2px 22px; border-left: 1px solid var(--px-linea2); min-width: 0; }
.px-ap:first-child { border-left: 0; padding-left: 2px; }
.px-ap-v { margin: 6px 0 0; font-size: 23px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--px-tinta); }
.px-ap-s { margin: 2px 0 0; font-size: 12.5px; color: var(--px-tinta3); }

/* ---------- títulos de las tarjetas ---------- */
.px .px-h3, .px .px-panel h3, .px .px-lista h3, .px-cajon .px-cj-cab h3 { font-family: var(--px-serif); font-weight: 600; color: var(--px-tinta); margin: 0; }
.px .px-h3 { font-size: 28px; line-height: 1; display: block; }
.px .px-panel h3 { font-size: 24px; line-height: 1.05; }
.px .px-panel { padding: 20px 22px; }
.px-cajon .px-cj-cab h3 { font-size: 30px; }

/* ---------- la matriz ---------- */
.px .px-matriz { padding: 22px 0 0; overflow: hidden; }
.px-m-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 20px; padding: 0 22px; flex-wrap: wrap; }
.px-m-sub { margin: 6px 0 0; font-size: 13px; color: var(--px-tinta3); }
.px-matriz .px-mat-barra { margin: 0; gap: 8px 14px; }
.px-matriz .px-ctl { font-family: var(--px-ui); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--px-tinta3); }
.px-exp { font-family: var(--px-ui); font-size: 12px; font-weight: 600; color: var(--px-tinta); background: none; border: 0; padding: 6px 2px; cursor: pointer;
  text-decoration: underline; text-decoration-color: #B8973E; text-underline-offset: 4px; }
.px-matriz > .px-ley { display: flex; padding: 12px 22px 14px; margin: 0; font-size: 12px; gap: 8px; }
.px-matriz .px-mat-env { border: 0; border-top: 1px solid var(--px-linea); border-radius: 0; background: var(--px-sup); max-height: calc(100dvh - 96px); }
@supports not (height: 100dvh) { .px-matriz .px-mat-env { max-height: calc(100vh - 96px); } }
.px-pill { display: inline-block; padding: 2px 7px; border-radius: 5px; font-weight: 700; line-height: 1.35; }
.px-pill.b { background: var(--px-pill-b); color: var(--px-azul-txt); }
.px-pill.m { background: var(--px-pill-m); color: var(--px-naranja-txt); }
.px-ley .px-pill { font-size: 11px; padding: 1px 7px; }
table.px-mat { font-family: var(--px-texto); font-size: 13px; --pie-h: 34px; width: 100%; }
.px-mat th, .px-mat td { height: 33px; padding: 0 10px; border-bottom: 1px solid var(--px-fila); }
.px-mat.comoda { font-size: 13.5px; --pie-h: 40px; }
.px-mat.comoda th, .px-mat.comoda td { height: 40px; padding: 0 12px; }
.px-mat thead th { height: auto; padding-top: 12px; padding-bottom: 10px; background: var(--px-sup2); box-shadow: inset 0 -1px 0 var(--px-linea2);
  font-family: var(--px-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--px-tinta3); vertical-align: bottom; }
.px-mat thead th.c0 { padding-left: 22px; }
.px-mat th.px-o { min-width: 96px; text-transform: none; letter-spacing: 0; }
.px-mat th.px-o button { display: inline; font-family: var(--px-ui); font-size: 11.5px; font-weight: 700; color: var(--px-tinta); text-decoration: none;
  white-space: normal; line-height: 1.2; text-align: right; }
.px-mat th.px-o small { display: block; margin-top: 2px; font-family: var(--px-texto); font-size: 11px; font-weight: 400; color: var(--px-tinta3); }
.px-mat th.px-o em { display: block; margin-top: 3px; font-style: normal; font-family: var(--px-texto); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.px-mb { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--px-pista); margin-top: 6px; }
.px-mb i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.px-mb-0 { width: 1px; background: var(--px-tinta3); top: -2px !important; bottom: -2px !important; }
.px-mb-b.neg { background: var(--px-naranja); }
.px-mb-b.pos { background: var(--px-azul); }
.px-mb-b.al { background: repeating-linear-gradient(135deg, var(--px-tinta3) 0 3px, transparent 3px 6px); }
.px-mat .c0 { width: 250px; min-width: 250px; max-width: 250px; padding-left: 22px; background: var(--px-sup); }
.px-mat .c1 { left: 250px; width: 112px; min-width: 112px; max-width: 112px; background: var(--px-sup2); }
.px-mat .c2 { left: 362px; width: 100px; min-width: 100px; max-width: 100px; background: var(--px-sup2); border-right: 1px solid var(--px-linea); color: var(--px-tinta3); }
.px-mat thead .c0, .px-mat thead .c1, .px-mat thead .c2 { background: var(--px-sup2); }
.px-mat tbody th { font-weight: 400; color: var(--px-tinta); }
.px-mat .px-n2 .c0 { padding-left: 42px; }
/* las filas: rubros tranquilos, lo que suma en negrita, lo informativo en gris */
:root .px-mat tr > * { background-color: transparent; }
:root .px-mat tr > .c0 { background-color: var(--px-sup); }
:root .px-mat tr > .c1, :root .px-mat tr > .c2 { background-color: var(--px-sup2); }
/* El encabezado queda fijo arriba mientras la matriz scrollea: tiene que ser opaco. La regla de
   `tr > *` transparente le sacaba el fondo a las columnas de obra y los números de las filas que
   pasaban por debajo se leían encima del código, los m² y el margen (Nico, 29-sep-2026). */
:root .px-mat thead tr > th { background-color: var(--px-sup2); }
:root .px-mat tbody tr.pnl-bloque > td, :root .px-mat tbody tr.pnl-bloque > th { font-weight: 400; color: var(--px-tinta); font-size: inherit; }
:root .px-mat tbody tr.pnl-tot-ing > * { font-weight: 700; }
:root .px-mat tbody tr.pnl-ing-h > * { font-weight: 700; background-color: var(--px-clave); border-top: 0; border-bottom-color: var(--px-fila); }
:root .px-mat tbody tr.pnl-tot > *, :root .px-mat tbody tr.pnl-res > * { font-weight: 700; font-size: inherit; border-top: 1px solid var(--px-linea2); }
:root .px-mat tbody tr.pnl-aux > * { font-style: italic; color: var(--px-tinta3); font-size: 12.5px; }
:root .px-mat tbody tr.px-sec > * { height: auto; padding-top: 16px; padding-bottom: 7px; background-color: var(--px-sup); border-bottom: 1px solid var(--px-linea); }
:root .px-mat tbody tr.px-sec > .c2 { border-right: 1px solid var(--px-linea); }
.px-mat tr.px-sec th { font-family: var(--px-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--px-dorado-t); }
.px-mat .px-tg { gap: 8px; }
.px-mat .px-tg .px-ico { color: var(--px-tinta3); width: 11px; height: 11px; }
.px-mat .px-tg em { font-size: 11px; color: var(--px-tinta3); font-weight: 400; }
/* el resultado: la banda oscura */
:root .px-mat tfoot th, :root .px-mat tfoot td { background-color: var(--px-pie); color: #fff; font-weight: 700; border-bottom: 0; border-top: 0; }
.px-mat tfoot th { font-family: var(--px-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.px-mat tfoot .px-pie-rdo > * { height: 40px; font-size: 14px; }
:root .px-mat tfoot .px-pie-mg > * { height: var(--pie-h); background-color: var(--px-pie2); font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .08); }
.px-mat tfoot .px-pie-mg th { font-size: 10.5px; }
:root .px-mat tfoot .c2 { color: rgba(255, 255, 255, .72); border-right: 1px solid rgba(255, 255, 255, .14); }
.px .px-mat tfoot .neg { color: var(--px-pie-neg); }
.px .px-mat tfoot .pos { color: var(--px-pie-pos); }
.px-mat tfoot .px-aten { opacity: 1; color: rgba(255, 255, 255, .42) !important; }

/* ---------- vista Obras (la del teléfono) ---------- */
.px .px-lista { overflow: hidden; padding: 0; }
.px-lista header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 18px 18px 10px; flex-wrap: wrap; }
.px .px-lista h3 { font-size: 26px; }
.px-lista header span { font-size: 12px; color: var(--px-tinta3); }
.px-of { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; min-height: 64px; padding: 12px 18px;
  border-top: 1px solid var(--px-linea); text-align: left; background: transparent; color: var(--px-tinta); }
.px-of:hover { background: var(--surface-hover, var(--pnl-hover)); }
.px-of-a b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; }
.px-of-a small { display: block; margin-top: 2px; font-size: 12px; color: var(--px-tinta3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-of-r { text-align: right; }
.px-of-r b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.px-of-r small { font-size: 12px; font-weight: 700; }
.px-of-barra { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 2px; background: var(--px-pista); margin-top: 4px; }
.px-of-barra i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.px-of-0 { width: 1px; background: var(--px-tinta3); top: -2px !important; bottom: -2px !important; }
.px-of-bb.neg { background: var(--px-naranja); }
.px-of-bb.pos { background: var(--px-azul); }
.px-of-bb.al { background: repeating-linear-gradient(135deg, var(--px-tinta3) 0 3px, transparent 3px 6px); }
.px-ver-mas { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 52px; border-top: 1px solid var(--px-linea);
  background: transparent; font-family: var(--px-ui); font-size: 13px; font-weight: 600; color: var(--px-tinta); }

/* ---------- pantallas medianas ---------- */
@media (max-width: 1240px) {
  .px-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .px-apoyo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .px-ap:nth-child(4) { border-left: 0; padding-left: 2px; }
}
/* ---------- el teléfono: veredicto arriba, en una columna; después la lista ---------- */
@media (max-width: 760px) {
  body[data-vista="pnl"] .px { gap: 14px; }
  .px-hero { display: flex; flex-direction: column; }
  .px-hero-izq { display: contents; }
  .px-hero > * , .px-hero-izq > * { margin-left: 20px; margin-right: 20px; }
  .px-eyebrow { order: 1; margin-top: 22px; }
  .px .px-titulo { order: 2; font-size: 40px; }
  .px-meta { order: 3; }
  .px-hero-der { order: 4; margin: 14px 0 0 !important; padding: 18px 20px; border-left: 0; border-top: 1px solid var(--px-linea); }
  .px-relato { order: 5; margin-top: 14px; }
  .px-brecha { order: 6; margin-bottom: 8px; }
  .px-br-f { grid-template-columns: 96px minmax(0, 1fr) 56px; gap: 10px; }
  .px-br-t { font-size: 12px; }
  .px-k-grande { font-size: 60px; }
  .px-k-medio { font-size: 28px; }
  .px-apoyo { grid-template-columns: 1fr 1fr; background: var(--px-sup); border-radius: 16px; box-shadow: var(--px-sombra); overflow: hidden; row-gap: 0; }
  .px-ap, .px-ap:first-child, .px-ap:nth-child(4) { padding: 14px 16px; border-left: 0; border-top: 1px solid var(--px-linea); }
  .px-ap:nth-child(-n+2) { border-top: 0; }
  .px-ap:nth-child(even) { border-left: 1px solid var(--px-linea); }
  .px-ap:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .px-ap-v { font-size: 20px; }
  .px-matriz .px-mat-env { max-height: 76vh; }
  .px .px-h3 { font-size: 24px; }
  .px-m-top { padding: 0 16px; }
  .px-matriz > .px-ley { padding: 10px 16px 12px; }
  .px-mat .c0 { width: 150px; min-width: 150px; max-width: 150px; padding-left: 14px; }
}

/* ---------- papel ---------- */
@media print {
  #px-imprimir .px-hero { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  #px-imprimir .px-hero-izq, #px-imprimir .px-hero-der { padding: 14px 18px; }
  #px-imprimir .px-titulo { font-size: 26pt; }
  #px-imprimir .px-relato { font-size: 9pt; }
  #px-imprimir .px-k-grande { font-size: 36pt; }
  #px-imprimir .px-k-medio { font-size: 16pt; }
  #px-imprimir .px-apoyo { margin: 8px 0 4px; }
  #px-imprimir .px-ap-v { font-size: 13pt; }
  #px-imprimir .px-ap-s, #px-imprimir .px-kl { font-size: 6.8pt; }
  #px-imprimir { --px-sup: #fff; --px-sup2: #FBF9F5; --px-linea: #E0D9CE; --px-linea2: #D0C7B9; --px-pista: #EFEAE2; --px-tinta: #1B2A3B;
    --px-tinta2: #4A4A4A; --px-tinta3: #6A6E73; --px-dorado-t: #8F722A; --px-hero-der: rgba(199, 102, 43, .05); }
}

/* especificidad: las columnas fijas llevan fondo propio (:root .px-mat tr > .c0); el
   resultado y el hover tienen que ganarles */
:root .px-mat tfoot .px-pie-rdo > * { background-color: var(--px-pie); }
:root .px-mat tbody tr:not(.px-sec):hover > * { box-shadow: inset 0 0 0 999px var(--px-cruz); }
/* componentes.css pone en mayúscula todo th: las filas del cuadro van como se escriben */
:root .px-mat tbody th, :root .px-dt tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; }
:root .px-mat tbody tr.px-sec th { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; }
.px-mat th.px-o button .px-ico { margin-right: 3px; vertical-align: -2px; }
@media (max-width: 760px) { .px .px-hero .px-titulo { margin: 4px 20px 0; } }
/* en papel: veredicto, apoyo y ranking en la primera hoja; la matriz, de a 12 obras por hoja */
@media print {
  #px-imprimir .px-apoyo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #px-imprimir .px-ap:nth-child(4) { border-left: 1px solid var(--px-linea2); padding-left: 22px; }
  #px-imprimir .px-hero-izq, #px-imprimir .px-hero-der { padding: 10px 16px; gap: 4px; }
  #px-imprimir .px-titulo { font-size: 20pt; }
  #px-imprimir .px-k-grande { font-size: 28pt; }
  #px-imprimir .px-k-par { margin-top: 4px; padding-top: 6px; }
  #px-imprimir .px-brecha { margin-top: 6px; gap: 8px; }
  #px-imprimir .px-rk, #px-imprimir .px-rk-eje { height: 11px; }
  #px-imprimir .px-rk-eje { height: 22px; }
  #px-imprimir .px-rk-barra { top: 2px; height: 7px; }
  #px-imprimir .px-imp-rank h2 { margin-top: 6px; }
}
@media print {
  #px-imprimir .px-titulo { font-family: var(--px-serif); font-weight: 600; margin: 2px 0 0; }
  #px-imprimir .px-rk { height: 9.4px; }
  #px-imprimir .px-rk-id, #px-imprimir .px-rk-v { font-size: 6.4pt; }
  #px-imprimir .px-rk-barra { top: 1.6px; height: 6.2px; }
  #px-imprimir .px-rk-eje { height: 18px; }
  #px-imprimir .px-relato { margin-top: 2px; line-height: 1.45; }
  #px-imprimir .px-apoyo { margin: 6px 0 0; }
}

/* =============================================================================
   PNL SKY con el diseño premium (25-sep-2026). Reusa todo lo de Casas (veredicto, apoyo,
   tarjeta de la matriz, banda del resultado); acá solo lo que es propio de un año: el mes
   en curso, los que faltan, las columnas de total y comparación, y el mes a mes chico.
   ============================================================================= */
.px-meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--px-linea); }
.px-mes { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.px-mes-pista { position: relative; width: 100%; height: 48px; border-radius: 3px; }
.px-mes-pista::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--px-linea2); }
.px-mes-pista i { position: absolute; left: 20%; right: 20%; border-radius: 2px; }
.px-mes-pista i.neg { background: var(--px-naranja); }
.px-mes-pista i.pos { background: var(--px-azul); }
.px-mes em { font-style: normal; font-family: var(--px-ui); font-size: 10px; font-weight: 600; color: var(--px-tinta3); }
.px-mes.hoy em { color: var(--px-dorado-t); }
.px-mes.hoy .px-mes-pista { box-shadow: inset 0 0 0 1px rgba(184, 151, 62, .55); }
.px-mes.futuro { opacity: .35; }
/* el cuadro mes a mes */
.px-sky-mat th.num, .px-sky-mat td.num { min-width: 80px; }
.px-sky-mat thead th.hoy { color: var(--px-dorado-t); box-shadow: inset 0 -2px 0 #B8973E; }
:root .px-sky-mat tbody td.hoy, :root .px-sky-mat tfoot td.hoy { background-image: linear-gradient(rgba(184, 151, 62, .09), rgba(184, 151, 62, .09)); }
.px-sky-mat .futuro { opacity: .45; }
:root .px-sky-mat tbody .px-tot { border-left: 1px solid var(--px-linea2); background-color: var(--px-sup2); font-weight: 700; }
:root .px-sky-mat thead .px-tot { border-left: 1px solid var(--px-linea2); }
.px-sky-mat .px-ant { color: var(--px-tinta3); }
.px-sky-mat .px-dif { font-size: 12px; white-space: nowrap; }
.px-sky-mat .px-dif.bien { color: var(--px-azul-txt); }
.px-sky-mat .px-dif.mal { color: var(--px-naranja-txt); }
.px .px-sky-mat tfoot .px-dif.bien { color: var(--px-pie-pos); }
.px .px-sky-mat tfoot .px-dif.mal { color: var(--px-pie-neg); }
:root .px-sky-mat tfoot .px-tot { border-left: 1px solid rgba(255, 255, 255, .14); }
.px-sky-mat tfoot .px-ant { color: rgba(255, 255, 255, .6); }
:root .px-mat tbody tr.pnl-nota > * { font-style: italic; color: var(--px-tinta3); border-top: 1px solid var(--px-linea2); }
.px-sky .px-apoyo .px-ap-v.neg { color: var(--px-naranja-txt); }
@media (max-width: 760px) {
  .px-meses { gap: 2px; }
  .px-mes-pista { height: 40px; }
}
@media print {
  #px-imprimir .px-meses { margin-top: 6px; padding-top: 6px; }
  #px-imprimir .px-mes-pista { height: 26px; }
  table.px-imp-sky { font-size: 6.2pt; }
  .px-imp-sky th:first-child { width: 150px; }
}
/* en el encabezado y el pie fijos, lo que falta del año se atenúa con color, no con
   opacidad (con opacidad se ven las filas que pasan por abajo, como pasó en Casas) */
.px-sky-mat thead .futuro, .px-sky-mat tfoot .futuro { opacity: 1; }
.px-sky-mat thead th.futuro { color: var(--px-linea2); }
.px .px-sky-mat tfoot td.futuro { color: rgba(255, 255, 255, .32); }
:root .px-sky-mat tfoot td.hoy { background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)); }
.px .px-titulo { font-variant-numeric: lining-nums; }

/* =============================================================================
   OBRAS — el listado rediseñado (25-sep-2026). El mismo lenguaje que el PNL (tokens .px,
   tipografías de la app de obra); la plata sale de INGRESOS. Una fila por obra, con sus
   participantes desplegables; secciones por estado; en el teléfono, tarjetas.
   ============================================================================= */
.px-obras { display: flex; flex-direction: column; gap: 20px; font-family: var(--px-texto); padding-bottom: 16px; }
.px-ob-cab { display: flex; flex-direction: column; gap: 6px; }
.px-obras .px-ob-cab .px-titulo { font-size: 44px; margin: 2px 0 0; font-family: var(--px-serif); font-weight: 600; line-height: 1; color: var(--px-tinta); }
.px-ob-filtros { gap: 10px; margin: 0; }
:root .px-obras .px-ob-q { height: 36px; border-radius: 999px; border: 1px solid var(--px-linea2); background: var(--px-sup); padding: 0 16px; min-width: 260px;
  font-family: var(--px-texto); font-size: 13px; color: var(--px-tinta); }
.px-obras .px-seg button em { font-style: normal; font-size: 11px; opacity: .65; margin-left: 2px; }
.px-obras .px-ob-card-t { padding: 0; overflow: clip; }
.px-ob-env { overflow: visible; }
@media (max-width: 1180px) { .px-ob-env { overflow-x: auto; } }
table.px-ob-t { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--px-texto); font-size: 13px; color: var(--px-tinta); }
.px-ob-t th, .px-ob-t td { padding: 10px 12px; height: auto; border-bottom: 1px solid var(--px-fila); vertical-align: middle; text-align: left; }
.px-ob-t thead th { position: sticky; top: 0; z-index: 2; background: var(--px-sup2); box-shadow: inset 0 -1px 0 var(--px-linea2); padding-top: 12px; padding-bottom: 10px;
  font-family: var(--px-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--px-tinta3); }
.px-ob-t thead th button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.px-ob-t .num, .px-ob-t thead th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.px-ob-t th:first-child, .px-ob-t td:first-child { padding-left: 20px; }
.px-ob-t tbody tr.px-ob-f { cursor: pointer; }
:root .px-ob-t tbody tr.px-ob-f:hover > * { background: var(--surface-hover, var(--pnl-hover)); }
.px-ob-obra { min-width: 230px; }
.px-ob-obra .ref { font-family: var(--px-ui); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--px-tinta); text-decoration: none; }
.px-ob-obra .ref:hover { text-decoration: underline; text-decoration-color: #B8973E; text-underline-offset: 3px; }
.px-ob-cli { display: block; margin-top: 2px; font-size: 12.5px; color: var(--px-tinta2); text-transform: none; letter-spacing: 0; }
.px-ob-cli em { font-style: normal; color: var(--px-tinta3); }
.px-ob-tg { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--px-ui); font-size: 11px; font-weight: 600; color: var(--px-dorado-t); }
.px-ob-tg .px-ico { width: 11px; height: 11px; transition: transform .15s; }
.px-ob-tg[aria-expanded="true"] .px-ico { transform: rotate(90deg); }
.px-ob-tipo { color: var(--px-tinta2); font-size: 12.5px; }
.px-ob-contr b { font-weight: 700; }
.px-ob-contr small, .px-ob-cob small { display: block; font-size: 11px; font-weight: 400; color: var(--px-tinta3); }
.px-ob-bar { display: block; height: 4px; min-width: 70px; margin-top: 5px; border-radius: 2px; background: var(--px-pista); overflow: hidden; }
.px-ob-bar i { display: block; height: 100%; border-radius: 2px; background: var(--px-ingreso); }
.px-ob-avc { min-width: 150px; white-space: nowrap; }
.px-ob-av { display: inline-block; width: 80px; height: 5px; border-radius: 3px; background: var(--px-pista); vertical-align: middle; overflow: hidden; }
.px-ob-av i { display: block; height: 100%; background: #B8973E; }
.px-ob-avn { margin-left: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.px-ob-avn abbr { text-decoration: none; color: var(--px-naranja-txt); cursor: help; }
.px-ob-est { display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-family: var(--px-ui); font-size: 11px; font-weight: 600; }
.px-ob-est.act { background: rgba(var(--px-azul-rgb), .12); color: var(--px-azul-txt); }
.px-ob-est.com { background: rgba(184, 151, 62, .16); color: var(--px-dorado-t); }
.px-ob-est.pau { background: var(--px-pista); color: var(--px-tinta2); }
.px-ob-est.ter { background: transparent; color: var(--px-tinta3); box-shadow: inset 0 0 0 1px var(--px-linea2); }
/* «Garantía» (8-oct-2026): terminada con algo abierto; entre la pausada y la terminada */
.px-ob-est.gar { background: transparent; color: var(--px-dorado-t); box-shadow: inset 0 0 0 1px rgba(184, 151, 62, .55); }
:root .px-ob-t tr.px-ob-sec th { padding: 18px 12px 8px 20px; background: var(--px-sup); border-bottom: 1px solid var(--px-linea);
  font-family: var(--px-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--px-dorado-t); }
.px-ob-t tr.px-ob-sec em { font-style: normal; margin-left: 6px; letter-spacing: .06em; color: var(--px-tinta3); }
:root .px-ob-t tr.px-ob-parte > * { background: var(--px-sup2); font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
.px-ob-t tr.px-ob-parte .px-ob-obra { padding-left: 38px; }
.px-ob-maestro { color: var(--px-tinta3); }
.px-ob-t .px-ob-sin { font-size: 11px; font-style: italic; color: var(--px-tinta3); white-space: nowrap; }
:root .px-ob-t tfoot th, :root .px-ob-t tfoot td { background: var(--px-pie); color: #fff; font-weight: 700; border: 0; }
.px-ob-t tfoot th { font-family: var(--px-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.px-ob-cards { display: none; }
.px-ob-nota { margin: 0; max-width: 980px; font-size: 12.5px; line-height: 1.6; color: var(--px-tinta3); }
.px-ob-nota b { font-weight: 700; color: var(--px-tinta2); }
@media (max-width: 760px) {
  .px-obras .px-ob-card-t { display: none; }
  .px-ob-cards { display: flex; flex-direction: column; gap: 10px; }
  .px-ob-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--px-sup); border-radius: 14px; box-shadow: var(--px-sombra);
    text-decoration: none; color: var(--px-tinta); }
  .px-ob-card-a { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .px-ob-card-a b { font-family: var(--px-ui); font-size: 15px; }
  .px-ob-card-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 11px; color: var(--px-tinta3); }
  .px-ob-card-n b { display: block; font-size: 15px; color: var(--px-tinta); font-variant-numeric: tabular-nums; }
  :root .px-obras .px-ob-q { min-width: 0; width: 100%; flex: 1 1 100%; }
  .px-obras .px-ob-cab .px-titulo { font-size: 38px; }
  :root .px-obras .px-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .px-obras .px-seg button { flex: none; }
  .px-obras .px-apoyo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .px-obras .px-ap:nth-child(-n+2) { grid-column: span 3; }
  .px-obras .px-ap:nth-child(n+3) { grid-column: span 2; padding: 12px 12px 14px; }
  .px-obras .px-ap:nth-child(5) { border-left: 1px solid var(--px-linea); }
  .px-obras .px-ap:nth-child(n+3) .px-ap-v { font-size: 17px; }
  .px-obras .px-ap:nth-child(n+3) .px-ap-s { font-size: 11px; line-height: 1.3; }
  .px-obras .px-ap:nth-child(n+3) .px-kl { letter-spacing: .04em; font-size: 10px; }
}

/* =============================================================================
   FINANZAS — el tablero de caja (26-sep-2026). El lenguaje del PNL premium con el mismo
   significado de los colores: verde azulado = entró, gris = salió, azul = mejor, naranja =
   peor o vencido. Los números vienen de INGRESOS y COMPRAS (lib/tablero-fin.js).
   ============================================================================= */
body[data-vista="finanzas"] .px.fx { display: flex; flex-direction: column; gap: 22px; font-family: var(--px-texto); padding-bottom: 16px; }
.fx-cargando { color: var(--px-tinta3); padding: 20px 4px; }
.fx.fx-cambiando > *:not(.fx-barra) { opacity: .5; transition: opacity .15s; }
.fx .card.fx-panel { padding: 22px 24px 20px; }
.fx-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.fx-cab > div { min-width: 0; flex: 1 1 320px; }
.fx .px-panel .fx-cab h3 { font-size: 26px; line-height: 1.05; margin: 0; }
/* la serif dibuja números antiguos («9o días», «2o26»): en títulos y cifras van derechos */
.fx .px-titulo, .fx .px-panel .fx-cab h3, .fx-frase, .fx .px-k-grande, .fx .px-k-medio { font-variant-numeric: lining-nums; }
.fx-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--px-tinta3); max-width: 76ch; }
.fx-nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--px-tinta3); max-width: 90ch; }
.fx-nota b { color: var(--px-tinta2); }
.fx-vacio { margin: 8px 0; color: var(--px-tinta3); font-size: 13px; }
.fx-venc { color: var(--px-naranja-txt); font-weight: 600; }
.fx-neg { color: var(--px-naranja-txt); }
.fx-pos { color: var(--px-azul-txt); }
.fx-d { font-weight: 600; white-space: nowrap; }
.fx-d.mejor { color: var(--px-azul-txt); }
.fx-d.peor { color: var(--px-naranja-txt); }
.fx-d.nuevo { color: var(--px-tinta3); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.fx-apoyo .px-ap[data-ir] { cursor: pointer; border-radius: 10px; transition: background .12s; }
.fx-apoyo .px-ap[data-ir]:hover, .fx-apoyo .px-ap[data-ir]:focus-visible { background: var(--px-sup2); outline: none; }

/* las muestras de la leyenda */
.fx-ley { margin: 4px 0 0; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-family: var(--px-ui); font-size: 11.5px; color: var(--px-tinta2); }
.fx-muestra { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.fx-muestra.in { background: var(--px-ingreso); }
.fx-muestra.out { background: var(--px-costo); }
.fx-muestra.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--px-tinta2); box-shadow: 0 0 0 2px var(--px-sup); }
.fx-muestra.mejor { background: var(--px-azul); }
.fx-muestra.peor { background: var(--px-naranja); }

/* ---------- mes a mes: arriba lo que entró, abajo lo que salió, el punto es el neto ---------- */
.fx-mm { margin-top: 4px; }
.fx-mm-cuerpo { position: relative; height: 250px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fx-mm-cero { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--px-linea2); pointer-events: none; }
.fx-mm-col { position: relative; border-radius: 8px; outline: none; }
.fx-mm-col.sel { background: var(--px-sup2); }
.fx-mm-col:hover, .fx-mm-col:focus-visible { background: rgba(var(--px-azul-rgb), .07); }
.fx-mm-in, .fx-mm-out { position: absolute; left: 24%; right: 24%; }
.fx-mm-in { bottom: calc(50% + 1px); background: var(--px-ingreso); border-radius: 4px 4px 0 0; }
.fx-mm-out { top: calc(50% + 1px); background: var(--px-costo); border-radius: 0 0 4px 4px; }
.fx-mm-col.parcial .fx-mm-in, .fx-mm-col.parcial .fx-mm-out {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 6px); }
.fx-mm-neto { position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; z-index: 2;
  box-shadow: 0 0 0 2px var(--px-sup); pointer-events: none; }
.fx-mm-neto.pos { background: var(--px-azul); }
.fx-mm-neto.neg { background: var(--px-naranja); }
.fx-mm-linea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.fx-mm-linea polyline { fill: none; stroke: var(--px-tinta3); stroke-width: 1.5; stroke-linejoin: round; opacity: .55; }
.fx-mm-et { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 6px; }
.fx-mm-et span { text-align: center; font-family: var(--px-ui); font-size: 11px; font-weight: 600; color: var(--px-tinta2); white-space: nowrap; }
.fx-mm-et small { font-weight: 500; color: var(--px-tinta3); font-size: 10px; }
#px-tip .fx-tip-g { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 5px; margin-top: 6px; }

/* las tablas desplegables («Ver en tabla», «Ver las 13 semanas») */
.fx-tabla { margin-top: 14px; }
.fx-tabla > summary { cursor: pointer; font-family: var(--px-ui); font-size: 12px; font-weight: 600; color: var(--px-dorado-t); list-style: none; display: inline-flex; gap: 6px; }
.fx-tabla > summary::-webkit-details-marker { display: none; }
.fx-tabla > summary::before { content: "\25B8"; transition: transform .15s; }
.fx-tabla[open] > summary::before { transform: rotate(90deg); }
.fx-tabla > .tabla-envuelta { margin-top: 10px; }

/* ---------- dos paneles lado a lado ---------- */
.fx-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }

/* ---------- las filas de barras (de dónde entró / a dónde se fue) ---------- */
.fx-fila { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 76px 72px; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--px-fila); }
.fx-f-t { min-width: 0; }
.fx-f-n { display: block; font-size: 14px; font-weight: 600; color: var(--px-tinta); overflow-wrap: anywhere; }
.fx-f-t small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--px-tinta3); line-height: 1.35; }
.fx-f-b { height: 10px; border-radius: 3px; background: var(--px-pista); overflow: hidden; }
.fx-f-b i { display: block; height: 100%; border-radius: 3px; }
.fx-b-in { background: var(--px-ingreso); }
.fx-b-out { background: var(--px-costo); }
.fx-f-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--px-tinta); }
.fx-f-v small { display: block; font-weight: 500; font-size: 11px; color: var(--px-tinta3); }
.fx-f-d { text-align: right; font-size: 12px; color: var(--px-tinta3); }
.fx-fila.chica { padding: 6px 0; }
.fx-fila.chica .fx-f-n { font-size: 13px; font-weight: 500; }
.fx-fila.chica .fx-f-b { height: 7px; }
.fx-fila.chica .fx-f-v { font-size: 13px; font-weight: 600; }
.fx-grupo { position: relative; padding-left: 26px; }
.fx-g-btn { position: absolute; left: 0; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none;
  color: var(--px-tinta3); cursor: pointer; border-radius: 6px; padding: 0; }
.fx-g-btn:hover { background: var(--px-sup2); color: var(--px-tinta); }
.fx-g-btn .px-ico { transition: transform .15s; }
.fx-grupo.abierto > .fx-g-btn .px-ico { transform: rotate(90deg); }
.fx-subs { margin: 2px 0 8px; padding-left: 12px; border-left: 2px solid var(--px-linea); }

/* ---------- lo que falta cobrar y pagar, por antigüedad ---------- */
.fx-tr { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--px-pista); margin-bottom: 12px; }
.fx-tr i { display: block; height: 100%; min-width: 3px; }
.fx-tr .venc, .fx-tr-m.venc { background: var(--px-naranja); }
.fx-tr .fx-tr-v31, .fx-tr-m.fx-tr-v31 { opacity: .78; }
.fx-tr .fx-tr-v1, .fx-tr-m.fx-tr-v1 { opacity: .58; }
.fx-tr .in, .fx-tr-m.in { background: var(--px-ingreso); }
.fx-tr .out, .fx-tr-m.out { background: var(--px-sub); }
.fx-tr .fx-tr-p60, .fx-tr-m.fx-tr-p60 { opacity: .78; }
.fx-tr .fx-tr-p90, .fx-tr-m.fx-tr-p90 { opacity: .6; }
.fx-tr .fx-tr-mas, .fx-tr-m.fx-tr-mas { opacity: .38; }
.fx-tr .fx-tr-sin, .fx-tr-m.fx-tr-sin { background: repeating-linear-gradient(135deg, var(--px-tinta3) 0 3px, transparent 3px 6px); opacity: .6; }
.fx-tr-l { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; }
.fx-tr-l li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--px-tinta2); }
.fx-tr-l li.venc { color: var(--px-naranja-txt); }
.fx-tr-m { width: 10px; height: 10px; border-radius: 3px; }
.fx-tr-c { font-size: 11px; color: var(--px-tinta3); font-variant-numeric: tabular-nums; }
.fx-tr-l b { font-variant-numeric: tabular-nums lining-nums; color: var(--px-tinta); min-width: 52px; text-align: right; }

/* la tabla chica de obras / proveedores */
table.fx-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.fx-t th { text-align: left; font-family: var(--px-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--px-tinta3); padding: 8px 8px 6px; border-bottom: 1px solid var(--px-linea2); background: none; position: static; height: auto; box-shadow: none; }
.fx-t td { padding: 8px; border-bottom: 1px solid var(--px-fila); vertical-align: top; height: auto; color: var(--px-tinta); }
.fx-t th:first-child, .fx-t td:first-child { padding-left: 0; }
.fx-t th:last-child, .fx-t td:last-child { padding-right: 0; }
.fx-t .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fx-t td small { display: block; font-size: 11.5px; color: var(--px-tinta3); margin-top: 1px; }
.fx-t td .ref { font-size: 13px; }

/* ---------- los próximos 90 días ---------- */
.fx-90 { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px 36px; align-items: start; }
.fx-90-n { margin: 6px 0 4px; font-family: var(--px-serif); font-weight: 600; font-size: 50px; line-height: 1; font-variant-numeric: lining-nums; }
.fx-90-n.neg { color: var(--px-naranja-txt); }
.fx-90-n.pos { color: var(--px-azul-txt); }
.fx-90-n .px-mon { font-family: var(--px-ui); font-size: 14px; font-weight: 600; margin-right: 6px; vertical-align: 10px; color: var(--px-tinta3); }
.fx-90-s { margin: 2px 0 0; font-size: 13px; color: var(--px-tinta2); }
.fx-palancas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-palancas li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 14px;
  background: var(--px-sup2); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--px-tinta2); }
.fx-palancas li b { font-size: 16px; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.fx-palancas li > span:only-child { grid-column: 1 / -1; }
.fx-s { position: relative; height: 150px; margin: 22px 0 26px; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.fx-s-cero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--px-linea2); pointer-events: none; }
.fx-s-col { position: relative; border-radius: 6px; outline: none; }
.fx-s-col:hover, .fx-s-col:focus-visible { background: rgba(var(--px-azul-rgb), .07); }
.fx-s-b { position: absolute; left: 18%; right: 18%; }
.fx-s-b.pos { background: var(--px-azul); border-radius: 4px 4px 0 0; margin-bottom: 1px; }
.fx-s-b.neg { background: var(--px-naranja); border-radius: 0 0 4px 4px; margin-top: 1px; }
.fx-s-col.piso .fx-s-b { box-shadow: 0 0 0 2px var(--px-sup), 0 0 0 3px var(--px-naranja-txt); }
.fx-s-col em { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-style: normal; font-family: var(--px-ui);
  font-size: 10.5px; color: var(--px-tinta3); white-space: nowrap; }
.fx-90-det { margin-top: 4px; }
.fx-90-det .fx-nota { margin-top: 0; }

/* ---------- lo que cuesta la deuda ---------- */
.fx-ir { font-family: var(--px-ui); font-size: 12px; font-weight: 600; color: var(--px-dorado-t); text-decoration: none; white-space: nowrap; }
.fx-ir:hover { text-decoration: underline; }
.fx .fx-fin { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; }
.fx .fx-fin .px-ap:nth-child(4) { border-left: 1px solid var(--px-linea2); padding-left: 22px; }
.fx-frase { margin: 18px 0 0; font-family: var(--px-serif); font-size: 22px; line-height: 1.3; color: var(--px-tinta2); }
.fx-frase b { color: var(--px-tinta); }
.fx-fuente { margin: 0; font-size: 12px; line-height: 1.55; color: var(--px-tinta3); max-width: 100ch; }

@media (max-width: 1100px) {
  .fx-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body[data-vista="finanzas"] .px.fx { gap: 16px; }
  .fx .card.fx-panel { padding: 18px 16px 16px; }
  .fx .px-panel .fx-cab h3 { font-size: 23px; }
  .fx-mm-cuerpo { height: 200px; }
  .fx-mm-in, .fx-mm-out { left: 16%; right: 16%; }
  .fx-mm-et span { font-size: 9.5px; }
  .fx-mm-et small { display: none; }
  .fx-fila { grid-template-columns: minmax(0, 1fr) 78px; grid-template-areas: "t v" "b d"; gap: 4px 10px; }
  .fx-f-t { grid-area: t; } .fx-f-b { grid-area: b; } .fx-f-v { grid-area: v; } .fx-f-d { grid-area: d; }
  .fx-f-v small { display: inline; margin-left: 4px; }
  .fx-tr-l { grid-template-columns: minmax(0, 1fr); }
  /* en el teléfono entran tres columnas: la de la próxima cuota / el próximo pago se va */
  .fx-t th:nth-child(3), .fx-t td:nth-child(3) { display: none; }
  .fx-90 { grid-template-columns: minmax(0, 1fr); }
  .fx-90-n { font-size: 42px; }
  .fx-s { gap: 2px; height: 130px; }
  .fx-s-col em { font-size: 9.5px; }
  .fx .fx-fin { grid-template-columns: 1fr 1fr; }
  .fx .fx-fin .px-ap:nth-child(3) { border-left: 0; padding-left: 16px; }
  .fx .fx-fin .px-ap:nth-child(4) { padding-left: 16px; }
  .fx-frase { font-size: 19px; }
}

/* =============================================================================
   PDF = LA PANTALLA (19-oct-2026). Nico: «que se pueda exportar a PDF y apreciar de la
   misma manera». Se imprime el mismo #px / #px-sky de la pantalla, sin menú ni controles,
   en A4 apaisado: el contenido se arma a 1.360 px y se escala (zoom) al ancho de la hoja,
   así guarda las proporciones de la pantalla. Lo propio del papel (la línea con la fecha,
   el ranking y la matriz en tramos de obras, el cuadro sin filas en cero) lo agrega
   pnl-casas.js en `.px-papel-solo` justo antes de imprimir; en pantalla no se ve.
   Hoja con nombre (px-pnl): el número de página no se mete en los PDF de otras vistas.
   ============================================================================= */
.px-papel-solo { display: none; }
@page px-pnl {
  size: A4 landscape;
  margin: 9mm 10mm 11mm;
  @bottom-left { content: "Sky Terra · PNL"; font-family: "Lato", system-ui, sans-serif; font-size: 7pt; color: #7E858E; }
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: "Lato", system-ui, sans-serif; font-size: 7pt; color: #7E858E; }
}
@media print {
  body:has(#px, #px-sky) { background: #fff !important; height: auto; overflow: visible; }
  body:has(#px, #px-sky) main::before { display: none !important; }
  body:has(#px, #px-sky) .shell, body:has(#px, #px-sky) main, body:has(#px, #px-sky) #vista {
    display: block; height: auto; min-height: 0; overflow: visible; padding: 0; margin: 0; background: #fff; }
  /* 277 mm de ancho útil = 1.047 px; 1.047 / 1.360 = 0,769 */
  #px, #px-sky {
    page: px-pnl; zoom: .769; width: 1360px; max-width: none; display: block; padding: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    /* en papel siempre claro, aunque la pantalla esté en oscuro (el id le gana al tema) */
    --surface: #fff; --ink: #1B2A3B; --ink-2: #4A4A4A; --ink-3: #6A6E73; --borde: #D9D2C6;
    --panel: #fff; --bg: #fff; --surface-hover: #F3EDE1; --warn-bg: #FAEFD6;
    --pnl-bloque: #E7ECEF; --pnl-ingreso: #DCEBDD; --pnl-egreso: #F7E7C8; --pnl-res: #DDE5EE; --pnl-cab: #F1ECE3; --pnl-linea: #E2DCD1;
    --px-azul: #2F6B9A; --px-azul-rgb: 47, 107, 154; --px-azul-txt: #1F5A86; --px-naranja: #C7662B; --px-naranja-rgb: 199, 102, 43;
    --px-naranja-txt: #9A4512; --px-ingreso: #4F8A7A; --px-costo: #B7BDC4; --px-oficina: #8C96A1; --px-sub: #5B6B7B;
    --px-serie1: #2F4B66; --px-serie2: #B8973E; --px-serie3: #4F8A7A; --px-serie4: #9E6B4A; --warn-txt: #8A5407;
    --px-dorado-t: #8F722A; --px-sup: #fff; --px-sup2: #FBF9F5; --px-clave: #F4F8F5;
    --px-linea: #E8E2D8; --px-linea2: #D9D1C4; --px-fila: #F1ECE4; --px-pista: #F2EEE7;
    --px-tinta: #1B2A3B; --px-tinta2: #566170; --px-tinta3: #7E858E; --px-sel: #1B2A3B; --px-sel-t: #FFFFFF;
    --px-pie: #1B2A3B; --px-pie2: #24374D; --px-pie-neg: #F4B98C; --px-pie-pos: #A9CFEF;
    --px-hero-der: rgba(199, 102, 43, .05); --px-hero-der-pos: rgba(47, 107, 154, .05);
    --px-pill-b: rgba(47, 107, 154, .12); --px-pill-m: rgba(199, 102, 43, .13);
    background: #fff; color: #1B2A3B;
  }
  #px > * + *, #px-sky > * + *, #px .px-papel-tramos > * + * { margin-top: 18px; }
  #px .px-papel-solo, #px-sky .px-papel-solo { display: block; }
  /* lo que es de la pantalla: filtros, controles, el detalle lateral, el tooltip */
  #px .px-barra, #px-sky .px-barra, #px .px-mat-barra, #px-sky .px-mat-barra, .px-exp,
  #px .px-cajon, #px .px-cajon-fondo, #px-tip, #px .px-buscar, #px .px-chip button, #px .px-cmp-cab select { display: none !important; }
  /* la columna de tildar para comparar queda (si se saca, el total de la tabla se corre una columna), vacía */
  #px .px-tr .px-chk > * { display: none; }
  #px .px-tr .px-chk { width: 0; padding: 0 !important; }
  /* la matriz y el cuadro de la pantalla se reemplazan por los del papel */
  #px:has(.px-papel-tramos) > #px-cuerpo, #px-sky:has(.px-papel-cuadro) > .px-sky-cuadro { display: none !important; }
  /* las sombras no se imprimen bien: el mismo recorte con un filete */
  #px .card, #px-sky .card, #px .px-hero, #px-sky .px-hero { box-shadow: none; border: 1px solid var(--px-linea); }
  .px-papel-cab { display: flex !important; justify-content: space-between; gap: 16px; margin: 0; padding: 0 2px 8px;
    border-bottom: 1px solid var(--px-linea2); font-family: var(--px-ui); font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--px-tinta3); }
  .px-papel-cab span:last-child { letter-spacing: .04em; text-transform: none; font-weight: 500; }
  /* sin scroll: la tabla entera, con encabezado y banda del resultado en cada hoja */
  #px .px-mat-env, #px-sky .px-mat-env, #px .px-tr-env, #px .px-cj-tabla, #px .tabla-envuelta {
    max-height: none !important; overflow: visible !important; }
  #px .px-mat th, #px .px-mat td, #px-sky .px-mat th, #px-sky .px-mat td { position: static !important; }
  #px .px-mat thead, #px-sky .px-mat thead { display: table-header-group; }
  #px .px-mat tfoot, #px-sky .px-mat tfoot { display: table-footer-group; }
  #px .px-mat tr, #px-sky .px-mat tr, #px .px-tr tr { break-inside: avoid; }
  #px .px-papel-mat table.px-mat { table-layout: fixed; }
  #px-sky .px-sky-mat th.num, #px-sky .px-sky-mat td.num { min-width: 0; }
  /* el detalle arranca en hoja propia; los tramos siguientes siguen a continuación (sin hojas a
     medio llenar), sin dejar el título de un tramo solo al pie de una hoja */
  #px .px-papel-rank + .px-papel-mat, #px-sky .px-papel-cuadro { break-before: page; }
  #px .px-papel-mat .px-m-top, #px .px-papel-mat > .px-ley { break-after: avoid; }
  #px .px-papel-mat .px-mat.compacta th, #px .px-papel-mat .px-mat.compacta td { height: 29px; }
  /* la banda del resultado se repite al pie de cada hoja, como queda fija en la pantalla: así
     nunca queda sola en una hoja */
  /* en papel el código de obra va en texto (un botón no se repite en el encabezado de cada hoja) */
  #px .px-mat th.px-o .px-o-id { display: inline; white-space: normal; font-family: var(--px-ui); font-size: 11.5px; font-weight: 700; color: var(--px-tinta); line-height: 1.2; }
  #px .px-mat th.px-o .px-o-id .px-ico { margin-right: 3px; vertical-align: -2px; }
  /* en papel no hay tooltip: el nombre de la obra entero en el ranking */
  #px .px-papel-rank .px-rk, #px .px-papel-rank .px-rk-eje { grid-template-columns: 170px minmax(0, 1fr) 64px; }
  #px .px-hero, #px-sky .px-hero, #px .px-apoyo, #px-sky .px-apoyo, #px .px-panel, #px .px-papel-rank { break-inside: avoid; }
  #px .px-papel-rank { padding: 18px 22px 14px; }
  /* Resumen y Comparar, como en la pantalla: la grilla de dos columnas en una hoja propia y la
     tabla de obras en otra, con los títulos de columna en dos renglones para que entre */
  #px .px-grid { break-inside: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  #px .px-p-rank { grid-row: span 2; }
  #px.px-v-resumen #px-cuerpo, #px.px-v-comparar #px-cuerpo { break-before: page; }
  #px .px-p-tabla { grid-column: 1 / -1; break-before: page; break-inside: auto; }
  #px .px-tr thead { display: table-header-group; }
  #px .px-tr thead th, #px .px-tr tfoot td { position: static !important; }
  #px .px-tr thead th { white-space: normal; vertical-align: bottom; }
  #px .px-tr th, #px .px-tr td { padding: 4px 6px; }
  #px .px-tr-obra small { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
}
/* En papel la hoja mide 1.047 px y entraban las reglas de pantalla mediana (≤1.240 px):
   el apoyo en 3 columnas y otro reparto del veredicto. Se vuelve al de la compu, que es el
   que se armó a 1.360 px. */
@media print {
  #px .px-hero, #px-sky .px-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  #px .px-apoyo, #px-sky .px-apoyo { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; }
  #px .px-ap:nth-child(4), #px-sky .px-ap:nth-child(4) { border-left: 1px solid var(--px-linea2); padding-left: 22px; }
  /* el cuadro del SKY: 12 meses + Total + año anterior + vs entran en la hoja con menos aire */
  #px-sky .px-sky-mat th, #px-sky .px-sky-mat td { padding: 0 6px; }
  #px-sky .px-sky-mat .c0 { width: 210px; min-width: 210px; max-width: 210px; padding-left: 16px; }
  #px-sky .px-sky-mat thead th { letter-spacing: .06em; padding-top: 12px; padding-bottom: 10px; }
  :root #px-sky .px-sky-mat tbody tr.px-sec > * { padding-top: 16px; padding-bottom: 7px; }
}