/* =====================================================================
   Central Colina - sistema visual (rodada 3, aprovada pelo Joao)
   Claro, preto e azul. Computador primeiro; celular funciona sem rolagem lateral.

   Regras que sustentam o resto:
   1. Cor tem funcao: azul e acao e selecao, vermelho e prazo estourado,
      verde e venda e andamento. Preto e o botao principal e o trilho.
   2. Fonte Figtree, hospedada aqui. Nenhum pedido a servidor de terceiro.
   3. Numero e hora sempre tabulares: nao dancam ao atualizar.

   Rodada 5 (23/10, pedido do Joao: "tudo preto"): TODAS as telas tem o mesmo palco (--noite-2, sem cartao branco
   em volta do corpo). Branco so nos blocos (cartao, tabela, formulario, card). Titulo solto no palco em --p-txt,
   texto secundario em --p-txt-2. Barra lateral com nomes a partir de 1200px (216px); de 900 a 1199px so icones.
   Contraste WCAG calculado (minimo AA 4,5:1), pares novos deste arquivo:
     branco / #0D0D0D 19,44   #9AA0A8 / #0D0D0D 7,37   (trilho: item ativo e inativo)
     branco / #1F1F1F 16,48   (item ativo do trilho, --noite-3)
     #0D0D0D / #45A2DB 6,89   (contador de conversas esperando no trilho)
     #A3A3A3 / #1F1F1F 6,53   (filtro inativo; --p-txt-2 em --noite-3)
     #0D0D0D / #FFFFFF 19,44  (filtro ativo: pilula branca)
     #1A1A1A / #FFFFFF 17,40  e  #646A73 / #FFFFFF 5,45  (texto e texto-3 dentro dos blocos brancos)
   Aviso: --txt-3 so vale sobre branco; sobre o palco use --p-txt-2.

   TEMA CLARO/ESCURO (23/10, pedido do Joao: "versao clara e escura, adaptando automaticamente a da maquina e podendo alterar").
   Tokens no :root = escuro (igual ao de antes); claro em :root[data-tema="claro"] e em @media (prefers-color-scheme:light)
   :root:not([data-tema="escuro"]). O PHP poe data-tema a partir do cookie colina_tema (auto|claro|escuro); auto = sem atributo.
   --noite-0 e --trilho ficam PRETOS nos dois temas (botao preto, texto sobre azul). Barra e topo usam --moldura.
   Contraste WCAG (formula de luminancia relativa), tema CLARO, todos AA (texto 4,5:1):
     #1A1A1A / #F2F3F5 palco 15,68   / #FFFFFF 17,40   / #E9EBEE sup 14,57  / #DEE1E5 13,27  / #E3E6EA bolha 13,90
     #5A6068 / #F2F3F5  5,72   / #FFFFFF  6,35   / #E9EBEE  5,32  / #DEE1E5  4,84  / #E3E6EA  5,07  / #EEF0F2 5,56
     #A42626 vermelho / #F2F3F5 6,56  / #E9EBEE 6,10  / #DEE1E5 5,55  / #FFFFFF 7,28
     #146B42 verde    / #F2F3F5 5,89  / #E9EBEE 5,47  / #DEE1E5 4,98  / #FFFFFF 6,54
     #7A5200 ambar    / #F2F3F5 6,23  / #E9EBEE 5,79  / #DEE1E5 5,28  / #FFFFFF 6,92
     #FFFFFF / #0D0D0D (pilula ativa, botao preto) 19,44      #0D0D0D / #45A2DB (texto sobre o azul) 6,89
     #646A73 (--txt-3) / #F2F3F5 4,91  / #E9EBEE 4,57  / #FFFFFF 5,45
   Link e destaque no claro: preto #1A1A1A com sublinhado (texto azul sobre branco daria 2,82:1, reprovado). Azul so como preenchimento.
   Escuro: os pares do bloco anterior seguem valendo, sem mudanca.
   ===================================================================== */

@font-face{
  font-family:"Figtree";
  src:url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}

