/* ============================================================
   ÓRBITA — app.css · frente F3 · ESPEC §7.4–7.5
   Palco claro ou noturno do Órbita, com TODA cor vinda de tokens:
   os valores abaixo em :root são só o tema padrão (Órbita/Nexus);
   o tema.js recalcula tudo a partir das 3 cores da marca e grava
   no <html>. Nenhum hex fora deste :root (verificado por teste).
   Fontes: as mesmas do painel (../fonts). Movimento: os mesmos
   tokens do painel.css; nunca ease-in; tudo some com reduced-motion.
   ============================================================ */
/* escala: tokens */   /* marcador (M02): tamanho de letra só por token --fs-*, em ou %; nada de px/rem solto fora do :root (travado em app.teste.mjs) */

@font-face { font-family: "Nx Clash"; src: url("../fonts/clash-display-variable.woff2?v=1") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nx Satoshi"; src: url("../fonts/satoshi-variable.woff2?v=1") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nx Plex"; src: url("../fonts/ibm-plex-mono-500-latin.woff2?v=1") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nx Zodiak"; src: url("../fonts/zodiak-variable-italic.woff2?v=1") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Nx Plex"; src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2?v=1") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---- tema padrão (sobrescrito pelo tema.js) ---- */
  --c-fundo: #F3F0E9;
  --c-texto: #141A21;
  --c-texto-2: #525659;
  --c-texto-3: #58595A;
  --c-sup: #FBFBF8;            /* cartão: mais claro que a página no esquema claro */
  --c-poco: #E8E5DF;           /* área rebaixada (campos, bloco dentro de cartão) */
  --c-sup-2: #EFF0ED;
  --c-sup-3: #D4D2CD;          /* pressionado */
  --c-borda: #D8D6D1;
  --c-borda-2: #C6C5C1;
  --c-prim: #B0761F;
  --c-prim-hi: #9B681B;
  --c-prim-txt: #0B1B2B;
  --c-prim-luz: #8D5F19;
  --c-prim-suave: #E8DCC9;
  --c-sec: #6FA3CF;
  --c-sec-luz: #3671A2;
  --c-sec-suave: #E1E5E5;
  --c-foco: #8D5F19;
  --c-ok: #165E3A;
  --c-ruim: #A2221B;
  --c-aten: #546100;
  --c-info: #2B5A80;
  --c-ok-txt: #FFFFFF;
  --c-ruim-txt: #FFFFFF;
  --c-ok-suave: #D0DBCF;
  --c-ruim-suave: #E9D0C9;
  --c-aten-suave: #DFE0C4;
  --c-info-suave: #D3D8D8;
  --c-nota: #DDDEBF;
  --c-nota-txt: #141A21;
  --c-meta: #2C3396;
  --c-google: #0B645E;
  --c-meta-suave: #D3D2DC;
  --c-google-suave: #CEDAD3;
  /* gravidade (Radar) e acento do produto: o tema.js recalcula; --c-prod é escolhido por html[data-produto] mais abaixo */
  --c-sev-info: #2B5A80; --c-sev-aten: #546100; --c-sev-crit: #A2221B;
  --c-prod-crm: #6B4713; --c-prod-ads: #2C5B84; --c-prod-atend: #4E524A;
  --c-prod: var(--c-prod-crm);
  /* esqueleto (M06): bloco visível sobre o papel E sobre o cartão (≥ 1,2:1) e faixa clara que varre (cartão + 40 % de branco) */
  --c-sk-base: color-mix(in srgb, var(--c-texto) 11%, var(--c-fundo)); --c-sk-luz: color-mix(in srgb, var(--c-sup) 60%, white);
  --c-pop: var(--c-sup); --c-hover: var(--c-sup-2);   /* o que flutua (menu, popover, aviso) e o realce de item sob o mouse; o escuro sobe um degrau (abaixo) */
  --c-bolha-in: #DFDDD7;
  --c-bolha-out: #E8DCC9;
  --c-brilho-1: rgba(176, 118, 31, 0.08);
  --c-brilho-2: rgba(111, 163, 207, 0.08);
  --c-vidro: rgba(243, 240, 233, 0.78);
  --c-vidro-forte: rgba(243, 240, 233, 0.9);
  --c-veu: rgba(20, 26, 33, .38);
  --c-sombra: rgba(20, 26, 33, .16);
  --c-tinta: rgba(20, 26, 33, 0.04);
  --c-sel: rgba(176, 118, 31, 0.32);
  --pal-0: #6FA3CF; --pal-1: #8FB8DD; --pal-2: #E5B35C; --pal-3: #C9BFAF; --pal-4: #7FD1A5; --pal-5: #F08A74;
  --pal-6: #9D9486; --pal-7: #B0761F; --pal-8: #CF9540; --pal-9: #A98BD6; --pal-10: #5FB3A8; --pal-11: #D67FA3;
  /* efeitos neutros (iguais em qualquer marca) */
  --c-reflexo: rgba(255, 255, 255, .38);
  --c-luz-borda: rgba(255, 255, 255, .06);

  /* ---- tipografia ---- */
  --f-titulo: "Nx Clash", "Clash Display", "Arial Black", system-ui, sans-serif;
  --f-corpo: "Nx Satoshi", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Nx Plex", "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --f-narr: "Nx Zodiak", "Zodiak", Georgia, "Times New Roman", serif;   /* voz da narração: só manchetes, vazios e resumo de IA (.narr) */
  --ws-d: .12em;               /* respiro entre palavras na Clash */
  --fs-11: .75rem;   /* piso de 12 px (M03): o antigo 11 px virou 12 */ --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem;
  --fs-17: 1.0625rem; --fs-20: 1.25rem; --fs-25: 1.5625rem; --fs-31: 1.953rem; --fs-39: 2.441rem; --fs-52: 3.25rem;
  /* escala única (M02): display 40→56 e h1 28→36 (fluidos de 390 a 1440 px), h2 20, h3 16, números 44/32/24, corpo 15, pequeno 13 */
  --fs-display: clamp(2.5rem, 2.129rem + 1.524vw, 3.5rem);
  --fs-h1: clamp(1.75rem, 1.564rem + .762vw, 2.25rem);
  --fs-h2: 1.25rem; --fs-h3: 1rem;
  --fs-num-xl: 2.75rem; --fs-num-l: 2rem; --fs-num-m: 1.5rem;
  --fs-corpo: .9375rem; --fs-peq: .8125rem;

  /* ---- forma ---- */
  --r: 18px; --r-g: 24px; --r-p: 12px; --r-pp: 8px;
  --lat: 232px; --lat-rec: 72px; --topo: 56px; --barra: 64px;
  --pad: clamp(1rem, 2.4vw, 2rem);

  /* ---- movimento (mesmos nomes do painel.css) ---- */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-io: cubic-bezier(.77, 0, .175, 1);
  --e-gaveta: cubic-bezier(.32, .72, 0, 1);
  --t-micro: 120ms;
  --t-ui: 220ms;
  --t-sai: 160ms;
  --t-gaveta: 480ms;
  --t-move: 620ms;
  --t-dados: 900ms;
  --escada: 40ms;
  --t-brilho: 1400ms;
  --t-giro: .8s;
  --t-pulso: 1100ms;
}
/* piso de 12 px em qualquer texto e de 13 px quando o ponteiro é o dedo (M03): os tamanhos pequenos sobem juntos, em todo CSS que usa os tokens */
@media (pointer: coarse) { :root { --fs-11: .8125rem; --fs-12: .8125rem; } }
@media (prefers-reduced-motion: reduce) {
  :root { --t-micro: 0s; --t-ui: 0s; --t-sai: 0s; --t-gaveta: 0s; --t-move: 0s; --t-dados: 0s; --escada: 0s; --t-brilho: 0s; --t-pulso: 0s; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--c-fundo); color: var(--c-texto); color-scheme: light; scroll-padding-top: calc(var(--topo) + 1rem); }
html[data-esquema="claro"] { color-scheme: light; }
body {
  font-family: var(--f-corpo); font-size: var(--fs-15); line-height: 1.5; color: var(--c-texto); background: var(--c-fundo);
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
fieldset { border: 0; min-width: 0; }
table { border-collapse: collapse; }
::selection { background: var(--c-sel); color: var(--c-texto); }
:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 3px; border-radius: var(--r-pp); }
:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pular { position: absolute; left: -9999px; top: .8rem; z-index: 999; padding: .6rem 1rem; border-radius: 999px; background: var(--c-texto); color: var(--c-fundo); font-weight: 600; }
.pular:focus { left: 1rem; }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .01em; }
.rotulo { font-family: var(--f-corpo); font-weight: 600; font-size: var(--fs-peq); color: var(--c-texto-2); line-height: 1.35; }   /* M03: legível, minúsculo, sem tracking; Plex ficou para .dado e a caixa-alta para .selo-caps */
.sub { color: var(--c-texto-2); font-size: var(--fs-14); max-width: 68ch; }
.fraco { color: var(--c-texto-3); }
.num-grande { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-num-l); letter-spacing: -.02em; line-height: 1.05; color: var(--c-texto); }
.titulo-pag { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.1; }
.titulo-sec { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-h2); letter-spacing: -.01em; line-height: 1.2; }
.linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.linha-fim { justify-content: flex-end; }
.linha-entre { justify-content: space-between; }
.pilha { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pilha-p { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fita { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.fita > .cresce { flex: 1 1 14rem; min-width: 0; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* ============================================================
   FUNDO — brilhos suaves e grão leve, ajustados pelos tokens do tema
   ============================================================ */
.palco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.palco i { position: absolute; display: block; }
.palco .brilho-a { width: 80vmax; height: 60vmax; left: -28vmax; top: -30vmax; background: radial-gradient(closest-side, var(--c-brilho-1), transparent 72%); }
.palco .brilho-b { width: 70vmax; height: 55vmax; right: -26vmax; bottom: -28vmax; background: radial-gradient(closest-side, var(--c-brilho-2), transparent 72%); }
.palco .grao {
  inset: 0; opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-esquema="claro"] .palco .grao { mix-blend-mode: multiply; opacity: .05; }

/* ============================================================
   ABRINDO
   ============================================================ */
.boot { position: fixed; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1.1rem; padding: 2rem; text-align: center; }
.boot-marca { width: 64px; height: 64px; animation: orbita-respira 2.4s var(--e-io) infinite alternate; }
@keyframes orbita-respira { from { transform: rotate(-6deg) scale(.96); opacity: .8; } to { transform: rotate(6deg) scale(1.02); opacity: 1; } }
.boot-msg { color: var(--c-texto-2); font-size: var(--fs-15); max-width: 38ch; }
.boot-acoes { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   BOTÕES — pílulas
   ============================================================ */
.bt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 40px; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-corpo); font-weight: 600; font-size: var(--fs-14); line-height: 1.2; letter-spacing: .003em;
  white-space: nowrap; text-decoration: none; isolation: isolate; overflow: hidden; user-select: none;
  transition: background-color var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out), transform var(--t-micro) var(--e-out), opacity var(--t-ui) var(--e-out);
}
.bt .ic { width: 16px; height: 16px; }
.bt:active:not(:disabled) { transform: scale(.97); }
.bt:disabled { opacity: .5; }
.bt-prim { background: var(--c-prim); color: var(--c-prim-txt); }
.bt-prim:hover:not(:disabled) { background: var(--c-prim-hi); }
.bt-sec { background: var(--c-tinta); border-color: var(--c-borda-2); color: var(--c-texto); }
.bt-sec:hover:not(:disabled) { border-color: var(--c-prim-luz); color: var(--c-prim-luz); }
.bt-fant { color: var(--c-texto-2); padding-inline: .8rem; }
.bt-fant:hover:not(:disabled) { color: var(--c-texto); background: var(--c-tinta); }
/* destrutivo = contorno + ícone, nunca preenchimento (M04): com marca vermelha "Assumir" não pode parecer "Excluir" */
.bt-perigo { background: transparent; border-color: var(--c-ruim); color: var(--c-ruim); }
.bt-perigo:hover:not(:disabled) { background: var(--c-ruim-suave); }
.bt-perigo[aria-busy="true"]::after { border-color: var(--c-ruim); border-right-color: transparent; }
.bt-p { min-height: 32px; padding: .3rem .8rem; font-size: var(--fs-13); }
.bt-g { min-height: 48px; padding: .75rem 1.4rem; font-size: var(--fs-15); }
.bt-bloco { width: 100%; }
.bt[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.bt[aria-busy="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid var(--c-prim-txt); border-right-color: transparent; animation: gira var(--t-giro) linear infinite;
}
.bt-sec[aria-busy="true"]::after, .bt-fant[aria-busy="true"]::after { border-color: var(--c-texto); border-right-color: transparent; }
.bt-icone {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 999px; color: var(--c-texto-2);
  transition: background-color var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out);
}
.bt-icone:hover:not(:disabled) { background: var(--c-tinta); color: var(--c-texto); }
.bt-icone[aria-pressed="true"], .bt-icone[aria-expanded="true"] { background: var(--c-sup-2); color: var(--c-texto); }
a.link, .link { color: var(--c-prim-luz); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--c-texto); }
button.link { min-height: 32px; padding-block: .35rem; }
@media (pointer: coarse) { button.link { min-height: 44px; display: inline-flex; align-items: center; } }
@media (pointer: coarse) { .bt { min-height: 44px; } .bt-p { min-height: 36px; } .bt-icone { width: 44px; height: 44px; } }

/* ============================================================
   OBJETOS — cartões opacos
   ============================================================ */
.cartao {
  position: relative; min-width: 0; background: var(--c-sup); border: 1px solid var(--c-borda); border-radius: var(--r);
  padding: clamp(var(--esp-4), 2vw, var(--esp-6));
  /* claro (papel): borda de 1 px + sombra de duas camadas (contato curto e queda longa); o cartão já é mais claro que a página */
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-sombra) 42%, transparent), 0 14px 28px -22px var(--c-sombra);
}
html[data-esquema="escuro"] .cartao { box-shadow: 0 24px 48px -36px var(--c-sombra), inset 0 1px 0 var(--c-luz-borda); }
.cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.cartao-cab > div { min-width: 0; }
.cartao > .cartao-cab:last-child { margin-bottom: 0; }
.cartao h2, .cartao h3 { font-weight: 700; font-size: var(--fs-17); line-height: 1.3; letter-spacing: -.005em; }
.cartao h3 { font-size: var(--fs-15); }
.cab-pag { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--esp-4) var(--esp-6); flex-wrap: wrap; margin: var(--esp-2) 0 var(--esp-5); }
.cab-pag > div:first-child { min-width: 0; }
.cab-pag .rotulo { margin-bottom: .45rem; }
.cab-pag .sub { margin-top: .45rem; }
.aviso { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-p); background: var(--c-info-suave); color: var(--c-texto); font-size: var(--fs-14); border: 1px solid var(--c-borda); }
.aviso .ic { color: var(--c-info); margin-top: .1rem; }
.aviso-aten { background: var(--c-aten-suave); } .aviso-aten .ic { color: var(--c-aten); }
.aviso-ruim { background: var(--c-ruim-suave); } .aviso-ruim .ic { color: var(--c-ruim); }
.aviso-ok { background: var(--c-ok-suave); } .aviso-ok .ic { color: var(--c-ok); }
.divisor { height: 1px; background: var(--c-borda); border: 0; margin: 1rem 0; }

