:root{
  /* SUPERFÍCIE DE TINTA. Três lugares pintavam o fundo com --tinta e escreviam
     #fff por cima: a barra da administração, a bandeirinha da doca e o segmento
     "Não contatar". Isso só funciona enquanto --tinta for escura — e no tema
     escuro --tinta É a cor do texto, então os três viravam superfície clara com
     texto branco em cima, ilegíveis. A tarja preta continua usando --tinta
     direto, e está certa: lá ela precisa mesmo inverter para contrastar com o
     item escuro. */
  --sup-tinta:var(--tinta); --sup-tinta-txt:#FFFFFF; --sup-tinta-ln:transparent;

  --verde:#2F7A5F;        /* 5,21:1 sobre branco — passa com texto branco em cima */
  --verde-alto:#38916F;
  --verde-fundo:#245C48;
  --verde-linha:#4E9A7C;
  --verde-claro:#4FA87F;

  --papel:#EAF1ED;
  --caixa:#FFFFFF;
  --caixa-topo:#F8FBF9;
  --hover:#F0F6F2;
  /* 1,10:1 contra o branco é invisível em painel TN visto de ângulo; a linha
     da tabela precisa de mais, sem virar seleção pesada */
  --hover-linha:#E2EEE7;

  /* três níveis de texto, todos acima de 4,5:1 sobre branco E sobre o fundo
     dos cabeçalhos. O quarto nível (--fraco) é só decoração: traços de
     "sem ação", riscados e selos — nunca informação que precise ser lida. */
  --tinta:#131715;        /* 18,09 */
  --cinza:#525A56;        /* 7,11 branco · 6,65 cabeçalho */
  --cinza-claro:#646D69;  /* 5,42 branco · 5,20 cabeçalho · 4,72 chão */
  --fraco:#7B857F;

  --fonte-corpo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fonte-titulo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --entre:1.55;
  --linha:#E1EAE5;
  --linha-fina:#EFF4F1;

  --vermelha:#C0102A;
  --vermelha-fundo:#FBEFF0;

  /* séries de gráfico — validadas em OKLab para daltonismo sobre fundo branco */
  --serie-1:#1A66A8;
  --serie-2:#BE7A0E;
  --grade:#EDF1E9;

  /* Duas camadas: o contato prende o cartão ao chão, o ambiente dá a altura.
     Tingidas no verde da página, nunca em preto puro. */
  --sombra-contato:0 1px 2px rgba(19,40,32,.06), 0 0 0 1px rgba(19,40,32,.02);
  --sombra-ambiente:0 12px 32px -14px rgba(24,54,42,.22);
  --sombra:var(--sombra-contato),var(--sombra-ambiente);
  --sombra-barra:0 -6px 18px -10px rgba(19,40,32,.28);

  --t-xs:12px; --t-sm:14px; --t-ms:15px; --t-md:16px;
  --t-lg:18.5px; --t-xl:21px; --t-2xl:29px;


  /* Papéis que se repetiam como cor solta pelo CSS. Viraram token para o tema
     escuro poder trocá-los num lugar só. */
  --linha-forte:#BFCFC2;      /* borda no hover */
  --linha-fraca:#C4CEC0;      /* sublinhado discreto */
  --par:#FAFCFB;              /* linha alternada da tabela */

  --vermelha-linha:#EBCBD0;   /* borda de bloco urgente */
  --vermelha-item:#FEF8F8;    /* fundo de item que exige ação agora */
  --vermelha-item-h:#FDF0F1;
  --vermelha-forte:#A20D23;   /* estado premido do botão de urgência */
  --vermelha-texto:#8C2A38;   /* rótulo sobre fundo vermelho claro */

  --ambar-bg:#FFF8E8;         /* aviso de licenciamento — nem urgência nem lei */
  --ambar-bg2:#FFF3D8;
  --ambar-ln:#E8D5A8;
  --ambar-txt:#8A6A1F;

  --marca-busca:#FFF0C2;      /* realce do trecho achado */

  --s1:4px; --s2:8px; --s3:14px; --s4:18px;
  --s5:24px; --s6:30px; --s7:38px; --s8:52px; --s9:70px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--papel);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(47,122,95,.045) 0 5.5px, transparent 6px);
  background-size:34px 34px;
  background-attachment:fixed;
  color:var(--tinta);
  font-family:var(--fonte-corpo);
  font-size:var(--t-md);
  line-height:var(--entre);
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

::selection{background:rgba(63,143,104,.22);}
a{color:inherit;text-decoration:none;}

/* o ícone herda cor e tamanho do texto ao lado: um só ajuste governa os dois */
.ic{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.16em;
}
.ic.gd{width:1.35em;height:1.35em;}
.ic.pq{width:1em;height:1em;stroke-width:2;}

:focus-visible{outline:2px solid var(--verde-claro);outline-offset:2px;border-radius:1px;}
/* linha e item abrem detalhe: se são clicáveis, têm que ser alcançáveis */
tr[tabindex]:focus-visible,li[tabindex]:focus-visible{outline-offset:-2px;}

/* atalho para quem navega por teclado não percorrer a barra toda */
.pular{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--verde);color:#fff;padding:12px var(--s5);
  font-family:inherit;font-size:var(--t-ms);font-weight:600;
  border:0;border-radius:0 0 var(--raio) 0;cursor:pointer;
}
.pular:focus{left:0;}

/* resumo de erro: quatro marcas vermelhas espalhadas não dizem quantas nem onde */
.erro-resumo{
  display:flex;align-items:flex-start;gap:var(--s3);
  margin:var(--s5) var(--s6) 0;padding:var(--s3) var(--s4);
  background:var(--vermelha-fundo);border:1px solid var(--vermelha-linha);border-radius:var(--raio);
  font-size:var(--t-ms);color:var(--vermelha);line-height:1.45;
}
.erro-resumo[hidden]{display:none;}
.erro-resumo .ic{color:var(--vermelha);margin-top:2px;}
.erro-resumo b{font-weight:600;}
.erro-resumo button{
  background:none;border:0;padding:0;margin-left:auto;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;
  color:var(--vermelha);text-decoration:underline;white-space:nowrap;
}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:var(--t-xs);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
}

.screen{display:none;}
.screen.on{display:block;}

/* ======================= topo ======================= */
.topbar{
  position:relative;
  padding:0 var(--s7);
}
.topbar::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent);
}
.topbar::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(0,0,0,.28);}
.topbar-in{
  max-width:1160px;margin:0 auto;min-height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
}
.brand{display:flex;align-items:center;gap:var(--s3);color:#fff;cursor:pointer;}
.cross{width:20px;height:20px;position:relative;flex:none;}
.cross::before,.cross::after{content:"";position:absolute;background:#fff;}
.cross::before{left:7px;top:0;width:6px;height:20px;}
.cross::after{top:7px;left:0;height:6px;width:20px;}
/* Com logo guardado, ele troca de lugar com a cruz genérica nos três lugares
   onde a marca aparece — barra, login, administração — em vez de mostrar as
   duas juntas. aplicarFarm() decide qual das duas fica visível. */
.marca-logo{width:20px;height:20px;flex:none;object-fit:contain;border-radius:4px;display:block;}
.brand-name{
  font-size:var(--t-lg);
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 125,"wght" 700;
  letter-spacing:.055em;text-transform:uppercase;line-height:1;padding-top:1px;
}
/* navegação da barra */
.nav{display:flex;align-items:stretch;gap:2px;align-self:stretch;margin:0 auto 0 var(--s6);}
.navi{
  position:relative;
  background:none;border:0;padding:0 var(--s4);
  font-family:inherit;font-size:var(--t-ms);font-weight:500;letter-spacing:.008em;
  color:#8FAA9C;cursor:pointer;white-space:nowrap;
  transition:color .14s ease;
}
.navi::after{
  content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:2px;
  background:transparent;transition:background .16s ease;
}
.navi:hover{color:#DCEAE2;}
.navi[aria-current="page"]{color:#fff;}
.navi[aria-current="page"]::after{background:#6FBF95;}
.navi:focus-visible{outline-color:#8FD3B0;outline-offset:-4px;}

.who{display:flex;align-items:center;gap:var(--s5);}
.who-id{text-align:right;line-height:1.3;}
.who-name{color:#fff;font-size:var(--t-ms);font-weight:500;}
.who-role{
  color:#93AFA2;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.sair{
  color:#CBDDD3;font-size:var(--t-ms);font-weight:500;
  border:1px solid var(--verde-linha);padding:var(--s2) var(--s4);
  background:rgba(255,255,255,.03);cursor:pointer;font-family:inherit;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.sair:hover{background:var(--verde-fundo);color:#fff;border-color:#41705D;}
.sair:focus-visible{outline-color:#8FD3B0;}
.sair{flex:none;white-space:nowrap;}

/* A barra tem de caber em 1366, que é o monitor do balcão. Nada aqui pode
   ficar fora da tela, e o que cede primeiro é o que menos custa: o cargo
   (decorativo), depois os rótulos das utilidades (que têm aria-label e
   ícone), depois o nome da marca. A ordem de sacrifício é deliberada. */
.topbar-in{flex-wrap:nowrap;}
.nav{min-width:0;}
/* o nome de quem está no balcão não trunca: quem cede é a navegação,
   que já cedeu os rótulos das utilidades antes */
.who{min-width:0;flex:none;}
.who-id{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  background:none;border:0;padding:6px 8px;border-radius:var(--raio);
  font-family:inherit;cursor:pointer;text-align:right;
  transition:background var(--mv-r) ease;
}
.who-id:hover{background:var(--hover);}
.who-id[aria-expanded="true"]{background:var(--hover);}

/* A doca: um contêiner só, para ler como uma coisa e não como três botões
   soltos empilhados no canto. Só existe em data-barra="doca". */
/* Exibição continua no DOM porque o painel inteiro é ligado a este botão;
   ele só deixa de ocupar lugar na barra. Quem aciona é o menu da pessoa. */
.util-oculto{display:none;}

/* andaime de protótipo dentro do painel: separado do que é preferência de
   quem atende, como o bloco de PINs de demonstração na tela de entrada */
/* ======================= administração ======================= */
/* Sala de máquinas, não balcão: aqui a pessoa está sentada, com tempo, e o
   que importa é ver tudo de uma vez. Por isso o layout é largo e a densidade
   é maior que no resto do sistema. */
.login-adm{
  margin-top:var(--s5);width:100%;
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  background:none;border:1px dashed var(--linha);border-radius:var(--raio);
  padding:10px var(--s4);cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);color:var(--cinza-claro);
  transition:border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.login-adm:hover{border-color:var(--verde-linha);color:var(--verde);}
.login-adm .ic{width:15px;height:15px;}

.adm{
  position:fixed;inset:0;z-index:230;overflow:auto;
  background:var(--papel);
}
.adm[hidden]{display:none !important;}
.adm-topo{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s4) var(--s7);
  background:var(--sup-tinta);color:var(--sup-tinta-txt);
  border-bottom:1px solid var(--sup-tinta-ln);
}
.adm-marca{display:flex;align-items:baseline;gap:var(--s3);min-width:0;}
.adm-marca .cross{width:16px;height:16px;align-self:center;flex:none;}
.adm-marca .cross::before{left:5px;width:6px;height:16px;}
.adm-marca .cross::after{top:5px;height:6px;width:16px;}
.adm-marca .marca-logo{width:16px;height:16px;align-self:center;}
.adm-nome{
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 120,"wght" 680;
  font-size:var(--t-md);letter-spacing:.05em;text-transform:uppercase;
}
.adm-farm{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:#9DB6AA;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-passo{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);letter-spacing:.04em;
  color:#CBDDD3;
}
.adm-topo .bt{background:transparent;color:#CBDDD3;border-color:#3D5B4E;}
.adm-topo .bt:hover{background:#22302A;color:#fff;}

.adm-corpo{
  max-width:1160px;margin:0 auto;padding:var(--s6) var(--s7) var(--s9);
  display:grid;grid-template-columns:212px 1fr;gap:var(--s6);align-items:start;
}
/* A configuração inicial é a mesma administração: sem abas soltas (o passo
   já diz onde se está) e numa coluna só, mais estreita — assistente guiado,
   não painel de várias seções. */
.adm.onboard .adm-nome,
.adm.onboard .adm-farm,
.adm.onboard #adm-sair,
.adm.onboard .adm-abas{display:none;}
.adm.onboard .adm-corpo{grid-template-columns:1fr;max-width:720px;}
.adm-abas{display:flex;flex-direction:column;gap:2px;position:sticky;top:88px;}
.adm-aba{
  display:flex;align-items:center;gap:var(--s3);
  padding:11px var(--s4);border:0;border-radius:var(--raio);
  background:none;font-family:inherit;font-size:var(--t-ms);color:var(--cinza);
  cursor:pointer;text-align:left;
  transition:background var(--mv-r) ease,color var(--mv-r) ease;
}
.adm-aba .ic{width:17px;height:17px;color:var(--cinza-claro);flex:none;}
.adm-aba:hover{background:var(--hover);color:var(--tinta);}
.adm-aba.on{background:var(--caixa);color:var(--tinta);font-weight:600;
  box-shadow:var(--sombra-contato);}
.adm-aba.on .ic{color:var(--verde);}

.adm-painel{display:flex;flex-direction:column;gap:var(--s5);min-width:0;}
.adm-bloco{
  background:var(--caixa);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra-contato);overflow:hidden;
}
.adm-bloco > h2{
  margin:0;padding:var(--s4) var(--s5);
  background:var(--caixa-topo);border-bottom:1px solid var(--linha);
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 108,"wght" 620;
  font-size:var(--t-md);
}
.adm-bloco > h2 small{
  display:block;margin-top:3px;font-size:var(--t-sm);color:var(--cinza);
  font-variation-settings:"wdth" 100,"wght" 400;
}
.adm-in{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);}

/* ---- cobertura farmacêutica: a peça central da administração ----
   Uma faixa por dia, em escala do horário de funcionamento. Verde é hora
   coberta, vermelho é loja aberta sem farmacêutico — mesma vermelha da tarja,
   mesmo sentido travado de "exige ação agora", porque é falta legal. */
.adm-cobs{display:flex;flex-direction:column;gap:2px;}
.adm-cob{
  display:grid;grid-template-columns:88px 1fr 210px;align-items:center;
  gap:var(--s4);padding:9px var(--s2);border-radius:6px;
}
.adm-cob:hover{background:var(--hover);}
.adm-cob.fechado{opacity:.55;}
.cob-dia{font-size:var(--t-ms);font-weight:500;}
.cob-faixa{
  position:relative;height:12px;border-radius:6px;
  background:var(--linha);overflow:hidden;
}
.cob-tem{position:absolute;top:0;bottom:0;background:var(--verde-claro);}
.cob-furo{
  position:absolute;top:0;bottom:0;background:var(--vermelha);
  background-image:linear-gradient(135deg,rgba(255,255,255,.28) 25%,transparent 25%,
    transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);
  background-size:7px 7px;
}
.cob-txt{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);
  color:var(--cinza-claro);text-align:right;
}
.adm-cob.com-furo .cob-txt{color:var(--vermelha);font-weight:600;}

/* ---- equipe ---- */
.adm-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.adm-p{
  display:grid;grid-template-columns:1fr 96px 150px 66px;align-items:center;
  gap:var(--s4);padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--linha-fina);
}
.adm-p:last-child{border-bottom:0;}
.adm-p:hover{background:var(--hover);}
.adm-p-id{display:flex;flex-direction:column;gap:1px;min-width:0;}
.adm-p-id b{font-size:var(--t-ms);font-weight:600;}
.adm-p-id small{font-size:var(--t-sm);color:var(--cinza-claro);}
.adm-p-h{font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza);}
.selo-ok,.selo-nao{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;border-radius:4px;padding:2px 6px;white-space:nowrap;
}
.selo-ok{background:var(--verde-fundo);color:#fff;}
.selo-nao{background:var(--caixa-topo);color:var(--cinza-claro);border:1px solid var(--linha);}
.adm-p-bts{display:flex;gap:2px;justify-content:flex-end;}
.adm-p-bts button{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:6px;color:var(--cinza-claro);cursor:pointer;
}
.adm-p-bts button:hover{background:var(--caixa-topo);color:var(--tinta);}
.adm-p-bts .ic{width:15px;height:15px;}
/* Tirar alguém da equipe apaga o PIN que assina o histórico dessa pessoa, e
   não há desfazer. O resto do sistema já pede confirmação no próprio botão —
   "Excluir" vira "Confirmar exclusão" em vermelho e volta sozinho em 4s. Este
   era o único caminho destrutivo que apagava direto, e por um ícone só. */
.adm-p-bts button.confirmando{
  width:auto;padding:0 var(--s3);gap:var(--s2);
  background:var(--vermelha);color:#fff;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;white-space:nowrap;
}
.adm-p-bts button.confirmando:hover{background:var(--vermelha-forte);color:#fff;}
[data-tema="escuro"] .adm-p-bts button.confirmando,
[data-tema="escuro"] .adm-p-bts button.confirmando:hover{color:var(--papel);}

/* ---- horário por dia ---- */
.adm-dias{display:flex;flex-direction:column;gap:var(--s2);}
.adm-dia{
  display:grid;grid-template-columns:150px 96px 96px;align-items:center;gap:var(--s3);
}
.adm-dia.fechado .inp{opacity:.4;pointer-events:none;}
.adm-dia .check{padding:0;}

/* ---- logo ---- */
.adm-logo{
  display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:var(--s4);
  border:1px dashed var(--linha);border-radius:var(--raio);background:var(--caixa-topo);
}
.adm-logo img{max-height:72px;max-width:100%;}
.adm-logo-vazio{font-size:var(--t-sm);color:var(--cinza-claro);}
.adm-logo-bts{display:flex;gap:var(--s3);}
.adm-logo-bts label{cursor:pointer;display:inline-flex;align-items:center;}
/* o logo entra no cabeçalho do documento em A4; na etiqueta térmica não, que
   só imprime preto e transformaria qualquer logo em borrão */
.fc-logo{max-height:34px;max-width:180px;display:block;margin-bottom:6px;}
.apar-linha{display:flex;gap:6px;align-items:center;}
.apar-linha .inp{flex:1;min-width:0;}
.apar-bt{
  width:38px;height:38px;flex:none;border:1px solid var(--linha);background:var(--caixa);
  border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--cinza);
}
.apar-bt:hover{background:var(--hover);color:var(--tinta);}
.apar-bt:disabled{opacity:.4;cursor:not-allowed;}
.fld-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:6px;}
.fld-head label{margin:0;}
/* Alterna pequeno para caber ao lado de um rótulo, sem a altura de 42px do
   .seg de linha inteira. Mesma cor de estado pressionado, escala menor. */
.seg-mini{display:flex;border:1px solid var(--linha);border-radius:6px;overflow:hidden;flex:none;}
.seg-mini button{
  border:0;background:var(--caixa);font-family:inherit;font-size:11px;font-weight:600;
  color:var(--cinza);padding:3px 10px;cursor:pointer;
  transition:background .13s ease,color .13s ease;
}
.seg-mini button+button{border-left:1px solid var(--linha);}
.seg-mini button:hover{background:var(--hover);}
.seg-mini button[aria-pressed="true"]{background:var(--verde);color:#fff;}
.fc-sub div{margin-top:2px;}
.fc-sub div:first-child{margin-top:0;}

/* O PIN divide a linha com "Sugerir um livre", e numa coluna de 240px sobrava
   tão pouco que o próprio placeholder saía cortado em "4 a 10 díg". O campo
   passa a ter uma largura mínima que cabe dez dígitos em mono, e o botão desce
   para a linha de baixo quando não couber ao lado. */
.pe-pin-linha{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.pe-pin-linha .inp{flex:1 1 11ch;min-width:11ch;}
.pe-pin-linha .bt-retirar{white-space:nowrap;flex:none;}

.pe-dias{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);}
.pe-dias .check{padding:0;}

.cf-previa{
  border-top:1px solid var(--linha);padding-top:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
}
/* A prévia mostra o cabeçalho real do documento, montado com o que está nos
   campos. Sem ela a pessoa preenche às cegas e só descobre o erro no papel. */
.cf-previa .folha-cab{
  background:var(--caixa-topo);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--s4);
}

/* A doca deixou de ser uma caixa branca pousada no canto e virou régua
   encostada na borda — a fileira de controles na lateral de um aparelho de
   balcão, que é o objeto que essa função imita. Encostar resolve metade:
   caixa flutuante parece coisa largada, régua parece parte da máquina. */
.doca{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:none;align-items:center;gap:2px;
  background:var(--caixa);border:1px solid var(--linha);
  border-radius:calc(var(--raio) + 4px);padding:4px;
  box-shadow:var(--sombra-contato),var(--sombra-ambiente);
}
/* Uma família só de botão. O chat era o único preenchido de verde e lia como
   engano; o que o distingue é a contagem, que é a informação. */
[data-barra="doca"] .doca .util,
[data-barra="doca"] .doca .chat-bt{
  background:none;border:0;color:var(--cinza);
  border-radius:var(--raio);
}
[data-barra="doca"] .doca .util:hover,
[data-barra="doca"] .doca .chat-bt:hover{
  background:var(--hover);color:var(--tinta);filter:none;
}
[data-barra="doca"] .doca .ic{color:currentColor;}
/* o painel aberto se vê no trilho: sem isso não dá para saber o que está no ar */
[data-barra="doca"] .doca [aria-expanded="true"],
[data-barra="doca"] .doca .doca-ativo{
  background:var(--verde-fundo);color:#fff;
}
[data-barra="doca"] .doca .doca-ativo .ic{color:#fff;}
/* separa o que é ferramenta do que é conversa, com o mesmo filete que a barra
   superior usa para separar as utilidades da pessoa */
[data-barra="doca"] .doca .chat-bt{
  border-top:1px solid var(--linha);margin-top:2px;padding-top:2px;
}
[data-barra="doca"] .doca{display:flex;}
[data-barra="doca"] .utils{display:none;}
/* dentro da doca o chat perde a moldura própria e vira mais um botão */
[data-barra="doca"] .chat-bt{
  position:static;box-shadow:none;border-radius:var(--raio);
}
[data-barra="doca"] .doca .util span:not(.nt-sino){
  position:static;width:auto;height:auto;clip:auto;
}

/* Em tela larga o conteúdo é centrado em 1160px, e sobram ~95px de margem de
   cada lado. A doca vira um trilho vertical nessa faixa vazia: deixa de cobrir
   a coluna de ação da tabela, que era o custo da versão horizontal.
   Abaixo de 1300px a margem some, e ela volta a deitar no canto. */
@media (min-width:1300px){
  [data-barra="doca"] .doca{
    flex-direction:column;
    right:12px;top:50%;bottom:auto;transform:translateY(-50%);
  }
  /* no trilho só cabe o ícone; o nome fica no aria-label e no title */
  [data-barra="doca"] .doca .util span:not(.nt-sino),
  [data-barra="doca"] .doca .chat-rot{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  [data-barra="doca"] .doca .util,
  [data-barra="doca"] .doca .chat-bt{
    /* relative sem zerar os deslocamentos mantinha o right:22px do botão
       flutuante, e ele escapava do trilho */
    position:relative;right:auto;bottom:auto;top:auto;left:auto;
    width:44px;height:44px;padding:0;flex:none;
    justify-content:center;
  }
  [data-barra="doca"] .doca .ic{width:20px;height:20px;}
  /* a contagem vira selo no canto do ícone, senão empurra o trilho */
  [data-barra="doca"] .doca .sino,
  [data-barra="doca"] .doca .nt-sino{
    position:absolute;top:2px;right:2px;margin:0;
    min-width:15px;height:15px;padding:0 3px;font-size:9px;
    border:1.5px solid var(--caixa);
  }

  /* Encostada na borda: sem afastamento, sem borda do lado direito e com o
     canto arredondado só à esquerda. É o que separa "régua da máquina" de
     "caixinha largada no canto". */
  [data-barra="doca"] .doca{
    right:0;
    border-right:0;
    border-radius:calc(var(--raio) + 4px) 0 0 calc(var(--raio) + 4px);
    padding:5px 4px;
  }

  /* A etiqueta do rótulo sai à esquerda no hover e no foco. É o que faz um
     trilho só de ícone continuar legível para quem não decorou os desenhos,
     sem alargar o trilho e sem devolver rótulo permanente. */
  [data-barra="doca"] .doca .util,
  [data-barra="doca"] .doca .chat-bt{ overflow:visible; }
  [data-barra="doca"] .doca .util span:not(.nt-sino),
  [data-barra="doca"] .doca .chat-rot{
    position:absolute;right:calc(100% + 10px);top:50%;
    width:auto;height:auto;clip:auto;overflow:visible;
    transform:translate(6px,-50%);
    background:var(--sup-tinta);color:var(--sup-tinta-txt);
    border:1px solid var(--sup-tinta-ln);
    padding:5px var(--s3);border-radius:6px;
    font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.13em;text-transform:uppercase;font-weight:500;
    opacity:0;pointer-events:none;
    box-shadow:var(--sombra-ambiente);
    transition:opacity var(--mv-r) ease,transform var(--mv-r) ease;
  }
  /* a bandeirinha aponta para o botão */
  [data-barra="doca"] .doca .util span:not(.nt-sino)::after,
  [data-barra="doca"] .doca .chat-rot::after{
    content:"";position:absolute;left:100%;top:50%;
    margin-top:-4px;border:4px solid transparent;border-left-color:var(--tinta);
  }
  [data-barra="doca"] .doca .util:hover span:not(.nt-sino),
  [data-barra="doca"] .doca .util:focus-visible span:not(.nt-sino),
  [data-barra="doca"] .doca .chat-bt:hover .chat-rot,
  [data-barra="doca"] .doca .chat-bt:focus-visible .chat-rot{
    opacity:1;transform:translate(0,-50%);
  }
}
@media (min-width:1300px) and (prefers-reduced-motion:reduce){
  [data-barra="doca"] .doca .util span:not(.nt-sino),
  [data-barra="doca"] .doca .chat-rot{transition:none;transform:translate(0,-50%);}
}

/* Com Exibição fora da barra, os rótulos das duas que sobraram cabem em 1366 —
   era esse o aperto. O ponto de quebra desce para telas realmente estreitas. */
@media (max-width:1440px){
  .barra-enxuta .util span:not(.nt-sino){
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
}
.who-id{min-width:0;overflow:hidden;}
.who-name,.who-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media (max-width:1440px){
  .who-role{display:none;}
  .navi{padding:0 var(--s3);}
  .topbar-in{gap:var(--s4);}
  .util{position:relative;padding:8px 10px;}
  .utils{padding-right:var(--s3);margin-right:var(--s3);}
}
@media (max-width:1080px){
  .brand-name{display:none;}
  .navi{padding:0 10px;font-size:var(--t-sm);}
}
@media (max-width:900px){
  .who-name{display:none;}
}

/* ======================= corpo ======================= */
.app{
  max-width:1160px;margin:0 auto;
  padding:var(--s8) var(--s7) var(--s9);
  display:flex;flex-direction:column;
}
.findbar{margin-bottom:var(--s7);}
.encomendas{margin-bottom:var(--s5);}

.rise{animation:rise .5s cubic-bezier(.16,.84,.36,1) both;}
.d1{animation-delay:.03s}
.d2{animation-delay:.11s}
.d3{animation-delay:.19s}
.d4{animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ======================= entrada por PIN ======================= */
/* ---------- entrada por PIN ----------
   Regra de contraste desta tela: o gradiente desce até #E7F0EA, e nesse ponto
   --cinza-claro cai para 4,26:1 e --verde para 4,43:1. Por isso, texto direto
   sobre o fundo usa só --tinta (15,55) e --cinza (6,11). Quem precisa de
   --cinza-claro senta numa superfície branca própria. */
.login{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s6);overflow:auto;
  background:linear-gradient(168deg,#FFFFFF 0%,var(--papel) 54%,#E7F0EA 100%);
}
.login[hidden]{display:none;}

/* a cruz da botica em escala de fachada, contida e atrás de tudo */
.login-fundo{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
/* A cruz verde da farmácia é uma placa de LED na calçada — ela respira. Aqui
   respira devagar e baixo: dá vida à tela sem pedir atenção na quadragésima
   vez que alguém entra no turno. */
.cruz-fundo{
  position:absolute;left:-96px;bottom:-128px;width:440px;height:440px;opacity:.055;
  animation:placa 9s ease-in-out infinite;
}
@keyframes placa{0%,100%{opacity:.045}50%{opacity:.085}}
.cruz-fundo::before,.cruz-fundo::after{content:"";position:absolute;background:var(--verde);border-radius:8px;}
.cruz-fundo::before{left:157px;top:0;width:126px;height:440px;}
.cruz-fundo::after{top:157px;left:0;height:126px;width:440px;}

.login-grade{
  position:relative;z-index:2;margin:auto;
  display:grid;grid-template-columns:1fr 392px;gap:var(--s9);
  align-items:center;width:min(960px,100%);
}

/* ---- lado da identidade ---- */
/* Entrada em cadência: os pedaços chegam em ordem, não todos de uma vez.
   O índice vai numa variável e o atraso sai de calc() — mesma técnica do
   escalonamento da home, sem uma classe por posição. */
.login-lado > *{animation:entra-lado .5s cubic-bezier(.16,.84,.36,1) both;
  animation-delay:calc(var(--i,0) * 70ms);}
@keyframes entra-lado{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* O relógio é a única coisa da tela que se move sozinha, e é útil: quem
   preenche hora de aferição o dia inteiro para de procurar o canto do sistema. */
.login-relogio{
  display:flex;align-items:baseline;margin:var(--s3) 0 2px;
  font-family:"IBM Plex Mono",monospace;font-variation-settings:normal;
  font-size:44px;font-weight:300;line-height:1;color:var(--tinta);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.login-relogio .rl-d{color:var(--cinza-claro);margin:0 1px;}
.login-relogio .rl-sg{font-size:26px;color:var(--cinza);margin-left:2px;}
.login-relogio .rl-s{font-size:26px;}
/* sem pisca no dois-pontos: com os segundos correndo seria movimento em
   dobro, e o tique já diz sozinho que a tela está viva */

.login-marca-l{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6);}
.cross-g{width:22px;height:22px;position:relative;flex:none;}
.cross-g::before,.cross-g::after{
  content:"";position:absolute;background:var(--verde);border-radius:2px;
  animation:placa-marca 9s ease-in-out infinite;
}
@keyframes placa-marca{0%,100%{opacity:.85}50%{opacity:1}}
.cross-g::before{left:8px;top:0;width:6px;height:22px;}
.cross-g::after{top:8px;left:0;height:6px;width:22px;}
.login-marca-l .marca-logo{width:22px;height:22px;}
.login-farm{
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 125,"wght" 700;
  font-size:var(--t-lg);letter-spacing:.055em;text-transform:uppercase;line-height:1;
}

.login-saudacao{
  margin:0;font-family:var(--fonte-titulo);
  font-variation-settings:"wdth" 108,"wght" 630;
  font-size:var(--t-2xl);line-height:1.08;letter-spacing:-.012em;color:var(--tinta);
}
.login-data{
  margin:var(--s2) 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-sm);letter-spacing:.05em;color:var(--cinza);
  font-variant-numeric:tabular-nums;
}
.login-frase{
  margin:var(--s5) 0 0;max-width:40ch;
  font-size:var(--t-ms);line-height:var(--entre);color:var(--cinza);
}

/* andaime de protótipo, com cara de andaime: superfície própria e etiqueta */
.login-demo{
  margin-top:var(--s7);padding:var(--s3) var(--s4) var(--s4);max-width:430px;
  background:var(--caixa);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra-contato);
}
.demo-tit{
  display:block;margin-bottom:var(--s3);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.demo-lista{
  margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s5);font-size:var(--t-sm);color:var(--cinza);
}
.demo-lista b{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  letter-spacing:.06em;color:var(--tinta);margin-right:6px;
}
.demo-nova{
  display:block;margin-top:var(--s4);padding-top:var(--s3);
  border:0;border-top:1px dashed var(--linha);background:none;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;color:var(--verde);
  cursor:pointer;
}
.demo-nova:hover{color:var(--verde-alto);}
.demo-nova.bt-confirma{border-top-color:transparent;padding:6px 10px;border-radius:var(--raio);}
.demo-nova-aviso{
  display:block;margin-top:4px;font-size:var(--t-xs);color:var(--cinza-claro);
  max-width:38ch;
}

/* ---- caixa do PIN ---- */
.login-caixa{
  position:relative;
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra);padding:var(--s6);
  animation:entra-login .5s cubic-bezier(.16,.84,.36,1) .06s both;
}
@keyframes entra-login{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.pin-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3);}
.login-perg{
  margin:0;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-claro);
}
.pin-olho,.pin-limpar{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cinza-claro);
  transition:color .12s ease;
}
.pin-olho:hover{color:var(--verde);}
.pin-limpar:hover{color:var(--vermelha);}
.pin-olho:focus-visible,.pin-limpar:focus-visible{outline:2px solid var(--verde);outline-offset:3px;}
.pin-limpar[hidden]{display:none;}

/* O visor é a moldura; o input vive por cima, transparente, e continua sendo
   quem tem o valor e o foco. Os pontos abaixo é que dão o número de dígitos
   num olhar — password sozinho não deixa contar. */
.pin-visor{
  position:relative;height:76px;
  background:var(--caixa-topo);border:1px solid var(--linha);border-radius:var(--raio);
  transition:border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
.pin-visor:focus-within{
  background:var(--caixa);border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(63,143,104,.17);
}
.pin-campo{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;border:0;outline:none;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:500;
  letter-spacing:.3em;text-align:center;text-indent:.3em;
  color:transparent;caret-color:transparent;
}
.pin-campo::-ms-reveal{display:none;}
.pin-campo:disabled{cursor:not-allowed;}

.pin-pips{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:11px;pointer-events:none;padding:0 var(--s4);
}
.pip{
  width:13px;height:13px;border-radius:50%;background:var(--verde);flex:none;
  animation:pip-entra .17s cubic-bezier(.2,.9,.3,1.45) both;
}
.pip.livre{background:none;border:1.5px solid var(--linha);}
@keyframes pip-entra{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes tecla-entra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* o visor confirma cada dígito com um pulso curto no anel */
.pin-visor.bateu{animation:visor-pulso .22s ease-out;}
@keyframes visor-pulso{
  0%{box-shadow:0 0 0 3px rgba(63,143,104,.17);}
  40%{box-shadow:0 0 0 7px rgba(63,143,104,.12);}
  100%{box-shadow:0 0 0 3px rgba(63,143,104,.17);}
}
/* acerto: os pontos viram verde cheio antes de a tela sair */
.pin-visor.certo{border-color:var(--verde);background:var(--hover);}
.pin-visor.certo .pip{background:var(--verde);animation:pip-certo .4s cubic-bezier(.2,.9,.3,1.5) both;}
.pin-visor.certo .pip:nth-child(2){animation-delay:.04s}
.pin-visor.certo .pip:nth-child(3){animation-delay:.08s}
.pin-visor.certo .pip:nth-child(4){animation-delay:.12s}
.pin-visor.certo .pip:nth-child(5){animation-delay:.16s}
.pin-visor.certo .pip.livre{display:none;}
@keyframes pip-certo{0%{transform:none}45%{transform:scale(1.45)}100%{transform:none}}

/* a confirmação continua um instante por cima da home, sem atrasar a entrada */
.entrou{
  position:fixed;inset:0;z-index:205;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 45%, rgba(47,122,95,.16), transparent 70%);
  animation:entrou-some .5s ease-out both;
}
@keyframes entrou-some{from{opacity:1}to{opacity:0}}
/* revelado: os dígitos tomam o lugar dos pontos */
.pin-visor.vendo .pin-pips{display:none;}
.pin-visor.vendo .pin-campo{color:var(--tinta);caret-color:var(--verde);}

.pin-linha{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s3);min-height:16px;
}
.pin-dica{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-claro);
}

.pin-erro{
  min-height:20px;text-align:center;margin:var(--s3) 0 0;
  font-size:var(--t-sm);font-weight:500;color:var(--vermelha);
}
/* a espera do bloqueio drena à vista: contar segundos lendo texto é pior */
.pin-barra{
  height:3px;margin-top:var(--s1);border-radius:2px;
  background:var(--vermelha-fundo);overflow:hidden;
}
.pin-barra[hidden]{display:none;}
.pin-barra i{display:block;height:100%;width:100%;background:var(--vermelha);
  transition:width 1s linear;}

/* As ferramentas são só aritmética: nenhuma lê cliente, ficha ou histórico.
   Por isso podem ficar antes do PIN — e na correria do balcão é o que evita
   alguém digitar o PIN de outra pessoa só para fazer uma conta. */
.login-ferr{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:6px;
}
.login-ferr button{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;padding:10px var(--s3);border-radius:var(--raio);
  background:var(--caixa);border:1px solid var(--linha);color:var(--cinza);
  font-family:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
  transition:background var(--mv-r) ease,border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.login-ferr button .ic{width:1.05em;height:1.05em;color:var(--cinza-claro);}
.login-ferr button:hover{background:var(--hover);border-color:var(--linha-forte);color:var(--tinta);}
.login-ferr button:hover .ic{color:var(--verde);}
.login-ferr button:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}
.login-ferr span{font-size:var(--t-xs);color:var(--cinza);line-height:1.45;text-align:center;}

.login-caixa.errou{animation:treme .38s ease;}
@keyframes treme{
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-9px)} 30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)} 60%{transform:translateX(5px)} 80%{transform:translateX(-2px)}
}

/* ---- entrada da farmácia (camada 1) ---- */
#form-farm-login{display:flex;flex-direction:column;gap:var(--s4);}
.farm-erro{
  min-height:20px;text-align:center;margin:0;
  font-size:var(--t-sm);font-weight:500;color:var(--vermelha);
}
.farm-erro[hidden]{display:none;}

.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4);}
.teclado button{
  height:60px;
  animation:tecla-entra .34s cubic-bezier(.2,.9,.3,1.25) both;
  animation-delay:calc(var(--i,0) * 26ms + 240ms);
  background:var(--caixa);border:1px solid var(--linha);
  font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:500;
  color:var(--tinta);cursor:pointer;
  transition:background .1s ease,border-color .1s ease,transform .06s ease;
}
.teclado button:hover:not(:disabled){background:var(--hover);border-color:var(--linha-forte);}
.teclado button:active:not(:disabled){transform:scale(.96);}
/* tecla física do balcão acende a tecla da tela: confirma que o micro pegou */
.teclado button.batida{background:var(--hover);border-color:var(--verde-linha);transform:scale(.96);}
.teclado button.acao{font-family:var(--fonte-corpo);font-size:var(--t-ms);font-weight:600;}
.teclado button.ok{background:var(--verde);border-color:var(--verde-fundo);color:#fff;}
.teclado button.ok:hover:not(:disabled){filter:brightness(1.14);background:var(--verde);}
.teclado button.ok.batida{filter:brightness(1.14);}
.teclado button:disabled{opacity:.4;cursor:not-allowed;}

@media (max-width:900px){
  .login{padding:var(--s5) var(--s4);align-items:flex-start;}
  .login-grade{grid-template-columns:1fr;gap:var(--s6);width:min(392px,100%);margin:0 auto;}
  .login-lado{order:2;}
  .login-caixa{order:1;}
  .login-saudacao{font-size:var(--t-xl);}
  .login-marca-l{margin-bottom:var(--s4);}
  .login-demo{margin-top:var(--s5);max-width:none;}
  .cruz-fundo{left:-190px;bottom:-200px;}
}
@media (max-width:420px){
  .login-caixa{padding:var(--s5);}
  .teclado button{height:54px;}
  .pin-visor{height:68px;}
}

/* ---------- busca ---------- */
/* .rise anima opacity e transform, e isso faz de cada bloco um contexto de
   empilhamento próprio. Sem este z-index, a faixa de encomendas — que vem
   depois no HTML — pinta por cima das sugestões da busca. */
.findbar{display:flex;gap:var(--s3);position:relative;z-index:30;}
.field{position:relative;flex:1;}
.field > .ic{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  color:var(--cinza-claro);pointer-events:none;
  transition:color .14s ease;
}
.field:focus-within > .ic{color:var(--verde);}
.search{
  width:100%;height:66px;padding:0 96px 0 52px;
  background:var(--caixa);border:1px solid var(--linha);color:var(--tinta);
  font-family:inherit;font-size:var(--t-xl);letter-spacing:-.004em;
  box-shadow:var(--sombra-contato);
  transition:border-color .14s ease,box-shadow .14s ease;
}
.search::placeholder{color:var(--cinza-claro);}
.search:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.17),var(--sombra-ambiente);}
.search::-webkit-search-cancel-button{display:none;}
.atalho{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--cinza-claro);letter-spacing:.06em;transition:opacity .14s ease;
}
.tecla{
  border:1px solid var(--linha);border-bottom-width:2px;
  padding:2px 6px;color:var(--cinza);background:var(--caixa-topo);
  font-size:10px;line-height:1.4;
}
.field:focus-within .atalho{opacity:0;}

.novo{
  height:66px;flex:none;padding:0 var(--s6);
  background:linear-gradient(178deg,var(--verde-alto),var(--verde));
  color:#fff;border:1px solid var(--verde-fundo);
  font-family:inherit;font-size:var(--t-md);font-weight:600;
  display:flex;align-items:center;gap:var(--s2);cursor:pointer;
  box-shadow:var(--sombra);
  transition:filter .14s ease,transform .14s ease,box-shadow .14s ease;
}
.novo:hover{filter:brightness(1.14);}
.novo:active{transform:translateY(1px);box-shadow:var(--sombra-contato);}
.novo:focus-visible{outline-color:var(--verde-fundo);}

/* ---------- encomendas ---------- */
.encomendas{
  display:flex;align-items:center;gap:var(--s6);
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra-contato);padding:var(--s4) var(--s6);cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.encomendas:hover{border-color:var(--linha-forte);box-shadow:var(--sombra);transform:translateY(-1px);}
.encomendas .eyebrow{color:var(--cinza-claro);flex:none;}
.enc-stats{display:flex;align-items:baseline;gap:var(--s6);flex:1;flex-wrap:wrap;}
.stat{display:flex;align-items:baseline;gap:var(--s2);}
.stat b{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-2xl);font-weight:500;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;line-height:1;
}
.stat span{font-size:var(--t-ms);color:var(--cinza);}
.stat.alerta b,.stat.alerta span{color:var(--vermelha);}
.seta{
  display:inline-flex;color:var(--cinza-claro);flex:none;
  transition:color .14s ease,transform .18s cubic-bezier(.16,.84,.36,1);
}
.encomendas:hover .seta{color:var(--verde);transform:translateX(4px);}

/* ---------- blocos ---------- */
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start;}
.block{
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra);display:flex;flex-direction:column;
}
.block-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);background:var(--caixa-topo);border-bottom:1px solid var(--linha);
}
.block-head h2{
  margin:0;font-size:var(--t-md);
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.012em;text-wrap:balance;
}
/* "N AGORA · M ABERTOS" no cabeçalho de cada bloco — mesma régua. */
.count{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);font-weight:500;
  color:var(--cinza);font-variant-numeric:tabular-nums;letter-spacing:.05em;
}
/* Sem teto, uma lista de vinte itens empurra o resto da home para fora da
   tela. Com teto, o bloco tem tamanho previsível e a rolagem é dele, não da
   página inteira. */
.list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  max-height:16rem;overflow-y:auto;overscroll-behavior:contain;
}
.list::-webkit-scrollbar{width:10px;}
.list::-webkit-scrollbar-thumb{
  background:var(--linha);border-radius:5px;
  border:3px solid var(--caixa);
}
.list::-webkit-scrollbar-thumb:hover{background:var(--linha-forte);}
.list::-webkit-scrollbar-track{background:transparent;}
/* diz que há mais coisa abaixo sem ocupar espaço com texto */
.block .list.tem-mais{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}
.item{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);padding:var(--s3) var(--s4) var(--s3) var(--s7);
  transition:background .13s ease;
}
.item::before{
  content:"";position:absolute;left:var(--s5);top:12px;bottom:12px;
  width:3px;background:var(--linha);transform-origin:top;
  transition:width .15s cubic-bezier(.16,.84,.36,1);
  animation:tarja .34s cubic-bezier(.16,.84,.36,1) both;
}
.item::after{
  content:"";position:absolute;left:var(--s7);right:var(--s5);top:0;height:1px;
  background:var(--linha-fina);
}
.item:first-child::after{display:none;}
.item[data-tarja="vermelha"]::before{background:var(--vermelha);}
.item[data-tarja="preta"]::before{background:var(--tinta);}
.item:hover{background:var(--hover);}
.item:hover::before{width:5px;}
@keyframes tarja{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.list .item:nth-child(1)::before{animation-delay:.30s}
.list .item:nth-child(2)::before{animation-delay:.35s}
.list .item:nth-child(3)::before{animation-delay:.40s}
.list .item:nth-child(4)::before{animation-delay:.45s}
.list .item:nth-child(5)::before{animation-delay:.50s}
.item-txt{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1;}
.item-l1{min-width:0;}
.item-t{font-size:var(--t-md);font-weight:500;}
.item-s{font-size:var(--t-sm);color:var(--cinza);}
/* Prazo do item — "HOJE 14H", "CRÍTICO", "SEM PRAZO" — é o que decide se
   alguém age agora ou não; mesma régua da Ficha, --t-xs para --t-sm. */
.item-m{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza-claro);
  font-variant-numeric:tabular-nums;letter-spacing:.05em;text-transform:uppercase;
  align-self:flex-start;
}
.item[data-tarja="vermelha"] .item-m{color:var(--vermelha);}

/* ações do item */
/* Alvo maior que o desenho: quem está em pé, com pressa, no mouse do balcão,
   erra por pouco entre três ícones colados. --s7 (38px) é o mesmo salto de
   conforto das teclas do modal de Ferramentas — o ícone em si continua 16px,
   só a área de clique cresce. O espaço entre os três também sai de 2px (quase
   nada) para --s2, para não ficar tão junto que a folga do alvo maior some. */
.item-acoes{display:flex;gap:var(--s2);flex:none;align-items:center;padding-top:1px;}
.ib{
  width:var(--s7);height:var(--s7);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:none;color:var(--fraco);cursor:pointer;
  font-family:inherit;font-size:15px;line-height:1;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.ib:hover{background:var(--caixa);border-color:var(--linha);color:var(--verde);}
.ib.perigo:hover{color:var(--vermelha);}
.ib .ic{width:16px;height:16px;}

/* item resolvido ou cancelado */
.item.pronta .item-t,.item.pronta .item-s{text-decoration:line-through;color:var(--fraco);}
.item.pronta .item-t{font-weight:400;}
.item.pronta .item-m{color:var(--verde);}
.item.pronta.foi-cancelada .item-m{color:var(--fraco);}
.item.pronta .ib{color:var(--fraco);}
.add-row{
  display:flex;align-items:center;gap:0;width:100%;
  padding:var(--s3) var(--s5);border:0;border-top:1px solid var(--linha);
  background:transparent;font-family:inherit;font-size:var(--t-ms);font-weight:500;
  color:var(--cinza-claro);cursor:pointer;text-align:left;
  transition:background .13s ease,color .13s ease;
}
.add-row:hover{background:var(--hover);color:var(--verde);}

.onboard-fim{
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;
}
.onboard-fim .help{margin:0;}

/* ======================= cadastro ======================= */
.pagehead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s6);flex-wrap:wrap;
}
.voltar{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--t-ms);color:var(--cinza);cursor:pointer;
  background:none;border:0;padding:0;font-family:inherit;
  margin-bottom:var(--s3);transition:color .13s ease;
}
.voltar:hover{color:var(--verde);}
/* o rótulo amarra a tela ao domínio: mesma cor dos blocos do início, então
   a pessoa reconhece onde está antes de ler o título */
.pg-rot{
  display:flex;align-items:center;gap:7px;margin-bottom:var(--s2);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dom-esc,var(--cinza-claro));
}
.pg-rot::before{
  content:"";width:16px;height:2px;border-radius:1px;
  background:var(--dom,var(--linha-forte));
}
.pagehead h1{
  margin:0;font-size:var(--t-2xl);
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 700;
  letter-spacing:-.018em;line-height:1.1;
}
.pagehead p{margin:var(--s2) 0 0;font-size:var(--t-ms);color:var(--cinza);max-width:52ch;}

.form-card{
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra-contato);
}

.sec{
  position:relative;border:0;margin:0;
  padding:var(--s6) var(--s6) var(--s6) var(--s7);
  border-top:1px solid var(--linha-fina);
}
.sec:first-of-type{border-top:0;}
.sec::before{
  content:"";position:absolute;left:var(--s5);top:var(--s6);bottom:var(--s6);
  width:2px;background:var(--linha);
}
.sec[data-tarja="vermelha"]::before{background:var(--vermelha);}
.sec[data-tarja="preta"]::before{background:var(--tinta);}

.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap;}
.sec-head legend{padding:0;}
.sec-title{
  font-size:var(--t-md);font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.012em;
}
.sec-tag{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.sec-tag.req{color:var(--vermelha);}
.sec-tag.sens{color:var(--tinta);}

.row{display:grid;gap:var(--s4);margin-bottom:var(--s4);}
.row:last-child{margin-bottom:0;}
.r-2{grid-template-columns:1fr 1fr;}
.r-3{grid-template-columns:1fr 1fr 1fr;}
.r-nome{grid-template-columns:2fr 1fr;}
.r-cpf{grid-template-columns:1fr 1fr 1fr;}
.r-end{grid-template-columns:1fr 2.4fr .8fr;}
.r-bairro{grid-template-columns:1.4fr 1.4fr .6fr;}

/* O atributo hidden perde para qualquer regra que declare display, e isso
   deixava a faixa vermelha de licenciamento aparecendo vazia em todo serviço
   que não exige licença — vermelho sem motivo, na tela mais usada, gastando o
   significado da tarja. Uma linha resolve para o arquivo inteiro. */
[hidden]{display:none !important;}

.fld{display:flex;flex-direction:column;gap:6px;min-width:0;}
.fld label{font-size:var(--t-ms);font-weight:500;letter-spacing:.002em;}
.req-mark{color:var(--vermelha);margin-left:2px;}
.help{font-size:var(--t-sm);color:var(--cinza-claro);line-height:1.35;}
.inp{
  height:44px;width:100%;padding:0 var(--s3);
  background:var(--caixa);border:1px solid var(--linha);color:var(--tinta);
  font-family:inherit;font-size:var(--t-md);
  transition:border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
.inp::placeholder{color:var(--cinza-claro);}
.inp:hover{border-color:var(--linha-forte);}
.inp:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.15);}
/* autoria vem do PIN, não da digitação: o campo mostra, não recebe */
.inp[readonly]{background:var(--caixa-topo);color:var(--cinza);cursor:default;}
.inp[readonly]:hover{border-color:var(--linha);}
.inp.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:var(--t-ms);letter-spacing:.02em;}
select.inp{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cinza) 50%),linear-gradient(135deg,var(--cinza) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s7);}
.fld.erro .inp{border-color:var(--vermelha);background:var(--vermelha-fundo);}
.msg-erro{display:none;font-size:var(--t-sm);color:var(--vermelha);font-weight:500;}
.fld.erro .msg-erro{display:block;}

/* segmentado */
.seg{display:flex;border:1px solid var(--linha);width:fit-content;max-width:100%;flex-wrap:wrap;}
.seg button{
  border:0;border-right:1px solid var(--linha);background:var(--caixa);
  font-family:inherit;font-size:var(--t-ms);color:var(--cinza);
  padding:0 var(--s4);height:42px;cursor:pointer;
  transition:background .13s ease,color .13s ease;
}
.seg button:last-child{border-right:0;}
.seg button:hover{background:var(--hover);}
.seg button[aria-pressed="true"]{background:var(--verde);color:#fff;font-weight:600;}
.seg button[aria-pressed="true"][data-tom="off"]{
  background:var(--sup-tinta);color:var(--sup-tinta-txt);}

/* chips */
.chips{
  border:1px solid var(--linha);background:var(--caixa);
  padding:var(--s2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  min-height:44px;transition:border-color .13s ease,box-shadow .13s ease;
}
.chips:focus-within{border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.15);}
.chips input{
  border:0;outline:none;background:transparent;font-family:inherit;font-size:var(--t-ms);
  flex:1;min-width:150px;height:28px;color:var(--tinta);
}
.chips input::placeholder{color:var(--cinza-claro);}
.chip-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--caixa-topo);border:1px solid var(--linha);
  padding:4px 6px 4px 9px;font-size:var(--t-sm);font-weight:500;
}
.chips[data-tom="alerta"] .chip-tag{background:var(--vermelha-fundo);border-color:var(--vermelha-linha);color:var(--vermelha);}
.chip-tag button{
  border:0;background:none;cursor:pointer;color:inherit;opacity:.5;
  font-size:14px;line-height:1;padding:0 2px;font-family:inherit;
}
.chip-tag button:hover{opacity:1;}

/* checkbox */
.check{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;padding:var(--s2) 0;}
.check input{
  appearance:none;width:18px;height:18px;flex:none;margin:1px 0 0;
  border:1px solid var(--cinza-claro);background:var(--caixa);cursor:pointer;
  transition:background .13s ease,border-color .13s ease;
}
.check input:checked{background:var(--verde);border-color:var(--verde);}
.check input:checked::after{
  content:"";display:block;width:4px;height:9px;margin:2px 0 0 5.5px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.check-txt{font-size:var(--t-ms);line-height:1.45;}
.check-txt small{display:block;color:var(--cinza-claro);font-size:var(--t-sm);margin-top:2px;}

.aviso{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--caixa-topo);border:1px solid var(--linha);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--cinza);
  line-height:1.5;margin-top:var(--s4);
}
.aviso b{color:var(--tinta);font-weight:600;}

/* barra de ação */
.actions{
  position:sticky;bottom:0;margin-top:var(--s5);
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra-barra);
  padding:var(--s4) var(--s6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
.actions .hint{font-size:var(--t-sm);color:var(--cinza-claro);}
.actions .bts{display:flex;gap:var(--s3);}
.bt{
  height:46px;padding:0 var(--s6);font-family:inherit;font-size:var(--t-ms);font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:filter .14s ease,background .14s ease,transform .1s ease;
}
.bt-primario{background:linear-gradient(178deg,var(--verde-alto),var(--verde));color:#fff;border-color:var(--verde-fundo);box-shadow:var(--sombra-contato);}
.bt-primario:hover{filter:brightness(1.14);}
.bt-primario:active{transform:translateY(1px);}
.bt-fantasma{background:transparent;color:var(--cinza);border-color:var(--linha);}
.bt-fantasma:hover{background:var(--hover);color:var(--tinta);}
.bt-perigo{color:var(--cinza);}
.bt-perigo:hover{background:var(--vermelha-fundo);color:var(--vermelha);border-color:var(--vermelha-linha);}
.bt-confirma{background:var(--vermelha);color:#fff;border-color:var(--vermelha);}
.bt-confirma:hover{background:var(--vermelha-forte);color:#fff;border-color:var(--vermelha-forte);}

/* aviso de sucesso */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--verde-fundo);color:#fff;
  padding:var(--s3) var(--s5);font-size:var(--t-ms);font-weight:500;
  box-shadow:0 10px 30px -8px rgba(19,40,32,.5);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  /* por cima de tudo: em 50 ele sumia atrás do login, dos painéis e da
     administração, então "guardado na equipe" e "CNPJ copiado" nunca
     apareciam para quem estava justamente nessas telas. Ver A ESCADA. */
  z-index:250;
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ======================= encomendas ======================= */
.filtros{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);}
.filtro{
  display:inline-flex;align-items:baseline;gap:var(--s2);
  background:var(--caixa);border:1px solid var(--linha);
  padding:var(--s2) var(--s4);font-family:inherit;font-size:var(--t-ms);font-weight:500;
  color:var(--cinza);cursor:pointer;
  transition:background .13s ease,color .13s ease,border-color .13s ease;
}
.filtro:hover{background:var(--hover);color:var(--tinta);}
.filtro b{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--cinza-claro);
}
.filtro[aria-pressed="true"]{background:var(--verde);border-color:var(--verde-fundo);color:#fff;}
.filtro[aria-pressed="true"] b{color:#8FD3B0;}
.filtro[data-f="acao"][aria-pressed="true"]{background:var(--vermelha);border-color:var(--vermelha-forte);}
.filtro[data-f="acao"][aria-pressed="true"] b{color:var(--vermelha-linha);}

/* Sombra de rolagem, só CSS: quando a tabela tem mais coluna do que cabe (a
   doca cobre parte da largura, documentado em "Duas arrumações da barra
   superior"), a borda direita não dizia isso a ninguém. Duas camadas por
   lado — uma "tampa" da cor da própria tabela, presa ao conteúdo
   (background-attachment:local), e uma "sombra" presa ao contêiner
   (attachment:scroll). No início e no fim do scroll a tampa cobre a sombra
   exatamente onde não há mais o que rolar; ela se revela sozinha ao rolar,
   sem listener nenhum. */
.tabela-wrap{
  border:1px solid var(--linha);
  box-shadow:var(--sombra-contato);overflow-x:auto;
  background-color:var(--caixa);
  background-image:
    linear-gradient(to right, var(--caixa) 60%, transparent),
    linear-gradient(to left, var(--caixa) 60%, transparent),
    linear-gradient(to right, var(--linha-forte), transparent),
    linear-gradient(to left, var(--linha-forte), transparent);
  background-repeat:no-repeat;
  background-position:left top, right top, left top, right top;
  background-size:var(--s5) 100%, var(--s5) 100%, var(--s2) 100%, var(--s2) 100%;
  background-attachment:local, local, scroll, scroll;
}
table.enc{width:100%;border-collapse:collapse;min-width:920px;}
.enc thead th{
  position:sticky;top:0;z-index:2;
  background:var(--caixa-topo);
  border-bottom:1px solid var(--linha);
  padding:var(--s3) var(--s4);text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cinza-claro);
  white-space:nowrap;
}
.enc tbody tr{border-bottom:1px solid var(--linha-fina);transition:background .13s ease;}
.enc tbody tr:last-child{border-bottom:0;}
.enc tbody tr:hover{background:var(--hover-linha);}
.enc td{padding:var(--s3) var(--s4);vertical-align:middle;}
.enc td:first-child{position:relative;padding-left:var(--s7);}
.enc td:first-child::before{
  content:"";position:absolute;left:var(--s5);top:11px;bottom:11px;width:2px;
  background:var(--linha);transition:width .15s cubic-bezier(.16,.84,.36,1);
}
.enc tr[data-tarja="vermelha"] td:first-child::before{background:var(--vermelha);}
.enc tr[data-tarja="preta"] td:first-child::before{background:var(--tinta);}
.enc tbody tr:hover td:first-child::before{width:5px;}

.enc tbody tr{cursor:pointer;}
.enc tbody tr.linha-det{cursor:default;}
.prod{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-size:var(--t-md);font-weight:500;letter-spacing:-.002em;
}
.enc tbody tr:hover .prod > span:first-child{text-decoration:underline;text-decoration-color:var(--linha-fraca);text-underline-offset:3px;}

/* linha de detalhe */
tr.aberta{background:var(--hover);}
tr.aberta td:first-child::before{width:5px;}
tr.linha-det > td{padding:0;background:var(--caixa-topo);border-top:1px solid var(--linha);}
tr.linha-det > td::before{display:none;}
.det{
  padding:var(--s5) var(--s6) var(--s5) var(--s7);
  display:flex;flex-direction:column;gap:var(--s5);
  animation:abre .2s cubic-bezier(.16,.84,.36,1) both;
}
@keyframes abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4) var(--s6);}
.selo-inc{display:inline-block;margin-left:var(--s2);padding:2px 8px;border-radius:999px;
  background:var(--papel);border:1px solid var(--linha);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);vertical-align:middle;}
/* a linha do cadastro rápido tem grade própria: nome, celular e os dois botões
   lado a lado, com o aviso ocupando a largura toda embaixo */
#linha-rapido{grid-template-columns:2fr 1.2fr auto;align-items:start;}
#linha-rapido .aviso{grid-column:1/-1;margin:0;}
.rapido-bts{display:flex;gap:var(--s2);align-items:flex-end;padding-bottom:2px;}
@media (max-width:760px){
  #linha-rapido{grid-template-columns:1fr;}
  .rapido-bts{padding-bottom:0;}
}
.link-faixa{border:0;background:none;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.link-faixa:hover{text-decoration-thickness:2px;}
.det-r{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);
  letter-spacing:.15em;text-transform:uppercase;color:var(--cinza-claro);margin-bottom:3px;
}
.det-v{font-size:var(--t-ms);}
.det-v.vazio-v{color:var(--fraco);}
.hist ol{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;}
.hist li{font-size:var(--t-sm);color:var(--cinza);position:relative;padding-left:17px;}
.hist li::before{
  content:"";position:absolute;left:4px;top:6px;width:5px;height:5px;
  background:var(--caixa);border:1px solid #C0CABC;
}
.hist li:last-child::before{background:var(--verde);border-color:var(--verde);}
.hist b{color:var(--tinta);font-weight:600;}
.dica-linha{
  font-size:var(--t-sm);color:var(--cinza-claro);
  margin:calc(var(--s4) * -1 + 2px) 0 var(--s4);
}
.carimbo{
  display:inline-block;margin-left:var(--s2);vertical-align:2px;
  font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  padding:2px 6px;border:1.5px solid;white-space:nowrap;
}
.carimbo.pago{color:var(--verde);border-color:var(--verde);}
.carimbo.sinal{color:var(--cinza);border-color:var(--linha-forte);background:var(--caixa-topo);}
.prod-sub{font-size:var(--t-sm);color:var(--cinza-claro);}
.cli{font-size:var(--t-ms);font-weight:500;}
.data{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;color:var(--cinza);white-space:nowrap;
}
.data em{display:block;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-claro);}
.data.pessoa em{
  font-family:var(--fonte-titulo);
  font-size:var(--t-sm);letter-spacing:0;text-transform:none;color:var(--cinza);
}
.data.tarde{color:var(--vermelha);}
.data.tarde em{color:var(--vermelha);}

.pill{
  display:inline-block;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;border:1px solid;
}
.pill.caminho{border-color:var(--linha);color:var(--cinza);background:var(--caixa-topo);}
.pill.chegou{border-color:var(--verde-fundo);background:var(--verde);color:#fff;}
.pill.avisado{border-color:#A8C6B5;background:var(--caixa);color:var(--verde);}
.pill.atrasada{border-color:var(--vermelha-linha);background:var(--vermelha-fundo);color:var(--vermelha);}
.pill.retirada{border-color:var(--linha-fina);background:var(--caixa);color:var(--cinza-claro);}

.pill.cancelada{border-color:var(--linha);background:var(--caixa-topo);color:var(--fraco);text-decoration:line-through;}

/* etiqueta de situação clicável */
button.pill{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
  transition:filter .13s ease,box-shadow .13s ease;
}
button.pill:hover{filter:brightness(.95);box-shadow:0 1px 0 rgba(19,40,32,.18);}
button.pill .caret{display:inline-flex;opacity:.7;}
button.pill .caret .ic{width:12px;height:12px;}

.menu-estado{
  position:fixed;z-index:70;display:none;min-width:236px;
  background:var(--caixa);border:1px solid var(--verde-fundo);
  box-shadow:0 18px 44px -14px rgba(19,40,32,.48);
}
.menu-estado.on{display:block;}
/* Este menu é aberto de DENTRO dos painéis, e eles foram elevados acima da
   tela de login: ferramentas 210, etiqueta e anotações 211, exibição 212.
   Em 120 ele abria atrás de quem o chamou. */
#menu-ficha{z-index:220;}
.menu-estado .cab{
  display:block;padding:var(--s3) var(--s4);background:var(--caixa-topo);
  border-bottom:1px solid var(--linha);color:var(--cinza-claro);
  font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;
}
.mi{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  padding:10px var(--s4);border:0;border-bottom:1px solid var(--linha-fina);
  background:none;font-family:inherit;font-size:var(--t-ms);
  color:var(--tinta);text-align:left;cursor:pointer;
  transition:background .11s ease;
}
.mi:last-child{border-bottom:0;}
.mi:hover{background:var(--hover);}
.mi.atual{background:var(--caixa-topo);color:var(--verde);font-weight:600;}
.mi.atual::after{content:"agora";margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-claro);}
.ponto{width:9px;height:9px;flex:none;border:1px solid;}
.ponto.caminho{background:var(--caixa-topo);border-color:var(--cinza-claro);}
.ponto.chegou{background:var(--verde);border-color:var(--verde);}
.ponto.avisado{background:var(--caixa);border-color:var(--verde);}
.ponto.atrasada{background:var(--vermelha);border-color:var(--vermelha);}
.ponto.retirada{background:var(--linha);border-color:#C9D2C6;}
.ponto.cancelada{background:var(--cinza-claro);border-color:var(--cinza-claro);}
.mi.urg{border-top:1px solid var(--linha-fina);margin-top:4px;padding-top:9px;}

/* Em "sem retirar" e "fornecedor atrasou" a coluna tem dois botões — um deles
   manda mensagem para o cliente de verdade (Cobrar/Avisar), o outro só muda
   o estado interno (Marcar retirada/Atualizar previsão). A coluna tem 13% da
   tabela — largura pensada para UM botão (comentário de table-layout:fixed
   mais abaixo no arquivo). Lado a lado, os dois nunca cabiam: passavam do
   cartão para a direita em qualquer largura de tela, sem depender de doca
   nem de monitor pequeno. Empilhados, a coluna só precisa caber o mais largo
   dos dois — a linha cresce um pouco, mas nada escapa do cartão. */
.acao-col{
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3);
}
.bt-avisar{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--caixa);border:1px solid var(--verde);color:var(--verde);
  font-family:inherit;font-size:var(--t-sm);font-weight:600;
  padding:8px var(--s3);cursor:pointer;
  transition:background .13s ease,color .13s ease;
}
.bt-avisar:hover{background:var(--verde);color:#fff;}
.bt-avisar .ic{width:14px;height:14px;}
.bt-retirar{
  background:none;border:0;padding:8px 4px;cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:500;color:var(--cinza-claro);
  transition:color .13s ease;
}
.bt-retirar:hover{color:var(--verde);text-decoration:underline;}
.sem-acao{font-size:var(--t-sm);color:var(--fraco);}

/* A coluna Ação tem 13% da tabela — a moldura do bt-avisar (borda mais os
   14px de preenchimento de cada lado) já não cabia com "Marcar chegada"
   SOZINHO, não só empilhado com um segundo botão (aba "A caminho" quebrava
   igual). Sem moldura, ele vira texto do mesmo jeito que .bt-retirar já é:
   continua verde e em negrito — a cor e o peso é que dizem "principal",
   não a caixa — e cabe em qualquer largura, sozinho ou em par. */
.acao-col .bt-avisar{
  background:none;border:0;padding:2px 0;
}
.acao-col .bt-avisar:hover{
  background:none;color:var(--verde-alto);text-decoration:underline;
}


/* ---- nova encomenda ---- */
.busca-cli{position:relative;}
.sugestoes{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
  background:var(--caixa);border:1px solid var(--verde);
  box-shadow:var(--sombra-ambiente);max-height:262px;overflow-y:auto;display:none;
}
.sugestoes.on{display:block;}
.sug{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  width:100%;padding:var(--s3) var(--s4);
  border:0;border-bottom:1px solid var(--linha-fina);
  background:none;font-family:inherit;text-align:left;cursor:pointer;
  transition:background .11s ease;
}
.sug:last-child{border-bottom:0;}
.sug:hover{background:var(--hover);}
.sug .n{font-size:var(--t-ms);font-weight:500;}
.sug .t{font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza-claro);}
.sug.criar{color:var(--verde);font-weight:600;font-size:var(--t-ms);background:var(--caixa-topo);}

.cli-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  border:1px solid var(--linha);background:var(--caixa-topo);
  padding:var(--s3) var(--s4);flex-wrap:wrap;
}
.cli-card .nm{font-size:var(--t-md);font-weight:600;}
.cli-card .dd{font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza);}
.cli-card .pref{font-size:var(--t-sm);color:var(--cinza-claro);}
.cli-card .tirar{
  background:none;border:0;color:var(--cinza-claro);cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);transition:color .13s ease;
}
.cli-card .tirar:hover{color:var(--vermelha);}

.data-linha{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;}
.data-linha .inp{width:154px;flex:none;}
.atalhos-data{display:flex;gap:6px;flex-wrap:wrap;}
.atalhos-data button{
  border:1px solid var(--linha);background:var(--caixa);
  font-family:inherit;font-size:var(--t-sm);color:var(--cinza);
  padding:8px var(--s3);cursor:pointer;
  transition:background .13s ease,color .13s ease,border-color .13s ease;
}
.atalhos-data button:hover{background:var(--verde);color:#fff;border-color:var(--verde);}

.cond{
  position:relative;margin-top:var(--s4);
  border:1px solid var(--linha);background:var(--caixa-topo);
  padding:var(--s4) var(--s4) var(--s4) var(--s5);
}
.cond::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tinta);}
.cond .titulo{font-size:var(--t-ms);font-weight:600;margin-bottom:var(--s3);}

.dinheiro{position:relative;}
.dinheiro .rs{
  position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-ms);
  color:var(--cinza-claro);pointer-events:none;
}
.dinheiro .inp{padding-left:38px;}

.radios{display:flex;flex-direction:column;gap:var(--s2);}
.radio{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;}
.radio input{
  appearance:none;width:17px;height:17px;flex:none;margin:2px 0 0;border-radius:50%;
  border:1px solid var(--cinza-claro);background:var(--caixa);cursor:pointer;
  transition:border .13s ease;
}
.radio input:checked{border:5px solid var(--verde);}
.radio span{font-size:var(--t-ms);line-height:1.45;}
.radio small{display:block;color:var(--cinza-claro);font-size:var(--t-sm);}

/* ---- cabeçalho de bloco clicável ---- */
.block-head[role="button"]{cursor:pointer;transition:background .13s ease;}
.block-head[role="button"]:hover{background:#EBF0E8;}
.block-head[role="button"]:hover h2{text-decoration:underline;text-decoration-color:#BFCBBA;text-underline-offset:3px;}
.conta-seta{display:flex;align-items:center;gap:var(--s3);flex:none;}
.seta-h{display:inline-flex;color:var(--fraco);transition:transform .16s cubic-bezier(.16,.84,.36,1),color .13s ease;}
.block-head[role="button"]:hover .seta-h{color:var(--verde);transform:translateX(3px);}

/* ---- resumo do histórico ---- */
.resumo{
  display:flex;flex-wrap:wrap;gap:var(--s7);
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra-contato);
  padding:var(--s4) var(--s6);margin-bottom:var(--s4);
}
.resumo .stat b{font-size:var(--t-2xl);}
.resumo .stat.apagado b,.resumo .stat.apagado span{color:var(--cinza-claro);}

.arquivada{color:var(--cinza);}
.arquivada .prod,.arquivada .cli{font-weight:400;}
.enc tbody tr.arquivada{cursor:default;}
.enc tbody tr.arquivada:hover .prod > span:first-child{text-decoration:none;}
.selo-arq{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fraco);
}

/* ---- tela de detalhe de item ---- */
.item{cursor:pointer;}
.item:hover .item-t{text-decoration:underline;text-decoration-color:var(--linha-fraca);text-underline-offset:3px;}
.item.pronta:hover .item-t{text-decoration:line-through;}

.det2{display:grid;grid-template-columns:1.85fr 1fr;gap:var(--s5);align-items:start;}
.det2-main,.det2-lado{display:flex;flex-direction:column;gap:var(--s5);min-width:0;}
.card{background:var(--caixa);border:1px solid var(--linha);box-shadow:var(--sombra);}
.card-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);background:var(--caixa-topo);border-bottom:1px solid var(--linha);
}
.card-head h2{
  margin:0;font-size:var(--t-md);
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.012em;
}
.card-head .aviso-legal{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta);
}
.card-corpo{padding:var(--s5);}

.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:var(--s4) var(--s6);}

.ocorr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ocorr li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:10px 0;border-bottom:1px solid var(--linha-fina);font-size:var(--t-ms);
}
.ocorr li:last-child{border-bottom:0;}
.ocorr .q{font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza);white-space:nowrap;}
.ocorr .selo{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verde);border:1px solid var(--verde);padding:2px 5px;
}

.bt-bloco{display:flex;flex-direction:column;gap:var(--s2);}
.bt-bloco .bt{width:100%;text-align:center;}

.pess{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s4);}
.pess .nome{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;}
.pess .fone{font-family:"IBM Plex Mono",monospace;font-size:var(--t-ms);color:var(--cinza);}
.pess .pref{font-size:var(--t-sm);color:var(--cinza-claro);}

.rel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
.rel li{position:relative;padding-left:var(--s4);font-size:var(--t-ms);line-height:1.45;}
.rel li::before{content:"";position:absolute;left:0;top:6px;bottom:2px;width:2px;background:var(--linha);}
.rel li[data-t="vermelha"]::before{background:var(--vermelha);}
.rel li[data-t="preta"]::before{background:var(--tinta);}
.rel small{display:block;color:var(--cinza-claro);font-size:var(--t-sm);}
/* Cada item do card "Encomendas" leva para a linha dele na tela de
   Encomendas — cursor e sublinhado no hover dizem que dá para clicar,
   sem mexer no preenchimento (a barra colorida de tarja é posicionada
   a partir dele). */
.rel-link{cursor:pointer;}
.rel-link:hover,
.rel-link:focus-visible{text-decoration:underline;text-underline-offset:3px;}
.rel-link:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}

.pagehead .pill{font-size:10px;}

@media (max-width:920px){ .det2{grid-template-columns:1fr;} }

/* ======================= serviços farmacêuticos ======================= */
.grade-serv{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s4);}
.cartao-serv{
  position:relative;text-align:left;cursor:pointer;
  background:var(--caixa);border:1px solid var(--linha);box-shadow:var(--sombra-contato);
  padding:var(--s5) var(--s5) var(--s5) var(--s6);
  font-family:inherit;
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .13s ease,box-shadow .13s ease,transform .13s ease;
}
.cartao-serv::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--linha);
}
.cartao-serv[data-doc="tcle"]::before{background:var(--tinta);}
.cartao-serv[data-lic="1"]::before{background:var(--vermelha);}
.cartao-serv:hover{border-color:var(--linha-forte);box-shadow:var(--sombra);transform:translateY(-1px);}
.cartao-serv .cs-nome{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t-md);font-weight:600;letter-spacing:-.004em;
}
.cartao-serv .cs-nome .ic{color:var(--verde);}
#rg-titulo .ic{color:var(--verde);}
.cartao-serv .cs-desc{font-size:var(--t-sm);color:var(--cinza);line-height:1.5;}
.cartao-serv .cs-pe{
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s2);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
}
.cs-selo{border:1px solid var(--linha);color:var(--cinza);padding:3px 6px;}
.cs-selo.tcle{border-color:var(--tinta);color:var(--tinta);}
.cs-selo.lic{border-color:var(--vermelha);color:var(--vermelha);}
.cs-norma{color:var(--cinza-claro);font-size:10px;letter-spacing:.06em;text-transform:none;
  font-family:"IBM Plex Mono",monospace;}

.serv-2col{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s5);align-items:start;}
@media (max-width:1000px){ .serv-2col{grid-template-columns:1fr;} }

.campos-serv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.campos-serv .largo,.campos-serv > .rg-ref{grid-column:1 / -1;}
.campos-serv > .rg-ref{margin-top:0;}

/* a folha do documento */
.folha-wrap{position:sticky;top:var(--s4);}
.folha{
  background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);
  padding:34px 36px;
  font-size:13px;line-height:1.62;color:#111;
  max-height:78vh;overflow-y:auto;
}
.folha-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:18px;
}
.folha-cab .fc-farm{font-family:var(--fonte-titulo);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;}
.folha-cab .fc-sub{font-size:11px;color:#555;margin-top:3px;}
.folha-cab .fc-via{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#555;border:1px solid #999;padding:3px 6px;
  flex:none;text-align:center;line-height:1.5;}
.folha h3{
  margin:0 0 14px;font-size:15px;text-align:center;
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 700;
  letter-spacing:.01em;text-transform:uppercase;
}
.folha h4{
  margin:18px 0 6px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;color:#444;font-weight:500;
}
.folha p{margin:0 0 9px;}
.folha ul{margin:0 0 9px;padding-left:18px;}
.folha li{margin-bottom:4px;}
.folha .dados{
  border:1px solid #ccc;padding:12px 14px;margin:10px 0 14px;background:#FAFBF9;
}
.folha .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 18px;margin:0;}
.folha .dl div{font-size:12px;}
.folha .dl dt{color:#555;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;margin-bottom:2px;}
.vago{
  display:inline-block;min-width:82px;border-bottom:1px dotted #999;color:#aaa;
  font-family:"IBM Plex Mono",monospace;font-size:11px;
}
.cheio{font-weight:700;border-bottom:1px solid #111;padding:0 2px;}
.folha .assin{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px;}
.folha .assin div{border-top:1px solid #111;padding-top:6px;font-size:11px;color:#444;text-align:center;}
.folha .rodape{
  margin-top:22px;padding-top:10px;border-top:1px solid #ddd;
  font-size:10px;color:#666;line-height:1.5;
}

/* Faixa de paciente: registrar serviço no paciente errado é o pior erro que
   este sistema pode cometer. O contexto que "gruda" precisa ser impossível
   de não ver, e expira sozinho. */
.para-quem{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  background:var(--verde);color:#fff;border:1px solid var(--verde-fundo);
  box-shadow:var(--sombra);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4);flex-wrap:wrap;
}
.para-quem .pq-txt{font-size:var(--t-lg);font-weight:600;}
.para-quem .pq-rot{color:#BEDDCD;}
.para-quem .pq-dados{
  display:block;font-size:var(--t-sm);font-weight:400;color:#CDE6DA;margin-top:2px;
  font-family:"IBM Plex Mono",monospace;
}
.para-quem button{color:#DCEDE4;text-decoration:underline;}
.para-quem button:hover{color:#fff;}

.confere-paciente{
  display:flex;align-items:flex-start;gap:var(--s3);
  background:var(--ambar-bg);border:1px solid var(--ambar-ln);border-radius:var(--raio);
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);
  font-size:var(--t-ms);line-height:1.45;
}
.confere-paciente .ic{color:var(--ambar-txt);margin-top:2px;}
.confere-paciente b{font-weight:700;}
.confere-paciente button{
  margin-left:auto;flex:none;
  background:var(--caixa);border:1px solid var(--ambar-ln);border-radius:var(--raio);
  padding:6px var(--s3);cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:600;color:var(--ambar-txt);
}
.confere-paciente button:hover{background:var(--ambar-bg2);}

/* modo privacidade: a tela da ficha fica virada para a fila */
.borrado{filter:blur(7px);transition:filter .14s ease;cursor:pointer;}
.borrado.revelado{filter:none;}
.borrado:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px;}
.bt-privacidade{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--linha);border-radius:var(--raio);
  padding:6px var(--s3);cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:500;color:var(--cinza);
}
.bt-privacidade:hover{border-color:var(--verde);color:var(--verde);}
.bt-privacidade[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff;}
.para-quem .pq-txt{font-size:var(--t-ms);}
.para-quem .pq-txt b{font-weight:600;}
.para-quem .pq-rot{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-claro);margin-right:var(--s3);
}
.para-quem button{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:500;color:var(--cinza);
}
.para-quem button:hover{color:var(--vermelha);}

/* folha de medições que o paciente leva ao médico */
.folha-med .bloco-med{margin-top:22px;}
.folha-med .bloco-med svg{display:block;width:100%;height:auto;max-height:190px;margin-bottom:8px;}
.folha-med table.med{margin-top:4px;}
.folha-med table.med th,.folha-med table.med td{padding:5px 10px;font-size:11px;}
.leg-print{display:flex;gap:18px;margin-bottom:6px;font-size:11px;color:#444;}
.leg-print span{display:inline-flex;align-items:center;gap:6px;}
.leg-print i{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* área dedicada de impressão: fica fora do fluxo até alguém mandar imprimir */
#area-impressao{display:none;}
body.imprimindo #area-impressao{display:block;}
.rodape-via{
  margin-top:16px;padding-top:8px;border-top:1px solid #ddd;
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:#666;text-align:right;
}

.aviso-lic{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--vermelha-fundo);border:1px solid var(--vermelha-linha);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--vermelha);
  line-height:1.5;margin-bottom:var(--s4);
}
.aviso-lic b{font-weight:700;}

/* ======================= ficha do cliente ======================= */
.ficha-topo{
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra-contato);margin-bottom:var(--s5);
}
.ficha-id{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s5);padding:var(--s6);flex-wrap:wrap;
}
.ficha-nome{
  font-size:var(--t-2xl);
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 700;
  letter-spacing:-.018em;line-height:1.1;margin:0;
}
.ficha-social{font-size:var(--t-ms);color:var(--cinza);margin-top:5px;}
.ficha-meta{
  display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s3);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);
  color:var(--cinza);font-variant-numeric:tabular-nums;
}
.ficha-meta b{color:var(--tinta);font-weight:500;}
.ficha-bts{display:flex;gap:var(--s2);flex:none;flex-wrap:wrap;}

/* faixa de alergia: o aviso que não pode passar batido */
.alergia{
  display:flex;align-items:center;gap:var(--s4);
  background:var(--vermelha-fundo);border-top:1px solid var(--vermelha-linha);
  padding:var(--s4) var(--s6);
}
.alergia .rot{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vermelha);
  border:1.5px solid var(--vermelha);padding:3px 7px;flex:none;
}
.alergia .lista{font-size:var(--t-md);font-weight:600;color:var(--vermelha);}
.alergia.sem{background:var(--caixa-topo);border-top-color:var(--linha);}
.alergia.sem .rot{color:var(--cinza-claro);border-color:var(--linha-forte);}
.alergia.sem .lista{color:var(--cinza);font-weight:400;font-size:var(--t-ms);}

/* tiles de medição, que também são o filtro do gráfico */
/* atalho de medição: quem está olhando o gráfico e vai aferir agora não deve
   ter de voltar ao catálogo de serviços para achar o mesmo procedimento */
.medir{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4);}
.medir button{
  display:flex;align-items:center;gap:6px;padding:7px var(--s3);border-radius:var(--raio);
  background:var(--caixa);border:1px solid var(--linha);color:var(--cinza);
  font-family:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
  transition:background var(--mv-r) ease,border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.medir button .ic{width:1em;height:1em;color:var(--cinza-claro);}
.medir button:hover{background:var(--hover);border-color:var(--linha-forte);color:var(--tinta);}
.medir button:hover .ic{color:var(--verde);}
.medir button:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s3);}
.tile{
  background:var(--caixa);border:1px solid var(--linha);
  box-shadow:var(--sombra-contato);
  padding:var(--s4);text-align:left;cursor:pointer;
  font-family:inherit;
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .13s ease,box-shadow .13s ease;
}
.tile:hover{border-color:var(--linha-forte);}
.tile[aria-pressed="true"]{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde),var(--sombra-contato);}
/* Diz qual sinal vital o número grande abaixo representa — confundir
   sistólica com glicemia por letra pequena demais é o tipo de erro que
   esta régua existe para evitar. Mesmo tratamento de .fr-r. */
.tile .nome-med{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.tile .valor{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-2xl);font-weight:500;
  font-variant-numeric:proportional-nums;letter-spacing:-.03em;line-height:1;
  color:var(--tinta);
}
.tile .valor small{font-size:var(--t-sm);font-weight:400;color:var(--cinza-claro);margin-left:5px;letter-spacing:0;}
.tile .quando{font-size:var(--t-sm);color:var(--cinza-claro);}
.tile .faisca{display:block;width:100%;height:26px;}

/* gráfico */
.gr-card{background:var(--caixa);border:1px solid var(--linha);box-shadow:var(--sombra-contato);}
.gr-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);background:var(--caixa-topo);border-bottom:1px solid var(--linha);
  flex-wrap:wrap;
}
.gr-head h2{margin:0;font-size:var(--t-md);font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.012em;}
.legenda{display:flex;gap:var(--s4);align-items:center;}
.legenda span{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--cinza);}
.legenda i{width:10px;height:10px;flex:none;border-radius:50%;}
.bt-tabela{
  background:none;border:1px solid var(--linha);color:var(--cinza);
  font-family:inherit;font-size:var(--t-sm);font-weight:500;
  padding:6px var(--s3);cursor:pointer;
  transition:background .13s ease,color .13s ease,border-color .13s ease;
}
.bt-tabela:hover{background:var(--hover);color:var(--verde);border-color:var(--verde);}
.gr-corpo{padding:var(--s5);position:relative;}
.gr-corpo svg{display:block;width:100%;height:auto;}

.dica-gr{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--verde-fundo);color:#fff;
  padding:var(--s2) var(--s3);font-size:var(--t-sm);line-height:1.5;
  box-shadow:0 8px 22px -8px rgba(19,40,32,.55);
  opacity:0;transition:opacity .1s ease;white-space:nowrap;
}
.dica-gr.on{opacity:1;}
.dica-gr .d{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:#8FBFA5;display:block;}
.dica-gr i{width:8px;height:8px;display:inline-block;border-radius:50%;margin-right:6px;}

table.med{width:100%;border-collapse:collapse;}
table.med th,table.med td{
  padding:9px var(--s3);text-align:right;border-bottom:1px solid var(--linha-fina);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);font-variant-numeric:tabular-nums;
}
table.med th{
  color:var(--cinza-claro);font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--linha);
}
table.med th:first-child,table.med td:first-child{text-align:left;}
table.med tr:last-child td{border-bottom:0;}

/* linha do tempo de atendimentos */
.atend{list-style:none;margin:0;padding:0;}
.atend li{
  position:relative;padding:var(--s4) 0 var(--s4) var(--s5);
  border-bottom:1px solid var(--linha-fina);
}
.atend li:last-child{border-bottom:0;}
.atend li::before{
  content:"";position:absolute;left:0;top:var(--s5);width:7px;height:7px;
  background:var(--caixa);border:1.5px solid #BCC6BE;border-radius:50%;
}
.atend li[data-t="preta"]::before{background:var(--tinta);border-color:var(--tinta);}
.atend li::after{
  content:"";position:absolute;left:3px;top:calc(var(--s5) + 9px);bottom:-1px;width:1px;background:var(--linha);
}
.atend li:last-child::after{display:none;}
.atend .qq{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
}
.atend .tit{font-size:var(--t-ms);font-weight:600;}
.atend .dt{font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza-claro);}
.atend .res{font-size:var(--t-sm);color:var(--cinza);margin-top:3px;}
.atend .doc{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--s2);
  font-size:var(--t-sm);font-weight:500;color:var(--verde);
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
}
.atend .doc:hover{text-decoration:underline;}
.atend .doc .ic{width:14px;height:14px;}

.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tag{
  font-size:var(--t-sm);font-weight:500;
  background:var(--caixa-topo);border:1px solid var(--linha);padding:4px 9px;
}
.tag.alerta{background:var(--vermelha-fundo);border-color:var(--vermelha-linha);color:var(--vermelha);}

/* sugestões da busca da home */
.busca-sug{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;
  background:var(--caixa);border:1px solid var(--verde);
  box-shadow:var(--sombra-ambiente);max-height:320px;overflow-y:auto;display:none;
}
.busca-sug.on{display:block;}
.bs{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  width:100%;padding:var(--s3) var(--s5);
  border:0;border-bottom:1px solid var(--linha-fina);
  background:none;font-family:inherit;text-align:left;cursor:pointer;
  transition:background .11s ease;
}
.bs:last-child{border-bottom:0;}
.bs:hover,.bs.ativo{background:var(--hover);}
.bs.ativo{box-shadow:inset 3px 0 0 var(--verde);}
.bs .n{font-size:var(--t-md);font-weight:500;}
.bs .n small{display:block;font-weight:400;font-size:var(--t-sm);color:var(--cinza);
  font-family:"IBM Plex Mono",monospace;margin-top:2px;}
.bs .d{font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza-claro);
  text-align:right;flex:none;}
.bs .d small{display:block;font-size:var(--t-sm);color:var(--cinza-claro);margin-top:2px;
  font-family:var(--fonte-corpo);}
.bs .marca{background:#DCEBD8;}
.bs.criar{color:var(--verde);font-weight:600;font-size:var(--t-ms);background:var(--caixa-topo);}

@media (max-width:920px){
  .tiles{grid-template-columns:1fr;}
}

/* ---- modelos de pendência ---- */
.modelos{
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  padding:var(--s4) var(--s6) var(--s4) var(--s7);
  background:var(--caixa-topo);border-bottom:1px solid var(--linha);
}
.modelos .rot{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cinza-claro);margin-right:var(--s2);
}
.modelo{
  border:1px dashed var(--linha-fraca);background:var(--caixa);
  font-family:inherit;font-size:var(--t-sm);color:var(--cinza);
  padding:7px var(--s3);cursor:pointer;
  transition:border-color .13s ease,color .13s ease,background .13s ease;
}
.modelo:hover{border-style:solid;border-color:var(--verde);color:var(--verde);}

/* ---- modal do aviso ---- */
.modal{
  position:fixed;inset:0;background:rgba(14,40,32,.58);
  display:none;align-items:center;justify-content:center;padding:var(--s5);z-index:60;
}
.modal.on{display:flex;}

/* ================= A ESCADA DE CAMADAS =================
   Cada superfície nova nasceu escolhendo um número solto, e o de baixo ficou
   invisível sem ninguém perceber — jsdom não empilha, então a suíte passava.
   Foi assim que a administração inteira ficou inalcançável: o modal de senha
   abria em 60, atrás da tela de login em 200, e clicar em "Administração da
   farmácia" não parecia fazer nada.

   De baixo para cima, e a razão de cada degrau:

      50   .toast              ERRADO — subiu para 250, ver abaixo
      60   .modal              modal comum, por cima de uma tela normal
      90   .doca / 91 chat     trilho da margem, abaixo de qualquer painel
      92   #modal-ia           assistente, só depois do login — como o chat,
                               não precisa vencer a tela de entrada
     200   #tela-login         cobre o sistema inteiro
     205   a cruz do fundo     decoração, sem eventos
     210   #modal-ferr         painéis que abrem POR CIMA do login
     211   #modal-etq, -notas
     212   #modal-exib
     220   #menu-ficha         menu aberto de DENTRO de um painel
     230   #tela-adm           a administração cobre o login
     240   modais da adm       abrem de dentro do que já está em 230
     250   .toast              a resposta ao que você acabou de fazer
                               precisa aparecer por cima de tudo

   Regra para o próximo painel: escolha o degrau olhando esta lista, e
   acrescente a linha aqui. A seção 58 da suíte confere que a escada bate
   com o CSS. */
#modal-adm-entrar,
#modal-pessoa{z-index:240;}
#modal-ia{z-index:92;}

.modal-card{
  background:var(--caixa);border:1px solid var(--verde-fundo);
  /* Cabeça e pé fixos, miolo rolando. Antes o cartão inteiro rolava, então o
     rodapé com a ação principal descia junto: o "Guardar" de Cadastrar pessoa
     nascia 216px abaixo da borda numa janela de 1366×800, sem pista nenhuma
     de que existia. É o mesmo defeito do botão Sair, virado na vertical. */
  display:flex;flex-direction:column;
  width:min(580px,100%);max-height:90vh;overflow:hidden;
  box-shadow:0 26px 70px -22px rgba(14,40,32,.7);
  animation:pop .24s cubic-bezier(.16,.84,.36,1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--linha);
  background:var(--caixa-topo);
}
.modal-head h2{margin:0;font-size:var(--t-lg);font-family:var(--fonte-titulo);font-variation-settings:"wdth" 112,"wght" 700;letter-spacing:-.01em;}
.modal-head p{margin:6px 0 0;font-size:var(--t-sm);color:var(--cinza);}
.modal-corpo{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);}
.destino{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  border:1px solid var(--linha);padding:var(--s3) var(--s4);background:var(--caixa-topo);
}
.destino .nome{font-size:var(--t-ms);font-weight:600;}
.destino .num{font-family:"IBM Plex Mono",monospace;font-size:var(--t-ms);color:var(--cinza);font-variant-numeric:tabular-nums;}
.msg-area{
  width:100%;min-height:150px;resize:vertical;
  padding:var(--s4);border:1px solid var(--linha);background:var(--caixa);
  font-family:inherit;font-size:var(--t-ms);line-height:1.6;color:var(--tinta);
  transition:border-color .13s ease,box-shadow .13s ease;
}
.msg-area:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.15);}
.modal-pe{
  padding:var(--s4) var(--s6);border-top:1px solid var(--linha);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
/* o que não encolhe e o que rola, dentro do cartão */
.modal-head,.modal-pe{flex:none;}
.modal-corpo,.etq-grade{min-height:0;}
.modal-corpo,.etq-grade,.ferr-grade{overflow-y:auto;}

/* ======================= notas ======================= */
.notas{background:var(--verde-fundo);color:#A6BEB3;padding:var(--s7) var(--s7) var(--s8);}
.notas .eyebrow{color:#5E8071;}
.notas ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);}
.notas li{font-size:var(--t-sm);line-height:1.6;text-wrap:pretty;}
.notas b{color:#fff;font-weight:600;}
.chip{display:inline-block;width:3px;height:11px;vertical-align:-1px;margin-right:5px;}

@media (max-width:920px){
  .blocks{grid-template-columns:1fr;}
  .notas ul{grid-template-columns:1fr;gap:var(--s3);}
  .r-3,.r-cpf,.r-end,.r-bairro,.r-nome{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .findbar{flex-direction:column;}
  .novo{height:54px;justify-content:center;}
  .search{height:58px;font-size:var(--t-lg);padding-right:var(--s5);}
  .atalho{display:none;}
  .topbar-in{padding:var(--s3) 0;flex-wrap:wrap;}
  .topbar{padding:0 var(--s5);}
  .app{padding:var(--s6) var(--s5) var(--s8);}
  .enc-stats{gap:var(--s4);}
  .row,.r-2,.r-3,.r-cpf,.r-end,.r-bairro,.r-nome{grid-template-columns:1fr;}
  .sec{padding:var(--s5) var(--s4) var(--s5) var(--s6);}
  .sec::before{left:var(--s3);}
  .actions{flex-direction:column;align-items:stretch;}
  .actions .bts{flex-direction:column-reverse;}
  .bt{width:100%;}
}
/* =======================================================
   COR POR DOMÍNIO — três modelos para escolher

   A regra que separa as duas linguagens de cor:
   a COR diz ONDE você está (encomendas, loja, serviços, datas, contato);
   a TARJA diz O QUE fazer (vermelha = agora, preta = regra legal, nenhuma
   = comum). Elas nunca ocupam o mesmo lugar: domínio pinta cabeçalho, ícone
   e filete de topo; tarja é sempre a faixa vertical à esquerda do item.

   A paleta passou nas seis checagens do validador de daltonismo, com todos
   os pares (não só os vizinhos): pior par ΔE 9,2 sob deuteranopia e 16,8 sob
   visão normal. Ainda assim, a cor aqui é acelerador, nunca o único canal —
   cada bloco tem título escrito e ícone próprio.

   Contraste: a cor de domínio é GRAFISMO (>=3:1), nunca texto. Texto fica
   nos tokens neutros. Em --*-bg2, --cinza-claro reprova (4,2) — só --tinta
   e --cinza podem pousar ali.
   ======================================================= */
:root{
  --d-enc:#4897C6;  --d-enc-esc:#4191BF;  --d-enc-bg:#EEF9FF;  --d-enc-bg2:#DDF0FD;  --d-enc-ln:#C4E1F5;
  --d-serv:#565293; --d-serv-esc:#565293; --d-serv-bg:#F5F6FF; --d-serv-bg2:#EAEBFF; --d-serv-ln:#D9D9F7;
  --d-loja:#8A5C14; --d-loja-esc:#8A5C14; --d-loja-bg:#FDF6ED; --d-loja-bg2:#F8EADA; --d-loja-ln:#EED9C0;
  --d-cont:#96992B; --d-cont-esc:#8A8D19; --d-cont-bg:#F7F8EB; --d-cont-bg2:#EDEFD6; --d-cont-ln:#DDE0B9;

  /* movimento: uma escala de duração e duas curvas, como a de espaço */
  --mv-r:.16s;   /* reação a toque */
  --mv-m:.34s;   /* transição de estado */
  --mv-l:.52s;   /* entrada de bloco */
  --mv-saida:cubic-bezier(.16,.84,.36,1);
  --mv-mola:cubic-bezier(.2,.9,.3,1.35);
}

/* cada bloco herda a sua cor por uma variável só; os modelos abaixo mudam
   apenas ONDE ela aparece, nunca qual é */
[data-dom="enc"] {--dom:var(--d-enc); --dom-esc:var(--d-enc-esc); --dom-bg:var(--d-enc-bg); --dom-bg2:var(--d-enc-bg2); --dom-ln:var(--d-enc-ln);}
[data-dom="serv"]{--dom:var(--d-serv);--dom-esc:var(--d-serv-esc);--dom-bg:var(--d-serv-bg);--dom-bg2:var(--d-serv-bg2);--dom-ln:var(--d-serv-ln);}
[data-dom="loja"]{--dom:var(--d-loja);--dom-esc:var(--d-loja-esc);--dom-bg:var(--d-loja-bg);--dom-bg2:var(--d-loja-bg2);--dom-ln:var(--d-loja-ln);}
[data-dom="cont"]{--dom:var(--d-cont);--dom-esc:var(--d-cont-esc);--dom-bg:var(--d-cont-bg);--dom-bg2:var(--d-cont-bg2);--dom-ln:var(--d-cont-ln);}

/* o ícone do domínio: some quando não há cor, para não virar enfeite mudo */
.ic.dom{width:1.15em;height:1.15em;margin-right:8px;vertical-align:-.22em;color:var(--cinza-claro);
  transition:color var(--mv-m) ease;}
[data-cor="nenhum"] .ic.dom{display:none;}
.block-head h2,.eyebrow{display:flex;align-items:center;}

/* ---------- MODELO 1 · FILETE ----------
   Só um filete no topo e o ícone colorido. É o índice do arquivo: a cor
   marca a aba, o resto da superfície fica branco. */
[data-cor="filete"] [data-dom]{position:relative;overflow:hidden;}
[data-cor="filete"] [data-dom]::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dom);
  transform:scaleX(0);transform-origin:left;
  animation:filete var(--mv-l) var(--mv-saida) .1s forwards;
}
@keyframes filete{to{transform:none}}
[data-cor="filete"] .ic.dom{color:var(--dom-esc);}
[data-cor="filete"] .block-head{background:var(--caixa);}

/* ---------- MODELO 2 · CABEÇALHO ----------
   O cabeçalho do bloco recebe a tinta clara e uma linha na cor cheia. O
   corpo continua branco, então a densidade da lista não muda. */
[data-cor="cabecalho"] [data-dom] .block-head,
[data-cor="cabecalho"] [data-dom] .card-head{
  background:var(--dom-bg2);border-bottom:1px solid var(--dom-ln);
  box-shadow:inset 0 2px 0 var(--dom);
}
[data-cor="cabecalho"] .ic.dom{color:var(--dom-esc);}
[data-cor="cabecalho"] [data-dom].encomendas{
  background:var(--dom-bg2);border-color:var(--dom-ln);
  box-shadow:inset 3px 0 0 var(--dom),var(--sombra-contato);
}

/* ---------- MODELO 3 · CARTÃO ----------
   O bloco inteiro fica na tinta clara, com borda no matiz. É o mais colorido
   dos três; em compensação, é o que mais compete com a tarja vermelha. */
[data-cor="cartao"] [data-dom]{background:var(--dom-bg);border-color:var(--dom-ln);}
[data-cor="cartao"] [data-dom] .block-head,
[data-cor="cartao"] [data-dom] .card-head{
  background:var(--dom-bg2);border-bottom:1px solid var(--dom-ln);
}
[data-cor="cartao"] .ic.dom{color:var(--dom-esc);}
[data-cor="cartao"] [data-dom] .count{color:var(--cinza);}
[data-cor="cartao"] [data-dom].encomendas{background:var(--dom-bg);border-color:var(--dom-ln);}
[data-cor="cartao"] [data-dom] .item:hover{background:var(--dom-bg2);}

/* a tarja vermelha tem de vencer o fundo do domínio em qualquer modelo:
   é a única cor que quer dizer "agora" */
[data-cor="cartao"] [data-dom] .item[data-tarja="vermelha"],
[data-cor="cabecalho"] [data-dom] .item[data-tarja="vermelha"]{background:var(--vermelha-item);}

/* ---------- ferramentas de balcão ----------
   O painel é uma grade fixa: trilho de ferramentas à esquerda, painel de
   trabalho à direita. O corpo NÃO usa .modal-corpo, porque aquele bloco é
   flex-column com gap próprio e somava com as margens daqui — era isso que
   deixava tudo desencontrado.

   O resultado nunca mora dentro de uma coluna estreita da grade de campos:
   ele é a coisa que a pessoa veio buscar, então ocupa a largura toda.
   Vermelho aqui quer dizer o mesmo que na tarja — exige ação agora. */
/* a tela de login é z-index 200; sem isto o painel abriria atrás dela */
#modal-ferr{z-index:210;}
.ferr-card{width:min(780px,100%);}
.ferr-grade{display:grid;grid-template-columns:198px 1fr;min-height:404px;}

/* trilho: seis ferramentas cabem verticalmente sem rolagem lateral, e sobra
   espaço para as próximas sem espremer rótulo */
.ferr-rail{
  display:flex;flex-direction:column;gap:2px;padding:var(--s3);
  background:var(--caixa-topo);border-right:1px solid var(--linha);
}
.ferr-rail button{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  padding:10px var(--s3);border:0;border-radius:var(--raio);background:none;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;color:var(--cinza);
  transition:background var(--mv-r) ease,color var(--mv-r) ease;
}
.ferr-rail button .ic{width:1.1em;height:1.1em;flex:none;color:var(--cinza-claro);}
.ferr-rail button:hover{background:var(--hover);color:var(--tinta);}
.ferr-rail button[aria-selected="true"]{background:var(--caixa);color:var(--verde);box-shadow:var(--sombra-contato);}
.ferr-rail button[aria-selected="true"] .ic{color:var(--verde);}
.ferr-rail button:focus-visible{outline:2px solid var(--verde);outline-offset:-2px;}

.ferr-pane{padding:var(--s5) var(--s6);max-height:64vh;overflow-y:auto;}
.ferr-pane > * + *{margin-top:var(--s4);}

.ferr-campos{display:grid;gap:var(--s3);}
.ferr-campos.c2{grid-template-columns:1fr 1fr;}
.ferr-campo label{
  display:block;margin-bottom:5px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-claro);line-height:1.4;
}
.ferr-campo .inp,.ferr-campo select.inp{height:42px;}


/* ---- o resultado ---- */
.res{
  position:relative;overflow:hidden;padding:var(--s4) var(--s5);
  border-radius:var(--raio);background:var(--caixa-topo);border:1px solid var(--linha);
}
.res::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;}
.res-rot{
  display:block;margin-bottom:4px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.res-n{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--t-2xl);
  font-weight:500;line-height:1.12;color:var(--tinta);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-wrap:balance;
}
.res-r{display:block;margin-top:7px;font-size:var(--t-sm);color:var(--cinza);line-height:1.5;}
.res-r b{color:var(--tinta);font-weight:600;}
.res-conta{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--linha);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);color:var(--cinza);line-height:1.6;
  overflow-wrap:anywhere;
}
.res-stats{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s4);}
.res-stat b{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xl);
  font-weight:500;color:var(--tinta);line-height:1.15;font-variant-numeric:tabular-nums;
}
.res-stat span{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--cinza);}

/* a barra é dado: por isso o azul de gráfico, e não o verde da marca */
.res-barra{height:6px;border-radius:3px;background:var(--grade);overflow:hidden;margin-top:var(--s4);}
.res-barra i{display:block;height:100%;background:var(--serie-1);
  transition:width var(--mv-l) var(--mv-saida);}

/* vazio: sem número inventado, só o que falta preencher */
.res.falta .res-n{color:var(--fraco);font-size:var(--t-xl);}

/* alerta = a mesma vermelha da tarja, com o mesmo sentido: exige ação agora */
.res.alerta{background:var(--vermelha-fundo);border-color:var(--vermelha-linha);}
.res.alerta::before{background:var(--vermelha);}
.res.alerta .res-n{color:var(--vermelha);}
.res.alerta .res-rot{color:var(--vermelha-texto);}
.res.alerta .res-barra{background:var(--vermelha-linha);}
.res.alerta .res-barra i{background:var(--vermelha);}
.res.alerta .res-conta{border-top-color:var(--vermelha-linha);}

.ferr-sub{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linha);}
.ferr-sub > * + *{margin-top:var(--s4);}
.ferr-sub-tit{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cinza-claro);
}
.ferr-nota{margin:0;font-size:var(--t-sm);color:var(--cinza);line-height:var(--entre);}
.ferr-atalho{
  margin-right:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-claro);
}

/* ---- calculadora ----
   Largura presa: esticada em 500px ela vira uma grade de retângulos e deixa
   de parecer calculadora. O que sobra à direita recebe as últimas contas. */
.calc-grade{display:grid;grid-template-columns:286px 1fr;gap:var(--s5);align-items:start;}
.calc-visor{
  padding:var(--s3) var(--s4);border-radius:var(--raio);
  background:var(--caixa-topo);border:1px solid var(--linha);text-align:right;
  margin-bottom:var(--s3);
}
.calc-conta{
  display:block;min-height:17px;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);
  color:var(--cinza-claro);overflow-wrap:anywhere;letter-spacing:.04em;
}
.calc-n{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:500;
  color:var(--tinta);line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.calc-n.erro{color:var(--vermelha);font-size:var(--t-xl);}
.calc-teclas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.calc-teclas button{
  height:52px;border-radius:var(--raio);
  background:var(--caixa);border:1px solid var(--linha);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-lg);font-weight:500;
  color:var(--tinta);cursor:pointer;
  transition:background var(--mv-r) ease,transform .06s ease;
}
.calc-teclas button:hover{background:var(--hover);}
.calc-teclas button:active{transform:scale(.95);}
.calc-teclas button.op{color:var(--verde);font-weight:600;}
.calc-teclas button.ig{background:var(--verde);border-color:var(--verde-fundo);color:#fff;}
.calc-teclas button.ig:hover{filter:brightness(1.12);background:var(--verde);}
.calc-teclas button.lim{color:var(--vermelha);}
.calc-lado{display:flex;flex-direction:column;gap:var(--s3);}
.calc-hist{display:flex;flex-direction:column;gap:6px;}
.calc-hist span{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);color:var(--cinza);
  padding-bottom:6px;border-bottom:1px solid var(--linha-fina);overflow-wrap:anywhere;
}
.calc-hist .nada{color:var(--fraco);border:0;}

@media (max-width:720px){
  .ferr-card{width:min(440px,100%);}
  .ferr-grade{grid-template-columns:1fr;min-height:0;}
  .ferr-rail{
    flex-direction:row;overflow-x:auto;gap:2px;
    border-right:0;border-bottom:1px solid var(--linha);
  }
  .ferr-rail button{width:auto;white-space:nowrap;}
  .ferr-rail button .ic{display:none;}
  .ferr-pane{padding:var(--s4);max-height:56vh;}
  .ferr-campos.c2{grid-template-columns:1fr;}
  .calc-grade{grid-template-columns:1fr;}
}


/* ---------- folha grande de posologia ----------
   Para levar e grudar na geladeira. Mesma informação da etiqueta, no tamanho
   que alguém de 80 anos enxerga do outro lado da sala. */
.folha-pos .pos-quem{
  margin:8mm 0 0;font-size:26pt;font-weight:700;line-height:1.05;color:#000;
}
.folha-pos .pos-med{margin:2mm 0 0;font-size:16pt;color:#222;}
.folha-pos .pos-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(38mm,1fr));
  gap:5mm;margin-top:8mm;
}
.folha-pos .pos-slot{
  display:flex;flex-direction:column;align-items:center;gap:2mm;
  border:.625mm solid #000;border-radius:3mm;padding:5mm 3mm;text-align:center;
}
.folha-pos .pc.gr{width:22mm;height:22mm;color:#000;
  stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.folha-pos .pos-slot b{font-family:"IBM Plex Mono",monospace;font-size:34pt;line-height:1;}
.folha-pos .pos-slot span{font-size:13pt;}
.folha-pos .pos-slot em{font-style:normal;font-size:11pt;color:#333;}
.folha-pos .pos-avisos{display:flex;flex-wrap:wrap;gap:6mm;margin-top:8mm;}
.folha-pos .pos-av{display:flex;align-items:center;gap:3mm;font-size:14pt;font-weight:600;}
.folha-pos .pos-av .pc.gr{width:14mm;height:14mm;}
.folha-pos .pos-dur{margin-top:8mm;font-size:15pt;color:#000;}
.folha-pos .rodape{margin-top:10mm;}

/* ---------- etiqueta de encomenda ----------
   Vai grudada no pacote separado, na prateleira. O trabalho dela é um só:
   quem chega no balcão diz um nome, e alguém tem de achar o pacote. Por isso o
   nome é o maior elemento, e o prazo de guarda vem logo abaixo — é o que
   resolve produto encalhado. */
/* O estado da busca de CEP. Vermelho é a mesma vermelha da tarja e mantém o
   sentido: exige ação agora — aqui, digitar o endereço à mão. */
[data-e="buscando"]{color:var(--cinza);}
[data-e="achou"]{color:var(--verde);}
[data-e="falhou"]{color:var(--vermelha);}

.bt-mais{display:inline-flex;align-items:center;gap:6px;}
.bt-mais .ic{width:14px;height:14px;}

.det-bts{display:flex;gap:var(--s5);flex-wrap:wrap;}
.det-etq{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linha);
}
.det-etq-pe{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;}

.etq-enc{
  width:60mm;height:40mm;box-sizing:border-box;padding:2.3mm 3mm;
  border:1px solid #000;background:#fff;color:#000;
  display:flex;flex-direction:column;gap:.8mm;overflow:hidden;
  font-family:"Archivo",system-ui,sans-serif;
}
.etq-enc .ee-topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:2mm;
  border-bottom:.375mm solid #000;padding-bottom:.7mm;flex:none;
}
.etq-enc .ee-farm{font-size:6pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.etq-enc .ee-rot{font-family:"IBM Plex Mono",monospace;font-size:5.5pt;letter-spacing:.12em;}
.etq-enc .ee-nome{
  font-size:14pt;font-weight:700;line-height:1.05;letter-spacing:-.01em;
  overflow:hidden;flex:none;
  /* teto de duas linhas: sem isto, um nome muito comprido cresce sem limite
     e toma o espaço da lista de itens, que fica sem proteção nenhuma */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.etq-enc .ee-fone{font-family:"IBM Plex Mono",monospace;font-size:7pt;}
.etq-enc .ee-itens{
  flex:1;min-height:2.3em;overflow:hidden;
  font-size:7pt;line-height:1.25;margin-top:.2mm;
}
.etq-enc .ee-itens li{list-style:none;}
.etq-enc .ee-itens li::before{content:"— ";}
.etq-enc .ee-mais{font-style:italic;}
.etq-enc .ee-pe{
  display:flex;align-items:center;justify-content:space-between;gap:2mm;
  border-top:.375mm solid #000;padding-top:.7mm;flex:none;
  font-family:"IBM Plex Mono",monospace;font-size:6.5pt;
}
.etq-enc .ee-guarda b{font-weight:700;}
/* a tarja preta da caixa de remédio, no mesmo sentido do resto do sistema:
   tem regra legal envolvida */
.etq-enc .ee-selos{display:flex;gap:1.4mm;flex-wrap:wrap;}
.etq-enc .ee-tarja{
  background:#000;color:#fff;padding:.5mm 1.4mm;
  font-family:"IBM Plex Mono",monospace;font-size:5.5pt;letter-spacing:.08em;
  white-space:nowrap;
}

/* na hora de imprimir a etiqueta, ela ocupa a folha inteira e nada mais sai */
/* uma etiqueta por página: a térmica corta entre uma e outra */
body.imprimindo #area-impressao .etq-pagina{width:60mm;height:40mm;overflow:hidden;}
body.imprimindo #area-impressao .etq-enc{border:0;}
body.imprimindo #area-impressao .etiqueta{
  border:0;border-radius:0;width:60mm;height:40mm;
}

.etq-add-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.etq-add-h .help{flex:1;min-width:180px;margin:0;}
.etq-h .hora{
  width:100%;height:26px;text-align:center;border-radius:6px;margin-top:2px;
  border:1px solid var(--linha);background:var(--caixa);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);color:var(--cinza);
}
.etq-h .hora:focus{outline:none;border-color:var(--verde);}
.etq-h .tirar{
  position:absolute;top:2px;right:2px;width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:5px;color:var(--cinza-claro);
  font-family:inherit;font-size:14px;line-height:1;cursor:pointer;
}
.etq-h{position:relative;}
.etq-h .tirar:hover{color:var(--vermelha);background:var(--hover);}

/* A régua de resumo: o que quem atende precisa saber nos primeiros três
   segundos, antes de rolar. Só número que o sistema consegue derivar dos
   próprios registros — nada de faturamento nem de estoque. */
.ficha-regua{
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s4);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linha);
}
.ficha-regua:empty{display:none;}
.fr-item{display:flex;flex-direction:column;gap:2px;min-width:0;}
/* "N esperando na loja" leva para a encomenda de verdade — cursor e
   sublinhado no rótulo dizem que dá para clicar, sem repintar o número
   grande, que continua lido primeiro. */
.fr-link{cursor:pointer;border-radius:4px;margin:-4px;padding:4px;}
.fr-link:hover .fr-r,
.fr-link:focus-visible .fr-r{color:var(--verde);text-decoration:underline;}
.fr-link:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}
.fr-n{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-lg);font-weight:600;
  color:var(--tinta);line-height:1.1;
}
.fr-n.atencao{color:var(--vermelha);}
/* Régua lida "nos três primeiros segundos" — o rótulo embaixo do número não
   pode exigir aproximar o rosto da tela para confirmar o que o número quer
   dizer. Era 10px solto, abaixo até do menor degrau da escala; --t-sm porque
   é o texto que dá sentido ao número, não decoração. */
.fr-r{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);
}

/* O que a equipe sabe sobre atender esta pessoa e hoje mora na cabeça de quem
   está ali há mais tempo: quem retira por ela, como falar, o que evitar. */
.f-notas textarea{
  width:100%;min-height:76px;resize:vertical;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--caixa);
  padding:var(--s3) var(--s4);font-family:inherit;font-size:var(--t-ms);
  color:var(--tinta);line-height:1.5;
}
.f-notas textarea:focus{outline:none;border-color:var(--verde);}
.f-notas .f-notas-pe{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);
  margin-top:var(--s3);flex-wrap:wrap;
}
.f-notas .hist{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linha-fina);}
.f-notas .hist:empty{display:none;}

/* Comum de anotar: cinco observações prontas, um clique grava — sem digitar
   nem confirmar. O texto livre abaixo continua para o resto. */
.notas-rapidas{display:flex;flex-wrap:wrap;gap:6px;}
.nota-rapida{
  font-family:inherit;font-size:var(--t-sm);font-weight:500;color:var(--cinza);
  background:var(--caixa-topo);border:1px solid var(--linha);border-radius:var(--raio);
  padding:6px 11px;cursor:pointer;text-align:left;
  transition:background var(--mv-r) ease,border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.nota-rapida:hover{background:var(--hover);border-color:var(--linha-forte);color:var(--tinta);}
.nota-rapida:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}

/* Classificação de referência na tela de registro. Usa o mesmo componente de
   resultado das ferramentas: rótulo em versalete, número grande, frase de
   detalhe e a conta por extenso — aqui a "conta por extenso" é a fonte da
   tabela, que é o que permite conferir. */
.rg-ref{margin-top:var(--s5);}
.rg-ref:empty{display:none;}
.rg-ref .res-conta{font-style:normal;}
.rg-ref .ref-aviso{
  display:block;margin-top:var(--s3);font-size:var(--t-sm);
  color:var(--cinza-claro);line-height:1.4;
}

/* A recompra sai da própria etiqueta: quem digitou a duração já disse o dia em
   que o remédio acaba. É registro de contato, então o bloco leva o grafismo do
   domínio de contato — filete e ícone —, nunca a cor no texto. */
.etq-recompra{width:100%;}
.etq-recompra:empty{display:none;}
.etq-recompra .rc-cx{
  position:relative;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--caixa-topo);padding:var(--s3) var(--s4) var(--s3) var(--s5);
  overflow:hidden;
}
.etq-recompra .rc-cx::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dom);
}
.etq-recompra .rc-tit{
  display:flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);margin-bottom:4px;
}
.etq-recompra .rc-tit .ic{width:13px;height:13px;color:var(--dom);flex:none;}
.etq-recompra .rc-acaba{font-size:var(--t-sm);color:var(--cinza);line-height:1.4;}
.etq-recompra .rc-acaba b{font-family:"IBM Plex Mono",monospace;color:var(--tinta);font-weight:600;}
.etq-recompra .check{padding:var(--s2) 0 0;align-items:center;}
.etq-recompra .check-txt{font-size:var(--t-sm);color:var(--tinta);line-height:1.35;}
.etq-recompra .rc-sem{
  border:1px dashed var(--linha);border-radius:var(--raio);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--cinza-claro);line-height:1.4;
}

/* a fila: várias etiquetas de uma vez, que é como a pessoa sai da farmácia */
.etq-guardar{width:100%;margin-top:var(--s2);}
.etq-fila{
  list-style:none;margin:var(--s2) 0 0;padding:0;width:100%;
  display:flex;flex-direction:column;gap:6px;max-height:11rem;overflow-y:auto;
}
.etq-fila:empty{display:none;}
.etq-fila li{
  display:flex;align-items:center;gap:var(--s2);
  padding:7px var(--s2) 7px var(--s3);border-radius:var(--raio);
  background:var(--caixa-topo);border:1px solid var(--linha);
  animation:entra .24s var(--mv-saida) both;
}
.etq-fila .fq-n{
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--caixa);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--cinza);
}
.etq-fila .fq-t{flex:1;min-width:0;font-size:var(--t-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.etq-fila .fq-t small{display:block;color:var(--cinza-claro);font-size:var(--t-xs);}
.etq-fila .fq-x{
  flex:none;background:none;border:0;padding:2px 4px;cursor:pointer;
  color:var(--cinza-claro);font-family:inherit;font-size:15px;line-height:1;
}
.etq-fila .fq-x:hover{color:var(--vermelha);}

/* a hora impressa embaixo do desenho: o pictograma diz o período, o número
   diz a hora exata — quem sabe ler ganha precisão, quem não sabe ganha o sol */
.etq-slot em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:2mm;}

#modal-etq{z-index:211;}
.etq-card{width:min(880px,100%);}
.etq-grade{display:grid;grid-template-columns:1fr 300px;gap:var(--s6);padding:var(--s5) var(--s6);}
.etq-form{display:flex;flex-direction:column;gap:var(--s3);}
.etq-lado{display:flex;flex-direction:column;gap:var(--s2);align-items:center;}
.etq-rot{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);margin-top:var(--s2);
}
.etq-medida{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  color:var(--cinza-claro);
}

/* escolher horário é tocar num desenho, não ler uma lista */
.etq-horarios{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);}
.etq-h{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 6px;border-radius:var(--raio);cursor:pointer;
  background:var(--caixa);border:1px solid var(--linha);
  transition:border-color var(--mv-r) ease,background var(--mv-r) ease;
}
.etq-h:hover{background:var(--hover);border-color:var(--linha-forte);}
.etq-h .pc{width:30px;height:30px;color:var(--cinza-claro);
  stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.etq-h .rot{font-size:var(--t-xs);color:var(--cinza);font-weight:600;}
.etq-h .qtd{
  width:100%;height:30px;text-align:center;border-radius:6px;
  border:1px solid var(--linha);background:var(--caixa-topo);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-ms);color:var(--tinta);
}
.etq-h.on{border-color:var(--verde);background:var(--hover);}
.etq-h.on .pc{color:var(--verde);}
.etq-h.on .rot{color:var(--tinta);}
.etq-h .qtd:focus{outline:none;border-color:var(--verde);}

.etq-avisos{display:flex;flex-wrap:wrap;gap:var(--s2);}
.etq-av{
  display:flex;align-items:center;gap:7px;padding:8px var(--s3);border-radius:var(--raio);
  background:var(--caixa);border:1px solid var(--linha);cursor:pointer;
  font-size:var(--t-sm);color:var(--cinza);
  transition:border-color var(--mv-r) ease,background var(--mv-r) ease,color var(--mv-r) ease;
}
.etq-av .pc{width:20px;height:20px;color:var(--cinza-claro);
  stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.etq-av:hover{background:var(--hover);}
.etq-av.on{border-color:var(--verde);background:var(--hover);color:var(--tinta);}
.etq-av.on .pc{color:var(--verde);}

#etq-dur-cx label{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.etq-continuo-bt{
  font-family:inherit;font-size:10px;letter-spacing:.02em;font-weight:600;
  padding:2px 7px;border-radius:5px;border:1px solid var(--linha);background:var(--caixa);
  color:var(--cinza);cursor:pointer;white-space:nowrap;
  transition:border-color var(--mv-r) ease,background var(--mv-r) ease,color var(--mv-r) ease;
}
.etq-continuo-bt:hover{background:var(--hover);}
.etq-continuo-bt[aria-pressed="true"]{border-color:var(--verde);background:var(--verde);color:#fff;}
[data-tema="escuro"] .etq-continuo-bt[aria-pressed="true"]{color:var(--papel);}

/* ---------- a etiqueta ----------
   Desenhada em milímetros, não em pixel: o que está na tela é o que sai da
   térmica. Sem cor de fundo, sem cinza claro — térmica só imprime preto, e
   cinza vira chuvisco. */
.etiqueta{
  width:60mm;height:40mm;box-sizing:border-box;
  background:#fff;color:#000;padding:2.4mm 3mm;
  border:1px solid var(--linha);border-radius:2px;
  display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--fonte-corpo);
}
.etq-topo{
  display:flex;align-items:center;gap:1.6mm;flex:none;
  padding-bottom:.8mm;border-bottom:.375mm solid #000;
}
.etq-cruz{width:3.2mm;height:3.2mm;position:relative;flex:none;}
.etq-cruz::before,.etq-cruz::after{content:"";position:absolute;background:#000;}
.etq-cruz::before{left:1.1mm;top:0;width:1mm;height:3.2mm;}
.etq-cruz::after{top:1.1mm;left:0;height:1mm;width:3.2mm;}
.etq-farm{font-size:2.5mm;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.etq-fone{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:2.1mm;}
.etq-quem{font-size:3.2mm;font-weight:700;margin-top:.9mm;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;}
.etq-med{font-size:2.7mm;margin-top:.3mm;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;}
.etq-linha{
  display:flex;gap:1.2mm;margin-top:1mm;flex:1;align-items:stretch;min-height:0;
}
.etq-slot{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3mm;
  border:.375mm solid #000;border-radius:1mm;padding:.4mm .2mm;
}
.etq-slot .pc{width:6mm;height:6mm;color:#000;
  stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.etq-slot b{font-family:"IBM Plex Mono",monospace;font-size:3.4mm;line-height:1;}
.etq-slot span{font-size:1.9mm;text-transform:uppercase;letter-spacing:.04em;}
.etq-pe{
  display:flex;align-items:center;gap:1.4mm;margin-top:.8mm;flex:none;
  padding-top:.7mm;border-top:.25mm solid #000;font-size:2.1mm;
}
.etq-pe .pc{width:3.6mm;height:3.6mm;color:#000;
  stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.etq-pe .dur{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:700;}
.etq-vazia{
  display:flex;align-items:center;justify-content:center;text-align:center;
  height:100%;font-size:2.6mm;color:#666;padding:0 4mm;line-height:1.4;
}

@media (max-width:820px){
  .etq-grade{grid-template-columns:1fr;}
  .etq-lado{order:-1;}
}

#modal-notas{z-index:211;}
.nt-sino{
  min-width:18px;height:18px;padding:0 5px;margin-left:2px;
  background:var(--vermelha);color:#fff;border-radius:9px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.nt-sino[hidden]{display:none;}

.nt-corpo{gap:var(--s4);}
.nt-form{display:flex;flex-direction:column;gap:var(--s2);}
/* Digitar 25/08/2026 e 15:00 para anotar "ligar para o Servimed" é mais
   trabalho que a anotação. Os atalhos preenchem os dois campos. */
.nt-atalhos{display:flex;gap:6px;flex-wrap:wrap;}
.nt-atalhos button{
  border:1px solid var(--linha);background:var(--caixa);border-radius:var(--raio);
  padding:5px var(--s3);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);color:var(--cinza);
  transition:background var(--mv-r) ease,border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.nt-atalhos button:hover{background:var(--hover);border-color:var(--linha-forte);color:var(--tinta);}

/* A anotação é onde se joga o que não dá tempo de organizar. Depois ela vira
   o que precisa ser — pendência da loja, lembrete de cliente ou recado da
   equipe. Promover é sempre ato explícito, porque a anotação é privada. */
.nt-lista .nt-editar{
  width:100%;border:1px solid var(--verde);border-radius:6px;
  padding:4px var(--s2);font-family:inherit;font-size:var(--t-ms);color:var(--tinta);
  background:var(--caixa);
}
.nt-lista .nt-editar:focus{outline:none;}
.nt-virou{
  display:inline-flex;align-items:center;gap:4px;margin-left:var(--s2);
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cinza-claro);
  border:1px solid var(--linha);border-radius:4px;padding:1px 5px;
}
.nt-quando{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--s2);}
.nt-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);
  max-height:17rem;overflow-y:auto;}
.nt-lista li{
  position:relative;display:flex;align-items:flex-start;gap:var(--s3);
  padding:11px var(--s3) 11px var(--s4);border-radius:var(--raio);
  background:var(--caixa-topo);border:1px solid var(--linha);
  animation:entra .26s var(--mv-saida) both;
}
.nt-lista li::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;
  background:transparent;
}
/* venceu = exige ação agora: a mesma vermelha da tarja, o mesmo sentido */
.nt-lista li.venceu::before{background:var(--vermelha);}
.nt-lista li.venceu{background:var(--vermelha-item);border-color:var(--vermelha-linha);}
.nt-lista li.feita{opacity:.55;}
.nt-lista li.feita .nt-t{text-decoration:line-through;text-decoration-color:var(--linha-fraca);}
.nt-txt{flex:1;min-width:0;}
.nt-t{display:block;font-size:var(--t-ms);line-height:1.4;overflow-wrap:anywhere;}
.nt-q{
  display:block;margin-top:3px;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);
  color:var(--cinza);
}
.nt-lista li.venceu .nt-q{color:var(--vermelha);font-weight:600;}
.nt-bts{display:flex;gap:2px;flex:none;}
.nt-bts button{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:var(--raio);
  color:var(--cinza-claro);cursor:pointer;
  transition:background var(--mv-r) ease,color var(--mv-r) ease,border-color var(--mv-r) ease;
}
.nt-bts button:hover{background:var(--hover);border-color:var(--linha);color:var(--tinta);}
.nt-bts button:focus-visible{outline:2px solid var(--verde);outline-offset:1px;}
.nt-bts .ic{width:15px;height:15px;}
.nt-vazio{padding:var(--s6) var(--s4);text-align:center;color:var(--cinza);font-size:var(--t-sm);line-height:1.5;}
.nt-vazio b{display:block;color:var(--tinta);font-size:var(--t-ms);margin-bottom:4px;}

#modal-exib{z-index:212;}
/* Ajuste ligado muda a cara do site e sobrevive ao recarregar. Sem marca, a
   pessoa acha que o sistema quebrou em vez de lembrar que foi ela que mexeu. */
.login-ferr button.fora-do-padrao{border-color:var(--verde);color:var(--tinta);}
.exib-corpo{gap:var(--s5);}
.exib-grupo{display:flex;flex-direction:column;gap:var(--s2);}
.exib-rot{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.exib-ops{display:flex;gap:var(--s2);flex-wrap:wrap;}
.exib-ops button{
  flex:1;min-width:96px;padding:11px var(--s3);border-radius:var(--raio);
  background:var(--caixa);border:1px solid var(--linha);color:var(--cinza);
  font-family:inherit;font-size:var(--t-ms);font-weight:600;cursor:pointer;
  transition:background var(--mv-r) ease,border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.exib-ops button:hover{background:var(--hover);border-color:var(--linha-forte);color:var(--tinta);}
.exib-ops button[aria-checked="true"]{
  background:var(--verde);border-color:var(--verde-fundo);color:#fff;
}
[data-tema="escuro"] .exib-ops button[aria-checked="true"]{color:var(--papel);}
.exib-ops button:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}
.exib-ajuda{font-size:var(--t-sm);color:var(--cinza);line-height:1.45;}

/* a amostra usa os mesmos três níveis de texto: é neles que a escolha aparece */
.exib-amostra{
  display:flex;flex-direction:column;gap:3px;
  padding:var(--s4) var(--s5) var(--s4) var(--s6);position:relative;
  background:var(--caixa-topo);border:1px solid var(--linha);border-radius:var(--raio);
}
.exib-amostra::before{
  content:"";position:absolute;left:var(--s4);top:var(--s4);bottom:var(--s4);
  width:3px;border-radius:2px;background:var(--vermelha);
}
.exib-amostra .ea-rot{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);margin-bottom:4px;
}
.exib-amostra .ea-t{font-size:var(--t-ms);font-weight:600;color:var(--tinta);}
.exib-amostra .ea-s{font-size:var(--t-sm);color:var(--cinza);}
.exib-amostra .ea-f{font-size:var(--t-xs);color:var(--cinza-claro);}

/* ---------- encomenda com vários itens ----------
   A mesma pessoa pede mais de uma coisa na mesma visita. Três encomendas
   separadas viram três avisos de WhatsApp e três retiradas. */
.itens-add{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);
}
.itens-add .help{flex:1;min-width:200px;margin:0;}
.itens-lista{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s2);}
.itens-lista:empty{display:none;}
.itens-lista li{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s3) 10px var(--s4);border-radius:var(--raio);
  background:var(--caixa-topo);border:1px solid var(--linha);
  animation:entra .28s var(--mv-saida) both;
}
.itens-lista .it-n{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--caixa);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--cinza);
}
.itens-lista .it-p{flex:1;min-width:0;font-size:var(--t-ms);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.itens-lista .it-q{
  flex:none;font-family:"IBM Plex Mono",monospace;font-size:var(--t-sm);color:var(--cinza);
}
.itens-lista .it-x{
  flex:none;background:none;border:0;padding:4px;cursor:pointer;
  color:var(--cinza-claro);font-family:inherit;font-size:16px;line-height:1;
}
.itens-lista .it-x:hover{color:var(--vermelha);}
.itens-lista .it-x:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}

/* na tabela, a encomenda de vários itens mostra o primeiro e conta o resto */
.prod .mais{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--caixa-topo);border:1px solid var(--linha);
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--cinza);
  vertical-align:1px;
}

/* ---------- conclusão, urgência e prazo ----------
   Concluir uma tarefa é o único momento agradável do dia no balcão. Vale um
   instante de confirmação: o item pisca em verde, ganha o traço de riscado e
   desce sozinho para o fim da coluna, abrindo caminho para o próximo.

   O deslocamento é feito por FLIP — mede antes, move no DOM, mede depois e
   anima a diferença com transform. Nada anima altura ou top, então a coluna
   inteira desliza a 60 quadros sem refazer layout. */
@keyframes item-feito{
  0%   {background:var(--verde-fundo);}
  100% {background:transparent;}
}
.item.festeja{animation:item-feito .6s ease-out;}
.item.festeja .item-t{color:var(--verde);}
.item.movendo{transition:transform var(--mv-l) var(--mv-saida);}

/* o carimbo que aparece no instante da conclusão */
.item .selo-feito{
  position:absolute;right:var(--s4);top:50%;
  display:flex;align-items:center;gap:5px;
  transform:translateY(-50%) scale(.7);opacity:0;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde);font-weight:600;
}
.item .selo-feito .ic{width:14px;height:14px;}
.item.festeja .selo-feito{animation:selo-pula .85s cubic-bezier(.2,.9,.3,1.4);}
@keyframes selo-pula{
  0%  {opacity:0;transform:translateY(-50%) scale(.6);}
  18% {opacity:1;transform:translateY(-50%) scale(1.06);}
  70% {opacity:1;transform:translateY(-50%) scale(1);}
  100%{opacity:0;transform:translateY(-50%) scale(1);}
}

/* Urgente não inventa cor: é a tarja vermelha, que já quer dizer "agora".
   O que muda é o peso — a barra engrossa e o item sobe para o topo. */
.item.urgente::before{width:5px;}
.item.urgente .item-t{font-weight:700;}
.item .marca-urg{
  display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--vermelha);font-weight:600;
  vertical-align:1px;
}
.item.pronta .marca-urg{display:none;}

/* pendência com prazo lá na frente não polui o dia de hoje */
.depois{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:10px var(--s4) 10px var(--s7);border-top:1px solid var(--linha-fina);
  background:var(--caixa-topo);
  font-size:var(--t-sm);color:var(--cinza);
}
.depois[hidden]{display:none;}
.depois button{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:600;color:var(--verde);
  text-decoration:underline;text-underline-offset:3px;
}
.depois button:hover{text-decoration-thickness:2px;}

/* ---------- rodapé ----------
   O que mais se pede no balcão é o CNPJ e o telefone da farmácia — para nota,
   convênio e reembolso. Por isso eles vêm primeiro, em mono, grandes o
   bastante para ler em voz alta no telefone, e copiáveis num toque.

   Contraste medido sobre o verde-escuro (#245C48): o texto antigo estava em
   3,94:1 e o rótulo em 1,78:1, os dois abaixo do mínimo do projeto. O texto
   agora é #C2D6CD (5,11) e o rótulo #B8CEC5 (4,69) — o rótulo se distingue por
   tamanho e espaçamento, não por ser mais apagado, porque rótulo é informação. */
.rodape{background:var(--verde-fundo);color:#C2D6CD;padding:var(--s7) var(--s7) var(--s5);}
.rodape-in{
  max-width:1160px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s7);align-items:start;
}
.rd-rot{
  display:block;margin-bottom:var(--s3);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#B8CEC5;
}
.rd-nome{
  margin:0 0 var(--s3);color:#fff;
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 118,"wght" 680;
  font-size:var(--t-lg);letter-spacing:.02em;
}
.rd-dados{margin:0;display:grid;gap:var(--s3);}
.rd-dados > div{display:grid;grid-template-columns:118px 1fr;gap:var(--s3);align-items:baseline;}
.rd-dados dt{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:#B8CEC5;
}
.rd-dados dd{margin:0;font-size:var(--t-sm);line-height:1.5;}

/* o valor é botão porque alguém sempre pede para repetir: um toque copia */
.rd-copia{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:2px 0;cursor:pointer;text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-ms);
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  border-bottom:1px dashed rgba(255,255,255,.32);
  transition:border-color var(--mv-r) ease,color var(--mv-r) ease;
}
.rd-copia .ic{width:13px;height:13px;color:#B8CEC5;transition:color var(--mv-r) ease;}
.rd-copia:hover{border-bottom-color:#fff;}
.rd-copia:hover .ic{color:#fff;}
.rd-copia:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.rd-copia.copiado{border-bottom-color:var(--verde-claro);}
.rd-copia.copiado .ic{color:var(--verde-claro);}

.rd-quem{
  margin:var(--s4) 0 0;padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t-sm);line-height:1.5;
}
.rd-quem b{color:#fff;font-weight:600;}

/* Emergência não usa vermelho: vermelho já quer dizer "exige ação agora" na
   tarja, e não pode passar a significar duas coisas. Destaque por tamanho. */
.rd-emerg{
  display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;
  padding:var(--s3) var(--s4);border-radius:var(--raio);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:background var(--mv-r) ease,border-color var(--mv-r) ease;
}
.rd-emerg:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);}
.rd-emerg:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.rd-emerg-n{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-xl);font-weight:500;
  color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.rd-emerg-q{font-size:var(--t-sm);color:#fff;font-weight:600;}
.rd-emerg-s{font-size:var(--t-xs);line-height:1.45;}

.rd-atalhos{margin:0 0 var(--s5);padding:0;list-style:none;display:grid;gap:7px;}
.rd-atalhos li{font-size:var(--t-sm);display:flex;align-items:center;gap:var(--s2);}
.rd-atalhos kbd{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:4px;padding:2px 6px;min-width:24px;text-align:center;
}
.rd-normas{margin:0;font-size:var(--t-xs);line-height:1.6;}

.rodape-pe{
  max-width:1160px;margin:var(--s6) auto 0;padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:baseline;
  font-size:var(--t-xs);
}
.rodape-pe .marca{
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 118,"wght" 680;
  color:#fff;letter-spacing:.05em;text-transform:uppercase;font-size:var(--t-xs);
}
.rodape-pe .sep{margin-left:auto;}

/* as notas do protótipo somem no dia em que isto virar produto — por isso
   ficam num bloco próprio, fechado, e não misturadas com o que é útil */
.rd-notas{max-width:1160px;margin:var(--s4) auto 0;}
.rd-notas > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#B8CEC5;padding:6px 0;
}
.rd-notas > summary::-webkit-details-marker{display:none;}
.rd-notas > summary::before{content:"▸";font-size:11px;}
.rd-notas[open] > summary::before{content:"▾";}
.rd-notas > summary:hover{color:#fff;}
.rd-notas ul{
  margin:var(--s3) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
}
.rd-notas li{font-size:var(--t-sm);line-height:1.6;text-wrap:pretty;}
.rd-notas b{color:#fff;font-weight:600;}
.chip{display:inline-block;width:3px;height:11px;vertical-align:-1px;margin-right:5px;}

@media (max-width:920px){
  .rodape-in{grid-template-columns:1fr;gap:var(--s6);}
  .rd-notas ul{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .rodape{padding:var(--s6) var(--s4) var(--s5);}
  .rd-dados > div{grid-template-columns:1fr;gap:2px;}
}
@media print{ .rodape{display:none !important;} }

/* =======================================================
   EXIBIÇÃO — tema, contraste e tamanho de texto

   Tudo aqui é troca de token; nenhuma regra de componente é reescrita. Foi
   para isso que os literais recorrentes viraram token antes.

   O escuro NÃO é o claro invertido: é uma paleta própria, medida. Todos os
   três níveis de texto ficam acima de 4,5:1 sobre as três superfícies —
   --tinta 14,79 · --cinza 8,65 · --cinza-claro 6,48 sobre a caixa. O par de
   séries do gráfico foi revalidado no fundo escuro e passa nas seis checagens
   do validador de daltonismo (ΔE 21,9 sob protanopia, 24,1 em visão normal).
   ======================================================= */
[data-tema="escuro"]{
  /* no escuro a superfície de tinta é um degrau ACIMA do papel, não abaixo */
  --sup-tinta:#1C2621; --sup-tinta-txt:#E9F1EC; --sup-tinta-ln:#3E4E47;

  --verde:#4FAE85; --verde-alto:#63BF97; --verde-fundo:#3B8A68;
  --verde-linha:#3A5F51; --verde-claro:#7ACCA8;

  --papel:#0F1512; --caixa:#161E1A; --caixa-topo:#1C2621; --hover:#222D28;
  --hover-linha:#2B3831;
  --tinta:#E9F1EC; --cinza:#AFBCB5; --cinza-claro:#95A39C; --fraco:#6E7B75;
  --linha:#2B3833; --linha-fina:#222D28;
  --linha-forte:#3E4E47; --linha-fraca:#3E4E47; --par:#1A231F;

  --vermelha:#FF7B84; --vermelha-fundo:#2A1A1C;
  --vermelha-linha:#4A2A2E; --vermelha-item:#231719; --vermelha-item-h:#2C1D20;
  --vermelha-forte:#FF9AA1; --vermelha-texto:#FF9AA1;

  --ambar-bg:#241E10; --ambar-bg2:#2C2414; --ambar-ln:#4A3D1F; --ambar-txt:#E0B84A;
  --marca-busca:#4A3D1F;

  --serie-1:#4A8DC8; --serie-2:#BF8A2A; --grade:#25302B;

  /* domínios: mesmo matiz, luminosidade refeita para o fundo escuro */
  --d-enc:#5AA6D2;  --d-enc-esc:#7FBCE0;  --d-enc-bg:#141E25;  --d-enc-bg2:#18262F;  --d-enc-ln:#27404F;
  --d-serv:#8683C4; --d-serv-esc:#A5A2DA; --d-serv-bg:#1A1A26;  --d-serv-bg2:#202031; --d-serv-ln:#343461;
  --d-loja:#C08C34; --d-loja-esc:#D6A44E; --d-loja-bg:#221C12;  --d-loja-bg2:#2B2317; --d-loja-ln:#4A3B21;
  --d-cont:#B4B84A; --d-cont-esc:#CBCF63; --d-cont-bg:#1E2013;  --d-cont-bg2:#262918; --d-cont-ln:#42461F;

  --sombra-contato:0 1px 1px rgba(0,0,0,.35);
  --sombra-ambiente:0 10px 28px -12px rgba(0,0,0,.6);
  --sombra-barra:0 -6px 18px -10px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* o fundo do login é gradiente próprio, e no escuro precisa do seu */
[data-tema="escuro"] .login{
  background:linear-gradient(168deg,#141C18 0%,var(--papel) 54%,#0A0F0D 100%);
}
[data-tema="escuro"] .cruz-fundo{opacity:.09;}
[data-tema="escuro"] .topbar{background:var(--caixa);}
[data-tema="escuro"] .modal,[data-tema="escuro"] .lupa-img,
[data-tema="escuro"] .chat-fundo{background:rgba(0,0,0,.68);}
[data-tema="escuro"] .teclado button.ok,[data-tema="escuro"] .bt-primario,
[data-tema="escuro"] .novo,[data-tema="escuro"] .chat-bt,
[data-tema="escuro"] .chat-busca button,[data-tema="escuro"] .calc-teclas button.ig{
  color:var(--papel);   /* branco sobre o verde claro daria 2,5:1 */
}
[data-tema="escuro"] .notas{background:#0A0F0D;}

/* No escuro --vermelha é clara (#FF7B84) e branco em cima dá 2,49:1 — os
   selos de não lidas, o botão de confirmar exclusão. É a mesma regra que já
   valia para o botão verde: no tema escuro ele leva texto escuro, porque
   branco sobre a cor clara não alcança o piso de 4,5. */
[data-tema="escuro"] .bt-confirma,
[data-tema="escuro"] .bt-confirma:hover,
[data-tema="escuro"] .nt-sino,
[data-tema="escuro"] .chat-bt .sino,
[data-tema="escuro"] .chat-gente .cg-n{color:var(--papel);}

/* O toast é sempre a mesma pastilha verde-escura, nos dois temas. Seguindo
   --verde-fundo ele virava verde claro no escuro e caía para 4,18:1 com o
   texto branco; e ele é a resposta ao que a pessoa acabou de fazer. */
[data-tema="escuro"] .toast{background:#245C48;border:1px solid #3B8A68;}
[data-tema="escuro"] body{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(126,196,166,.05) 0 5.5px, transparent 6px);
}
/* alto contraste não quer textura: quer superfície limpa */
[data-contraste="alto"] body{background-image:none;}

/* A FOLHA é papel: sai da impressora sempre clara, tema nenhum a alcança. */
.folha,[data-tema="escuro"] .folha{
  background:#FFFFFF;color:#131715;
}

/* ---- alto contraste ---- */
[data-contraste="alto"]{
  --tinta:#000000; --cinza:#252B28; --cinza-claro:#333C38; --fraco:#4A544F;
  --linha:#8B9B93; --linha-fina:#B4C1BA; --linha-forte:#5E6E67; --linha-fraca:#5E6E67;
  --caixa-topo:#F2F6F3; --hover:#E6EEE9; --hover-linha:#D5E6DC; --par:#F4F8F5;
  --verde:#1F5E46; --verde-fundo:#123C2C;
  --vermelha:#94001C; --vermelha-linha:#94001C; --vermelha-texto:#94001C;
  --ambar-txt:#5C4410; --ambar-ln:#8A6A1F;
}
[data-tema="escuro"][data-contraste="alto"]{
  --tinta:#FFFFFF; --cinza:#DCE6E0; --cinza-claro:#C4D1CA; --fraco:#93A19A;
  --papel:#050A08; --caixa:#0C1310; --caixa-topo:#141C18; --hover:#1C2620;
  --hover-linha:#26332C;
  --linha:#4F615A; --linha-fina:#33403A; --linha-forte:#7B8F87; --linha-fraca:#7B8F87;
  --verde:#74C9A0; --verde-fundo:#4FAE85;
  --vermelha:#FFA7AE; --vermelha-texto:#FFA7AE; --vermelha-linha:#6E3F45;
  --ambar-txt:#F0CE6A;
}
/* contorno mais firme onde a borda é a única separação */
[data-contraste="alto"] .card,[data-contraste="alto"] .block,
[data-contraste="alto"] .inp,[data-contraste="alto"] .bt,
[data-contraste="alto"] .modal-card,[data-contraste="alto"] .res,
[data-contraste="alto"] .chat-painel{border-width:2px;}
[data-contraste="alto"] :focus-visible{outline-width:3px;}

/* ---- texto ampliado ----
   A ideia estava anotada desde a escolha da tipografia: os tokens já
   suportavam uma escala maior. É a mesma escala, ~13% acima. */
[data-texto="ampliado"]{
  --t-xs:13.5px; --t-sm:15.5px; --t-ms:17px; --t-md:18px;
  --t-lg:21px; --t-xl:24px; --t-2xl:32px;
}
[data-texto="ampliado"] .inp,[data-texto="ampliado"] .bt{min-height:48px;}

/* =======================================================
   MOVIMENTO
   Tudo aqui é transform e opacity — as duas únicas propriedades que o
   navegador anima sem refazer layout. Nada anima altura, largura ou top.
   ======================================================= */

/* entrada escalonada por índice, calculado no JS numa variável só */
.entra{animation:entra var(--mv-l) var(--mv-saida) both;animation-delay:calc(var(--i,0) * 45ms);}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* levantar ao passar o mouse: o cartão responde antes do clique */
.block,.card,.cartao-serv,.encomendas{
  transition:transform var(--mv-m) var(--mv-saida),box-shadow var(--mv-m) var(--mv-saida);
}
.encomendas:hover,.cartao-serv:hover{transform:translateY(-2px);box-shadow:var(--sombra);}
[data-hist]:hover .seta-h{transform:translateX(3px);}
.seta-h{transition:transform var(--mv-m) var(--mv-saida);display:inline-flex;}
.encomendas .seta{transition:transform var(--mv-m) var(--mv-saida);}
.encomendas:hover .seta{transform:translateX(4px);}

/* o número conta até o valor: mostra que ele foi calculado, não escrito */
.contando{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* =======================================================
   TRÊS DIREÇÕES DE DESIGN — seletor do protótipo
   O que NÃO muda entre elas: a tarja e o que ela significa,
   a hierarquia da informação e os contrastes mínimos.
   O que muda: superfície, densidade, raio, e o peso da barra.
   ======================================================= */
:root{ --raio:10px; }

.block,.card,.form-card,.tabela-wrap,.encomendas,.cartao-serv,.tile,.modal-card,
.resumo,.ficha-topo,.folha,.login-caixa,.aviso,.aviso-lic,.cond,.dados,.para-quem,
.bt,.inp,.search,.novo,.filtro,.chips,.teclado button,.pin-campo,.seg,
.ib,.bt-tabela,.cs-selo,.tag,.carimbo,.pill,.tecla,.modelo,.atalhos-data button{
  border-radius:var(--raio);
}

/* =======================================================
   DENSIDADE: respiro nas bordas, densidade nas linhas.
   A direção Clínica abriu tudo, inclusive o que é lista —
   e linha alta significa menos informação por tela.
   ======================================================= */
.app{padding-top:var(--s6);}
.findbar{margin-bottom:var(--s5);}
.encomendas{margin-bottom:var(--s4);padding:var(--s3) var(--s5);}

.enc td{padding:10px var(--s4);}
.enc thead th{padding:9px var(--s4);}
.enc td:first-child::before{top:9px;bottom:9px;}

/* recuo à esquerda continua var(--s7): é ele que mantém a tarja a 14px do
   texto, igual às tabelas e aos formulários. Só a altura foi comprimida. */
.item{padding:10px var(--s4) 10px var(--s7);}
.item::before{top:10px;bottom:10px;}
.item::after{left:var(--s7);right:var(--s4);}
.item-txt{gap:1px;}

.atend li{padding:var(--s3) 0 var(--s3) var(--s5);}
.ocorr li{padding:8px 0;}
.list{padding:0;}

/* linhas alternadas: em tabela larga, o olho se perde na travessia.
   A alternância segue a ordem VISÍVEL, marcada em JS — com filtro ativo,
   seguir a ordem do DOM produziria duas linhas claras seguidas. */
.enc tbody tr.par{background:var(--par);}
.enc tbody tr:hover{background:var(--hover-linha);}
.enc tbody tr.aberta{background:var(--hover);}

/* regra dos três segundos: o que exige ação agora tem que saltar */
.enc tbody tr[data-tarja="vermelha"]{background:var(--vermelha-item);}
.enc tbody tr[data-tarja="vermelha"]:hover{background:var(--vermelha-item-h);}
.item[data-tarja="vermelha"]{background:var(--vermelha-item);}
.item[data-tarja="vermelha"]:hover{background:var(--vermelha-item-h);}
.item.pronta[data-tarja="vermelha"]{background:transparent;}

/* números que se comparam entre linhas precisam de dígito de largura fixa */
.data,.item-m,.count,.stat b,.tile .valor,table.med td,table.med th{
  font-variant-numeric:tabular-nums;
}

/* =======================================================
   PROPORÇÃO E ALINHAMENTO — revisão medida
   ======================================================= */

/* 1. Sem largura declarada, cada filtro remontava a tabela e as colunas
   pulavam. Aqui elas são estáveis, porque a lista de colunas é fixa. */
#tela-encomendas table.enc{table-layout:fixed;}
#tela-encomendas .enc th:nth-child(1){width:29%;}
#tela-encomendas .enc th:nth-child(2){width:17%;}
#tela-encomendas .enc th:nth-child(3){width:14%;}
#tela-encomendas .enc th:nth-child(4){width:12%;}
#tela-encomendas .enc th:nth-child(5){width:15%;}
#tela-encomendas .enc th:nth-child(6){width:13%;}
.prod > span:first-child{overflow-wrap:anywhere;}

/* o histórico troca de colunas conforme o tipo, então largura aqui é só
   sugestão — sem table-layout fixo, que travaria o conjunto errado */
#tela-lista .enc th:nth-child(1){width:27%;}
#tela-lista .enc th:nth-child(2){width:27%;}
#tela-lista .enc th:nth-child(3){width:12%;}
#tela-lista .enc th:nth-child(4){width:18%;}
#tela-lista .enc th:nth-child(5){width:16%;}

/* 2. "Número" recebia 212px para caber "214", e o logradouro ficava espremido */
.r-end{grid-template-columns:.9fr 2.6fr .5fr;}

/* 3. O documento tomava mais largura que o formulário, deixando os campos
   em duas colunas apertados — e a folha com linha longa demais para ler */
.serv-2col{grid-template-columns:1.08fr 1fr;}

/* ---- utilidades da barra: um grupo, não três botões soltos ---- */
.utils{
  display:flex;align-items:center;gap:2px;margin-left:auto;
  padding-right:var(--s4);margin-right:var(--s4);
  border-right:1px solid var(--linha);
}
.util{
  display:flex;align-items:center;gap:7px;
  padding:8px var(--s3);border:0;border-radius:var(--raio);background:none;
  font-family:inherit;font-size:var(--t-sm);font-weight:500;color:var(--cinza);
  cursor:pointer;white-space:nowrap;
  transition:background var(--mv-r) ease,color var(--mv-r) ease;
}
.util .ic{width:17px;height:17px;color:var(--cinza-claro);transition:color var(--mv-r) ease;}
.util:hover{background:var(--hover);color:var(--tinta);}
.util:hover .ic{color:var(--verde);}
.util:focus-visible{outline:2px solid var(--verde);outline-offset:-2px;}
.util.fora-do-padrao{color:var(--verde);}
.util.fora-do-padrao .ic{color:var(--verde);}
.util.fora-do-padrao::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--verde);margin-left:-3px;
}
.util.tocando .ic{color:var(--vermelha);}
@media (max-width:1040px){ .util span{display:none;} .util{padding:8px 10px;} }

/* ---- barra clara: o verde fica só no acento ---- */
.topbar{background:#fff;border-bottom:1px solid var(--linha);}
.topbar::before,
.topbar::after{display:none;}
.brand,
.who-name{color:var(--tinta);}
.cross::before,
.cross::after{background:var(--verde);}
.who-role{color:var(--cinza-claro);}
.sair{color:var(--cinza);border-color:var(--linha);background:transparent;}
.sair:hover{background:var(--hover);color:var(--verde);border-color:var(--verde);}
.navi{color:var(--cinza);}
.navi:hover{color:var(--tinta);}
.navi[aria-current="page"]{color:var(--verde);}
.navi[aria-current="page"]::after{background:var(--verde);}
.item::before,
.enc td:first-child::before{border-radius:3px;}
.block,
.card,
.form-card{overflow:hidden;}
/* A tabela precisa recortar o canto E poder rolar de lado quando não couber.
   overflow:hidden nos dois eixos deixava a coluna de ação inalcançável. */
.tabela-wrap{overflow-x:auto;overflow-y:hidden;}

/* ======================= chat da equipe ======================= */
.chat-bt{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:flex;align-items:center;gap:var(--s2);
  background:var(--verde);color:#fff;border:1px solid var(--verde-fundo);
  border-radius:var(--raio);
  padding:12px var(--s4);cursor:pointer;
  font-family:inherit;font-size:var(--t-ms);font-weight:600;
  box-shadow:0 12px 30px -10px rgba(24,54,42,.45);
  transition:filter var(--mv-r) ease,transform var(--mv-r) ease;
}
.chat-bt:hover{filter:brightness(1.12);}
.chat-bt:active{transform:translateY(1px);}
.chat-bt .ic{width:18px;height:18px;}
.chat-bt .sino{
  min-width:20px;height:20px;padding:0 5px;
  background:var(--vermelha);color:#fff;border-radius:10px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.chat-bt .sino[hidden]{display:none;}

/* ---------- painel ----------
   Dois tamanhos. O de canto serve para dar uma olhada rápida sem sair da
   tela. O ampliado é para conversar de verdade: lista e conversa lado a
   lado, como qualquer mensageiro, porque no canto uma coisa esconde a outra. */
.chat-painel{
  position:fixed;right:22px;bottom:82px;z-index:91;
  width:min(440px,calc(100vw - 44px));
  height:min(640px,calc(100vh - 130px));
  display:none;flex-direction:column;
  background:var(--caixa);border:1px solid var(--linha);
  border-radius:var(--raio);overflow:hidden;
  box-shadow:0 26px 60px -18px rgba(24,54,42,.42);
  transition:width var(--mv-m) var(--mv-saida),height var(--mv-m) var(--mv-saida);
}
.chat-painel.on{display:flex;animation:sobe .22s cubic-bezier(.16,.84,.36,1) both;}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Centralizar por transform NÃO funciona aqui: .chat-painel.on roda a animação
   "sobe" com fill-mode both, e o último quadro dela (transform:none) continua
   valendo depois de terminar — valor de animação vence declaração normal na
   cascata, então o translate era descartado e o painel saía da tela.
   inset:0 com margin:auto centraliza sem tocar em transform. */
.chat-painel.grande{
  inset:0;margin:auto;
  width:min(940px,calc(100vw - 48px));
  height:min(720px,calc(100vh - 64px));
}
.chat-fundo{position:fixed;inset:0;z-index:90;background:rgba(14,40,32,.42);display:none;}
.chat-fundo.on{display:block;animation:abre .2s ease both;}

.chat-topo{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);background:var(--caixa-topo);
  border-bottom:1px solid var(--linha);flex:none;
}
.chat-topo h2{
  margin:0 auto 0 0;font-size:var(--t-md);font-family:var(--fonte-titulo);
  font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-topo button{
  background:none;border:0;padding:6px;border-radius:var(--raio);cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:500;color:var(--cinza);
  transition:background var(--mv-r) ease,color var(--mv-r) ease;
}
.chat-topo button:hover{color:var(--verde);background:var(--hover);}
.chat-topo button:focus-visible{outline:2px solid var(--verde);outline-offset:-2px;}
.chat-topo .ct-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;}
.chat-topo .ct-ic .ic{width:16px;height:16px;}
.chat-topo .ct-ic[aria-pressed="true"]{color:var(--verde);background:var(--hover);}
.chat-topo .voltar-chat{font-size:var(--t-lg);line-height:1;padding:0 6px;}

.chat-area{flex:1;min-height:0;display:flex;}
.chat-principal{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat-corpo{flex:1;overflow-y:auto;min-height:0;}

/* trilho lateral: só existe no modo ampliado */
.chat-rail{
  width:276px;flex:none;display:flex;flex-direction:column;
  border-right:1px solid var(--linha);background:var(--caixa-topo);overflow-y:auto;
}
.chat-rail[hidden]{display:none;}

.chat-gente{list-style:none;margin:0;padding:0;}
.chat-gente li{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--linha-fina);
  cursor:pointer;transition:background var(--mv-r) ease;
}
.chat-gente li:last-child{border-bottom:0;}
.chat-gente li:hover{background:var(--hover);}
.chat-gente li.aberta{background:var(--caixa);box-shadow:inset 3px 0 0 var(--verde);}
.chat-gente .cg-txt{flex:1;min-width:0;}
.chat-gente .cg-nome{
  display:flex;align-items:baseline;gap:6px;font-size:var(--t-ms);font-weight:600;
}
.chat-gente .cg-papel{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-claro);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-gente .cg-ult{
  font-size:var(--t-sm);color:var(--cinza-claro);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
}
.chat-gente li.nao-lida .cg-ult{color:var(--tinta);font-weight:500;}
.chat-gente .cg-n{
  min-width:20px;height:20px;padding:0 5px;flex:none;
  background:var(--vermelha);color:#fff;border-radius:10px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.chat-gente .cg-quando{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--cinza-claro);flex:none;
}
.chat-inicial{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--caixa);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-titulo);font-weight:700;font-size:var(--t-ms);color:var(--verde);
}
.chat-gente li.mural .chat-inicial{background:var(--verde);color:#fff;border-color:var(--verde);}
.chat-gente li.mural .cg-papel::after{content:"mural";}

.chat-busca{
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--linha-fina);
  display:flex;gap:var(--s2);flex:none;
}
.chat-busca input{
  flex:1;height:36px;padding:0 var(--s3);
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--caixa);font-family:inherit;font-size:var(--t-sm);color:var(--tinta);
}
.chat-busca input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.15);}
.chat-busca button{
  flex:none;height:36px;padding:0 var(--s3);
  background:var(--verde);color:#fff;border:1px solid var(--verde-fundo);
  border-radius:var(--raio);cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;white-space:nowrap;
}
.chat-busca button:hover{filter:brightness(1.12);}

/* busca dentro da conversa: no balcão a pergunta é "quem falou do lote?" */
.chat-achar{
  display:flex;align-items:center;gap:var(--s2);flex:none;
  padding:var(--s2) var(--s4);border-bottom:1px solid var(--linha-fina);background:var(--caixa-topo);
}
.chat-achar[hidden]{display:none;}
.chat-achar input{
  flex:1;height:34px;padding:0 var(--s3);
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--caixa);font-family:inherit;font-size:var(--t-sm);color:var(--tinta);
}
.chat-achar input:focus{outline:none;border-color:var(--verde);}
.chat-achar .ca-n{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--cinza-claro);flex:none;
}
.chat-achar button{
  flex:none;background:none;border:0;cursor:pointer;color:var(--cinza-claro);
  font-size:18px;line-height:1;padding:0 4px;font-family:inherit;
}
.chat-achar button:hover{color:var(--vermelha);}
mark.achou{background:var(--marca-busca);color:var(--tinta);border-radius:3px;padding:0 2px;}