:root{
  --fundo:#F2F3F5; --painel:#FFFFFF; --borda:#E7E9EC; --borda-2:#D9DDE2;
  --trilho:#0D0D0D;
  --teal:#45A2DB; --teal-escuro:#45A2DB; --teal-claro:#EAF4FB; --link:#1A1A1A;
  --txt:#1A1A1A; --txt-2:#5A6068;
  /* #8C929A da tela aprovada dava 3,1:1 no branco; escurecido para passar 4,5:1 */
  --txt-3:#646A73;
  --verde:#1E9E5A; --verde-claro:#E6F5EC; --verde-txt:#17784A;
  --vermelho:#D93636; --vermelho-claro:#FCEAEA; --vermelho-txt:#A42626;
  --cinza:#8C929A; --cinza-claro:#F1F3F5; --azul:#45A2DB; --azul-claro:#EAF4FB;
  --f:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ritmo em multiplos de 4 e raios; nao sao cores */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --r1:10px; --r2:14px; --r3:18px;
  --t1:1.5rem; --t2:1.2rem; --t3:1rem; --t4:.9rem; --t5:.8rem; --t6:.72rem;
  --transicao:140ms cubic-bezier(.2,.7,.4,1);

  /* So preto, branco e o azul da marca (pedido do Joao, 23/10): nada de azul escuro.
     Sobre o azul vai texto preto (6,89:1); branco no azul daria 2,82:1. */
  --noite-0:#0D0D0D;   /* PRETO FIXO nos dois temas: botao preto, texto sobre azul, toast. Nunca redefinir. */
  --azul-forte:#45A2DB;
  --ambar:#9A5B00;

  /* ============ Cores com significado (rodada 5, etapa 1; pedido da reuniao de 23/10) ============
     A base segue preto, branco e azul. Cor so entra quando diz algo: de onde veio o lead, em que desfecho esta, em que estado esta.
       origem:   WhatsApp #25D366 (verde da marca), Instagram #E1306C (rosa da marca). So como ponto, selo redondo e icone: nunca como fundo de texto.
       desfecho: #45A2DB (o azul da marca), botoes e selos.
       estados:  venda #5FD39A, atraso #FF8A80, aguardando #F5CD47.
     Texto sobre cada fundo, pela formula de luminancia relativa (calculado em 23/10):
       preto #0D0D0D / #25D366 9,80     (icone do WhatsApp)      branco / #25D366 1,98  (reprovado, nao usar)
       branco #FFFFFF / #E1306C 4,34    (icone do Instagram: grafico, minimo 3:1)     preto / #E1306C 4,48  (menos de 4,5: sem texto sobre o rosa)
       preto / #45A2DB 6,89   preto / #5FD39A 10,43   preto / #FF8A80 8,51   preto / #F5CD47 12,68   (texto de selo e de botao)
     Os fundos de estado e de desfecho sao os mesmos nos dois temas; o texto sobre eles e sempre preto. */
  --origem-wa:#25D366; --on-wa:#0D0D0D;
  --origem-ig:#E1306C; --on-ig:#FFFFFF;
  --desf:#45A2DB; --on-desf:#0D0D0D;
  --st-venda:#5FD39A; --st-atraso:#FF8A80; --st-espera:#F5CD47; --on-st:#0D0D0D;

  /* ============ TEMA (23/10): cada papel tem um token; escuro aqui, claro mais abaixo ============
     moldura = topo e trilho; palco = fundo de todas as telas; sup = coluna, chip, trilho de abas;
     bloco-p = bloco que fica direto no palco (KPI, lista do Ao vivo, cabecalho da OS);
     p-* = texto e estado que ficam direto no palco ou na moldura. Branco dos cartoes/cards/tabelas e fixo. */
  --moldura:#0D0D0D; --moldura-2:#1E1E1E; --moldura-txt:#FFFFFF; --moldura-txt-2:#9AA0A8; --moldura-linha:transparent;
  --palco:#141414; --sup:#1F1F1F; --sup-2:#2A2A2A; --linha:#333333;
  --bloco-p:#1F1F1F; --campo-p:#1F1F1F; --bolha-ent:#1F1F1F; --faixa-nota:#0D0D0D;
  --p-txt:#FFFFFF; --p-txt-2:#A3A3A3;
  --p-link:#45A2DB; --link-deco:none;
  --p-vermelho:#FF8A80; --p-verde:#5FD39A; --p-amarelo:#F5CD47;
  --pill-bg:#FFFFFF; --pill-txt:#0D0D0D; --pill-hover:#E7E9EC;
  --foco:#FFFFFF; --rolagem:#555555; --anel-btn:transparent;
  --bloco-anel:0 0 0 0 transparent; --tile-sombra:0 1px 0 rgba(0,0,0,.4);
  --veu:rgba(0,0,0,.72); --sombra-login:rgba(0,0,0,.7);
  --lg-e:contents; --lg-c:none;
  --esquema:dark;
  /* papel de parede da area de mensagens: bicicleta, roda, balao, traco. Tom sobre tom, 5% de branco (escuro) ou 6% de preto (claro) */
  --papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='26' r='9'/%3E%3Ccircle cx='24' cy='26' r='1.6'/%3E%3Cpath d='M84 18h22a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H94l-6 6v-6h-4a5 5 0 0 1-5-5V23a5 5 0 0 1 5-5z'/%3E%3Cpath d='M132 40l8 8-8 8'/%3E%3Ccircle cx='40' cy='96' r='7'/%3E%3Ccircle cx='64' cy='96' r='7'/%3E%3Cpath d='M40 96l8-12h12l4 12M48 84l6 12'/%3E%3Cpath d='M112 92h18M112 100h12'/%3E%3Ccircle cx='20' cy='140' r='2'/%3E%3Ccircle cx='100' cy='140' r='2'/%3E%3Cpath d='M130 130l6 6M136 130l-6 6'/%3E%3C/svg%3E");
  --chev-menu:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23A3A3A3%27 stroke-width=%272.5%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
  --chev-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345A2DB' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- TEMA CLARO ("tudo branco"). Mesmos nomes, outros valores; o azul #45A2DB segue so como preenchimento com texto preto.
   Dois gatilhos com o mesmo conteudo: a escolha manual (data-tema="claro") e o aparelho (auto, sem atributo). ---- */
:root[data-tema="claro"]{
  --moldura:#FFFFFF; --moldura-2:#EEF0F2; --moldura-txt:#1A1A1A; --moldura-txt-2:#5A6068; --moldura-linha:#E7E9EC;
  --palco:#F2F3F5; --sup:#E9EBEE; --sup-2:#DEE1E5; --linha:#D5D9DE;
  --bloco-p:#FFFFFF; --campo-p:#FFFFFF; --bolha-ent:#E3E6EA; --faixa-nota:#F2F3F5;
  --p-txt:#1A1A1A; --p-txt-2:#5A6068;
  --p-link:#1A1A1A; --link-deco:underline;
  --p-vermelho:#A42626; --p-verde:#146B42; --p-amarelo:#7A5200;
  --pill-bg:#0D0D0D; --pill-txt:#FFFFFF; --pill-hover:#2A2A2A;
  --foco:#1A1A1A; --rolagem:#B4BAC1; --anel-btn:#D5D9DE;
  --bloco-anel:0 0 0 1px #E7E9EC; --tile-sombra:0 0 0 1px #E7E9EC,0 1px 2px rgba(13,13,13,.08);
  --veu:rgba(13,13,13,.45); --sombra-login:rgba(13,13,13,.12);
  --lg-e:none; --lg-c:contents;
  --esquema:light;
  --papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23000000' stroke-opacity='.06' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='26' r='9'/%3E%3Ccircle cx='24' cy='26' r='1.6'/%3E%3Cpath d='M84 18h22a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H94l-6 6v-6h-4a5 5 0 0 1-5-5V23a5 5 0 0 1 5-5z'/%3E%3Cpath d='M132 40l8 8-8 8'/%3E%3Ccircle cx='40' cy='96' r='7'/%3E%3Ccircle cx='64' cy='96' r='7'/%3E%3Cpath d='M40 96l8-12h12l4 12M48 84l6 12'/%3E%3Cpath d='M112 92h18M112 100h12'/%3E%3Ccircle cx='20' cy='140' r='2'/%3E%3Ccircle cx='100' cy='140' r='2'/%3E%3Cpath d='M130 130l6 6M136 130l-6 6'/%3E%3C/svg%3E");
  --chev-menu:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235A6068%27 stroke-width=%272.5%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
  --chev-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:light){
  :root:not([data-tema="escuro"]){
    --moldura:#FFFFFF; --moldura-2:#EEF0F2; --moldura-txt:#1A1A1A; --moldura-txt-2:#5A6068; --moldura-linha:#E7E9EC;
    --palco:#F2F3F5; --sup:#E9EBEE; --sup-2:#DEE1E5; --linha:#D5D9DE;
    --bloco-p:#FFFFFF; --campo-p:#FFFFFF; --bolha-ent:#E3E6EA; --faixa-nota:#F2F3F5;
    --p-txt:#1A1A1A; --p-txt-2:#5A6068;
    --p-link:#1A1A1A; --link-deco:underline;
    --p-vermelho:#A42626; --p-verde:#146B42; --p-amarelo:#7A5200;
    --pill-bg:#0D0D0D; --pill-txt:#FFFFFF; --pill-hover:#2A2A2A;
    --foco:#1A1A1A; --rolagem:#B4BAC1; --anel-btn:#D5D9DE;
    --bloco-anel:0 0 0 1px #E7E9EC; --tile-sombra:0 0 0 1px #E7E9EC,0 1px 2px rgba(13,13,13,.08);
    --veu:rgba(13,13,13,.45); --sombra-login:rgba(13,13,13,.12);
    --lg-e:none; --lg-c:contents;
    --esquema:light;
    --papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23000000' stroke-opacity='.06' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='26' r='9'/%3E%3Ccircle cx='24' cy='26' r='1.6'/%3E%3Cpath d='M84 18h22a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H94l-6 6v-6h-4a5 5 0 0 1-5-5V23a5 5 0 0 1 5-5z'/%3E%3Cpath d='M132 40l8 8-8 8'/%3E%3Ccircle cx='40' cy='96' r='7'/%3E%3Ccircle cx='64' cy='96' r='7'/%3E%3Cpath d='M40 96l8-12h12l4 12M48 84l6 12'/%3E%3Cpath d='M112 92h18M112 100h12'/%3E%3Ccircle cx='20' cy='140' r='2'/%3E%3Ccircle cx='100' cy='140' r='2'/%3E%3Cpath d='M130 130l6 6M136 130l-6 6'/%3E%3C/svg%3E");
    --chev-menu:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235A6068%27 stroke-width=%272.5%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
    --chev-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--moldura);color:var(--txt);
  font:400 14px/1.45 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--teal-claro);color:var(--txt)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--r1)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* barra de rolagem com as cores do tema */
