/* ═══════════════════════════════════════════════════════════
   INFOVA LATAM · Dashboard Financiero · CSS
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pink:#D4537E;--pink-lt:#FBEAF0;--pink-dk:#72243E;
  --blue:#378ADD;--blue-lt:#E6F1FB;--blue-dk:#0C447C;
  --teal:#1D9E75;--teal-lt:#E1F5EE;
  --amber:#BA7517;--amber-lt:#FAEEDA;
  --red:#E24B4A;--red-lt:#FCEBEB;
  --green:#639922;--green-lt:#EAF3DE;
  --purple:#7F77DD;--purple-lt:#EEEDFE;
  --text:#2C2C2A;--text-2:#5F5E5A;--text-3:#888780;
  --border:rgba(44,44,42,0.12);
  --bg:#fff;--bg2:#F8F7F4;--bg3:#F1EFE8;
  --r:10px;--rl:14px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg2);color:var(--text);min-height:100vh}

/* LOGIN */
.login-card{background:#fff;border-radius:20px;padding:44px 48px;width:100%;max-width:420px;box-shadow:0 24px 64px rgba(0,0,0,.22)}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.login-logo-circle{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#1D9E75,#378ADD);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff}
.login-logo .t1{font-size:17px;font-weight:700}
.login-logo .t2{font-size:12px;color:#888780;margin-top:1px}
.login-card h2{font-size:22px;font-weight:700;margin-bottom:6px}
.login-card p{font-size:13px;color:#888780;margin-bottom:28px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.form-group input{width:100%;padding:11px 14px;border:1.5px solid rgba(44,44,42,.18);border-radius:10px;font-size:14px;outline:none;transition:border-color .15s;background:#FAFAF9}
.form-group input:focus{border-color:var(--teal);background:#fff}
.login-btn{width:100%;padding:13px;background:linear-gradient(135deg,#1D9E75,#378ADD);border:none;border-radius:10px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;margin-top:8px;transition:opacity .15s,transform .1s}
.login-btn:hover{opacity:.92}.login-btn:active{transform:scale(.98)}
.login-error{margin-top:14px;background:var(--red-lt);color:#A32D2D;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:500;text-align:center}

/* HEADER */
.header{background:#fff;border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-circle{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
.header-title{font-size:17px;font-weight:700}
.header-sub{font-size:11px;color:var(--text-2);margin-top:1px}
.header-nav{display:flex;gap:6px;margin-left:18px}
.nav-btn{padding:7px 18px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-2);transition:all .15s;white-space:nowrap}
.nav-btn:hover{background:var(--bg3);border-color:var(--text-3)}
.nav-btn.active{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;border-color:transparent}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.user-chip{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:5px 12px 5px 7px;font-size:12px;font-weight:500;color:var(--text-2)}
.user-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.user-avatar.admin{background:linear-gradient(135deg,#D4537E,#0C447C)}
.user-avatar.viewer{background:linear-gradient(135deg,#1D9E75,#378ADD)}
.role-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.role-badge.admin{background:var(--pink-lt);color:var(--pink-dk)}
.role-badge.viewer{background:var(--teal-lt);color:#085041}
.logout-btn{font-size:12px;color:var(--text-3);background:none;border:1px solid var(--border);border-radius:20px;padding:5px 12px;cursor:pointer;transition:all .15s;text-decoration:none}
.logout-btn:hover{background:var(--red-lt);color:var(--red);border-color:var(--red)}

/* SECTION SWITCH */
.section-content{display:none}
.section-content.active{display:block}

/* PAGE */
.page{padding:22px 28px;max-width:1300px;margin:0 auto}
.section-sep{font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;margin:6px 0 14px;display:flex;align-items:center;gap:10px}
.section-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* UPLOADS */
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.upload-panel{background:#fff;border:1px solid var(--border);border-radius:var(--rl);padding:18px 20px}
.upload-panel-title{font-size:13px;font-weight:700;margin-bottom:4px}
.upload-panel-desc{font-size:11px;color:var(--text-3);margin-bottom:12px;line-height:1.5}
.drop-zone{border:2px dashed var(--border);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2);position:relative}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--teal);background:var(--teal-lt)}
.drop-zone.loaded{border-color:var(--green);background:var(--green-lt);border-style:solid}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-icon{font-size:22px;margin-bottom:5px}
.drop-label{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:2px}
.drop-sub{font-size:11px;color:var(--text-3)}
.drop-filename{font-size:11px;font-weight:600;color:var(--green);margin-top:4px}
.upload-result{margin-top:8px;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.5;display:none}
.upload-result.ok{display:block;background:var(--green-lt);color:#27500A}
.upload-result.err{display:block;background:var(--red-lt);color:#A32D2D}

/* TC PANEL */
.tc-panel{background:var(--blue-lt);border:1px solid rgba(55,138,221,.2);border-radius:var(--r);padding:14px 18px;margin-bottom:16px}
.tc-panel-title{font-size:12px;font-weight:700;color:var(--blue-dk);margin-bottom:10px}
.tc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tc-item label{display:block;font-size:10px;font-weight:700;color:var(--blue-dk);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.tc-item input{width:100%;padding:6px 8px;border:1.5px solid rgba(55,138,221,.3);border-radius:8px;font-size:13px;font-weight:600;background:#fff;outline:none;text-align:center}
.tc-item input:focus{border-color:var(--blue)}
.tc-note{font-size:10px;color:var(--blue-dk);opacity:.75;margin-top:8px;line-height:1.5}
.tc-status-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.tc-status{font-size:11px;color:var(--blue-dk);opacity:.8}
.tc-refresh-btn{padding:4px 12px;border-radius:20px;border:1.5px solid rgba(55,138,221,.4);background:#fff;font-size:11px;font-weight:700;color:var(--blue-dk);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px}
.tc-refresh-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.tc-refresh-btn:disabled{opacity:.5;cursor:not-allowed}
.spin{display:inline-block;animation:spin .8s linear infinite}
.tc-viewer-panel{background:linear-gradient(135deg,rgba(55,138,221,.06),rgba(29,158,117,.04));border:1.5px solid rgba(55,138,221,.2);border-radius:14px;padding:16px 20px;margin-bottom:20px}
.tc-viewer-title{font-size:12px;font-weight:800;color:var(--blue-dk);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.tc-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tc-badge{background:#fff;border:1.5px solid rgba(55,138,221,.25);border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;min-width:80px;box-shadow:0 1px 4px rgba(55,138,221,.08)}
.tc-badge-lbl{font-size:9px;font-weight:800;color:var(--blue-dk);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;opacity:.7}
.tc-badge-val{font-size:15px;font-weight:800;color:var(--blue-dk)}

@keyframes spin{to{transform:rotate(360deg)}}

/* FILTER */
.filter-card{background:#fff;border:1px solid var(--border);border-radius:var(--rl);padding:14px 18px;margin-bottom:16px}
.filter-title{font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.filter-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.filter-group-lbl{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.filter-quick-row{display:flex;gap:5px;flex-wrap:wrap}
.btn-quick{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-size:11px;font-weight:600;cursor:pointer;color:var(--text-2);transition:all .15s}
.btn-quick.q-all{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-quick.q-real{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-quick.q-prev{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-quick.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.vsep{width:1px;background:var(--border);align-self:stretch}
.fase-chips{display:flex;gap:5px;flex-wrap:wrap}
.fase-chip{padding:4px 10px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg2);font-size:11px;font-weight:500;cursor:pointer;color:var(--text-3);transition:all .15s;white-space:nowrap}
.fase-chip.on.real{background:var(--teal-lt);color:var(--teal);border-color:var(--teal)}
.fase-chip.on.prevision{background:var(--blue-lt);color:var(--blue);border-color:var(--blue)}

.filter-legend{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.leg-pill{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-3)}
.leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}

.pais-filter{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin-bottom:12px}
.pf-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.pf-title{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.pf-quick{display:flex;gap:5px;flex-wrap:wrap}
.pf-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}

.prev-chip{padding:4px 10px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg2);font-size:11px;font-weight:500;cursor:pointer;color:var(--text-3);transition:all .15s;white-space:nowrap}
.prev-chip.active{background:var(--blue-lt);color:var(--blue-dk);border-color:var(--blue)}
.prev-chip-clear{color:var(--red);border-color:var(--red-lt)}
.prev-chip-clear:hover{background:var(--red-lt)}

.col-texto{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* KPI STRIP */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi-strip-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.kpi-strip-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}
.kpi{background:#fff;border-radius:var(--rl);border:1px solid var(--border);padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--rl) var(--rl) 0 0}
.kpi.teal::before{background:var(--teal)}.kpi.blue::before{background:var(--blue)}
.kpi.red::before{background:var(--red)}.kpi.purple::before{background:var(--purple)}
.kpi.pink::before{background:var(--pink)}.kpi.amber::before{background:var(--amber)}
.kpi-label{font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.kpi-val{font-size:22px;font-weight:700;line-height:1}
.kpi-sub{font-size:11px;color:var(--text-3);margin-top:4px}
.kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;margin-top:5px}
.kpi-delta.pos{background:var(--teal-lt);color:var(--teal)}
.kpi-delta.neg{background:var(--red-lt);color:var(--red)}
.kpi-delta.neu{background:var(--bg3);color:var(--text-2)}

/* GRID / CARD */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.grid-60-40{display:grid;grid-template-columns:60fr 40fr;gap:16px;margin-bottom:16px}
.grid-40-60{display:grid;grid-template-columns:40fr 60fr;gap:16px;margin-bottom:16px}
.card{background:#fff;border-radius:var(--rl);border:1px solid var(--border);padding:16px 18px;margin-bottom:0}
.card-title{font-size:12px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card-title .dot{width:8px;height:8px;border-radius:50%}
.chart-wrap{position:relative;width:100%}
.chart-wrap.h240{height:240px}.chart-wrap.h220{height:220px}
.chart-wrap.h200{height:200px}.chart-wrap.h180{height:180px}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-2)}
.legend-box{width:10px;height:10px;border-radius:2px;flex-shrink:0}

/* TABS */
.tabs-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tab-btn{padding:7px 16px;border-radius:20px;border:1px solid var(--border);background:#fff;font-size:13px;font-weight:500;cursor:pointer;color:var(--text-2);transition:all .15s}
.tab-btn:hover{background:var(--bg3)}
.tab-btn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.tab-btn.blue-tab.active{background:var(--blue);border-color:var(--blue)}
.tab-btn.pink-tab.active{background:var(--pink);border-color:var(--pink)}
.tab-btn.all-tab.active{background:var(--purple);border-color:var(--purple)}
.tab-btn.teal-tab.active{background:var(--teal);border-color:var(--teal)}
.country-panel{display:none}.country-panel.active{display:block}

/* TABLES */
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{font-size:10px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;padding:6px 7px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
thead th:not(:first-child){text-align:right}
tbody td{padding:6px 7px;border-bottom:1px solid rgba(44,44,42,.06);vertical-align:middle}
tbody td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.total-row td{font-weight:700;border-top:1.5px solid var(--border)}
.total-row.pos td{background:var(--teal-lt);color:#085041}
.total-row.neg td{background:var(--red-lt);color:#A32D2D}
.pos-val{color:var(--teal);font-weight:600}
.neg-val{color:var(--red);font-weight:600}

/* MINI STATS */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.mini-stat{background:var(--bg2);border-radius:var(--r);padding:11px 13px}
.mini-stat .lbl{font-size:10px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.mini-stat .val{font-size:17px;font-weight:700;margin-top:3px}
.mini-stat .sub{font-size:10px;color:var(--text-3);margin-top:2px}

/* DONUT */
.donut-wrap{position:relative}
.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.donut-center .val{font-size:15px;font-weight:700}
.donut-center .lbl{font-size:10px;color:var(--text-3);margin-top:1px}

/* FUNNEL */
.funnel{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0}
.funnel-bar{border-radius:5px;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px;font-weight:600;color:#fff;width:100%}
.funnel-bar span:last-child{font-size:11px;opacity:.85}

/* TOAST */
#toast{position:fixed;bottom:28px;right:28px;z-index:9998;background:#2C2C2A;color:#fff;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.22);display:none;align-items:center;gap:10px;max-width:360px}
#toast.show{display:flex}
#toast .t-icon{font-size:18px;flex-shrink:0}
#toast .t-close{background:none;border:none;color:#fff;cursor:pointer;font-size:16px;opacity:.7;padding:0;margin-left:6px}
#toast .t-close:hover{opacity:1}

/* SALDO BAR */
.saldo-bar-wrap{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(44,44,42,.06)}
.saldo-bar-label{font-size:11px;font-weight:500;width:72px;color:var(--text-2);flex-shrink:0}
.saldo-bar-bg{flex:1;height:7px;background:var(--bg3);border-radius:4px;overflow:hidden}
.saldo-bar-fill{height:100%;border-radius:4px;transition:width .5s}
.saldo-bar-val{font-size:12px;font-weight:700;width:70px;text-align:right;flex-shrink:0}

/* CREDS TABLE */
.creds-table{width:100%;border-collapse:collapse;font-size:13px}
.creds-table td{padding:8px 12px;border-bottom:1px solid rgba(44,44,42,.06)}
.creds-table td:first-child{color:var(--text-2);font-weight:600;width:160px}
.creds-table tr:last-child td{border-bottom:none}
.role-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.role-pill.admin{background:var(--pink-lt);color:var(--pink-dk)}
.role-pill.viewer{background:var(--teal-lt);color:#085041}

/* BADGES */
.country-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:20px}
.badge-mx{background:var(--blue-lt);color:var(--blue-dk)}
.badge-cl{background:var(--pink-lt);color:var(--pink-dk)}
.badge-pe{background:var(--teal-lt);color:#085041}
.badge-co{background:var(--amber-lt);color:var(--amber)}

/* PROC BTN */
.proc-btn{width:100%;margin-top:10px;padding:9px;background:linear-gradient(135deg,var(--teal),var(--blue));border:none;border-radius:10px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s,transform .1s}
.proc-btn:hover{opacity:.88}.proc-btn:active{transform:scale(.98)}.proc-btn:disabled{opacity:.5;cursor:not-allowed}

.chart-desc{font-size:11px;color:var(--text-3);line-height:1.55;margin-bottom:10px;padding:7px 10px;background:var(--bg2);border-radius:7px;border-left:3px solid var(--border)}
.chart-desc strong{color:var(--text-2)}

/* MODAL DESGLOSE */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(44,44,42,.45);z-index:9999;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal-box{background:#fff;border-radius:var(--rl);padding:22px 24px;width:100%;max-width:420px;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--text-3);padding:2px 6px;border-radius:6px}
.modal-close:hover{background:var(--bg3);color:var(--text)}
.modal-title{font-size:14px;font-weight:700;margin-bottom:14px;padding-right:20px}
.modal-table{width:100%;border-collapse:collapse;font-size:12px}
.modal-table td{padding:7px 4px;border-bottom:1px solid rgba(44,44,42,.06)}
.modal-note{font-size:10px;color:var(--text-3);margin-top:2px}
.modal-total{margin-top:12px;padding-top:10px;border-top:1.5px solid var(--border);font-weight:700;font-size:13px;text-align:right;color:var(--red)}
.modal-empty{font-size:12px;color:var(--text-3);text-align:center;padding:20px 0}

@media(max-width:900px){
  .kpi-strip,.kpi-strip-5,.kpi-strip-6,.grid-2,.grid-60-40,.grid-40-60,.mini-stats,.upload-grid,.tc-grid{grid-template-columns:1fr}
  .page{padding:14px}
  .login-card{padding:28px 20px;margin:14px}
  .header-nav{margin-left:0;width:100%}
  .vsep{display:none}
}