/* Tablero Genesia · sistema visual del Manual de diseño de Genesia v1.0 (Facturacion/diseno).
   Los valores de diseño están en :root: se ajustan acá y cambian en toda la página. */
@font-face{font-family:Geist;src:url(/estatico/geist.woff2?v=1b5ebfb3a01a) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --accent:#234E77; --accent-hover:#193E63; --link:#3D6284; --link-hover:#153D64; --focus:#527EA6;
  --canvas:#F7F8FA; --bg:#FFFFFF;
  --gray-50:#F8F9FB; --gray-100:#EEF0F3; --gray-200:#E7E9ED; --gray-300:#DCE0E5;
  --gray-500:#69727F; --gray-600:#56616F; --gray-700:#4D6174; --gray-900:#252F3C;
  --seg-bg:#F6F7F9; --seg-border:#E6E9ED; --seg-on-border:#E3E7EC;
  --ok:#326E56; --warn:#8B672D; --bad:#9A4541; --bad-bg:#FFF5F4; --bad-border:#EDCDCA;
  --font:Geist,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-1:12px; --lh-1:16px; --fs-2:14px; --lh-2:20px; --fs-3:16px; --lh-3:24px; --fs-4:20px; --lh-4:28px; --fs-5:32px; --lh-5:40px;
  --fw-regular:400; --fw-strong:560;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px;
  --page-max:1280px; --gutter:40px;
  --radius:7px; --radius-inner:5px; --radius-pop:8px; --radius-panel:12px;
  --line:1px solid var(--gray-200);
  --shadow-panel:0 2px 4px #26364002; --shadow:0 1px 3px #17293c09; --shadow-pop:0 12px 40px #17293822;
  --dur:150ms; --control-h:36px;
  --plot-h:168px; --plot-h-chico:96px; --stroke-hoy:2px; --stroke-ref:1px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--gray-900);font-family:var(--font);font-size:var(--fs-2);line-height:var(--lh-2);
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link)} a:hover{color:var(--link-hover)}
button,select,input{font:inherit;font-variant-numeric:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3,p{margin:0}
.tg{container-type:inline-size}

/* Barra superior */
.top{background:var(--bg);border-bottom:var(--line)}
.bar{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter);min-height:64px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-6)}
.marca{display:flex;align-items:center;gap:var(--s-4)}
.wordmark{font-size:28px;line-height:1;font-weight:520;letter-spacing:-0.05em;color:var(--accent)}
.sep-v{width:1px;height:20px;background:var(--gray-200)}
.bar-der{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);color:var(--gray-600)}
.fresco{display:inline-flex;align-items:center;gap:var(--s-2)}
.punto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--gray-300)}
.punto.ok{background:var(--ok)} .punto.warn{background:var(--warn)} .punto.bad{background:var(--bad)}
.t-warn{color:var(--warn)} .t-bad{color:var(--bad)} .t-ok{color:var(--ok)}
.enlace{border:0;background:transparent;padding:0;color:var(--link);font-size:var(--fs-1);line-height:var(--lh-1)}
.enlace:hover{color:var(--link-hover);text-decoration:underline}

/* Página */
.wrap{max-width:var(--page-max);margin:0 auto;padding:var(--s-7) var(--gutter) var(--s-12);display:flex;flex-direction:column;gap:var(--s-7)}
.wrap>*{min-width:0}
.panel{background:var(--bg);border:var(--line);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);padding:var(--s-6)}
.panel.col{display:flex;flex-direction:column;gap:var(--s-7)}
.sec{display:flex;flex-direction:column;gap:var(--s-4)}
.sec+.sec{padding-top:var(--s-7);border-top:var(--line)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-8);row-gap:var(--s-8)}
.sub{font-size:var(--fs-1);line-height:var(--lh-1);color:var(--gray-500);font-weight:var(--fw-regular)}
.gris{color:var(--gray-600)} .fuerte{font-weight:var(--fw-strong)}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.entre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-6)}
.col1{display:flex;flex-direction:column;gap:var(--s-1)}

/* Encabezado */
.cab{display:flex;flex-direction:column;gap:var(--s-4)}
h1{font-size:var(--fs-5);line-height:var(--lh-5);font-weight:var(--fw-strong);letter-spacing:-0.035em}
h2{font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong)}
h3{font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong)}
.aviso{display:flex;align-items:center;gap:var(--s-2);color:var(--gray-600)}
.aviso.warn{color:var(--warn)}

