/* ============================================================
   Vigilância de Processos e Controle de Infecção
   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;
}


/* ============================================================
   COR DE IDENTIDADE DO TIPO
   Tons claros/empoeirados de ../comum/cores-tipos.css, em poucos
   pontos: ponto nas abas, aba ativa, filete do número-herói e as
   barras do painel aberto. Não são níveis de alerta — o nome do
   tipo está sempre escrito ao lado da cor.
   ============================================================ */

body[data-tipo="ipcsl"] {
    --cor-tipo: var(--tipo-ipcsl);
    --cor-tipo-fundo: var(--tipo-ipcsl-fundo);
    --cor-tipo-texto: var(--tipo-ipcsl-texto);
}

body[data-tipo="itu"] {
    --cor-tipo: var(--tipo-itu);
    --cor-tipo-fundo: var(--tipo-itu-fundo);
    --cor-tipo-texto: var(--tipo-itu-texto);
}

body[data-tipo="pav"] {
    --cor-tipo: var(--tipo-pav);
    --cor-tipo-fundo: var(--tipo-pav-fundo);
    --cor-tipo-texto: var(--tipo-pav-texto);
}


/* Abas: um ponto na cor do tipo; a aba ativa fica no fundo claro
   do seu tipo, com texto escuro (≥ 4,5:1). */

.tipo-tab[data-tipo="ipcsl"] {
    --ponto: var(--tipo-ipcsl);
    --ponto-fundo: var(--tipo-ipcsl-fundo);
    --ponto-texto: var(--tipo-ipcsl-texto);
}

.tipo-tab[data-tipo="itu"] {
    --ponto: var(--tipo-itu);
    --ponto-fundo: var(--tipo-itu-fundo);
    --ponto-texto: var(--tipo-itu-texto);
}

.tipo-tab[data-tipo="pav"] {
    --ponto: var(--tipo-pav);
    --ponto-fundo: var(--tipo-pav-fundo);
    --ponto-texto: var(--tipo-pav-texto);
}


.tipo-tab::before {

    content: "";

    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--ponto);
}


.tipo-tab:hover {

    border-color: var(--ponto);
}


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

    background: var(--ponto-fundo);

    border-color: var(--ponto);

    color: var(--ponto-texto);
}


/* Número-herói: filete superior na cor do tipo. */

.hero-card {

    border-top: 5px solid var(--cor-tipo, var(--serie-1));
}


/* Barras na cor do tipo aberto; amostra pequena continua esmaecida
   (mistura com branco; navegadores sem color-mix mantêm o azul-claro
   padrão de ../painel/painel.css). */

.bar-fill {

    background: var(--cor-tipo, var(--serie-1));
}


.bar-row.is-small .bar-fill {

    background: color-mix(in srgb, var(--cor-tipo, var(--serie-1)) 45%, #FFFFFF);
}