/* ═══════════════════════════════════════════════════════════════════════
   PRESUPUESTOS (#sec-presup) · D03 con las vistas modelo de la norma
   ───────────────────────────────────────────────────────────────────────
   La UI (ui/figma) no rediseñó esta vista: solo quitó la tarjeta repetida de
   «Costo directo» (57a36ef). Lo demás se viste con los modelos de
   criterios-ui-esparq.md §1:
     encabezado de vista (G12) → tarjeta blanca, título + descripción a la
                                 izquierda, acción a la derecha (APU's, PM);
     pestañas (D03)            → Cronograma, «crono-figma» (759:1245);
     tarjeta KPI (G08)         → Capacitaciones › Indicadores (.kpi-card);
     tarjeta de bloque (G09)   → blanca con sombra suave, como Cronograma;
     botón de descarga         → pastilla azul + Heroicon (D-008);
     aviso                     → el ámbar de Calidad › Indicadores.
   Norma aplicada aquí: G01 sin mayúsculas · G02 solo tokens (este archivo no
   tiene ni un hex) · G04 ≥ 10 px / ≥ 12 px a 446 · G05 botones pastilla con
   icono · G06 Excel del alto de los demás · G11 sin tarjetas anidadas ·
   G12 sin números delante del título · G21 tablas con scroll interno.
   Las reglas globales de main (presupInjectStyles / pptoInjectStyles) no se
   tocan: .presup-subtab la comparten Mano de Obra, Personal y Adicionales.
   ═══════════════════════════════════════════════════════════════════════ */

#sec-presup{
  --prf-sombra: 0 1px 4px color-mix(in srgb, var(--gray-9) 6%, transparent);
  --prf-filete: var(--gray-3);
  --prf-fondo-suave: var(--gray-2);
}
#sec-presup .prf-vista{ display:flex; flex-direction:column; gap:20px; line-height:normal; color:var(--gray-7); }
#sec-presup .prf-vista h2, #sec-presup .prf-vista h3, #sec-presup .prf-vista p{ margin:0; letter-spacing:0; }
#sec-presup .prf-ico{ flex:none; width:16px; height:16px; }

/* ── Encabezado (G12): título + descripción; la descarga a la derecha ── */
/* Alto de cabecera (C4, 01/10): --ic-cab-h vive en #sec-infocon
   (assets/ui/informacion-contractual.css) y llega acá por herencia porque
   #sec-presup es un .ic-panel DENTRO de #sec-infocon (ver index.html). Las
   cuatro cabeceras del bloque —Dashboard, Contrato, Presupuesto, APU's—
   comparten ese único número: cambiarlo es editar esa variable, no esta
   hoja. Antes esta cabecera ya coincidía en alto con la de Dashboard; ahora
   queda explícito en vez de ser una coincidencia de padding+tipografía. */
#sec-presup .prf-cab{ background:var(--bg-card, var(--gray-1)); border-radius:12px; box-shadow:var(--prf-sombra);
  display:flex; align-items:center; gap:16px; padding:16px 20px; min-height:var(--ic-cab-h); box-sizing:border-box; }
#sec-presup .prf-cab-tit{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
#sec-presup .prf-cab-h{ font-size:24px !important; font-weight:700 !important; line-height:28px !important; color:var(--gray-9) !important; }
#sec-presup .prf-cab-sub{ font-size:14px !important; font-weight:400 !important; line-height:22px !important; color:var(--gray-6) !important; }
#sec-presup .prf-cab-sub b{ font-weight:600; color:var(--gray-7); }
#sec-presup .prf-cab-meta{ font-size:12px; line-height:18px; color:var(--gray-6); }
#sec-presup .prf-cab-meta b{ font-weight:600; color:var(--gray-7); }
#sec-presup .prf-cab-meta[hidden]{ display:none; }
#sec-presup .prf-cab-div{ align-self:stretch; width:1px; flex:none;
  background:repeating-linear-gradient(180deg,var(--gray-4) 0 2px,transparent 2px 4px); }

/* ── Botones (G05): pastilla, icono + texto, todos a 36 de alto (G06) ── */
#sec-presup .prf-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:8px 18px; border:0; border-radius:100px; background:var(--degrade); color:var(--gray-1);
  font:700 14px/normal 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }
#sec-presup .prf-btn:hover{ filter:brightness(.95); }
#sec-presup .rfi-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px;
  border-radius:100px; font-size:13px; }
#sec-presup .rfi-btn .prf-ico{ width:16px; height:16px; }
#sec-presup .prf-btn:focus-visible, #sec-presup .rfi-btn:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
/* G06 · el «Excel» que inyecta injectTableChartTools sobre cada tabla: del alto
   de los demás, en pastilla verde de tokens, con el icono más grande. */
#sec-presup .tbl-tools{ margin:0 0 8px; }
#sec-presup .tbl-xlsx-btn{ height:36px; padding:0 16px; gap:6px; border-radius:100px; font-size:13px;
  color:var(--green-500); background:var(--green-50); border:1px solid var(--green-75); }
#sec-presup .tbl-xlsx-btn svg{ width:16px; height:16px; }

/* ── Pestañas (D03, Cronograma 759:1245), en su propia barra blanca ── */
#sec-presup .presup-subtabs.prf-tabs{ display:flex; flex-wrap:nowrap; align-items:flex-end; gap:0; margin:0;
  padding:8px 20px 0; border:0; border-radius:12px; background:var(--bg-card, var(--gray-1)); box-shadow:var(--prf-sombra);
  overflow-x:auto; scrollbar-width:none; }
#sec-presup .prf-tabs::-webkit-scrollbar{ display:none; }
#sec-presup .prf-tabs .presup-subtab{ flex:none; border:0; background:none; box-shadow:inset 0 -2px 0 var(--prf-filete);
  border-radius:0; margin:0; padding:8px 12px; font:inherit; font-size:16px; font-weight:400; line-height:24px;
  color:var(--gray-6); cursor:pointer; }
#sec-presup .prf-tabs .presup-subtab:not(.active):hover{ color:var(--gray-7); }
#sec-presup .prf-tabs .presup-subtab.active{ color:var(--blue-300); font-weight:600; box-shadow:inset 0 -2px 0 var(--blue-300); }
#sec-presup .prf-tabs .presup-subtab:focus-visible{ outline:2px solid var(--blue-300); outline-offset:-2px; }

/* ── Contenido de cada pestaña: bloques hermanos, a 20 (G10, G11) ── */
#sec-presup #presupContent{ display:flex; flex-direction:column; gap:20px; min-width:0; }
#sec-presup .prf-card{ background:var(--bg-card, var(--gray-1)); border-radius:12px; padding:24px;
  box-shadow:var(--prf-sombra); display:flex; flex-direction:column; gap:16px; min-width:0; }
#sec-presup .prf-dos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#sec-presup .prf-b-cab{ display:flex; flex-direction:column; gap:4px; }
#sec-presup .prf-b-cab h3{ font-size:16px !important; font-weight:600 !important; line-height:normal !important; color:var(--gray-7) !important; }
#sec-presup .prf-b-sub{ font-size:12px !important; font-weight:400 !important; line-height:1.5 !important; color:var(--gray-6) !important; }
#sec-presup .prf-card .presup-cv{ margin:0; }
#sec-presup .presup-empty{ padding:48px 16px; font-size:13px; color:var(--gray-6); }

/* ── KPI (G08): el componente de Capacitaciones › Indicadores, sin la franja
   de color de main y sin mayúsculas (G01). Cada KPI es su propia tarjeta. ── */
#sec-presup .kpi-strip.prf-kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0; }
#sec-presup .prf-kpis .kpi-card{ display:flex; flex-direction:column; min-width:0; margin:0; padding:20px;
  border:0; border-radius:16px; background:var(--bg-card, var(--gray-1)); box-shadow:var(--prf-sombra); overflow:visible; }
#sec-presup .prf-kpis .kpi-card::before, #sec-presup .prf-kpis .kpi-card::after{ display:none !important; }
#sec-presup .prf-kpis .kpi-label{ margin:0 0 12px; font:600 12px/normal 'Inter',sans-serif; letter-spacing:0;
  text-transform:none !important; color:var(--gray-6) !important; }
#sec-presup .prf-kpis .kpi-value{ margin:0; font:700 26px/1.15 'Inter',sans-serif; letter-spacing:-.5px;
  color:var(--gray-9) !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
#sec-presup .prf-kpis .prf-kpi-principal .kpi-value{ color:var(--blue-300) !important; }
#sec-presup .prf-kpis .kpi-sublabel{ margin:8px 0 0; font:500 12px/1.4 'Inter',sans-serif; color:var(--gray-6); }

/* ── Aviso de borrador: el ámbar de Calidad › Indicadores (.ssoma-note) ── */
#sec-presup .prf-aviso{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-radius:12px;
  background:color-mix(in srgb, var(--orange-400) 10%, var(--gray-1)); border:1px solid var(--gray-1); color:var(--orange-500); }
#sec-presup .prf-aviso p{ margin:0; font:400 12px/18px 'Inter',sans-serif; color:inherit; flex:1 1 240px; min-width:0; }

/* ── Tablas (D03, G21): alto fijo, scroll interno, cabecera fija arriba y
   total fijo abajo. Las dos tablas usan el mismo componente (G08): el de la
   tabla de hitos de Cronograma (759:1481). ── */
#sec-presup .prf-tabla{ max-height:min(62vh, 560px); overflow:auto; margin:0; border:1px solid var(--prf-filete); border-radius:8px; }
#sec-presup .prf-tabla > .tbl-tools{ position:sticky; left:0; padding:8px 12px 0; margin:0; }
#sec-presup .prf-tabla thead th{ position:sticky; top:0; z-index:2; }
#sec-presup table.presup-table th,
#sec-presup table.ppto th{ background:var(--prf-fondo-suave); color:var(--gray-6); padding:12px; border-bottom:1px solid var(--prf-filete);
  font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; white-space:nowrap; }
#sec-presup table.presup-table td,
#sec-presup table.ppto td{ border-bottom:1px solid var(--prf-filete); font-size:12px; color:var(--gray-7); }
#sec-presup table.presup-table td{ padding:12px; }
#sec-presup table.presup-table td.pz-part{ font-weight:500; }
#sec-presup table.presup-table tr.pz-total td,
#sec-presup table.ppto tr.pp-total td{ position:sticky; bottom:0; z-index:1; background:var(--blue-50); color:var(--blue-400);
  font-weight:700; font-size:12px; border-bottom:0; }
#sec-presup table.presup-table tr.pz-total .pz-num,
#sec-presup table.ppto tr.pp-total .pp-num{ color:var(--blue-400); }
#sec-presup table.presup-table .v-neg{ color:var(--red-400); }
/* la planilla de metrados: filas de categoría y subencabezado con tokens, las
   celdas calculadas sin fondo, y el campo editable con el estilo estándar de
   campo: nada de fondo amarillo (G02) */
#sec-presup table.ppto td{ padding:4px 8px; }
#sec-presup table.ppto tr.pp-cat td{ background:var(--blue-50); color:var(--gray-9); font-weight:700; font-size:12px; text-transform:none; letter-spacing:0; }
#sec-presup table.ppto tr.pp-sub td{ background:var(--prf-fondo-suave); color:var(--gray-6); font-weight:600; font-style:normal; }
#sec-presup table.ppto .pp-calc{ background:none; color:var(--gray-9); font-weight:600; }
#sec-presup table.ppto input{ font-size:12px; background:var(--gray-1); color:var(--gray-9); border:1px solid var(--gray-3); border-radius:6px; padding:4px 6px; }
#sec-presup table.ppto input:focus{ border-color:var(--blue-300); background:var(--gray-1); box-shadow:0 0 0 2px var(--blue-50); }
#sec-presup table.ppto input[readonly]{ background:transparent; border-color:transparent; color:var(--gray-7); box-shadow:none; }
#sec-presup .ppto-tools{ margin:0; gap:8px; }

/* ── Oscuro: las superficies siguen --bg-card; los textos, --text ── */
:root[data-theme="dark"] #sec-presup .prf-vista,
:root[data-theme="dark"] #sec-presup .prf-b-cab h3,
:root[data-theme="dark"] #sec-presup .prf-kpis .kpi-value,
:root[data-theme="dark"] #sec-presup table.presup-table td,
:root[data-theme="dark"] #sec-presup table.ppto td,
:root[data-theme="dark"] #sec-presup .prf-cab-h{ color:var(--text) !important; }
:root[data-theme="dark"] #sec-presup .prf-cab-sub,
:root[data-theme="dark"] #sec-presup .prf-cab-meta,
:root[data-theme="dark"] #sec-presup .prf-b-sub,
:root[data-theme="dark"] #sec-presup .prf-kpis .kpi-label,
:root[data-theme="dark"] #sec-presup .prf-kpis .kpi-sublabel{ color:var(--text-muted) !important; }
:root[data-theme="dark"] #sec-presup table.presup-table th,
:root[data-theme="dark"] #sec-presup table.ppto th,
:root[data-theme="dark"] #sec-presup table.ppto input{ background:var(--bg-card); color:var(--text-muted); }
:root[data-theme="dark"] #sec-presup .prf-aviso{ background:color-mix(in srgb, var(--orange-400) 16%, var(--bg-card)); border-color:transparent; }

@media (max-width:1280px){
  #sec-presup .kpi-strip.prf-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1100px){
  #sec-presup .prf-dos{ grid-template-columns:minmax(0,1fr); }
  #sec-presup .prf-cab{ flex-wrap:wrap; }
  #sec-presup .prf-cab-div{ display:none; }
}
/* 446 px y menos (norma §3): encabezado primero, acción a todo el ancho (M07),
   textos ≥ 12 (G04) */
@media (max-width:700px){
  #sec-presup .prf-card{ padding:16px; }
  #sec-presup .kpi-strip.prf-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #sec-presup .prf-kpis .kpi-card{ padding:16px; }
  #sec-presup .prf-kpis .kpi-value{ font-size:20px; }
  #sec-presup .prf-cab{ flex-direction:column; align-items:stretch; text-align:center; }
  #sec-presup .prf-btn{ width:100%; }
  #sec-presup .prf-tabs{ justify-content:center; }
  #sec-presup .prf-tabla{ max-height:70dvh; }
}
@media (pointer:coarse){
  #sec-presup .prf-btn, #sec-presup .rfi-btn, #sec-presup .tbl-xlsx-btn{ min-height:44px; }
  #sec-presup .prf-tabs .presup-subtab{ min-height:44px; }
}
/* Capa móvil (html.mv): las tarjetas que compone movil/hojas.js dentro de esta
   sección traen rótulos a 9,5–11,5 px y en mayúsculas. Se suben a 12 y a tipo
   oración SOLO aquí (G01, G04); el arreglo de fondo es de la capa compartida. */
html.mv #sec-presup .mv-eyebrow,
html.mv #sec-presup .mv-calc-cuenta,
html.mv #sec-presup .mv-calc-cuenta b,
html.mv #sec-presup .mv-calc-meta{ font-size:12px !important; text-transform:none !important; letter-spacing:0 !important; }
html.mv #sec-presup .rfi-draft-badge{ font-size:12px; }

/* M04 · las cinco cifras en carril en el teléfono, con su indicador de
   puntos (el carril de la capa: .mv-carril, y sus .mv-puntos). Gana al
   comodín html.mv .scroll-area [class*="kpi"], que las pondría en rejilla. */
#sec-presup .prf-puntos{ display:none; }
html.mv #sec-presup .prf-puntos{ display:flex; margin:-8px 0 0; }
html.mv #sec-presup .kpi-strip.prf-kpis{ display:flex !important; grid-template-columns:none !important; gap:10px;
  overflow-x:auto; scrollbar-width:none; padding:2px 14px 6px; margin:0 -14px; scroll-snap-type:x mandatory;
  scroll-padding-inline:14px; overscroll-behavior-x:contain; }
html.mv #sec-presup .kpi-strip.prf-kpis::-webkit-scrollbar{ width:0; height:0; }
html.mv #sec-presup .prf-kpis .kpi-card{ flex:0 0 78%; max-width:320px; scroll-snap-align:start; }
html.mv #sec-presup .prf-kpis .kpi-label{ letter-spacing:0 !important; font-size:12px !important; }