/* Control segmentado: un solo estilo para país, período y producto */
.seg{display:inline-flex;flex-wrap:wrap;padding:3px;background:var(--seg-bg);border:1px solid var(--seg-border);border-radius:var(--radius)}
.seg-b{min-height:var(--control-h);padding:0 var(--s-3);border:1px solid transparent;border-radius:var(--radius-inner);background:transparent;color:var(--gray-600);font-size:var(--fs-2);display:inline-flex;align-items:center;gap:6px;transition:background var(--dur),color var(--dur),border-color var(--dur),box-shadow var(--dur)}
.seg-b:hover{color:var(--gray-900)}
.seg-b[aria-pressed="true"]{background:var(--bg);color:var(--accent);border-color:var(--seg-on-border);box-shadow:var(--shadow)}
.seg-sel{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:var(--control-h);padding:0 var(--s-3);border:1px solid var(--seg-on-border);border-radius:var(--radius-inner);background:var(--bg);color:var(--accent);box-shadow:var(--shadow)}
.seg-sel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--accent);padding:0 16px 0 0;max-width:220px;cursor:pointer;field-sizing:content}
.seg-sel select:focus{outline:none}
.seg-sel:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.seg-sel svg{position:absolute;right:var(--s-3);pointer-events:none}

/* Botones */
.btn{min-height:var(--control-h);padding:0 var(--s-3);border:1px solid var(--gray-300);border-radius:var(--radius);background:var(--bg);color:var(--gray-700);font-size:var(--fs-2);display:inline-flex;align-items:center;gap:var(--s-2);transition:background var(--dur),border-color var(--dur)}
.btn:hover{background:var(--gray-50)}
.btn.chico{font-size:var(--fs-1)}
.btn-p{min-height:44px;padding:0 var(--s-4);border:1px solid #1E456C;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:var(--fw-strong);box-shadow:0 1px 2px #1d35572a,inset 0 1px 0 #ffffff14;transition:background var(--dur)}
.btn-p:hover{background:var(--accent-hover)}
.btn-p[disabled]{opacity:.6;cursor:default}
.meta-chip{min-height:var(--control-h);padding:0 var(--s-3);border:1px solid var(--gray-300);border-radius:var(--radius);background:var(--bg);color:var(--gray-700);display:inline-flex;align-items:center;gap:var(--s-2)}
.meta-chip .editar{border:0;background:transparent;padding:0;color:var(--link);font-weight:var(--fw-strong)}
.meta-chip .editar:hover{color:var(--link-hover)}

/* Ícono de información con popover */
.anchor{position:relative}
.h2fila{display:flex;align-items:center;gap:var(--s-2)}
.info{display:inline-flex}
.info-b{width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--gray-500);display:inline-flex;align-items:center;justify-content:center;transition:color var(--dur),background var(--dur)}
.info-b:hover{color:var(--gray-900);background:var(--gray-100)}
.pop{position:absolute;z-index:5;top:calc(100% + var(--s-2));left:0;width:min(420px,calc(100cqw - 96px));padding:var(--s-3) var(--s-4);background:var(--bg);border:var(--line);border-radius:var(--radius-pop);box-shadow:var(--shadow-pop);color:var(--gray-600);font-size:var(--fs-2);line-height:var(--lh-2);font-weight:var(--fw-regular);visibility:hidden;opacity:0;transition:opacity var(--dur),visibility var(--dur)}
.pop-up{top:auto;bottom:calc(100% + var(--s-2))}
.pop strong{font-weight:var(--fw-strong);color:var(--gray-900)}
.info:hover .pop,.info:focus-within .pop,.info.abierto .pop{visibility:visible;opacity:1}

/* Desvíos */
.desvios{display:flex;flex-direction:column;gap:var(--s-2)}
.desv-et{display:flex;align-items:center;gap:var(--s-2);font-weight:var(--fw-strong);color:var(--gray-600)}
.desv-et.warn{color:var(--warn)} .desv-et.bad{color:var(--bad)} .desv-et.ok{color:var(--ok)}
.titular{max-width:960px;font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-strong);letter-spacing:-0.02em;text-wrap:balance}
.detalle{max-width:960px;font-size:var(--fs-3);line-height:var(--lh-3);color:var(--gray-600)}

