/* ═══════════════════════════════════════════════════════════════════════
   INFORMACIÓN CONTRACTUAL (#sec-infocon) · Operaciones, 28/09/2026
   ───────────────────────────────────────────────────────────────────────
   Una entrada del menú con cuatro pestañas: Dashboard · Presupuesto ·
   Contrato · APU's (pedido de Fabrizio: «veo muchas pestañas en la parte
   lateral»). Presupuesto y APU's traen su pantalla tal cual —sus hojas siguen
   siendo presup.css y apus.css, acotadas a #sec-presup y #sec-apus, que ahora
   son paneles de esta sección—; esta hoja viste lo que es del bloque:
     cabecera (G12)       → tarjeta blanca, título + descripción, como la de
                            Personal; lleva `section-header` (el botón «Guía»
                            y los recorridos la buscan) y aquí se neutraliza
                            el estilo global de esa clase y su barra ::before;
     pestañas (D03)       → el patrón de Presupuestos / Cronograma (759:1245),
                            en su propia barra blanca, deslizable en el teléfono;
     Contrato (#sec-contrato) → el registro del contrato vigente, con las
                            piezas de la norma: encabezado de bloque, fichas
                            de dato (G08), tarjetas hermanas (G11), tabla con
                            scroll interno (G21).
   Norma: G01 sin mayúsculas · G02 solo tokens de tokens.css · G04 ≥ 12 px en
   el teléfono · G05 botones pastilla con icono · G11 sin tarjetas anidadas.
   ═══════════════════════════════════════════════════════════════════════ */

#sec-infocon{
  --ic-sup: var(--bg-card, var(--gray-1));
  --ic-sombra: 0 1px 4px color-mix(in srgb, var(--gray-9) 6%, transparent);
  --ic-filete: var(--gray-3);
  --ic-suave: var(--gray-2);
  /* ── Alto único de cabecera (C4, 01/10) ──────────────────────────────
     Lili, 12:06 del 1-oct, sobre la pantalla de APU: numeró 1-7 las franjas
     de cabecera, todas de distinta altura, y pidió «revisen las alturas de
     diagramación» porque «parece un frankenstein». Las cuatro cabeceras del
     bloque (Dashboard/Información contractual → .ic-cab, Contrato → .ctv-cab
     en esta misma hoja, Presupuesto → .prf-cab en presup.css, APU's →
     .apuf-cab en apus.css) son #sec-infocon o viven DENTRO de #sec-infocon
     (ver #sec-presup/#sec-contrato/#sec-apus como .ic-panel, en index.html),
     así que esta variable las alcanza a las cuatro por herencia de CSS sin
     que cada hoja tenga que repetir el número.
     EL VALOR: 16px de padding vertical + 28px de line-height del título
     (24px !important) + 4px de gap + 22px de line-height de la bajada =
     86px. Es el alto que YA tenían .ic-cab y .prf-cab (mismo padding y misma
     tipografía en las dos); .ctv-cab y .apuf-cab quedaban más bajas por su
     propio padding/tipografía y son las que se corrigen acá. Cambiar la
     altura del bloque entero es cambiar ESTE número, una sola vez. */
  --ic-cab-h: 86px;
}
#sec-infocon .ic-vista{ display:flex; flex-direction:column; gap:20px; min-width:0; line-height:normal; color:var(--gray-7); }
#sec-infocon .ic-vista h2, #sec-infocon .ic-vista h3, #sec-infocon .ic-vista h4, #sec-infocon .ic-vista p{ margin:0; letter-spacing:0; }
#sec-infocon .ic-panel{ min-width:0; }
#sec-infocon .ic-panel[hidden]{ display:none !important; }

/* ── Cabecera del bloque (G12) ── */
#sec-infocon .ic-cab.section-header{ font-size:inherit !important; font-weight:inherit !important; letter-spacing:0 !important;
  text-transform:none !important; margin:0 !important; color:inherit; }
#sec-infocon .ic-cab.section-header::before{ display:none !important; content:none !important; }
#sec-infocon .ic-cab{ background:var(--ic-sup); border-radius:12px; box-shadow:var(--ic-sombra);
  display:flex; align-items:center; gap:16px; padding:16px 20px; min-height:var(--ic-cab-h); box-sizing:border-box; }
