/* Portal Postal AI: identidade visual do Portal Postal (tokens do design system do backoffice,
   portalpostal-admin/frontend/app/globals.css). Tema claro e escuro por tokens; sem estilo inline (a CSP não deixa). */

/* Fontes do design system, servidas pelo painel (fontes/LICENCA.txt) */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fontes/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fontes/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fontes/quicksand-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fontes/quicksand-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* marca */
  --pp-azul: #1898F0;
  --pp-azul-vivo: #18B8F0;
  --pp-tinta: #181818;
  /* superfícies e texto (neutros do design system) */
  --fundo: #F4F6F8;
  --superficie: #FFFFFF;
  --superficie-2: #F4F6F8;
  --superficie-3: #E9ECF1;
  --borda: #D6DBE2;
  --borda-sutil: #E9ECF1;
  --texto: #1F262F;
  --texto-forte: #181818;
  --texto-sutil: #677483;
  --texto-fraco: #8C96A3;
  /* ação */
  --primaria: #1898F0;
  --primaria-forte: #0F7CC8;
  --primaria-texto: #FFFFFF;
  --primaria-suave: #EAF6FE;
  --primaria-borda: #A1D4F8;
  --link: #0F7CC8;
  --foco: 0 0 0 3px rgba(24, 152, 240, .22);
  /* semânticas */
  --destaque: #E59A0B;
  --destaque-suave: #FFF6E0;
  --perigo: #D8392B;
  --perigo-suave: #FDECEC;
  --ok: #1FA45A;
  --ok-suave: #E8F7EF;
  /* conversa */
  --balao-atendente: #0F7CC8;
  --balao-atendente-texto: #FFFFFF;
  --codigo-fundo: #1F262F;
  --codigo-texto: #E9ECF1;
  /* selo escuro da área, como o BACKOFFICE do admin */
  --selo-fundo: #181818;
  --selo-texto: #FFFFFF;
  --sombra: 0 1px 2px rgba(24, 38, 47, .05), 0 1px 3px rgba(24, 38, 47, .06);
  --sombra-media: 0 4px 8px -2px rgba(24, 38, 47, .08), 0 2px 4px -1px rgba(24, 38, 47, .04);
  --sombra-grande: 0 24px 48px -12px rgba(24, 38, 47, .18);
  --raio: 12px;
  --raio-medio: 8px;
  --fonte-titulo: 'Quicksand', 'Comfortaa', system-ui, sans-serif;
  --fonte-texto: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-codigo: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
/* a identidade do Portal Postal é clara (o backoffice não tem tema escuro): o escuro só com data-theme="dark" */
:root[data-theme="dark"] {
    --fundo: #12171D;
    --superficie: #1A2028;
    --superficie-2: #212934;
    --superficie-3: #29323E;
    --borda: #323B47;
    --borda-sutil: #29323E;
    --texto: #E9ECF1;
    --texto-forte: #FFFFFF;
    --texto-sutil: #8C96A3;
    --texto-fraco: #677483;
    --primaria: #3FA6F2;
    --primaria-forte: #6FBCF4;
    --primaria-texto: #062E4B;
    --primaria-suave: #0B2B44;
    --primaria-borda: #0B5F99;
    --link: #6FBCF4;
    --destaque: #F2B33D;
    --destaque-suave: #3A2C0E;
    --perigo: #F07466;
    --perigo-suave: #3B1A17;
    --ok: #4CC683;
    --ok-suave: #12301F;
    --balao-atendente: #0B5F99;
    --balao-atendente-texto: #FFFFFF;
    --codigo-fundo: #0D1116;
    --selo-fundo: #FFFFFF;
    --selo-texto: #181818;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --sombra-media: 0 4px 12px rgba(0, 0, 0, .35);
    --sombra-grande: 0 24px 48px -12px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 14px/1.5 var(--fonte-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.oculto { display: none !important; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--texto-forte); line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 2rem; font-weight: 300; letter-spacing: -.02em; }
h2 { font-size: 1.45rem; font-weight: 400; }
h3 { font-size: 1.1rem; font-weight: 500; margin-top: 1.5rem; }
.sutil { color: var(--texto-sutil); margin: .25rem 0 .75rem; }
.erro { color: var(--perigo); min-height: 1.2em; margin: .25rem 0; font-size: .88rem; }
a { color: var(--link); }
code, pre, kbd { font-family: var(--fonte-codigo); }
::placeholder { color: var(--texto-fraco); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }

label { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--texto-sutil); margin: .6rem 0; }
input, select, textarea {
  font: 14px/1.4 var(--fonte-texto); color: var(--texto); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-medio); padding: .6rem .75rem; width: 100%; transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: var(--foco); }