*{scrollbar-width:thin;scrollbar-color:var(--rolagem) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--rolagem);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------- moldura */
.app{
  /* Colado na borda da tela, sem moldura (pedido do João, 22/10). */
  height:100vh;height:100svh;
  display:grid;grid-template-columns:var(--rail-w,64px) minmax(0,1fr);
  background:var(--palco);overflow:hidden;
}

.rail{background:var(--moldura);box-shadow:inset -1px 0 0 var(--moldura-linha);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;min-height:0}
.rail .marca{display:block;width:40px;margin:6px 0 18px}
.rail .marca img{display:block;width:40px;height:auto}
.rail nav{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;width:100%}
.rail nav a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--moldura-txt-2);
  transition:background var(--transicao),color var(--transicao);
}
.rail nav a:hover{color:var(--moldura-txt);background:var(--moldura-2)}
.rail nav a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rail nav a.ativo{background:var(--moldura-2);color:var(--moldura-txt);box-shadow:inset 3px 0 0 var(--azul)}
.rail nav a.fim{margin-top:auto}
.rail .marca .m-nome,.rail nav a .rail-n{display:none}
/* Barra com nomes (23/10): a partir de 1200px o trilho abre para 216px. Entre 900 e 1199 ficam so os icones,
   para o Quadro e o Atendimento (3 colunas) nao perderem largura. */
@media (min-width:1200px){
  .app{--rail-w:216px}
  .rail{align-items:stretch;padding:16px 12px;gap:6px}
  .rail .marca{width:auto;margin:6px 8px 20px}
  .rail .marca .m-icone{display:none}
  .rail .marca .m-nome{display:block;width:150px;height:auto}
  .rail nav{align-items:stretch;gap:4px}
  .rail nav a{width:auto;height:44px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 12px;font-weight:600;font-size:14px}
  .rail nav a span{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap}
  .rail nav a .rail-n{display:inline-block;margin-left:auto;min-width:22px;padding:0 7px;border-radius:11px;background:var(--azul);color:var(--noite-0);font-size:12px;font-weight:800;line-height:22px;text-align:center}
  .rail nav a.ativo{background:var(--sup);color:var(--p-txt)}
}
.rail :focus-visible{outline-color:var(--foco)}

