/* Sky Terra Gestión — paleta del manual de marca */
:root{
  --petroleo:#1B2A3B; --petroleo-2:#24374d; --crema:#F5F2ED; --arena:#C8B89A;
  --dorado:#B8973E; --gris:#E8E4DF; --terracota:#9E6B4A;
  --ink:#1B2A3B; --ink-2:#4A4A4A; --borde:#DED7CC;
  --ok:#2E7D32; --warn:#D4830A; --err:#C0392B;
  --surface:#fff; --radius:12px;
  --sombra:0 1px 2px rgba(27,42,59,.06),0 6px 20px rgba(27,42,59,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--crema);
  color:var(--ink);font-size:14px;line-height:1.45}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--ink)}
::placeholder{color:#9aa3ad}
kbd{font:11px ui-monospace,Consolas,monospace;background:rgba(255,255,255,.12);border-radius:5px;padding:1px 6px}
code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;background:var(--gris);border-radius:5px;padding:1px 5px}
[hidden]{display:none!important}

/* ---------- login ---------- */
#pantalla-login{display:grid;place-items:center;min-height:100vh}
.login-caja{width:min(92vw,380px);background:var(--surface);border:1px solid var(--borde);
  border-radius:16px;box-shadow:var(--sombra);padding:38px 34px;text-align:center}
.wordmark{font-weight:600;letter-spacing:.38em;font-size:18px;color:var(--ink)}
.wordmark small{display:block;letter-spacing:.26em;font-size:10.5px;color:var(--dorado);margin-top:3px;font-weight:600}
.login-caja form{margin-top:28px;text-align:left}
.login-caja .btn-primary{width:100%;margin-top:6px}
.login-caja .nota{font-size:12px;color:var(--ink-2);margin-top:14px;text-align:center}
.error{color:var(--err);font-size:12.5px;min-height:18px;margin:4px 0 6px}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
aside#menu{width:232px;flex:none;background:var(--petroleo);color:#c8d2dd;display:flex;
  flex-direction:column;padding:22px 12px 14px;position:sticky;top:0;height:100vh;overflow:auto}
