/* =========================================================
   Control de Dique · Rev. 3 — paleta corporativa blanco y negro.
   Rojo solo para alertas (atrasos, sobrecostos, datos faltantes);
   ámbar para lo pendiente de aprobar. Las fases del cronograma
   son el único lugar con color.
   ========================================================= */
:root {
  color-scheme: light;
  --bg: #f3f3f3; --surface: #ffffff; --surface-2: #f7f7f7; --border: #e0e0e0;
  --ink: #0a0a0a; --ink-2: #474747; --ink-3: #6e6e6e; --inv: #ffffff;
  --head: #0a0a0a; --head-ink: #ffffff; --track: #e8e8e8;
  --alert: #c62828; --alert-t: #b3261e; --alert-soft: #fdecea;
  --warn-t: #9a5b00; --warn-soft: #fff4dc; --ok-t: #1b6e37; --ok-soft: #e6f4ea;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000; --surface: #111; --surface-2: #181818; --border: #2b2b2b;
    --ink: #f5f5f5; --ink-2: #c2c2c2; --ink-3: #8f8f8f; --inv: #111;
    --head: #1d1d1d; --track: #2a2a2a;
    --alert: #ef5350; --alert-t: #ff7a74; --alert-soft: #3a1513;
    --warn-t: #fbbf24; --warn-soft: #33270b; --ok-t: #4ade80; --ok-soft: #10301b;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000; --surface: #111; --surface-2: #181818; --border: #2b2b2b;
  --ink: #f5f5f5; --ink-2: #c2c2c2; --ink-3: #8f8f8f; --inv: #111;
  --head: #1d1d1d; --track: #2a2a2a;
  --alert: #ef5350; --alert-t: #ff7a74; --alert-soft: #3a1513;
  --warn-t: #fbbf24; --warn-soft: #33270b; --ok-t: #4ade80; --ok-soft: #10301b;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
svg { display: block; }
a { color: inherit; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 15px; height: 15px; stroke-width: 2; }
.t-alert { color: var(--alert-t); }
.t-warn { color: var(--warn-t); }
.muted { color: var(--ink-3); }
.sm { font-size: 12px; }
.b { font-weight: 700; }
.nw { white-space: nowrap; }

/* ---------- Cabecera ---------- */
.hero { background: linear-gradient(110deg, #000 0%, #000 45%, #1c1c1c 100%); color: #fff; padding: 12px 24px 14px; border-bottom: 1px solid #2b2b2b; }
.hero-inner, .voyage { max-width: 1480px; margin: 0 auto; }
.hero-inner { display: flex; gap: 20px; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; background: #fff; color: #0a0a0a; border-radius: 10px; padding: 9px 14px; flex: none; }
.brand .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.brand b { display: block; font-size: 14px; letter-spacing: .04em; }
.brand .rev { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #555; }
.hero-text { flex: 1; min-width: 0; }
.hero h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; }
.hero p { margin: 2px 0 0; color: rgba(255,255,255,.75); font-size: 13.5px; }
.updated { flex: none; text-align: right; }
.updated small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.updated b { font-size: 15px; }

/* Buque en el cronograma (resumido) */
.voyage { margin-top: 8px; }
.voyage:empty { display: none; }
.vy { display: flex; align-items: flex-end; gap: 26px; }
.vy-track { position: relative; flex: 1; min-width: 0; padding-top: 60px; }
.vy-sea { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); }
.vy-sea .vb { position: absolute; top: 2px; height: 8px; border-radius: 4px; background: var(--c); opacity: .9; }
.vy-sea .vb.act { opacity: 1; background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 55%, #fff) 3px 6px); z-index: 1; }
.vy-sea .vb.act.late { background: repeating-linear-gradient(135deg, #ef5350 0 3px, rgba(239,83,80,.35) 3px 6px); }
.vy-sea .vh { position: absolute; top: 1px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: #000; border: 1.5px solid #fff; z-index: 2; }
.vy-sea .vh.ok { background: #fff; }
.vy-sea .vh.late { background: #ef5350; border-color: #ff8a80; }
.vy-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: #fff; z-index: 3; }
.vy-ends { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: rgba(255,255,255,.5); }
.vy-ship { position: absolute; top: 0; width: 0; height: 60px; z-index: 4; transition: left 1.8s cubic-bezier(.25,.7,.2,1); }
.vy-tag { position: absolute; top: 0; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: #0a0a0a; background: #fff; border-radius: 999px; padding: 2px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.vy-tag b { font-weight: 800; }
.vy-ship.l .vy-tag { transform: translateX(-14%); }
.vy-ship.r .vy-tag { transform: translateX(-86%); }
.vy-boat { position: absolute; top: 22px; left: 0; width: 104px; height: 35px; overflow: visible; transform: translateX(-50%); animation: vy-bob 3.4s ease-in-out infinite; }
.vy-boat .h { fill: #fff; stroke: #0a0a0a; stroke-width: .9; stroke-linejoin: round; }
.vy-boat .d { fill: #0a0a0a; }
.vy-boat .hull-b { fill: #d32f2f; }
.vy-boat .fun { fill: #fbbf24; }
.vy-boat .dl { fill: none; stroke: #0a0a0a; stroke-width: 1.6; stroke-linecap: round; }
.vy-boat .hl { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.vy-wake { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 6 5; animation: vy-wake 1.1s linear infinite; }
@keyframes vy-bob { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 50% { transform: translateX(-50%) translateY(1.4px) rotate(-.7deg); } }
@keyframes vy-wake { to { stroke-dashoffset: -22; } }
.vy-info { flex: none; width: 300px; display: grid; gap: 8px; margin-bottom: 14px; }
.vy-info .vi { display: flex; gap: 8px; align-items: flex-start; }
.vy-info .vi .ic { margin-top: 2px; color: rgba(255,255,255,.7); }
.vy-info small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vy-info b { display: block; font-size: 13px; line-height: 1.2; }
.vy-info span { font-size: 12px; color: rgba(255,255,255,.75); }
.v-late { font-style: normal; font-weight: 700; color: #ff8a80; }

/* Colores de fase (cronograma) */
.k-plan { --c: #a78bfa; } .k-pre { --c: #38bdf8; } .k-tras { --c: #cbd5e1; } .k-dique { --c: #fbbf24; } .k-post { --c: #34d399; } .k-otra { --c: #9ca3af; }

/* ---------- Pestañas ---------- */
.tabs-wrap { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.tabs-bar { max-width: 1480px; margin: 0 auto; padding: 0 24px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--ink-3); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; }
.tab .ic { width: 18px; height: 18px; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.badge { font-size: 11px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; color: var(--ink-2); }

/* ---------- Contenido ---------- */
main { max-width: 1480px; margin: 0 auto; padding: 16px 24px; display: grid; gap: 14px; }
.notice { max-width: 1480px; margin: 12px auto 0; padding: 10px 14px; border-radius: 10px; background: var(--alert-soft); color: var(--alert-t); font-weight: 600; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-h small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.empty { padding: 18px 14px; color: var(--ink-3); text-align: center; }
.empty.sm { padding: 8px 14px; text-align: left; font-size: 12.5px; }
h2.sec { margin: 6px 0 -4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* KPIs */
.kpis { display: grid; gap: 10px; }
.kpis.k8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.kpis.k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { display: flex; gap: 10px; align-items: flex-start; padding: 12px; }
.kpi > .ic { width: 28px; height: 28px; margin-top: 2px; }
.kpi .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.kpi .val { font-size: 21px; font-weight: 800; line-height: 1.2; margin: 1px 0; white-space: nowrap; }
.kpi .sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.kpi.alert { border-color: var(--alert); }
.kpi.alert .val { color: var(--alert-t); }
.kpi.warn { border-color: var(--warn-t); background: linear-gradient(var(--warn-soft), var(--warn-soft)) top / 100% 4px no-repeat, var(--surface); }
.kpi.warn .val, .kpi.warn > .ic { color: var(--warn-t); }
.kpi .sub .chip { margin: 0 4px 2px 0; white-space: normal; }

.row-b { display: grid; grid-template-columns: 1.65fr 1fr; gap: 14px; align-items: start; }
.stack { display: grid; gap: 14px; min-width: 0; }

/* Participación del equipo: semáforo (único lugar, junto con las fases del cronograma, con colores propios) */
:root { --sem-verde: #15803d; --sem-amarillo: #a16207; --sem-rojo: #b91c1c; --sem-verde-s: #dcfce7; --sem-amarillo-s: #fef3c7; --sem-rojo-s: #fee2e2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sem-verde: #4ade80; --sem-amarillo: #facc15; --sem-rojo: #f87171; --sem-verde-s: #0f2e1a; --sem-amarillo-s: #33290a; --sem-rojo-s: #3a1513; } }
:root[data-theme="dark"] { --sem-verde: #4ade80; --sem-amarillo: #facc15; --sem-rojo: #f87171; --sem-verde-s: #0f2e1a; --sem-amarillo-s: #33290a; --sem-rojo-s: #3a1513; }
.sem-alto { --sem: var(--sem-verde); --sem-s: var(--sem-verde-s); }
.sem-medio { --sem: var(--sem-amarillo); --sem-s: var(--sem-amarillo-s); }
.sem-bajo { --sem: var(--sem-rojo); --sem-s: var(--sem-rojo-s); }
.kpi.sem { border-color: var(--sem, var(--border)); border-left: 5px solid var(--sem, var(--border)); }
.kpi.sem .val, .kpi.sem > .ic { color: var(--sem, var(--ink)); }
.sem-chip { display: inline-block; vertical-align: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; color: var(--sem); background: var(--sem-s); }
.sem-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: var(--sem); background: var(--sem-s); }
.sem-pill .ic { width: 13px; height: 13px; }
.sbar { display: inline-block; width: 100%; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 4px; background: var(--sem, var(--ink)); }
.pc-list { display: grid; }
.pc-row { padding: 9px 14px; border-bottom: 1px solid var(--border); border-left: 4px solid var(--sem, transparent); }
.pc-row:last-child { border-bottom: 0; }
.pc-nm b { display: block; font-size: 13px; }
.pc-nm small { display: block; font-size: 11.5px; color: var(--ink-3); }
.pc-bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 5px; }
.pc-bar b { font-size: 15px; font-weight: 800; color: var(--sem); min-width: 42px; text-align: right; }
.pc-det > summary { cursor: pointer; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; list-style: none; }
.pc-det > summary::-webkit-details-marker { display: none; }
.pc-det > summary::before { content: "▸ "; }
.pc-det[open] > summary::before { content: "▾ "; }
.pc-weeks { display: grid; gap: 3px; margin-top: 6px; }
.pc-head, .pc-vals { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34px, 1fr); gap: 4px; }
.pc-head i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-3); text-align: center; line-height: 1.15; }
.pc-head i small { display: block; font-size: 9px; font-weight: 500; }
.pc-cell { display: flex; justify-content: center; gap: 3px; padding: 3px 0; border-radius: 6px; background: var(--surface-2); font-size: 11px; font-weight: 800; cursor: default; }
.pc-cell i { font-style: normal; }
.pc-ok { color: var(--sem-verde); } .pc-no { color: var(--sem-rojo); } .pc-na { color: var(--ink-3); }
.pc-a2 { color: var(--sem-verde); } .pc-a1 { color: var(--sem-amarillo); } .pc-a0 { color: var(--sem-rojo); }
.pc-ley { margin-top: 5px; font-size: 10.5px; color: var(--ink-3); }

/* Chips y barras */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok-t); }
.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-t); }
.chip.alert { background: var(--alert-soft); border-color: transparent; color: var(--alert-t); }
.pbar { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--track); vertical-align: 1px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }

/* Centros de costo desplegables */
.cc-table { font-size: 13px; }
.cc-head, .cc-g > summary, .cc > summary, .cc-line, .cc-total { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 98px) 96px; gap: 8px; align-items: center; padding: 8px 14px; }
.cc-head { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--border); }
.cc-table .n { text-align: right; white-space: nowrap; }
.cc-table .st { text-align: right; }
.cc-table .nm { min-width: 0; }
.cc-table .nm small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; }
.cc-table summary { cursor: pointer; list-style: none; }
.cc-table summary::-webkit-details-marker { display: none; }
.cc-g > summary { background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 800; }
.cc-g > summary .nm::before, .cc > summary .nm::before { content: "▸"; display: inline-block; width: 14px; color: var(--ink-3); transition: transform .15s; }
.cc-g[open] > summary .nm::before, .cc[open] > summary .nm::before { transform: rotate(90deg); }
.cc-g > summary .nm small, .cc > summary .nm small { padding-left: 14px; }
.cc > summary { border-bottom: 1px solid var(--border); padding-left: 28px; }
.cc > summary:hover, .cc-g > summary:hover { background: var(--surface-2); }
.cc-lines { background: var(--bg); border-bottom: 1px solid var(--border); }
.cc-line { padding: 6px 14px 6px 56px; font-size: 12.5px; border-top: 1px dashed var(--border); }
.cc-line:first-child { border-top: 0; }
.cc-total { font-weight: 800; border-top: 2px solid var(--ink); }

/* Listas */
.list .li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.list .li:last-child { border-bottom: 0; }
.list .li b { display: block; font-size: 13px; }
.list .li small { display: block; font-size: 11.5px; color: var(--ink-3); }
.sub-h { padding: 8px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Resumen por área */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.area { display: grid; gap: 12px; padding: 14px; text-decoration: none; transition: border-color .15s; }
.area:hover { border-color: var(--ink-3); }
.area-h { display: flex; align-items: center; gap: 8px; }
.area-h b { font-size: 16px; }
.area-h small { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.area-pt { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 10px; row-gap: 2px; }
.area-pt > small:first-child { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.area-pt > b { font-size: 18px; font-weight: 800; color: var(--sem); }
.area-pt .det { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }
.area-av { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.area-av .big { font-size: 24px; font-weight: 800; grid-row: span 2; }
.area-av .pbar { width: 100%; height: 8px; }
.area-av small { font-size: 11.5px; color: var(--ink-3); }
.area-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.area-c small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.area-c b { font-size: 14px; white-space: nowrap; }
.area-f { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tablas de trabajos */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; height: 34px; background: var(--surface-2); flex: 0 1 320px; }
.search .ic { width: 16px; height: 16px; color: var(--ink-3); }
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); width: 100%; }
.search:focus-within { border-color: var(--ink); }
.grp > summary { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; cursor: pointer; background: var(--surface-2); border-bottom: 1px solid var(--border); list-style: none; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s; }
.grp[open] > summary::before { transform: rotate(90deg); }
.grp > summary span { font-size: 12px; color: var(--ink-3); }
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tbl th { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tbl .n { text-align: right; white-space: nowrap; }
.tbl td small { display: block; font-size: 11px; color: var(--ink-3); }
.tbl tr.cancel td { opacity: .5; text-decoration: line-through; }

/* Cronograma (vista completa) */
.card.dark { background: #0a0a0a; color: #fff; border-color: #222; }
.card.dark .card-h { border-color: #222; }
.card.dark .card-h small { color: rgba(255,255,255,.55); }
.gantt { padding: 6px 14px 12px; }
.g-lane { display: flex; align-items: stretch; }
.g-ln { flex: none; width: 112px; padding-right: 10px; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.g-ln b { font-size: 12px; }
.g-ln small { font-size: 10px; color: rgba(255,255,255,.5); }
.g-lt { position: relative; flex: 1; min-width: 0; height: 34px; border-top: 1px solid rgba(255,255,255,.08); }
.g-lane.top .g-lt { height: 22px; border: 0; }
.g-lane.axis .g-lt { height: 22px; border-top-color: rgba(255,255,255,.2); }
.g-lane.mls .g-lt { height: 32px; border: 0; }
.g-today { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; font-weight: 700; background: #fff; color: #0a0a0a; border-radius: 999px; padding: 1px 8px; white-space: nowrap; z-index: 8; }
.g-lt .bar { position: absolute; top: 8px; height: 16px; border-radius: 4px; background: var(--c); overflow: hidden; z-index: 1; font-style: normal; }
.g-lt .bar b { display: block; padding: 0 6px; font-size: 11px; font-weight: 800; line-height: 16px; color: #0a0a0a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lt .bar.thin { top: 2px; height: 5px; z-index: 2; border-radius: 2px; background: color-mix(in srgb, var(--c) 75%, #fff); }
.g-lt .bar.over { box-shadow: 0 0 0 1.5px #ef5350; }
.g-lt .base { position: absolute; top: 27px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.55); }
.g-lt .atr { position: absolute; top: 8px; height: 16px; z-index: 3; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(135deg, #ef5350 0 3px, rgba(239,83,80,.25) 3px 6px); box-shadow: inset 0 0 0 1px #ef5350; }
.g-lt .atr.thin { top: 2px; height: 5px; }
.g-lt .dly { position: absolute; top: 8px; margin-left: 5px; z-index: 4; font-size: 11px; font-weight: 800; color: #ff8a80; white-space: nowrap; }
.g-lt .hd { position: absolute; top: 10.5px; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg); background: #000; border: 1.5px solid #fff; z-index: 5; }
.g-lt .hd.ok { background: #fff; }
.g-lt .hd.late { background: #ef5350; border-color: #ff8a80; }
.g-lt .hg { position: absolute; top: 12px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); border: 1.5px dashed rgba(255,255,255,.7); z-index: 4; }
.g-lt .hc { position: absolute; top: 16px; border-top: 1.5px dashed rgba(255,255,255,.5); z-index: 4; }
.g-lt .hc.late { border-top-color: #ef5350; }
.g-lt .veil { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,.4); z-index: 6; pointer-events: none; }
.g-lt .now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; z-index: 7; pointer-events: none; }
.g-lt .tk { position: absolute; top: 0; height: 4px; width: 1px; background: rgba(255,255,255,.35); }
.g-lt .tk span { position: absolute; top: 6px; left: 0; transform: translateX(-50%); font-size: 10.5px; color: rgba(255,255,255,.55); white-space: nowrap; }
.g-lt .ml { position: absolute; transform: translateX(-50%); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.88); }
.g-lt .ml::before { content: "◆ "; font-size: 8px; vertical-align: 1px; }
.g-lt .ml.r0 { top: 1px; }
.g-lt .ml.r1 { top: 16px; }
.g-lt .ml.l { transform: none; }
.g-lt .ml.r { transform: translateX(-100%); }
.g-lt .ml.hide { display: none; }
.g-lt .ml em { font-style: normal; font-weight: 500; color: rgba(255,255,255,.55); }
.g-lt .ml.late, .g-lt .ml.late em { color: #ff8a80; }
.g-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0 112px; font-size: 11px; color: rgba(255,255,255,.6); }
.g-foot span { display: inline-flex; align-items: center; gap: 6px; }
.g-foot i { display: inline-block; }
.lg-bar { width: 16px; height: 9px; border-radius: 2px; background: #fbbf24; }
.lg-base { width: 16px; height: 2px; background: rgba(255,255,255,.55); }
.lg-late { width: 16px; height: 9px; border-radius: 2px; background: repeating-linear-gradient(135deg, #ef5350 0 3px, rgba(239,83,80,.25) 3px 6px); box-shadow: inset 0 0 0 1px #ef5350; }
.lg-h { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid #fff; background: #000; }
.lg-h.ok { background: #fff; }
.lg-h.late { background: #ef5350; border-color: #ff8a80; }

/* Tooltip */
.tip { position: fixed; z-index: 50; max-width: 320px; background: #0a0a0a; color: #fff; border: 1px solid #333; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,.35); pointer-events: none; }
.tip .row { display: flex; justify-content: space-between; gap: 14px; }
.tip .row span:first-child { color: rgba(255,255,255,.65); }
.tip .tnote { margin: 4px 0; color: rgba(255,255,255,.7); }
.tip .tnote.alert { color: #ff8a80; }
.tip .tnote.warn { color: #fbbf24; }

footer { max-width: 1480px; margin: 4px auto 0; padding: 12px 24px 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
footer a { text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vy-boat, .vy-wake { animation: none; }
  .vy-ship { transition: none; }
}
@media (max-width: 1500px) { .kpis.k8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1280px) {
  .kpis.k8, .kpis.k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.k7 > :last-child { grid-column: span 2; } /* 7 indicadores: el último ocupa el hueco (4 + 4 y en celular 2 + 2 + 2 + 2) */
  .row-b { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .brand { display: none; }
  .areas { grid-template-columns: 1fr; }
  .vy-info { width: 240px; }
}
@media (max-width: 760px) {
  .hero { padding: 12px 16px; }
  .hero h1 { font-size: 20px; }
  .vy { flex-direction: column; align-items: stretch; gap: 10px; }
  .vy-info { width: auto; grid-template-columns: 1fr 1fr; margin: 0; }
  .vy-boat { width: 80px; height: 27px; top: 31px; }
  .vy-tag { font-size: 11px; padding: 2px 8px; }
  .tabs-bar { padding: 0 8px; }
  main { padding: 12px 16px; }
  .kpis.k8, .kpis.k7, .kpis.k6 { grid-template-columns: 1fr 1fr; }
  .kpi .val { font-size: 18px; }
  .cc-head, .cc-g > summary, .cc > summary, .cc-line, .cc-total { grid-template-columns: minmax(0, 1fr) 92px; }
  .cc-table .n:nth-of-type(n+3), .cc-table .st { display: none; }
  .cc-line { padding-left: 28px; }
  .area-c { grid-template-columns: 1fr 1fr; }
  .g-ln { width: 64px; }
  .g-ln small { display: none; }
  .g-lt .bar b, .g-lt .tk.odd span { display: none; }
  .g-lane.mls { display: none; }
  .g-foot { margin-left: 0; }
  footer { padding: 12px 16px 20px; }
}

/* Logo Trader Tanker en la placa blanca del encabezado (igual que el control de Kingston Trader) */
.brand { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px 10px; }
.brand .tt-logo { display: block; width: 190px; height: auto; }
.brand .rev { font-size: 9.5px; }
/* El logo se ve siempre, también en pantallas angostas */
@media (max-width: 1000px) {
  .brand { display: flex; padding: 9px 12px 8px; }
  .brand .tt-logo { width: 150px; }
}
@media (max-width: 760px) {
  .hero-inner { flex-wrap: wrap; gap: 10px 12px; }
  .hero-inner .updated { margin-left: auto; }
  .hero-inner .hero-text { order: 3; flex: 1 1 100%; }
  .brand { padding: 8px 10px 7px; }
  .brand .tt-logo { width: 130px; }
  .brand .rev { display: none; }
}

/* Selector de fase (Todas · Pre-dique · Dique · Post-dique) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.seg button small { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--inv); }
.seg button[aria-pressed="true"] small { color: inherit; opacity: .7; }
.seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 0; flex: none; }
.seg .dot { margin-right: 0; }

/* Tablas de fases y de participación */
.tbl tfoot td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 700; }
.tbl.part td { vertical-align: middle; }
.tbl.part tbody tr td:first-child, .tbl.part tfoot tr td:first-child { box-shadow: inset 4px 0 0 var(--sem, transparent); }
.pc-cum { display: grid; grid-template-columns: minmax(40px, 1fr) 42px auto; align-items: center; gap: 8px; }
.pc-cum b { font-size: 14px; font-weight: 800; color: var(--sem); text-align: right; }
.tbl.mini td:first-child b { white-space: nowrap; }
.fase-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fase-bar > small { font-size: 12px; color: var(--ink-3); }
.tbl.part a { color: inherit; text-decoration: none; }
.tbl.part a:hover { text-decoration: underline; }

/* Avance por fase y participación: dos cuadros chicos, uno al lado del otro */
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.tbl.mini td { vertical-align: middle; padding: 8px 14px; }
.tbl.mini td:first-child { width: 42%; }
.tbl.mini tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.mini-av { display: grid; grid-template-columns: minmax(60px, 1fr) 44px; align-items: center; gap: 8px; }
.mini-av .pbar { width: 100%; height: 8px; border-radius: 4px; }
.mini-av b { text-align: right; font-weight: 800; }
@media (max-width: 760px) { .row-2 { grid-template-columns: 1fr; } }
.tbl.mini tr.fs .pbar i { background: var(--c); }
@media (max-width: 760px) { .tbl.mini td { padding: 8px 10px; } .tbl.mini td:first-child { width: 38%; } }
/* Avance por fase: una fila por fase, desplegable con sus trabajos */
.fs-list { display: grid; }
.fs { border-bottom: 1px solid var(--border); }
.fs-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(0, 1.5fr) 110px minmax(150px, 1fr); align-items: center; gap: 16px; padding: 12px 16px; }
details.fs > summary { cursor: pointer; list-style: none; position: relative; padding-left: 34px; }
details.fs > summary::-webkit-details-marker { display: none; }
details.fs > summary::before { content: "▸"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 12px; }
details.fs[open] > summary::before { content: "▾"; }
details.fs > summary:hover { background: var(--surface-2); }
details.fs.cur > summary { box-shadow: inset 3px 0 0 var(--ink); }
.fs-nm b { display: flex; align-items: center; gap: 0; font-size: 15px; white-space: nowrap; }
.fs-nm b .chip { margin-left: 8px; font-style: normal; font-size: 10.5px; }
.fs-nm small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.fs-dt { font-size: 12.5px; color: var(--ink-2); }
.fs-pr small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fs-pr b { font-size: 14px; }
.fs .mini-av .pbar i { background: var(--c); }
.fs-row .mini-av { grid-template-columns: minmax(60px, 1fr) 54px; gap: 12px; }
.fs-row .mini-av .pbar { height: 12px; border-radius: 6px; }
.fs-row .mini-av .pbar i { border-radius: 6px; }
.fs-row .mini-av b { font-size: 20px; }
.fs-tot { padding-left: 34px; border-top: 2px solid var(--border); }
.fs-tot .fs-nm b { font-size: 14px; }
.fs-tot .mini-av b { font-size: 16px; }
.fs-body { padding: 4px 16px 14px 34px; background: var(--surface-2); display: grid; gap: 10px; }
.fs-area { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.fs-ah { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 160px; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.fs-ah small { font-size: 11.5px; color: var(--ink-3); }
.fs-ah .ic.sm { width: 15px; height: 15px; }
.mini-av.sm { grid-template-columns: minmax(40px, 1fr) 40px; gap: 8px; }
.mini-av.sm .pbar { height: 6px; }
.mini-av.sm b { font-size: 12.5px; }
.fs-tbl td, .fs-tbl th { padding: 6px 12px; }
.fs-tbl td b { font-weight: 600; }
@media (max-width: 900px) {
  .fs-row { grid-template-columns: minmax(0, 1fr) minmax(110px, 160px); gap: 6px 14px; }
  .fs-row .fs-dt { grid-column: 1 / -1; order: 3; }
  .fs-row .fs-pr { display: none; }
  .fs-ah { grid-template-columns: auto auto minmax(0, 1fr); }
  .fs-ah small { grid-column: 1 / -1; order: 3; }
  .fs-ah .mini-av { grid-column: 3; }
  .fs-body { padding: 4px 10px 12px; }
}
.fs-tbl { table-layout: fixed; min-width: 560px; }
.fs-tbl th:nth-child(2) { width: 150px; } .fs-tbl th:nth-child(3) { width: 90px; } .fs-tbl th:nth-child(4) { width: 110px; } .fs-tbl th:nth-child(5) { width: 80px; }
@media (max-width: 760px) {
  .fs-tbl { min-width: 0; }
  .fs-tbl th:nth-child(n+3), .fs-tbl td:nth-child(n+3) { display: none; }
  .fs-tbl th:nth-child(2) { width: 120px; }
}

/* Programa de diques de la flota */
.pd { padding: 10px 16px 12px; }
.pd-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; min-height: 30px; }
.pd-row + .pd-row { border-top: 1px solid var(--border); }
.pd-body { position: relative; }
.pd-nv { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.pd-nv b { font-weight: 600; }
.pd-row.este .pd-nv b { font-weight: 800; }
.pd-nv .chip { font-style: normal; font-size: 10px; }
.pd-tr { position: relative; height: 30px; }
.pd-grid { position: absolute; left: 170px; right: 0; top: 0; bottom: 0; height: auto; pointer-events: none; }
.pd-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.pd-grid i.hoy { background: var(--ink-3); width: 1px; border-left: 1px dashed var(--ink-3); background: none; }
.pd-ax { min-height: 22px; border: 0 !important; }
.pd-ax .pd-tr { height: 22px; }
.pd-y, .pd-hoy { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.pd-y b { font-size: 11px; font-weight: 800; color: var(--ink-2); }
.pd-hoy b { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.pd-d { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); background: var(--ink); border: 2px solid var(--ink); border-radius: 2px; cursor: default; z-index: 2; }
.pd-d.int { background: var(--surface); }
.pd-row.este .pd-d { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.pd-man { position: absolute; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; background: var(--ink-3); }
.pd-gap { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 7px); }
.pd-lb { position: absolute; top: 50%; transform: translate(12px, -50%); font-size: 11px; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.pd-ley { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.pd-ley span { display: inline-flex; align-items: center; gap: 7px; }
.pd-ley .pd-d, .pd-ley .pd-man { position: static; margin: 0; transform: rotate(45deg); }
.pd-ley .pd-man { transform: none; }
.pd-det { border-top: 1px solid var(--border); }
.pd-det > summary { cursor: pointer; padding: 10px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
@media (max-width: 760px) {
  .pd { padding: 8px 10px 10px; }
  .pd-row { grid-template-columns: 104px minmax(0, 1fr); }
  .pd-grid { left: 104px; }
  .pd-nv { font-size: 12px; }
  .pd-nv .chip { display: none; }
  .pd-lb, .pd-hoy { display: none; }
}

/* =========================================================
   Etapas del costo: Preliminar (azul) · En revisión (ámbar) · Aprobado (verde)
   ========================================================= */
:root { --c-pre: #2563eb; --c-pre-s: #e8efff; --c-rev: #b45309; --c-rev-b: #f59e0b; --c-rev-s: #fff4dc; --c-apr: #15803d; --c-apr-b: #22c55e; --c-apr-s: #e6f4ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-pre: #60a5fa; --c-pre-s: #0f1f3d; --c-rev: #fbbf24; --c-rev-b: #f59e0b; --c-rev-s: #33270b; --c-apr: #4ade80; --c-apr-b: #22c55e; --c-apr-s: #10301b; } }
:root[data-theme="dark"] { --c-pre: #60a5fa; --c-pre-s: #0f1f3d; --c-rev: #fbbf24; --c-rev-b: #f59e0b; --c-rev-s: #33270b; --c-apr: #4ade80; --c-apr-b: #22c55e; --c-apr-s: #10301b; }
.t-pre { color: var(--c-pre); } .t-rev { color: var(--c-rev); } .t-apr { color: var(--c-apr); }
.kpi.c-pre, .kpi.c-rev, .kpi.c-apr { border-top: 3px solid var(--k); }
.kpi.c-pre { --k: var(--c-pre); } .kpi.c-rev { --k: var(--c-rev-b); } .kpi.c-apr { --k: var(--c-apr-b); }
.kpi.c-pre .val, .kpi.c-pre > .ic { color: var(--c-pre); }
.kpi.c-rev .val, .kpi.c-rev > .ic { color: var(--c-rev); }
.kpi.c-apr .val, .kpi.c-apr > .ic { color: var(--c-apr); }
.kpi .sub .stk { margin: 5px 0 4px; }
.kpi .sub > span:not(.stk):not(.chip) { display: block; }
.stk { display: flex; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--track); }
.stk.sm { height: 5px; margin-top: 4px; max-width: 160px; }
.stk i { display: block; height: 100%; }
.s-apr { background: var(--c-apr-b); } .s-rev { background: var(--c-rev-b); } .s-pre { background: var(--c-pre); }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.chip.et-aprobado { background: var(--c-apr-s); border-color: transparent; color: var(--c-apr); }
.chip.et-revision { background: var(--c-rev-s); border-color: transparent; color: var(--c-rev); }
.chip.et-preliminar { background: var(--c-pre-s); border-color: transparent; color: var(--c-pre); }
.area-c .area-stk { grid-column: 1 / -1; height: 6px; }
.cc-table .nm .stk.sm { margin-top: 5px; }
.kpis.k9 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cc-head, .cc-g > summary, .cc > summary, .cc-line, .cc-total { grid-template-columns: minmax(0, 1fr) repeat(6, 92px) 110px; }
@media (max-width: 1100px) {
  .cc-head, .cc-g > summary, .cc > summary, .cc-line, .cc-total { grid-template-columns: minmax(0, 1fr) repeat(6, 74px) 100px; gap: 6px; }
  .cc-table { font-size: 12px; }
}
@media (max-width: 760px) {
  .cc-table .n:nth-of-type(3), .cc-table .n:nth-of-type(4) { display: block; } /* preliminar, en revisión y aprobado */
  .cc-table .n:nth-of-type(n+5), .cc-table .st { display: none; }
}
@media (max-width: 760px) {
  .cc-head, .cc-g > summary, .cc > summary, .cc-line, .cc-total { grid-template-columns: minmax(0, 1fr) repeat(3, 62px); gap: 6px; padding-left: 10px; padding-right: 10px; }
  .cc-table { font-size: 11.5px; }
  .cc > summary { padding-left: 18px; } .cc-line { padding-left: 22px; }
}
@media (max-width: 760px) {
  .cc-head, .cc-g > summary, .cc > summary, .cc-line, .cc-total { grid-template-columns: minmax(0, 1fr) repeat(3, 66px); }
  .cc-head .n { white-space: normal; font-size: 9px; letter-spacing: .02em; line-height: 1.2; }
  .cc-table .n { font-size: 11px; }
}

/* Indicadores: el monto se ajusta al ancho de la tarjeta para que no se salga */
.kpi { container-type: inline-size; }
.kpi .val { font-size: clamp(14px, calc((100cqi - 56px) / 6.2), 21px); }
@container (max-width: 200px) { .kpi > .ic { width: 20px; height: 20px; } }
@container (max-width: 172px) { .kpi > .ic { display: none; } .kpi .val { font-size: clamp(14px, calc((100cqi - 26px) / 6.2), 20px); } }
/* 8 indicadores: siempre en 2 filas de 4 (en 8 columnas los montos no entran) */
.kpis.k8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .kpis.k8, .kpis.k7 { grid-template-columns: 1fr 1fr; } .kpis.k7 > :last-child { grid-column: span 2; } }
@media (max-width: 340px) { .kpis.k8, .kpis.k7, .kpis.k6 { grid-template-columns: 1fr; } .kpis.k7 > :last-child { grid-column: auto; } }
.nota-rev { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--c-rev); font-style: italic; }
.kpi .sub .nota-rev { margin-top: 4px; }

/* Indicadores en dos filas y algo más grandes (pedido del usuario, 16 oct) */
.kpis.k8, .kpis.k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.k7 > :last-child { grid-column: span 2; } /* 7 indicadores: 4 + 3, el último ocupa el hueco */
.kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { padding: 14px 16px; gap: 12px; }
.kpi .lbl { font-size: 11px; }
.kpi .val { font-size: clamp(15px, calc((100cqi - 64px) / 5.8), 26px); margin: 2px 0 3px; }
.kpi .sub { font-size: 12px; }
.kpi .sub > span { display: block; }
@container (max-width: 172px) { .kpi .val { font-size: clamp(14px, calc((100cqi - 32px) / 6), 22px); } }
@media (max-width: 860px) { .kpis.k8, .kpis.k7, .kpis.k6 { grid-template-columns: 1fr 1fr; } .kpis.k7 > :last-child { grid-column: span 2; } }
@media (max-width: 340px) { .kpis.k8, .kpis.k7, .kpis.k6 { grid-template-columns: 1fr; } .kpis.k7 > :last-child { grid-column: auto; } }

/* 9 indicadores (con Pagado): 5 + 4, el último ocupa el hueco */
.kpis.k9 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.k9 > :last-child { grid-column: span 2; }
.kpis.k10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.k9, .kpis.k10 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis.k9 > :last-child { grid-column: span 1; } }
@media (max-width: 860px) { .kpis.k9, .kpis.k10 { grid-template-columns: 1fr 1fr; } .kpis.k9 > :last-child { grid-column: span 2; } }
@media (max-width: 340px) { .kpis.k9, .kpis.k10 { grid-template-columns: 1fr; } .kpis.k9 > :last-child { grid-column: auto; } }
.chip.et-descartado { background: var(--surface-2); color: var(--ink-3); text-decoration: line-through; }
.cc-line.otros .nm { color: var(--ink-3); font-style: italic; }

/* Avance por fase: fila de montos (preliminar, en revisión, aprobado, proyectado, PO, incurrido) */
.fs-row { grid-template-columns: minmax(170px, 1.1fr) minmax(0, 1.5fr) minmax(150px, 1fr); row-gap: 8px; }
.fs-m { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.fs-m small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fs-m b { display: block; font-size: 14px; white-space: nowrap; }
.fs-m .stk.sm { max-width: 120px; }
.fs-tbl th:nth-child(4), .fs-tbl th:nth-child(5), .fs-tbl th:nth-child(6) { width: 96px; }
.fs-tbl th:nth-child(7) { width: 100px; }
.fs-tbl { min-width: 760px; }
@media (max-width: 900px) {
  .fs-row { grid-template-columns: minmax(0, 1fr) minmax(110px, 160px); }
  .fs-m { grid-template-columns: repeat(3, minmax(0, 1fr)); order: 4; }
}
@media (max-width: 760px) { .fs-tbl { min-width: 0; } }
@media (max-width: 760px) { .fs-nm b .chip { display: none; } }
.s-des { background: var(--ink-3); opacity: .55; }