:root {
    color-scheme: light dark;
    --fundo: #f6f7f9;
    --cartao: #ffffff;
    --texto: #1b2430;
    --suave: #5b6675;
    --linha: #e2e6ec;
    --vazio: #d9dee5;
    --operando: #1a8f55;
    --instavel: #c98a06;
    --fora: #d0342c;
    --sem-dados: #6d7787;
    --marca: #1d5fbf;
    --whatsapp: #25d366;
    --sobre-destaque: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #11161d;
        --cartao: #1a212b;
        --texto: #e8ecf2;
        --suave: #a2adbc;
        --linha: #2c3542;
        --vazio: #333e4d;
        --operando: #35b878;
        --instavel: #e3a826;
        --fora: #ef5c54;
        --sem-dados: #8d98a8;
        --marca: #7cb0ff;
        --whatsapp: #25d366;
        --sobre-destaque: #11161d;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

a {
    color: var(--marca);
}

.marca {
    font-weight: 700;
    text-decoration: none;
}

h1 {
    margin: 0.25rem 0 1.25rem;
    font-size: 1.75rem;
    line-height: 1.2;
}

h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.125rem;
}

h3 {
    margin: 0;
    font-size: 1rem;
}

.resumo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--linha);
    border-left: 6px solid var(--cor, var(--sem-dados));
    border-radius: 8px;
    background: var(--cartao);
}

.resumo strong {
    display: block;
    font-size: 1.125rem;
}

.resumo small {
    color: var(--suave);
}

.ponto {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--cor, var(--sem-dados));
}

[data-situacao='operando'] {
    --cor: var(--operando);
}

[data-situacao='instavel'] {
    --cor: var(--instavel);
}

[data-situacao='fora'] {
    --cor: var(--fora);
}

.aviso {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--linha);
    border-left: 6px solid var(--instavel);
    border-radius: 8px;
    background: var(--cartao);
    overflow-wrap: anywhere;
}

.aviso p {
    margin: 0.25rem 0;
}

.aviso small,
.media,
.legenda {
    color: var(--suave);
    font-size: 0.875rem;
}

.componente {
    padding: 1rem;
    border: 1px solid var(--linha);
    border-radius: 8px;
    background: var(--cartao);
}

.componente + .componente {
    margin-top: 0.75rem;
}

.topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.situacao {
    font-size: 0.875rem;
    font-weight: 600;
}

.situacao.operando {
    color: var(--operando);
}

.situacao.instavel {
    color: var(--instavel);
}

.situacao.fora {
    color: var(--fora);
}

.situacao.sem_dados {
    color: var(--sem-dados);
}

.barras {
    display: flex;
    gap: 1px;
    height: 2rem;
    margin: 0.75rem 0 0.5rem;
}

.barra {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 1px;
    background: var(--vazio);
}

.barra.operando {
    background: var(--operando);
}

.barra.instavel {
    background: var(--instavel);
}

.barra.fora {
    background: var(--fora);
}

.media,
.legenda {
    margin: 0;
}

.legenda {
    margin-top: 0.75rem;
}

footer p {
    margin: 0.25rem 0;
}

.contatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.contato {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--linha);
    border-radius: 8px;
    background: var(--cartao);
    color: var(--texto);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.contato:hover {
    border-color: var(--destaque);
    transform: translateY(-1px);
}

.contato:focus-visible {
    outline: 2px solid var(--destaque);
    outline-offset: 2px;
}

.contato.whatsapp {
    --destaque: var(--whatsapp);
    --sobre-destaque: #ffffff;
}

.contato.telefone {
    --destaque: var(--marca);
}

.contato svg {
    flex: none;
    box-sizing: content-box;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    background: var(--destaque);
    fill: var(--sobre-destaque);
}

.contato strong,
.contato small {
    display: block;
}

.contato small {
    color: var(--suave);
    font-size: 0.875rem;
}