/* =============================================================================
   Componentes: botões, resumo, cartão de serviço, farol, faixa horária.
   ========================================================================== */

/* ---------------------------- BOTÕES ------------------------------------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-base);
    border-radius: var(--raio-pequeno);
    background: var(--surface-card);
    color: var(--text-base);
    font-size: 13px;
    transition: background .15s, border-color .15s, color .15s;
}

.icon-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.icon-btn svg {
    width: 14px;
    height: 14px;
}

/* Gira enquanto a consulta está no ar. Dá o retorno de "estou buscando" sem
   precisar de spinner separado nem de trocar o texto do botão. */
.icon-btn--girando svg {
    animation: girar .9s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .icon-btn--girando svg {
        animation: none;
    }
}

/* ---------------------------- SELO DE ATUALIZAÇÃO ------------------------ */

.selo-atualizacao {
    font-size: 12.5px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------- FAROL ------------------------------------- */

.farol {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--text-faint);
    box-shadow: 0 0 0 3px transparent;
}

.farol--ok {
    background: var(--ok);
    box-shadow: 0 0 0 3px var(--ok-wash);
}

.farol--falha {
    background: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-wash);
}

.farol--alerta {
    background: var(--warn);
    box-shadow: 0 0 0 3px var(--warn-wash);
}

.farol--indefinido {
    background: var(--text-faint);
    box-shadow: 0 0 0 3px var(--surface-vazio);
}

/* ---------------------------- RESUMO ------------------------------------ */

.resumo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-base);
    border-radius: var(--raio);
    box-shadow: var(--shadow-card);
}

.resumo--ok {
    border-left-color: var(--ok);
}

.resumo--falha {
    border-left-color: var(--danger);
}

.resumo--alerta {
    border-left-color: var(--warn);
}

.resumo__farol {
    width: 14px;
    height: 14px;
}

.resumo__titulo {
    font-size: 21px;
}

.resumo__detalhe {
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ---------------------------- AVISO ------------------------------------- */

.aviso {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--danger-border);
    border-radius: var(--raio-pequeno);
    background: var(--danger-wash);
    color: var(--text-strong);
    font-size: 13.5px;
}

/* ---------------------------- CARTÃO ------------------------------------ */

.cartao {
    padding: 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--raio);
    box-shadow: var(--shadow-card);
}

.cartao--falha {
    border-color: var(--danger-border);
}

.cartao--alerta {
    border-color: var(--warn-border);
}

.cartao__topo {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cartao__nome {
    font-size: 15.5px;
    flex: 1;
    min-width: 0;
}

.cartao__nota {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-faint);
    min-height: 1.2em;
}

/* ---------------------------- ETIQUETA ---------------------------------- */

.etiqueta {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--border-base);
    color: var(--text-muted);
}

.etiqueta--ok {
    background: var(--ok-wash);
    border-color: var(--ok-border);
    color: var(--ok);
}

.etiqueta--falha {
    background: var(--danger-wash);
    border-color: var(--danger-border);
    color: var(--danger);
}

.etiqueta--alerta {
    background: var(--warn-wash);
    border-color: var(--warn-border);
    color: var(--warn);
}

/* ---------------------------- MÉTRICAS ---------------------------------- */

.cartao__metricas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.metrica dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
}

.metrica dd {
    margin-top: 2px;
    font-family: var(--font-titulo);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------- FAIXA HORÁRIA ----------------------------- */

/* Uma barra por hora da janela. A barra é o dado bruto do painel: cor por
   resultado da hora, e o title carrega o número exato — sem tooltip próprio,
   que em tela de status ninguém para para clicar. */
.faixa {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 34px;
    margin-top: 16px;
}

.faixa__barra {
    flex: 1 1 0;
    min-width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--surface-vazio);
}

.faixa__barra--ok {
    background: var(--ok);
}

.faixa__barra--alerta {
    background: var(--warn);
}

.faixa__barra--falha {
    background: var(--danger);
}

/* Enquanto a primeira consulta não volta, os cartões entram como esqueleto: a
   página já nasce com a altura final e não pula quando os dados chegam. */
.cartao--esqueleto {
    opacity: .55;
}

.cartao--esqueleto .faixa__barra {
    animation: pulsar 1.4s ease-in-out infinite;
}

@keyframes pulsar {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cartao--esqueleto .faixa__barra {
        animation: none;
    }
}