/* ── VARIABLES Y RESET ── */
:root {
    --bg-deep:     #0b0f1a;
    --bg-card:     #111827;
    --bg-card2:    #161f30;
    --border:      #1e2d45;
    --border-2:    #243347;
    --text-1:      #e8edf5;
    --text-2:      #8b9bb4;
    --text-3:      #4a5a72;
    --accent-g:    #00d68f;
    --accent-b:    #3b82f6;
    --accent-r:    #f43f5e;
    --accent-y:    #f59e0b;
    --accent-c:    #06b6d4;
    --accent-p:    #8b5cf6;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Space Grotesk', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body, .content-wrapper, #content-wrapper, main {
    background: var(--bg-deep) !important;
    font-family: var(--sans) !important;
    color: var(--text-1) !important;
}

/* ── HEADER PANEL ── */
.dash-header {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.dash-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -.01em;
}
.dash-title span { color: var(--accent-b); }
.dash-subtitle {
    font-size: .75rem;
    color: var(--text-3);
    font-family: var(--mono);
    margin-top: 2px;
}

/* ── LIVE INDICATOR ── */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-family: var(--mono);
    color: var(--accent-g);
    background: rgba(0,214,143,.08);
    border: 1px solid rgba(0,214,143,.2);
    border-radius: 20px;
    padding: 4px 10px;
}
.live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-g);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.7)}
}

/* ── FILTER BAR ── */
.filter-bar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.75rem;
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}
.f-group { display: flex; flex-direction: column; gap: 4px; }
.f-label {
    font-size: .65rem;
    font-family: var(--mono);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.f-input, .f-select {
    background: var(--bg-deep);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    color: var(--text-1);
    font-family: var(--sans);
    font-size: .8rem;
    padding: .45rem .7rem;
    outline: none;
    transition: border-color .2s;
    height: 36px;
}
.f-input:focus, .f-select:focus { border-color: var(--accent-b); }
.f-select option { background: var(--bg-card); }
.f-input::placeholder { color: var(--text-3); }

.btn-update {
    background: var(--accent-b);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    padding: 0 1.1rem;
    height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .2s, transform .1s;
    white-space: nowrap;
}
.btn-update:hover { opacity: .88; }
.btn-update:active { transform: scale(.97); }
.btn-update.loading { opacity: .6; pointer-events: none; }

/* ── LOADING OVERLAY ── */
#loadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,15,26,.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#loadingOverlay.show { display: flex; }
.spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border-2);
    border-top-color: var(--accent-b);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── KPI CARDS ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--border);
}
@media(max-width:1100px){ .kpi-grid{ grid-template-columns: repeat(3,1fr); } }
@media(max-width:640px){  .kpi-grid{ grid-template-columns: repeat(2,1fr); } }

.kpi-cell {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: background .2s;
}
.kpi-cell:last-child { border-right: none; }
.kpi-cell:hover { background: var(--bg-card2); }
.kpi-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--kpi-color, var(--accent-b));
    opacity: .8;
}
.kpi-icon { font-size: 1rem; margin-bottom: .5rem; opacity: .6; }
.kpi-label-txt {
    font-size: .65rem;
    font-family: var(--mono);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .35rem;
}
.kpi-val {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-1);
    font-family: var(--mono);
    letter-spacing: -.03em;
    transition: color .3s;
}
.kpi-val.updated { color: var(--kpi-color, var(--accent-b)); }
.kpi-sub { font-size: .65rem; color: var(--text-3); margin-top: 3px; font-family: var(--mono); }

/* ── CHARTS GRID ── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}
@media(max-width:900px){ .charts-grid{ grid-template-columns: 1fr; } }

.chart-panel { background: var(--bg-card); padding: 1.25rem 1.5rem; }
.chart-panel.wide { grid-column: 1 / -1; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.panel-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.panel-badge {
    font-size: .65rem;
    font-family: var(--mono);
    color: var(--text-3);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 7px;
}
.chart-wrap { position: relative; height: 220px; }
.chart-wrap canvas { width: 100% !important; }

/* ── TABLES SECTION ── */
.tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
}
@media(max-width:900px){ .tables-grid{ grid-template-columns: 1fr; } }

.table-panel { background: var(--bg-card); padding: 1.25rem 1.5rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tbl thead th {
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 0 .5rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}
.tbl tbody tr { border-bottom: 1px solid rgba(30,45,69,.5); transition: background .15s; }
.tbl tbody tr:hover { background: var(--bg-card2); }
.tbl tbody td { padding: .55rem .5rem; color: var(--text-2); font-family: var(--mono); font-size: .73rem; }
.tbl tbody td.mono-val { color: var(--text-1); }

.badge-status { display: inline-block; font-size: .6rem; padding: 2px 7px; border-radius: 20px; font-family: var(--mono); font-weight: 500; }
.badge-ok  { background: rgba(0,214,143,.1); color: var(--accent-g); border: 1px solid rgba(0,214,143,.2); }
.badge-pend{ background: rgba(245,158,11,.1); color: var(--accent-y); border: 1px solid rgba(245,158,11,.2); }
.badge-err { background: rgba(244,63,94,.1);  color: var(--accent-r); border: 1px solid rgba(244,63,94,.2); }

/* ── ANTIGÜEDAD SALDO ── */
.aging-grid { background: var(--bg-card); border-top: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.aging-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
    margin-top: .75rem;
}
@media(max-width:640px){ .aging-bars{ grid-template-columns: repeat(2,1fr); } }

.aging-bar-item { display: flex; flex-direction: column; gap: .35rem; }
.aging-range { font-size: .62rem; font-family: var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.aging-bar-track { height: 4px; background: var(--border-2); border-radius: 2px; overflow: hidden; }
.aging-bar-fill { height: 100%; border-radius: 2px; transition: width .8s cubic-bezier(.4,0,.2,1); width: 0%; }
.aging-amt { font-size: .75rem; font-family: var(--mono); font-weight: 600; color: var(--text-1); }

/* ── SCROLLBAR & UTILS ── */
.no-data { text-align: center; padding: 2rem; color: var(--text-3); font-size: .78rem; font-family: var(--mono); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }