/* ============================================================
   INFECZERO
   Painéis de dispositivos invasivos — complementos sobre o CSS
   do painel de higienização (../painel/painel.css).
   ============================================================ */

.tipo-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.tipo-tab {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border: 1px solid var(--border-color);

    border-radius: 999px;

    background: var(--surface);

    color: var(--text-main);

    font-size: 0.88rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}


.tipo-tab:hover {

    border-color: var(--serie-1);
}


.tipo-tab[aria-current="page"] {

    background: var(--primary-navy);

    border-color: var(--primary-navy);

    color: #FFFFFF;
}


.tipo-tab small {

    font-weight: 600;

    color: inherit;

    opacity: 0.75;
}


/* ============================================================
   VARIANTE: RÓTULO ACIMA DA BARRA
   As perguntas do checklist são longas; em vez de espremer em
   uma coluna estreita (cortava com reticências), o texto ocupa
   a largura toda e a barra vem embaixo.
   ============================================================ */

.chart-rotulo-acima .bar-row {

    grid-template-columns: 1fr;

    gap: 3px 0;

    padding: 7px 0 9px;

    min-height: 0;
}


.chart-rotulo-acima .bar-label {

    display: block;

    overflow: visible;

    -webkit-line-clamp: unset;

    -webkit-box-orient: unset;

    color: var(--text-main);

    font-size: 0.82rem;

    line-height: 1.35;
}


.chart-rotulo-acima .bar-area {

    height: 24px;
}


/* Sem linhas de grade atravessando os textos das perguntas;
   cada barra já carrega o próprio valor na ponta. */

.chart-rotulo-acima .grid-track {

    display: none;
}


.acao-vazia {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 10px;

    min-height: 44px;

    padding: 10px 16px;

    border-radius: var(--radius-medium);

    background: var(--serie-1);

    color: #FFFFFF;

    font-size: 0.88rem;

    font-weight: 700;

    text-decoration: none;
}


.acao-vazia:hover {

    background: #004B92;
}