#sec-infocon .ic-cab-tit{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
#sec-infocon .ic-cab-h{ font-size:24px !important; font-weight:700 !important; line-height:28px !important; color:var(--gray-9) !important; }
#sec-infocon .ic-cab-sub{ font-size:14px !important; font-weight:400 !important; line-height:22px !important; color:var(--gray-6) !important; }
/* el botón «Guía» (E140Guia), si algún día la pestaña tiene guía: pastilla secundaria */
#sec-infocon .ic-cab .e140-guia-btn{ margin-left:0; min-height:36px; padding:0 14px; font-size:13px; font-weight:600;
  color:var(--gray-7); border-color:var(--ic-filete); }

/* ── Pestañas (D03): las de Presupuestos, en su barra blanca ── */
#sec-infocon .ic-tabs{ display:flex; flex-wrap:nowrap; align-items:flex-end; gap:0; margin:0; padding:8px 20px 0;
  border-radius:12px; background:var(--ic-sup); box-shadow:var(--ic-sombra);
  overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
#sec-infocon .ic-tabs::-webkit-scrollbar{ display:none; }
#sec-infocon .ic-tab{ flex:none; border:0; background:none; box-shadow:inset 0 -2px 0 var(--ic-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; white-space:nowrap; }
#sec-infocon .ic-tab:not(.active):hover{ color:var(--gray-7); }
#sec-infocon .ic-tab.active{ color:var(--blue-300); font-weight:600; box-shadow:inset 0 -2px 0 var(--blue-300); }
#sec-infocon .ic-tab:focus-visible{ outline:2px solid var(--blue-300); outline-offset:-2px; }

/* ── Aviso de una pestaña que la obra todavía no tiene ── */
#sec-infocon #icEnConstruccion .dossier-placeholder{ margin:0; }

/* ═══ CONTRATO (#sec-contrato) ═══════════════════════════════════════ */
#sec-contrato .ctv-vista{ display:flex; flex-direction:column; gap:20px; min-width:0; }
#sec-contrato .ctv-cab, #sec-contrato .ctv-card, #sec-contrato .ctv-dato{
  background:var(--ic-sup); border-radius:12px; box-shadow:var(--ic-sombra); min-width:0; }
#sec-contrato .ctv-cab{ display:flex; align-items:center; gap:16px; padding:16px 20px; min-height:var(--ic-cab-h); box-sizing:border-box; }
#sec-contrato .ctv-cab-tit{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
#sec-contrato .ctv-cab-h{ font-size:18px; font-weight:700; line-height:24px; color:var(--gray-9); }
#sec-contrato .ctv-cab-sub{ font-size:14px; line-height:22px; color:var(--gray-6); }
#sec-contrato .ctv-btn, #sec-contrato .ctv-btn-sec{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:8px 18px; border-radius:100px; font:600 14px/normal 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }
#sec-contrato .ctv-btn{ border:1px solid var(--blue-300); background:var(--blue-300); color:var(--gray-1); }
#sec-contrato .ctv-btn-sec{ align-self:flex-start; border:1px solid var(--blue-300); background:var(--blue-50); color:var(--blue-300); }
#sec-contrato .ctv-btn svg{ width:16px; height:16px; flex:none; }
#sec-contrato .ctv-btn:hover, #sec-contrato .ctv-btn-sec:hover{ filter:brightness(.95); }
#sec-contrato .ctv-btn:focus-visible, #sec-contrato .ctv-btn-sec:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
#sec-contrato .ctv-quien{ flex:0 1 260px; font-size:12px; line-height:18px; color:var(--gray-6); }
#sec-contrato .ctv-quien b{ color:var(--gray-7); font-weight:600; }

/* fichas de dato (G08): inicio, plazo, fin y monto */
#sec-contrato .ctv-ficha{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
#sec-contrato .ctv-dato{ display:flex; flex-direction:column; gap:6px; padding:20px; }
#sec-contrato .ctv-et{ font-size:12px; font-weight:600; color:var(--gray-6); }
#sec-contrato .ctv-val{ font-size:20px; font-weight:700; line-height:1.25; color:var(--gray-9); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#sec-contrato .ctv-nota{ font-size:12px; color:var(--gray-6); }
#sec-contrato .ctv-falta{ font-size:13px; font-weight:500; color:var(--gray-5); }
#sec-contrato .ctv-dato .ctv-falta{ font-size:14px; }

/* tarjetas de bloque (G09, G11) */
#sec-contrato .ctv-dos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#sec-contrato .ctv-card{ display:flex; flex-direction:column; gap:16px; padding:24px; }
#sec-contrato .ctv-b-cab{ display:flex; flex-direction:column; gap:4px; }
#sec-contrato .ctv-b-cab h4{ font-size:16px; font-weight:600; color:var(--gray-7); }
#sec-contrato .ctv-b-sub{ font-size:12px; line-height:1.5; color:var(--gray-6); }
#sec-contrato .ctv-lista{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 20px; margin:0; font-size:13px; }
#sec-contrato .ctv-lista dt{ color:var(--gray-6); }
#sec-contrato .ctv-lista dd{ margin:0; font-weight:500; color:var(--gray-9); overflow-wrap:anywhere; }
#sec-contrato .ctv-nota-p{ font-size:12px; line-height:18px; color:var(--gray-6); }
#sec-contrato .ctv-nota-p b{ color:var(--gray-7); font-weight:600; }

/* hitos: tabla con scroll interno (G21) */
#sec-contrato .ctv-tabla{ max-height:min(62vh, 560px); overflow:auto; border:1px solid var(--ic-filete); border-radius:8px; }
#sec-contrato .ctv-t{ width:100%; border-collapse:collapse; font-size:12px; }
#sec-contrato .ctv-t th{ position:sticky; top:0; z-index:1; background:var(--ic-suave); color:var(--gray-6); font-size:12px; font-weight:600;
  text-align:left; text-transform:none; letter-spacing:0; padding:10px 12px; border-bottom:1px solid var(--ic-filete); white-space:nowrap; }
/* la descarga a Excel que la plataforma cuelga de cada tabla: arriba, quieta al deslizar */
#sec-contrato .ctv-tabla > .tbl-tools{ position:sticky; left:0; padding:8px 12px 0; margin:0; }
#sec-contrato .ctv-t td{ padding:10px 12px; border-bottom:1px solid var(--ic-filete); color:var(--gray-7); vertical-align:top; }
#sec-contrato .ctv-t tr:last-child td{ border-bottom:0; }
#sec-contrato .ctv-t .ctv-n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* avisos y estados vacíos */
#sec-contrato .ctv-avisos{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--gray-7); }
#sec-contrato .ctv-vacio{ font-size:13px; line-height:20px; color:var(--gray-6); }
#sec-contrato .ctv-vacio-card{ padding:32px; }
#sec-contrato .ctv-vacio-h{ font-size:16px; font-weight:600; color:var(--gray-9); }
#sec-contrato .ctv-pasos{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:20px; color:var(--gray-7); }
#sec-contrato .ctv-pasos a{ color:var(--blue-300); font-weight:600; }
#sec-contrato .ctv-aviso-card{ background:color-mix(in srgb, var(--orange-400) 10%, var(--ic-sup)); }

/* ── Tema oscuro ── */
:root[data-theme="dark"] #sec-infocon .ic-cab-h,
:root[data-theme="dark"] #sec-contrato .ctv-cab-h,
:root[data-theme="dark"] #sec-contrato .ctv-val,
:root[data-theme="dark"] #sec-contrato .ctv-lista dd,
:root[data-theme="dark"] #sec-contrato .ctv-vacio-h,
:root[data-theme="dark"] #sec-contrato .ctv-b-cab h4,
:root[data-theme="dark"] #sec-contrato .ctv-t td,
:root[data-theme="dark"] #sec-contrato .ctv-pasos,
:root[data-theme="dark"] #sec-contrato .ctv-avisos{ color:var(--text) !important; }
:root[data-theme="dark"] #sec-infocon .ic-cab-sub,
:root[data-theme="dark"] #sec-infocon .ic-tab:not(.active),
:root[data-theme="dark"] #sec-contrato .ctv-cab-sub,
:root[data-theme="dark"] #sec-contrato .ctv-et,
:root[data-theme="dark"] #sec-contrato .ctv-nota,
:root[data-theme="dark"] #sec-contrato .ctv-nota-p,
:root[data-theme="dark"] #sec-contrato .ctv-b-sub,
:root[data-theme="dark"] #sec-contrato .ctv-lista dt,
:root[data-theme="dark"] #sec-contrato .ctv-vacio{ color:var(--text-muted) !important; }
:root[data-theme="dark"] #sec-contrato .ctv-t th{ background:var(--bg-card); color:var(--text-muted); }