/* Indicadores */
.kpis{padding-left:var(--s-8);padding-right:var(--s-8)}
.kpi{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.kpi-v{font-size:var(--fs-5);line-height:var(--lh-5);font-weight:var(--fw-strong);letter-spacing:-0.035em}

/* Leyenda */
.ley{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--gray-600)}
.ley span{display:inline-flex;align-items:center;gap:var(--s-2)}
.ley i{flex:none;display:block}
.ley .k-cur{width:16px;height:2px;background:var(--accent)}
.ley .k-ref{width:16px;height:0;border-top:1px dashed var(--gray-500)}
.ley .k-banda{width:16px;height:8px;background:var(--gray-100)}
.ley .k-obj{width:16px;height:1px;background:var(--gray-900)}
.ley .k-barras{width:6px;height:10px;background:var(--gray-300)}

/* Gráfico */
figure{margin:0;display:flex;flex-direction:column;min-width:0}
figcaption{font-weight:var(--fw-strong)}
.plot{position:relative;height:var(--plot-h);margin:var(--s-6) 40px var(--s-6) 32px;touch-action:pan-y}
.plot.chico{height:var(--plot-h-chico);margin-right:44px}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot svg *{vector-effect:non-scaling-stroke;fill:none}
.g-grid{stroke:var(--gray-100);stroke-width:1px}
.g-banda{fill:var(--gray-900)!important;fill-opacity:.05;stroke:none}
.g-ahora{stroke:var(--gray-300);stroke-width:1px}
.g-ref{stroke:var(--gray-500);stroke-width:var(--stroke-ref);stroke-dasharray:2 3}
.g-obj{stroke:var(--gray-900);stroke-width:var(--stroke-ref)}
.g-cur{stroke:var(--accent);stroke-width:var(--stroke-hoy);stroke-linecap:round;stroke-linejoin:round}
.g-cruz{stroke:var(--gray-700);stroke-width:1px}
.g-barra{fill:var(--gray-300)!important;stroke:none}
.et{position:absolute;font-size:var(--fs-1);line-height:var(--lh-1);color:var(--gray-500);white-space:nowrap;pointer-events:none}
.et-y{right:calc(100% + var(--s-2));transform:translateY(-50%)}
.et-x{top:calc(100% + var(--s-2));transform:translateX(-50%)}
.et-arriba{bottom:calc(100% + var(--s-1));transform:translateX(-50%);color:var(--gray-600)}
.et-fin{left:calc(100% + var(--s-2));transform:translateY(-50%)}
.dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.dot.chico{width:6px;height:6px;margin:-3px 0 0 -3px}
.dot.gris{background:var(--gray-500)}
.val{position:absolute;font-weight:var(--fw-strong);text-shadow:0 1px 0 var(--bg),0 -1px 0 var(--bg),1px 0 0 var(--bg),-1px 0 0 var(--bg);pointer-events:none}
.barras{position:relative;height:28px;margin:var(--s-1) 40px var(--s-4) 32px}
.barras svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tip{position:absolute;z-index:4;top:0;min-width:136px;padding:var(--s-2) var(--s-3);background:var(--bg);border:var(--line);border-radius:var(--radius-pop);box-shadow:var(--shadow-pop);pointer-events:none;display:flex;flex-direction:column;gap:2px}
.tip-f{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.tip-f>span:first-child{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--gray-600);white-space:nowrap}
.tip-f i{width:12px;height:0;flex:none;display:block}
.vacio-plot{height:var(--plot-h);margin:var(--s-6) 0;border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:center;color:var(--gray-500)}

