/* ============================================
   DISTRIBUIDORA — Pages
   ============================================ */

/* ---- Chart ---- */
.chart-container { padding: var(--s-4) 0; }

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--s-2);
    height: 160px;
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    height: 100%;
    justify-content: flex-end;
}

.chart-bar__fill {
    width: 100%;
    max-width: 40px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to top, var(--accent), rgba(224, 168, 60, 0.7));
    opacity: 0.8;
    transition: height var(--t-slow) var(--ease), opacity var(--t-fast);
    min-height: 2px;
}

.chart-bar:hover .chart-bar__fill {
    opacity: 1;
    box-shadow: 0 0 12px rgba(224, 168, 60, 0.25);
}

.chart-bar__value {
    font-size: var(--text-xs);
    color: var(--text-3);
    font-weight: var(--fw-medium);
}

.chart-bar__label {
    font-size: var(--text-xs);
    color: var(--text-3);
    text-align: center;
}

/* ---- Alert List ---- */
.alert-list { display: flex; flex-direction: column; gap: var(--s-2); }

.alert-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    background: rgba(255, 255, 255, 0.02);
    transition: background var(--t-fast);
}

.alert-item:hover { background: rgba(255, 255, 255, 0.04); }

.alert-item--warning { border-left: 3px solid var(--yellow); }
.alert-item--danger { border-left: 3px solid var(--red); }
.alert-item--info { border-left: 3px solid var(--blue); }

.alert-item__icon { flex-shrink: 0; width: 18px; height: 18px; }
.alert-item__text { flex: 1; color: var(--text-2); }
.alert-item__text strong { color: var(--text-1); }

/* ---- Top List ---- */
.top-list { display: flex; flex-direction: column; }

.top-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-3);
    border-radius: var(--r-md);
    transition: background var(--t-fast);
}

.top-item:hover { background: rgba(255, 255, 255, 0.03); }

.top-item__rank {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

.top-item__name {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--text-2);
}

.top-item__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-1);
}

/* ---- Sale Cart ---- */
.sale-cart {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.sale-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sale-cart__items { max-height: 260px; overflow-y: auto; }

.sale-cart__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    transition: background var(--t-fast);
}

.sale-cart__item:hover { background: rgba(255, 255, 255, 0.02); }
.sale-cart__item:last-child { border-bottom: none; }
.sale-cart__item-name { flex: 1; color: var(--text-2); }

.sale-cart__item-qty {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sale-cart__item-qty input {
    width: 44px;
    text-align: center;
    padding: 2px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-1);
    font-size: var(--text-sm);
}

.sale-cart__item-price {
    min-width: 72px;
    text-align: right;
    font-weight: var(--fw-semibold);
    color: var(--text-1);
}

.sale-cart__footer {
    padding: var(--s-4);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sale-cart__total {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
}

.sale-cart__profit {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--green);
}

/* ---- Balance Card ---- */
.balance-card {
    text-align: center;
    padding: var(--s-8);
}

.balance-card__label {
    font-size: var(--text-xs);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s-2);
}

.balance-card__amount {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--red);
    line-height: 1;
    letter-spacing: -0.03em;
}

.balance-card__amount--zero { color: var(--green); }

.balance-card__sub {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin-top: var(--s-2);
}

/* ---- Stock Bar ---- */
.product-card__stock {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.product-card__stock-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-full);
    overflow: hidden;
}

.product-card__stock-fill {
    height: 100%;
    border-radius: var(--r-full);
    transition: width var(--t-slow);
}

.product-card__stock-fill--ok { background: var(--green); }
.product-card__stock-fill--low { background: var(--yellow); }
.product-card__stock-fill--critical { background: var(--red); }

/* ---- Summary ---- */
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}

.summary-row:last-child { border-bottom: none; }
.summary-row__label { color: var(--text-3); }
.summary-row__value { font-weight: var(--fw-semibold); }
.summary-row__value--accent { color: var(--accent); }
.summary-row__value--success { color: var(--green); }
.summary-row__value--danger { color: var(--red); }

/* ---- Import ---- */
.import-area {
    border: 1.5px dashed var(--border-hover);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    text-align: center;
    transition: all var(--t-fast);
}

.import-area:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.import-area textarea {
    width: 100%;
    min-height: 100px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-3);
    color: var(--text-1);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: var(--text-xs);
    resize: vertical;
    margin-top: var(--s-3);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .chart-bars { height: 120px; }
    .sale-cart__item { flex-wrap: wrap; }
    .form-row { grid-template-columns: 1fr; }
    .filters { flex-direction: column; align-items: stretch; }
    .balance-card { padding: var(--s-6); }
    .balance-card__amount { font-size: var(--text-2xl); }
}