/* ── Anchos ── */
@media (max-width:1280px){
  #sec-contrato .ctv-ficha{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px){
  #sec-contrato .ctv-dos{ grid-template-columns:minmax(0,1fr); }
}
/* 446 px y menos (norma §3): encabezado primero, acción a todo el ancho (M07) */
@media (max-width:700px){
  #sec-infocon .ic-vista, #sec-contrato .ctv-vista{ gap:16px; }
  #sec-infocon .ic-cab{ padding:16px; }
  #sec-infocon .ic-cab-h{ font-size:20px !important; line-height:26px !important; }
  #sec-infocon .ic-tabs{ padding:4px 12px 0; }
  #sec-infocon .ic-tab{ padding:8px 10px; font-size:15px; }
  #sec-contrato .ctv-cab{ flex-direction:column; align-items:stretch; padding:16px; }
  #sec-contrato .ctv-btn{ width:100%; }
  #sec-contrato .ctv-quien{ flex:none; }
  #sec-contrato .ctv-ficha{ gap:12px; }
  #sec-contrato .ctv-dato{ padding:16px; }
  #sec-contrato .ctv-val{ font-size:17px; }
  #sec-contrato .ctv-card{ padding:16px; }
  #sec-contrato .ctv-vacio-card{ padding:20px 16px; }
  #sec-contrato .ctv-tabla{ max-height:70dvh; }
  #sec-contrato .ctv-t{ min-width:560px; }
}
@media (max-width:420px){
  /* las cuatro pestañas caben a 390 sin deslizar (a 360 la tira se desliza) */
  #sec-infocon .ic-tabs{ padding:4px 8px 0; }
  #sec-infocon .ic-tab{ padding:8px 8px; font-size:14px; }
  #sec-contrato .ctv-ficha{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  /* el monto va a todo el ancho: partido en dos líneas no se lee */
  #sec-contrato .ctv-ficha .ctv-dato:last-child{ grid-column:1 / -1; }
  #sec-contrato .ctv-ficha .ctv-dato:last-child .ctv-val{ overflow-wrap:normal; }
  #sec-contrato .ctv-lista{ grid-template-columns:minmax(0,1fr); gap:2px; }
  #sec-contrato .ctv-lista dd{ margin-bottom:8px; }
}
@media (pointer:coarse){
  #sec-infocon .ic-tab{ min-height:44px; }
  #sec-contrato .ctv-btn, #sec-contrato .ctv-btn-sec{ min-height:44px; }
}
/* Capa móvil: rótulos a 12 px como mínimo (G04). */
html.mv #sec-contrato .ctv-t{ font-size:12px; }

/* ═══ «ABRIR ARCHIVO» (28/09) ════════════════════════════════════════
   El original de cada carga queda en Documentación referencial y se abre
   desde su pestaña: Contrato (ficha «Documento»), Presupuesto (cabecera) y
   APU's (lista plegable «Archivos de la carga»). Mismo botón en las tres:
   pastilla secundaria con icono (G05), 12 px como mínimo (G04). */
#sec-infocon .carga-abrir{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  min-height:28px; padding:3px 12px; margin-left:4px; border-radius:100px; border:1px solid var(--blue-300);
  background:var(--blue-50); color:var(--blue-300); font:600 12px/normal 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }
#sec-infocon .carga-abrir svg{ width:14px; height:14px; flex:none; }
#sec-infocon .carga-abrir:hover{ filter:brightness(.95); }
#sec-infocon .carga-abrir:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
#sec-contrato .ctv-lista dd .ctv-nota{ display:block; margin-top:4px; font-weight:400; }
#sec-apus .carga-archivos{ margin-top:6px; font-size:12px; line-height:18px; color:var(--gray-6); }
#sec-apus .carga-archivos summary{ cursor:pointer; font-weight:600; color:var(--gray-7); }
#sec-apus .carga-archivos .carga-donde{ font-weight:400; color:var(--gray-6); }
#sec-apus .carga-archivos ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; max-height:240px; overflow:auto; }
#sec-apus .carga-archivos li{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
#sec-apus .carga-archivos .carga-nombre{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gray-7); }
#sec-apus .carga-archivos .carga-sin{ flex:none; font-style:italic; }
@media (pointer:coarse){ #sec-infocon .carga-abrir{ min-height:44px; } }
:root[data-theme="dark"] #sec-apus .carga-archivos summary,
:root[data-theme="dark"] #sec-apus .carga-archivos .carga-nombre{ color:var(--text) !important; }