/* ============================================================
   CAMPOS
   ============================================================ */
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; font-size: var(--fs-14); }
.campo > label, .campo-rot, .campo legend { font-weight: 600; color: var(--c-texto); font-size: var(--fs-14); }
.obrig { color: var(--c-prim-luz); }
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea, .sel, .busca input, .cor-hex {
  width: 100%; min-width: 0; min-height: 44px; padding: .6rem .9rem; border-radius: var(--r-p);
  border: 1px solid var(--c-borda-2); background: var(--c-poco); color: var(--c-texto); font-size: var(--fs-15);
  text-overflow: ellipsis; /* placeholder/valor comprido termina em "…" em vez de ser cortado seco */
  transition: border-color var(--t-ui) var(--e-out), background-color var(--t-ui) var(--e-out);
}
.campo textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.campo select, .sel {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-texto-3) 50%), linear-gradient(135deg, var(--c-texto-3) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - .8rem) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.sel { width: auto; min-height: 40px; border-radius: 999px; padding-left: 1rem; font-size: var(--fs-14); font-weight: 600; }
@media (max-width: 760px) {   /* 16 px no celular: o iPhone não dá zoom ao focar (vem DEPOIS de .sel para valer também nele) */
  .campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea, .sel, .busca input, .cor-hex { font-size: var(--fs-16); }
}
.campo input::placeholder, .campo textarea::placeholder, .busca input::placeholder { color: var(--c-texto-3); opacity: 1; }
.campo input:hover:not(:disabled), .campo select:hover:not(:disabled), .campo textarea:hover:not(:disabled), .sel:hover, .busca input:hover { border-color: var(--c-texto-3); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, .sel:focus-visible, .busca input:focus-visible, .cor-hex:focus-visible {
  outline: 2px solid var(--c-foco); outline-offset: 1px; border-color: var(--c-prim);
}
.campo [aria-invalid="true"], .cor-hex[aria-invalid="true"] { border-color: var(--c-ruim) !important; }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled { opacity: .6; cursor: not-allowed; }
.campo input[readonly] { background: var(--c-sup-2); }
.campo-ajuda { color: var(--c-texto-3); font-size: var(--fs-13); }
.campo-erro { color: var(--c-ruim); font-size: var(--fs-13); font-weight: 600; line-height: 1.4; margin-block-start: var(--esp-1); text-wrap: pretty; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 3rem !important; }
.campo-olho { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.6); cursor: pointer; }
html[data-esquema="claro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
/* caixas e interruptores */
.campo-check label { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 500; min-height: 36px; color: var(--c-texto); }
.campo-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-marca { position: relative; width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--c-borda-2); background: var(--c-poco); transition: background-color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out); }
.check-marca::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--c-prim-txt); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--t-micro) var(--e-out); }
.campo-check input:checked + .check-marca { background: var(--c-prim); border-color: var(--c-prim); }
.campo-check input:checked + .check-marca::after { transform: rotate(45deg) scale(1); }
.campo-check input:focus-visible + .check-marca { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.campo-switch .check-marca { width: 38px; height: 22px; border-radius: 999px; }
.campo-switch .check-marca::after { left: 2px; top: 2px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--c-texto-3); transform: none; transition: transform var(--t-ui) var(--e-out), background-color var(--t-ui) var(--e-out); }
.campo-switch input:checked + .check-marca::after { transform: translateX(16px); background: var(--c-prim-txt); }
.campo-check input:disabled + .check-marca { opacity: .5; }
.campo-multi legend { margin-bottom: .5rem; }
.multi-opcoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-check { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--c-borda-2); color: var(--c-texto-2); font-weight: 600; font-size: var(--fs-13); transition: background-color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out); }
.chip-check input:checked + span { background: var(--c-prim-suave); border-color: var(--c-prim); color: var(--c-texto); }
.chip-check input:checked + span::before { content: "✓"; margin-right: .35rem; color: var(--c-prim-luz); }
.chip-check input:focus-visible + span { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.chip-check input:disabled + span { opacity: .45; cursor: not-allowed; }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.form-grade .inteiro { grid-column: 1 / -1; }
.busca { position: relative; min-width: 0; }
.busca .ic { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--c-texto-3); pointer-events: none; }
.busca input { padding-left: 2.5rem; border-radius: 999px; }

/* seletor de cor */
.seletor-cor { display: flex; flex-direction: column; gap: .55rem; }
.cor-paleta { display: flex; flex-wrap: wrap; gap: .4rem; }
.cor-op { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--cor); box-shadow: inset 0 0 0 1px var(--c-luz-borda), 0 0 0 1px var(--c-borda-2); transition: transform var(--t-micro) var(--e-out); }
.cor-op:hover { transform: scale(1.1); }
.cor-op[aria-checked="true"] { box-shadow: 0 0 0 2px var(--c-fundo), 0 0 0 4px var(--c-texto); }
.cor-linha { display: flex; align-items: center; gap: .5rem; }
.cor-amostra { width: 36px; height: 36px; flex: none; border-radius: var(--r-p); background: var(--cor, var(--c-sup-2)); border: 1px solid var(--c-borda-2); }
.cor-hex { width: 8.5rem !important; min-height: 38px !important; font-family: var(--f-mono); }

/* ============================================================
   PÍLULAS, ETIQUETAS, AVATAR
   ============================================================ */
.pilula {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 24px; padding: .12rem .6rem; border-radius: 999px;
  font-size: var(--fs-12); font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: .01em;
  background: var(--c-sup-2); color: var(--c-texto-2); border: 1px solid transparent;
}
.pilula .ic { width: 13px; height: 13px; }
.pilula-ok { background: var(--c-ok-suave); color: var(--c-ok); }
.pilula-ruim { background: var(--c-ruim-suave); color: var(--c-ruim); }
.pilula-aten { background: var(--c-aten-suave); color: var(--c-aten); }
.pilula-info { background: var(--c-info-suave); color: var(--c-info); }
.pilula-prim { background: var(--c-prim-suave); color: color-mix(in srgb, var(--c-prim-luz) 78%, var(--c-texto)); } /* ≥ 4,5:1 sobre o fundo suave (a cor de link sozinha dava 4,44:1) */
.pilula-sec { background: var(--c-sec-suave); color: color-mix(in srgb, var(--c-sec-luz) 78%, var(--c-texto)); }
.pilula-meta { background: var(--c-meta-suave); color: var(--c-meta); }
.pilula-google { background: var(--c-google-suave); color: var(--c-google); }
/* estado nunca só por cor (M04): cada pílula de estado ganha um glifo por CSS (✓ ▲ ✕ i); a que já traz ícone próprio fica como está */
.pilula-ok:not(:has(.ic))::before, .pilula-aten:not(:has(.ic))::before, .pilula-ruim:not(:has(.ic))::before, .pilula-info:not(:has(.ic))::before { flex: none; font-weight: 800; line-height: 1; }
.pilula-ok:not(:has(.ic))::before { content: "✓"; }
.pilula-aten:not(:has(.ic))::before { content: "▲"; font-size: .7em; }
.pilula-ruim:not(:has(.ic))::before { content: "✕"; font-size: .85em; }
.pilula-info:not(:has(.ic))::before { content: "i"; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border: 1.5px solid currentColor; border-radius: 50%; font-size: .72em; }
.pilula-cor { background: color-mix(in srgb, var(--cor) 18%, var(--c-fundo)); color: color-mix(in srgb, var(--cor) 58%, var(--c-texto)); }
.etiq {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 26px; max-width: 100%; padding: .15rem .6rem .15rem .5rem; border-radius: 999px;
  background: var(--c-sup-2); border: 1px solid var(--c-borda); color: var(--c-texto-2); font-size: var(--fs-12); font-weight: 600;
}
.etiq > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiq i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cor, var(--c-texto-3)); box-shadow: 0 0 8px color-mix(in srgb, var(--cor, var(--c-texto-3)) 60%, transparent); }
.etiq-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -.3rem; border-radius: 50%; color: var(--c-texto-3); }
.etiq-x:hover { background: var(--c-hover); color: var(--c-texto); }
.etiq-x .ic { width: 12px; height: 12px; }
.avatar {
  position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--cor, var(--c-prim)) 26%, var(--c-fundo)); color: color-mix(in srgb, var(--cor, var(--c-prim)) 38%, var(--c-texto));
  font-family: var(--f-corpo); font-weight: 700; font-size: var(--fs-12); letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor, var(--c-prim)) 38%, transparent);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-g { width: 44px; height: 44px; font-size: var(--fs-14); }
.sel-etiq { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

/* ============================================================
   ABAS — são o segmentado "abas" (ver "segmentado" no fim deste arquivo); aqui ficam só os ganchos de largura e de alto contraste
   ============================================================ */
/* 375 px: faixas de 4 abas (Tarefas: Hoje, Atrasadas, Próximas, Concluídas) cabem inteiras; faixas maiores continuam rolando */
@media (max-width: 400px) { .aba { padding-inline: .7rem; } }

/* ============================================================
   TABELA (vira cartões no celular)
   ============================================================ */
.tabela-env { width: 100%; overflow-x: auto; border-radius: var(--r); border: 1px solid var(--c-borda); background: var(--c-sup); }
.tabela { width: 100%; font-size: var(--fs-14); }
.tabela th {
  text-align: left; font-family: var(--f-corpo); font-weight: 600; font-size: var(--fs-peq);
  color: var(--c-texto-2); padding: .85rem .7rem; border-bottom: 1px solid var(--c-borda); background: var(--c-sup); line-height: 1.3; vertical-align: bottom;
}
.tabela td { padding: .8rem .7rem; border-bottom: 1px solid var(--c-borda); vertical-align: middle; min-width: 0; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td .mono { white-space: nowrap; }
.tabela-clicavel tbody tr { cursor: pointer; transition: background-color var(--t-micro) var(--e-out); }
.tabela-clicavel tbody tr:hover { background: var(--c-tinta); }
.tabela tbody tr:focus-visible { outline: 2px solid var(--c-foco); outline-offset: -2px; }
.tabela-clicavel tbody tr:focus-visible { background: var(--c-hover); }
.tabela-clicavel tbody tr:active { background: var(--c-sup-2); }
.tr-vazia td { text-align: center; color: var(--c-texto-3); padding: 2rem 1rem; }
.th-ord { display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.th-ord .ic { width: 12px; height: 12px; opacity: .5; }
.tabela th[aria-sort] .th-ord { color: var(--c-texto); }
.th-sel, .td-sel { width: 44px; }
.cel-nome { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tabela .cel-nome { max-width: 14rem; }
.cel-nome > div { min-width: 0; }
.cel-nome b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-nome small { display: block; color: var(--c-texto-3); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   ESTADOS
   ============================================================ */
.vazio {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: start;
  padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--r); border: 1px dashed var(--c-borda-2); background: var(--c-sup);
  animation: aparece var(--t-ui) var(--e-out) both;
}
.vazio-sem-ic { grid-template-columns: minmax(0, 1fr); }
.vazio-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--c-prim-luz); box-shadow: inset 0 0 0 1.5px var(--c-prim-luz); background: var(--c-prim-suave); }
.vazio-erro .vazio-ic { color: var(--c-ruim); box-shadow: inset 0 0 0 1.5px var(--c-ruim); background: var(--c-ruim-suave); }
.vazio h2 { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-20); letter-spacing: -.01em; line-height: 1.2; }
.vazio p { color: var(--c-texto-2); margin-top: .35rem; max-width: 62ch; }
.vazio-acoes { margin-top: 1rem; }
.esqueleto { animation: aparece var(--t-ui) var(--e-out) both; }
/* esqueleto (M06): bloco com faixa clara que varre (1,4 s); com movimento reduzido só pulsa a opacidade */
.sk { position: relative; display: block; overflow: hidden; border-radius: 8px; background: var(--c-sk-base); }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 20%, var(--c-sk-luz) 50%, transparent 80%); animation: skVarre 1.4s linear infinite; }
html[data-esquema="escuro"] { --c-sk-base: var(--c-sup-2); --c-sk-luz: var(--c-sup-3); --c-pop: var(--c-sup-2); --c-hover: var(--c-sup-3); }
@keyframes skVarre { to { transform: translateX(100%); } }
@keyframes skPulso { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none !important; display: none; }
  .sk { animation: skPulso 1.4s ease-in-out infinite alternate !important; }
}
.sk-l1 { height: 14px; width: 62%; }
.sk-l2 { height: 11px; width: 38%; margin-top: .55rem; }
.sk-num { height: 30px; width: 46%; margin-top: .9rem; }
.sk-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.sk-lista { display: flex; flex-direction: column; gap: .4rem; }
.sk-item { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--r-p); background: var(--c-sup); border: 1px solid var(--c-borda); }
.sk-txt { flex: 1; min-width: 0; }
.sk-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.sk-cartao { padding: 1.2rem; border-radius: var(--r); background: var(--c-sup); border: 1px solid var(--c-borda); }
.sk-tabela { border-radius: var(--r); border: 1px solid var(--c-borda); background: var(--c-sup); overflow: hidden; }
.sk-tr { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 1.2rem; padding: 1rem; border-bottom: 1px solid var(--c-borda); }
.sk-tr .sk { height: 12px; }
.sk-th .sk { height: 9px; width: 50%; }
.sk-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 1rem; overflow: hidden; }
.sk-col { display: flex; flex-direction: column; gap: .6rem; padding: .9rem; border-radius: var(--r); background: var(--c-sup); border: 1px solid var(--c-borda); }
.sk-card { padding: .9rem; border-radius: var(--r-p); background: var(--c-poco); }
.giro { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-prim-luz); border-right-color: transparent; animation: gira var(--t-giro) linear infinite; display: inline-block; }

/* ============================================================
   DIÁLOGOS: modal, gaveta, menu, flutuante, avisos
   ============================================================ */
dialog { color: var(--c-texto); }
.modal {
  margin: auto; width: min(560px, calc(100vw - 32px)); max-height: min(88dvh, 860px); padding: 0; border: 1px solid var(--c-borda-2); border-radius: var(--r-g);
  background: var(--c-sup); box-shadow: 0 40px 90px -30px var(--c-sombra); overflow: hidden; display: flex; flex-direction: column;
  animation: modalEntra var(--t-ui) var(--e-out) both;
}
.modal:not([open]) { display: none; }
.modal-p { width: min(440px, calc(100vw - 32px)); }
.modal-g { width: min(820px, calc(100vw - 32px)); }
.modal::backdrop, .gaveta::backdrop { background: var(--c-veu); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: veu var(--t-ui) var(--e-out) both; }
.modal.saindo { animation: modalSai var(--t-sai) var(--e-io) both; }
@keyframes modalEntra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes modalSai { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes veu { from { opacity: 0; } }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .4rem 1.4rem; }
.modal-cab h2 { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-20); letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.modal-corpo { padding: .6rem 1.4rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.modal-rod { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; padding: 1rem 1.4rem 1.2rem; border-top: 1px solid var(--c-borda); background: var(--c-sup); }
.modal-erro { padding: .7rem .9rem; border-radius: var(--r-p); background: var(--c-ruim-suave); color: var(--c-ruim); font-weight: 600; font-size: var(--fs-14); }
.confirma-txt { color: var(--c-texto-2); }

.gaveta {
  position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto; width: min(580px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 0;
  border: 0; border-left: 1px solid var(--c-borda-2); background: var(--c-vidro-forte);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: -40px 0 90px -40px var(--c-sombra); display: flex; flex-direction: column;
  animation: gavetaEntra var(--t-gaveta) var(--e-gaveta) both;
}
.gaveta:not([open]) { display: none; }
.gaveta-g { width: min(820px, 100vw); }
.gaveta.saindo { animation: gavetaSai var(--t-ui) var(--e-io) both; }
@keyframes gavetaEntra { from { transform: translateX(100%); } to { transform: none; } }
@keyframes gavetaSai { to { transform: translateX(100%); } }
.gaveta-cab { display: flex; align-items: center; gap: .6rem; padding: .8rem .8rem .8rem 1.3rem; border-bottom: 1px solid var(--c-borda); min-height: var(--topo); }
.gaveta-cab h2 { flex: 1; min-width: 0; font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-20); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta-voltar { display: none; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 1.2rem 1.3rem 2rem; min-height: 0; overscroll-behavior: contain; }

[popover] { margin: 0; inset: auto; border: 0; padding: 0; background: transparent; color: var(--c-texto); overflow: visible; }
.menu-pop, .flut {
  position: fixed; z-index: 90; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); padding: .35rem; border-radius: 14px;
  background: var(--c-pop); border: 1px solid var(--c-borda-2); box-shadow: 0 2px 4px color-mix(in srgb, var(--c-sombra) 40%, transparent), 0 24px 60px -18px var(--c-sombra);
  animation: aparece var(--t-micro) var(--e-out) both;
}
.flut { padding: .7rem; max-height: min(70dvh, 520px); overflow: auto; }
.menu-item {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 40px; padding: .5rem .75rem; border-radius: 10px; text-align: left;
  font-size: var(--fs-14); font-weight: 500; color: var(--c-texto);
}
.menu-item .ic { color: var(--c-texto-3); }
.menu-motivo { display: block; font-size: var(--fs-12); color: var(--c-texto-3); font-weight: 400; line-height: 1.3; margin-top: var(--esp-1); }   /* plano 1000 · AS-288 */
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--c-hover); outline: none; }
.menu-item.perigo, .menu-item.perigo .ic { color: var(--c-ruim); }
.menu-item:disabled { opacity: .45; }
.menu-sep { border: 0; height: 1px; background: var(--c-borda); margin: .3rem .4rem; }
.flut-busca { width: 100%; min-height: 38px; padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--c-borda-2); background: var(--c-poco); color: var(--c-texto); }
.flut-lista { display: flex; flex-direction: column; gap: .15rem; max-height: 260px; overflow: auto; }
.flut-op { display: flex; align-items: center; gap: .55rem; min-height: 36px; padding: .25rem .4rem; border-radius: 8px; cursor: pointer; }
.flut-op:hover { background: var(--c-hover); }
.flut-op input { accent-color: var(--c-prim); width: 16px; height: 16px; }
.flut-criar { display: flex; align-items: center; gap: .5rem; min-height: 36px; padding: .3rem .5rem; border-radius: 8px; color: var(--c-prim-luz); font-weight: 600; font-size: var(--fs-13); }
.flut-criar:hover { background: var(--c-hover); }
.flut-vazio { color: var(--c-texto-3); font-size: var(--fs-13); padding: .4rem; }

