/* ============================================================
   GOLDFINGER.CSS — FINANZAS › Goldfinger (diseño v2, 09/09/2026)
   Lenguaje Atlas (tokens de atlas-tokens.css): tarjetas KPI, pestañas
   píldora, tabla con marcas desplegables. Un taller a la vez.
   ============================================================ */
#page-goldfinger { padding:var(--s-5) var(--s-6) var(--s-6); max-width:var(--page-max); margin:0 auto;
  --gf-bar:#cfe9dd; --gf-bar-strong:var(--accent); --gf-bar-neg:#f5c9bf; --gf-bar-warn:#f3dfae; }
@media (prefers-color-scheme: dark) { #page-goldfinger { --gf-bar:#1f4a39; --gf-bar-neg:#5a2c22; --gf-bar-warn:#5a4a1c; } }
#page-goldfinger .gf-num { font-family:var(--font-num); font-variant-numeric:tabular-nums; }
#page-goldfinger .gf-r { text-align:right; }
#page-goldfinger .gf-neg { color:var(--neg); }

/* Cabecera y filtros */
#page-goldfinger .gf-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:var(--s-3); }
#page-goldfinger .gf-title { font-size:var(--fs-title); font-weight:700; letter-spacing:-.01em; color:var(--text); }
#page-goldfinger .gf-sub { font-size:12.5px; color:var(--text-3); margin-top:3px; }
#page-goldfinger .gf-btn { font-family:var(--font-sans); font-size:12px; font-weight:600; height:var(--ctrl-h); padding:0 16px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-2); cursor:pointer; }
#page-goldfinger .gf-btn:hover { background:var(--hover); color:var(--text); }
#page-goldfinger .gf-filters { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:flex-end;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:12px 16px; margin-bottom:var(--s-4); }
#page-goldfinger .gf-field { display:flex; flex-direction:column; gap:5px; }
#page-goldfinger .gf-lbl { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
#page-goldfinger .gf-seg { display:inline-flex; gap:var(--emp-gap); padding:var(--emp-pad); background:var(--emp-track); border:var(--emp-track-border); border-radius:var(--emp-radius); overflow-x:auto; max-width:100%; }
#page-goldfinger .gf-emp { border:0; background:transparent; color:var(--text-2); font-family:var(--font-sans); font-size:12px; font-weight:600; padding:7px 13px; border-radius:var(--emp-btn-radius); cursor:pointer; white-space:nowrap; text-align:left; line-height:1.15; transition:.15s var(--ease); }
#page-goldfinger .gf-emp small { display:block; font-size:9px; font-weight:500; color:var(--text-3); margin-top:2px; letter-spacing:.04em; }
#page-goldfinger .gf-emp:hover { color:var(--text); }
#page-goldfinger .gf-emp.is-active { background:var(--emp-active-bg); color:var(--emp-active-fg); box-shadow:var(--emp-active-shadow); }
#page-goldfinger .gf-select { font-family:var(--font-sans); font-size:13px; height:var(--ctrl-h); padding:0 28px 0 11px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); appearance:none; -webkit-appearance:none; background-image:var(--select-arrow); background-repeat:no-repeat; background-position:right 11px center; cursor:pointer; }

/* Pestañas de taller (mismas píldoras que los departamentos del Informe) */
#page-goldfinger .gf-tabs { display:flex; gap:var(--tab-gap); margin:0 0 var(--s-3); }
#page-goldfinger .gf-tab { border:var(--tab-border); background:var(--tab-bg); color:var(--text-2); border-radius:var(--tab-radius); padding:var(--tab-py) 18px; cursor:pointer; font-family:var(--font-sans); font-size:13px; font-weight:700; text-align:center; min-width:150px; }
#page-goldfinger .gf-tab small { display:block; font-size:10px; font-weight:500; color:var(--text-3); margin-top:2px; }
#page-goldfinger .gf-tab.is-active { background:var(--tab-active-bg); border-color:var(--tab-active-border); color:var(--tab-active-fg); }
#page-goldfinger .gf-tab.is-active small { color:var(--tab-active-sub); }
#page-goldfinger .gf-tab.is-vacio:not(.is-active) { opacity:.55; }

/* KPIs */
#page-goldfinger .gf-kpis { display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--kpi-gap); margin-bottom:var(--s-4); }
#page-goldfinger .gf-kpi { background:var(--surface); border:var(--card-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px 18px 14px; display:flex; flex-direction:column; gap:9px; min-width:0; }
#page-goldfinger .gf-kpi__l { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
#page-goldfinger .gf-kpi__ico { width:20px; height:20px; border-radius:50%; background:var(--accent-weak); color:var(--accent-strong); display:inline-grid; place-items:center; font:600 10px var(--font-num); flex:none; }
#page-goldfinger .gf-kpi__v { font:500 26px/1.1 var(--font-num); color:var(--text); font-variant-numeric:tabular-nums; }
#page-goldfinger .gf-kpi__s { font-size:11.5px; color:var(--text-3); }

/* Tarjetas */
#page-goldfinger .gf-grid2 { display:grid; grid-template-columns:7fr 5fr; gap:var(--s-4); margin-bottom:var(--s-4); }
#page-goldfinger .gf-card { background:var(--surface); border:var(--card-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px 18px; min-width:0; }
#page-goldfinger .gf-h2 { font-size:15px; font-weight:600; margin:0 0 2px; color:var(--text); }
#page-goldfinger .gf-hint { font-size:12px; color:var(--text-3); margin:0 0 14px; }

/* Escalera de horas */
#page-goldfinger .gf-lad { display:grid; grid-template-columns:170px 1fr 88px 104px; gap:6px 12px; align-items:center; font-size:13px; }
#page-goldfinger .gf-lad__h { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding-bottom:4px; border-bottom:1px solid var(--border); }
#page-goldfinger .gf-lad__n { color:var(--text); }
#page-goldfinger .gf-lad__n--sum { font-weight:600; }
#page-goldfinger .gf-lad__n--sub { color:var(--text-2); padding-left:14px; }
#page-goldfinger .gf-lad__n--sub::before { content:"−"; color:var(--text-3); margin-right:5px; }
#page-goldfinger .gf-lad__bar { height:16px; position:relative; }
#page-goldfinger .gf-lad__bar i { position:absolute; top:0; bottom:0; border-radius:4px; background:var(--gf-bar); }
#page-goldfinger .gf-lad__bar i.is-strong { background:var(--gf-bar-strong); }
#page-goldfinger .gf-lad__bar i.is-neg { background:var(--gf-bar-neg); }
#page-goldfinger .gf-lad__bar i.is-warn { background:var(--gf-bar-warn); }
#page-goldfinger .gf-eur { color:var(--text-2); }
#page-goldfinger .gf-lad__sep { grid-column:1 / -1; height:1px; background:var(--border); margin:4px 0; }
#page-goldfinger .gf-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--text-3); margin-top:10px; }
#page-goldfinger .gf-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; background:var(--gf-bar); }
#page-goldfinger .gf-legend i.is-neg { background:var(--gf-bar-neg); }
#page-goldfinger .gf-legend i.is-warn { background:var(--gf-bar-warn); }
#page-goldfinger .gf-legend i.is-strong { background:var(--gf-bar-strong); }

/* Coste hora MOD */
#page-goldfinger .gf-formula { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; padding:12px 0 14px; }
#page-goldfinger .gf-fk { text-align:center; min-width:0; }
#page-goldfinger .gf-fk__v { font-size:20px; line-height:1.1; font-weight:500; color:var(--text); white-space:nowrap; }
#page-goldfinger .gf-fk__l { font-size:10.5px; color:var(--text-3); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }
#page-goldfinger .gf-fop { font:500 20px var(--font-num); color:var(--text-3); }
#page-goldfinger .gf-fk--big .gf-fk__v { color:var(--accent-strong); font-size:26px; }
#page-goldfinger .gf-rows { display:flex; flex-direction:column; }
#page-goldfinger .gf-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--row-border); font-size:13px; color:var(--text); }
#page-goldfinger .gf-row__l { color:var(--text-2); }
#page-goldfinger .gf-row__l small { display:block; font-size:11px; color:var(--text-3); }
#page-goldfinger .gf-row--total { border-top:1px solid var(--border-strong); font-weight:600; }
#page-goldfinger .gf-row--total .gf-row__l { color:var(--text); }

/* Tabla por canal y marca */
#page-goldfinger .gf-scroll { overflow-x:auto; }
#page-goldfinger .gf-table { width:100%; border-collapse:collapse; font-size:13px; }
#page-goldfinger .gf-table thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:right; padding:10px 12px; border-bottom:1px solid var(--border-strong); white-space:nowrap; }
#page-goldfinger .gf-table thead th:first-child { text-align:left; }
#page-goldfinger .gf-table thead th.gf-g1 { border-top:2px solid var(--accent); }
#page-goldfinger .gf-table thead th.gf-g2 { border-top:2px solid var(--warn); }
#page-goldfinger .gf-table tbody td { padding:9px 12px; border-bottom:1px solid var(--row-border); text-align:right; white-space:nowrap; color:var(--text); }
#page-goldfinger .gf-table tbody td:first-child { text-align:left; }
#page-goldfinger .gf-table tbody tr:hover td { background:var(--row-hover); }
#page-goldfinger .gf-tr--canal { cursor:pointer; }
#page-goldfinger .gf-tr--canal td:first-child { font-weight:600; }
#page-goldfinger .gf-tw { display:inline-block; width:14px; color:var(--text-3); user-select:none; }
#page-goldfinger .gf-tr--marca td { color:var(--text-2); font-size:12.5px; }
#page-goldfinger .gf-tr--marca td:first-child { padding-left:38px; }
#page-goldfinger .gf-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text-3); margin-right:7px; vertical-align:1px; }
#page-goldfinger .gf-tr--total td { background:var(--surface-2); font-weight:600; border-top:1px solid var(--border-strong); }
#page-goldfinger .gf-eff { display:inline-block; min-width:52px; padding:1px 7px; border-radius:999px; font:500 11.5px var(--font-num); text-align:center; }
#page-goldfinger .gf-eff--ok { background:var(--pos-bg); color:var(--accent-strong); }
#page-goldfinger .gf-eff--mid { background:var(--warn-bg); color:var(--warn); }
#page-goldfinger .gf-eff--low { background:var(--neg-bg); color:var(--neg); }
#page-goldfinger .gf-eff--na { color:var(--text-3); }
#page-goldfinger .gf-notas { font-size:11px; color:var(--text-3); line-height:1.5; margin-top:14px; }
#page-goldfinger .gf-state { padding:48px 24px; text-align:center; color:var(--text-3); font-size:13px; }
#page-goldfinger .gf-state--err { color:var(--neg); }

@media (max-width: 1100px) { #page-goldfinger .gf-kpis { grid-template-columns:repeat(3, 1fr); } #page-goldfinger .gf-grid2 { grid-template-columns:1fr; } }
@media (max-width: 700px) { #page-goldfinger .gf-kpis { grid-template-columns:repeat(2, 1fr); } #page-goldfinger .gf-lad { grid-template-columns:120px 1fr 70px 90px; } }

/* ── Botón «i» y panel de fuentes (09/09/2026) ────────────────────────────────────────────────
   Explica de dónde sale cada cifra con las reglas VIVAS que devuelve el servidor. */
#page-goldfinger .gf-head__acc { display:flex; align-items:center; gap:8px; }
#page-goldfinger .gf-btn--i { width:var(--ctrl-h); padding:0; border-radius:50%; font-family:var(--font-num); font-size:14px; font-weight:700; font-style:italic; color:var(--accent-strong); border-color:var(--accent-weak); background:var(--accent-weak); }
#page-goldfinger .gf-btn--i:hover { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
#page-goldfinger .gf-modal { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; }
/* `hidden` NO basta: el display:flex de arriba lo gana y el contenedor, que ocupa toda la pantalla,
   se traga los clics de la página entera. Lo cazó el smoke en navegador real. */
#page-goldfinger .gf-modal[hidden] { display:none; }
#page-goldfinger .gf-modal__ov { position:absolute; inset:0; background:rgba(10,20,16,.45); }
#page-goldfinger .gf-modal__panel { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); width:min(1000px,100%); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
#page-goldfinger .gf-modal__head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); }
#page-goldfinger .gf-modal__t { font-size:18px; font-weight:700; color:var(--text); }
#page-goldfinger .gf-modal__s { font-size:12px; color:var(--text-3); margin-top:3px; font-family:var(--font-num); }
#page-goldfinger .gf-modal__body { padding:var(--s-4) var(--s-5) var(--s-6); overflow-y:auto; }
#page-goldfinger .gf-sec { padding:var(--s-4) 0; border-top:1px solid var(--border); }
#page-goldfinger .gf-sec:first-child { border-top:0; padding-top:0; }
#page-goldfinger .gf-sec__t { font-size:15px; font-weight:600; color:var(--text); margin:0 0 6px; }
#page-goldfinger .gf-sec__i { font-size:13px; line-height:1.6; color:var(--text-2); margin:0 0 12px; max-width:78ch; }
#page-goldfinger .gf-sec__i b { color:var(--text); font-weight:600; }
#page-goldfinger .gf-table--doc thead th { text-align:left; }
#page-goldfinger .gf-table--doc thead th.gf-r { text-align:right; }
#page-goldfinger .gf-table--doc tbody td { text-align:left; }
#page-goldfinger .gf-table--doc tbody td.gf-num { text-align:right; }
#page-goldfinger .gf-table--doc code { font-family:var(--font-num); font-size:12px; background:var(--surface-2); padding:1px 6px; border-radius:5px; color:var(--text-2); }
#page-goldfinger .gf-tr--off td { color:var(--text-3); }
#page-goldfinger .gf-tr--off code { opacity:.7; }