/* Ficha do cliente (/detalhe/cliente, BKL-1174). Cor só por token: os dois temas vêm de graça.
   Protótipo: docs/design/prototipos/2026-11-01-detalhe-cliente.html. */
.ficha-cliente { display: flex; flex-direction: column; gap: 10px; }
.ficha-cliente #cli-corpo { display: flex; flex-direction: column; gap: 10px; }
.ficha-cliente #cli-corpo[hidden] { display: none; }

.ficha-cabecalho { display: flex; flex-direction: column; gap: 6px; }
.ficha-selos { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ficha-mantenedora { font-size: var(--bmd-fs-rotulo); }

.ficha-nota {
    margin: 0 0 8px;
    color: var(--bmd-fg-muted);
    font-size: var(--bmd-fs-rotulo);
}
.ficha-titulo { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ficha-forte { font-weight: 600; }

.ficha-indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.ficha-painel {
    background: var(--biomed-card-bg);
    border: 1px solid var(--biomed-border);
    border-radius: 10px;
}
.ficha-painel .nav-tabs { padding: 6px 10px 0; }
.ficha-painel .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-weight: 600;
    color: var(--bmd-fg-muted);
}
.ficha-painel .nav-tabs .nav-link.active {
    background: none;
    color: var(--bmd-link);
    border-bottom-color: var(--bmd-action);
}
.ficha-aba { padding: 12px; }
.ficha-bloco { margin-top: 16px; }

.ficha-grade { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.ficha-grafico { height: 220px; }
.ficha-grafico .js-plotly-plot .plotly .cursor-crosshair,
.ficha-grafico .js-plotly-plot .plotly .bars .point { cursor: pointer; }

.ficha-alertas {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ficha-alertas li { display: flex; gap: 8px; align-items: flex-start; line-height: 20px; }
.ficha-alertas .estado { flex: none; }

.ficha-tabela { margin-bottom: 0; }

.ficha-delta { font-weight: 600; color: var(--bmd-fg-muted); }
.ficha-delta--bom { color: var(--bmd-estado-ok-fg); }
.ficha-delta--atencao { color: var(--bmd-estado-atencao-fg); }

.ficha-rfm { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ficha-rfm__rotulo { width: 100px; font-size: var(--bmd-fs-rotulo); }
.ficha-rfm__barra { flex: 1; height: 8px; }
.ficha-rfm__nota { width: 40px; text-align: right; font-size: var(--bmd-fs-rotulo); }

.ficha-detalhes { overflow-x: auto; }
.ficha-detalhes summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--bmd-link);
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .ficha-grade { grid-template-columns: 1fr; }
    .ficha-indicadores { grid-template-columns: repeat(2, 1fr); }
}