aside .wordmark{color:#F5F2ED;font-size:13px;letter-spacing:.3em;padding:0 10px;margin-bottom:16px}
aside .wordmark small{color:var(--dorado);font-size:9px}
.btn-buscar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 2px 14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:9px;
  padding:8px 10px;font-size:13px;color:#a9b6c4}
.btn-buscar:hover{background:rgba(255,255,255,.11)}
#nav{display:flex;flex-direction:column;gap:2px}
#nav .grupo{font-size:10px;letter-spacing:.14em;color:#7f8fa1;margin:14px 12px 4px;text-transform:uppercase}
#nav button{display:flex;align-items:center;gap:10px;text-align:left;border-radius:9px;
  padding:8px 12px;font-size:13.5px;color:#c8d2dd;width:100%}
#nav button .ico{width:18px;text-align:center;flex:none;opacity:.85}
#nav button.activo{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
#nav button:hover{color:#fff}
aside .spacer{flex:1}
.tc-chip{margin:0 4px 10px;background:rgba(184,151,62,.14);border:1px solid rgba(184,151,62,.4);
  color:#C8B89A;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer}
.tc-chip b{color:var(--dorado);font-variant-numeric:tabular-nums}
.tc-chip.viejo b{color:var(--warn)}
.who{border-top:1px solid rgba(255,255,255,.12);padding:12px 10px 2px;font-size:13px}
.who b{display:block;color:#fff}
.who>span{color:#C8B89A;font-size:11.5px}
.who-acciones{margin-top:6px;font-size:11.5px;color:#8fa0b2}
.who-acciones button{text-decoration:underline;font-size:11.5px;color:#a9b6c4;padding:0}
/* Auditor: que sepa siempre que está mirando, no que lo descubra al tocar un botón.
   La franja va arriba de todo y el rol se marca en dorado en la barra lateral. */
body.solo-lectura .who>span{color:var(--dorado);font-weight:600}
body.solo-lectura main::before{content:"Modo solo lectura — podés ver y exportar todo, pero no modificar nada";
  display:block;background:var(--dorado);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.02em;padding:7px 26px}

main{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{display:flex;align-items:center;gap:12px;padding:16px 26px 0}
header.top h1{font-size:19px;font-weight:650}
header.top .miga{color:var(--ink-2);font-size:13px}
header.top .spacer{flex:1}
header.top .fecha{font-size:12.5px;color:var(--ink-2)}
.hamb{display:none;font-size:20px}
.vista{padding:18px 26px 60px;max-width:1140px;width:100%}

/* ---------- tiles / cards ---------- */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--borde);border-radius:var(--radius);
  padding:13px 16px;box-shadow:var(--sombra)}
.tile .t-label{font-size:11.5px;color:var(--ink-2);margin-bottom:3px}
.tile .t-valor{font-size:23px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.tile .t-valor small{font-size:12px;font-weight:600;color:var(--ink-2);margin-right:3px}
.tile .t-pie{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.tile .t-pie.alerta{color:var(--warn);font-weight:600}
.card{background:var(--surface);border:1px solid var(--borde);border-radius:var(--radius);
  box-shadow:var(--sombra);padding:16px 18px;margin-bottom:14px}
.card h3{font-size:14.5px;font-weight:650;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .sub{font-weight:400;color:var(--ink-2);font-size:12px}
.card h3 .der{margin-left:auto;display:flex;gap:8px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:980px){.dos-col{grid-template-columns:1fr}}
/* ⚠ Una celda de grid tiene min-width:auto: NO se encoge por debajo del contenido
   mínimo de lo que lleva adentro. Con un gráfico de 506 px fijos eso estiraba la
   tarjeta a 544 px dentro de una pantalla de 360 y hacía que TODA la página se
   corriera de costado — el contenedor con overflow-x nunca llegaba a actuar porque
   el que crecía era el padre. `min-width:0` es lo que permite que el hijo se achique
   y recién ahí su propio scroll haga efecto. Vale para toda grilla, no solo estas. */
.dos-col>*, .grid-kpi>*, .card{min-width:0}

/* ---------- tablas ---------- */
.tabla-envuelta{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  text-align:left;padding:7px 10px;border-bottom:1px solid var(--borde);white-space:nowrap;cursor:pointer;user-select:none}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td{padding:7px 10px;border-bottom:1px solid #F0EBE2;vertical-align:top}
tr:hover td{background:var(--bg-3, #FAF7F1)}
tr.clic{cursor:pointer}
td .mono,a.ref{font-family:ui-monospace,Consolas,monospace;font-size:12px;font-weight:600;color:var(--dorado);text-decoration:none}
a.ref:hover{color:var(--dorado)}
.pill{display:inline-block;font-size:11px;font-weight:600;border-radius:99px;padding:1px 9px;white-space:nowrap}
.pill.ok{background:#E6F0E7;color:var(--ok)}
.pill.warn{background:#FBF0DC;color:#8a5f10}
.pill.err{background:#F7E4E1;color:var(--err)}
.pill.neutro{background:var(--gris);color:var(--ink-2)}
.pill.dir{background:#E7EDF4;color:var(--petroleo)}
.rojo{color:var(--err)}

/* resumen en línea de una card (plan de pagos, presupuesto) */
.linea-resumen{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--ink-2);margin:2px 0 12px}
.linea-resumen b{color:var(--ink);font-variant-numeric:tabular-nums}
.linea-resumen .rojo, .linea-resumen .rojo b{color:var(--err)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filtros input,.filtros select{border:1px solid var(--borde);border-radius:9px;padding:7px 11px;background:var(--surface);font-size:13px;
  /* ⚠ max-width: un <select> se estira al texto de su opción más larga y no lo frena
     el flex. Con nombres de proveedor largos medía 492 px en una pantalla de 390 y
     empujaba TODA la página de costado. */
  max-width:100%}
.filtros input[type=search]{min-width:220px}
.filtros .resumen{margin-left:auto;font-size:12px;color:var(--ink-2)}

/* paginado de los listados grandes (facturas/cobros/jornales) */
.paginado{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:14px}

/* carga rápida (filas para cargar varias facturas juntas) */
.cr-envuelta{overflow-x:auto;margin:10px 0}
.cr-tabla{width:100%;border-collapse:collapse}
.cr-tabla th{font-size:11px;color:var(--ink-2);text-align:left;padding:4px 6px;cursor:default}
.cr-tabla td{padding:3px 6px}
.cr-tabla input,.cr-tabla select{width:100%;border:1px solid var(--borde);border-radius:7px;padding:5px 7px;font-size:12.5px}
.cr-error{color:var(--err);font-size:11px;max-width:140px}

/* ---------- formularios ---------- */
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.f-field{display:flex;flex-direction:column;gap:4px}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:12px;font-weight:600;color:var(--ink-2)}
.f-field label em{font-style:normal;color:var(--err)}
.f-field input,.f-field select,.f-field textarea{border:1px solid var(--borde);border-radius:9px;
  padding:9px 11px;background:var(--surface);width:100%}
.f-field input:focus,.f-field select:focus{outline:2px solid var(--dorado);outline-offset:0;border-color:var(--dorado)}
.f-field input[readonly]{background:var(--crema);color:var(--ink-2)}
.f-hint{font-size:11px;color:var(--ink-2)}
.f-warn{font-size:12.5px;color:#8a5f10;background:#FBF3E4;border:1px solid #F0DFC0;border-radius:9px;padding:8px 12px;margin-top:8px}
.f-warn button{color:var(--petroleo);font-weight:600;text-decoration:underline;padding:0}
.btn-primary{background:var(--petroleo);color:#F5F2ED;border-radius:10px;padding:11px 20px;
  font-weight:650;font-size:13.5px;letter-spacing:.02em}
.btn-primary:hover{background:var(--petroleo-2)}
.btn-sec{border:1px solid var(--borde);border-radius:9px;padding:7px 13px;font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.btn-sec:hover{border-color:var(--arena);color:var(--ink)}
.btn-peligro{color:var(--err);font-size:12px;text-decoration:underline;padding:2px}

/* ---------- galería de medios (fotos/video de obra) ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.galeria-item{border:1px solid var(--borde);border-radius:10px;overflow:hidden;background:var(--crema)}
.galeria-item img,.galeria-item video{width:100%;height:130px;object-fit:cover;display:block;background:#000}
.galeria-meta{padding:6px 8px;font-size:11px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}
.galeria-etq{font-weight:600;color:var(--ink)}
.acciones-form{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.chip-sheet{display:inline-flex;gap:5px;font-family:ui-monospace,Consolas,monospace;font-size:10.5px;
  background:#F0EBE1;border:1px solid var(--gris);color:var(--ink-2);border-radius:99px;padding:3px 11px}
.chip-sheet b{color:var(--terracota)}
.seg{display:inline-flex;gap:4px;background:#ECE7DF;border-radius:11px;padding:4px;margin-bottom:14px;flex-wrap:wrap}
.seg button{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.seg button.activo{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(27,42,59,.12)}

/* ---------- gráfico de barras SVG ---------- */
.grafico{width:100%;overflow-x:auto}
.grafico svg{display:block}
.grafico .barra{fill:var(--dorado)}
.grafico .barra:hover{fill:#9c7d2e}
.grafico .eje{font-size:10px;fill:var(--ink-2)}
.grafico .valor{font-size:10px;fill:var(--ink-2)}

/* Gantt de obra (plan vs. real por etapa) */
.grafico .g-plan{fill:#8FA3B8}
.grafico .g-real{fill:var(--dorado)}
.grafico .g-grid{stroke:#EAE4D9}
.grafico .g-hoy{stroke:var(--err);stroke-dasharray:4 3}
.grafico .g-hoy-t{font-size:9px;fill:var(--err)}
.grafico .g-etapa{font-size:11px;fill:var(--ink);font-weight:600}
.g-leyenda{display:inline-block;width:14px;height:7px;border-radius:3px;vertical-align:middle}
.g-l-plan{background:#8FA3B8}
.g-l-real{background:var(--dorado)}

/* selector de estado de tarea (inline en el checklist) */
.sel-estado{border:1px solid var(--borde);border-radius:7px;padding:3px 6px;font-size:12px;background:var(--surface)}
.sel-estado.e-hecha{background:#E6F0E7;border-color:#BFDCC2}
.sel-estado.e-en-curso{background:#FBF0DC;border-color:#EBD9AE}
.sel-estado.e-bloqueada{background:#F7E4E1;border-color:#E8C4BE}

/* editor de plantillas: un bloque por etapa (23-sep-2026). La tarea se lleva el
   ancho; peso y día son números cortos. En el celular cada tarea se apila. */
.pl-barra{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.pl-barra .btn-sec{margin-left:auto}
.pl-cols,.pl-tarea{display:grid;grid-template-columns:54px minmax(0,1fr) 74px 74px 30px;gap:8px;align-items:start}
.pl-cols{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:0 11px 5px}
.pl-cols span:nth-child(3),.pl-cols span:nth-child(4){text-align:right;padding-right:9px}
.pl-etapa{border:1px solid var(--borde);border-radius:10px;margin-bottom:10px;background:var(--surface)}
.pl-etapa-cab{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#F7F4EF;border-bottom:1px solid var(--borde);border-radius:10px 10px 0 0}
.pl-etapa.plegada .pl-etapa-cab{border-bottom:0;border-radius:10px}
.pl-etapa.plegada .pl-tareas{display:none}
.pl-plegar{width:22px;color:var(--ink-2);font-size:13px}
.pl-etapa-nombre{flex:0 1 320px;min-width:0;font-weight:600;color:var(--ink);border:1px solid transparent;border-radius:7px;padding:5px 8px;background:transparent}
.pl-etapa-nombre:hover,.pl-etapa-nombre:focus{border-color:var(--borde);background:var(--surface)}
.pl-etapa-res{flex:1;min-width:0;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pl-tareas{padding:6px 10px 8px}
.pl-tarea{padding:4px 0;border-bottom:1px solid #F0ECE5}
.pl-tarea textarea{width:100%;resize:none;overflow:hidden;border:1px solid var(--borde);border-radius:7px;padding:6px 8px;font:inherit;line-height:1.4;background:var(--surface);min-height:33px;color:var(--ink)}
.pl-num{display:block}
.pl-num span{display:none}
.pl-num input{width:100%;border:1px solid var(--borde);border-radius:7px;padding:6px 8px;text-align:right;background:var(--surface);font-variant-numeric:tabular-nums}
/* sin las flechitas del navegador: se comían el lugar y el número quedaba centrado */
.pl-num input{-moz-appearance:textfield;appearance:textfield}
.pl-num input::-webkit-inner-spin-button,.pl-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pl-flechas{display:inline-flex;gap:2px}
.pl-flechas button{width:25px;height:30px;border:1px solid transparent;border-radius:6px;color:var(--ink-2);line-height:1}
.pl-flechas button:hover:not(:disabled),.pl-flechas button:focus-visible{border-color:var(--borde);background:var(--surface);color:var(--ink)}
.pl-flechas button:disabled{opacity:.22;cursor:default}
.pl-x{width:28px;height:30px;border-radius:6px;color:var(--ink-2);opacity:.55}
.pl-x:hover,.pl-x:focus-visible{opacity:1;color:var(--err);background:#F7E4E1}
.pl-mas{margin-top:6px;padding:4px 2px;font-size:12.5px;color:var(--terracota)}
.pl-mas:hover{text-decoration:underline}
.pl-mas-etapa{margin:2px 0 16px}
@media(max-width:700px){
  .pl-cols{display:none}
  .pl-barra{flex-wrap:wrap}
  .pl-barra .resumen{flex-basis:100%}
  .pl-barra .btn-sec{margin-left:0}
  .pl-tarea{grid-template-columns:54px 1fr 1fr 30px;grid-template-areas:"f t t x" "f p d x"}
  .pl-tarea .pl-flechas{grid-area:f}
  .pl-tarea textarea{grid-area:t}
  .pl-tarea .pl-num:nth-of-type(1){grid-area:p}
  .pl-tarea .pl-num:nth-of-type(2){grid-area:d}
  .pl-tarea .pl-x{grid-area:x}
  .pl-num{display:flex;align-items:center;gap:6px}
  .pl-num span{display:inline;font-size:11px;color:var(--ink-2)}
  .pl-etapa-cab{flex-wrap:wrap}
  .pl-etapa-nombre{flex:1 1 55%}
  .pl-etapa-res{order:5;flex-basis:100%;padding-left:30px}
}

/* meter de avance */
.meter{width:90px;height:7px;border-radius:99px;background:#EFE9DE;display:inline-block;vertical-align:middle;overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--dorado)}

/* ---------- ficha obra ---------- */
.ficha-cab{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.ficha-cab h2{font-size:22px;font-family:ui-monospace,Consolas,monospace}
.ficha-cab .cli{color:var(--ink-2)}
.volver{font-size:12.5px;color:var(--ink-2);text-decoration:underline;cursor:pointer;padding:0}

/* ---------- buscador global ---------- */
.overlay{position:fixed;inset:0;background:rgba(27,42,59,.45);z-index:80;display:grid;
  place-items:start center;padding-top:12vh}
.buscador-caja{width:min(92vw,560px);background:var(--surface);border-radius:14px;
  box-shadow:0 24px 60px rgba(27,42,59,.4);overflow:hidden}
#buscador-input{width:100%;border:none;padding:16px 18px;font-size:15px;outline:none;border-bottom:1px solid var(--borde)}
#buscador-resultados{max-height:44vh;overflow:auto}
.res-item{display:flex;gap:10px;align-items:center;padding:9px 16px;cursor:pointer;font-size:13.5px}
.res-item.activo,.res-item:hover{background:#F6F1E8}
.res-item .tipo{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);width:74px;flex:none}
.res-item .mono{font-family:ui-monospace,Consolas,monospace;font-weight:600}
.buscador-pie{padding:8px 16px;font-size:11px;color:var(--ink-2);border-top:1px solid var(--borde)}
.buscador-pie kbd{background:var(--gris);color:var(--ink-2)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(27,42,59,.45);z-index:90;display:grid;place-items:center;padding:16px}
/* ⚠ max-height + scroll: sin esto un modal largo (el legajo de RRHH tiene 19 campos)
   se desborda de la pantalla y el botón Guardar queda inalcanzable — no hay forma de
   llegar a él ni scrolleando, porque el que scrollea es el fondo. */
.modal-caja{width:min(94vw,440px);background:var(--surface);border-radius:14px;padding:22px;
  box-shadow:0 24px 60px rgba(27,42,59,.4);max-height:calc(100vh - 32px);overflow-y:auto}
.modal-caja h3{font-size:16px;margin-bottom:14px}
/* Las acciones quedan pegadas abajo: en un formulario largo, tener que scrollear hasta
   el final para guardar es la diferencia entre cargarlo y dejarlo para después. */
.modal-caja .acciones,.modal-caja .acciones-form{display:flex;gap:10px;margin-top:16px;
  position:sticky;bottom:-22px;background:var(--surface);padding:12px 0 0;
  border-top:1px solid var(--borde)}
.modal-caja .acciones{justify-content:flex-end}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:26px;z-index:100;
  background:var(--petroleo);color:var(--crema);border-radius:11px;padding:11px 17px;font-size:13px;
  display:flex;gap:9px;align-items:center;box-shadow:0 10px 30px rgba(27,42,59,.35);
  opacity:0;pointer-events:none;transition:.25s;max-width:min(92vw,480px)}
#toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}
#toast .ok{color:#7fc98a}
#toast .err{color:#e8988d}

/* ---------- responsive ---------- */
@media(max-width:820px){
  aside#menu{position:fixed;left:0;top:0;bottom:0;z-index:70;transform:translateX(-100%);transition:.2s;height:100vh}
  body.menu-abierto aside#menu{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  /* Fondo oscuro: sin esto el cajón tapa media pantalla y no hay forma evidente de
     cerrarlo — tocar afuera es lo que todo el mundo intenta primero. */
  body.menu-abierto::after{content:"";position:fixed;inset:0;z-index:60;background:rgba(27,42,59,.45)}
  .hamb{display:block}
  .vista{padding:14px 14px 60px}
  /* En 390 px el título, el subtítulo y la fecha peleaban por la misma línea y el
     título terminaba partido en dos. La fecha se saca —el teléfono ya la muestra— y
     el subtítulo baja a su propio renglón. */
  header.top{padding:12px 14px 0;flex-wrap:wrap}
  header.top h1{font-size:17px}
  header.top .miga{flex-basis:100%;order:3;margin-top:2px}
  header.top .fecha{display:none}
}

/* ---------- PNL (réplica del cuadro de la planilla) ----------
   Tabla ancha: 12 meses + total. Los conceptos quedan fijos a la izquierda al
   desplazarse, si no se pierde de vista qué renglón se está mirando. */
/* ---- PNL a pantalla completa (16-sep-2026) --------------------------------
   El resto del ERP se lee mejor angosto (1.140 px, la medida de una columna de
   texto), pero un cuadro de 16 columnas no: ahí cada pixel es un mes. Solo esta
   vista rompe el ancho y toma la pantalla entera, y la tabla scrollea sola —con
   el encabezado y la columna de conceptos fijos— en vez de estirar la página.
   Así los filtros y el título quedan siempre a la vista. */
/* El alto se reparte con flex, no con una resta a ojo: la pantalla es el alto
   total, los filtros y el título ocupan lo suyo y la tabla se queda con lo que
   sobre. Así entra igual de bien en un 24" que en un teléfono, y no hay número
   mágico que se rompa cuando cambie el encabezado. */
/* La cadena de alturas: body → .shell → main → .vista → la tabla. Si un eslabón
   no tiene alto propio, los de abajo crecen libres y el flex no limita nada; por
   eso se fija acá y no solo en la tabla. `min-height:0` en cada hijo es lo que
   permite que se achiquen por debajo de su contenido y aparezca su scroll. */
body[data-vista="pnl"]{height:100dvh;overflow:hidden}
@supports not (height: 100dvh){body[data-vista="pnl"]{height:100vh}}
body[data-vista="pnl"] .shell{height:100dvh;min-height:0;overflow:hidden}
@supports not (height: 100dvh){body[data-vista="pnl"] .shell{height:100vh}}
body[data-vista="pnl"] main{min-height:0;overflow:hidden}
body[data-vista="pnl"] .vista{max-width:none;flex:1;min-height:0;
  display:flex;flex-direction:column;padding-bottom:16px}
body[data-vista="pnl"] .vista>.filtros{flex:0 0 auto}
body[data-vista="pnl"] .pnl-card{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0}
body[data-vista="pnl"] .pnl-card>h3,body[data-vista="pnl"] .pnl-card>.f-warn{flex:0 0 auto}
.pnl-envuelta{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
/* ---- impresión / PDF ----
   En papel no hay scroll: se suelta el alto fijo, se saca todo lo que no es el
   cuadro y se imprime en horizontal, repitiendo el encabezado de meses en cada
   hoja. `print-color-adjust` es lo que hace que el navegador imprima los fondos
   de los renglones: sin eso sale todo blanco y se pierde la jerarquía. */
@media print{
  @page{size:landscape;margin:10mm}
  aside#menu,header.top,.filtros,.hamb,#toast,#modal-raiz,.card h3 .der{display:none !important}
  body,body[data-vista="pnl"]{height:auto;overflow:visible;background:#fff}
  body[data-vista="pnl"] .shell,body[data-vista="pnl"] main,body[data-vista="pnl"] .vista{height:auto;overflow:visible;display:block}
  body[data-vista="pnl"] .vista{padding:0}
  .pnl-card{border:none;box-shadow:none;padding:0;display:block !important}
  .pnl-envuelta{max-height:none;height:auto;overflow:visible}
  /* Con el importe completo la tabla pasa de 1.600 px y en papel se cortaba la
     última columna: se achica la tipografía y el aire hasta que las 16 columnas
     entren en un A4 apaisado. `table-layout:fixed` evita que una celda larga
     empuje al resto. */
  table.pnl{font-size:6.4pt;width:100%;table-layout:fixed}
  table.pnl td,table.pnl th{padding:1.2px 2px;overflow:hidden}
  table.pnl .pnl-cpt{width:132px}
  /* los totales llevan siete dígitos: necesitan más lugar que un mes */
  table.pnl .pnl-fin,table.pnl .pnl-ant,table.pnl .pnl-dif{width:78px}
  table.pnl thead{display:table-header-group}
  table.pnl tr{break-inside:avoid}
  table.pnl th,table.pnl .pnl-cpt{position:static}
  table.pnl .pnl-cpt{min-width:0;max-width:none}
  table.pnl td.num,table.pnl th.num{min-width:0}
  .pnl-card h3{font-size:12pt;margin-bottom:6px}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- PNL: los dos cuadros de la planilla ---------------------------------
   Muchas columnas y muchas filas: el concepto queda fijo a la izquierda y el
   resto scrollea. ⚠ El error que había: solo el TH de la última columna era
   sticky (no el TD), así que el encabezado "Total" flotaba sobre los meses y el
   cuadro se leía cruzado. Ahora nada es sticky a la derecha: la columna de
   totales va al final, separada por un borde, y se llega scrolleando. */
table.pnl{font-size:12px;border-collapse:separate;border-spacing:0;white-space:nowrap}
table.pnl th{position:sticky;top:0;background:var(--pnl-cab);z-index:3;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--ink-2)}
table.pnl td,table.pnl th{padding:4px 10px;border-bottom:1px solid var(--pnl-linea)}
table.pnl .pnl-cpt{position:sticky;left:0;background:var(--surface);z-index:2;
  text-align:left;min-width:238px;max-width:238px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:1px 0 0 var(--pnl-linea)}
table.pnl th.pnl-cpt{z-index:4;background:var(--pnl-cab)}
table.pnl td.num,table.pnl th.num{font-variant-numeric:tabular-nums;text-align:right;min-width:94px}

/* ---- cómo se lee un número ----
   Negativo en rojo y entre paréntesis (lo escribe el JS), el % debajo en chico y
   una barra de peso en la columna del total: de un vistazo se ve qué renglón pesa
   y cuál es ruido, sin tener que comparar cifras. */
table.pnl td.neg{color:var(--pnl-rojo);font-weight:600}
.pnl-pc{display:block;font-style:normal;font-size:9.5px;color:var(--ink-2);line-height:1.1}
.pnl-bar{display:block;height:3px;margin:2px 0 0 auto;border-radius:2px;
  background:var(--pnl-barra);opacity:.55}
td.neg .pnl-bar{background:var(--pnl-rojo)}

/* ---- las tres zonas del cuadro ----
   Los meses, el total del año y la comparación con el anterior son tres bloques
   distintos: se separan con líneas gruesas, no con colores, para no competir con
   la jerarquía de los renglones. */
table.pnl .pnl-fin{border-left:2px solid var(--ink-2);background:var(--pnl-finzona)}
table.pnl .pnl-ant{color:var(--ink-2)}
table.pnl .pnl-ant{border-left:1px solid var(--pnl-linea)}
table.pnl td.pnl-fin{font-weight:600}
table.pnl .mes-hoy{background:var(--pnl-hoy)}
table.pnl th.mes-hoy{box-shadow:inset 0 -2px 0 var(--dorado)}
/* la diferencia, por lo que significa: un gasto que sube no es buena noticia */
table.pnl td.pnl-dif{font-size:11px}
table.pnl td.pnl-dif.bien{color:var(--pnl-verde)}
table.pnl td.pnl-dif.mal{color:var(--pnl-rojo)}

/* ---- jerarquía de renglones, la misma de la planilla ---- */
tr.pnl-n2 .pnl-cpt{padding-left:26px;color:var(--ink-2);font-size:11.5px;font-weight:400}
tr.pnl-n2 td{color:var(--ink-2)}
tr.pnl-n2:nth-of-type(even) td,tr.pnl-n2:nth-of-type(even) .pnl-cpt{background:var(--pnl-cebra)}
tr.pnl-n1 .pnl-cpt,tr.pnl-n0 .pnl-cpt{font-weight:700;letter-spacing:.01em}
tr.pnl-ing-h td,tr.pnl-ing-h .pnl-cpt{font-weight:700;background:var(--pnl-ingreso);color:var(--ink)}
tr.pnl-bloque td,tr.pnl-bloque .pnl-cpt{font-weight:650;background:var(--pnl-bloque);color:var(--ink)}
tr.pnl-tot-ing td,tr.pnl-tot-ing .pnl-cpt{font-weight:700;background:var(--pnl-ingreso);color:var(--ink);
  border-top:1.5px solid var(--pnl-verde);border-bottom:1.5px solid var(--pnl-verde)}
tr.pnl-tot td,tr.pnl-tot .pnl-cpt{font-weight:700;background:var(--pnl-egreso);color:var(--ink);
  border-top:1.5px solid var(--pnl-ambar)}
tr.pnl-res td,tr.pnl-res .pnl-cpt{font-weight:700;background:var(--pnl-res);color:var(--ink);font-size:12.5px}
tr.pnl-res-final td,tr.pnl-res-final .pnl-cpt{font-weight:800;background:var(--pnl-res);color:var(--ink);
  font-size:13.5px;border-top:2.5px double var(--ink);border-bottom:2.5px double var(--ink)}
tr.pnl-res-final .pnl-bar,tr.pnl-res .pnl-bar{display:none}
tr.pnl-aux td,tr.pnl-aux .pnl-cpt{color:var(--ink-2);font-size:11.5px;font-style:italic}
tr.pnl-cab td,tr.pnl-cab .pnl-cpt{background:var(--pnl-cab);font-size:11px;color:var(--ink-2)}
tr.pnl-cab .pnl-cpt{font-weight:600}
/* seguir una fila con el ojo en 16 columnas: se resalta entera al pasar por arriba */
table.pnl tbody tr:hover td,table.pnl tbody tr:hover .pnl-cpt{background:var(--pnl-hover)}
table.pnl .meter{display:inline-block;vertical-align:middle;height:5px}
:root{--pnl-bloque:#E7ECEF; --pnl-ingreso:#DCEBDD; --pnl-egreso:#F7E7C8; --pnl-res:#DDE5EE;
  --pnl-cab:#F1ECE3; --pnl-linea:#E2DCD1; --pnl-cebra:#FBF9F5; --pnl-hover:#F3EDE1;
  --pnl-finzona:#FCFAF6; --pnl-hoy:#FBF3DE; --pnl-rojo:#B3261E; --pnl-verde:#2E7D46;
  --pnl-ambar:#C89A3C; --pnl-barra:#8AA0B4}
/* Achicar, no esconder: en un cuadro contable no se puede sacar una columna sin
   que el número de al lado pase a significar otra cosa. Se gana lugar con la
   tipografía y el aire, y el resto se scrollea. */
@media(max-width:1100px){
  table.pnl{font-size:11.5px}
  table.pnl td,table.pnl th{padding:3px 7px}
  table.pnl .pnl-cpt{min-width:190px;max-width:190px}
  table.pnl td.num,table.pnl th.num{min-width:84px}
}
@media(max-width:820px){
  table.pnl{font-size:11px}
  table.pnl td,table.pnl th{padding:3px 6px}
  table.pnl .pnl-cpt{min-width:132px;max-width:132px;white-space:normal;line-height:1.25}
  tr.pnl-n2 .pnl-cpt{padding-left:12px;font-size:10.5px}
  table.pnl td.num,table.pnl th.num{min-width:74px}
  .pnl-pc{font-size:9px}
}
/* En el teléfono el cuadro es lo que importa: todo lo accesorio se compacta para
   que la tabla se quede con el alto. Los grupos de solapas van chicos y en fila
   —tres botones a lo ancho dejaban la tabla en 200 px—, el subtítulo de la
   tarjeta y el resumen se esconden (dicen lo mismo que ya se ve) y el aviso de
   avance se recorta a dos líneas, que alcanzan para entender que hay que
   corregirlo. */
@media(max-width:560px){
  body[data-vista="pnl"] .filtros{gap:6px;margin-bottom:8px}
  body[data-vista="pnl"] .filtros .seg{margin-bottom:0;padding:3px;gap:3px}
  body[data-vista="pnl"] .filtros .seg button{padding:5px 9px;font-size:12px;min-height:0}
  body[data-vista="pnl"] .filtros select{flex:0 0 auto;width:auto;padding:5px 8px}
  body[data-vista="pnl"] .filtros .resumen{display:none}
  body[data-vista="pnl"] .pnl-card{padding:12px}
  body[data-vista="pnl"] .pnl-card h3{margin-bottom:6px;font-size:13.5px}
  body[data-vista="pnl"] .pnl-card h3 .sub{display:none}
  body[data-vista="pnl"] .pnl-card h3 .der{margin-left:auto}
  body[data-vista="pnl"] .f-warn{font-size:11px;margin-bottom:6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body[data-vista="pnl"] .pnl-pantalla span{display:none}
}

/* Pares dato/valor de una ficha (RRHH). Estaban solo en crm.css: sin esto la etiqueta
   y el valor salen pegados ("DNI37029373"). */
.kv-fila{display:flex;align-items:baseline;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--borde);font-size:13.5px}
.kv-fila .k{width:120px;flex:none;color:var(--ink-2);font-size:12.5px}
.kv-fila .v{flex:1;min-width:0;overflow-wrap:anywhere}

/* Chip que además es botón (el "faltan N" del legajo de RRHH). */
.pill-btn{cursor:pointer;border:1px solid transparent;font:inherit;font-size:11px;font-weight:600}
.pill-btn:hover{border-color:currentColor}

/* Checklist de datos del legajo: qué está cargado y qué falta. */
.chk-barra{height:6px;border-radius:99px;background:var(--gris);overflow:hidden;margin:10px 0 4px}
/* RRHH: la ficha más clara (14-oct-2026) */
.rh-legajo{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--borde);border-radius:10px}
.rh-legajo-t{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rh-faltan{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rh-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rh-cifra{border:1px solid var(--borde);border-radius:10px;padding:9px 12px;display:grid;gap:2px}
.rh-cifra .t{font-size:11.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.rh-cifra b{font-size:18px;font-variant-numeric:tabular-nums}
.rh-cifra.mal b{color:var(--err)}
.rh-hist-anio{font-weight:600;font-size:12.5px;color:var(--ink-2);margin:10px 0 4px}
.rh-det{display:block;font-size:12px}
.rh-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
/* RRHH en tres solapas (15-oct-2026) */
.rh-seg{margin:4px 0 0}
/* RRHH: cada solapa con su período (15-oct-2026) */
.rh-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rh-barra .rh-seg{margin:0}
.rh-acc{display:flex;gap:8px}
.rh-per{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rh-per .btn-sec{min-width:36px;padding:3px 10px;font-size:19px;line-height:1.1}
.rh-per-t{font-size:16px;min-width:150px;text-align:center;text-transform:capitalize}
.rh-per .rh-modo{margin:0 0 0 6px}
.rh-filtros{margin:4px 0 10px}
.rh-conteo{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.rh-hist summary{cursor:pointer;list-style:none}
.rh-hist summary::-webkit-details-marker{display:none}
.rh-hist summary h3{display:inline-flex;align-items:baseline;gap:8px;margin:0}
.rh-hist summary h3::before{content:"▸";font-size:12px;color:var(--ink-2)}
.rh-hist[open] summary h3::before{content:"▾"}
.rh-hist[open] summary{margin-bottom:12px}
.chk-barra i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.chk-fila{display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--borde);font-size:13px}
.chk-ico{width:16px;flex:none;text-align:center;font-weight:700}
.chk-ico.si{color:var(--ok)}
.chk-ico.no{color:var(--warn)}
.chk-t{width:150px;flex:none;color:var(--ink-2);font-size:12.5px}
.chk-v{flex:1;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ---------- calendario de ausencias (RRHH) ----------
   El año entero en una barra por persona. Las posiciones vienen calculadas del backend
   en %, así la misma cuenta no vive en dos lados. Los meses se distinguen por bandas
   alternadas: con solo una línea divisoria no se sabía si una barra caía en septiembre
   o en octubre. */
.cal{border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.cal-fila{display:flex;align-items:center;border-top:1px solid var(--borde);min-height:30px}
.cal-fila:first-child{border-top:none}
.cal-n{width:186px;flex:none;padding:4px 10px;font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--borde)}
.cal-p{position:relative;flex:1;height:26px;min-width:0}
.cal-cab{background:var(--surface);font-weight:600}
.cal-m{position:absolute;top:0;height:100%;font-size:11px;color:var(--ink-2);
  display:grid;place-items:center;letter-spacing:.02em}
.cal-m.par{background:var(--gris)}
.cal-banda{position:absolute;top:0;height:100%}
.cal-banda.par{background:var(--gris);opacity:.5}
.cal-grupo{padding:5px 10px;background:var(--petroleo);color:#F5F2ED;font-size:10.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* las barras: vacaciones en dorado, el resto en gris; roja si se pisa con un colega */
.cal-b{position:absolute;top:5px;height:16px;border-radius:4px;background:var(--dorado);
  min-width:4px;cursor:help;font-size:10px;font-weight:600;color:#3a2f10;font-style:normal;
  display:grid;place-items:center;white-space:nowrap;overflow:hidden;padding:0 4px}
.cal-b.otra{background:var(--ink-2);color:#fff;opacity:.75}
.cal-b.cruza{background:var(--err);color:#fff}
.cal-et{position:absolute;top:6px;font-size:10px;font-style:normal;color:var(--ink-2);
  white-space:nowrap;line-height:14px}
.cal-hoy{position:absolute;top:0;height:100%;width:2px;background:var(--terracota)}
/* referencias al pie */
.cal-ref{display:inline-block;width:14px;height:9px;border-radius:3px;vertical-align:middle;
  margin-right:2px;background:var(--dorado)}
.cal-ref.otra{background:var(--ink-2);opacity:.75}
.cal-ref.cruza{background:var(--err)}
.cal-ref.hoy{width:3px;height:13px;background:var(--terracota);border-radius:1px}
@media(max-width:700px){.cal-n{width:120px;font-size:11px}.cal-b{font-size:9px}
  /* los 12 meses en ~200 px se pisaban («EneFebMaAbr…»): 40 px por mes y se desplaza de costado */
  .cal{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cal-fila,.cal-grupo{min-width:600px}
  .cal-n{position:sticky;left:0;z-index:2;background:var(--surface)}
  .cal-grupo{position:relative}
  /* el calendario abre desplazado hasta hoy: el nombre del puesto se queda pegado a la izquierda */
  .cal-grupo>span{position:sticky;left:10px;display:inline-block}}

/* En el celular los filtros van uno abajo del otro: tres controles apretados en 390 px
   no se pueden ni tocar. */
@media(max-width:560px){
  .filtros{gap:6px}
  .filtros input,.filtros select{width:100%;flex:1 1 100%}
  .filtros input[type=search]{min-width:0}
  .filtros .resumen{margin-left:0}
}

/* ============================================================================
   BOTONES — medidas únicas para las 4 puertas (15-sep-2026)
   Cada módulo había inventado las suyas: el radio iba de 7 a 9 px, la tipografía
   de 12,5 a 13,5 y el alto de 21 a 37. Mezclados en la misma pantalla se ven como
   cuatro sistemas distintos. Los NOMBRES de clase siguen siendo los de cada puerta
   (btn-primary / btn-principal, btn-sec / btn-borde…): renombrarlos tocaría miles
   de líneas de JS sin cambiar un pixel. Lo que se unifica es cómo se ven.
   ============================================================================ */
:root{ --btn-alto:36px; --btn-radio:9px; --btn-fs:13px; --btn-pad:0 14px; }

.btn-primary,.btn-principal,.btn-sec,.btn-borde,.btn-linea,.btn-malo,.btn-plano,
.btn-export,.btn-pagar,.btn-dorado,.btn-terracota{
  min-height:var(--btn-alto);border-radius:var(--btn-radio);font-size:var(--btn-fs);
  padding:var(--btn-pad);display:inline-flex;align-items:center;justify-content:center;
  gap:7px;line-height:1;white-space:nowrap;
  transition:background .15s,border-color .15s,opacity .15s}
.btn-primary,.btn-principal{font-weight:650}
.btn-sec,.btn-borde,.btn-linea,.btn-plano,.btn-export{font-weight:550}
/* Que se note que son tocables: sin esto no hay diferencia entre un botón y un rótulo. */
.btn-primary:hover,.btn-principal:hover{filter:brightness(1.08)}
.btn-sec:hover,.btn-borde:hover,.btn-linea:hover{border-color:var(--dorado)}
.btn-primary:disabled,.btn-sec:disabled,.btn-principal:disabled{opacity:.5;cursor:not-allowed}
/* btn-peligro es deliberadamente un enlace, no un botón: es "borrar" dentro de una
   fila de tabla y no debe competir con las acciones reales. Se excluye del canon. */
.btn-peligro{min-height:0;padding:2px;border-radius:0;font-size:12px;display:inline}

/* ---------- Cargar compra ----------
   Los importes van en una sola fila, en el orden de la planilla (neto · IVA · desc ·
   percep · total), para que la cuenta se lea de izquierda a derecha como en la hoja. */
.cc-importes{display:grid;grid-template-columns:1.2fr .7fr 1fr 1fr 1fr 1.3fr;gap:12px;
  margin:12px 0;padding:12px 14px;border:1px solid var(--borde);border-radius:10px;background:var(--bg-3,#FAF7F1)}
.cc-importes .f-field{margin:0}
.cc-total input{font-weight:700;font-size:15px}
.cc-dos{display:flex;gap:6px}.cc-dos select{flex:0 0 46%}.cc-dos input{flex:1;min-width:0}
.cc-check{display:flex;align-items:center;gap:8px;min-height:36px;font-weight:400;cursor:pointer}
.cc-check input{width:16px;height:16px}
@media(max-width:900px){.cc-importes{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.cc-importes{grid-template-columns:1fr 1fr}}

/* ---------- Registrar cobro ---------- */
.cb-dos{display:flex;gap:6px;align-items:stretch}.cb-dos>select{flex:0 0 48%}.cb-dos>input{flex:1;min-width:0}
.cb-moneda{flex:0 0 auto;padding:3px}.cb-moneda button{padding:5px 10px;font-size:12px;min-height:0}

/* botón de edición en la cabecera de la ficha de obra */
.ficha-cab .ob-editar{margin-left:auto}
/* modal de dos columnas (editor de obra) */
.modal-caja.ancha{width:min(94vw,720px)}
.modal-caja h4{font-size:13px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}

/* ===== Dashboard financiero — bloque "Los próximos 90 días" =====
   El veredicto tiene que leerse desde lejos: Nico, Seba y Leo lo abren para saber si
   llegan, no para estudiar una tabla. Por eso el piso va en tamaño de titular y las
   palancas (cobrar lo atrasado, seguir retirando) al lado, como escenarios. */
.veredicto{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.veredicto .piso{min-width:230px}
.veredicto .piso .rot{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.veredicto .piso .n{font-size:42px;font-weight:680;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1.05;margin:2px 0}
.veredicto .piso .n small{font-size:16px;font-weight:600;color:var(--ink-2);margin-right:4px}
.veredicto .piso .cuando{font-size:12.5px;color:var(--ink-2)}
.veredicto .palancas{display:flex;flex-direction:column;gap:9px;flex:1;min-width:260px}
.palanca{display:flex;align-items:baseline;gap:9px;font-size:12.5px;
  border-left:3px solid var(--borde);padding:3px 0 3px 10px}
.palanca b{font-variant-numeric:tabular-nums;font-size:14px}
.palanca .que{color:var(--ink-2)}
.palanca.mejor{border-left-color:var(--ok)}
.palanca.peor{border-left-color:var(--err)}

/* La curva del acumulado: una barra por semana, el cero marcado. Se entiende de un
   vistazo dónde está el pozo y cuándo se sale. */
.curva{display:flex;align-items:stretch;gap:3px;height:130px;margin:10px 0 24px;position:relative}
/* la línea del cero, que es lo que separa "llego" de "no llego" */
.curva::after{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--borde)}
.curva .sem{flex:1;display:flex;flex-direction:column;position:relative;min-width:0}
.curva .mitad{height:50%;display:flex;justify-content:center}
.curva .mitad.arriba{align-items:flex-end}
.curva .mitad.abajo{align-items:flex-start}
.curva .bar{border-radius:2px;width:78%;min-height:1px}
.curva .bar.pos{background:var(--ok);opacity:.8}
.curva .bar.neg{background:var(--err);opacity:.8}
.curva .sem.piso .bar{opacity:1;outline:2px solid var(--err);outline-offset:1px}
.curva .et{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);text-align:center;
  font-size:9.5px;color:var(--ink-2);white-space:nowrap}

/* Las capas: lo comprometido y lo estimado no se miran igual, y se nota. */
.capa{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.capa:last-child{border-bottom:0}
.capa .nom{font-weight:600;min-width:120px;white-space:nowrap}
.capa .val{font-variant-numeric:tabular-nums;font-weight:650;min-width:100px;text-align:right}
.capa .txt{font-size:12px;color:var(--ink-2);flex:1;min-width:200px}
.capa .pill{align-self:center}
.pill.estim{background:#FBF0DC;color:var(--warn)}

@media(max-width:700px){
  .veredicto .piso .n{font-size:34px}
  .curva{height:88px}
  /* En el celular la capa se parte en dos renglones: arriba el nombre y el monto,
     abajo la explicación. Con el min-width del texto la fila empujaba la página a lo
     ancho y todo el tablero scrolleaba de costado. */
  .capa .nom{min-width:auto}
  .capa .val{min-width:auto;margin-left:auto}
  .capa .txt{min-width:0;flex-basis:100%}
}


/* Filtrar la galería de la obra por rubro de foto. */
.galeria-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.galeria-filtros .btn-sec { padding: .28rem .7rem; font-size: .82rem; }
.galeria-filtros .btn-sec.act { background: var(--petroleo, #1B2A3B); color: #fff; border-color: transparent; }
.galeria-filtros .sub { opacity: .65; margin-left: .25rem; }
.galeria-etq.rubro { background: rgba(184,151,62,.14); color: #8a6f22; font-weight: 600; }