.left-column:has(.micro-dashboard) {
    align-items: stretch;
    width: min(340px, 100%);
}

.micro-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 0 20px;
    margin-top: 12px;
}

/* O max-height so existe para animar o recolhimento; precisa ser folgado o
   bastante para nunca cortar o conteudo (o estado exato e o .is-collapsed). */
.micro-dash-row {
    max-height: 100vh;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.micro-dash-row.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.dash-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-col-header {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-soft);
    opacity: .75;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    text-align: right;
}

.dash-col-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dash-item {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}

.dash-item-label {
    font-size: .68rem;
    opacity: .65;
}

.dash-item strong {
    font-size: .78rem;
    font-weight: 600;
    min-width: 64px;
    text-align: right;
}

@media (max-width: 900px) {
    .micro-dashboard {
        grid-template-columns: repeat(3, minmax(90px, 1fr));
        gap: 0 12px;
        width: 100%;
    }

    .dash-col-header,
    .dash-item {
        text-align: left;
        justify-content: flex-start;
    }
}

/* No celular as 3 colunas continuam lado a lado: o item empilha rotulo sobre
   valor, que e o que permite os tres grupos caberem em ~360px sem quebrar. */
@media (max-width: 600px) {
    .micro-dashboard {
        grid-template-columns: repeat(3, 1fr);
        gap: 0 8px;
    }

    .dash-col-header {
        font-size: .6rem;
    }

    .dash-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .dash-item strong {
        min-width: 0;
        font-size: .72rem;
        text-align: left;
    }
}