/* Dashboard comercial del SpcTenantAdmin (spec 2026-11-12-spc-dashboard-tenant-admin-design.md). Colores solo con tokens del tema. */

.spc-dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Un motivo largo hace crecer el chip hacia abajo en vez de salirse de él. */
.spc-dash-chips .mud-chip {
    height: auto;
    min-height: 24px;
    max-width: 100%;
}

.spc-dash-chips .mud-chip .mud-chip-content {
    white-space: normal;
}

.spc-dash-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.spc-dash-funnel,
.spc-dash-list,
.spc-dash-reasons {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spc-dash-funnel-step,
.spc-dash-list li {
    margin-bottom: 10px;
}

.spc-dash-funnel-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.spc-dash-funnel-label {
    font-weight: 600;
}

.spc-dash-funnel-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.spc-dash-track {
    height: 10px;
    border-radius: 999px;
    background: var(--mud-palette-action-disabled-background);
    overflow: hidden;
}

.spc-dash-bar {
    height: 100%;
    border-radius: 999px;
}

.spc-dash-bar--primary {
    background: var(--mud-palette-primary);
}

.spc-dash-reasons li {
    padding: 2px 0;
}

.spc-dash-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(34px, 1fr);
    gap: 6px;
    height: 220px;
    align-items: end;
    overflow-x: auto;
    padding-bottom: 2px;
}

.spc-dash-chart--short {
    height: 160px;
    margin-top: 8px;
}

.spc-dash-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.spc-dash-col-value {
    font-size: 0.65rem;
    font-weight: 700;
    min-height: 1.2em;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.spc-dash-col-bars {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.spc-dash-vbar {
    width: 42%;
    max-width: 22px;
    border-radius: 4px 4px 0 0;
}

.spc-dash-chart--short .spc-dash-vbar {
    width: 60%;
    max-width: 40px;
}

.spc-dash-vbar--primary {
    background: var(--mud-palette-primary);
}

.spc-dash-vbar--muted {
    background: var(--mud-palette-primary-lighten);
    opacity: 0.45;
}

.spc-dash-vbar--success {
    background: var(--mud-palette-success);
}

.spc-dash-col-label {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    white-space: nowrap;
}

.spc-dash-col-label--current {
    font-weight: 700;
    color: var(--mud-palette-success);
}

.spc-dash-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.spc-dash-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Teléfono: la tabla de alertas pasa a tarjetas (MudTable Breakpoint.Sm); el contenido de cada celda se ajusta al ancho. */
@media (max-width: 599.98px) {
    .spc-dash-alerts .mud-table-root {
        table-layout: fixed;
        width: 100%;
    }

    .spc-dash-alerts .mud-table-cell {
        overflow-wrap: anywhere;
    }

    .spc-dash-alerts .mud-table-cell > * {
        min-width: 0;
        max-width: 70%;
        text-align: right;
    }

    .spc-dash-alerts .spc-dash-chips {
        justify-content: flex-end;
    }
}