input[type="checkbox"] { width: auto; accent-color: var(--primaria); }

.botao {
  font: 600 14px/1.2 var(--fonte-texto); border-radius: var(--raio-medio); padding: .55rem 1rem; border: 1px solid transparent;
  cursor: pointer; background: var(--superficie-3); color: var(--texto); transition: background .12s, border-color .12s;
}
.botao:focus-visible { outline: none; box-shadow: var(--foco); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao.primario { background: var(--primaria); color: var(--primaria-texto); }
.botao.primario:hover:not(:disabled) { background: var(--primaria-forte); }
.botao.perigo { background: var(--perigo); color: #fff; }
.botao.fantasma { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.botao.fantasma:hover:not(:disabled) { background: var(--superficie-2); }
.botao.pequeno { padding: .35rem .7rem; font-size: .82rem; }
.botao.largo { width: 100%; margin-top: .5rem; }
.botao.grande { padding: .8rem 1rem; font-size: .95rem; }
.botao-icone { font-size: 1.2rem; background: none; border: none; color: var(--texto); cursor: pointer; padding: .25rem .5rem; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem; }
.tela-central { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.cartao-login { width: 100%; max-width: 420px; }
.cartao-login h1 { font-size: 1.7rem; }

/* marca: wordmark "portalpostal" (Quicksand fina, "postal" em azul) e o selo escuro da área */
.wordmark { font-family: var(--fonte-titulo); font-weight: 300; font-size: 21px; letter-spacing: -.01em; color: var(--texto-forte); white-space: nowrap; line-height: 1; }
.wordmark span { color: var(--pp-azul); }
.wordmark.grande { font-size: 28px; }
.selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--selo-fundo);
  color: var(--selo-texto); font: 700 10.5px/1 var(--fonte-texto); letter-spacing: .05em; white-space: nowrap;
}
.marca { display: flex; align-items: center; gap: .7rem; }
.login-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 1.75rem; }

/* login: duas colunas, como o backoffice */
.tela-login { min-height: 100%; display: flex; background: var(--superficie); }
.login-coluna { flex: 0 0 min(520px, 100%); display: flex; flex-direction: column; padding: 48px 56px 28px; background: var(--superficie); }
.form-login { width: 100%; max-width: 380px; margin: auto 0; }
.form-login h1 { margin-bottom: .6rem; }
.form-login .sutil { margin-bottom: 1.4rem; line-height: 1.6; }
.nota-acesso { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--texto-fraco); margin: 1rem 0 0; }
.rodape-login { font-size: .75rem; color: var(--texto-fraco); margin: 32px 0 0; }
.login-vitrine {
  flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fundo) 0%, var(--superficie) 100%); border-left: 1px solid var(--borda-sutil);
}
.vitrine-simbolo { position: absolute; right: -80px; bottom: -60px; width: 62%; max-width: 560px; opacity: .07; pointer-events: none; }
.vitrine-conteudo { position: relative; max-width: 460px; padding: 0 32px; }
.sobrelinha { font: 700 11px/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--primaria-forte); margin: 0; }
.vitrine-conteudo h2 { font-size: 2rem; font-weight: 300; letter-spacing: -.02em; margin: 14px 0 16px; }
.vitrine-conteudo p { color: var(--texto-sutil); line-height: 1.6; margin: 0; }
.vitrine-cartoes { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vitrine-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.vitrine-cartao span { display: block; font: 700 10.5px/1.2 var(--fonte-texto); letter-spacing: .07em; text-transform: uppercase; color: var(--texto-sutil); }
.vitrine-cartao b { display: block; font: 500 17px/1.3 var(--fonte-titulo); color: var(--texto-forte); margin-top: 6px; }

/* topo */
.topo {
  height: 60px; display: flex; align-items: center; gap: 1rem; padding: 0 18px;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.abas { display: flex; gap: .25rem; margin-left: 1rem; }
.aba { font: 500 14px/1 var(--fonte-texto); background: none; border: none; color: var(--texto-sutil); padding: .6rem .85rem; border-radius: var(--raio-medio); cursor: pointer; }
.aba:hover { background: var(--superficie-2); color: var(--texto); }
.aba.ativa { background: var(--primaria-suave); color: var(--primaria-forte); font-weight: 600; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: .6rem; color: var(--texto-sutil); font-size: .88rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--pp-azul); color: #fff; display: inline-grid;
  place-items: center; font: 700 12px/1 var(--fonte-texto); flex-shrink: 0;
}
.quem { display: flex; flex-direction: column; line-height: 1.2; margin-right: .3rem; }
.quem b { color: var(--texto-forte); font-weight: 600; font-size: .88rem; }
.quem small { color: var(--texto-sutil); font-size: .74rem; }
#app { height: 100%; display: flex; flex-direction: column; }
body:not(.admin) .so-admin { display: none !important; }
.so-celular { display: none; }

/* conversas */
.pagina { flex: 1; min-height: 0; }
.pagina.rolavel { overflow: auto; padding: 28px 32px 48px; max-width: 1200px; width: 100%; margin: 0 auto; }
.pagina.rolavel > h2 { font-size: 2rem; font-weight: 300; letter-spacing: -.02em; }
.chat { display: grid; grid-template-columns: 300px 1fr; }
.lateral { border-right: 1px solid var(--borda); background: var(--superficie); padding: 14px 12px; display: flex; flex-direction: column; min-height: 0; }
.filtro-todas { flex-direction: row; align-items: center; gap: .45rem; font-weight: 500; }
.lista-conversas { list-style: none; margin: .5rem 0 0; padding: 0; overflow: auto; flex: 1; }
.lista-conversas li button {
  width: 100%; text-align: left; font: inherit; background: none; border: 1px solid transparent; border-radius: 10px;
  padding: .6rem .7rem; color: var(--texto); cursor: pointer; display: flex; flex-direction: column; gap: .15rem;
}
.lista-conversas li button:hover { background: var(--superficie-2); }
.lista-conversas li button.ativa { background: var(--primaria-suave); border-color: var(--primaria-borda); }
.lista-conversas .titulo { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-forte); }
.lista-conversas .meta { font-size: .76rem; color: var(--texto-sutil); display: flex; gap: .4rem; flex-wrap: wrap; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-azul-vivo); display: inline-block; animation: pulsar 1.2s infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

.conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.vazio { margin: auto; max-width: 640px; padding: 24px; text-align: center; }
.vazio h2 { font-size: 2rem; font-weight: 300; letter-spacing: -.02em; }
.vazio .sutil { line-height: 1.6; margin-bottom: 1.25rem; }
.dicas { text-align: left; color: var(--texto-sutil); font-size: .88rem; margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.dicas li { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .7rem .9rem; box-shadow: var(--sombra); }
#com-conversa { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cabecalho-conversa { display: flex; justify-content: space-between; gap: 1rem; padding: 14px 22px; border-bottom: 1px solid var(--borda); background: var(--superficie); }
.cabecalho-conversa h2 { margin: 0; font-size: 1.2rem; font-weight: 500; }
.cabecalho-conversa .sutil { margin: .15rem 0 0; font-size: .84rem; }
.acoes-conversa { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.etiqueta { font-size: .76rem; font-weight: 600; background: var(--primaria-suave); border-radius: 999px; padding: .25rem .65rem; color: var(--primaria-forte); }

.mensagens { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 1rem; }
.turno { display: flex; flex-direction: column; gap: .6rem; max-width: 900px; width: 100%; margin: 0 auto; }
.balao-atendente {
  align-self: flex-end; max-width: 80%; background: var(--balao-atendente); color: var(--balao-atendente-texto);
  padding: .65rem .95rem; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-wrap: break-word;
}
.balao-atendente .anexo-info { display: block; font-size: .78rem; opacity: .85; margin-top: .3rem; }
.resposta { background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px 14px 14px 14px; padding: .9rem 1.1rem; box-shadow: var(--sombra); overflow-wrap: anywhere; line-height: 1.6; }
.resposta p { margin: .45rem 0; }
.resposta h3, .resposta h4, .resposta h5, .resposta h6 { margin: 1rem 0 .4rem; font-family: var(--fonte-titulo); color: var(--texto-forte); }
.resposta h3 { font-size: 1.1rem; font-weight: 600; } .resposta h4 { font-size: 1rem; font-weight: 600; }
.resposta ul, .resposta ol { margin: .45rem 0; padding-left: 1.4rem; }
.resposta code { background: var(--superficie-3); padding: .05rem .3rem; border-radius: 4px; font-size: .86em; }
.resposta pre { background: var(--codigo-fundo); color: var(--codigo-texto); padding: .8rem; border-radius: var(--raio-medio); overflow: auto; }
.resposta pre code { background: none; padding: 0; color: inherit; }
.resposta blockquote { margin: .6rem 0; padding: .6rem .9rem; border-left: 4px solid var(--pp-azul); background: var(--primaria-suave); border-radius: 0 8px 8px 0; }
.resposta table { border-collapse: collapse; margin: .5rem 0; font-size: .86rem; display: block; overflow: auto; max-width: 100%; }
.resposta th, .resposta td { border: 1px solid var(--borda); padding: .35rem .6rem; text-align: left; }
.resposta th { background: var(--superficie-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-sutil); }
.copiar { float: right; font-size: .75rem; }

.passos { border: 1px dashed var(--borda); border-radius: 10px; padding: .45rem .65rem; font-size: .84rem; color: var(--texto-sutil); background: var(--superficie); }
.passos > summary { cursor: pointer; list-style: none; display: flex; gap: .5rem; align-items: center; }
.passos > summary::-webkit-details-marker { display: none; }
.passos ol { margin: .4rem 0 .2rem; padding-left: 1.2rem; }
.passos li { margin: .2rem 0; }
.passo-nome { color: var(--texto); font-weight: 600; }
.passo-sub { opacity: .75; }
.passo-estado { display: inline-block; width: 1.1em; text-align: center; }
.passo-estado.ok { color: var(--ok); } .passo-estado.erro { color: var(--perigo); }
.passo-detalhe { white-space: pre-wrap; font-family: var(--fonte-codigo); font-size: .76rem; background: var(--superficie-2); border-radius: 6px; padding: .45rem; margin: .25rem 0; max-height: 260px; overflow: auto; color: var(--texto); }

.pergunta { border: 1px solid var(--primaria-borda); background: var(--primaria-suave); border-radius: var(--raio); padding: .8rem .95rem; }
.pergunta h4 { margin: 0 0 .55rem; font-size: .95rem; font-weight: 600; }
.opcoes { display: flex; flex-direction: column; gap: .4rem; }
.opcao { text-align: left; font: inherit; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: var(--raio-medio); padding: .5rem .75rem; cursor: pointer; }
.opcao:hover { border-color: var(--primaria); }
.opcao.escolhida { border-color: var(--primaria); box-shadow: var(--foco); }
.opcao small { display: block; color: var(--texto-sutil); }
.pergunta .respondida { color: var(--texto-sutil); font-size: .86rem; }

.aviso { font-size: .86rem; padding: .55rem .85rem; border-radius: var(--raio-medio); background: var(--destaque-suave); color: var(--texto); border: 1px solid transparent; }
.aviso.erro { background: var(--perigo-suave); color: var(--perigo); }
.rodape-turno { font-size: .74rem; color: var(--texto-fraco); text-align: right; }
.digitando { display: flex; gap: .5rem; align-items: center; color: var(--texto-sutil); font-size: .86rem; }
.digitando .pontinhos span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-azul); margin-right: 3px; animation: pulsar 1s infinite; }
.digitando .pontinhos span:nth-child(2) { animation-delay: .2s; } .digitando .pontinhos span:nth-child(3) { animation-delay: .4s; }

