/*
 * Atende: a identidade (D-21), a direção "escuro técnico" escolhida pelo Ricardo em 16/10/2026.
 * Segue a gramática dos sistemas da família (ícone em quadrado, rótulo em mono espaçado, código do
 * registro em mono, situação com bolinha e texto) com uma cor que nenhum deles usa: o ciano.
 *
 * Três temas: o do sistema (padrão), o claro e o escuro, escolhidos no botão Tema. O tema claro
 * define a paleta inteira em :root; o escuro redefine só os tokens, pelo sistema ou pelo botão.
 * Fontes servidas pelo próprio Atende (public/fonts, licença OFL), sem terceiro.
 */
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
    --fundo: #f7f7f8; --superficie: #ffffff; --afundado: #f0f0f2; --barra: #fbfbfc;
    --linha: #e4e4e8; --linha-forte: #cfcfd6;
    --tinta: #0f0f12; --tinta-suave: #3f3f48; --apagado: #6b6b76;
    --acento: #0e7490; --acento-vivo: #0891b2; --acento-suave: #e0f4f9; --sobre-acento: #ffffff; --brilho: rgba(8, 145, 178, .14);
    --erro: #b91c1c; --erro-suave: #fdecec;
    --baixa: #8b8b95; --normal: #0891b2; --alta: #b45309; --urgente: #b91c1c;
    --interna: #fdf8e8; --interna-borda: #ecd58c;
    --s-novo: #0891b2; --s-triagem: #7c3aed; --s-atend: #d97706; --s-espera: #8b8b95; --s-valid: #0d9488; --s-resolvido: #16a34a;
    --bug: #0e7490;
    --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fundo: #09090b; --superficie: #121216; --afundado: #0e0e11; --barra: #0c0c0f;
        --linha: #26262d; --linha-forte: #34343d;
        --tinta: #ededf0; --tinta-suave: #c2c2cc; --apagado: #8b8b97;
        --acento: #22c3ee; --acento-vivo: #22c3ee; --acento-suave: #0b2f3a; --sobre-acento: #04212a; --brilho: rgba(34, 195, 238, .18);
        --erro: #f87171; --erro-suave: #2a1414;
        --baixa: #6e6e7a; --normal: #22c3ee; --alta: #fbbf24; --urgente: #f87171;
        --interna: #1d1a10; --interna-borda: #4a3d1c;
        --s-novo: #22c3ee; --s-triagem: #a78bfa; --s-atend: #fbbf24; --s-espera: #6e6e7a; --s-valid: #2dd4bf; --s-resolvido: #4ade80;
        --bug: #0e7490;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --fundo: #09090b; --superficie: #121216; --afundado: #0e0e11; --barra: #0c0c0f;
    --linha: #26262d; --linha-forte: #34343d;
    --tinta: #ededf0; --tinta-suave: #c2c2cc; --apagado: #8b8b97;
    --acento: #22c3ee; --acento-vivo: #22c3ee; --acento-suave: #0b2f3a; --sobre-acento: #04212a; --brilho: rgba(34, 195, 238, .18);
    --erro: #f87171; --erro-suave: #2a1414;
    --baixa: #6e6e7a; --normal: #22c3ee; --alta: #fbbf24; --urgente: #f87171;
    --interna: #1d1a10; --interna-borda: #4a3d1c;
    --s-novo: #22c3ee; --s-triagem: #a78bfa; --s-atend: #fbbf24; --s-espera: #6e6e7a; --s-valid: #2dd4bf; --s-resolvido: #4ade80;
    --bug: #0e7490;
    color-scheme: dark;
}

body { font: 14.5px/1.5 var(--sans); background: var(--fundo); color: var(--tinta); -webkit-font-smoothing: antialiased; }
a { color: var(--acento); }
h1 { font: 400 2.4rem/1.1 var(--serif); letter-spacing: -.005em; margin: 0 0 1rem; }
h1 .numero { font: 500 .9rem var(--mono); vertical-align: middle; margin-right: .3rem; }
.mono, .numero, code, kbd { font-family: var(--mono); }
.olho { font: 500 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin: 0 0 .2rem; }
.ponto-final { color: var(--acento-vivo); }

/* A casca: barra lateral à esquerda, como nos sistemas da família. */
.casca { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); min-height: 100vh; }
.barra-lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .2rem; padding: 1rem .75rem; background: var(--barra); border-right: 1px solid var(--linha); }
.produto { display: flex; align-items: center; gap: .65rem; padding: 0 .4rem 1.1rem; color: var(--tinta); text-decoration: none; }
.produto b { display: block; font-size: .95rem; font-weight: 600; }
.produto small { display: block; font: .72rem var(--mono); color: var(--apagado); }
.icone-produto { width: 2rem; height: 2rem; flex: none; border-radius: .55rem; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--linha); color: var(--acento-vivo); }
.icone-produto svg { width: 1.1rem; height: 1.1rem; }
.secao-nav { font: .72rem var(--mono); color: var(--apagado); margin: .9rem .55rem .35rem; }
.barra-lateral .nav { display: flex; flex-direction: column; gap: .1rem; flex: 0; }
.barra-lateral .nav a { padding: .45rem .65rem; border-radius: .45rem; color: var(--tinta-suave); text-decoration: none; font-size: .9rem; }
.barra-lateral .nav a:hover { background: var(--afundado); color: var(--tinta); }
.barra-lateral .nav a.ativo { background: var(--superficie); color: var(--tinta); box-shadow: inset 2px 0 0 var(--acento-vivo), 0 0 0 1px var(--linha); }
.rodape-lateral { margin-top: auto; display: flex; flex-direction: column; gap: .55rem; padding: .8rem .4rem 0; border-top: 1px solid var(--linha); }
.rodape-lateral .quem { display: block; font-size: .88rem; }
.rodape-lateral .quem small { display: block; font: .7rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); margin-top: .1rem; }
.rodape-lateral .acoes { display: flex; gap: .4rem; }
.rodape-lateral form { margin: 0; }
.conteudo { min-width: 0; }
.pagina { padding: 1.5rem 1.75rem 5rem; }

/* Botões e controles */
.botao { font-weight: 600; background: var(--acento); color: var(--sobre-acento); border-radius: .5rem; padding: .5rem 1rem; box-shadow: 0 0 18px var(--brilho); }
.botao.discreto { background: var(--superficie); color: var(--tinta-suave); border: 1px solid var(--linha); box-shadow: none; padding: .35rem .75rem; }
.botao.discreto:hover { color: var(--tinta); border-color: var(--linha-forte); }
.tema { font-family: var(--mono); font-size: .75rem; white-space: nowrap; }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { background: var(--superficie); border: 1px solid var(--linha); border-radius: .5rem; color: var(--tinta); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acento-vivo); box-shadow: 0 0 0 3px var(--brilho); }
:focus-visible { outline-color: var(--acento-vivo); }
.filtro { border-radius: 999px; background: transparent; border-color: var(--linha); font-size: .85rem; }
.filtro.ativo { background: var(--acento-suave); border-color: var(--acento-vivo); color: var(--acento); }
.vistas { border-radius: .5rem; }
.vista { background: transparent; font-size: .85rem; }
.vista.ativo { background: var(--superficie); color: var(--tinta); box-shadow: inset 0 -2px 0 var(--acento-vivo); }
.chip { font: 500 .66rem var(--mono); letter-spacing: .06em; border-radius: .3rem; border-color: var(--linha-forte); }
.aviso { border-radius: .5rem; }

/* Cabeçalho do quadro: rótulo em mono, título em serifa, controles numa linha. */
.titulo-quadro { margin-bottom: .9rem; }
.titulo-quadro h1 { margin: 0; }
.titulo-quadro p { margin: .2rem 0 0; color: var(--tinta-suave); }
.cabecalho { gap: .6rem; }
.cabecalho .busca { flex: 1 1 16rem; max-width: 26rem; }
.dica { font-size: .8rem; }

/* O quadro */
.quadro { gap: .65rem; }
.coluna { background: transparent; border: 0; padding: 0; }
.coluna h2 { font: 500 .72rem var(--mono); letter-spacing: .02em; text-transform: lowercase; color: var(--tinta-suave); margin: 0 .15rem .55rem; }
.contagem { background: transparent; border: 0; color: var(--apagado); font-family: var(--mono); padding: 0; }
.coluna.alvo { background: var(--acento-suave); outline: 1px dashed var(--acento-vivo); border-radius: .6rem; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-left: 1px solid var(--linha); border-radius: .6rem; padding: .6rem .7rem; gap: .2rem; position: relative; }
.cartao::before { content: ""; position: absolute; left: -1px; top: .7rem; bottom: .7rem; width: 2px; border-radius: 2px; background: var(--normal); }
.cartao.prioridade-baixa::before { background: var(--baixa); }
.cartao.prioridade-alta::before { background: var(--alta); }
.cartao.prioridade-urgente::before { background: var(--urgente); }
.cartao:hover { border-color: var(--acento-vivo); box-shadow: 0 0 0 1px var(--acento-vivo), 0 0 20px var(--brilho); }
.cartao strong { font-weight: 500; }
.cartao .numero { font: .72rem var(--mono); color: var(--apagado); }
.cartao .meta { font-size: .78rem; }
.vazio { font-size: .8rem; border: 1px dashed var(--linha); border-radius: .6rem; padding: .6rem; margin: 0; text-align: center; }
.fila-vazia { border-radius: .6rem; border-color: var(--linha); background: var(--superficie); }
.fantasma { box-shadow: 0 0 0 1px var(--acento-vivo), 0 14px 30px rgba(0, 0, 0, .35); }

/* Tabela */
.tabela-rolagem { border-radius: .6rem; }
.tabela-chamados th { font: 500 .68rem var(--mono); letter-spacing: .1em; background: var(--afundado); }
.tabela-chamados .num { font-family: var(--mono); font-size: .82rem; }
.tabela-chamados tbody tr:hover td { background: var(--afundado); }

/* O chamado: conversa à esquerda, ficha e acesso remoto à direita. */
.detalhe { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; }
.voltar { font: .78rem var(--mono); }
.voltar a { color: var(--apagado); text-decoration: none; }
.voltar a:hover { color: var(--acento); }
/* O assunto vem como a pessoa escreveu, às vezes todo em maiúsculas: em serifa fica espremido. */
.detalhe h1 { font: 600 1.45rem/1.25 var(--sans); letter-spacing: -.01em; }
.mensagens { gap: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: .7rem; padding: .2rem 1rem; }
.mensagem { background: transparent; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; padding: .85rem 0; }
.mensagem:last-child { border-bottom: 0; }
.mensagem.interna { background: var(--interna); border: 1px solid var(--interna-borda); border-radius: .55rem; padding: .7rem .85rem; margin: .6rem 0; }
.autor span { font: .74rem var(--mono); }
.resposta { background: var(--superficie); border: 1px solid var(--linha); border-radius: .7rem; padding: 1rem; }
.lateral { background: var(--superficie); border-radius: .7rem; }
.lateral dt { font: .68rem var(--mono); letter-spacing: .1em; }
.acesso-remoto h2 { font: .68rem var(--mono); letter-spacing: .1em; }
.acesso-remoto .maquina strong { font-family: var(--mono); font-weight: 500; font-size: .88rem; }

/* Situação: bolinha e texto (D-16), sem o texto em caixa alta. */
.situacao { font-size: .8rem; }
.situacao::before { box-shadow: 0 0 6px currentColor; color: transparent; }

/* Reportar bug: na cor do produto, como na família; à esquerda, mas fora da barra lateral. */
.reportar-bug { left: calc(14.5rem + 1rem); }
.pilula-bug { background: var(--bug); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }

/* Janelas (tour, reportar bug) */
.janela { border-radius: .9rem; border-color: var(--linha); }
.janela h2 { font: 400 1.6rem var(--serif); }
.janela-fundo { background: rgba(4, 6, 10, .6); }

/* Entrar: como o login da família, com o brilho ciano atrás. */
.tela-entrar { background:
    radial-gradient(38rem 24rem at 22% 28%, var(--brilho), transparent 70%),
    radial-gradient(34rem 22rem at 82% 78%, var(--brilho), transparent 70%),
    var(--fundo); }
.tela-entrar main { position: relative; }
.entrar-canto { position: absolute; left: 1.5rem; top: 1.25rem; }
.entrar-rodape { position: absolute; left: 1.5rem; bottom: 1.1rem; font: .72rem var(--mono); color: var(--apagado); margin: 0; }
.entrar { width: 100%; max-width: 25rem; text-align: center; }
.entrar .olho { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.entrar .olho::before, .entrar .olho::after { content: ""; width: 2.5rem; height: 1px; background: var(--linha-forte); }
.entrar h1 { font-size: 4rem; margin: .3rem 0 .2rem; }
.entrar .chamada { color: var(--tinta-suave); margin: 0 0 1.4rem; }
.cartao-entrar { max-width: none; text-align: left; border-radius: .9rem; padding: 1.4rem; background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(6px); }
.cartao-entrar label { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.cartao-entrar .botao { width: 100%; padding: .7rem; }

@media (max-width: 760px) {
    .casca { grid-template-columns: 1fr; }
    .barra-lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem 1rem; border-right: 0; border-bottom: 1px solid var(--linha); }
    .produto { padding: 0; }
    .secao-nav { display: none; }
    .barra-lateral .nav { flex-direction: row; flex: 1; }
    .rodape-lateral { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: .5rem 0 0; }
    .pagina { padding: 1rem 1rem 5rem; }
    h1 { font-size: 2rem; }
    .entrar h1 { font-size: 3rem; }
    .entrar-rodape { display: none; }
    .reportar-bug { left: 1rem; }
}
@media print { .barra-lateral { display: none; } .casca { display: block; } }

/* D-22: os botões da tela escolhida. Contagem ao lado do item, busca no topo, cartão com prazo. */
.barra-lateral .nav a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.conta { font: .72rem var(--mono); color: var(--apagado); }
.nav a.ativo .conta { color: var(--acento); }
.status-maquinas { margin: auto .45rem 0; padding-top: 1rem; font: .7rem/1.4 var(--mono); color: var(--apagado); display: flex; gap: .45rem; align-items: baseline; }
.status-maquinas + .rodape-lateral { margin-top: .6rem; }
.luz { flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--baixa); }
.luz.acesa { background: var(--s-resolvido); box-shadow: 0 0 6px var(--s-resolvido); }
.apagado { color: var(--apagado); }

.barra-topo { display: flex; align-items: center; gap: .9rem; padding: .7rem 1.75rem; border-bottom: 1px solid var(--linha); }
.busca-global { flex: 1; max-width: 30rem; position: relative; margin: 0; }
.busca-global input { width: 100%; padding: .45rem 4.2rem .45rem .75rem; background: var(--superficie); }
.busca-global kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
kbd { font: .7rem var(--mono); border: 1px solid var(--linha); border-radius: .3rem; padding: 0 .35rem; color: var(--tinta-suave); background: var(--afundado); }
.barra-topo .botao { margin-left: auto; white-space: nowrap; }

.titulo-linha { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.titulo-linha > div:first-child { flex: 1; min-width: 14rem; }
.titulo-quadro h1 { font-size: 2.6rem; }

.cartao-topo { display: flex; justify-content: space-between; gap: .5rem; font: .72rem var(--mono); color: var(--apagado); white-space: nowrap; }
.cartao-topo .numero { overflow: hidden; text-overflow: ellipsis; }
.maquina-cartao.ligada { color: var(--acento); }
.cartao strong { margin: .15rem 0 .2rem; }
.cartao-pe { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .78rem; color: var(--tinta-suave); }
.cartao-pe > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prazo { flex: none; display: inline-flex; align-items: center; gap: .3rem; font: .74rem var(--mono); color: var(--apagado); white-space: nowrap; }
.prazo::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.prazo-ok { color: var(--s-resolvido); }
.prazo-at { color: var(--alta); }
.prazo-er { color: var(--urgente); }
.prazo-tela { color: var(--acento); }
.idade { font: .72rem var(--mono); color: var(--apagado); }
.cartao .meta { font-size: .74rem; }

@media (max-width: 760px) {
    .barra-topo { padding: .6rem 1rem; }
    .barra-topo kbd { display: none; }
    .barra-lateral .nav { flex-wrap: wrap; }
    .status-maquinas { margin: 0; padding: 0; width: 100%; }
}

/* O chamado (D-22): rótulo no topo, cabeça da caixa da conversa e o atalho de envio. */
.detalhe .olho { margin-top: .2rem; }
.cabeca-caixa { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .4rem; font: .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.atalho { margin-left: auto; font-size: .78rem; color: var(--apagado); white-space: nowrap; }
.resposta .linha { align-items: center; }

/* D-23: resolvidos que não cabem na tela ficam fora, sem rolar a página; a nota diz quantos. */
.cartao.fora-da-tela { display: none; }
.nota-resolvidos[hidden] { display: none; }
.nota-resolvidos { margin-top: .1rem; font-size: .74rem; }
/* As sete colunas cabem a partir de uns 1.550 px sem rolar de lado, e no quadro o pé da página não
   guarda espaço vazio: o "reportar bug" flutua à esquerda, longe da coluna de resolvidos. */
.quadro { grid-auto-columns: minmax(11rem, 1fr); }
.pagina:has(.quadro) { padding-bottom: 1rem; }
/* Resolvido é histórico: o cartão fica com número, assunto, quem pediu e "concluído". Sem a linha de
   prioridade e responsável, e sem a barra de cor da prioridade, cabem mais na tela. */
.coluna[data-estado="resolvido"] .cartao .meta { display: none; }
.coluna[data-estado="resolvido"] .cartao::before { display: none; }
.coluna[data-estado="resolvido"] .cartao { opacity: .82; }
.coluna[data-estado="resolvido"] .cartao:hover { opacity: 1; }

/* Campo com ícone dentro, como nas telas da família (D-25). */
.campo-icone { position: relative; display: block; margin-top: .3rem; }
.campo-icone svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--apagado); pointer-events: none; }
.campo-icone input { width: 100%; padding-left: 2.4rem; }
.links-entrar { display: flex; flex-wrap: wrap; gap: .3rem 1rem; justify-content: center; margin: 1rem 0 0; font-size: .85rem; }
.links-entrar a { color: var(--acento); text-decoration: none; }
.links-entrar a:hover { text-decoration: underline; }
.aviso.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); padding: .6rem .8rem; border-radius: .5rem; }

/* =====================================================================================
   D-31: as ideias de UI e os efeitos (16/10/2026). Tudo para quando o Windows pede menos
   animação (fim do bloco). Nada aqui muda o celular: as larguras novas valem de 761 px para cima.
   ===================================================================================== */

/* O título do cartão desliza até virar o título do chamado (Chrome e Edge 126+; nos outros, troca normal). */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* O cartão: bloco com o link esticado por cima. Iniciais e "Assumir" ficam acima do link. */
.cartao { color: var(--tinta); }
.cartao-link { color: inherit; text-decoration: none; outline: none; }
.cartao-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.cartao:focus-within { border-color: var(--acento-vivo); box-shadow: 0 0 0 2px var(--acento-vivo), 0 0 20px var(--brilho); }
.cartao .iniciais, .cartao .assumir { position: relative; z-index: 1; }
.cartao-pe { gap: .4rem; }
.quem-pediu { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.quem-pediu > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao .meta { display: flex; align-items: center; gap: .35rem; min-height: 1.3rem; }
.cartao .meta .responsavel { margin-left: auto; }
.sem-responsavel { color: var(--apagado); }
.iniciais { flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font: 600 .56rem/1 var(--sans); letter-spacing: .02em; background: var(--acento-suave); color: var(--acento); border: 1px solid var(--linha-forte); }
.iniciais.responsavel { background: var(--superficie); color: var(--tinta-suave); }
.assumir { margin-left: auto; font: 500 .72rem var(--sans); color: var(--acento); background: transparent; border: 1px solid var(--linha-forte); border-radius: 999px; padding: .05rem .55rem; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s, border-color .15s; }
.cartao:hover .assumir, .cartao:focus-within .assumir, .assumir:focus-visible { opacity: 1; }
.assumir:hover { background: var(--acento-suave); border-color: var(--acento-vivo); }

/* O prazo também como barra; o texto do prazo continua sendo o sinal. */
.barra-prazo { display: block; height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; margin: .15rem 0 .05rem; }
.barra-prazo::after { content: ""; display: block; height: 100%; width: var(--usado); border-radius: inherit; background: var(--s-resolvido); transition: width .6s ease; }
.barra-prazo.perto::after { background: var(--alta); }
.barra-prazo.estourou::after { background: var(--urgente); }

/* A luz do cursor: um halo ciano bem fraco onde o mouse está. */
.cartao:hover { background-image: radial-gradient(14rem circle at var(--x, 50%) var(--y, 50%), var(--brilho), transparent 70%); }

/* Atrasado pulsa; tela aberta ganha a borda que gira. */
.prazo-er::before { animation: atende-pulso 1.6s ease-out infinite; }
@keyframes atende-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgente) 70%, transparent); } 100% { box-shadow: 0 0 0 .45rem transparent; } }
@property --atende-giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cartao.tela-aberta::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
    background: conic-gradient(from var(--atende-giro), transparent 0 68%, var(--acento-vivo) 86%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: atende-giro 2.4s linear infinite; }
@keyframes atende-giro { to { --atende-giro: 360deg; } }

/* Chamado que chega na atualização entra com brilho. */
.cartao.chegou { animation: atende-chegar .7s cubic-bezier(.2, .9, .25, 1.1) both, atende-brilho 2.6s ease-out .3s both; }
@keyframes atende-chegar { from { opacity: 0; transform: translateY(-.9rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes atende-brilho { 0% { box-shadow: 0 0 0 2px var(--acento-vivo), 0 0 26px var(--brilho); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Arrastar: o cartão levanta e inclina; a coluna de destino acende; em Resolvido, pousa com o visto. */
/* O .cartao acima ganha position: relative, e este arquivo vem depois do atende.css: sem a regra
   mais específica, a cópia que segue o mouse caía no pé da página e o arrasto ficava sem cartão na mão. */
.cartao.fantasma { position: fixed; z-index: 80; }
.fantasma { transform: rotate(2.5deg) scale(1.03); box-shadow: 0 0 0 1px var(--acento-vivo), 0 22px 40px -10px rgba(0, 0, 0, .55); transition: transform .12s ease; }
.fantasma.pousando { transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), transform .35s ease, opacity .35s ease; transform: none; }
.fantasma.sumindo { opacity: 0; }
.fantasma .visto { position: absolute; right: .7rem; top: 50%; width: 2.2rem; height: 2.2rem; margin-top: -1.1rem; padding: .2rem; border-radius: 50%; background: var(--superficie); box-shadow: 0 0 0 4px var(--superficie), 0 0 18px color-mix(in srgb, var(--s-resolvido) 35%, transparent); }
.visto circle { stroke: var(--s-resolvido); stroke-dasharray: 63; stroke-dashoffset: 63; animation: atende-tracar .35s ease .3s forwards; }
.visto path { stroke: var(--s-resolvido); stroke-dasharray: 16; stroke-dashoffset: 16; animation: atende-tracar .25s ease .6s forwards; }
@keyframes atende-tracar { to { stroke-dashoffset: 0; } }
.coluna.alvo { box-shadow: 0 0 0 3px var(--brilho); transition: background .2s, box-shadow .2s; }

/* Número que rola ao mudar. */
[data-rola] { display: inline-block; }
.rolou-sobe { animation: atende-sobe .45s cubic-bezier(.2, .8, .2, 1); }
.rolou-desce { animation: atende-desce .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes atende-sobe { from { transform: translateY(.55em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes atende-desce { from { transform: translateY(-.55em); opacity: 0; } to { transform: none; opacity: 1; } }

/* Trocando filtro: esqueleto no lugar do texto, em vez de tela parada. */
.quadro.carregando .cartao { pointer-events: none; }
.quadro.carregando .cartao > * { visibility: hidden; }
.quadro.carregando .cartao { background: linear-gradient(90deg, var(--superficie) 0%, var(--afundado) 45%, var(--superficie) 90%) 0 0 / 300% 100%; animation: atende-esqueleto 1.2s ease infinite; }
@keyframes atende-esqueleto { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* O aviso no pé da tela (public/js/atende.js). */
.aviso-flutuante { position: fixed; left: 50%; bottom: 1.3rem; z-index: 70; display: flex; align-items: center; gap: .9rem; max-width: calc(100vw - 2rem); background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: .7rem; padding: .55rem .6rem .55rem 1rem; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55); font-size: .9rem; transform: translate(-50%, 160%); transition: transform .35s cubic-bezier(.2, .9, .25, 1.1); overflow: hidden; }
.aviso-flutuante.visivel { transform: translate(-50%, 0); }
.aviso-flutuante .aviso-desfazer { padding: .2rem .7rem; }
.aviso-flutuante .aviso-desfazer[hidden] { display: none; }
.aviso-tempo { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acento-vivo); }
.aviso-flutuante.visivel .aviso-tempo { animation: atende-tempo 5s linear forwards; }
@keyframes atende-tempo { from { width: 100%; } to { width: 0; } }

/* O mascote reage: comemorando pula, acenando dá tchau. */
.mascote-comemorando { animation: atende-pulo .55s cubic-bezier(.3, .7, .4, 1) .15s 3; transform-origin: 50% 90%; }
@keyframes atende-pulo { 0%, 100% { transform: none; } 45% { transform: translateY(-14%) rotate(-4deg); } 70% { transform: translateY(0) scale(1.04, .96); } }
.mascote-acenando { animation: atende-aceno 1s ease-in-out .2s 2; transform-origin: 50% 95%; }
@keyframes atende-aceno { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 75% { transform: rotate(5deg); } }

/* Entrar: a grade de rede no fundo e uma varredura lenta, como um monitor. Só nesta tela. */
.tela-entrar::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%); opacity: .55; }
.tela-entrar::after { content: ""; position: fixed; left: 0; right: 0; top: -6rem; height: 6rem; pointer-events: none; background: linear-gradient(transparent, var(--brilho), transparent); animation: atende-varrer 6s ease-in-out infinite; }
/* A grade e a varredura ficam atrás do formulário: o main sobe uma camada. */
.tela-entrar::before, .tela-entrar::after { z-index: 0; }
.tela-entrar main { z-index: 1; }
@keyframes atende-varrer { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 6rem)); } }

/* O chamado: título com o "Ver tela" ao lado, andamento na conversa, lateral com botões. */
.titulo-chamado { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.titulo-chamado h1 { flex: 1; min-width: 14rem; }
.ver-tela-topo { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.ver-tela-topo .mono { font-size: .78rem; font-weight: 500; opacity: .85; }
.ver-tela-topo .luz { background: var(--sobre-acento); box-shadow: none; }
.autor .iniciais { align-self: center; }
.mensagens .evento { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--linha); font-size: .8rem; color: var(--apagado); }
.mensagens .evento:last-child { border-bottom: 0; }
.mensagens .evento time { font: .72rem var(--mono); white-space: nowrap; }
.mensagens .evento .situacao { color: var(--tinta-suave); }
.pilulas, .proximos { display: flex; flex-wrap: wrap; gap: .3rem; }
.proximos { margin-top: .4rem; }
.pilula { font: 500 .78rem var(--sans); color: var(--tinta-suave); background: transparent; border: 1px solid var(--linha-forte); border-radius: 999px; padding: .2rem .7rem; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.pilula:hover { border-color: var(--acento-vivo); color: var(--tinta); }
.pilula:active { transform: scale(.95); }
.pilula[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento-vivo); color: var(--acento); font-weight: 600; }
.pilula.prioridade-alta[aria-pressed="true"] { background: color-mix(in srgb, var(--alta) 16%, transparent); border-color: var(--alta); color: var(--alta); }
.pilula.prioridade-urgente[aria-pressed="true"] { background: var(--erro-suave); border-color: var(--urgente); color: var(--urgente); }
.responsavel-linha { display: flex; gap: .4rem; align-items: center; }
.responsavel-linha select { flex: 1; min-width: 0; }
.resposta > label { font-weight: 600; font-size: .9rem; }
.campo-resposta { position: relative; }
.campo-resposta textarea { width: 100%; }
.menu-respostas { position: absolute; left: .5rem; right: .5rem; top: calc(100% - .4rem); z-index: 30; list-style: none; margin: 0; padding: .3rem; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: .6rem; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5); max-height: 15rem; overflow: auto; }
.menu-respostas li { padding: .45rem .6rem; border-radius: .4rem; cursor: pointer; display: flex; flex-direction: column; }
.menu-respostas li small { color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-respostas li.marcada { background: var(--acento-suave); }
.rascunho { margin: -.5rem 0 0; font: .72rem var(--mono); color: var(--apagado); }

/* A área de anexos (x-anexar), no desenho da área de envio do Pagaê (D-32): zona grande e
   centralizada que inteira abre o seletor, borda tracejada que acende ao passar e ao arrastar, e a
   fila com miniatura ou extensão, prévia no nome e Remover. */
.anexar { display: flex; flex-direction: column; gap: .55rem; }
.anexar-zona { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; padding: 1.25rem 1rem; text-align: center; font-weight: 400; cursor: pointer;
    border: 1.5px dashed var(--linha-forte); border-radius: .7rem; background: var(--afundado); color: var(--tinta-suave); transition: border-color .2s, background .2s, box-shadow .2s; }
.anexar-zona:hover { border-color: var(--acento-vivo); background: color-mix(in srgb, var(--acento-suave) 45%, var(--afundado)); }
.anexar-zona:focus-within { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }
.anexar-zona.arrastando { border-color: var(--acento-vivo); background: var(--acento-suave); box-shadow: 0 0 0 4px var(--brilho); }
.anexar-icone { color: var(--acento); margin-bottom: .1rem; transition: transform .2s; }
.anexar-zona:hover .anexar-icone, .anexar-zona.arrastando .anexar-icone { transform: translateY(-2px); }
.anexar-titulo { font-size: .92rem; font-weight: 600; color: var(--tinta); }
.anexar-ajuda { font-size: .8rem; color: var(--apagado); }
.anexar-ajuda u { color: var(--acento); text-underline-offset: 2px; }
.anexar-entrada { position: absolute; width: 1px; height: 1px; opacity: 0; }
.anexar-fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.anexar-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px dashed var(--linha-forte); border-radius: .7rem; min-width: 0; animation: atende-chegar .3s ease both; }
.anexar-miniatura { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .45rem; border: 1px solid var(--linha); background: var(--afundado); display: grid; place-items: center; overflow: hidden; font: 600 .62rem var(--mono); color: var(--tinta-suave); }
.anexar-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.anexar-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anexar-nome { font: .84rem var(--mono); color: var(--tinta); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexar-nome:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.anexar-detalhe { font-size: .74rem; color: var(--apagado); }
.anexar-estado { margin: 0; font: .74rem var(--mono); color: var(--acento); }
.anexar .erro-campo { margin: 0; }
.janela.janela-previa { width: min(56rem, 100%); }
.janela-previa h2 { font: 500 .9rem var(--mono); margin: 0 0 .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-corpo { display: grid; place-items: center; min-height: 10rem; background: var(--afundado); border: 1px solid var(--linha); border-radius: .6rem; overflow: hidden; }
.previa-corpo img { max-width: 100%; max-height: 70vh; display: block; }
.previa-corpo iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.previa-corpo p { padding: 1.5rem; margin: 0; text-align: center; }
.campo-anexos { display: flex; flex-direction: column; gap: .3rem; }
.rotulo-campo { font-weight: 600; font-size: .9rem; }
.bloco-respostas .formulario { gap: .4rem; margin-bottom: .6rem; }
.bloco-respostas .lista-catalogo li > span { display: flex; flex-direction: column; min-width: 0; }
.resposta-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .tela-entrar::after { display: none; }
    @view-transition { navigation: none; }
}

/* Os nomes das colunas escritos como o resto da tela ("Aguardando minha ação" nos filtros): com
   maiúscula e na letra do texto, não em minúsculas mono. Pedido do Ricardo, 16/10/2026. O número
   continua em mono. */
.coluna h2 { font: 500 .85rem var(--sans); text-transform: none; letter-spacing: 0; color: var(--tinta-suave); }
.coluna h2 .contagem { font: .78rem var(--mono); }

/* Etiqueta de setor no cartão (D-47): a equipe localiza a fila de um setor sem abrir o chamado. */
.setor-cartao { font-size: .68rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: var(--acento-suave); color: var(--acento); white-space: nowrap; flex: 0 0 auto; }