.chat-nova{padding:var(--s4) var(--s5);}
.chat-nova .rot{
  display:block;margin-bottom:var(--s3);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.chat-alvos{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4);}
.chat-alvo{
  display:flex;align-items:center;gap:var(--s3);cursor:pointer;
  padding:9px var(--s3);border:1px solid var(--linha);border-radius:var(--raio);
  transition:border-color var(--mv-r) ease,background var(--mv-r) ease;
}
.chat-alvo:hover{background:var(--hover);}
.chat-alvo input{
  appearance:none;width:17px;height:17px;flex:none;
  border:1px solid var(--cinza-claro);border-radius:3px;background:var(--caixa);cursor:pointer;
}
.chat-alvo input:checked{background:var(--verde);border-color:var(--verde);}
.chat-alvo input:checked::after{
  content:"";display:block;width:4px;height:8px;margin:2px 0 0 5px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.chat-alvo:has(input:checked){border-color:var(--verde);background:var(--hover);}
.chat-alvo .a-nome{font-size:var(--t-ms);font-weight:500;}
.chat-alvo .a-papel{font-size:var(--t-sm);color:var(--cinza-claro);}
.chat-alvo.todos .a-nome{color:var(--verde);font-weight:600;}

/* referência: a mensagem carrega o registro de que ela fala */
.ref-chip{
  display:flex;align-items:center;gap:var(--s2);
  margin:0 var(--s4) var(--s3);padding:8px var(--s3);
  background:var(--hover);border:1px solid var(--verde);border-radius:var(--raio);
  font-size:var(--t-sm);
}
.ref-chip .rc-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ref-chip .rc-rot{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--verde);display:block;
}
.ref-chip button{
  background:none;border:0;cursor:pointer;color:var(--cinza-claro);
  font-size:15px;line-height:1;padding:0 4px;font-family:inherit;
}
.ref-chip button:hover{color:var(--vermelha);}

.msg-ref{
  display:flex;align-items:center;gap:7px;width:100%;
  margin-top:6px;padding:7px var(--s3);
  background:var(--caixa);border:1px solid var(--linha);border-radius:var(--raio);
  font-family:inherit;font-size:var(--t-sm);color:var(--tinta);
  text-align:left;cursor:pointer;
  transition:border-color var(--mv-r) ease,background var(--mv-r) ease;
}
.msg-ref:hover{border-color:var(--verde);background:var(--hover);}
.msg-ref .mr-rot{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-claro);flex:none;
}
.msg-ref .mr-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* as ações não ficam gritando embaixo de toda mensagem o tempo todo */
.msg-acoes{
  display:flex;gap:var(--s3);margin-top:4px;
  opacity:0;transition:opacity var(--mv-r) ease;
}
.msg:hover .msg-acoes,.msg:focus-within .msg-acoes{opacity:1;}
.msg-acoes button{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:var(--t-sm);font-weight:500;color:var(--cinza-claro);
}
.msg-acoes button:hover{color:var(--verde);text-decoration:underline;}
.msg-acoes button:focus-visible{outline:2px solid var(--verde);outline-offset:2px;opacity:1;}
.msg.minha .msg-acoes{justify-content:flex-end;}

/* recado fixado: fica no topo do mural o dia inteiro */
.fixadas{
  padding:var(--s3) var(--s4);background:var(--caixa-topo);
  border-bottom:1px solid var(--linha);flex:none;
}
.fixadas .fx-rot{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verde);display:block;margin-bottom:4px;
}
.fixadas .fx-msg{font-size:var(--t-sm);line-height:1.45;}
.fixadas .fx-msg b{font-weight:600;}

.chat-rodape{
  padding:var(--s3) var(--s4);border-top:1px solid var(--linha-fina);
  font-size:var(--t-sm);color:var(--cinza-claro);text-align:center;
}

@keyframes pulsa{
  0%,100%{box-shadow:0 12px 30px -10px rgba(24,54,42,.45), 0 0 0 0 rgba(192,16,42,.45);}
  50%{box-shadow:0 12px 30px -10px rgba(24,54,42,.45), 0 0 0 10px rgba(192,16,42,0);}
}
.chat-bt.avisando{animation:pulsa 1.4s ease-out 3;}

/* ---------- as mensagens ---------- */
.chat-msgs{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);}

/* sem separador, uma conversa de terça encosta na de hoje sem aviso nenhum */
.dia-sep{
  display:flex;align-items:center;gap:var(--s3);margin:var(--s3) 0;
}
.dia-sep::before,.dia-sep::after{content:"";flex:1;height:1px;background:var(--linha);}
.dia-sep span{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.novas-sep{display:flex;align-items:center;gap:var(--s3);margin:var(--s3) 0;}
.novas-sep::before,.novas-sep::after{content:"";flex:1;height:1px;background:var(--vermelha);opacity:.35;}
.novas-sep span{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vermelha);font-weight:600;
}

.msg{max-width:78%;display:flex;flex-direction:column;}
.msg-linha{display:flex;align-items:flex-end;gap:var(--s2);}
.msg .av{
  width:26px;height:26px;flex:none;border-radius:50%;margin-bottom:16px;
  background:var(--caixa-topo);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-titulo);font-weight:700;font-size:11px;color:var(--verde);
}
.msg .bolha{
  padding:9px var(--s3);border-radius:14px 14px 14px 4px;
  font-size:var(--t-ms);line-height:1.45;
  background:var(--caixa-topo);border:1px solid var(--linha);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg .quando{
  display:block;margin-top:3px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--cinza-claro);
}
.msg.minha{align-self:flex-end;}
.msg.minha .bolha{
  background:var(--verde);border-color:var(--verde-fundo);color:#fff;
  border-radius:14px 14px 4px 14px;
}
.msg.minha .quando{text-align:right;}
.msg .recibo{font-weight:600;}
.msg .recibo.lida{color:var(--verde);}
.msg .de-quem{
  display:block;margin-bottom:2px;
  font-size:var(--t-sm);font-weight:600;color:var(--verde);
}
/* citação dentro da bolha: responder sem perder o fio */
.msg .citada{
  display:block;margin:-2px 0 6px;padding:5px var(--s2);
  border-left:3px solid var(--verde-linha);border-radius:3px;
  background:rgba(47,122,95,.08);
  font-size:var(--t-sm);line-height:1.35;color:var(--cinza);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msg.minha .citada{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.6);color:rgba(255,255,255,.9);}

/* anexo dentro da bolha */
.msg-anexo{
  display:block;width:100%;margin-top:6px;padding:0;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
}
.msg-anexo img{
  display:block;max-width:100%;max-height:190px;
  border-radius:8px;border:1px solid var(--linha);
}
.msg-anexo .ma-arq{
  display:flex;align-items:center;gap:var(--s2);
  padding:8px var(--s3);
  background:var(--caixa);border:1px solid var(--linha);border-radius:var(--raio);
  font-size:var(--t-sm);color:var(--tinta);
}
.msg.minha .msg-anexo .ma-arq{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;}
.msg-anexo .ma-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.msg-anexo .ma-tam{color:var(--cinza-claro);flex:none;margin-left:auto;}
.msg.minha .msg-anexo .ma-tam{color:rgba(255,255,255,.75);}
.msg-anexo:hover .ma-arq{border-color:var(--verde);}

.chat-vazio{padding:var(--s7) var(--s5);text-align:center;color:var(--cinza-claro);font-size:var(--t-sm);line-height:1.5;}

/* ---------- estados vazios ----------
   Tela sem conteúdo é onde a maioria dos sistemas desiste. Aqui ela recebe
   desenho próprio, na mesma gramática dos ícones — um traço de 1.75, sem
   preenchimento — e um texto que diz o que fazer, não só o que falta. */
.vazio{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s7) var(--s5);gap:var(--s3);
  color:var(--cinza-claro);font-size:var(--t-ms);
}
.vazio .il{
  width:150px;height:95px;color:var(--verde);opacity:.5;
  stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  animation:il-entra .6s var(--mv-saida) both;
}
@keyframes il-entra{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:.5;transform:none}}
.vazio b{
  font-family:var(--fonte-titulo);font-variation-settings:"wdth" 108,"wght" 620;
  font-size:var(--t-lg);color:var(--tinta);letter-spacing:-.005em;
}
.vazio span{font-size:var(--t-ms);color:var(--cinza);line-height:var(--entre);max-width:38ch;}
.vazio .bt{margin-top:var(--s2);}
.chat-vazio b{display:block;color:var(--tinta);font-size:var(--t-ms);margin-bottom:4px;}

/* ---------- escrever ---------- */
.chat-citando{
  display:flex;align-items:center;gap:var(--s2);flex:none;
  margin:0 var(--s3) 0;padding:8px var(--s3);
  background:var(--hover);border:1px solid var(--verde);border-left-width:3px;
  border-radius:var(--raio);font-size:var(--t-sm);
}
.chat-citando[hidden]{display:none;}
.chat-citando .cc-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-citando .cc-rot{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--verde);display:block;
}
.chat-citando button{
  background:none;border:0;cursor:pointer;color:var(--cinza-claro);
  font-size:15px;line-height:1;padding:0 4px;font-family:inherit;
}
.chat-citando button:hover{color:var(--vermelha);}

.chat-escrever{
  display:flex;gap:var(--s2);padding:var(--s3);flex:none;align-items:flex-end;
  border-top:1px solid var(--linha);background:var(--caixa-topo);
}
.chat-clipe{
  flex:none;width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--caixa);border:1px solid var(--linha);border-radius:var(--raio);
  color:var(--cinza);cursor:pointer;
  transition:border-color var(--mv-r) ease,color var(--mv-r) ease,background var(--mv-r) ease;
}
.chat-clipe:hover{border-color:var(--verde);color:var(--verde);background:var(--hover);}

/* prévia do que vai junto, antes de enviar */
.anexo-previa{
  display:flex;align-items:center;gap:var(--s3);
  margin:0 var(--s4) var(--s3);padding:var(--s2) var(--s3);
  background:var(--hover);border:1px solid var(--verde);border-radius:var(--raio);
}
.anexo-previa img{
  width:44px;height:44px;object-fit:cover;flex:none;
  border-radius:6px;border:1px solid var(--linha);
}

/* ampliar imagem */
.lupa-img{
  position:fixed;inset:0;z-index:140;display:none;
  align-items:center;justify-content:center;padding:var(--s5);
  background:rgba(14,40,32,.82);
}
.lupa-img.on{display:flex;}
.lupa-img img{max-width:100%;max-height:88vh;border-radius:var(--raio);box-shadow:0 20px 60px -20px #000;}
.lupa-img button{
  position:absolute;top:18px;right:18px;
  background:var(--caixa);border:1px solid var(--linha);border-radius:var(--raio);
  padding:10px var(--s4);cursor:pointer;
  font-family:inherit;font-size:var(--t-ms);font-weight:600;color:var(--tinta);
}
/* textarea em vez de input: recado de turno não cabe numa linha só.
   Enter envia, Shift+Enter quebra linha — como todo mundo espera. */
.chat-escrever textarea{
  flex:1;min-height:42px;max-height:132px;padding:10px var(--s3);
  border:1px solid var(--linha);border-radius:var(--raio);resize:none;
  background:var(--caixa);font-family:inherit;font-size:var(--t-ms);
  line-height:1.4;color:var(--tinta);overflow-y:auto;
}
.chat-escrever textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.15);}
.chat-escrever .env{
  flex:none;height:42px;padding:0 var(--s4);
  background:var(--verde);color:#fff;border:1px solid var(--verde-fundo);
  border-radius:var(--raio);cursor:pointer;
  font-family:inherit;font-size:var(--t-ms);font-weight:600;
}
.chat-escrever .env:hover{filter:brightness(1.12);}
.chat-escrever .env:disabled{opacity:.45;cursor:not-allowed;filter:none;}

/* ---- assistente de IA: uma conversa só, sem lista, sem anexo ---- */
.ia-corpo{
  max-height:46vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--s3);
}
.ia-vazio{margin:var(--s5) 0;text-align:center;color:var(--cinza-claro);font-size:var(--t-sm);}
.ia-form{display:flex;gap:var(--s2);align-items:flex-end;}
.ia-form textarea{
  flex:1;min-height:42px;max-height:132px;padding:10px var(--s3);
  border:1px solid var(--linha);border-radius:var(--raio);resize:none;
  background:var(--caixa);font-family:inherit;font-size:var(--t-ms);
  line-height:1.4;color:var(--tinta);overflow-y:auto;
}
.ia-form textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(63,143,104,.15);}
.ia-form .bt{flex:none;height:42px;}
.ia-fontes{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linha-fina);}
.ia-fontes ul{margin:4px 0 0;padding-left:var(--s4);}
.ia-fontes li{font-size:var(--t-sm);line-height:1.5;}
.ia-fontes a{color:var(--verde);}
#ia-privacidade{margin-bottom:var(--s3);}

@media (max-width:640px){
  .chat-painel,.chat-painel.grande{
    inset:0;margin:0;width:100%;height:100%;border-radius:0;
  }
  .chat-rail{display:none !important;}
}

@media print{ .chat-bt,.chat-painel{display:none !important;} }

/* ---- impressão: o histórico vira relatório ---- */
.print-cab{display:none;}
.pagehead-bts{display:flex;gap:var(--s3);flex:none;}
@media print{
  .topbar,.notas,.filtros,.dica-linha,.voltar,.toast,.menu-estado,.modal,
  .pagehead-bts,.acao-col,.item-acoes,.add-row,.seta-h{display:none !important;}
  .screen:not(.on){display:none !important;}
  .print-cab{
    display:block;margin:0 0 var(--s4);
    font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:#555;
  }
  body{background:#fff;color:#000;}
  .app{padding:0;max-width:none;}
  .pagehead{margin-bottom:var(--s3);}
  .pagehead h1{font-size:21px;}
  .pagehead p{font-size:11px;max-width:none;}
  .card,.tabela-wrap,.block,.resumo,.form-card{box-shadow:none;border-color:#9a9a9a;break-inside:avoid;}
  .enc thead th{background:#fff;border-bottom:1px solid #333;color:#000;}
  .enc tbody tr{break-inside:avoid;}
  .pill{border-color:#777 !important;background:#fff !important;color:#000 !important;}
  .resumo{padding:var(--s3) var(--s4);}
  .resumo .stat b{font-size:18px;}
  .rise{animation:none !important;opacity:1 !important;transform:none !important;}

  /* documento: quando a área de impressão está ativa, só ela existe no papel */
  body.imprimindo > *{display:none !important;}
  body.imprimindo > #area-impressao{display:block !important;}
  #area-impressao .folha{
    box-shadow:none;border:0;max-height:none;overflow:visible;padding:0;
    font-size:11pt;color:#000;
  }
  #area-impressao .folha + .folha{break-before:page;page-break-before:always;}
  #area-impressao .folha .dados{background:#fff;}
  #area-impressao .folha h4,
  #area-impressao .folha .assin{break-after:avoid;page-break-after:avoid;}
  #area-impressao .folha .assin,
  #area-impressao .folha .dados{break-inside:avoid;page-break-inside:avoid;}
  #area-impressao .bloco-med{break-inside:avoid;page-break-inside:avoid;}
  /* a grade do gráfico é clara demais para papel */
  #area-impressao .folha-med svg line[stroke="var(--grade)"]{stroke:#d4d4d4;}
}
@page{size:A4;margin:16mm 15mm;}