/* Encima de Carbon Design System */
:root {
  --schulder-bg: #f4f4f4;
  --schulder-card: #ffffff;
  --schulder-accent: #0f62fe;
  --schulder-good: #198038;
  --schulder-bad:  #da1e28;
}

html, body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: var(--schulder-bg);
    color: #161616;
}

.bx--header { background: #161616; }
.header-user {
    color: #c6c6c6;
    font-size: 0.875rem;
    margin: 0 1rem;
}

/* === Header dropdowns (submenus por grupo) === */
.bx--header__submenu .bx--header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    background: #262626;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bx--header__submenu:hover .bx--header__menu,
.bx--header__submenu:focus-within .bx--header__menu,
.bx--header__submenu.is-open .bx--header__menu {
    display: flex;
}
.bx--header__submenu .bx--header__menu-arrow {
    margin-left: 0.5rem;
    transition: transform 0.15s;
    fill: currentColor;
}
.bx--header__submenu:hover .bx--header__menu-arrow,
.bx--header__submenu:focus-within .bx--header__menu-arrow,
.bx--header__submenu.is-open .bx--header__menu-arrow {
    transform: rotate(180deg);
}
.bx--header__submenu .bx--header__menu .bx--header__menu-item {
    width: 100%;
    padding: 0.75rem 1rem;
    height: auto;
    color: #f4f4f4;
    border-bottom: 1px solid #393939;
    white-space: nowrap;
}
.bx--header__submenu .bx--header__menu .bx--header__menu-item:hover {
    background: #353535;
}
.bx--header__submenu .bx--header__menu .bx--header__menu-item--current {
    color: #ffffff;
    background: #353535;
    border-left: 3px solid var(--schulder-accent);
    padding-left: calc(1rem - 3px);
}
.bx--header__submenu .bx--header__menu li:last-child .bx--header__menu-item { border-bottom: none; }

.app-main {
    margin-top: 3rem;
    padding: 2rem 2rem 4rem;
    max-width: 1400px;
}

@media (min-width: 1400px) {
    .app-main { margin-left: auto; margin-right: auto; }
}

h1.page-title {
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 0.25rem;
}
.page-sub {
    color: #525252;
    margin-bottom: 2rem;
}

/* KPI grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.kpi {
    background: var(--schulder-card);
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--schulder-accent);
}
.kpi__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #525252; }
.kpi__value { font-size: 1.75rem; font-weight: 300; margin-top: 0.5rem; font-family: 'IBM Plex Mono', monospace; }
.kpi__hint  { font-size: 0.75rem; color: #6f6f6f; margin-top: 0.25rem; }
.kpi--good  { border-left-color: var(--schulder-good); }
.kpi--bad   { border-left-color: var(--schulder-bad); }

/* Cuenta cards */
.cuenta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.cuenta-card {
    background: var(--schulder-card);
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
}
.cuenta-card h3 {
    font-weight: 400;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}
.cuenta-card .num { font-family: 'IBM Plex Mono', monospace; color: #525252; font-size: 0.875rem; }
.cuenta-card .saldo {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 1rem;
    font-family: 'IBM Plex Mono', monospace;
}

/* Tablas */
.bx--data-table {
    background: var(--schulder-card);
}
.tabla-wrap { background: var(--schulder-card); padding: 0; margin-bottom: 2rem; }
.amount { font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }
.amount.cargo { color: var(--schulder-bad); }
.amount.abono { color: var(--schulder-good); }

/* Filtros */
.filter-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-row .bx--form-item { width: auto; min-width: 180px; }
.filter-row .bx--text-input { background: var(--schulder-card); }

/* Chart */
.chart-card {
    background: var(--schulder-card);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
}
.chart-card h3 { font-weight: 400; margin-bottom: 1rem; }
.chart-wrap { position: relative; height: 320px; }

/* ====== LOGIN ====== */
.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f62fe 0%, #001141 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.login-card {
    background: #fff;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-brand {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
}
.login-brand-mark {
    width: 48px; height: 48px;
    background: #161616;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
}
.login-brand h1 { font-weight: 300; font-size: 1.25rem; line-height: 1.2; }
.login-sub { color: #525252; margin-top: 0.25rem; }

.pin-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.pin-cell {
    aspect-ratio: 1;
    width: 100%;
    text-align: center;
    font-size: 1.75rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid #8d8d8d;
    background: #f4f4f4;
    transition: border-color 0.15s, background 0.15s;
}
.pin-cell:focus {
    outline: 2px solid #0f62fe;
    outline-offset: 2px;
    border-bottom-color: #0f62fe;
    background: #edf5ff;
}
.login-btn { width: 100%; max-width: none; }
.login-foot {
    margin-top: 2rem;
    text-align: center;
    color: #8d8d8d;
}

/* Detalle */
.detalle-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    margin-bottom: 2rem;
}
.detalle-meta dt { font-size: 0.75rem; text-transform: uppercase; color: #6f6f6f; letter-spacing: 0.04em; }
.detalle-meta dd { font-family: 'IBM Plex Mono', monospace; font-size: 1rem; margin-top: 0.25rem; }

.empty {
    background: #fff;
    padding: 3rem;
    text-align: center;
    color: #6f6f6f;
    border: 1px dashed #c6c6c6;
}

.dropzone {
    border: 2px dashed #8d8d8d;
    padding: 3rem 2rem;
    text-align: center;
    background: #f4f4f4;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: #525252;
}
.dropzone:hover { border-color: var(--schulder-accent); color: var(--schulder-accent); background: #edf5ff; }
.dropzone.drag  { border-color: var(--schulder-accent); background: #edf5ff; color: var(--schulder-accent); }