/* Centro de Ventas — shared by the page and its Components/SalesCenter/* (global, like
   operation-center.css, since the classes span several sibling components). Colors follow the
   "Dashboard de Productos y Ventas" mockup. */

.sc-filters {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .5rem .75rem;
}

.sc-filter { width: 220px; }

.sc-period-range {
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;
    font-size:   .8rem;
    color:       var(--mud-palette-text-secondary);
}

/* KPI tiles: 5 in a row on desktop, wrapping on smaller screens. */
.sc-kpi-grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:                   10px;
    margin-bottom:         14px;
}

@media (max-width: 1279.98px) { .sc-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599.98px)  { .sc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sc-kpi-card { height: 100%; border-left: 3px solid var(--sc-accent); --sc-accent: #22c55e; }
.sc-accent--green  { --sc-accent: #22c55e; }
.sc-accent--blue   { --sc-accent: #3b82f6; }
.sc-accent--purple { --sc-accent: #a855f7; }
.sc-accent--orange { --sc-accent: #f59e0b; }
.sc-accent--teal   { --sc-accent: #14b8a6; }

.sc-kpi-content { display: flex; gap: .8rem; align-items: flex-start; padding: 14px !important; }

.sc-kpi-icon-box {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    color:           var(--sc-accent);
    background:      color-mix(in srgb, var(--sc-accent) 18%, transparent);
}

.sc-kpi-body { flex: 1; min-width: 0; }
.sc-kpi-top  { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; }
.sc-kpi-label { color: var(--mud-palette-text-secondary); }
.sc-kpi-value { font-weight: 800; line-height: 1.2; white-space: nowrap; }
.sc-kpi-spark { width: 80px; height: 28px; flex-shrink: 0; color: var(--sc-accent); }
.sc-kpi-delta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .2rem; }

.sc-delta { display: inline-flex; align-items: center; font-weight: 600; }
.sc-delta--up   { color: #22c55e; }
.sc-delta--down { color: #ef4444; }

/* Hallazgos rápidos */
.sc-section-title { display: flex; align-items: center; gap: .4rem; margin: 4px 0 8px; }

.sc-findings {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   10px;
    margin-bottom:         14px;
}

@media (max-width: 959.98px) { .sc-findings { grid-template-columns: 1fr; } }

.sc-finding {
    display:       flex;
    gap:           .9rem;
    align-items:   center;
    padding:       14px 16px;
    border-radius: 12px;
    border:        1px solid var(--sc-finding);
    background:    color-mix(in srgb, var(--sc-finding) 12%, var(--mud-palette-surface));
}

.sc-finding--alert       { --sc-finding: #ef4444; }
.sc-finding--opportunity { --sc-finding: #f59e0b; }
.sc-finding--best        { --sc-finding: #22c55e; }

.sc-finding-icon { font-size: 2.2rem !important; color: var(--sc-finding); flex-shrink: 0; }
.sc-finding-kind { color: var(--sc-finding); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Panels */
.sc-row { display: grid; gap: 10px; margin-bottom: 14px; }
.sc-row--three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.sc-row--two   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 1279.98px) {
    .sc-row--three { grid-template-columns: 1fr 1fr; }
    .sc-row--three > :nth-child(2) { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 959.98px) {
    .sc-row--three, .sc-row--two { grid-template-columns: 1fr; }
}

.sc-panel { height: 100%; }
.sc-panel-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }

.sc-panel-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   8px;
    color:           var(--sc-icon);
    background:      color-mix(in srgb, var(--sc-icon) 18%, transparent);
}

.sc-panel-icon--gold   { --sc-icon: #f59e0b; }
.sc-panel-icon--blue   { --sc-icon: #3b82f6; }
.sc-panel-icon--red    { --sc-icon: #ef4444; }
.sc-panel-icon--purple { --sc-icon: #a855f7; }

/* Ranked bar lists (products, pairs) */
.sc-bars, .sc-pairs { list-style: none; margin: 0; padding: 0; }

.sc-bar-row, .sc-pair-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .35rem 0;
    font-size:   .82rem;
}

.sc-rank {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    font-size:       .72rem;
    background:      var(--mud-palette-background-gray);
}

.sc-bar-icon { flex-shrink: 0; color: #f59e0b; }
.sc-bar-name, .sc-pair-names { flex: 0 0 38%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-pair-names { flex-basis: 46%; }
.sc-pair-orders { flex-shrink: 0; width: 80px; color: var(--mud-palette-text-secondary); font-size: .76rem; }
.sc-bar-track { flex: 1; height: 14px; border-radius: 4px; background: var(--mud-palette-background-gray); overflow: hidden; }
.sc-bar-fill { display: block; height: 100%; border-radius: 4px; }
.sc-bar-fill--gold   { background: #f59e0b; }
.sc-bar-fill--blue   { background: #3b82f6; }
.sc-bar-fill--purple { background: #a855f7; }
.sc-bar-label { flex-shrink: 0; min-width: 64px; text-align: right; font-weight: 600; }

/* Bajo desempeño */
.sc-table td, .sc-table th { font-size: .8rem; }
.sc-num { text-align: right; white-space: nowrap; }
.sc-product-cell { display: inline-flex; align-items: center; gap: .35rem; }

.sc-status {
    display:       inline-block;
    min-width:     72px;
    padding:       .15rem .5rem;
    border-radius: 6px;
    text-align:    center;
    font-weight:   600;
    font-size:     .74rem;
}

.sc-status--critical  { background: rgba(239, 68, 68, .2);  color: #f87171; }
.sc-status--attention { background: rgba(245, 158, 11, .2); color: #fbbf24; }
.sc-status--stable    { background: rgba(34, 197, 94, .2);  color: #4ade80; }

/* Áreas de oportunidad */
.sc-opportunities {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   8px;
}

@media (max-width: 599.98px) { .sc-opportunities { grid-template-columns: 1fr; } }

.sc-opportunity {
    display:       flex;
    gap:           .7rem;
    align-items:   center;
    padding:       10px 12px;
    border-radius: 10px;
    border:        1px solid var(--mud-palette-lines-default);
}

.sc-opportunity-icon { color: #3b82f6; flex-shrink: 0; }
.sc-opportunity-text { flex: 1; min-width: 0; }
.sc-opportunity-badge { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; max-width: 96px; text-align: center; }

.sc-badge {
    padding:       .2rem .55rem;
    border-radius: 8px;
    font-weight:   700;
    font-size:     .9rem;
}

.sc-badge--up   { background: rgba(34, 197, 94, .18); color: #4ade80; border: 1px solid rgba(34, 197, 94, .5); }
.sc-badge--down { background: rgba(239, 68, 68, .18); color: #f87171; border: 1px solid rgba(239, 68, 68, .5); }