.toasts { position: fixed; inset: auto 1rem 1rem auto; z-index: 100; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; width: min(420px, calc(100vw - 2rem)); pointer-events: none; }
.toasts:not(:popover-open) { display: none; }
.toasts:empty { display: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem .6rem .75rem 1rem; border-radius: 14px;
  background: var(--c-pop); border: 1px solid var(--c-borda-2); box-shadow: 0 2px 4px color-mix(in srgb, var(--c-sombra) 40%, transparent), 0 20px 50px -18px var(--c-sombra); font-size: var(--fs-14);
  animation: toastEntra var(--t-ui) var(--e-out) both;
}
.toast p { flex: 1; min-width: 0; }
.toast > .ic { color: var(--c-info); }
.toast-ok > .ic { color: var(--c-ok); }
.toast-erro { border-color: var(--c-ruim); }
.toast-erro > .ic { color: var(--c-ruim); }
.toast.saindo { animation: toastSai var(--t-sai) var(--e-io) both; }
.toast-acao { font-weight: 700; color: var(--c-prim-luz); padding: .3rem .6rem; border-radius: 999px; }
.toast-acao:hover { background: var(--c-tinta); }
.toast-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--c-texto-3); }
.toast-x:hover { background: var(--c-tinta); color: var(--c-texto); }
.toast-x .ic { width: 15px; height: 15px; }
@keyframes toastEntra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastSai { to { opacity: 0; transform: translateX(12px); } }

/* bloco de link gerado */
.bloco-link { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: var(--r); background: var(--c-sup-2); border: 1px solid var(--c-borda); }
.bloco-link input { width: 100%; min-height: 42px; padding: .5rem .8rem; border-radius: var(--r-p); border: 1px solid var(--c-borda-2); background: var(--c-poco); color: var(--c-texto); font-size: var(--fs-13); }

/* ============================================================
   SHELL — menu lateral, topo, faixas, barra inferior
   ============================================================ */
.app { position: relative; z-index: 1; min-height: 100dvh; }
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--lat); display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1rem .8rem 1rem; border-right: 1px solid var(--c-borda); overflow: hidden auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-fundo) 55%, transparent), color-mix(in srgb, var(--c-fundo) 25%, transparent));
  transition: width var(--t-move) var(--e-out);
}
.lat-marca { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 44px; padding: 0 .1rem 0 .35rem; }
.lat-home { display: flex; align-items: center; gap: .7rem; min-width: 0; text-decoration: none; border-radius: 12px; }
.lat-logo { display: grid; place-items: center; width: 36px; height: 36px; flex: none; }
.lat-logo svg, .lat-logo img { width: 36px; height: 36px; object-fit: contain; }
/* logo largo: a caixa cresce com a imagem e o nome do produto vira .sr-only (app.js) — nada por cima */
.lat-logo.largo { width: auto; max-width: 150px; }
.lat-logo img.largo { width: auto; max-width: 150px; height: 32px; }
/* só ícones (menu recolhido): o logo largo encolhe para a caixa de 36 px, sem vazar do trilho */
html.menu-recolhido .lat-logo.largo, html.menu-recolhido .lat-logo img.largo { width: 36px; max-width: 36px; }
.lat-produto { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-20); letter-spacing: -.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lat-recolher .ic { transition: transform var(--t-ui) var(--e-out); }
.lat-nav { display: flex; flex-direction: column; gap: .15rem; }
.nav-grupo { margin: .9rem .8rem .35rem; }
.nav-b {
  position: relative; display: flex; align-items: center; gap: .8rem; min-height: 42px; padding: .5rem .85rem; border-radius: 999px;
  color: var(--c-texto-2); font-size: var(--fs-15); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--t-ui) var(--e-out), background-color var(--t-ui) var(--e-out);
}
.nav-b .ic { width: 19px; height: 19px; }
.nav-b:hover { color: var(--c-texto); background: var(--c-tinta); }
.nav-b[aria-current="page"] { color: var(--c-texto); font-weight: 600; background: var(--c-sup-2); box-shadow: inset 0 0 0 1px var(--c-borda); }
.nav-b[aria-current="page"] .ic { color: var(--c-prod); }   /* acento do produto aberto (M04): CRM = primária, Ads = secundária, Atendimento = mistura */
.nav-b[aria-current="page"]::before {
  content: ""; position: absolute; left: -.8rem; top: 26%; bottom: 26%; width: 2px; border-radius: 0 2px 2px 0;
  background: var(--c-prod); box-shadow: 0 0 12px 1px var(--c-prod);
}
.nav-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-selo { font-size: var(--fs-12); font-weight: 600; color: var(--c-aten); }
.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px;
  background: var(--c-prim); color: var(--c-prim-txt); font-family: var(--f-mono); font-size: var(--fs-11); font-weight: 500; line-height: 1;
}
.badge.pulsa { animation: pulsaBadge var(--t-brilho) var(--e-out) 1; }
@keyframes pulsaBadge { 30% { transform: scale(1.18); box-shadow: 0 0 0 6px var(--c-prim-suave); } }
.lat-pe { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--c-borda); }
.lat-conta { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 48px; padding: .35rem .5rem; border-radius: 14px; text-align: left; }
.lat-conta:hover { background: var(--c-tinta); }
.lat-conta > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lat-conta b { font-size: var(--fs-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-conta small { font-size: var(--fs-12); color: var(--c-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* menu recolhido (botão) ou tela média: só ícones */
html.menu-recolhido { --lat: var(--lat-rec); }
html.menu-recolhido .lat-produto, html.menu-recolhido .nav-txt, html.menu-recolhido .nav-b .badge, html.menu-recolhido .nav-selo,
html.menu-recolhido .nav-grupo, html.menu-recolhido .lat-conta > span:last-child { display: none; }
html.menu-recolhido .lat-marca { flex-direction: column; padding: 0; }
html.menu-recolhido .lat-recolher .ic { transform: rotate(180deg); }
html.menu-recolhido .nav-b { justify-content: center; padding: .5rem; }
html.menu-recolhido .nav-b .ic { width: 21px; height: 21px; }
html.menu-recolhido .nav-b .badge-ponto { display: block; }
html.menu-recolhido .lat-conta { justify-content: center; }
.badge-ponto { display: none; position: absolute; top: 8px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-prim); box-shadow: 0 0 0 2px var(--c-fundo); }

.coluna { margin-left: var(--lat); min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; transition: margin-left var(--t-move) var(--e-out); }
.topo {
  position: sticky; top: 0; z-index: 20; height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--pad); background: var(--c-vidro); border-bottom: 1px solid var(--c-borda);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.topo-esq { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.topo-marca { display: none; width: 34px; height: 34px; flex: none; }
.topo-marca svg, .topo-marca img { width: 34px; height: 34px; object-fit: contain; }
.topo-dir { display: flex; align-items: center; gap: .35rem; flex: none; }
.topo-busca { display: inline-flex; align-items: center; gap: .6rem; min-height: 38px; padding: .35rem .5rem .35rem .85rem; border-radius: 999px; border: 1px solid var(--c-borda-2); color: var(--c-texto-3); font-size: var(--fs-14); background: var(--c-tinta); }
.topo-busca:hover { color: var(--c-texto); border-color: var(--c-texto-3); }
.topo-busca kbd { font-family: var(--f-mono); font-size: var(--fs-11); padding: .1rem .4rem; border-radius: 6px; background: var(--c-sup-2); border: 1px solid var(--c-borda); color: var(--c-texto-3); }
.topo-produtos {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; max-width: 190px;
  padding: .35rem .8rem; border: 1px solid var(--c-borda-2); border-radius: 999px; background: var(--c-tinta);
  color: var(--c-texto); font-size: var(--fs-13); font-weight: 700; white-space: nowrap; transition: border-color var(--t-ui), background-color var(--t-ui);
}
.topo-produtos:hover { border-color: var(--c-prim-luz); background: var(--c-prim-suave); }
.topo-produtos .ic { color: var(--c-prod); }
/* "Seus produtos" (M04): UMA coluna de cartões de 72 px (em modal de 560 px, três colunas cortavam "Atendimento") e cada produto com o seu acento */
.produto-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.produto-op {
  --c-prod-op: var(--c-prod-crm);
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; min-width: 0; min-height: 72px;
  padding: .8rem 1rem; border: 1px solid var(--c-borda); border-radius: var(--r); background: var(--c-sup); color: var(--c-texto); text-align: left;
  transition: border-color var(--t-ui), background-color var(--t-ui);
}
.produto-op[data-produto="ads"], .produto-grade > .produto-op:nth-child(2) { --c-prod-op: var(--c-prod-ads); }
.produto-op[data-produto="atendimento"], .produto-grade > .produto-op:nth-child(3) { --c-prod-op: var(--c-prod-atend); }
.produto-op::before { content: ""; position: absolute; inset: 18% auto 18% 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-prod-op); opacity: 0; transition: opacity var(--t-ui); }
.produto-op:hover { border-color: var(--c-prod-op); background: var(--c-hover); }
.produto-op:hover::before, .produto-op[aria-current="page"]::before { opacity: 1; }
.produto-op[aria-current="page"] { border-color: var(--c-prod-op); background: var(--c-sup-2); }
.produto-op:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 3px; }
.produto-op-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--c-prod-op) 12%, var(--c-sup)); color: var(--c-prod-op); }
.produto-op-icone .ic { width: 20px; height: 20px; }
.produto-op-corpo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.produto-op-corpo b { font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-17); letter-spacing: -.01em; line-height: 1.15; }
.produto-op-corpo small { color: var(--c-texto-2); font-size: var(--fs-12); line-height: 1.4; }
.produto-op-atual { color: var(--c-prod-op); font-size: var(--fs-12); font-weight: 700; }
.produto-nota { padding: .2rem .25rem 0; color: var(--c-texto-3); font-size: var(--fs-13); line-height: 1.5; }
.sino { position: relative; }
.sino .badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: var(--fs-12); }

/* seletor de empresa */
.empresa-bt {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; max-width: min(360px, 100%); padding: .25rem .8rem .25rem .3rem; border-radius: 999px;
  border: 1px solid var(--c-borda-2); background: var(--c-tinta); text-align: left; min-width: 0;
}
.empresa-bt:hover { border-color: var(--c-texto-3); }
.empresa-bt .avatar { width: 30px; height: 30px; }
.empresa-bt .emp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.empresa-bt b { font-size: var(--fs-14); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-bt small { font-size: var(--fs-12); color: var(--c-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-bt > .ic { width: 15px; height: 15px; color: var(--c-texto-3); }
.empresa-fixa { cursor: default; }
.empresa-lista { display: flex; flex-direction: column; gap: .15rem; max-height: 360px; overflow: auto; margin-top: .4rem; }
.empresa-op { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .35rem .5rem; border-radius: 10px; text-align: left; }
.empresa-op:hover, .empresa-op:focus-visible { background: var(--c-hover); outline: none; }
.empresa-op[aria-current="true"] { background: var(--c-prim-suave); }
.empresa-op > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.empresa-op b { font-size: var(--fs-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-op small { color: var(--c-texto-3); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* faixas fixas (suporte, teste, bloqueio) */
.faixas:empty { display: none; }
.faixa {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .55rem var(--pad); font-size: var(--fs-13);
  background: var(--c-info-suave); border-bottom: 1px solid var(--c-borda); color: var(--c-texto);
}
.faixa .ic { width: 16px; height: 16px; color: var(--c-info); flex: none; }
.faixa p { flex: 1 1 16rem; min-width: 0; }
.faixa b { font-weight: 700; }
.faixa-suporte { background: var(--c-aten-suave); } .faixa-suporte .ic { color: var(--c-aten); }
.faixa-demo-local { background: var(--c-aten-suave); }
.faixa-bloqueio { background: var(--c-ruim-suave); } .faixa-bloqueio .ic { color: var(--c-ruim); }
.faixa .bt { min-height: 30px; padding: .2rem .8rem; font-size: var(--fs-13); }

.vista { position: relative; flex: 1; min-width: 0; padding: 1.4rem var(--pad) 3rem; outline: none; }
.vista > * { animation: aparece var(--t-ui) var(--e-out) both; }
.area-bloqueada { max-width: 720px; margin: 2rem auto 0; }

/* barra inferior (celular) + folha "Mais" */
.barra { display: none; }
.barra-b {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 56px;
  color: var(--c-texto-3); font-size: var(--fs-12); font-weight: 600; text-decoration: none; position: relative; border-radius: 14px;
}
.barra-b .ic { width: 22px; height: 22px; }
.barra-b[aria-current="page"] { color: var(--c-texto); }
.barra-b[aria-current="page"] .ic { color: var(--c-prod); }
.barra-b .badge { position: absolute; top: 4px; left: calc(50% + 4px); min-width: 18px; height: 18px; font-size: var(--fs-12); }
.folha-mais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.folha-mais a { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .25rem; min-width: 0; overflow-wrap: anywhere; border-radius: var(--r); background: var(--c-sup-2); border: 1px solid var(--c-borda); text-decoration: none; font-size: var(--fs-12); font-weight: 600; text-align: center; }
.folha-mais a .ic { width: 22px; height: 22px; color: var(--c-prim-luz); }

@media (max-width: 1100px) {
  :root { --lat: var(--lat-rec); }
  .lat-produto, .nav-txt, .nav-b .badge, .nav-selo, .nav-grupo, .lat-conta > span:last-child, .lat-recolher { display: none; }
  .lat-logo.largo, .lat-logo img.largo { width: 36px; max-width: 36px; }
  .lat-marca { justify-content: center; padding: 0; }
  .nav-b { justify-content: center; padding: .5rem; }
  .nav-b .ic { width: 21px; height: 21px; }
  .nav-b .badge-ponto { display: block; }
  .lat-conta { justify-content: center; }
}
@media (max-width: 480px) {
  /* a barra do topo tem marca + empresa + 5 ícones: o texto da empresa ficava com ~30 px ("Ó" / "A.."); fica só o avatar,
     e o nome continua disponível para leitor de tela e no rótulo de cada tela */
  .empresa-bt .emp-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .empresa-bt { padding-right: .3rem; gap: .3rem; }
  .empresa-bt:has(> .ic) { padding-right: .55rem; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; --topo: 56px; }
  .lateral { display: none; }
  .coluna { margin-left: 0; padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom)); }
  .topo { padding: 0 12px 0 12px; gap: .5rem; }
  .topo-marca { display: block; }
  .topo-busca .rot, .topo-busca kbd { display: none; }
  .topo-busca { padding: 0; width: 40px; height: 40px; justify-content: center; border: 0; background: none; }
  .empresa-bt { max-width: 100%; }
  .vista { padding: 1rem 16px 2rem; }
  .barra {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; gap: .2rem; padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: var(--c-vidro); border-top: 1px solid var(--c-borda); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }
  .grade-2, .grade-3, .form-grade { grid-template-columns: minmax(0, 1fr); }
  html { scroll-padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom) + 1rem); }   /* a barra inferior fixa não cobre o controle focado */
  .toasts { inset: auto 12px calc(var(--barra) + 12px + env(safe-area-inset-bottom)) 12px; width: auto; align-items: stretch; }
  .topo-produtos { width: 42px; min-width: 42px; max-width: 42px; min-height: 42px; padding: .4rem; }
  .topo-produtos span { display: none; }
  .gaveta, .gaveta-g { width: 100vw; border-left: 0; }
  .gaveta-voltar { display: inline-grid; }
  .gaveta-x { display: none; }
  .modal { width: calc(100vw - 24px); max-height: 92dvh; }
  .modal-rod { justify-content: stretch; }
  .modal-rod .bt { flex: 1 1 auto; } /* texto comprido ("Salvar configuração") deixa de ser cortado */
  .vazio { grid-template-columns: minmax(0, 1fr); }
  /* tabela → cartões */
  .tabela-env { border: 0; background: transparent; overflow: visible; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); visibility: hidden; } /* cartões: o cabeçalho some da tela E do foco (os botões de ordenação não podem receber Tab escondidos) */
  .tabela tbody { display: flex; flex-direction: column; gap: .6rem; }
  .tabela tbody tr { border-radius: var(--r); border: 1px solid var(--c-borda); background: var(--c-sup); padding: .5rem .2rem; }
  .tabela td { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .8rem; align-items: center; border: 0; padding: .4rem .9rem; text-align: left !important; }
  .tabela td::before { content: attr(data-rotulo); font-weight: 600; font-size: var(--fs-peq); color: var(--c-texto-2); }
  .tabela td.td-principal { grid-template-columns: minmax(0, 1fr); }
  .tabela td.td-principal::before { display: none; }
  .tabela td.td-sel { display: flex; }
  .tabela td.td-sel::before { display: none; }
  .tr-vazia td { grid-template-columns: minmax(0, 1fr); }
  .tr-vazia td::before { display: none; }
}

/* ============================================================
   T1 — ENTRAR, CONVITE, NOVA SENHA
   ============================================================ */
.publico { position: relative; z-index: 1; min-height: 100dvh; }
.entrar {
  min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 5vw, 5rem);
}
.entrar-arte { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; animation: aparece var(--t-move) var(--e-out) both; }
.entrar-marca { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.entrar-marca svg, .entrar-marca img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.entrar-marca img.largo { width: auto; max-width: 200px; height: 44px; }
.entrar-marca span { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-25); letter-spacing: -.01em; }   /* nome do produto de até 40 letras numa palavra só quebra em vez de alargar a página */
.entrar-titulo {
  font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; letter-spacing: -.035em; line-height: .98;
  font-size: var(--fs-display); max-width: 13ch; text-wrap: balance; min-width: 0; overflow-wrap: anywhere;   /* título de até 80 letras sem espaço (ex.: um endereço) quebra em vez de estourar */
}
.entrar-titulo em { font-style: normal; color: var(--c-prim-luz); }
.entrar-sub { color: var(--c-texto-2); font-size: var(--fs-17); max-width: 44ch; overflow-wrap: anywhere; }
.entrar-orbita { position: relative; width: min(420px, 80%); aspect-ratio: 2.4 / 1; margin-top: .6rem; transform: rotate(-10deg); }
.entrar-orbita i { position: absolute; border-radius: 50%; }
.entrar-orbita .o1 { inset: 0; border: 1px solid var(--c-borda-2); }
.entrar-orbita .o2 { inset: 18% 12%; border: 1px dashed var(--c-borda-2); opacity: .7; }
.entrar-orbita .p { width: 18px; height: 18px; left: 50%; top: 50%; margin: -9px; background: var(--c-prim); box-shadow: 0 0 40px 10px var(--c-brilho-1), 0 0 0 6px var(--c-prim-suave); }
/* luas que percorrem as órbitas (só na tela de entrar; paradas com movimento reduzido) */
.entrar-orbita .l { left: 0; top: 0; offset-anchor: center; offset-rotate: 0deg; animation: percorre 46s linear infinite; }
.entrar-orbita .l1 { width: 10px; height: 10px; background: var(--c-sec); box-shadow: 0 0 14px var(--c-brilho-2); offset-path: ellipse(50% 50% at 50% 50%); }
.entrar-orbita .l2 { width: 6px; height: 6px; background: var(--c-texto-2); offset-path: ellipse(50% 50% at 50% 50%); animation-delay: -23s; }
.entrar-orbita .l3 { width: 7px; height: 7px; background: var(--c-prim-luz); offset-path: ellipse(38% 32% at 50% 50%); animation-duration: 29s; animation-direction: reverse; }
@keyframes percorre { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .entrar-orbita .l { animation: none; offset-distance: 30%; } .entrar-orbita .l2 { offset-distance: 80%; } }
.entrar-pontos { display: flex; flex-wrap: wrap; gap: .5rem; }
.entrar-cartao {
  width: 100%; max-width: 440px; justify-self: center; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-g);
  background: var(--c-vidro); border: 1px solid var(--c-borda-2); box-shadow: 0 50px 100px -40px var(--c-sombra), inset 0 1px 0 var(--c-luz-borda);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  animation: aparece var(--t-move) var(--e-out) both; animation-delay: calc(var(--escada) * 3);
}
.entrar-cartao h1, .entrar-cartao .sub { overflow-wrap: anywhere; }
.entrar-cartao h1 { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-25); letter-spacing: -.015em; line-height: 1.15; }
.entrar-cartao .sub { margin-top: .4rem; }
.entrar-form { display: flex; flex-direction: column; gap: .95rem; margin-top: 1.4rem; }
.entrar-erro { padding: .7rem .9rem; border-radius: var(--r-p); background: var(--c-ruim-suave); color: var(--c-ruim); font-weight: 600; font-size: var(--fs-14); }
.entrar-ok { padding: .7rem .9rem; border-radius: var(--r-p); background: var(--c-ok-suave); color: var(--c-ok); font-weight: 600; font-size: var(--fs-14); }
.entrar-rodape { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; font-size: var(--fs-14); }
.entrar-nota { font-size: var(--fs-13); color: var(--c-texto-3); line-height: 1.45; }
.entrar-convite { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: var(--r); background: var(--c-prim-suave); border: 1px solid var(--c-borda); margin-top: 1.2rem; }
.entrar-convite p { font-size: var(--fs-14); }
.entrar-convite b { font-weight: 700; }
.entrar-assina { position: fixed; left: clamp(1rem, 5vw, 5rem); bottom: 1rem; font-size: var(--fs-12); font-weight: 600; color: var(--c-texto-3); }
@media (max-width: 900px) {
  .entrar { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 1.5rem 16px 3.5rem; gap: 1.6rem; }
  .entrar-titulo { font-size: var(--fs-h1); }
  .entrar-sub { font-size: var(--fs-15); }
  .entrar-orbita, .entrar-pontos { display: none; }
  .entrar-cartao { max-width: none; }
  .entrar-assina { position: static; margin-top: 1rem; }
}

/* ============================================================
   T14 — CONFIGURAÇÕES (hub)
   ============================================================ */
/* a navegação lateral (item com ícone em caixa, título e descrição — plano 50 · 56) mora inteira aqui, não no config.css: o config.js desenha
   a lista antes de a folha da tela chegar, e com uma só definição o item já nasce com a forma final (a lista não pula de pílula para cartão) */
.cfg { display: grid; grid-template-columns: minmax(0, 252px) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: start; }   /* 252 px: a descrição de uma linha cabe sem quebrar em três */
.cfg-lista { position: sticky; top: calc(var(--topo) + 1rem); display: flex; flex-direction: column; gap: .2rem; }
.cfg-grupo { margin: 1rem .8rem .35rem; }
.cfg-grupo:first-child { margin-top: 0; }
.cfg-nav-item { display: flex; align-items: flex-start; gap: .65rem; min-height: 44px; padding: .5rem .8rem; border-radius: var(--r-p); color: var(--c-texto-2); font-weight: 500; font-size: var(--fs-14); text-decoration: none; }
.cfg-nav-item .ic { width: 17px; height: 17px; }
.cfg-nav-item:hover { background: var(--c-tinta); color: var(--c-texto); }
.cfg-nav-item[aria-current="page"] { background: var(--c-sup-2); color: var(--c-texto); font-weight: 600; box-shadow: inset 0 0 0 1px var(--c-borda); }
.cfg-nav-item[aria-current="page"] .ic { color: var(--c-prod); }
.cfg-nav-item .nav-selo { margin-left: auto; align-self: center; }
.cfg-nav-item:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.cfg-nav-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--c-tinta); color: var(--c-texto-3); }
.cfg-nav-ic .ic { width: 15px; height: 15px; }
.cfg-nav-item[aria-current="page"] .cfg-nav-ic { background: var(--c-prim-suave); color: var(--c-prim-luz); }
.cfg-nav-item:hover .cfg-nav-ic { color: var(--c-texto); }
.cfg-nav-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; }
.cfg-nav-tit { font-weight: 600; }
.cfg-nav-desc { font-size: var(--fs-12); font-weight: 400; color: var(--c-texto-3); line-height: 1.3; }
.cfg-nav-item[aria-current="page"] .cfg-nav-desc { color: var(--c-texto-2); }
.cfg-pend {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px;
  background: var(--c-prim); color: var(--c-prim-txt); font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-11);
}
.cfg-nav-item[data-pend] .cfg-nav-ic { position: relative; }
.cfg-nav-item[data-pend] .cfg-nav-ic::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; margin: -22px 0 0 20px;
  background: var(--c-prim); box-shadow: 0 0 0 2px var(--c-sup);
}
.cfg-sec { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.cfg-sec > .cfg-voltar { display: none; }
@media (max-width: 760px) {
  .cfg { grid-template-columns: minmax(0, 1fr); }
  .cfg-lista { position: static; }
  .cfg.na-secao .cfg-lista { display: none; }
  .cfg:not(.na-secao) .cfg-sec { display: none; }
  .cfg-sec > .cfg-voltar { display: inline-flex; align-self: flex-start; }
  .cfg-nav-item { min-height: 56px; padding: .65rem .85rem; background: var(--c-sup); border: 1px solid var(--c-borda); border-radius: var(--r-p); }
  .cfg-nav-ic { width: 34px; height: 34px; border-radius: 11px; }
  .cfg-nav-ic .ic { width: 17px; height: 17px; }
  .cfg-nav-desc { display: block; }
}
@media (max-width: 760px), (pointer: coarse) {
  .bt-p, .aba { min-height: 44px; }
  .th-ord { min-height: 44px; padding-inline: .2rem; }
  .cfg-sec > .cfg-voltar { min-height: 44px; padding-inline: .5rem; }
  .topo-marca { display: grid; place-items: center; width: 44px; height: 44px; }
}
.usuarios-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.papel-sel { min-height: 36px; max-width: 9.75rem; font-size: var(--fs-13); padding-left: .8rem; padding-right: 2.1rem; text-overflow: ellipsis; }
.lista-convites { display: flex; flex-direction: column; gap: .5rem; }
.convite-item { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: var(--r-p); background: var(--c-sup-2); border: 1px solid var(--c-borda); }
.convite-item > div { flex: 1 1 12rem; min-width: 0; }
.convite-item b { font-weight: 600; }
.convite-item small { display: block; color: var(--c-texto-3); font-size: var(--fs-12); }

/* uso × limite (Plano e uso, Admin) */
.uso { display: flex; flex-direction: column; gap: .35rem; }
.uso-l { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--fs-13); }
.uso-l span:last-child { font-family: var(--f-mono); color: var(--c-texto-2); }
.uso-barra { height: 6px; border-radius: 999px; background: var(--c-sup-3); overflow: hidden; }
.uso-barra i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--c-prim-luz); transition: width var(--t-dados) var(--e-out); }
.uso-barra.cheia i { background: var(--c-ruim); }
.uso-barra.alta i { background: var(--c-aten); }

/* ============================================================
   ÓRBITA · assinatura visual 2026-09-30
   Luz orbital lenta no palco, navegação mais tátil e hierarquia
   consistente. Todos os efeitos usam os tokens white-label.
   ============================================================ */
/* Palco (M10): PARADO por padrão — a inbox fica aberta o dia todo e a aurora com blur(74px) animada custava +36 % de CPU no chat (+46 % no celular).
   Só se move com body.palco-vivo (o ui.js a liga sozinho no Login e no Início, ver sincronizarPalco) e pausa quando a aba fica oculta (html.aba-oculta). */
.palco .brilho-a { transform-origin: 38% 42%; }
.palco .brilho-b { transform-origin: 65% 62%; }
body.palco-vivo .palco .brilho-a { animation: orbitaBrilhoA 32s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform, opacity; }
body.palco-vivo .palco .brilho-b { animation: orbitaBrilhoB 39s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform, opacity; }

@keyframes orbitaBrilhoA {
  0% { transform: translate3d(0, 0, 0) scale(.94); opacity: .72; }
  100% { transform: translate3d(5vw, 4vh, 0) scale(1.12); opacity: 1; }
}
@keyframes orbitaBrilhoB {
  0% { transform: translate3d(0, 0, 0) scale(1.08); opacity: .65; }
  100% { transform: translate3d(-4vw, -5vh, 0) scale(.92); opacity: .95; }
}
.lateral {
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-sup) 86%, transparent), color-mix(in srgb, var(--c-fundo) 64%, transparent));
  box-shadow: 18px 0 48px -42px var(--c-sombra);
}
.lateral::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8rem;
  left: -9rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-brilho-1), transparent 68%);
  pointer-events: none;
}
.nav-b { transition: color var(--t-ui) var(--e-out), background-color var(--t-ui) var(--e-out); }
.nav-b[aria-current="page"] {
  background: linear-gradient(100deg, color-mix(in srgb, var(--c-prim) 13%, var(--c-sup-2)), var(--c-sup-2) 72%);
  border-color: color-mix(in srgb, var(--c-prim) 20%, var(--c-borda));
}
.topo { box-shadow: 0 10px 30px -26px var(--c-sombra); }
.topo-empresa, .topo-dir { min-width: 0; }
.vista { background: radial-gradient(ellipse at 96% 0%, color-mix(in srgb, var(--c-brilho-1) 58%, transparent), transparent 34rem); }
.bt { transition: transform var(--t-micro) var(--e-out), background-color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out); }   /* só o aperto (:active) mexe no botão; nada sobe no hover */
.bt:focus-visible, .bt-icone:focus-visible, .nav-b:focus-visible, .barra-b:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .vista { background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--c-brilho-1) 42%, transparent), transparent 22rem); }
  .topo { gap: .45rem; padding-inline: max(12px, env(safe-area-inset-left)); }
  .topo-dir { gap: .1rem; }
}

/* ============================================================
   T15 — ADMIN
   ============================================================ */
.adm-filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.adm-filtros .busca { flex: 1 1 16rem; }
.adm-det { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.adm-det > .pilha { min-width: 0; }
.adm-kv { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .5rem 1rem; font-size: var(--fs-14); }
.adm-kv dt { color: var(--c-texto-2); font-weight: 600; font-size: var(--fs-peq); padding-top: .15rem; }
.adm-kv dd { min-width: 0; overflow-wrap: anywhere; }
.adm-uso { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.voltar-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-texto-2); text-decoration: none; font-size: var(--fs-14); font-weight: 600; margin-bottom: .6rem; }
.voltar-link:hover { color: var(--c-texto); }
.voltar-link .ic { width: 16px; height: 16px; }
@media (max-width: 1000px) { .adm-det { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .adm-kv { grid-template-columns: minmax(0, 1fr); gap: .15rem; } .adm-kv dd { margin-bottom: .5rem; } }

/* Ofertas comerciais no cadastro: três pacotes claros, preços sem arredondamento e seleção acessível. */
.campo-ofertas { min-width: 0; border: 0; padding: 0; }
.campo-ofertas > legend { margin-bottom: .55rem; font-size: var(--fs-14); font-weight: 700; color: var(--c-texto); }
.ofertas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; align-items: stretch; }
.oferta-card { position: relative; display: flex; min-width: 0; cursor: pointer; }
.oferta-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.oferta-conteudo { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .55rem; padding: .9rem; border: 1px solid var(--c-borda-2); border-radius: 16px; background: var(--c-sup); transition: border-color var(--t-ui) var(--e-out), box-shadow var(--t-ui) var(--e-out), background-color var(--t-ui) var(--e-out); }
.oferta-card:hover .oferta-conteudo { border-color: var(--c-prim-luz); }
.oferta-card > input:checked + .oferta-conteudo { border-color: var(--c-prim); background: var(--c-prim-suave); box-shadow: inset 0 0 0 1px var(--c-prim); }
.oferta-card > input:focus-visible + .oferta-conteudo { outline: 2px solid var(--c-foco); outline-offset: 3px; }
.oferta-cab { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.oferta-cab b { font-size: var(--fs-13); letter-spacing: .035em; }
.oferta-preco { color: var(--c-texto); font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; overflow-wrap: anywhere; }
.oferta-integracao { color: var(--c-texto-2); font-size: var(--fs-12); font-weight: 600; }
.oferta-inclusoes-tit { margin-top: .2rem; color: var(--c-texto-2); font-weight: 600; font-size: var(--fs-peq); }
.oferta-inclusoes { display: flex; flex-direction: column; gap: .38rem; color: var(--c-texto-2); font-size: var(--fs-12); line-height: 1.35; }
.oferta-inclusoes > span { display: flex; align-items: flex-start; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.oferta-inclusoes > span::before { content: "✓"; flex: none; color: var(--c-ok); font-weight: 800; }
.campo-ofertas > .campo-ajuda { display: block; margin-top: .55rem; }
@media (max-width: 760px) { .ofertas-grade { grid-template-columns: minmax(0, 1fr); } .oferta-conteudo { padding: .85rem 1rem; } }

/* ============================================================
   MARCA — editor e pré-visualização ao vivo (P0-B)
   ============================================================ */
.marca-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.2rem; align-items: start; }
.marca-ed > * { min-width: 0; }
.marca-previa-env { position: sticky; top: calc(var(--topo) + 1rem); display: flex; flex-direction: column; gap: .7rem; }
.logo-caixa { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-amostra { display: grid; place-items: center; width: 132px; height: 72px; border-radius: var(--r-p); border: 1px dashed var(--c-borda-2); background: var(--c-fundo); padding: .5rem; }
.logo-amostra img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-amostra.claro { background: var(--c-texto); }
.cores-sug { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.avisos-marca { display: flex; flex-direction: column; gap: .45rem; }
/* a prévia recebe as variáveis do tema NO PRÓPRIO elemento: tudo aqui dentro usa var(--c-*) */
.previa {
  position: relative; overflow: hidden; border-radius: var(--r-g); border: 1px solid var(--c-borda-2); background: var(--c-fundo); color: var(--c-texto);
  display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 420px; font-size: var(--fs-13); isolation: isolate;
}
.previa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 0% 0%, var(--c-brilho-1), transparent 70%), radial-gradient(50% 45% at 100% 100%, var(--c-brilho-2), transparent 70%); }
.pv-lat { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem .4rem; border-right: 1px solid var(--c-borda); }
.pv-lat svg.pv-marca, .pv-lat img { width: 30px; height: 30px; object-fit: contain; margin-bottom: .4rem; }
.pv-ic { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 999px; color: var(--c-texto-3); }
.pv-ic .ic { width: 17px; height: 17px; }
.pv-ic.on { background: var(--c-sup-2); color: var(--c-prim-luz); box-shadow: inset 0 0 0 1px var(--c-borda); }
.pv-main { min-width: 0; display: flex; flex-direction: column; }
.pv-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: 44px; padding: 0 .8rem; border-bottom: 1px solid var(--c-borda); background: var(--c-vidro); }
.pv-topo b { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-15); }
.pv-corpo { padding: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.pv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pv-kpi { padding: .55rem .65rem; border-radius: 12px; background: var(--c-sup); border: 1px solid var(--c-borda); }
.pv-kpi small { display: block; font-weight: 600; font-size: var(--fs-12); color: var(--c-texto-2); }
.pv-kpi b { font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-20); color: var(--c-texto); }
.pv-kpi b.luz { color: var(--c-prim-luz); }
.pv-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.pv-kanban { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.pv-col { padding: .45rem; border-radius: 12px; background: var(--c-sup); border: 1px solid var(--c-borda); display: flex; flex-direction: column; gap: .35rem; }
.pv-col-h { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: var(--fs-12); }
.pv-col-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.pv-card { padding: .45rem .5rem; border-radius: 9px; background: var(--c-sup-2); font-size: var(--fs-12); line-height: 1.3; }
.pv-card small { display: block; color: var(--c-texto-3); font-size: var(--fs-12); }
.pv-chat { padding: .5rem; border-radius: 12px; background: var(--c-sup); border: 1px solid var(--c-borda); display: flex; flex-direction: column; gap: .35rem; }
.pv-bolha { max-width: 85%; padding: .35rem .55rem; border-radius: 10px; font-size: var(--fs-12); line-height: 1.35; }
.pv-in { background: var(--c-bolha-in); align-self: flex-start; border-bottom-left-radius: 3px; }
.pv-out { background: var(--c-bolha-out); align-self: flex-end; border-bottom-right-radius: 3px; }
.pv-nota { background: var(--c-nota); color: var(--c-nota-txt); align-self: stretch; max-width: none; font-size: var(--fs-12); }
.pv-botoes { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.pv-botoes .bt { min-height: 30px; padding: .2rem .8rem; font-size: var(--fs-12); }
.pv-link { color: var(--c-prim-luz); font-weight: 600; font-size: var(--fs-12); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1100px) { .marca-ed { grid-template-columns: minmax(0, 1fr); } .marca-previa-env { position: static; } }
@media (max-width: 480px) { .previa { grid-template-columns: minmax(0, 1fr); } .pv-lat { display: none; } .pv-kpi b { font-size: var(--fs-17); } .pv-dupla { grid-template-columns: minmax(0, 1fr); } }

/* domínios e revendas */
.dns { display: grid; grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); gap: .3rem .8rem; padding: .8rem 1rem; border-radius: var(--r-p); background: var(--c-poco); border: 1px solid var(--c-borda); font-family: var(--f-mono); font-size: var(--fs-13); }
.dns dt { color: var(--c-texto-3); }
.dns dd { overflow-wrap: anywhere; }

/* busca global (Ctrl/⌘+K) e sino */
.busca-g { width: min(640px, calc(100vw - 24px)); }
.busca-g .modal-corpo { padding-top: .2rem; }
.busca-res { display: flex; flex-direction: column; gap: .2rem; max-height: 55dvh; overflow: auto; }
.busca-grupo { margin: .7rem .4rem .2rem; }
.busca-item { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 46px; padding: .4rem .6rem; border-radius: 12px; text-align: left; }
.busca-item > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.busca-item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-item small { color: var(--c-texto-3); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-item[aria-selected="true"], .busca-item:hover { background: var(--c-hover); }
.flut.notifs { width: min(390px, calc(100vw - 16px)); max-width: calc(100vw - 16px); }
.notif-item { display: flex; gap: .7rem; width: 100%; padding: .6rem .5rem; border-radius: 12px; text-align: left; }
.notif-item:hover { background: var(--c-hover); }
.notif-item i { width: 8px; height: 8px; margin-top: .45rem; border-radius: 50%; background: var(--c-prim); flex: none; }
.notif-item.lida i { background: transparent; }
.notif-item > span { min-width: 0; display: flex; flex-direction: column; }
.notif-item b { font-weight: 600; font-size: var(--fs-14); }
.notif-item small { color: var(--c-texto-3); font-size: var(--fs-12); }
.notif-item p { color: var(--c-texto-2); font-size: var(--fs-13); overflow-wrap: anywhere; }

/* ============================================================
   P0-B — editor de marca (complementos), domínio, plano e uso
   ============================================================ */
.img-campo { display: flex; flex-direction: column; gap: .55rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-borda); }
.img-campo:last-of-type { border-bottom: 0; padding-bottom: 0; }
.img-campo-txt { display: flex; flex-direction: column; gap: .1rem; }
.img-campo-txt b { font-weight: 700; font-size: var(--fs-14); }
.logo-amostra.favicon { width: 72px; height: 72px; }
.logo-amostra .fraco { font-size: var(--fs-11); text-align: center; line-height: 1.2; }
.nowrap { white-space: nowrap; }
.previa { container-type: inline-size; }
@container (max-width: 520px) { .pv-dupla { grid-template-columns: minmax(0, 1fr); } }
.cores-sug:empty { display: none; }
.cores-sug { align-items: center; padding: .7rem .8rem; border-radius: var(--r-p); background: var(--c-sup-2); }
.cores-sug .rotulo { margin-right: .3rem; }
.cores-caixa { gap: 1.1rem; }
.cores-caixa:disabled { opacity: .5; }
.cor-campo { display: flex; flex-direction: column; gap: .6rem; }
.marca-acoes { gap: .5rem; }
.marca-espaco { flex: 1 1 auto; }
.marca-estado { text-align: right; }
.pv-logo { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .35rem; }
.pv-logo img, .pv-logo svg { width: 30px; height: 30px; object-fit: contain; }
.pv-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-sec-suave); color: var(--c-sec-luz); font-size: var(--fs-12); font-weight: 800; }
.previa .pilula { min-height: 20px; font-size: var(--fs-12); padding: .05rem .5rem; }
.gaveta .marca-ed { grid-template-columns: minmax(0, 1fr); }
.gaveta .marca-previa-env { position: static; }
@media (max-width: 760px) { .marca-estado { text-align: left; } }

/* domínios */
.dom-item { display: flex; flex-direction: column; gap: .8rem; }
.dom-item .cartao-cab { margin-bottom: 0; align-items: center; }
.dom-tit { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.dom-tit > .ic { width: 22px; height: 22px; color: var(--c-prim-luz); }
.dom-tit > div { display: flex; flex-direction: column; min-width: 0; }
.dom-tit b { font-size: var(--fs-15); overflow-wrap: anywhere; }
.dom-tit small { color: var(--c-texto-3); font-size: var(--fs-12); }
.dom-nota { font-size: var(--fs-13); max-width: 72ch; }
.dns-val { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; }
.dns-val .mono { overflow-wrap: anywhere; }
.bt-icone-p { width: 30px; height: 30px; }
.bt-icone-p .ic { width: 15px; height: 15px; }
.dom-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1rem; align-items: start; }
.dom-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.dom-add input { flex: 1 1 12rem; min-width: 0; min-height: 36px; border-radius: 999px; padding: .35rem .9rem; border: 1px solid var(--c-borda-2); background: var(--c-tinta); font-family: var(--f-mono); font-size: var(--fs-13); }
.dom-linha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-14); }
.dom-linha .ic { width: 16px; height: 16px; color: var(--c-texto-3); }

/* plano e uso */
.plano-cab { display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end;
  background: radial-gradient(80% 120% at 0% 0%, var(--c-prim-suave), transparent 70%), var(--c-sup); }
.plano-tit { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.plano-tit .num-grande { font-size: var(--fs-num-l); }
.plano-lado { align-items: flex-end; }
.plano-storage { display: flex; align-items: center; gap: .45rem; margin-top: 1rem; font-size: var(--fs-13); }
.plano-storage .ic { width: 15px; height: 15px; }
.uso-det { color: var(--c-texto-3); font-size: var(--fs-12); }
@media (max-width: 760px) { .plano-lado { align-items: flex-start; } }

/* admin: revendas e planos */
.adm-filtros-fim { justify-content: flex-end; }
.adm-dica { flex: 1 1 18rem; font-size: var(--fs-13); }
.form-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rev-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.rev-cartao { display: flex; flex-direction: column; gap: 1rem; }
.rev-plat { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: radial-gradient(70% 140% at 0% 0%, var(--c-prim-suave), transparent 70%), var(--c-sup); }
.rev-cab { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.rev-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rev-tit b { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-20); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-tit small { color: var(--c-texto-3); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-logo { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--cor, var(--c-fundo)); border: 1px solid var(--c-borda-2); padding: 6px; }
.rev-logo img, .rev-logo svg { width: 100%; height: 100%; object-fit: contain; }
.rev-cores { display: flex; gap: .35rem; }
.rev-cor { width: 22px; height: 22px; border-radius: 50%; background: var(--cor); box-shadow: inset 0 0 0 1px var(--c-borda-2); }
.rev-pp { font-size: var(--fs-13); }
.plano-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 1rem; align-items: start; }
.plano-cartao.inativo { opacity: .78; }
.plano-cartao .form-grade-3 .campo label { font-size: var(--fs-13); }
@media (max-width: 760px) { .form-grade-3 { grid-template-columns: minmax(0, 1fr); } }

/* busca global (complementos) */
.busca-grande { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 52px; border-radius: 16px; background: var(--c-sup-2); border: 1px solid var(--c-borda-2); }
.busca-grande:focus-within { border-color: var(--c-prim-luz); }
.busca-grande > .ic { width: 20px; height: 20px; color: var(--c-texto-3); }
.busca-grande .busca-campo { flex: 1; min-width: 0; width: auto; min-height: 50px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--fs-17); outline: none; text-overflow: ellipsis; }
.busca-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--c-sup-2); color: var(--c-prim-luz); }
.busca-ic .ic { width: 17px; height: 17px; }
.busca-item mark { background: var(--c-prim-suave); color: var(--c-texto); border-radius: 3px; padding: 0 1px; }
.busca-item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--c-prim-luz); }
.busca-vazio { color: var(--c-texto-3); font-size: var(--fs-14); padding: 1.2rem .4rem; text-align: center; }
.busca-dica { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; color: var(--c-texto-3); font-size: var(--fs-12); padding-top: .4rem; border-top: 1px solid var(--c-borda); }
.busca-dica kbd { font-family: var(--f-mono); font-size: var(--fs-11); min-width: 22px; text-align: center; padding: .05rem .35rem; border-radius: 6px; background: var(--c-sup-2); border: 1px solid var(--c-borda); }
/* plano 1000 (pedido do CRM): no celular some só a dica de TECLADO; a de toque (.busca-dica-toque) continua */
@media (max-width: 760px) { .busca-dica:not(.busca-dica-toque) { display: none; } .busca-g { width: calc(100vw - 16px); } }

/* sino (complementos) */
.notif-cab { padding: .1rem .2rem .3rem; }
.notif-cab h2 { font-size: var(--fs-11); }
.notif-lista { display: flex; flex-direction: column; gap: .15rem; max-height: min(60dvh, 460px); overflow: auto; margin: 0 -.3rem; }
.notif-item { align-items: flex-start; }
.notif-item:focus-visible { outline-offset: -2px; }
.notif-item > span:nth-child(2) { flex: 1; }
.notif-item i { margin-top: .35rem; }
.notif-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--c-sup-2); color: var(--c-prim-luz); }
.notif-ic .ic { width: 16px; height: 16px; }
.notif-item.lida .notif-ic { color: var(--c-texto-3); }
.notif-item.lida b { font-weight: 500; color: var(--c-texto-2); }
.notif-vazio { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .5rem 1rem; color: var(--c-texto-2); font-size: var(--fs-13); }
.notif-vazio .ic { width: 22px; height: 22px; color: var(--c-texto-3); flex: none; }
.notif-vazio b { color: var(--c-texto); }
.sino .badge { pointer-events: none; }

/* Aurora e pontos orbitais: atmosfera viva sem canvas nem carga contínua alta. */
.palco::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -34vmax;
  background:
    conic-gradient(from 155deg at 50% 48%, transparent 0 25%, color-mix(in srgb, var(--c-prim) 15%, transparent) 31%, transparent 43%, color-mix(in srgb, var(--c-sec) 13%, transparent) 53%, transparent 66%),
    radial-gradient(ellipse at 48% 14%, var(--c-brilho-1), transparent 46%);
  filter: blur(74px);
  opacity: .7;
  transform-origin: 50% 50%;
}
.palco::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 9% 18%, color-mix(in srgb, var(--c-texto) 62%, transparent) 99%, transparent),
    radial-gradient(1.2px 1.2px at 21% 74%, color-mix(in srgb, var(--c-prim-luz) 72%, transparent) 99%, transparent),
    radial-gradient(1px 1px at 39% 33%, color-mix(in srgb, var(--c-texto) 58%, transparent) 99%, transparent),
    radial-gradient(1.4px 1.4px at 63% 16%, color-mix(in srgb, var(--c-sec-luz) 68%, transparent) 99%, transparent),
    radial-gradient(1px 1px at 78% 61%, color-mix(in srgb, var(--c-texto) 60%, transparent) 99%, transparent),
    radial-gradient(1.2px 1.2px at 91% 38%, color-mix(in srgb, var(--c-prim-luz) 64%, transparent) 99%, transparent);
  opacity: .45;
}
body.palco-vivo .palco::before { animation: orbitaAurora 48s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform, opacity; }
body.palco-vivo .palco::after { animation: orbitaPontos 16s ease-in-out infinite alternate; will-change: transform, opacity; }
html.aba-oculta .palco i, html.aba-oculta .palco::before, html.aba-oculta .palco::after { animation-play-state: paused; }
@keyframes orbitaAurora {
  0% { transform: translate3d(-1.5%, -1%, 0) rotate(-5deg) scale(.96); opacity: .42; }
  100% { transform: translate3d(1.5%, 1%, 0) rotate(5deg) scale(1.06); opacity: .82; }
}
@keyframes orbitaPontos {
  0% { transform: translate3d(0, 0, 0); opacity: .25; }
  100% { transform: translate3d(0, -8px, 0); opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  body .palco i, body .palco::before, body .palco::after { animation: none; transform: none; will-change: auto; }
}

@media (forced-colors: active) {
  /* alto contraste: a aba marcada precisa se distinguir das outras sem depender de cor de fundo */
  .aba[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ============================================================
   LINGUAGEM VISUAL — contratos da frente A (plano de 01/10/2026)
   Regras deste bloco (travadas em app.teste.mjs): tamanhos de letra só por token (--fs-*) ou em/%,
   nenhum hex, caixa-alta só em .selo-caps, grades com minmax(0, 1fr), movimento sob prefers-reduced-motion.
   ============================================================ */
html[data-produto="crm"] { --c-prod: var(--c-prod-crm); }
html[data-produto="ads"] { --c-prod: var(--c-prod-ads); }
html[data-produto="atendimento"] { --c-prod: var(--c-prod-atend); }

/* tipos de letra: .rotulo (acima), dado técnico, selo, voz da narração e moeda */
.dado { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.selo-caps { font-family: var(--f-corpo); font-weight: 700; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .08em; line-height: 1.2; }
.narr { font-family: var(--f-narr); font-style: italic; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.num-moeda { font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-moeda small, .num-moeda .nm-rs, .num-moeda .nm-cent { font-size: max(.6em, var(--fs-12)); font-weight: 500; letter-spacing: 0; }   /* 60 % do número, mas nunca abaixo do piso de 12 px */
.num-moeda small:first-child, .num-moeda .nm-rs { margin-right: .14em; }

/* movimento com propósito: entrada, assentar e o flash de um número que mudou */
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes assenta { from { transform: scale(1.015); } to { transform: none; } }
@keyframes destaqueFlash { from { background-color: var(--c-prim-suave); } to { background-color: transparent; } }
@keyframes trocaEntra { from { opacity: 0; } to { opacity: 1; } }
.entra { animation: entra 160ms var(--e-out) both; }
.assenta { animation: assenta var(--t-ui) var(--e-out) both; }
.destaque { animation: destaqueFlash 600ms var(--e-out) both; border-radius: var(--r-pp); }
.troca-entra { animation: trocaEntra 120ms linear both; }

/* botão destrutivo: contorno + ícone, nunca o preenchimento da marca */
.bt-contorno-perigo { background: transparent; border-color: var(--c-ruim); color: var(--c-ruim); }
.bt-contorno-perigo:hover:not(:disabled) { background: var(--c-ruim-suave); }
.bt-contorno-perigo[aria-busy="true"]::after { border-color: var(--c-ruim); border-right-color: transparent; }

/* ---- cabeçalho de página (ui.cabecalho) ---- */
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem 1.5rem; flex-wrap: wrap; min-width: 0; margin: .4rem 0 1.4rem; }
.cab-txt { flex: 1 1 18rem; min-width: 0; }
.cab-rotulo { margin-bottom: .3rem; }
.cab-titulo { font-family: var(--f-titulo); word-spacing: var(--ws-d); font-weight: 600; font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.cab-titulo:focus { outline: none; }
.cab-sub { margin-top: .45rem; color: var(--c-texto-2); font-size: var(--fs-corpo); max-width: 68ch; }
.cab-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.cab-n2 { margin: 0 0 1rem; }
.cab-n2 .cab-titulo { font-size: var(--fs-h2); letter-spacing: -.01em; line-height: 1.2; }
.cab-n2 .cab-sub { font-size: var(--fs-peq); }

/* ---- segmentado (ui.segmentado): abas navegam, filtro muda dados; o indicador desliza ---- */
.seg { position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--c-poco); border: 1px solid var(--c-borda); overflow-x: auto; scrollbar-width: none; isolation: isolate; }
.seg::-webkit-scrollbar { display: none; }
.seg-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--seg-w, 0); transform: translateX(var(--seg-x, 0)); border-radius: 999px; background: var(--c-sup); box-shadow: 0 1px 2px var(--c-sombra), inset 0 0 0 1px var(--c-borda); pointer-events: none; opacity: 0; }
.seg-pronto .seg-ind { opacity: 1; }
.seg-anima .seg-ind { transition: transform var(--t-ui) var(--e-out), width var(--t-ui) var(--e-out); }
.seg-op { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .3rem .95rem; border-radius: 999px; white-space: nowrap; color: var(--c-texto-2); font-weight: 600; font-size: var(--fs-peq); transition: color var(--t-ui) var(--e-out); }
.seg-op .ic { width: 15px; height: 15px; }
@media (max-width: 420px) { .seg-op { padding-inline: .7rem; } }   /* 4 abas («Linha do tempo») cabem em 360–375 px */
.seg-op:hover { color: var(--c-texto); }
.seg-op[aria-selected="true"] { color: var(--c-texto); }
.seg-op:focus-visible { outline-offset: -2px; }
.seg-n { font-size: var(--fs-12); color: var(--c-texto-2); }
.seg-op[aria-selected="true"] .seg-n { color: var(--c-texto); }
.seg-filtro .seg-ind { background: var(--c-prim-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-prim) 38%, transparent); }
/* sem JS de medida (ou ainda sem layout) a opção marcada se pinta sozinha */
.seg:not(.seg-pronto) .seg-op[aria-selected="true"] { background: var(--c-sup); box-shadow: 0 1px 2px var(--c-sombra), inset 0 0 0 1px var(--c-borda); }
.seg-filtro:not(.seg-pronto) .seg-op[aria-selected="true"] { background: var(--c-prim-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-prim) 38%, transparent); }
@media (pointer: coarse) { .seg-op { min-height: 44px; } }
@media (forced-colors: active) { .seg-ind { forced-color-adjust: none; background: Highlight; } .seg-op[aria-selected="true"] { color: HighlightText; } }

/* gestos de toque */
.toque-longo { -webkit-touch-callout: none; }
.deslizavel { touch-action: pan-y; will-change: transform; }
.deslizavel.desliza-volta { transition: transform var(--t-ui) var(--e-out); }
.deslizavel[data-armado="1"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-prod) 55%, transparent); }   /* passou do limiar: "solte para acionar" (o único aviso quando o movimento é reduzido) */

/* ---- esqueletos com a forma de cada tela (ui.esqueleto) ---- */
.sk-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem 1.5rem; flex-wrap: wrap; min-width: 0; margin: .4rem 0 1.4rem; }   /* igual ao .cab: no celular a ação cai para a linha de baixo nos dois */
/* mesma geometria do ui.cabecalho (rótulo 13 px × 1,35 + .3rem, título = h1 × 1,1, subtítulo = corpo × 1,5 + .45rem): a troca não desloca nada */
.sk-cab-txt { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; }
.sk-rotulo-l { display: flex; align-items: center; height: calc(var(--fs-peq) * 1.35); margin-bottom: .3rem; }
.sk-rotulo { height: .65rem; width: 6rem; }
.sk-titulo { height: calc(var(--fs-h1) * 1.1); width: min(60%, 22rem); }
.sk-sub-l { display: flex; align-items: center; height: calc(var(--fs-corpo) * 1.5); margin-top: .45rem; }
.sk-sub { height: .8rem; width: min(80%, 30rem); }
.sk-acao { width: 7.5rem; height: 40px; border-radius: 999px; flex: none; }
@media (pointer: coarse) { .sk-acao { height: 44px; } }   /* o botão real tem 44 px no toque */
.sk-pilha { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.sk-grande { min-height: 14rem; }
.sk-linha-ctl { display: flex; gap: .6rem; flex-wrap: wrap; }
.sk-chip { width: 7rem; height: 36px; border-radius: 999px; }
.sk-chip-g { width: 11rem; }
.sk-manchete { padding: 1.2rem; border-radius: var(--r); background: var(--c-sup); border: 1px solid var(--c-borda); display: flex; flex-direction: column; gap: .7rem; }
.sk-manchete .sk-num { height: var(--fs-num-xl); width: min(50%, 14rem); margin-top: 0; }
.sk-chat { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1rem; min-width: 0; }
.sk-chat-lista { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.sk-chat-painel { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: 1rem; border-radius: var(--r); background: var(--c-sup); border: 1px solid var(--c-borda); min-height: 22rem; }
.sk-chat-topo { display: flex; align-items: center; gap: .8rem; }
.sk-bolha { height: 2.6rem; width: 55%; border-radius: 14px; }
.sk-bolha.fim { align-self: flex-end; width: 45%; }
.sk-chat-campo { margin-top: auto; height: 44px; border-radius: 999px; }
.sk-agenda-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.sk-agenda-col { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-radius: var(--r); background: var(--c-sup); border: 1px solid var(--c-borda); min-height: 12rem; }
.sk-agenda-col .sk-card { padding: 0; height: 3.4rem; }
.esqueleto.saindo { opacity: 0; transition: opacity 120ms linear; }
.sk-card .sk-l1, .sk-card .sk-l2 { width: 85%; }
@media (max-width: 760px) {
  .sk-chat { grid-template-columns: minmax(0, 1fr); }
  .sk-chat-painel { display: none; }
  .sk-agenda-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- vazios por tipo (ui.vazio) ---- */
.vazio-orbita { width: 7.5rem; height: 7.5rem; flex: none; overflow: visible; }
.vo-orbita { fill: none; stroke: var(--c-borda-2); stroke-width: 1.5; }
.vo-orbita-2 { stroke-dasharray: 3 4; opacity: .7; }
.vo-planeta { fill: var(--c-prod); }
.vo-sat { fill: var(--c-fundo); stroke: var(--c-borda-2); stroke-width: 1.5; transition: fill var(--t-ui) var(--e-out), stroke var(--t-ui) var(--e-out); }
.vo-sat-on { fill: var(--c-prod); stroke: var(--c-prod); }
.vo-selo { fill: var(--c-ok); }
.vo-selo-v { fill: none; stroke: var(--c-ok-txt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vazio-primeiro, .vazio-em-dia { grid-template-columns: auto minmax(0, 1fr); align-items: center; border-style: solid; }
.vazio-em-dia { background: var(--c-sup); }
.vazio-em-dia .vazio-narr { font-size: var(--fs-h2); line-height: 1.25; color: var(--c-texto); margin: 0; max-width: 40ch; }
.vazio-passos { list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; }
.vazio-passos li { counter-increment: passo; display: flex; align-items: center; gap: .6rem; color: var(--c-texto-2); font-size: var(--fs-peq); }
.vazio-passos li::before { content: counter(passo); display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--c-borda-2); font-size: var(--fs-12); font-weight: 700; color: var(--c-texto-2); }
.vazio-passos li[data-feito="1"] { color: var(--c-texto); }
.vazio-passos li[data-feito="1"]::before { content: "✓"; background: var(--c-prod); border-color: var(--c-prod); color: var(--c-fundo); }
.vazio-sem { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-style: solid; background: transparent; }
.vazio-sem .vazio-linha { color: var(--c-texto-2); font-size: var(--fs-corpo); min-width: 0; }
@media (max-width: 760px) { .vazio-primeiro, .vazio-em-dia { grid-template-columns: minmax(0, 1fr); justify-items: start; } .vazio-orbita { width: 6rem; height: 6rem; } }

/* ---- proteção do texto digitado (modal e gaveta) ---- */
.protege-faixa { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; padding: .75rem 1.2rem; background: var(--c-aten-suave); border-block: 1px solid var(--c-borda); color: var(--c-texto); font-size: var(--fs-14); font-weight: 600; }
.protege-faixa p { flex: 1 1 12rem; min-width: 0; }
.protege-faixa .linha { flex: none; }
.modal:focus, .gaveta:focus { outline: none; }

/* ---- campo com validação ao vivo, máscara e medidor ---- */
.campo[data-estado="erro"] .campo-erro::before { content: "! "; font-weight: 800; }
.campo-estado { font-size: var(--fs-peq); font-weight: 700; min-height: 1em; color: var(--c-ok); }
.campo-estado:empty { display: none; }
.campo-contador { align-self: flex-end; font-size: var(--fs-12); color: var(--c-texto-2); font-variant-numeric: tabular-nums; }
.campo-contador[data-limite="1"] { color: var(--c-aten); font-weight: 700; }
.medidor { display: flex; align-items: center; gap: .6rem; }
.medidor-seg { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.medidor-seg i { display: block; height: 4px; border-radius: 999px; background: var(--c-borda-2); transition: background-color var(--t-ui) var(--e-out); }
.medidor[data-nivel="1"] .medidor-seg i:nth-child(-n+1) { background: var(--c-ruim); }
.medidor[data-nivel="2"] .medidor-seg i:nth-child(-n+2) { background: var(--c-aten); }
.medidor[data-nivel="3"] .medidor-seg i:nth-child(-n+3) { background: var(--c-info); }
.medidor[data-nivel="4"] .medidor-seg i:nth-child(-n+4) { background: var(--c-ok); }
.medidor-txt { font-size: var(--fs-12); font-weight: 600; color: var(--c-texto-2); min-width: 4.5rem; text-align: right; }

/* ÓRBITA · consistência transversal 2026-10-03 */
:root {
  --esp-1: .25rem; --esp-2: .5rem; --esp-3: .75rem; --esp-4: 1rem;
  --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-8: 2rem;
  --foco-largura: 2px; --alvo-toque: 44px;
  --modal-max-w: 560px; --modal-max-h: 860px;
}
.modal.modal-p { --modal-max-w: 440px; }
.modal.modal-g { --modal-max-w: 820px; }
.cartao { padding: clamp(var(--esp-4), 2vw, var(--esp-6)); }
.cartao-cab { gap: var(--esp-3); margin-block-end: var(--esp-4); }
.cab-pag { gap: var(--esp-3) var(--esp-4); margin-block-end: var(--esp-6); }
.titulo-pag, .titulo-sec { text-wrap: balance; }
h1[id], h2[id] { scroll-margin-block-start: calc(var(--topo) + var(--esp-4)); }
.menu-item:focus-visible, .empresa-op:focus-visible {
  outline: var(--foco-largura) solid var(--c-foco); outline-offset: 1px; background: var(--c-hover);
}
.campo:focus-within > label { color: var(--c-prim-luz); }
.campo [aria-invalid="true"], .cor-hex[aria-invalid="true"] { border-width: 2px; border-style: solid; }
.campo-erro { line-height: 1.4; margin-block-start: var(--esp-1); text-wrap: pretty; }
.tabela .dir { font-variant-numeric: tabular-nums; }
.tabela-clicavel tbody tr:focus-visible { background: var(--c-hover); }
.tabela-clicavel tbody tr:active { background: var(--c-sup-2); }
.modal {
  width: min(var(--modal-max-w), calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--esp-4)));
  max-height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--esp-4)), var(--modal-max-h));
}
.modal-corpo { overscroll-behavior: contain; scroll-padding-block: var(--esp-4); }
.toasts { right: max(var(--esp-4), env(safe-area-inset-right)); bottom: max(var(--esp-4), env(safe-area-inset-bottom)); }
button, a, [role="button"], [role="tab"], [role="option"], [role="menuitem"], input, select, textarea, summary {
  touch-action: manipulation; -webkit-tap-highlight-color: var(--c-sel);
}

@media (max-width: 760px) {
  .toasts {
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--barra) + var(--esp-3) + env(safe-area-inset-bottom));
  }
  /* conversa aberta: a barra inferior está oculta e o composer ocupa o fundo — o aviso vai para baixo do topo, nunca sobre o campo */
  html.cv-chat-aberto .toasts { top: calc(var(--topo) + var(--esp-3) + env(safe-area-inset-top)); bottom: auto; }
  /* o aviso FIXO de número caído cobria o cabeçalho da conversa (nome e ações): com a conversa aberta, a pílula do cabeçalho e
     a faixa da central já dizem o mesmo — ele volta ao fechar a conversa */
  html.cv-chat-aberto .toast-fixo { display: none; }
  /* barra de borda a borda (fundo e borda cobrem a tela toda); só os botões saem da área do notch em paisagem */
  .barra { left: 0; right: 0; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
}
@media (max-width: 420px) {
  .modal-rod { display: grid; grid-template-columns: minmax(0, 1fr); }
  .modal-rod .bt { width: 100%; }
}
@media (pointer: coarse) {
  .toast-x, .toast-acao { min-width: var(--alvo-toque); min-height: var(--alvo-toque); }
  .campo-check label, .chip-check, .chip-check span { min-height: var(--alvo-toque); }
}
@media (forced-colors: active) {
  .menu-item:focus-visible, .empresa-op:focus-visible {
    outline-color: Highlight; outline-style: solid; outline-width: var(--foco-largura);
  }
}

/* ============================================================
   PLANO 50 (04/10/2026) — frente A: sistema visual
   Tokens novos (--t-rota, camadas, bordas com alfa), sparkline e rosca com legenda clicável, KPI, dica, ilustrações de vazio,
   esqueletos por tipo, micro-interações, tabelas, utilitários de ritmo, transição de rota, tema escuro afinado, login e foco.
   Mesmas regras do bloco da frente A: só tokens (nenhum hex, nenhum tamanho de letra literal), minmax nas grades,
   movimento sob prefers-reduced-motion, nenhuma transição genérica (cada propriedade é nomeada). Os pontos de quebra usam a sintaxe de intervalo
   (width <= 760px) para não se confundir com os blocos @media antigos que os testes leem por último.
   ============================================================ */
:root {
  --t-rota: 180ms;
  --c-camada-1: var(--c-sup); --c-camada-2: var(--c-sup-2); --c-camada-3: var(--c-sup-3);
  --c-borda-alfa: var(--c-borda); --c-borda-alfa-2: var(--c-borda-2);
  --g-spark-h: 32px;
}
@media (prefers-reduced-motion: reduce) { :root { --t-rota: 0s; } }

/* ---- A1 · sparkline (G.sparkline): 32 px, área suave, último ponto marcado; a cor segue --g (primária) ou data-tendencia ---- */
.g-spark-alvo { display: block; min-width: 0; line-height: 0; }
.g-spark { --g: var(--c-prim-luz); display: block; width: 100%; height: auto; overflow: visible; }
.g-spark[data-tendencia="desce"] { --g: var(--c-texto-2); }   /* queda não é vermelho por si só: o sentido bom depende da métrica (o KPI colore pela variação) */
.g-spark-linha { fill: none; stroke: var(--g); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-spark-area { fill: color-mix(in srgb, var(--g) 14%, transparent); }
.g-spark-fim { fill: var(--g); stroke: var(--c-sup); stroke-width: 2; }
.g-spark.g-anim .g-spark-linha { stroke-dasharray: 1; animation: g-sparkTraco var(--t-dados) var(--e-out) both; }
.g-spark.g-anim .g-spark-area, .g-spark.g-anim .g-spark-fim { animation: g-sparkAparece var(--t-dados) var(--e-out) both; animation-delay: calc(var(--t-dados) * .45); }
@keyframes g-sparkTraco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g-sparkAparece { from { opacity: 0; } }
.g-spark-vazio { display: block; width: 100%; height: var(--h, var(--g-spark-h)); border-bottom: 2px dashed var(--c-borda-2); }

/* ---- A2 · dica dos gráficos (hover + teclado + aria-live), válida mesmo sem o relatorios.css ---- */
.g-caixa { position: relative; min-width: 0; border-radius: var(--r-p); outline-offset: 4px; }
.g-caixa:focus-visible { outline: var(--foco-largura) solid var(--c-foco); }
.g-caixa > .g-dica {
  position: absolute; z-index: 2; top: var(--y, -.25rem); left: 0; transform: translate(var(--x, 0px), -100%); max-width: min(26rem, 100%);
  padding: .5rem .7rem; border-radius: var(--r-p); background: var(--c-pop); border: 1px solid var(--c-borda-2); box-shadow: 0 10px 30px -12px var(--c-sombra);
  font-size: var(--fs-13); line-height: 1.4; color: var(--c-texto); pointer-events: none;
}
.g-hcaixa .g-hitem { transition: opacity var(--t-ui) var(--e-out); border-radius: var(--r-pp); }
.g-hcaixa.g-foco .g-hitem:not(.g-ativa) { opacity: .55; }
.g-hcaixa .g-hitem.g-ativa .g-hnome { color: var(--c-prim-luz); }
.g-calor .g-cal-c { transition: opacity var(--t-ui) var(--e-out); }
.g-calor .g-cal-c.g-ativa { outline: 2px solid var(--c-texto); outline-offset: -1px; }
.g-fconv-taxa { color: var(--c-texto-2); }

/* ---- A3 · rosca com legenda clicável (G.donut) ---- */
.g-marca { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 3px; background: var(--g, var(--c-texto-3)); }
.g-c0 { --g: var(--c-prim-luz); } .g-c1 { --g: var(--c-sec-luz); } .g-c2 { --g: var(--c-aten); } .g-c3 { --g: var(--c-ruim); }
.g-c4 { --g: var(--c-info); } .g-c5 { --g: var(--c-ok); } .g-c6 { --g: var(--c-texto-2); } .g-c7 { --g: color-mix(in srgb, var(--c-prim-luz) 50%, var(--c-sec-luz)); }
/* paleta categórica da rosca nova (dado por categoria nunca veste cor de estado): bronze, azul, verde, âmbar, lilás, verde-azulado, rosa, cinza */
.g-d0 { --g: var(--pal-7); } .g-d1 { --g: var(--pal-0); } .g-d2 { --g: var(--pal-4); } .g-d3 { --g: var(--pal-2); } .g-d4 { --g: var(--pal-9); } .g-d5 { --g: var(--pal-10); } .g-d6 { --g: var(--pal-11); } .g-d7 { --g: var(--pal-6); }
.g-donut-env { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--esp-5); align-items: center; }
.g-donut-caixa { display: grid; place-items: center; min-width: 0; }
.g-donut { width: 100%; max-width: 11rem; height: auto; overflow: visible; }
.g-donut .g-trilho { fill: none; stroke: var(--c-sup-3); }
.g-donut .g-fatia { fill: var(--g, var(--c-prim-luz)); stroke: var(--c-sup); stroke-width: 1; transition: opacity var(--t-ui) var(--e-out); }
.g-donut-caixa.g-foco .g-fatia:not(.g-ativa) { opacity: .45; }
.g-donut .g-fatia.g-ativa { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--g, var(--c-prim-luz)) 60%, transparent)); }
.g-donut-n { fill: var(--c-texto); font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-25); }
.g-donut-l { fill: var(--c-texto-3); font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-11); }
.g-donut.g-anim .g-fatia { transform-origin: 100px 100px; animation: g-donutGira var(--t-dados) var(--e-out) both; animation-delay: calc(var(--i, 0) * var(--escada) * 2); }
@keyframes g-donutGira { from { opacity: 0; transform: rotate(-12deg) scale(.92); } }
.g-donut-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.g-donut-op {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .1rem .55rem; align-items: center; width: 100%; min-height: 36px; padding: .3rem .55rem;
  border-radius: var(--r-pp); text-align: left; color: var(--c-texto); font-size: var(--fs-14); transition: background-color var(--t-ui) var(--e-out), opacity var(--t-ui) var(--e-out);
}
.g-donut-op:hover, .g-donut-op.g-ativa { background: var(--c-hover); }
.g-donut-op:focus-visible { outline: var(--foco-largura) solid var(--c-foco); outline-offset: 1px; }
.g-donut-op .g-rl-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-donut-op b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.g-donut-op small { grid-column: 2 / -1; color: var(--c-texto-3); font-size: var(--fs-12); }
.g-donut-op[aria-pressed="false"] { opacity: .5; }
.g-donut-op[aria-pressed="false"] .g-rl-nome { text-decoration: line-through; }
.g-donut-op[aria-pressed="false"] .g-marca { background: transparent; box-shadow: inset 0 0 0 2px var(--c-borda-2); }
@media (any-pointer: coarse) { .g-donut-op { min-height: var(--alvo-toque); } }
@media (width <= 760px) { .g-donut-env { grid-template-columns: minmax(0, 1fr); justify-items: center; } .g-donut-leg { width: 100%; } }

/* ---- A4 · KPI (ui.kpi): número em Plex, seta semântica, sparkline opcional, ajuda ---- */
.kpis { --kpi-col: minmax(min(100%, 11rem), 1fr); display: grid; grid-template-columns: repeat(auto-fit, var(--kpi-col)); gap: var(--esp-4); }   /* colunas de 11 rem que se encaixam (a trilha fica num token para a grade não levar 1fr solto) */
.kpi {
  position: relative; display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-4) var(--esp-5); border-radius: var(--r);
  background: var(--c-sup); border: 1px solid var(--c-borda); color: var(--c-texto); text-align: left;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-sombra) 42%, transparent), 0 14px 28px -22px var(--c-sombra);
}
button.kpi { cursor: pointer; width: 100%; font: inherit; transition: border-color var(--t-ui) var(--e-out), transform var(--t-micro) var(--e-out); }
button.kpi:hover { border-color: var(--c-prim-luz); }
button.kpi:active { transform: scale(.99); }
.kpi-clicavel:focus-visible { outline: var(--foco-largura) solid var(--c-foco); outline-offset: 2px; }
.kpi-rot { display: flex; align-items: center; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.kpi-ajuda { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; color: var(--c-texto-3); cursor: help; }
.kpi-ajuda .ic { width: 13px; height: 13px; }
.kpi-ajuda[tabindex]:hover, .kpi-ajuda.com-dica { color: var(--c-texto); }
.kpi-ajuda:focus-visible { outline: var(--foco-largura) solid var(--c-foco); outline-offset: 2px; }
@media (any-pointer: coarse) { .kpi-ajuda[tabindex]::before { content: ""; position: absolute; inset: calc((var(--alvo-toque) - 18px) / -2); } }   /* 44 px de alvo no toque sem mudar o desenho */
.kpi-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); align-items: end; }
.kpi-com-serie .kpi-corpo { grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 42%); gap: var(--esp-3); }
.kpi-num { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.kpi-valor { font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-num-l); letter-spacing: -.03em; line-height: 1; color: var(--c-texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-vazio .kpi-valor { color: var(--c-texto-3); }
.kpi-destaque .kpi-valor { color: var(--c-prim-luz); }
.kpi-var { display: inline-flex; align-items: center; gap: .2rem; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-12); color: var(--c-texto-2); font-variant-numeric: tabular-nums; }
.kpi-seta { font-weight: 700; }
.kpi-var-bom { color: var(--c-ok); }
.kpi-var-ruim { color: var(--c-ruim); }
.kpi-var-neutra { color: var(--c-texto-3); }
.kpi-spark { min-width: 0; align-self: end; }
.kpi:has(.kpi-var-bom) .g-spark { --g: var(--c-ok); }     /* a linha herda o sentido da variação: verde quando foi bom, vermelho quando foi ruim */
.kpi:has(.kpi-var-ruim) .g-spark { --g: var(--c-ruim); }
@media (width >= 1100px) { .kpis, .grade-2, .grade-3 { gap: var(--esp-5); } }
@media (width <= 760px) { .kpi { padding: var(--esp-3) var(--esp-4); } .kpi-valor { font-size: var(--fs-num-m); } .kpis { gap: var(--esp-3); } }
@media (width <= 400px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-com-serie .kpi-corpo { grid-template-columns: minmax(0, 1fr); } }

/* ---- A10 · dica genérica (ui.dica): uma caixa role=tooltip para a página, acima de qualquer diálogo ---- */
.dica {
  position: fixed; z-index: 120; max-width: min(22rem, calc(100vw - 16px)); padding: .45rem .7rem; border-radius: var(--r-pp);
  background: var(--c-texto); color: var(--c-fundo); font-size: var(--fs-13); font-weight: 500; line-height: 1.35; text-wrap: pretty;
  pointer-events: none; box-shadow: 0 10px 30px -12px var(--c-sombra); animation: dicaEntra var(--t-micro) var(--e-out) both;
}
.dica::after { content: ""; position: absolute; left: var(--seta-x, 50%); top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: inherit; transform: rotate(45deg); }
.dica[data-lado="baixo"]::after { top: auto; bottom: 100%; margin: 0 0 -4px -4px; }
@keyframes dicaEntra { from { opacity: 0; transform: translateY(2px); } }

/* ---- A5 · ilustrações do vazio por tema (ui.vazio {tema}) ---- */
.vazio-il { width: 10rem; max-width: 100%; height: auto; flex: none; color: var(--c-texto-3); overflow: visible; }
.vazio-tema { grid-template-columns: auto minmax(0, 1fr); align-items: center; border-style: solid; }
.vz-a { fill: var(--c-prim-suave); stroke: var(--c-borda-2); stroke-width: 1.5; }
.vz-b { fill: var(--c-sup-2); stroke: var(--c-borda-2); stroke-width: 1.5; }
.vz-col { fill: var(--c-sup); stroke: var(--c-borda-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vz-card { fill: var(--c-sup-2); stroke: var(--c-borda-2); stroke-width: 1.2; }
.vz-card.vz-acento { fill: var(--c-prim-suave); stroke: var(--c-prod); }
.vz-pt { fill: var(--c-texto-3); }
.vz-pt.vz-acento { fill: var(--c-prod); }
.vz-pt.vz-fraco { fill: var(--c-borda-2); }
.vz-tr { fill: none; stroke: var(--c-borda-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz-tr.vz-fraco { stroke: var(--c-borda); }
.vz-tr.vz-curta { opacity: .7; }
.vz-grossa { stroke: var(--c-texto-3); stroke-width: 5; stroke-linecap: round; }
.vz-pontilhada { stroke-dasharray: 3 4; }
.vz-acento-tr { fill: none; stroke: var(--c-prod); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vazio-sem-il { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3) var(--esp-4); }
.vazio-sem-il .vazio-il { width: 5rem; }
@media (width <= 760px) {
  .vazio-tema { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .vazio-il { width: 8rem; }
  .vazio-sem-il { grid-template-columns: auto minmax(0, 1fr); }
  .vazio-sem-il .linha { grid-column: 1 / -1; }
}

/* ---- A6 · esqueletos por tipo: cartão, gráfico, KPI ---- */
.sk-um { max-width: 40rem; }
.sk-l2-curta { width: 24%; }
.sk-grafico { display: flex; flex-direction: column; gap: var(--esp-3); }
.sk-gr-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; align-items: end; height: 9rem; padding-top: var(--esp-2); border-bottom: 1px solid var(--c-borda); }
.sk-gr-b { height: var(--h, 50%); border-radius: 6px 6px 2px 2px; }
.sk-gr-eixo { display: flex; justify-content: space-between; }
.sk-gr-rot { height: 9px; width: 3rem; }
.sk-kpi { display: flex; flex-direction: column; gap: .4rem; }
.sk-kpi .sk-num { margin-top: .3rem; height: var(--fs-num-l); }
.sk-spark { height: 28px; width: 100%; margin-top: .4rem; border-radius: 6px; opacity: .6; }

/* ---- A7 · micro-interações: pressão do primário, interruptor com mola e aro, check de sucesso ---- */
.bt-prim:active:not(:disabled) { transform: scale(.98); }
.campo-switch .check-marca::after { transition: transform var(--t-ui) var(--e-gaveta), background-color var(--t-ui) var(--e-out), width var(--t-micro) var(--e-out); }
.campo-switch label:active .check-marca::after { width: 20px; }
.campo-switch input:checked + .check-marca { animation: switchLiga var(--t-move) var(--e-out); }
@keyframes switchLiga { 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-prim) 22%, transparent); } }
.tem-ok-check { position: relative; }
.ok-check { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: inherit; background: var(--c-ok-suave); color: var(--c-ok); pointer-events: none; animation: aparece var(--t-micro) var(--e-out) both; }
.ok-check svg { width: 22px; height: 22px; overflow: visible; }
.ok-check path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: okTraco 300ms var(--e-out) forwards; }
@keyframes okTraco { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ok-check path { animation: none; stroke-dashoffset: 0; } }

/* ---- A8 · tabelas: zebra sutil, cabeçalho preso, linha sob o mouse, seta de ordenação ---- */
.tabela thead th { position: sticky; top: 0; z-index: 1; }
.th-ord .ic { transition: opacity var(--t-ui) var(--e-out); }
.tabela th[aria-sort="ascending"] .th-ord .ic, .tabela th[aria-sort="descending"] .th-ord .ic { display: none; }
.tabela th[aria-sort="ascending"] .th-ord::after, .tabela th[aria-sort="descending"] .th-ord::after { font-family: var(--f-mono); font-weight: 700; color: var(--c-prim-luz); line-height: 1; }
.tabela th[aria-sort="ascending"] .th-ord::after { content: "↑"; }
.tabela th[aria-sort="descending"] .th-ord::after { content: "↓"; }
.tabela th[aria-sort="none"] .th-ord:hover .ic { opacity: 1; }
.tabela td.dir { font-variant-numeric: tabular-nums; }
.tabela-env, .modal-corpo, .gaveta-corpo, .flut, .busca-res, .g-tabela-caixa, .g-cal-rolagem { scrollbar-width: thin; scrollbar-color: var(--c-borda-2) transparent; }
@media (width >= 761px) {
  .tabela tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--c-texto) 2.5%, transparent); }
  .tabela tbody tr:hover > td { background: var(--c-tinta); }
  .tabela-env.tabela-rolavel { max-height: min(72dvh, 60rem); overflow: auto; }   /* só com ui.tabela({rolagem: true}): rola por dentro com o cabeçalho à vista */
}
@media print { .tabela-env, .tabela-env.tabela-rolavel { max-height: none; overflow: visible; } }   /* no papel a tabela sai inteira, sem corte */

/* ---- A9 · pílulas semânticas (variantes) e avatar ---- */
.pilula-p { min-height: 20px; padding: .05rem .5rem; font-size: var(--fs-11); }
.pilula-canal .ic, .pilula-origem .ic { width: 12px; height: 12px; }
.pilula-prio { display: inline-flex; align-items: flex-end; gap: 1.5px; height: .75em; }
.pilula-prio b { display: block; width: 3px; border-radius: 1px; background: currentColor; opacity: .3; }
.pilula-prio b:nth-child(1) { height: 40%; } .pilula-prio b:nth-child(2) { height: 70%; } .pilula-prio b:nth-child(3) { height: 100%; }
.pilula-prio[data-n="1"] b:nth-child(-n+1), .pilula-prio[data-n="2"] b:nth-child(-n+2), .pilula-prio[data-n="3"] b:nth-child(-n+3) { opacity: 1; }
.pilula-prioridade.pilula-ok::before, .pilula-prioridade.pilula-aten::before, .pilula-prioridade.pilula-ruim::before, .pilula-prioridade.pilula-info::before { content: none; }   /* o glifo é a escadinha */
.avatar-p { width: 24px; height: 24px; font-size: var(--fs-11); }
.avatar:has(.avatar-estado) { overflow: visible; }
.avatar:has(.avatar-estado) img { border-radius: 50%; }
.avatar-estado { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-texto-3); box-shadow: 0 0 0 2px var(--c-sup); }
.avatar-online { background: var(--c-ok); }
.avatar-ausente { background: var(--c-aten); }
.avatar-ocupado { background: var(--c-ruim); }

/* ---- A11 · ritmo vertical: utilitários de espaço (só tokens) e ajustes de cabeçalho → conteúdo ---- */
.m-cima-0 { margin-block-start: 0 !important; } .m-cima-1 { margin-block-start: var(--esp-1) !important; } .m-cima-2 { margin-block-start: var(--esp-2) !important; } .m-cima-3 { margin-block-start: var(--esp-3) !important; }
.m-cima-4 { margin-block-start: var(--esp-4) !important; } .m-cima-5 { margin-block-start: var(--esp-5) !important; } .m-cima-6 { margin-block-start: var(--esp-6) !important; } .m-cima-8 { margin-block-start: var(--esp-8) !important; }
.m-baixo-0 { margin-block-end: 0 !important; } .m-baixo-1 { margin-block-end: var(--esp-1) !important; } .m-baixo-2 { margin-block-end: var(--esp-2) !important; } .m-baixo-3 { margin-block-end: var(--esp-3) !important; }
.m-baixo-4 { margin-block-end: var(--esp-4) !important; } .m-baixo-5 { margin-block-end: var(--esp-5) !important; } .m-baixo-6 { margin-block-end: var(--esp-6) !important; } .m-baixo-8 { margin-block-end: var(--esp-8) !important; }
.vao-1 { gap: var(--esp-1) !important; } .vao-2 { gap: var(--esp-2) !important; } .vao-3 { gap: var(--esp-3) !important; } .vao-4 { gap: var(--esp-4) !important; } .vao-5 { gap: var(--esp-5) !important; } .vao-6 { gap: var(--esp-6) !important; } .vao-8 { gap: var(--esp-8) !important; }
.pilha-pp { gap: var(--esp-2); }
.pilha-g { gap: var(--esp-6); }
.secao { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.secao + .secao { margin-block-start: var(--esp-6); }
.largura-leitura { max-width: 68ch; }
.camada-2 { background: var(--c-camada-2); border-color: var(--c-borda-alfa); }
.camada-3 { background: var(--c-camada-3); border-color: var(--c-borda-alfa); }
.cab { margin: var(--esp-2) 0 var(--esp-6); gap: var(--esp-3) var(--esp-6); }
.cab-n2 { margin: 0 0 var(--esp-4); }
.cartao h2 + .sub, .cartao h3 + .sub, .cab-titulo + .cab-sub { margin-top: var(--esp-1); }
.vista { padding-block: var(--esp-6) var(--esp-8); }
@media (width <= 760px) { .vista { padding-block: var(--esp-4) var(--esp-8); } .cab { margin-block-end: var(--esp-5); } }

/* ---- A12 · transição de rota: fade + 6 px em 180 ms; fill backwards (nenhum transform fica no .vista depois) ---- */
.vista.rota-entra { animation: rotaEntra var(--t-rota) var(--e-out) backwards; }
@keyframes rotaEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- A13 · tema escuro afinado: superfícies em 3 camadas, bordas de 1 px com alfa, sombras viram bordas ---- */
html[data-esquema="escuro"] { --c-borda-alfa: color-mix(in srgb, var(--c-texto) 12%, transparent); --c-borda-alfa-2: color-mix(in srgb, var(--c-texto) 20%, transparent); }
html[data-esquema="escuro"] .cartao, html[data-esquema="escuro"] .kpi, html[data-esquema="escuro"] .tabela-env, html[data-esquema="escuro"] .sk-item, html[data-esquema="escuro"] .sk-cartao,
html[data-esquema="escuro"] .vazio, html[data-esquema="escuro"] .sk-col, html[data-esquema="escuro"] .sk-tabela { box-shadow: none; border-color: var(--c-borda-alfa); }
html[data-esquema="escuro"] .cartao .cartao, html[data-esquema="escuro"] .cartao .kpi { background: var(--c-camada-2); }
html[data-esquema="escuro"] .cartao .cartao .cartao, html[data-esquema="escuro"] .cartao .camada-2 { background: var(--c-camada-3); }
html[data-esquema="escuro"] .modal, html[data-esquema="escuro"] .gaveta, html[data-esquema="escuro"] .menu-pop, html[data-esquema="escuro"] .flut, html[data-esquema="escuro"] .toast {
  box-shadow: 0 0 0 1px var(--c-borda-alfa-2), 0 24px 60px -24px var(--c-sombra); border-color: var(--c-borda-alfa-2);
}
html[data-esquema="escuro"] .topo, html[data-esquema="escuro"] .lateral, html[data-esquema="escuro"] .barra, html[data-esquema="escuro"] .faixa, html[data-esquema="escuro"] .lat-pe,
html[data-esquema="escuro"] .modal-rod, html[data-esquema="escuro"] .gaveta-cab { border-color: var(--c-borda-alfa); }
html[data-esquema="escuro"] .tabela th, html[data-esquema="escuro"] .tabela td, html[data-esquema="escuro"] .divisor { border-color: var(--c-borda-alfa); }
html[data-esquema="escuro"] .campo input:not([type=checkbox]):not([type=radio]), html[data-esquema="escuro"] .campo select, html[data-esquema="escuro"] .campo textarea,
html[data-esquema="escuro"] .sel, html[data-esquema="escuro"] .busca input { border-color: var(--c-borda-alfa-2); }
html[data-esquema="escuro"] .seg { border-color: var(--c-borda-alfa); }
html[data-esquema="escuro"] .seg-ind { box-shadow: inset 0 0 0 1px var(--c-borda-alfa-2); }
html[data-esquema="escuro"] .g-caixa > .g-dica { box-shadow: 0 0 0 1px var(--c-borda-alfa-2); }
html[data-esquema="escuro"] .entrar-cartao { box-shadow: 0 0 0 1px var(--c-borda-alfa-2), 0 50px 100px -40px var(--c-sombra); }

/* ---- A14 · login: palco editorial (gradiente discreto + régua + kicker), botão com estado de carregamento visível ---- */
.entrar { position: relative; isolation: isolate; }
.entrar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 12% 18%, var(--c-brilho-1), transparent 70%), radial-gradient(55% 50% at 88% 86%, var(--c-brilho-2), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c-sup) 22%, transparent), transparent 55%);
}
.entrar-regua { display: flex; align-items: center; gap: .7rem; color: var(--c-texto-3); margin: -.4rem 0 -.6rem; }
.entrar-regua i { display: block; width: 2.5rem; height: 1px; background: var(--c-prim-luz); }
.entrar-regua .selo-caps { color: var(--c-texto-3); }
.entrar-kicker { color: var(--c-prim-luz); margin-bottom: .45rem; }
@media (width >= 901px) { .entrar-cartao h1 { font-size: var(--fs-31); } }
.bt-carrega[aria-busy="true"] { color: var(--c-prim-txt) !important; padding-left: 2.6rem; }
.bt-carrega[aria-busy="true"]::after { left: 1.1rem; margin-left: 0; }
.bt-carrega[aria-busy="true"] .bt-rotulo { opacity: .85; }

/* ---- A15 · foco visível consistente, skip-link e cartões clicáveis ---- */
.pular { font-size: var(--fs-14); min-height: var(--alvo-toque); display: inline-flex; align-items: center; }
.pular:focus-visible { outline: var(--foco-largura) solid var(--c-foco); outline-offset: 3px; box-shadow: 0 12px 30px -12px var(--c-sombra); }
.cartao-clicavel, a.cartao, button.cartao, .cartao[tabindex="0"] { cursor: pointer; transition: border-color var(--t-ui) var(--e-out), transform var(--t-micro) var(--e-out), box-shadow var(--t-ui) var(--e-out); }
:is(.cartao-clicavel, .cartao[tabindex="0"], a.cartao, button.cartao):hover { border-color: var(--c-prim-luz); box-shadow: 0 1px 2px color-mix(in srgb, var(--c-sombra) 42%, transparent), 0 18px 32px -22px var(--c-sombra); }   /* sem hover-lift (M10): só a borda e a sombra respondem */
:is(.cartao-clicavel, .cartao[tabindex="0"], a.cartao, button.cartao):active { transform: scale(.995); }
:is(.cartao-clicavel, .cartao[tabindex="0"], a.cartao, button.cartao):focus-visible { outline: var(--foco-largura) solid var(--c-foco); outline-offset: 2px; }
.th-ord:focus-visible, .toast-x:focus-visible, .toast-acao:focus-visible, .etiq-x:focus-visible, .cor-op:focus-visible, .campo-olho:focus-visible { outline: var(--foco-largura) solid var(--c-foco); outline-offset: 2px; }

/* ============================================================
   PLANO 100 (08/10/2026) — frente A: sistema e casca
   A12 selo «estimado» do KPI (decisão 5) · A10 toast fixo e tipo «aten» (número de WhatsApp caído) · A9 «Esqueci a senha» em destaque e
   contagem do bloqueio · A11 diálogo a 360 px (o mini-calendário da Agenda chega a 44 px). Mesmas regras do bloco do plano 50.
   ============================================================ */
/* ---- A12 · KPI estimado: selo no rótulo, «≈» antes do número; a ajuda explica (ui.kpi {estimativa: true}) ---- */
.kpi-est { flex: none; font-size: var(--fs-11); font-weight: 700; line-height: 1.3; padding: 0 .4rem; border-radius: 999px; color: var(--c-aten); border: 1px dashed currentColor; }
.kpi-estimado .kpi-valor::before { content: "≈"; margin-inline-end: .18em; font-size: .72em; color: var(--c-texto-3); }
/* ---- A10 · toast fixo (dura enquanto o estado durar) e tipo atenção ---- */
.toast-aten { border-color: var(--c-aten); }
.toast-aten > .ic { color: var(--c-aten); }
.toast-fixo { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-aten) 35%, transparent), 0 20px 50px -18px var(--c-sombra); }
.toast-fixo p { font-weight: 600; }
/* ---- A9 · login: «Esqueci a senha» em destaque depois da 3ª falha; contagem regressiva do bloqueio ---- */
.entrar-rodape .link.entrar-destaque { font-weight: 700; color: var(--c-prim-luz); padding: .35rem .8rem; border-radius: 999px; background: var(--c-prim-suave); min-height: var(--alvo-toque); display: inline-flex; align-items: center; }
.entrar-contagem { font-variant-numeric: tabular-nums; color: var(--c-texto-2); }
/* ---- A11 · diálogo em 360 px: menos respiro lateral (344 px de janela − 24 px = 320 px úteis: 7 colunas de 45 px) ---- */
@media (width <= 360px) {
  .modal.modal-m, .modal.modal-p, .modal.modal-g { width: calc(100vw - var(--esp-2)); max-width: calc(100vw - var(--esp-2)); }   /* o UA limita <dialog> a 100% − 6px − 2em */
  .modal-corpo, .modal-cab, .modal-rod { padding-inline: var(--esp-3); }
}
/* ---- A12 · o selo «estimado» quebra para a linha de baixo em cartão estreito (sem ele o rótulo quebrava letra a letra a 390 px) ---- */
.kpi-estimado .kpi-rot { flex-wrap: wrap; row-gap: var(--esp-1); }
/* ---- toque: o × da etiqueta ganha 44 px de área sem mudar de tamanho (o «i» do KPI já tem, plano 50) ---- */
@media (any-pointer: coarse) {
  .etiq-x { position: relative; }
  .etiq-x::before { content: ""; position: absolute; inset: calc((var(--alvo-toque) - 18px) / -2); }
}

/* ============================================================
   Plano 1000 · frente sis (lote sis-1)
   ============================================================ */
/* AS-106: amostras de cor com 44 px no toque (eram 28 px); a grade quebra linha */
@media (any-pointer: coarse) {
  .cor-paleta { gap: var(--esp-2); }
  .cor-op { width: var(--alvo-toque); height: var(--alvo-toque); }
}
/* AS-213: o «i» de ajuda do KPI com 24 px de área no mouse (o desenho continua com 18 px); no toque já são 44 px (plano 50) */
.kpi-ajuda[tabindex]::before { content: ""; position: absolute; inset: -3px; }
/* AS-214: abas e segmentados cortados pela largura esmaecem o lado que continua (data-corte, posto pelo ui.segmentado) */
.seg[data-corte="dir"] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
.seg[data-corte="esq"] { -webkit-mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); }
.seg[data-corte="ambos"] { -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); }
/* AS-194: «Caps Lock ligado» junto ao campo de senha */
.campo-caps { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--c-aten); font-size: var(--fs-13); font-weight: 600; margin-block-start: var(--esp-1); }
.campo-caps .ic { width: 14px; height: 14px; }
/* AS-209: sem internet, os botões de salvar avisam antes do clique (o clique continua dando a frase honesta) */
html.sem-internet [data-sem-rede] { opacity: .6; cursor: not-allowed; }
/* AS-243: ponto vermelho em Conversas enquanto um número de WhatsApp estiver desconectado */
.canal-ponto { position: absolute; top: 6px; left: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-ruim); box-shadow: 0 0 0 2px var(--c-fundo); }
.barra-b .canal-ponto { top: 6px; left: calc(50% + 6px); }
/* AS-254: sinais por empresa no seletor (número caído, teste acabando, pausada) */
.empresa-sinais { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-top: 2px; }
/* AS-186/187: sino com filtro, dias e «Carregar mais»; o texto sem destino abre no próprio item */
.notifs .seg { align-self: flex-start; }
.notif-dia { padding: var(--esp-1) var(--esp-2) 0; font-size: var(--fs-12); color: var(--c-texto-3); }
.notif-item[aria-expanded="false"] p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-mais { align-self: center; }
/* AS-274: faixa da demonstração local em uma linha no celular */
.faixa-demo-local .demo-curto { display: none; }
@media (width <= 760px) {
  .faixa-demo-local { padding-block: var(--esp-1); }
  .faixa-demo-local .demo-longo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .faixa-demo-local .demo-curto { display: inline; }
}
/* AS-292: «Sobre este app» */
.sobre-app { margin: 0; padding: var(--esp-3); border-radius: var(--r-p); background: var(--c-poco); border: 1px solid var(--c-borda); font-size: var(--fs-13); white-space: pre-wrap; overflow-wrap: anywhere; }
/* pedido de Relatórios: a conversão com explicação ganha o sublinhado pontilhado de «tem dica» */
.g-fconv-dica { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }