/* Folha única do painel. Sem framework: são seis telas, e cada dependência a mais é download a
   mais na primeira visita.

   Os tokens são os mesmos do Total CRM (src/shared/styles/tokens.css). Quem opera os dois sistemas
   no mesmo dia não deveria precisar reaprender o que é um estado ruim, o que é clicável e onde fica
   a ação perigosa. */

:root {
    /* Base */
    --bg-app: #f4f6fa;
    --surface: #ffffff;
    --surface-alt: #fafbfd;
    --surface-muted: #f4f6fa;
    --border: #e7ebf2;
    --border-soft: #eef1f6;
    --border-row: #f1f4f8;
    --border-input: #dde3ec;
    --text: #0f1b2d;
    --text-2: #475569;
    --text-3: #64748b;
    --text-muted: #94a3b8;

    /* Marca */
    --primary: #2563eb;
    --primary-fg: #ffffff;
    --sidebar: linear-gradient(180deg, #13315e, #0b1f3d);
    --sidebar-item-ativo: rgba(37, 99, 235, .42);
    --sidebar-icone-ativo: #93b4f7;
    --login-hero: radial-gradient(120% 120% at 0% 0%, #1a3f70 0%, #0d2440 55%);

    /* Status (bg/fg por tom) */
    --status-green-bg: #e7f5ec;
    --status-green-fg: #157a42;
    --status-amber-bg: #fcf3e2;
    --status-amber-fg: #9a6207;
    --status-red-bg: #fdecea;
    --status-red-fg: #b6362a;
    --status-slate-bg: #eef1f6;
    --status-slate-fg: #5b6b7f;
    --status-blue-bg: #e8effc;
    --status-blue-fg: #1d4ed8;

    /* Raios */
    --r-card: 14px;
    --r-control: 10px;
    --r-badge: 7px;
    --r-pill: 999px;

    --sombra-card: 0 1px 2px rgba(15, 27, 45, .04);
    --largura-menu: 244px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Foco visível em tudo que recebe teclado. O padrão do navegador some sobre fundo azul, e operar
   no teclado sem saber onde se está é o jeito mais rápido de apertar o botão errado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

h1 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0;
}

h2 {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    margin: 0 0 .75rem;
}

/* ===== shell: menu lateral + conteúdo ===== */

.shell {
    display: flex;
    min-height: 100vh;
}

.barra-lateral {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--largura-menu);
    background: var(--sidebar);
    color: #fff;
}

.barra-lateral .marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1rem 1rem;
    color: #fff;
    text-decoration: none;
}

.barra-lateral .marca:hover {
    text-decoration: none;
}

.marca .sigla {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    font-family: "Geist Mono", ui-monospace, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.marca .nome {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.marca .descricao {
    font-size: 11px;
    line-height: 1.2;
    color: rgba(255, 255, 255, .45);
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding: .25rem .625rem;
}

.menu .titulo {
    padding: .5rem .5rem .25rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .4);
}

.menu a {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 6px 8px 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: background-color .1s, color .1s;
}

.menu a:hover {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
}

.menu a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .45);
}

.menu a.active {
    background: var(--sidebar-item-ativo);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    text-decoration: none;
}

.menu a.active svg {
    color: #fff;
}

.sessao {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem;
    margin: 0 .5rem .5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .75rem;
}

.sessao .avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.sessao .usuario {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

/* O "Sair" mora sobre o navy: as variantes claras de .botao não servem aqui. */
.sessao button {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-control);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.sessao button:hover:not(:disabled) {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Teto de largura e centralizado, como as telas do CRM (`mx-auto max-w-content`). Sem o teto, uma
   tabela de seis colunas numa tela ultrawide vira colunas separadas por um palmo de vazio; sem o
   centro, todo o vazio se acumula de um lado só.

   1440 e não os 1240 do CRM: a tabela de entregas tem oito colunas, duas a mais que a maior de lá. */
.conteudo {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 1.5rem 2rem;
}

@media (max-width: 900px) {
    .shell {
        flex-direction: column;
    }

    .barra-lateral {
        width: 100%;
    }

    .menu {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 0;
    }

    .menu .titulo {
        display: none;
    }

    .sessao {
        margin-top: 0;
    }
}

/* ===== cabeçalho de página ===== */

.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.cabecalho-pagina .titulo {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.cabecalho-pagina h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contador {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-badge);
    background: var(--surface-alt);
    font-family: "Geist Mono", ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--text-2);
}

.atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 13px;
}

/* ===== seções ===== */

section {
    margin-bottom: 1.75rem;
}