/* Tablas */
.scroll-x{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;min-width:1000px;font-size:var(--fs-2);line-height:var(--lh-2)}
.tbl.media{min-width:880px} .tbl.chica{min-width:640px}
.tbl th,.tbl td{padding:var(--s-3) var(--s-2);vertical-align:top;text-align:right;white-space:nowrap;font-weight:var(--fw-regular)}
.tbl thead th{padding-top:0;padding-bottom:var(--s-2);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--gray-600);border-bottom:var(--line)}
.tbl tbody th,.tbl tbody td{border-bottom:1px solid var(--gray-100)}
.tbl th:first-child,.tbl td:first-child{padding-left:0;text-align:left;white-space:normal;min-width:216px}
.tbl.chica th:first-child{min-width:180px}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl tbody tr{transition:background var(--dur)}
.tbl tbody tr:hover{background:var(--gray-50)}
.tbl .izq{text-align:left}
.tbl tr.f-fila>th{font-weight:var(--fw-strong)}
.tbl tr.f-sub>th{padding-left:var(--s-4);color:var(--gray-600)}
.tbl tr.f-total>th,.tbl tr.f-total>td{font-weight:var(--fw-strong);border-top:1px solid var(--gray-300)}
.tbl tr.f-total .sub{font-weight:var(--fw-regular)}
.tbl .w{white-space:normal;min-width:104px;max-width:128px;margin-left:auto}
.tbl .wn{white-space:normal;max-width:136px;margin-left:auto}
.cmp{display:flex;align-items:center;gap:var(--s-2);height:var(--lh-2)}
.riel{position:relative;width:80px;height:4px;border-radius:2px;background:var(--gray-100);flex:none}
.riel.corto{width:64px}
.riel>b{display:block;height:4px;border-radius:2px;background:var(--accent)}
.riel>b.apagada{background:var(--gray-300)}
.riel>i{position:absolute;left:50%;top:-3px;width:1px;height:10px;background:var(--gray-900)}

/* País por país */
.pais{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.pais-l{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.sinpais{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--gray-100)}

/* Pie */
.pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--gray-500)}

/* Estados */
.sk{background:var(--gray-200);border-radius:var(--radius-inner);animation:pulso 1.4s ease-in-out infinite}
@keyframes pulso{50%{opacity:.55}}
.error{padding:var(--s-3) var(--s-4);background:var(--bad-bg);border:1px solid var(--bad-border);border-radius:var(--radius-pop);color:var(--bad)}

/* Diálogo */
dialog{border:var(--line);border-radius:14px;box-shadow:0 20px 100px #17293822;padding:var(--s-6);width:min(420px,calc(100vw - 32px));color:var(--gray-900)}
dialog::backdrop{background:#17293833}
.campo{display:flex;flex-direction:column;gap:var(--s-1)}
.campo label{font-size:var(--fs-2);color:var(--gray-600)}
.campo input{min-height:44px;padding:0 var(--s-3);border:1px solid var(--gray-300);border-radius:var(--radius);background:var(--bg);font-size:var(--fs-3)}
.campo input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.dlg{display:flex;flex-direction:column;gap:var(--s-4)}
.dlg-b{display:flex;justify-content:flex-end;gap:var(--s-2)}

/* Ingreso */
.ingreso{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-6);padding:var(--s-6) var(--s-4)}
.ingreso .panel{width:min(380px,100%);padding:var(--s-8)}

/* Ancho */
@container (max-width:1040px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){
  .g4{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:var(--s-4) var(--s-4) var(--s-8);gap:var(--s-4)}
  .bar{padding:var(--s-2) var(--s-4)}
  .panel{padding:var(--s-4);border-radius:10px}
  .kpis{padding-left:var(--s-4);padding-right:var(--s-4)}
  h1{font-size:28px;line-height:36px}
  .seg-b,.seg-sel,.btn,.meta-chip{min-height:44px}
  .pop{width:calc(100cqw - 48px)}
  .tbl th:first-child,.tbl td:first-child,.tbl.chica th:first-child{min-width:150px;width:150px}
  .tbl,.tbl.media,.tbl.chica{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.dlg-b .btn{min-height:44px;padding:0 var(--s-4)}

/* Largo plazo */
.dot.hueco{background:var(--bg);box-shadow:0 0 0 2px var(--accent);width:6px;height:6px;margin:-3px 0 0 -3px}
.ley .k-parcial{width:6px;height:6px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--accent);margin:0 3px}
.tbl tr.f-grupo>th{padding-top:var(--s-6);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--gray-600);font-weight:var(--fw-regular);border-bottom:var(--line)}
.tbl tr.f-grupo:hover{background:transparent}
.tbl.matriz th:first-child{min-width:120px}
.tbl.matriz td,.tbl.matriz thead th{min-width:72px}