.caixa-mensagem { border-top: 1px solid var(--borda); background: var(--superficie); padding: 12px 22px 16px; }
.caixa-mensagem textarea { resize: vertical; min-height: 58px; max-height: 40vh; }
.linha-envio { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .5rem; }
.linha-envio .sutil { margin: 0 auto 0 0; font-size: .8rem; }
.anexos { display: flex; gap: .5rem; flex-wrap: wrap; }
.anexo { position: relative; }
.anexo img { height: 56px; border-radius: 6px; border: 1px solid var(--borda); display: block; }
.anexo button { position: absolute; top: -6px; right: -6px; border-radius: 50%; border: none; background: var(--perigo); color: #fff; width: 20px; height: 20px; cursor: pointer; font-size: .75rem; line-height: 1; }
.somente-leitura { text-align: center; padding: 12px; color: var(--texto-sutil); border-top: 1px solid var(--borda); margin: 0; background: var(--superficie); }

/* janelas */
.janela { border: 1px solid var(--borda); border-radius: var(--raio); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-grande); }
.janela::backdrop { background: rgba(24, 24, 24, .45); }
.janela-corpo { padding: 1.5rem; }
.janela-corpo h2 { font-size: 1.5rem; font-weight: 400; }
.rodape-janela { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
.resultado-agf { list-style: none; padding: 0; margin: .75rem 0 0; max-height: 340px; overflow: auto; }
.resultado-agf button { width: 100%; text-align: left; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-medio); padding: .6rem .75rem; margin-bottom: .4rem; cursor: pointer; }
.resultado-agf button:hover { border-color: var(--primaria); background: var(--primaria-suave); }
.resultado-agf small { display: block; color: var(--texto-sutil); }
.estrelas { display: flex; gap: .3rem; margin: .5rem 0; }
.estrelas button { font-size: 1.8rem; background: none; border: none; cursor: pointer; color: var(--borda); padding: 0 .1rem; }
.estrelas button.acesa { color: var(--destaque); }

/* tabelas administrativas */
.totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 1rem; }
/* rótulo em cima e número embaixo, como os cartões do backoffice */
.total { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.total b { display: block; font: 600 1.6rem/1.2 var(--fonte-texto); color: var(--texto-forte); margin-top: .3rem; }
.total span { color: var(--texto-sutil); font: 700 10.5px/1.2 var(--fonte-texto); letter-spacing: .07em; text-transform: uppercase; }
.tabela-rolavel { overflow: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.tabela-rolavel table { border-collapse: collapse; width: 100%; font-size: .86rem; }
.tabela-rolavel th, .tabela-rolavel td { padding: .6rem .8rem; border-bottom: 1px solid var(--borda-sutil); text-align: left; white-space: nowrap; }
.tabela-rolavel th { background: var(--superficie-2); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-sutil); }
.tabela-rolavel tr:last-child td { border-bottom: none; }
.tabela-rolavel td.numero, .tabela-rolavel th.numero { text-align: right; }
.form-linha { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin: 1rem 0; }
.form-linha label { flex: 1 1 160px; margin: 0; }
.form-linha .erro { flex-basis: 100%; }
.inativo { opacity: .55; }

@media (max-width: 960px) {
  .login-vitrine { display: none; }
  .login-coluna { flex: 1; padding: 32px 24px 20px; }
  .form-login { margin: 2rem auto; }
}
@media (max-width: 820px) {
  .so-celular { display: inline-block; }
  .topo { gap: .4rem; padding: 0 8px; }
  .topo .selo { display: none; }
  .topo .wordmark { font-size: 18px; }
  .abas { margin-left: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .aba { white-space: nowrap; padding: .45rem .6rem; }
  .usuario { margin-left: 0; flex-shrink: 0; }
  .usuario [data-acao="trocar-senha"], .usuario .quem, .usuario .avatar { display: none; }
  .cabecalho-conversa { flex-wrap: wrap; }
  .chat { grid-template-columns: 1fr; }
  .lateral { position: fixed; top: 60px; bottom: 0; left: 0; width: min(320px, 85vw); z-index: 5; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-media); }
  body.lateral-aberta .lateral { transform: none; }
  .mensagens { padding: 12px; }
  .caixa-mensagem { padding: 8px 12px 12px; }
  .balao-atendente { max-width: 92%; }
  .cabecalho-conversa { padding: 10px 12px; }
  .pagina.rolavel { padding: 16px; }
  .vazio h2, .pagina.rolavel > h2 { font-size: 1.6rem; }
}