/* Duas seções curtas lado a lado quando há largura para isso. Empilhadas numa tela ultrawide, elas
   deixam metade do painel vazia e empurram a segunda para fora do campo de visão. */
.colunas {
    display: grid;
    gap: 0 1.5rem;
}

/* 1600 na janela, e não 1100: descontando os 244 do menu e o padding, é a partir daí que sobram uns
   1300px de conteúdo — o que as duas tabelas precisam para caber sem quebrar nome de máquina em
   duas linhas. Abaixo disso, empilhadas é melhor que espremidas.

   Não é meio a meio: a tabela de leases tem nome de recurso, nome de máquina e data, e a de
   provedores tem uma palavra e dois números. */
@media (min-width: 1600px) {
    .colunas {
        grid-template-columns: 1.45fr 1fr;
    }
}

/* ===== login ===== */

.entrada {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--login-hero);
}

.entrada .cartao {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    width: 100%;
    max-width: 23rem;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: 0 24px 60px rgba(5, 20, 40, .35);
}

.entrada h1 {
    margin-bottom: .25rem;
    font-size: 1.25rem;
}

.entrada .subtitulo {
    margin: 0 0 1.25rem;
    font-size: 13px;
    color: var(--text-3);
}

.entrada label {
    margin-top: .625rem;
}

.entrada button {
    margin-top: 1.25rem;
}

/* ===== formulário ===== */

label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}

input,
select {
    height: 38px;
    padding: 0 .625rem;
    border: 1px solid var(--border-input);
    border-radius: var(--r-control);
    background: var(--surface);
    font: inherit;
    color: var(--text);
    transition: border-color .12s, box-shadow .12s;
}

input:focus,
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    outline: none;
}

select {
    padding-right: .5rem;
    cursor: pointer;
}

/* ===== botões ===== */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 38px;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: var(--primary);
    color: var(--primary-fg);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: filter .12s, background-color .12s, border-color .12s;
}

.botao:hover:not(:disabled) {
    filter: brightness(1.1);
}

.botao:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.botao.secundario {
    border-color: var(--border-input);
    background: var(--surface);
    color: var(--text-2);
}

.botao.secundario:hover:not(:disabled) {
    filter: none;
    background: var(--surface-alt);
}

/* Perigo é contorno, não bloco vermelho. Três botões vermelhos lado a lado viram uma parede
   vermelha, e aí nenhum deles avisa nada. O vermelho cheio fica para o "Confirmar" do diálogo, que
   é o clique que de fato executa. */
.botao.perigo {
    border-color: #f0c7c2;
    background: var(--surface);
    color: var(--status-red-fg);
}

.botao.perigo:hover:not(:disabled) {
    filter: none;
    background: var(--status-red-bg);
    border-color: #e3a9a2;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Empurra a ação sem volta para longe das que têm volta. */
.acoes .separado {
    margin-left: auto;
}

/* ===== cartões ===== */

.cartao-painel {
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-card);
}


/* ===== cartões de instância ===== */

/* Grade em vez de tabela: a informação que decide — há quanto tempo essa instância está muda — não
   cabia em coluna, e a URL de webhook, que é a mais longa e a menos consultada, empurrava o resto
   para fora da tela. */
.cartoes-instancia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: .75rem;
}

.cartao-instancia {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-card);
    overflow: hidden;
}

.cartao-instancia header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.cartao-instancia h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    word-break: break-all;
}

/* Faixa lateral, como a do cartão de contagem: dá para varrer a grade sem ler cada badge.

   Deslogada é a única que exige uma pessoa com o celular. Interrompida ganha âmbar porque a
   recuperação automática já está agindo e ninguém precisa fazer nada. Aberta e não observada não
   recebem nada — destaque que está sempre aceso deixa de avisar. */
.cartao-instancia.destaque {
    border-color: #f0c7c2;
    background: #fffaf9;
}

.cartao-instancia.destaque::before,
.cartao-instancia.atencao::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
}

.cartao-instancia.destaque::before {
    background: var(--status-red-fg);
}

.cartao-instancia.atencao::before {
    background: var(--status-amber-fg);
}

.cartao-instancia .linha-cartao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem 1rem;
    margin: 0;
}

.cartao-instancia .linha-cartao dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.cartao-instancia .linha-cartao dd {
    margin: .125rem 0 0;
    font-size: 13px;
    color: var(--text);
}

/* Tráfego é o que o cartão existe para mostrar: o estado de conexão não responde se a instância
   está passando mensagem, e esta linha responde. */
.cartao-instancia .trafego {
    padding: .625rem .75rem;
    border-radius: var(--r-control);
    background: var(--surface-muted);
}

.cartao-instancia .consulta-provedor {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
}

.cartao-instancia .resultado-consulta {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
}

.cartao-instancia .resultado-consulta.falha {
    color: var(--status-red-fg);
}

.cartao-instancia .webhook {
    margin: 0;
}

.cartao-instancia footer {
    padding-top: .625rem;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
}

/* ===== avisos ===== */

.aviso {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .75rem 1rem;
    margin: .75rem 0;
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    background: var(--surface);
    font-size: 13px;
    color: var(--text-2);
}

.aviso.erro {
    border-color: #f3d2cd;
    background: var(--status-red-bg);
    color: var(--status-red-fg);
}

.aviso.sucesso {
    border-color: #c8e6d5;
    background: var(--status-green-bg);
    color: var(--status-green-fg);
}

.aviso.desatualizado {
    border-color: #f0dcb8;
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

.detalhe {
    font-size: 12px;
    opacity: .85;
}

/* Erro de login: mora dentro do cartão branco, então não usa o fundo tonal do .aviso. */
.entrada .erro {
    margin: .75rem 0 0;
    font-size: 13px;
    color: var(--status-red-fg);
}

.carregando,
.vazio,
.sem-registro {
    color: var(--text-muted);
    font-size: 13px;
}

.vazio {
    padding: 2.5rem 1.25rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-card);
    background: var(--surface-alt);
    text-align: center;
}

/* Esqueleto em vez de "Carregando…": a tela já mostra a forma do que vem, e a troca não dá aquele
   pulo de layout que faz clicar no lugar errado. */
.carregando {
    display: block;
    height: 76px;
    border-radius: var(--r-card);
    border: 1px solid var(--border);
    background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-muted) 37%, var(--surface-alt) 63%);
    background-size: 400% 100%;
    animation: brilho 1.4s ease infinite;
    color: transparent;
    overflow: hidden;
}

@keyframes brilho {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

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

/* ===== contagens por estado ===== */

/* Os indicadores da visão geral têm a forma do cartão de contagem. A faixa lateral fica cinza: ela
   é a cor do estado, e indicador não é estado. */
.contagens,
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.contagem,
.indicador {
    position: relative;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-card);
    overflow: hidden;
}

/* Faixa lateral com a cor do estado: dá para ler o painel de longe, sem depender de leitura. */
.contagem::before,
.indicador::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--status-slate-fg);
}

.contagem[data-estado="Aberta"]::before { background: var(--status-green-fg); }
.contagem[data-estado="Interrompida"]::before { background: var(--status-amber-fg); }
.contagem[data-estado="Deslogada"]::before { background: var(--status-red-fg); }

.contagem .rotulo,
.indicador .rotulo {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
}

.contagem .valor,
.indicador .valor {
    display: block;
    margin-top: .125rem;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.contagem.destaque,
.indicador.destaque {
    border-color: #f0c7c2;
    background: #fffaf9;
}

.indicador.destaque::before {
    background: var(--status-red-fg);
}

/* ===== estado como badge ===== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 2px 8px;
    border-radius: var(--r-badge);
    background: var(--status-slate-bg);
    color: var(--status-slate-fg);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: currentColor;
}

.badge[data-estado="Aberta"],
.badge[data-desfecho="Entregue"] {
    background: var(--status-green-bg);
    color: var(--status-green-fg);
}

.badge[data-estado="Interrompida"],
.badge[data-desfecho="Pendente"] {
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

.badge[data-estado="Deslogada"],
.badge[data-desfecho="Desistida"] {
    background: var(--status-red-bg);
    color: var(--status-red-fg);
}

.badge.sim {
    background: var(--status-blue-bg);
    color: var(--status-blue-fg);
}

/* Consumidor que responde 429 pede ritmo menor e continua recebendo por retentativa. Âmbar, como
   Interrompida: há o que acompanhar, e nada a consertar. */
.badge.ritmo {
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

.badge.recusa {
    background: var(--status-red-bg);
    color: var(--status-red-fg);
}

/* ===== tabelas ===== */

.tabela {
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sombra-card);
    overflow: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 13px;
}

thead th {
    position: sticky;
    top: 0;
    padding: .625rem 1.25rem;
    text-align: left;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    white-space: nowrap;
}

tbody td {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border-row);
    vertical-align: middle;
    color: var(--text-2);
}

/* Data e hora não quebram em duas linhas: "04/09/2026" numa e "11:56" na outra custa mais para ler
   do que a coluna estreita economiza. Quando não couber, a tabela rola dentro do próprio cartão. */
.data-hora {
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: var(--surface-alt);
}

tbody td:first-child {
    font-weight: 500;
    color: var(--text);
}

.webhook,
.motivo-cru {
    font-family: "Geist Mono", ui-monospace, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--text-3);
}

.paginacao {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .875rem;
    font-size: 13px;
    color: var(--text-3);
}

/* ===== ficha de dados ===== */

.dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-card);
}

.dados dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.dados dd {
    margin: .25rem 0 0;
    color: var(--text);
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
}

.troca-webhook {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
}

.troca-webhook label {
    width: 100%;
}

.troca-webhook input {
    min-width: 22rem;
    flex: 1;
}

.situacao-lease {
    margin: 0 0 .75rem;
    font-size: 13px;
    color: var(--text-2);
}

/* ===== QR Code ===== */

.qrcode {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-card);
    text-align: center;
}

.qrcode img {
    width: 260px;
    height: 260px;
    image-rendering: pixelated;
    background: #fff;
    border-radius: 8px;
    /* O código é para a câmera, não para a área de transferência. */
    user-select: none;
    -webkit-user-drag: none;
}

.qrcode figcaption {
    max-width: 260px;
    margin-top: .75rem;
    font-size: 12px;
    color: var(--text-3);
}

.estado-atual {
    margin: 0 0 1rem;
    font-size: 13px;
    color: var(--text-2);
}

/* ===== confirmação ===== */

.confirmacao {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(13, 36, 64, .42);
    backdrop-filter: blur(1px);
}

.confirmacao .cartao {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: 0 24px 60px rgba(5, 20, 40, .35);
}

.confirmacao .pergunta {
    margin: 0;
    font-size: 14px;
    color: var(--text);
}

.confirmacao .alvo {
    margin: .75rem 0 1.25rem;
    padding: .5rem .75rem;
    border-radius: var(--r-control);
    background: var(--surface-muted);
    font-family: "Geist Mono", ui-monospace, Consolas, monospace;
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
}

.confirmacao .acoes {
    margin: 0;
    justify-content: flex-end;
}

/* No diálogo o vermelho é cheio: aqui o clique executa, e a hierarquia precisa dizer qual dos dois
   botões é o que não tem volta. */
.confirmacao .botao.perigo {
    border-color: #96271c;
    background: #b6362a;
    color: #fff;
}

.confirmacao .botao.perigo:hover:not(:disabled) {
    filter: brightness(1.08);
    background: #b6362a;
}

/* ===== usuários ===== */

/* Mesmo desenho do formulário de troca de webhook: rótulo em cima, campo abaixo, botão ao fim. */
.form-usuario,
.troca-senha {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-bottom: 1.5rem;
}

.form-usuario label,
.troca-senha label {
    margin-top: .625rem;
}

.form-usuario button,
.troca-senha button {
    margin-top: 1rem;
    align-self: flex-start;
}

.form-usuario .aviso,
.troca-senha .aviso {
    margin-top: .75rem;
}

/* Na tela de troca obrigatória o cartão é estreito: o botão ocupa a largura toda, como o de
   entrar. */
.entrada .troca-senha button,
.entrada .cartao > .botao.secundario {
    align-self: stretch;
}

.entrada .cartao > .botao.secundario {
    margin-top: .75rem;
}

.lista-usuarios td .botao {
    height: 30px;
    padding: 0 .75rem;
    font-size: 12px;
}

/* ===== visão geral ===== */

/* Subtítulo dentro de um bloco. Mais discreto que o h2 do bloco, que é a pergunta. */
.bloco h3 {
    margin: 1.25rem 0 .5rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.bloco .indicadores + .sem-registro,
.pior-queda {
    margin: .75rem 0 0;
    font-size: 13px;
    color: var(--text-2);
}

.bloco .tabela {
    margin-top: .75rem;
}

/* Fora agora e mais mudas lado a lado: são as duas listas de "o que olhar agora", e empilhadas a
   segunda some da tela. Meio a meio, porque têm o mesmo peso. */
.colunas-iguais {
    display: grid;
    gap: 0 1.5rem;
}

@media (min-width: 1100px) {
    .colunas-iguais {
        grid-template-columns: 1fr 1fr;
    }
}

.lista-bloco {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-bloco li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    background: var(--surface);
    font-size: 13px;
}

/* A mesma regra dos cartões de instância: vermelho só para quem precisa de gente. */
.lista-fora li[data-estado="Deslogada"] {
    border-color: #f0c7c2;
    background: #fffaf9;
}

.lista-bloco .tempo,
.lista-bloco .necessidade {
    color: var(--text-3);
}

.ultima-ocorrencia {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}