.conteudo{display:grid;grid-template-rows:64px minmax(0,1fr);min-width:0;min-height:0}
.topo{display:flex;align-items:center;gap:var(--e4);padding:0 22px;background:var(--moldura);box-shadow:inset 0 -1px 0 var(--moldura-linha);color:var(--p-txt);min-width:0}
.topo h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.topo .espaco{flex:1}
.loja{display:flex;gap:4px;margin-left:var(--e3);background:var(--sup);padding:3px;border-radius:var(--r1)}
.loja a{padding:6px 12px;border-radius:8px;font-weight:600;font-size:13px;color:var(--p-txt-2);white-space:nowrap;min-height:32px;display:flex;align-items:center}
.loja a:hover{color:var(--p-txt)}
.loja a.ativo{background:var(--azul);color:var(--noite-0);box-shadow:none}
.btn-alerta{width:38px;height:38px;border-radius:50%;background:var(--sup);display:grid;place-items:center;position:relative;flex:none}
.btn-alerta svg{width:18px;height:18px;fill:none;stroke:var(--moldura-txt);stroke-width:2;stroke-linejoin:round}
.btn-alerta b{position:absolute;top:-4px;right:-4px;min-width:20px;text-align:center;background:var(--vermelho);color:#fff;font-size:11px;line-height:16px;border-radius:10px;padding:0 5px;border:2px solid var(--moldura);font-weight:700}
.eu{display:flex;align-items:center;gap:10px;flex:none}
.eu-txt b{display:block;font-size:14px;line-height:1.2}
.eu-txt small{color:var(--p-txt-2);font-size:12px}
.eu-txt small a{color:var(--p-link);font-weight:600}
.eu-txt small a:hover{text-decoration:underline}
.conteudo{background:var(--moldura)}
/* logo: duas versoes (texto branco no escuro, texto preto no claro); o token liga uma e desliga a outra */
.lg-e{display:var(--lg-e)}
.lg-c{display:var(--lg-c)}
/* link de destaque: azul no escuro; no claro vai em preto e sublinhado (texto azul sobre branco daria 2,82:1) */
.eu-txt small a,.ficha-escura .grupo dt a,.ficha-escura .mais a,.transf summary,.os-cab .volta,.os-cab .l2 a,.bloco-palco .mais,.limpar{text-decoration:var(--link-deco);text-underline-offset:3px}
/* botao de tema: Automatico / Claro / Escuro (o estado atual vai em data-t) */
.btn-tema{width:38px;height:38px;border-radius:50%;background:var(--sup);color:var(--moldura-txt);display:grid;place-items:center;flex:none;border:0;padding:0;cursor:pointer;transition:background var(--transicao)}
.btn-tema:hover{background:var(--sup-2)}
.btn-tema svg{display:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-tema[data-t="auto"] .i-auto,.btn-tema[data-t="claro"] .i-claro,.btn-tema[data-t="escuro"] .i-escuro{display:block}
.btn-tema .i-auto path{fill:currentColor}
/* Dentro da tela de login (posicao relativa): fica abaixo da faixa de demonstracao, nunca por cima. */
.tela-login{position:relative}
.tema-login{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:5}
.tema-login .btn-tema{width:44px;height:44px;background:var(--bloco-p);box-shadow:var(--bloco-anel)}
.corpo{min-height:0;overflow:auto;padding:var(--e5);background:var(--palco);color:var(--p-txt)}
.corpo.cheio{padding:0;overflow:hidden}

/* avatar: iniciais, sem foto */
.av{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:var(--txt);background:#E4E7EB;letter-spacing:0;
}
.av.preto{background:var(--trilho);color:#fff}
.topo .av.preto{background:var(--azul);color:var(--noite-0)}
.av.p{width:22px;height:22px;font-size:9px}
.av.m{width:28px;height:28px;font-size:10px}
.av.g{width:64px;height:64px;font-size:22px}

/* ---------------------------------------------------------- peças */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--trilho);color:#fff;border:1px solid var(--trilho);border-radius:20px;
  padding:0 var(--e4);min-height:40px;font:700 14px/1 var(--f);cursor:pointer;text-align:center;
  transition:background var(--transicao),border-color var(--transicao),transform var(--transicao);
}
.btn:hover{background:#2A2A2A}
.btn:active{transform:translateY(1px)}
.btn.fraco{background:#fff;color:var(--txt);border-color:var(--borda-2)}
.btn.fraco:hover{background:var(--cinza-claro)}
.btn.azul{background:var(--azul);border-color:var(--azul);color:var(--noite-0)}
.btn.largo{width:100%}
.btn.fraco.ligada{background:var(--teal-claro);border-color:var(--c,var(--teal))}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.campo{margin-bottom:var(--e4)}
.campo label{display:block;font-size:var(--t5);color:var(--txt-2);margin-bottom:6px;font-weight:600}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:44px;background:#fff;color:var(--txt);
  border:1px solid var(--borda-2);border-radius:var(--r1);
  padding:0 var(--e3);font:inherit;font-size:var(--t4);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo textarea{height:auto;padding:var(--e3);min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-claro);
}
.campo input::placeholder{color:var(--txt-3)}

.aviso{border-radius:var(--r1);padding:10px var(--e3);font-size:var(--t4);margin-bottom:var(--e4);border:1px solid transparent}
.aviso.erro{background:var(--vermelho-claro);border-color:#F3C4C4;color:var(--vermelho-txt)}
.aviso.ok{background:var(--verde-claro);border-color:#BFE3CE;color:var(--verde-txt)}
.cartao.aviso-fixo{margin:0}

/* pill neutra com ponto de cor (a cor do dado vem em --c) */
.selo{
  display:inline-flex;align-items:center;gap:6px;min-height:20px;padding:2px 9px 2px 8px;
  border-radius:10px;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;flex:none;
  background:var(--cinza-claro);color:var(--txt-2);
}
.selo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--cinza));flex:none}
.selo.neutro::before{background:var(--cinza)}
.selo.azul::before{background:var(--azul)}
.selo.ok::before{background:var(--verde)}
.selo.espera::before{background:var(--vermelho)}
.selo.alerta{background:var(--vermelho-claro);color:var(--vermelho-txt)}
.selo.alerta::before{background:var(--vermelho)}
.canal{font-size:11px;font-weight:600;color:var(--txt-3)}

.vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;min-height:200px;color:var(--txt-3);text-align:center;padding:var(--e6) var(--e4);gap:var(--e2)}
.vazio strong{display:block;color:var(--txt);font-size:var(--t3);font-weight:700}
.vazio p{margin:0;font-size:var(--t4);max-width:34ch;line-height:1.55;color:var(--txt-2)}

.cartao{background:#fff;color:var(--txt);border:1px solid var(--borda);border-radius:var(--r2);padding:var(--e4)}
.cartao > h2,.cartao h2{margin:0 0 var(--e3);font-size:var(--t3);font-weight:700}
.cartao dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0}
.cartao dt{color:var(--txt-3);padding:7px var(--e4) 7px 0;border-bottom:1px solid var(--borda)}
.cartao dd{margin:0;padding:7px 0;text-align:right;font-weight:600;border-bottom:1px solid var(--borda)}
.cartao dl > :nth-last-child(-n+2){border-bottom:0}

/* ---------------------------------------------------------- login */
.tela-login{
  min-height:100vh;min-height:100svh;display:grid;place-items:center;align-content:center;gap:var(--e5);
  padding:var(--e5) var(--e4);background:var(--trilho);
}
.tela-login .logo{display:block;width:min(300px,74vw);height:auto;margin:0 auto}
.tela-login form{
  width:100%;max-width:372px;background:#fff;border-radius:var(--r3);padding:var(--e6) var(--e5);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.tela-login h1{font-size:var(--t1);font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.tela-login .sub{color:var(--txt-2);font-size:var(--t4);margin:0 0 var(--e5)}
.tela-login .btn{width:100%;min-height:46px}
body:has(.tela-login){padding:0;background:var(--trilho)}

/* ---------------------------------------------------------- atendimento */
.atend{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;height:100%;overflow:hidden}
.atend > *{min-height:0;min-width:0}
.col-lista{border-right:1px solid var(--borda);display:flex;flex-direction:column}
.col-msgs{display:flex;flex-direction:column;background:#fff}
.col-card{border-left:1px solid var(--borda);overflow-y:auto}

.filtros{display:flex;flex-wrap:wrap;gap:6px;padding:var(--e3) var(--e4) var(--e2);flex:0 0 auto}
.filtros a{
  font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;color:var(--p-txt-2);
  background:var(--sup);border:1px solid var(--linha);min-height:32px;display:inline-flex;align-items:center;gap:5px;
  transition:background var(--transicao),color var(--transicao);
}
.filtros a:hover{color:var(--p-txt);background:var(--sup-2)}
.filtros a.ativo{background:var(--pill-bg);border-color:var(--pill-bg);color:var(--pill-txt)}
.filtros a b{font-weight:800}
.abas{display:grid;grid-template-columns:repeat(4,1fr);padding:0 12px;border-bottom:1px solid var(--borda);flex:0 0 auto}
.abas a{
  padding:8px 2px 9px;font-weight:600;font-size:12px;color:var(--txt-3);border-bottom:2px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;min-height:48px;
}
.abas a b{font-size:17px;font-weight:800;color:var(--txt-2);order:-1;line-height:1.2}
.abas a:hover{color:var(--txt)}
.abas a.ativo{color:var(--txt);border-color:var(--teal)}
.abas a.ativo b{color:var(--link)}
.lista-cab{font-size:13px;font-weight:700;padding:12px var(--e4) 6px;display:flex;justify-content:space-between;margin:0;flex:0 0 auto}
.lista-cab span{color:var(--txt-3);font-weight:600}
.alerta-parados{
  display:block;margin:var(--e2) var(--e4) 0;padding:10px var(--e3);border-radius:var(--r1);min-height:44px;
  background:var(--vermelho-claro);color:var(--vermelho-txt);font-size:var(--t5);font-weight:700;
}
.lista{overflow-y:auto;flex:1}
.conv{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 10px;padding:12px var(--e4);
  border-bottom:1px solid var(--borda);position:relative;transition:background var(--transicao);
}
.conv:hover{background:var(--cinza-claro)}
.conv.sel{background:#F3F8FC}
.conv.sel::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--teal)}
.conv > .av{width:40px;height:40px;grid-row:1/3;position:relative;overflow:visible}
.conv .n{
  position:absolute;left:-4px;top:-4px;min-width:18px;text-align:center;background:var(--azul);color:var(--noite-0);
  font-size:10px;line-height:14px;font-weight:700;border-radius:9px;padding:0 5px;border:2px solid #fff;
}
.conv .topo-l{display:flex;align-items:baseline;gap:var(--e2)}
.conv .nome{font-size:14px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .quando{font-size:12px;color:var(--txt-3);flex:0 0 auto}
.conv .quando.tarde{color:var(--vermelho-txt);font-weight:700}
.conv .previa{color:var(--txt-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .tags{grid-column:2;display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.conv .tags .resp{margin-left:auto}

/* cabecalho da conversa */
.cabec-conv{display:flex;align-items:center;gap:var(--e3);padding:12px 20px;border-bottom:1px solid var(--borda);flex:0 0 auto;min-height:64px}
.cabec-conv .quem{min-width:0}
.cabec-conv .quem b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cabec-conv .quem span{display:block;color:var(--txt-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dono{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--borda-2);border-radius:20px;padding:4px 12px 4px 4px;font-size:13px;font-weight:600;white-space:nowrap}
.dono.vazio-dono{padding:4px 12px;color:var(--txt-2)}
.voltar{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border-radius:50%;color:var(--txt-2);background:var(--cinza-claro)}
.voltar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.msgs{flex:1;overflow-y:auto;padding:22px 28px;display:flex;flex-direction:column;gap:6px}
.inicio{text-align:center;padding:4px 0 14px}
.inicio .av{margin:0 auto 10px;box-shadow:0 0 0 6px var(--cinza-claro)}
.inicio b{display:block;font-size:17px}
.inicio p{color:var(--txt-2);font-size:13px;margin:2px 0 0}
.inicio p strong{color:var(--link);font-weight:700}
.dia{align-self:center;font-size:12px;font-weight:600;color:var(--txt-2);background:var(--cinza-claro);padding:3px 12px;border-radius:12px;margin:10px 0}
.bolha{max-width:min(64%,560px);padding:9px 14px;font-size:14px;line-height:1.5;border-radius:16px;position:relative;word-wrap:break-word;overflow-wrap:anywhere}
.bolha.ent{background:var(--cinza-claro);align-self:flex-start;border-bottom-left-radius:4px}
.bolha.sai{background:var(--teal-claro);align-self:flex-end;border-bottom-right-radius:4px}
.bolha .meta{display:block;font-size:11px;color:var(--txt-3);margin-top:3px}
.bolha.sai .meta{text-align:right}
.bolha .audio-rot{display:flex;align-items:center;gap:6px;font-weight:600}
.bolha .audio-rot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bolha .transc{display:block;margin-top:4px;font-style:italic}
.bolha .transc-rot{display:block;margin-top:2px;font-size:11px}
.janela24{margin:0 20px 6px;font-size:12px;color:var(--verde-txt);font-weight:700}
.compor{margin:0 20px 16px;border:1px solid var(--borda-2);border-radius:24px;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;flex:0 0 auto;background:#fff}
.compor:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-claro)}
.compor input{flex:1;min-width:0;border:0;font:14px var(--f);color:var(--txt);background:none;min-height:36px}
.compor input:focus{outline:0}
.compor input::placeholder{color:var(--txt-3)}
.compor .enviar{width:40px;height:40px;border-radius:50%;border:0;background:var(--teal-escuro);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.compor .enviar:hover{background:var(--noite-0)}
.compor .enviar:hover svg{stroke:#fff}
.compor .enviar svg{width:18px;height:18px;fill:none;stroke:var(--noite-0);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.col-msgs > .aviso{margin:0 20px 16px}
.col-msgs > .aviso.topo-aviso{margin:var(--e3) 20px 0}

/* ficha do cliente */
.sec{padding:16px 18px;border-bottom:1px solid var(--borda)}
.sec:last-child{border-bottom:0}
.sec h3{font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.sec h3 span{font-size:12px;color:var(--txt-3);font-weight:500}
.cab{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--txt-3);margin-bottom:12px}
.cab b{color:var(--txt);font-size:13px}
.cliente{display:flex;align-items:center;gap:10px;min-width:0}
.cliente b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mais{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:var(--e2)}
.mais a,.ver{color:var(--link);font-weight:600;font-size:13px}
.mais a:hover,.ver:hover{text-decoration:underline}
.mais span.hist{color:var(--txt-3);font-size:12px}
.ficha-campo{display:flex;gap:12px;margin-top:12px;align-items:flex-start;min-width:0}
.ficha-campo i{width:30px;height:30px;border-radius:50%;background:var(--teal-claro);display:grid;place-items:center;flex:none}
.ficha-campo i svg{width:15px;height:15px;fill:none;stroke:var(--link);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ficha-campo small{display:block;color:var(--txt-3);font-size:12px}
.ficha-campo span{font-weight:600;font-size:13px;min-width:0;overflow-wrap:anywhere}

.resultado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.resultado > form,.resultado > details{min-width:0}
.resultado > details[open]{grid-column:1/-1}
.resultado .btn,.resultado summary{
  width:100%;min-height:62px;border-radius:14px;border:1.5px solid var(--borda-2);background:#fff;color:var(--txt);
  font:700 13px var(--f);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;list-style:none;padding:0 4px;
}
.resultado summary::-webkit-details-marker{display:none}
.resultado .btn:hover,.resultado summary:hover{border-color:var(--teal);background:var(--teal-claro)}
.resultado i{width:10px;height:10px;border-radius:50%;background:var(--cinza)}
.resultado .q i{background:var(--azul)}
.resultado .v i{background:var(--verde)}
.resultado .p i{background:var(--vermelho)}
.resultado details form{margin-top:var(--e3)}
.resultado .campo{margin-bottom:var(--e3)}
.resultado .btn.salvar{min-height:44px;flex-direction:row;background:var(--trilho);color:#fff;border-color:var(--trilho)}
.resultado .btn.salvar:hover{background:#2A2A2A}
.desf-atual{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e3);font-size:13px;color:var(--txt-2)}
.desf-atual b{color:var(--txt)}
.desf-extra{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e3)}
.desf-extra .btn{min-height:44px;width:100%}
.dica{font-size:12px;color:var(--txt-3);margin:8px 0 0}
.atribuir{display:flex;flex-direction:column;gap:var(--e2)}
.atribuir form{margin:0}
.atribuir .btn{min-height:44px;width:100%}
.atribuir .linha{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;font-size:13px;margin-bottom:var(--e3)}

.jornada{position:relative;padding-left:26px;margin:0;list-style:none}
.jornada::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--borda)}
.jornada li{position:relative;margin-bottom:12px}
.jornada li::before{content:"";position:absolute;left:-21px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--teal)}
.jornada li.feito::before{background:var(--teal)}
.jornada b{font-size:13px;display:block}
.jornada small{color:var(--txt-3);font-size:12px}

.card-mini{background:var(--cinza-claro);border-radius:var(--r2);padding:var(--e3);margin-bottom:var(--e3)}
.card-mini .l1{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);margin-bottom:6px}
.card-mini .num{font-size:12px;font-weight:700;color:var(--txt-3)}
.card-mini .tit{font-size:13px;font-weight:700;line-height:1.4}
.card-mini .prazo{font-size:12px;color:var(--txt-3);margin-top:6px}
.card-mini.sem{text-align:center}
.card-mini.sem .tit{color:var(--txt-2);font-weight:600;margin-bottom:10px}
.grupo{margin-top:var(--e4)}
.grupo > h4{margin:0 0 var(--e2);font-size:12px;font-weight:700;color:var(--txt-3);letter-spacing:.02em}
.grupo dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0}
.grupo dt,.grupo dd{font-size:13px;padding:6px 0;border-bottom:1px solid var(--borda);margin:0}
.grupo dt{color:var(--txt-3);white-space:nowrap;padding-right:var(--e3)}
.grupo dt a{color:var(--link);font-weight:600}
.grupo dd{text-align:right;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grupo dl > :nth-last-child(-n+2){border-bottom:0}
.grupo .btn{margin-top:var(--e3);min-height:44px}
.sec .btn.largo{min-height:44px;margin-top:var(--e3)}

/* ficha do celular: faixa recolhivel abaixo do cabecalho da conversa */
.ficha-mobile{display:none}

/* quadro e card: public/assets/quadro.css (rodada 4) */
.ao-vivo-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--e4);margin-top:var(--e4)}
.atrasado{color:var(--vermelho-txt);font-weight:700}

/* ---------------------------------------------------------- card, OS e demais telas de formulario */
.card-pagina{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:var(--e4)}
.card-pagina .cartao{padding:var(--e4) var(--e5)}
.card-pagina .cabeca{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}
.card-pagina .cabeca .num{font-size:var(--t4);font-weight:700;color:var(--txt-3)}
.card-pagina .mover-btns{display:flex;gap:var(--e2);flex-wrap:wrap}
.card-pagina .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--e4)}
.card-pagina .btn{min-height:44px}
.cartao.card-pagina{display:block;margin:0;max-width:none}
.linha-acoes.card-pagina{flex-direction:row;flex-wrap:wrap;align-items:flex-end;max-width:none;margin:0}
.os-resultado .vazio{height:auto;min-height:120px}
.card-pagina input[type=checkbox],.os-ck input[type=checkbox]{width:22px;height:22px;accent-color:var(--teal-escuro)}
.card-pagina .item{display:flex;gap:var(--e3);align-items:center;min-height:44px;border-bottom:1px solid var(--borda)}
.card-pagina .item.feito span{color:var(--txt-3);text-decoration:line-through}
.card-pagina .linha-acoes,.linha-acoes{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:flex-end}
.card-pagina .linha-acoes .campo,.linha-acoes .campo{margin:0;flex:1 1 180px}
.card-pagina .hist{list-style:none;margin:0;padding:0;font-size:var(--t5);color:var(--txt-2)}
.card-pagina .hist li{padding:var(--e2) 0;border-bottom:1px solid var(--borda)}
.card-pagina .hist time{color:var(--txt-3);margin-left:var(--e2)}
.card-pagina .conv-msgs{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--e3)}
.card-pagina .conv-msgs .bolha{max-width:92%}
.card-pagina h2.sub-titulo{margin-top:var(--e3)}
.texto-2{color:var(--txt-2)}
.texto-3{color:var(--txt-3)}
.pre{white-space:pre-line}
.sem-margem{margin:0}
.mt3{margin-top:var(--e3)}
.mt4{margin-top:var(--e4)}
.mt2{margin-top:var(--e2)}

/* ---- Oficina e Resultado ---- */
.os-pagina{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:var(--e3)}
.os-pagina .filtros,.os-resultado .filtros{padding:0}
.os-barra{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:flex-end}
.os-barra form{display:flex;gap:var(--e2);flex:1 1 240px}
.os-barra form input{flex:1;min-height:44px;background:#fff;color:var(--txt);border:1px solid var(--borda-2);border-radius:22px;padding:0 var(--e4);font-size:var(--t4)}
.os-barra form input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-claro)}
.os-barra .btn,.os-pagina .btn{min-height:44px}
.os-linha{display:block;background:#fff;color:var(--txt);border:1px solid var(--borda);border-radius:var(--r2);padding:var(--e3) var(--e4);transition:box-shadow var(--transicao),border-color var(--transicao)}
.os-linha:hover{border-color:var(--borda-2);box-shadow:0 4px 14px rgba(13,13,13,.07)}
.os-linha .l1{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}
.os-linha .num{font-size:var(--t4);font-weight:700;color:var(--txt-3)}
.os-linha .tit{font-size:var(--t3);font-weight:700;margin-top:var(--e1);overflow-wrap:anywhere}
.os-linha .meta{font-size:var(--t5);color:var(--txt-3);margin-top:var(--e1);display:flex;gap:var(--e3);flex-wrap:wrap}
.os-itens{list-style:none;margin:0 0 var(--e3);padding:0}
.os-itens li{display:flex;gap:var(--e3);align-items:center;justify-content:space-between;min-height:44px;border-bottom:1px solid var(--borda);font-size:var(--t4)}
.os-itens .val{white-space:nowrap;font-weight:700}
.os-total{display:flex;justify-content:space-between;font-size:var(--t4);color:var(--txt-2);padding:var(--e1) 0}
.os-total.geral{color:var(--txt);font-weight:800;font-size:var(--t3)}
.os-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--e2);margin-bottom:var(--e3)}
.os-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r1);border:1px solid var(--borda)}
.os-ck{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e2) var(--e3);align-items:center;margin-bottom:var(--e3)}
.os-ck input[type=text]{min-height:44px;background:#fff;color:var(--txt);border:1px solid var(--borda-2);border-radius:var(--r1);padding:0 var(--e3);font-size:var(--t4);width:100%}
.os-resultado{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:var(--e4)}
.res-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--e2)}
.res-numeros div{background:#fff;color:var(--txt);box-shadow:var(--bloco-anel);border-radius:var(--r2);padding:var(--e3) var(--e4)}
.res-numeros b{display:block;font-size:var(--t1);font-weight:800;letter-spacing:-.02em}
.res-numeros span{font-size:var(--t5);color:var(--txt-3)}
.largura-total{max-width:none}
table.tabela{width:100%;border-collapse:collapse;font-size:var(--t4)}
table.tabela th{text-align:left;font-size:var(--t5);color:var(--txt-3);font-weight:700;padding:var(--e2);border-bottom:1px solid var(--borda-2)}
table.tabela td{padding:var(--e2);border-bottom:1px solid var(--borda);overflow-wrap:anywhere}
table.tabela .n{text-align:right;white-space:nowrap}


/* ---- ajustes e importacao ---- */
.desf-mais{margin-bottom:var(--e2)}
.desf-mais > summary{list-style:none;cursor:pointer;min-height:44px}
.desf-mais > summary::-webkit-details-marker{display:none}
.desf-mais > summary.fraco{justify-content:flex-start;border-radius:var(--r1);font-weight:600}
.desf-mais > summary.fraco::after{content:"";margin-left:auto;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform var(--transicao)}
.desf-mais[open] > summary.fraco::after{transform:rotate(180deg)}
.desf-mais > form,.desf-mais > div{margin-top:var(--e3);padding:0 var(--e1)}
.resultado .desf-mais{margin:0}
.resultado .desf-mais > summary{min-height:62px}
.desf-linha{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;margin-bottom:var(--e2);font-size:var(--t4)}
.desf-linha .btn{min-height:44px}
.desf-botoes{display:grid;gap:var(--e2);margin-top:var(--e3)}
.desf-botoes .btn{min-height:44px}

/* ---------------------------------------------------------- celular: a barra do trilho vai para baixo */
@media (max-width:900px){
  body{padding:0}
  .app{height:100vh;height:100svh;display:flex;flex-direction:column;border-radius:0;box-shadow:none}
  .conteudo{order:1;flex:1;min-height:0;display:flex;flex-direction:column}
  .rail{order:2;width:100%;flex:0 0 auto;flex-direction:row;box-shadow:inset 0 1px 0 var(--moldura-linha);padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px}
  .rail .marca{display:none}
  .rail nav{flex-direction:row;justify-content:space-around;gap:2px}
  .rail nav a{flex:1;width:auto;min-width:44px;height:52px;border-radius:12px;display:flex;flex-direction:column;gap:2px;justify-content:center;font-size:10px;font-weight:600}
  .rail nav a.fim{margin-top:0}
  .rail nav a svg{width:20px;height:20px}
  .rail nav a span{position:static;width:auto;height:auto;clip:auto;overflow:visible;line-height:1}
  .rail nav a.ativo{box-shadow:inset 0 3px 0 var(--azul)}
  .topo{height:auto;min-height:56px;padding:8px var(--e4);gap:var(--e3);flex-wrap:wrap;flex:0 0 auto}
  .topo h1{font-size:17px}
  .loja{margin-left:0;order:5;width:100%;overflow-x:auto}
  .eu-txt b{display:none}
  .btn-tema{width:44px;height:44px}
  .corpo{flex:1;padding:var(--e4)}
  .corpo.cheio{padding:0}

  .atend{grid-template-columns:1fr;display:block}
  .atend .col-msgs,.atend .col-card{display:none}
  .atend.aberta .col-lista{display:none}
  .atend.aberta .col-msgs{display:flex;height:100%}
  .atend .col-lista{height:100%}
  .conv{padding:12px var(--e4)}
  .voltar{display:inline-flex}
  .msgs{padding:var(--e4)}
  .bolha{max-width:86%}
  .cabec-conv{padding:8px var(--e4)}
  .dono{display:none}
  .compor{margin:0 var(--e3) var(--e3)}
  .compor input{min-height:44px}
  .compor .enviar{width:44px;height:44px}
  .janela24{margin:0 var(--e4) 6px}
  .col-msgs > .aviso{margin:0 var(--e3) var(--e3)}
  .col-msgs > .aviso.topo-aviso{margin:var(--e2) var(--e3) 0}

  .ficha-mobile{display:block;flex:0 0 auto;border-bottom:1px solid var(--borda)}
  .ficha-mobile summary{display:flex;align-items:center;gap:var(--e2);padding:0 var(--e4);cursor:pointer;list-style:none;min-height:48px;font-weight:700;font-size:13px}
  .ficha-mobile summary::-webkit-details-marker{display:none}
  .ficha-mobile .selo{max-width:62vw}
  .ficha-mobile .seta{margin-left:auto;width:20px;height:20px;color:var(--txt-3);transition:transform var(--transicao)}
  .ficha-mobile .seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
  .ficha-mobile[open] .seta{transform:rotate(180deg)}
  .ficha-mobile .ficha{max-height:50vh;overflow-y:auto;border-top:1px solid var(--borda)}

}
@media (max-width:700px){
  table.tabela thead{display:none}
  table.tabela tr{display:block;padding:var(--e2) 0;border-bottom:1px solid var(--borda)}
  table.tabela td{display:flex;justify-content:space-between;gap:var(--e3);border:0;padding:var(--e1) var(--e2);text-align:right}
  table.tabela td::before{content:attr(data-r);color:var(--txt-3);text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Filtro de visualizacao recolhido: a lista mostra so as abas de resultado (tela aprovada 22/10). */
.filtros-menu{margin:12px 16px 4px;font-size:13px;color:var(--txt-2)}
.filtros-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:6px 0}
.filtros-menu summary::-webkit-details-marker{display:none}
.filtros-menu summary b{color:var(--txt);font-weight:700}
.filtros-menu summary::after{content:"";width:12px;height:12px;margin-left:2px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23646A73%27 stroke-width=%272.5%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .15s}
.filtros-menu[open] summary::after{transform:rotate(180deg)}
.filtros-menu .filtros{margin:6px 0 4px;padding:0}

/* ---------------------------------------------------------- demonstracao (config app.demo) */
.faixa-demo{flex:0 0 auto;background:var(--moldura);color:var(--p-link);border-bottom:1px solid var(--sup);
  font-size:var(--t5);font-weight:600;line-height:1.35;text-align:center;padding:6px var(--e4)}
.faixa-demo a{color:var(--p-txt);font-weight:700;text-decoration:underline;margin-left:var(--e2)}
body.demo{display:flex;flex-direction:column;height:100vh;height:100svh}
body.demo .app{flex:1;height:auto;min-height:0}
body.demo .tela-login{flex:1;min-height:0}
.demo-card{max-width:560px}
.compor.demo-resp{border-style:dashed}

/* Etapa 2 (23/10): botao de duvidas no topo e aviso dentro da conversa. Vive aqui porque aparece em todas as telas. Regras sem relacao com as demais. */
.btn-duvida{height:38px;min-width:38px;padding:0 10px;border-radius:19px;background:var(--p-link);color:var(--noite-0);display:inline-flex;align-items:center;gap:6px;flex:none;font:800 13px var(--f)}
.btn-duvida svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-tema="claro"] .btn-duvida{background:#0D0D0D;color:#fff}
@media (prefers-color-scheme:light){:root:not([data-tema="escuro"]) .btn-duvida{background:#0D0D0D;color:#fff}}
.aviso.duvida-aviso{background:var(--azul-claro);border-color:#CFE5F5;color:var(--txt);margin:var(--e3) 20px 0;flex:none}
.aviso.duvida-aviso a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.aviso.duvida-aviso{margin:var(--e3) var(--e3) 0}}