/* =============================================================================
   01 · PRIMITIVOS DO TAILWIND — tailwindcss 4.3.3, theme.css, sem edição.
   Só valores literais: token com função de build (--theme, --spacing, --alpha)
   é rejeitado na extração — em folha crua ele invalida a declaração inteira.
   ============================================================================= */
:root{
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
  --color-zinc-50: oklch(98.5% 0 none);
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-200: oklch(92% 0.004 286.32);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-500: oklch(55.2% 0.016 285.938);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-800: oklch(27.4% 0.006 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.005 285.823);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* =============================================================================
   02 · SPIDEA — marca, papéis e receitas. Implementa a UI_SPEC.
   Idioma Tailwind v4: outline com offset negativo, nunca borda nem inset-shadow.
   ============================================================================= */

/* ---------- MARCA — Manual da marca (não é escala do Tailwind) -------------- */
:root{
  --marca-950:#141F44; --marca-800:#24366E; --marca-500:#3D6CAE;
  --marca-300:#74CDFE; --marca-100:#E1EAF6; --marca-50:#F1F5FB;
}

/* ---------- DELTAS DE DENSIDADE — lista fechada (UI_SPEC §3) ---------------- */
:root{
  --d-control-h:2.25rem;      /* 36px · Tailwind ~38            */
  --d-control-h-sm:1.875rem;  /* 30px                            */
  --d-cell-y:.625rem;         /* 10px · Tailwind Plus 16 (py-4)  */
  --d-cell-x:.875rem;         /* 14px                            */
  --d-text-ui:.84375rem;      /* 13,5px · Tailwind 14 (text-sm)  */
  --d-text-cell:.8125rem;     /* 13px                            */
}

/* ---------- SIMULAÇÃO DE SUPORTE ------------------------------------------- */
/* Estes dois NÃO seguem o tema: eles representam o suporte físico onde a marca
   vai ser aplicada — a folha de papel e a TV da sala de espera. Uma prévia de
   logo que muda de fundo junto com o sistema não mostra nada. */
:root{ --papel-branco:#fff; --papel-escuro:#111827; }
/* Destaque sobre o papel: o campo que a leitura de documento reconheceu e o
   que ela reconheceu com dúvida. Também não seguem o tema — eles são tinta
   sobre a foto do documento, que é branca em qualquer modo. */
:root{ --papel-lido:rgba(59,130,246,.16); --papel-duvida:rgba(245,158,11,.22); }

/* ---------- PAPÉIS · CLARO -------------------------------------------------- */
:root{
  --sup-pagina:var(--color-zinc-50); --sup-cartao:#fff;
  --sup-rebaixada:var(--color-zinc-100); --sup-selecionada:var(--marca-50);
  --sup-hover:var(--color-zinc-50);
  /* o apagado precisa passar em 4,5:1 — ele carrega legenda, contador e data,
     e nem toda informação de apoio é dispensável. Ele sobe para o zinc-500 e o
     fraco desce para o zinc-600, para a hierarquia entre os dois continuar
     existindo em vez de virar dois cinzas quase iguais. */
  --txt-forte:var(--color-zinc-900); --txt-fraco:var(--color-zinc-600);
  --txt-apagado:var(--color-zinc-500); --txt-sobre-acao:#fff; --txt-marca:var(--marca-800);
  --txt-acao-linha:var(--color-zinc-600);          /* ícone de ação em repouso */
  --linha-fina:var(--color-zinc-200); --linha:var(--color-zinc-300);
  --linha-forte:var(--color-zinc-400); --linha-cartao:rgb(24 24 27 / .06);
  --acao:var(--marca-500); --foco:var(--marca-500);
  --ok:var(--color-green-700); --ok-fundo:var(--color-green-50);
  --ok-linha:var(--color-green-200); --ok-icone:var(--color-green-600);
  --av:var(--color-amber-700); --av-fundo:var(--color-amber-50);
  --av-linha:var(--color-amber-200); --av-icone:var(--color-amber-500);
  --er:var(--color-red-700); --er-fundo:var(--color-red-50);
  --er-linha:var(--color-red-200); --er-icone:var(--color-red-500);
  --er-texto:var(--color-red-900);
  --veu:rgb(9 9 11 / .40); --sombra-janela:0 .5rem 1.625rem rgb(0 0 0 / .10);
}
.tema-escuro{
  color:var(--txt-forte); background:var(--sup-pagina);   /* reafirma o herdado */
  --sup-pagina:#0C1224; --sup-cartao:#141C33; --sup-rebaixada:#101728;
  --sup-selecionada:rgb(61 108 174 / .20); --sup-hover:rgb(255 255 255 / .03);
  --txt-forte:#E9EDF7; --txt-fraco:#A7B3D0; --txt-apagado:#7B87AA;
  --txt-sobre-acao:#fff; --txt-marca:var(--marca-300); --txt-acao-linha:#A6B2CE;
  --linha-fina:#26314F; --linha:#2E3A5C; --linha-forte:#3D4B70;
  --linha-cartao:rgb(255 255 255 / .09);
  --acao:var(--marca-500); --foco:var(--marca-300);
  --ok:var(--color-green-400); --ok-fundo:rgb(74 222 128 / .12);
  --ok-linha:rgb(74 222 128 / .28); --ok-icone:var(--color-green-400);
  --av:var(--color-amber-400); --av-fundo:rgb(251 191 36 / .12);
  --av-linha:rgb(251 191 36 / .28); --av-icone:var(--color-amber-400);
  --er:var(--color-red-400); --er-fundo:rgb(248 113 113 / .12);
  --er-linha:rgb(248 113 113 / .30); --er-icone:var(--color-red-400);
  --er-texto:var(--color-red-300);
  --veu:rgb(4 6 14 / .60); --sombra-janela:0 .5rem 1.625rem rgb(0 0 0 / .45);
}

/* ---------- BASE ------------------------------------------------------------ */
*{box-sizing:border-box}
body{margin:0;background:var(--sup-pagina);color:var(--txt-forte);
  font-family:Inter,var(--font-sans);font-size:var(--d-text-ui);line-height:1.45;
  -webkit-font-smoothing:antialiased}
a{color:var(--acao);text-decoration:none;cursor:pointer} a:hover{opacity:.85}
svg{display:block;flex-shrink:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
h1{margin:0;font-size:1.25rem;font-weight:var(--font-weight-semibold);letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums}
.sec{font-size:.65625rem;font-weight:var(--font-weight-semibold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-fraco)}
.note,.muted{font-size:.78125rem;color:var(--txt-fraco)}

/* ---------- CARTÃO ---------------------------------------------------------- */
.card{background:var(--sup-cartao);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.card+.card{margin-top:1rem}
.card>h3{margin:0;padding:.9375rem 1.125rem 0;font-size:.875rem;font-weight:var(--font-weight-semibold)}
.card>p.desc{margin:.1875rem 0 0;padding:0 1.125rem;font-size:.78125rem;color:var(--txt-fraco)}
.card>.body{padding:1rem 1.125rem}

/* ---------- BOTÃO ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  height:var(--d-control-h);padding:0 .875rem;border:0;border-radius:var(--radius-md);
  background:var(--acao);color:var(--txt-sobre-acao);font:inherit;font-size:var(--d-text-ui);
  font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-xs)}
.btn.outline{background:var(--sup-cartao);color:var(--txt-forte);
  outline:1px solid var(--linha);outline-offset:-1px}
.btn.ghost{background:transparent;color:var(--txt-fraco);box-shadow:none;
  font-weight:var(--font-weight-medium)}
.btn.destructive{background:var(--color-red-600);color:#fff}
/* tonal âmbar: a ação existe, mas não tem efeito sozinha — vai para aprovação */
.btn.aprov{background:var(--av-fundo);color:var(--av);box-shadow:none;
  outline:1px solid var(--av-linha);outline-offset:-1px}
.btn.aprov:hover{background:var(--av-fundo);filter:brightness(.97)}
.dica-aprov{display:inline-flex;align-items:center;gap:.3125rem;margin-top:.3125rem;
  font-size:.6875rem;color:var(--av)}
.btn.sm{height:var(--d-control-h-sm);padding:0 .6875rem;font-size:.78125rem}
.btn.icon{width:var(--d-control-h);padding:0} .btn.icon.sm{width:var(--d-control-h-sm)}
.btn.dis,.btn:disabled,.btn[disabled]{background:var(--sup-rebaixada)!important;
  color:var(--txt-apagado)!important;outline:1px solid var(--linha-fina)!important;
  outline-offset:-1px!important;box-shadow:none!important;cursor:not-allowed;opacity:1}

/* ---------- CAMPO ----------------------------------------------------------- */
.inp,input,select,textarea{display:flex;align-items:center;width:100%;height:var(--d-control-h);
  padding:0 .6875rem;border:0;border-radius:var(--radius-md);background:var(--sup-cartao);
  color:var(--txt-forte);font:inherit;font-size:var(--d-text-ui);cursor:text;
  outline:1px solid var(--linha);outline-offset:-1px}
.inp.ph,input::placeholder{color:var(--txt-apagado)}
.inp.focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--foco);outline-offset:-2px}
.inp.err{outline:1px solid var(--er-linha);outline-offset:-1px;color:var(--er-texto)}
.inp.err.focus{outline:2px solid var(--er-icone);outline-offset:-2px}
.inp.ok{outline:1px solid var(--linha);outline-offset:-1px}
/* campo em modo de ausência: mostra o modo escolhido, e continua clicável —
   escolher “Ignorada” por engano não pode prender ninguém ali */
.inp.modo{color:var(--txt-fraco);cursor:pointer}
.inp.modo:hover{outline:1px solid var(--linha-forte);outline-offset:-1px}
.inp.ro{outline:1px solid var(--linha-forte);outline-offset:-1px;color:var(--txt-fraco);cursor:default}
.inp.dis,input[disabled]{background:var(--sup-rebaixada);color:var(--txt-apagado);
  cursor:not-allowed;outline:1px solid var(--linha-fina);outline-offset:-1px}
.campo{position:relative} .campo>.inp{padding-right:2.5rem}
.campo>.fim{position:absolute;right:.75rem;top:0;height:var(--d-control-h);display:flex;
  align-items:center;pointer-events:none}
.campo>.fim.erro{color:var(--er-icone)} .campo>.fim.ok{color:var(--ok-icone)}
.lbl,label{display:block;font-size:var(--d-text-cell);font-weight:var(--font-weight-medium);
  margin-bottom:.375rem;color:var(--txt-forte)}
.lbl.dis,label.dis{color:var(--txt-apagado)}
.help{font-size:var(--d-text-ui);color:var(--txt-fraco);margin-top:.5rem}
.bad,.good{display:block;font-size:var(--d-text-ui);margin-top:.5rem;line-height:1.35}
.bad{color:var(--er)} .good{color:var(--ok)}
.obrig{color:var(--er)}

/* ---------- MARCADORES (17) ------------------------------------------------- */
.cx,.rd{width:.9375rem;height:.9375rem;flex-shrink:0;display:grid;place-items:center;
  color:#fff;outline:1px solid var(--linha);outline-offset:-1px;background:var(--sup-cartao)}
.cx{border-radius:var(--radius-xs)} .rd{border-radius:9999px}
/* marcada é SEMPRE um visto — nunca um quadrado cheio e mudo. O visto é
   desenhado aqui para não depender de cada tela lembrar de colocar o ícone
   dentro; quem já traz um svg próprio continua valendo. */
.cx.on{background:var(--acao);outline-color:var(--acao)}
.cx.on:empty::after{content:"";width:.4375rem;height:.1875rem;margin-top:-.125rem;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.cx.on>i{width:.4375rem;height:.1875rem;margin-top:-.125rem;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
/* meio-marcada: só a caixa do CABEÇALHO usa isso, quando parte da página está
   escolhida. Traço, porque visto ali diria “tudo”. */
.cx.ind{background:var(--acao);outline-color:var(--acao)}
.cx.ind::after{content:"";width:.5rem;height:1.5px;border-radius:1px;background:#fff}
.cx.dis{background:var(--sup-rebaixada);outline-color:var(--linha);cursor:not-allowed}
.rd.on{border:4.5px solid var(--acao);outline:0;background:var(--sup-cartao)}
.sw{width:1.875rem;height:1.0625rem;border-radius:9999px;flex-shrink:0;padding:2px;display:flex;
  background:var(--linha)}
.sw.on{background:var(--acao);justify-content:flex-end}
/* chave travada: o estado é o do sistema, e ninguém mexe */
.sw.dis{opacity:.45;cursor:not-allowed}
.sw>i{width:.8125rem;height:.8125rem;border-radius:9999px;background:#fff;display:block}
.marc{display:flex;gap:.5rem;align-items:center;font-size:var(--d-text-ui)}
.marc.desc{align-items:flex-start}
.marc.desc .t{font-size:var(--d-text-ui);font-weight:var(--font-weight-medium)}
.marc.desc .d{font-size:.78125rem;color:var(--txt-fraco);margin-top:.125rem}
.opt-card{padding:.625rem;border-radius:var(--radius-lg);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;cursor:pointer}
.opt-card.on{outline:2px solid var(--acao);outline-offset:-2px;background:var(--sup-selecionada)}

/* ---------- TABELA (3a) ----------------------------------------------------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:var(--d-text-ui);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);padding:.5625rem var(--d-cell-x);background:transparent;
  border-bottom:1px solid var(--linha);white-space:nowrap;text-transform:none;letter-spacing:0}
td{padding:var(--d-cell-y) var(--d-cell-x);font-size:var(--d-text-cell);color:var(--txt-fraco);
  border-bottom:1px solid var(--linha-fina)}
td:first-child{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--sup-hover)}
tr.sel td,tr.sel:hover td{background:var(--sup-selecionada)}
th.secao{background:var(--sup-rebaixada);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-fraco);font-weight:var(--font-weight-semibold);
  padding:.375rem var(--d-cell-x);border-bottom:1px solid var(--linha-fina)}
tfoot td{border-top:2px solid var(--linha);border-bottom:0;font-weight:var(--font-weight-semibold);
  color:var(--txt-forte)}

/* ações da linha (§9.5.1) — os três braços são obrigatórios */
.acoes{opacity:0;transition:opacity .12s ease;display:inline-flex;gap:.8125rem;align-items:center}
.acoes span,.acoes a{color:var(--txt-acao-linha);cursor:pointer;transition:color .12s ease}
.acoes span:hover,.acoes a:hover{color:var(--acao)}
tr:hover .acoes,tr:focus-within .acoes{opacity:1}
@media (hover:none){ .acoes{opacity:1} }

/* ---------- ETIQUETA E CHIP ------------------------------------------------- */
/* Etiqueta de situação. Ela é lida junto com o texto da linha, então fica logo
   ABAIXO dele — 12px contra os 13px da célula. A 9px o olho reajustava o foco a
   cada linha; no corpo cheio a etiqueta competia com o dado e vencia. */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1875rem .5rem;
  white-space:nowrap;
  border-radius:var(--radius-md);font-size:.75rem;line-height:1.25;
  font-weight:var(--font-weight-medium);
  background:var(--sup-rebaixada);color:var(--txt-fraco);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.badge.g{background:var(--ok-fundo);color:var(--ok);outline-color:var(--ok-linha)}
.badge.y{background:var(--av-fundo);color:var(--av);outline-color:var(--av-linha)}
.badge.r{background:var(--er-fundo);color:var(--er);outline-color:var(--er-linha)}
.badge.n{background:var(--acao);color:var(--txt-sobre-acao);outline:0}
.tag,.kbd{display:inline-block;padding:.125rem .4375rem;border-radius:var(--radius-sm);
  font-size:.75rem;font-family:ui-monospace,Menlo,monospace;background:var(--sup-rebaixada);
  color:var(--txt-fraco);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.chip{display:inline-flex;align-items:center;gap:.3125rem;height:1.875rem;
  padding:0 .375rem 0 .625rem;border-radius:var(--radius-md);background:var(--sup-rebaixada);
  color:var(--txt-forte);font-size:.78125rem;font-weight:var(--font-weight-medium);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.chip .rot{color:var(--txt-fraco);font-weight:var(--font-weight-normal)}
.chip .x{color:var(--txt-fraco);cursor:pointer;padding:.125rem;display:flex}
/* quantas senhas daquele tipo esperam agora — redondo, no canto do chip, na
   cor da marca: é contagem, não alerta */
.chip{position:relative}
.chip .qtd-fila{position:absolute;top:-.4375rem;right:-.375rem;height:1rem;min-width:1rem;
  padding:0 .25rem;border-radius:9999px;background:var(--acao);color:var(--txt-sobre-acao);
  font-size:.5625rem;font-weight:var(--font-weight-semibold);display:grid;place-items:center;
  line-height:1;font-variant-numeric:tabular-nums}
.chip.novo{background:transparent;outline-style:dashed;outline-color:var(--linha);
  color:var(--txt-fraco);padding:0 .625rem;cursor:pointer}
/* fila desligada: o chip continua no lugar e continua contando — só perde a
   cor. Sumir com ele esconderia que aquela fila existe e tem gente nela. */
.chip.off{color:var(--txt-apagado);background:transparent;
  outline-color:var(--linha-fina)}
.chip.off .qtd-fila{background:var(--sup-rebaixada);color:var(--txt-apagado)}

/* ---------- ABAS (11a · 11d · 11e) ----------------------------------------- */
.abas{display:flex;gap:1.125rem;border-bottom:1px solid var(--linha-fina)}
.abas.integral{gap:0} .abas.integral .aba{flex:1;text-align:center}
.aba{font-size:var(--d-text-ui);color:var(--txt-fraco);padding:0 0 .5rem;cursor:pointer;
  white-space:nowrap}
.aba.on{color:var(--txt-forte);font-weight:var(--font-weight-semibold);
  box-shadow:inset 0 -2px 0 var(--acao)}
.aba .ct{margin-left:.3125rem;padding:.0625rem .3125rem;border-radius:9999px;font-size:.625rem;
  background:var(--sup-rebaixada);color:var(--txt-fraco)}
.aba.on .ct{background:var(--sup-selecionada);color:var(--txt-marca)}
.aba .ct.err{background:var(--er-fundo);color:var(--er)}

/* ---------- ACORDEÃO (12a · 12c) ------------------------------------------- */
.acord>.it{border-bottom:1px solid var(--linha-fina)}
.acord>.it:last-child{border-bottom:0}
.acord.cartoes>.it{border:0;border-radius:var(--radius-lg);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;margin-bottom:.4375rem}
.acord .cab{display:flex;align-items:center;gap:.5rem;padding:.5625rem .625rem;
  font-size:var(--d-text-ui);font-weight:var(--font-weight-medium);cursor:pointer}
.acord .cab .seta{margin-left:auto;color:var(--txt-fraco)}
.acord .corpo{padding:0 .625rem .6875rem;font-size:.78125rem;color:var(--txt-fraco)}

/* ---------- MENU (13c) ------------------------------------------------------ */
.menu{width:9.875rem;border-radius:var(--radius-lg);background:var(--sup-cartao);padding:.25rem;
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.menu .mi{display:flex;align-items:center;gap:.5rem;padding:.375rem .5625rem;
  font-size:.78125rem;border-radius:var(--radius-sm);cursor:pointer;color:var(--txt-forte)}
.menu .mi:hover{background:var(--sup-hover)}
.menu .mi.destr{color:var(--er)}
.menu .div{height:1px;background:var(--linha-fina);margin:.25rem 0}

/* ---------- TOOLTIP (14a) --------------------------------------------------- */
.tip{position:relative;display:inline-flex}
.tip>.bolha{position:absolute;bottom:calc(100% + .4375rem);left:50%;transform:translateX(-50%);
  background:var(--color-zinc-900);color:var(--color-zinc-50);font-size:.6875rem;
  padding:.3125rem .5rem;border-radius:var(--radius-md);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s ease}
.tip>.bolha::after{content:"";position:absolute;top:100%;left:50%;width:.5rem;height:.5rem;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--color-zinc-900)}
.tip:hover>.bolha,.tip:focus-within>.bolha{opacity:1}
/* dica ABAIXO do gatilho: na barra do topo não há espaço acima — a bolha
   sairia por cima da moldura da janela e ficava cortada. */
.tip.baixo>.bolha{bottom:auto;top:calc(100% + .4375rem)}
.tip.baixo>.bolha::after{top:auto;bottom:100%;transform:translate(-50%,50%) rotate(45deg)}
/* encostada à direita: para o último ícone da barra, que não tem metade
   da bolha para gastar do lado de fora */
.tip.dir>.bolha{left:auto;right:0;transform:none}
.tip.dir>.bolha::after{left:auto;right:.4375rem}

/* ---------- ALERTA (18) ----------------------------------------------------- */
.alerta{display:flex;gap:.625rem;padding:.6875rem .75rem;border-radius:var(--radius-lg);
  background:var(--av-fundo);outline:1px solid var(--av-linha);outline-offset:-1px;color:var(--av)}
.alerta.ok{background:var(--ok-fundo);outline-color:var(--ok-linha);color:var(--ok)}
.alerta.erro{background:var(--er-fundo);outline-color:var(--er-linha);color:var(--er)}
.alerta .ic{flex-shrink:0}
.alerta .t{font-size:var(--d-text-ui);font-weight:var(--font-weight-semibold)}
.alerta .d{font-size:.78125rem;opacity:.9;margin-top:.125rem}

/* faixa tonal sem borda: informa e agrupa, mas não alerta — por isso não tem
   contorno nem ícone. Usada para a escolha de finalidade no topo da ficha. */
.faixa-fin{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .625rem;border-radius:var(--radius-lg);background:var(--sup-selecionada)}
.faixa-fin .rot{font-size:.65625rem;color:var(--txt-fraco)}

/* ---------- TOAST tonal ----------------------------------------------------- */
.toast{display:flex;align-items:flex-start;gap:.6875rem;padding:.8125rem .875rem;width:21.5rem;
  border-radius:var(--radius-lg);background:var(--sup-cartao);color:var(--txt-forte);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.toast .tt{font-size:var(--d-text-cell);font-weight:var(--font-weight-medium)}
.toast .ds{font-size:.78125rem;color:var(--txt-fraco);margin-top:.125rem}
.toast .fechar{color:var(--txt-apagado);cursor:pointer}
.toast.ok{background:var(--ok-fundo);outline-color:var(--ok-linha)} .toast.ok .ic{color:var(--ok-icone)}
.toast.erro{background:var(--er-fundo);outline-color:var(--er-linha)} .toast.erro .ic{color:var(--er-icone)}
.toast.aviso{background:var(--av-fundo);outline-color:var(--av-linha)} .toast.aviso .ic{color:var(--av-icone)}
.toast.info{background:var(--marca-50);outline-color:var(--marca-100)} .toast.info .ic{color:var(--acao)}
.tema-escuro .toast.info{background:rgb(61 108 174 / .16);outline-color:rgb(116 205 254 / .26)}

/* ---------- PROGRESSO (19b · 19c) ------------------------------------------ */
.prog{height:.375rem;border-radius:9999px;background:var(--sup-rebaixada);overflow:hidden}
.prog>i{display:block;height:100%;border-radius:9999px;background:var(--acao)}
.prog-linha{display:flex;align-items:center;gap:.5625rem}
.prog-pct{font-size:.6875rem;font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}

/* ---------- ESQUELETO (20b · 1,8s) ----------------------------------------- */
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk{border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--sup-rebaixada) 25%,var(--linha-fina) 50%,
  var(--sup-rebaixada) 75%);background-size:200% 100%;animation:sk 1.8s linear infinite}

/* ---------- BARRAS E APOIO -------------------------------------------------- */
.selbar{display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;
  border-radius:var(--radius-md);background:var(--sup-selecionada);color:var(--txt-marca);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.tools{display:flex;gap:.5rem;align-items:center;padding:.75rem 1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--linha-fina)}
.foot{display:flex;justify-content:space-between;align-items:center;padding:.6875rem 1rem;
  font-size:.78125rem;color:var(--txt-fraco)}
.pag{display:flex;gap:.25rem;align-items:center}
.pag .sep{color:var(--txt-apagado);cursor:default;outline:0;background:none}
.pag .fim{color:var(--txt-apagado)}
.pag>span,.pag .tip>span:not(.bolha){width:1.5rem;height:1.5rem;border-radius:var(--radius-sm);display:grid;
  place-items:center;font-size:.6875rem;cursor:pointer;
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.pag>span.on{background:var(--acao);color:#fff;font-weight:var(--font-weight-semibold);outline:0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem}
.row{display:flex;gap:.5rem;align-items:flex-end}
.tel{display:flex;align-items:center;gap:.625rem;padding:.5625rem .6875rem;
  border-radius:var(--radius-lg);background:var(--sup-cartao);margin-bottom:.4375rem;
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.tel .pos{width:1.25rem;height:1.25rem;border-radius:9999px;background:var(--acao);
  color:var(--txt-sobre-acao);display:grid;place-items:center;font-size:.6875rem;font-weight:700}
.ver{font-size:.78125rem;padding:.4375rem .6875rem;border-left:2px solid var(--linha-fina);
  margin-left:.3125rem}
.ver.now{border-color:var(--ok)}

.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}
@media (max-width:767px){ .c2,.c3,.c4,.c6{grid-column:span 1} }

/* ---------- REORDENAÇÃO (arrastar + setas + menu, todos ligados) ------------ */
.reord{display:flex;flex-direction:column}
.reord-it{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;
  border-radius:var(--radius-lg);background:var(--sup-cartao);margin-bottom:.375rem;
  outline:1px solid var(--linha-fina);outline-offset:-1px;font-size:.8125rem}
/* alça de arraste — vale em qualquer lista, não só na de reordenação */
.grip{cursor:grab;color:var(--txt-apagado);display:flex}
.reord-it:hover .grip,.rep-it:hover .grip{color:var(--txt-fraco)}
/* número de ordem — vale em qualquer lista numerada */
.ord{width:1.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;
  background:var(--sup-rebaixada);color:var(--txt-fraco);display:grid;place-items:center;
  font-size:.65625rem;font-weight:var(--font-weight-semibold)}
.reord-it.arrastando{box-shadow:var(--shadow-lg);outline:1px solid var(--acao);outline-offset:-1px;
  transform:rotate(-.6deg);cursor:grabbing}
.reord-it.alvo{height:2.25rem;background:var(--acao-suave);outline:1px dashed var(--acao);
  outline-offset:-1px;margin-bottom:.375rem}
.seta-bt{width:1.625rem;height:1.625rem;border-radius:var(--radius-sm);display:grid;
  place-items:center;color:var(--txt-acao-linha);cursor:pointer;flex-shrink:0}
.seta-bt:hover{background:var(--sup-rebaixada);color:var(--acao)}
.seta-bt.dis{color:var(--txt-apagado);cursor:not-allowed;background:none}

/* ---------- SUPERFÍCIES DE APRESENTAÇÃO ------------------------------------ */
.scrim{padding:2rem;border-radius:var(--radius-xl);background:var(--veu)}
.janela{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--sombra-janela)}

/* ---------- ONDA 2 · CAMPOS COMPOSTOS -------------------------------------- */
/* dígito ainda não digitado dentro da máscara — some quando o campo é lido */
.mask-vago{color:var(--txt-apagado)}
.cursor{display:inline-block;width:1px;height:1em;background:var(--acao);
  vertical-align:-.15em;margin:0 -.5px}

/* campo com botão de ferramenta colado à direita */
.grupo-campo{display:flex}
.grupo-campo>.inp{border-top-right-radius:0;border-bottom-right-radius:0}
.grupo-campo .ferr{width:2.25rem;height:var(--d-control-h);flex-shrink:0;display:grid;
  place-items:center;cursor:pointer;color:var(--txt-fraco);background:var(--sup-rebaixada);
  border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);
  outline:1px solid var(--linha);outline-offset:-1px;margin-left:-1px}
.grupo-campo .ferr:hover{color:var(--acao)}
.grupo-campo .ferr.on{background:var(--acao-suave);color:var(--acao);
  outline-color:var(--acao)}
.grupo-campo .ferr.dis{color:var(--txt-apagado);cursor:not-allowed}
.grupo-campo .ferr.dis:hover{color:var(--txt-apagado)}
.grupo-campo>.tip{margin-left:-1px}
.grupo-campo .bolha{white-space:normal;width:13rem;text-align:left}

/* calendário */
.cal{width:17rem;padding:.625rem;border-radius:var(--radius-lg);background:var(--sup-cartao);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;box-shadow:var(--shadow-lg)}
.cal-topo{display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem}
.cal-topo .seta-bt{font-size:.8125rem;line-height:1;width:1.25rem;height:1.25rem}
.cal-topo .mes{flex:1;text-align:center;white-space:nowrap;font-size:.8125rem;
  font-weight:var(--font-weight-semibold)}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cal-grade>span{height:1.75rem;display:grid;place-items:center;font-size:.71875rem;
  border-radius:var(--radius-sm);cursor:pointer}
.cal-grade>span.cab{color:var(--txt-apagado);font-size:.625rem;font-weight:600;cursor:default}
.cal-grade>span.fora{color:var(--txt-apagado)}
.cal-grade>span.hoje{outline:1px solid var(--linha-forte);outline-offset:-1px}
.cal-grade>span.on{background:var(--acao);color:var(--txt-sobre-acao);font-weight:600}
.cal-grade>span.faixa{background:var(--acao-suave);border-radius:0}
.cal-grade>span:hover:not(.cab):not(.on){background:var(--sup-rebaixada)}
.cal-pe{display:flex;gap:.375rem;margin-top:.5rem;padding-top:.5rem;
  border-top:1px solid var(--linha-fina)}

/* grupo repetível */
.rep{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px}
.rep-it{padding:.75rem;border-bottom:1px solid var(--linha-fina)}
.rep-it:last-child{border-bottom:0}
.rep-cab{display:flex;align-items:center;gap:.5rem;margin-bottom:.625rem}
.rep-cab .titulo{font-size:.71875rem;font-weight:var(--font-weight-semibold);
  color:var(--txt-fraco);flex:1}
.rep-pe{padding:.5625rem .75rem;background:var(--sup-pagina);
  border-top:1px solid var(--linha-fina);display:flex;align-items:center;gap:.5rem}
.rep-vazio{padding:1.5rem;text-align:center;color:var(--txt-fraco);font-size:.78125rem}

/* marcar o principal com estrela (convive com arrastar/setas/menu) */
.estrela{width:1.625rem;height:1.625rem;border-radius:var(--radius-sm);display:grid;
  place-items:center;color:var(--txt-apagado);cursor:pointer;flex-shrink:0}
.estrela:hover{background:var(--sup-rebaixada);color:var(--av-icone)}
.estrela.on{color:var(--av-icone)}
.estrela.on svg{fill:var(--av-icone)}

/* seção condicional */
.cond{border-left:2px solid var(--acao);padding-left:.875rem;margin-left:.1875rem}
.cond.oculta{border-color:var(--linha);opacity:.5}
.cond-rot{display:inline-flex;align-items:center;gap:.3125rem;font-size:.65625rem;
  color:var(--acao);margin-bottom:.5rem;font-weight:var(--font-weight-medium)}
.cond.oculta .cond-rot{color:var(--txt-fraco)}

/* área de arrastar arquivo */
.solta{border-radius:var(--radius-lg);padding:1.5rem;text-align:center;
  outline:1px dashed var(--linha);outline-offset:-1px;background:var(--sup-pagina)}
.solta.sobre{outline:2px dashed var(--acao);outline-offset:-2px;background:var(--acao-suave)}
.arq{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;
  border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;
  background:var(--sup-cartao);margin-bottom:.375rem}
.arq .ic{width:2rem;height:2rem;border-radius:var(--radius-md);flex-shrink:0;display:grid;
  place-items:center;background:var(--sup-rebaixada);color:var(--txt-fraco)}
.arq .nm{font-size:.78125rem;font-weight:var(--font-weight-medium);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arq .meta{font-size:.65625rem;color:var(--txt-fraco);margin-top:.0625rem}
.arq.erro{outline-color:var(--er-linha);background:var(--er-fundo)}

/* cartão de serviço dentro da O.S. */
.svc{border-radius:var(--radius-lg);background:var(--sup-cartao);overflow:hidden;
  outline:1px solid var(--linha-fina);outline-offset:-1px;margin-bottom:.625rem}
.svc-cab{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;
  background:var(--sup-pagina);border-bottom:1px solid var(--linha-fina)}
.svc-cab .ord{width:1.375rem;height:1.375rem;font-size:.625rem}
.svc-cab .tit{font-size:.8125rem;font-weight:var(--font-weight-semibold);flex:1}
.svc-corpo{padding:.75rem}
.svc.fechado .svc-cab{border-bottom:0}
.svc.fechado .svc-corpo{display:none}

/* cartão de arquivo — miniatura, tipo e vínculo editáveis na própria lista */
.arq-card{border-radius:var(--radius-lg);background:var(--sup-cartao);overflow:hidden;
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.arq-card:hover{outline-color:var(--linha)}
.arq-card.pend{outline-color:var(--av-linha)}
.arq-card.err{outline-color:var(--er-linha)}
/* cartão aberto no visor abaixo */
.arq-card.sel-arq{outline:2px solid var(--acao);outline-offset:-2px;
  background:var(--sup-selecionada)}
.arq-mini{height:6.5rem;background:var(--sup-rebaixada);display:grid;place-items:center;
  position:relative;color:var(--txt-apagado)}
.arq-mini .folha{width:3.25rem;height:4.25rem;background:var(--sup-cartao);
  border-radius:var(--radius-xs);box-shadow:var(--shadow-sm);padding:.375rem}
.arq-mini .folha i{display:block;height:3px;border-radius:1px;background:var(--linha);
  margin-bottom:3px}
.arq-card .corpo{padding:.5625rem .625rem}
.arq-card .nome{font-size:.65625rem;color:var(--txt-apagado);
  font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-bottom:.375rem}

/* paleta de busca */
.paleta{width:31rem;border-radius:var(--radius-xl);background:var(--sup-cartao);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  overflow:hidden}
.paleta-busca{display:flex;align-items:center;gap:.5625rem;padding:.75rem .875rem;
  border-bottom:1px solid var(--linha-fina);color:var(--txt-fraco)}
.paleta-it{display:flex;align-items:center;gap:.625rem;padding:.4375rem .875rem;
  font-size:.8125rem;cursor:pointer}
.paleta-it.on{background:var(--sup-selecionada)}
.paleta-it .sub{font-size:.6875rem;color:var(--txt-fraco)}
.kbd{padding:.0625rem .3125rem;font-size:.625rem}

/* ---------- ONDA 3 · FLUXO, ACESSO E PROVA --------------------------------- */
/* stepper */
.passos{display:flex;align-items:flex-start}
.passo{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;padding:0 .375rem}
.passo::before,.passo::after{content:"";position:absolute;top:.9375rem;height:2px;
  background:var(--linha-fina)}
.passo::before{left:0;width:50%}
.passo::after{right:0;width:50%}
.passo:first-child::before,.passo:last-child::after{display:none}
.passo.feito::before,.passo.feito::after,.passo.atual::before{background:var(--acao)}
.passo .bola{width:1.875rem;height:1.875rem;border-radius:9999px;display:grid;place-items:center;
  font-size:.75rem;font-weight:var(--font-weight-semibold);position:relative;z-index:1;
  background:var(--sup-cartao);color:var(--txt-apagado);
  outline:2px solid var(--linha);outline-offset:-2px}
.passo.feito .bola{background:var(--acao);color:var(--txt-sobre-acao);outline-color:var(--acao)}
.passo.atual .bola{background:var(--sup-cartao);color:var(--acao);outline-color:var(--acao)}
.passo.erro .bola{background:var(--er-fundo);color:var(--er);outline-color:var(--er-linha)}
.passo.bloq .bola{background:var(--sup-rebaixada)}
.passo .rot{font-size:.71875rem;margin-top:.4375rem;font-weight:var(--font-weight-medium)}
.passo .sub{font-size:.625rem;color:var(--txt-fraco);margin-top:.125rem;line-height:1.35}
.passo.bloq .rot,.passo.bloq .sub{color:var(--txt-apagado)}

.passos-v{display:flex;flex-direction:column}
.passo-v{display:flex;gap:.6875rem;padding-bottom:.875rem;position:relative}
.passo-v:not(:last-child)::before{content:"";position:absolute;left:.90625rem;top:1.875rem;
  bottom:0;width:2px;background:var(--linha-fina)}
.passo-v.feito:not(:last-child)::before{background:var(--acao)}
.passo-v .bola{width:1.875rem;height:1.875rem;border-radius:9999px;display:grid;place-items:center;
  font-size:.75rem;font-weight:var(--font-weight-semibold);flex-shrink:0;z-index:1;
  background:var(--sup-cartao);color:var(--txt-apagado);
  outline:2px solid var(--linha);outline-offset:-2px}
.passo-v.feito .bola{background:var(--acao);color:var(--txt-sobre-acao);outline-color:var(--acao)}
.passo-v.atual .bola{color:var(--acao);outline-color:var(--acao)}
.passo-v.erro .bola{background:var(--er-fundo);color:var(--er);outline-color:var(--er-linha)}

/* lista reordenável · linhas soltas, sem cartão e sem divisória */
.reord-solta .li{display:flex;align-items:center;gap:.5rem;padding:.3125rem .25rem;
  border-radius:var(--radius-sm)}
.reord-solta .li:hover{background:var(--sup-hover)}
/* a alça fica sempre visível: ela é o que diz que a lista se reordena */

/* lista reordenável · tabela sem cabeçalho, altura normal */
.reord-tab{width:100%}
.reord-tab td{padding:var(--d-cell-y) var(--d-cell-x);border-bottom:1px solid var(--linha-fina);
  font-size:var(--d-text-cell)}
.reord-tab tr:last-child td{border-bottom:0}
.reord-tab tr:hover td{background:var(--sup-hover)}


/* lista reordenável dentro do formulário — os campos alinham com o resto */
/* a lista divide a MESMA largura útil do formulário: a seção reserva uma calha
   à direita e a lista avança sobre ela — assim os campos dos dois terminam
   exatamente no mesmo ponto */
.secao-form{padding-right:6.5rem}
.lista-form{margin-right:-6.5rem}
.lista-form .cab-cols{display:grid;gap:.75rem;margin-bottom:.25rem;padding-right:6.5rem}
.lista-form .li{display:flex;align-items:center;gap:0;padding:.1875rem 0;
  border-radius:var(--radius-sm)}
.lista-form .li:hover{background:var(--sup-hover)}
.lista-form .li>.campos{flex:1;display:grid;gap:.75rem;min-width:0}
/* o cabeçalho e a linha são duas grades separadas com o MESMO template: para
   caírem na mesma coluna, as duas precisam resolver os fr só pela proporção.
   Sem isto, um título longo (“Ato / observação”) empurra a coluna dele no
   cabeçalho e o campo abaixo fica alguns pixels fora do lugar. */
.lista-form .cab-cols>*,.lista-form .li>.campos>*{min-width:0}
.lista-form .li>.fim-li{display:flex;align-items:center;gap:.0625rem;flex-shrink:0;
  width:6.5rem;padding-left:.5rem}
/* estrela, setas e lixeira têm caixas de tamanhos diferentes: centraliza todas
   pelo meio da linha para não escalonarem */
.lista-form .fim-li>*,.lista-form .fim-li .tip{display:flex;align-items:center;
  align-self:center}

/* linha do tempo */
.linha-tempo{display:flex;flex-direction:column}
.evento{display:flex;gap:.6875rem;padding-bottom:.9375rem;position:relative}
.evento:not(:last-child)::before{content:"";position:absolute;left:.71875rem;top:1.625rem;
  bottom:0;width:1px;background:var(--linha-fina)}
.evento .ic{width:1.4375rem;height:1.4375rem;border-radius:9999px;flex-shrink:0;display:grid;
  place-items:center;background:var(--sup-rebaixada);color:var(--txt-fraco);z-index:1}
.evento.ok .ic{background:var(--ok-fundo);color:var(--ok)}
.evento.av .ic{background:var(--av-fundo);color:var(--av)}
.evento.er .ic{background:var(--er-fundo);color:var(--er)}
.evento .quando{font-size:.625rem;color:var(--txt-apagado);white-space:nowrap}
.evento .quem{font-size:.6875rem;color:var(--txt-fraco)}
.dia{font-size:.65625rem;font-weight:var(--font-weight-semibold);color:var(--txt-fraco);
  letter-spacing:.05em;text-transform:uppercase;margin:.375rem 0 .625rem}

/* cartão de tarefa / pendência */
.tarefa{display:flex;gap:.625rem;padding:.6875rem .75rem;border-radius:var(--radius-lg);
  background:var(--sup-cartao);outline:1px solid var(--linha-fina);outline-offset:-1px;
  margin-bottom:.4375rem;cursor:pointer}
.tarefa:hover{outline-color:var(--linha)}
.tarefa.on{outline:2px solid var(--acao);outline-offset:-2px;background:var(--sup-selecionada)}
.tarefa.venc{outline-color:var(--er-linha)}
.tarefa .faixa{width:3px;border-radius:2px;background:var(--linha);flex-shrink:0}
.tarefa.urg .faixa{background:var(--er)}
.tarefa.aten .faixa{background:var(--av)}
.tarefa.ok .faixa{background:var(--ok)}

/* retrato de quem está na sessão */
.retrato{width:2.75rem;height:2.75rem;border-radius:9999px;flex-shrink:0;display:grid;
  place-items:center;font-size:.9375rem;font-weight:var(--font-weight-semibold);
  background:var(--acao-suave);color:var(--txt-marca)}

/* caixa de login */
.login{width:22rem;padding:1.5rem;border-radius:var(--radius-xl);background:var(--sup-cartao);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.otp{display:flex;gap:.4375rem}
.otp>span{width:2.5rem;height:3rem;border-radius:var(--radius-md);display:grid;
  place-items:center;font-size:1.125rem;font-weight:var(--font-weight-semibold);
  background:var(--sup-cartao);outline:1px solid var(--linha);outline-offset:-1px}
.otp>span.on{outline:2px solid var(--foco);outline-offset:-2px}
.otp>span.vazio{color:var(--txt-apagado)}

/* diferença entre versões */
.dif-sai{background:var(--er-fundo);color:var(--er-texto);padding:0 .1875rem;
  border-radius:var(--radius-xs);text-decoration:line-through}
.dif-entra{background:var(--ok-fundo);color:var(--ok);padding:0 .1875rem;
  border-radius:var(--radius-xs)}

/* ---------- ONDA 4 · CARTÓRIO ---------------------------------------------- */
/* visualizador de documento */
.visor{display:flex;border-radius:var(--radius-lg);overflow:hidden;
  outline:1px solid var(--linha-fina);outline-offset:-1px;background:var(--sup-pagina)}
.visor-tiras{width:6.5rem;padding:.5rem;background:var(--sup-rebaixada);
  border-right:1px solid var(--linha-fina)}
.tira{border-radius:var(--radius-sm);background:var(--sup-cartao);margin-bottom:.4375rem;
  padding:.25rem;cursor:pointer;outline:1px solid var(--linha-fina);outline-offset:-1px}
.tira.on{outline:2px solid var(--acao);outline-offset:-2px}
.tira .pag{height:4.25rem;background:var(--sup-pagina);border-radius:var(--radius-xs)}
.tira .num-pag{font-size:.5625rem;color:var(--txt-fraco);text-align:center;margin-top:.1875rem}
.visor-barra{display:flex;align-items:center;gap:.375rem;padding:.4375rem .625rem;
  background:var(--sup-cartao);border-bottom:1px solid var(--linha-fina)}
.folha-doc{background:#fff;box-shadow:var(--shadow-md);margin:1rem auto;padding:1.5rem;
  color:var(--color-zinc-800)}

/* editor de minuta */
.editor{border-radius:var(--radius-lg);overflow:hidden;
  outline:1px solid var(--linha-fina);outline-offset:-1px;background:var(--sup-cartao)}
.editor-barra{display:flex;align-items:center;gap:.1875rem;padding:.375rem .5rem;
  border-bottom:1px solid var(--linha-fina);background:var(--sup-pagina);flex-wrap:wrap}
.eb{width:1.75rem;height:1.75rem;border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--txt-fraco);cursor:pointer;font-size:.75rem}
.eb:hover{background:var(--sup-rebaixada);color:var(--txt-forte)}
.eb.on{background:var(--acao-suave);color:var(--acao)}
.eb-div{width:1px;height:1.125rem;background:var(--linha-fina);margin:0 .25rem}
.papel{padding:1.75rem 2.25rem;background:var(--sup-cartao);font-size:.8125rem;line-height:1.85;
  text-align:justify}
.var{background:var(--acao-suave);color:var(--txt-marca);padding:.0625rem .25rem;
  border-radius:var(--radius-xs);font-size:.78125rem;white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace}
.var.falta{background:var(--er-fundo);color:var(--er)}
.lacuna{background:var(--er-fundo);color:var(--er);padding:.0625rem .3125rem;
  border-radius:var(--radius-xs);font-size:.78125rem;font-style:italic;
  outline:1px dashed var(--er-linha);outline-offset:-1px}
.var.ok{background:var(--ok-fundo);color:var(--ok);font-family:inherit}

/* livro e folha */
.livro{background:var(--sup-cartao);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;
  outline:1px solid var(--linha-fina);outline-offset:-1px;position:relative}
.livro .margem{position:absolute;left:2.75rem;top:1rem;bottom:1rem;width:1px;
  background:var(--er-linha)}
.termo{font-size:.78125rem;line-height:2;text-align:justify;padding-left:1.25rem}

/* imagem digitalizada do livro */
.scan{background:var(--color-amber-50);padding:1.125rem 1.25rem;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.scan .risco{height:6px;border-radius:2px;background:var(--color-zinc-400);opacity:.55;
  margin-bottom:11px}
.scan .titulo-ms{height:9px;width:58%;margin:0 auto 16px;border-radius:2px;
  background:var(--color-zinc-500);opacity:.6}
.scan .carimbo{position:absolute;right:1rem;bottom:1rem;width:3.25rem;height:3.25rem;
  border-radius:9999px;outline:2px solid var(--color-zinc-400);outline-offset:-2px;
  opacity:.4}
.scan .dobra{position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--color-zinc-300);opacity:.7}
.seg{display:inline-flex;padding:2px;border-radius:var(--radius-md);
  background:var(--sup-rebaixada)}
.seg>span{padding:.25rem .625rem;border-radius:var(--radius-sm);font-size:.6875rem;
  color:var(--txt-fraco);cursor:pointer}
.seg>span.on{background:var(--sup-cartao);color:var(--txt-forte);
  font-weight:var(--font-weight-medium);box-shadow:var(--shadow-xs)}

/* selo */
.selo{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .6875rem;
  border-radius:var(--radius-lg);background:var(--sup-pagina);
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.selo .cod{font-family:ui-monospace,Menlo,monospace;font-size:.78125rem;letter-spacing:.04em}
.selo.ok{background:var(--ok-fundo);outline-color:var(--ok-linha);color:var(--ok)}
.selo.av{background:var(--av-fundo);outline-color:var(--av-linha);color:var(--av)}
.selo.er{background:var(--er-fundo);outline-color:var(--er-linha);color:var(--er)}

/* valores */
.valores{width:100%}
.valores td{padding:.3125rem 0;font-size:.78125rem}
.valores td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.valores tr.total td{border-top:1px solid var(--linha);padding-top:.5rem;
  font-weight:var(--font-weight-semibold);font-size:.875rem}
.valores tr.desconto td{color:var(--ok)}

/* acompanhamento público */
.publico{background:var(--sup-cartao);border-radius:var(--radius-xl);padding:1.5rem;
  outline:1px solid var(--linha-cartao);outline-offset:-1px;box-shadow:var(--shadow-sm)}

/* ---------- ONDA 5 · O DIA DE TRABALHO ------------------------------------- */
/* quadro */
.quadro{display:flex;gap:.75rem;align-items:flex-start;overflow-x:auto}
.coluna{width:15rem;flex-shrink:0;border-radius:var(--radius-lg);background:var(--sup-pagina);
  padding:.5rem;outline:1px solid var(--linha-fina);outline-offset:-1px}
.coluna-cab{display:flex;align-items:center;gap:.4375rem;padding:.25rem .375rem .5rem}
.coluna-cab .nome{font-size:.71875rem;font-weight:var(--font-weight-semibold);flex:1}
.coluna-cab .qtd{font-size:.625rem;color:var(--txt-fraco);background:var(--sup-rebaixada);
  padding:.0625rem .3125rem;border-radius:9999px}
.cartela{background:var(--sup-cartao);border-radius:var(--radius-md);padding:.5rem .5625rem;
  margin-bottom:.375rem;outline:1px solid var(--linha-fina);outline-offset:-1px;cursor:grab}
.cartela:hover{outline-color:var(--linha)}
.cartela.arrastando{box-shadow:var(--shadow-lg);outline:1px solid var(--acao);
  outline-offset:-1px;transform:rotate(-1deg)}
.cartela .os{font-size:.625rem;color:var(--txt-apagado);font-family:ui-monospace,Menlo,monospace}
.cartela .tit{font-size:.75rem;font-weight:var(--font-weight-medium);margin:.125rem 0 .25rem}
.cartela .pe{display:flex;align-items:center;gap:.3125rem;font-size:.625rem;
  color:var(--txt-fraco)}
.coluna.alvo{outline:2px dashed var(--acao);outline-offset:-2px;background:var(--acao-suave)}

/* agenda */
.mes{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--linha-fina);
  border-radius:var(--radius-lg);overflow:hidden;outline:1px solid var(--linha-fina);
  outline-offset:-1px}
.mes>.cab{background:var(--sup-pagina);padding:.375rem;text-align:center;font-size:.625rem;
  font-weight:var(--font-weight-semibold);color:var(--txt-fraco)}
.dia-cel{background:var(--sup-cartao);min-height:5rem;padding:.3125rem .375rem}
.dia-cel.fora{background:var(--sup-pagina)}
.dia-cel .num-dia{font-size:.6875rem;color:var(--txt-fraco)}
.dia-cel.hoje .num-dia{background:var(--acao);color:var(--txt-sobre-acao);border-radius:9999px;
  width:1.125rem;height:1.125rem;display:inline-grid;place-items:center;font-weight:600}
.marca-ag{display:block;font-size:.5625rem;padding:.0625rem .25rem;border-radius:var(--radius-xs);
  margin-top:.125rem;background:var(--acao-suave);color:var(--txt-marca);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marca-ag.av{background:var(--av-fundo);color:var(--av)}
.marca-ag.ok{background:var(--ok-fundo);color:var(--ok)}

/* faixa de horários */
.horarios{display:flex;flex-direction:column;gap:.25rem}
.hora-linha{display:flex;gap:.5rem;align-items:stretch}
.hora-linha .h{width:2.75rem;font-size:.625rem;color:var(--txt-apagado);padding-top:.25rem;
  text-align:right}
.hora-linha .faixa{flex:1;min-height:1.75rem;border-top:1px solid var(--linha-fina);
  padding:.125rem 0}
.agendado{background:var(--acao-suave);border-left:2px solid var(--acao);
  border-radius:var(--radius-xs);padding:.1875rem .375rem;font-size:.65625rem}
.agendado.livre{background:var(--sup-pagina);border-left-color:var(--linha);
  color:var(--txt-apagado)}

/* notificações */
.notif{display:flex;gap:.625rem;padding:.625rem .75rem;cursor:pointer}
.notif:hover{background:var(--sup-hover)}
.notif.nova{background:var(--acao-suave)}
.notif .pt{width:.4375rem;height:.4375rem;border-radius:9999px;background:var(--acao);
  flex-shrink:0;margin-top:.4375rem}
.notif .pt.lida{background:transparent}

/* conversa */
.balao{max-width:78%;padding:.4375rem .625rem;border-radius:var(--radius-lg);
  font-size:.78125rem;line-height:1.5;margin-bottom:.3125rem}
.balao.deles{background:var(--sup-rebaixada);border-bottom-left-radius:var(--radius-xs)}
.balao.meu{background:var(--acao);color:var(--txt-sobre-acao);margin-left:auto;
  border-bottom-right-radius:var(--radius-xs)}
.balao .hora{font-size:.5625rem;opacity:.7;margin-left:.375rem}

/* captura de biometria */
.digital{width:9rem;height:11rem;border-radius:var(--radius-lg);display:grid;place-items:center;
  background:var(--sup-rebaixada);outline:2px dashed var(--linha);outline-offset:-2px;
  color:var(--txt-apagado)}
.digital.lendo{outline:2px solid var(--acao);outline-offset:-2px;background:var(--acao-suave);
  color:var(--acao)}
.digital.ok{outline:2px solid var(--ok-linha);outline-offset:-2px;background:var(--ok-fundo);
  color:var(--ok)}
.digital.erro{outline:2px solid var(--er-linha);outline-offset:-2px;background:var(--er-fundo);
  color:var(--er)}
.dedo{width:2.375rem;height:2.375rem;border-radius:var(--radius-sm);display:grid;
  place-items:center;font-size:.5625rem;background:var(--sup-cartao);
  outline:1px solid var(--linha-fina);outline-offset:-1px;color:var(--txt-apagado)}
.dedo.ok{background:var(--ok-fundo);outline-color:var(--ok-linha);color:var(--ok)}
.dedo.on{outline:2px solid var(--acao);outline-offset:-2px;color:var(--acao)}

/* painel */
.metrica{padding:.875rem 1rem;border-radius:var(--radius-lg);background:var(--sup-cartao);
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.metrica .rot{font-size:.65625rem;color:var(--txt-fraco);letter-spacing:.04em;
  text-transform:uppercase}
.metrica .val{font-size:1.5rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;margin-top:.1875rem;line-height:1.1}
.metrica .delta{font-size:.65625rem;margin-top:.25rem}
.barra-h{height:.5rem;border-radius:9999px;background:var(--sup-rebaixada);overflow:hidden}
.barra-h>i{display:block;height:100%;background:var(--acao)}

/* ---------- ONDA 6 · CONFIGURAÇÕES ----------------------------------------- */
.cfg-nav{width:15rem;flex-shrink:0}
.cfg-grupo{font-size:.5625rem;font-weight:var(--font-weight-semibold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-apagado);padding:.75rem .5rem .3125rem}
.cfg-item{display:flex;align-items:center;gap:.5rem;padding:.4375rem .5rem;
  border-radius:var(--radius-md);font-size:.78125rem;cursor:pointer;color:var(--txt-forte)}
.cfg-item:hover{background:var(--sup-hover)}
.cfg-item.on{background:var(--sup-selecionada);color:var(--txt-marca);
  font-weight:var(--font-weight-medium)}
.cfg-item .qtd{font-size:.625rem;color:var(--txt-apagado)}

/* matriz de permissão por módulo */
.perm-mod{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);
  outline-offset:-1px;margin-bottom:.5rem;overflow:hidden}
.perm-cab{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;
  background:var(--sup-pagina);cursor:pointer}
.perm-cab .nome{font-size:.75rem;font-weight:var(--font-weight-semibold);flex:1}
.perm-linha{display:flex;align-items:center;gap:.5rem;padding:.375rem .625rem;
  border-top:1px solid var(--linha-fina);font-size:.71875rem}
.perm-linha .acao{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:.6875rem;
  color:var(--txt-fraco)}
/* seletor de estado da permissão — sem trilho cinza: o selecionado se pinta,
   os demais somem no fundo do cartão */
.perm-op{display:flex;gap:.25rem}
.perm-op>span{padding:.1875rem .5rem;border-radius:var(--radius-md);font-size:.5625rem;
  color:var(--txt-apagado);cursor:pointer;white-space:nowrap;
  outline:1px solid transparent;outline-offset:-1px}
.perm-op>span:hover{background:var(--sup-rebaixada);color:var(--txt-fraco)}
.perm-op>span.on{font-weight:var(--font-weight-semibold)}
.perm-op>span.on.oc{background:var(--sup-rebaixada);color:var(--txt-fraco);
  outline-color:var(--linha)}
.perm-op>span.on.neg{background:var(--er-fundo);color:var(--er);outline-color:var(--er-linha)}
.perm-op>span.on.apr{background:var(--av-fundo);color:var(--av);outline-color:var(--av-linha)}
.perm-op>span.on.lib{background:var(--ok-fundo);color:var(--ok);outline-color:var(--ok-linha)}

/* a mesma grade como MATRIZ: recursos nas linhas, verbos nas colunas, um
   estado por célula. O traço não é estado — é verbo que o recurso não tem. */
.perm-grade{width:100%;border-collapse:collapse;font-size:.71875rem}
.perm-grade th{font-weight:var(--font-weight-medium);text-align:left;padding:.375rem .5rem;
  color:var(--txt-fraco);font-size:.6875rem;white-space:nowrap}
.perm-grade thead th{text-align:center;text-transform:lowercase;letter-spacing:.02em;
  border-bottom:1px solid var(--linha-fina)}
.perm-grade tbody th{color:var(--txt-forte);font-weight:var(--font-weight-normal);
  font-size:.75rem}
.perm-grade td{text-align:center;padding:.25rem .375rem;border-top:1px solid var(--linha-fina);
  position:relative;vertical-align:middle}
.perm-grade td .perm-op{justify-content:center}
.perm-grade td .perm-op>span{cursor:pointer}
.perm-grade tr.perm-grupo th{padding-top:.75rem;font-size:.5625rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--txt-apagado);font-weight:var(--font-weight-semibold)}
.perm-grade tr.perm-grupo th span{text-transform:none;letter-spacing:0;font-weight:var(--font-weight-normal);
  margin-left:.375rem}
.perm-grade .perm-sub{display:block;font-size:.625rem;color:var(--txt-apagado);
  font-weight:var(--font-weight-normal)}
.perm-nao{color:var(--linha);font-size:.75rem}
.perm-nota{display:block;font-size:.5625rem;color:var(--txt-apagado);margin-top:.125rem;
  white-space:nowrap}
/* a célula aberta: o balão com os quatro estados, ancorado nela */
.perm-aberta{outline:1px solid var(--linha-marca);outline-offset:-1px;
  border-radius:var(--radius-md);background:var(--sup-cartao)}
.perm-pop{position:absolute;top:calc(100% + .375rem);left:50%;transform:translateX(-50%);
  z-index:40;width:19rem;padding:.625rem .75rem;text-align:left;
  background:var(--sup-cartao);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.perm-esc{display:flex;align-items:center;gap:.5rem;padding:.25rem .375rem;
  border-radius:var(--radius-md);font-size:.6875rem;color:var(--txt-fraco)}
.perm-esc.on{background:var(--sup-rebaixada);color:var(--txt-forte)}
.perm-esc .perm-op>span{min-width:5.5rem;text-align:center}

/* ---------- ONDA 7 · GAVETA, CONTADOR E PÁGINA INTEIRA --------------------- */
/* gaveta: painel que entra pela direita SEM tirar a tela de baixo do lugar.
   É para o que se consulta enquanto se trabalha — a fila, os avisos. Decisão
   que não pode ser interrompida continua em diálogo, com véu. */
.gaveta{width:23rem;flex-shrink:0;background:var(--sup-cartao);display:flex;
  flex-direction:column;box-shadow:-1px 0 0 var(--linha-cartao)}
.gaveta>.cab{height:3rem;flex-shrink:0;display:flex;align-items:center;gap:.5rem;
  padding:0 .875rem;box-shadow:0 1px 0 var(--linha-cartao)}
.gaveta>.cab .tit{font-size:.84375rem;font-weight:var(--font-weight-semibold);flex:1}
.gaveta>.corpo{flex:1;overflow:hidden;padding:.75rem}
.gaveta>.pe{flex-shrink:0;padding:.6875rem .875rem;box-shadow:0 -1px 0 var(--linha-cartao)}

/* contador de ícone da barra do topo: número, não bolinha. O sino só precisa
   avisar QUE há algo; a fila precisa dizer QUANTOS — é o que decide se o
   atendente levanta agora ou termina o que está fazendo. */
.ic-topo{position:relative;display:flex;color:var(--txt-fraco);cursor:pointer}
.ic-topo:hover{color:var(--txt-forte)}
.ic-topo .conta{position:absolute;top:-.3125rem;right:-.375rem;height:.9375rem;
  min-width:.9375rem;padding:0 .1875rem;border-radius:9999px;background:var(--er-icone);
  color:#fff;font-size:.5625rem;font-weight:var(--font-weight-semibold);
  display:grid;place-items:center;line-height:1}
/* agendamento é o único que não é vermelho: ele não pede reação agora — a hora
   ainda vai chegar. Vermelho ali competiria com o que de fato está esperando. */
.ic-topo .conta.info{background:var(--acao);color:var(--txt-sobre-acao)}

/* estado de página inteira: 404, sem permissão, sem rede, manutenção. Ocupa o
   miolo, nunca a barra do topo nem o menu — o usuário precisa continuar
   podendo ir para outro lugar. */
.pag-estado{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:2rem;gap:.5rem}
.pag-estado .ic{width:3.5rem;height:3.5rem;border-radius:9999px;display:grid;
  place-items:center;background:var(--sup-rebaixada);color:var(--txt-fraco);
  margin-bottom:.375rem}
.pag-estado .cod{font-size:.65625rem;color:var(--txt-apagado);letter-spacing:.08em}
.pag-estado .tit{font-size:1.0625rem;font-weight:var(--font-weight-semibold)}
.pag-estado .txt{font-size:.8125rem;color:var(--txt-fraco);max-width:26rem;line-height:1.55}
.pag-estado .bts{display:flex;gap:.5rem;margin-top:.625rem}

/* senha da fila de atendimento */
.senha{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;
  border-radius:var(--radius-md);cursor:pointer}
.senha:hover{background:var(--sup-hover)}
.senha.on{background:var(--sup-selecionada)}
.senha .num{font-size:.84375rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;width:3.25rem;flex-shrink:0}
.senha .quem{flex:1;min-width:0;font-size:.78125rem}
.senha .quem .sub{font-size:.65625rem;color:var(--txt-fraco);margin-top:.0625rem}
.senha{position:relative}
.senha .esp{font-size:.65625rem;color:var(--txt-fraco);font-variant-numeric:tabular-nums;
  flex-shrink:0}
/* o menu de cada senha só aparece na linha sob o cursor — mas a linha inteira
   continua clicável para abrir o atendimento */
/* o menu de cada senha abre por clique e fica sempre visível: escondê-lo no
   hover esconde o único caminho para chamar uma senha fora da ordem */
.senha .maisi{flex-shrink:0}
/* marca de valor que se atualiza sozinho — o ponto pisca no mesmo ritmo da
   atualização, um segundo, para o número não parecer congelado */
.pulso{width:.375rem;height:.375rem;border-radius:9999px;background:var(--ok);
  animation:pisca 1s ease-in-out infinite;flex-shrink:0}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}
/* os tempos médios são o termômetro da fila: se ficam do tamanho de nota de
   rodapé, ninguém lê — e é justamente o número que diz se a fila está grande
   porque chegou gente ou porque alguém travou num atendimento */
.med{display:flex;align-items:center;gap:.75rem;padding:.5rem .625rem;
  border-radius:var(--radius-lg);background:var(--sup-rebaixada)}
.med{margin:.125rem .125rem .5rem}
.med>.ic{color:var(--txt-fraco);display:flex;flex-shrink:0}
.med .par{display:flex;flex-direction:column;gap:.0625rem}
.med .par .rot-med{font-size:.5625rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--txt-apagado);white-space:nowrap}
.med .par .val{font-size:.9375rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;line-height:1.1}
.med .risco{width:1px;align-self:stretch;background:var(--linha-fina)}
/* a senha chamada ocupa o rodapé da gaveta: enquanto ela está lá, chamar a
   próxima não é o que se quer fazer — o balcão tem uma pessoa pendente */
.chamada{border-radius:var(--radius-lg);padding:.875rem;background:var(--sup-selecionada);
  display:flex;flex-direction:column;min-height:9.875rem}
/* o botão desce para a base: com ou sem O.S. vinculada, o card tem a mesma
   altura e o botão fica sempre no mesmo lugar da tela */
.chamada>.btn:last-child{margin-top:auto}
.chamada .cod-at{display:flex;align-items:center;gap:.375rem;margin-top:.5rem;
  font-size:.625rem;color:var(--txt-fraco);font-variant-numeric:tabular-nums}
.chamada .os{display:flex;align-items:center;gap:.375rem;margin-top:.375rem;
  padding:.3125rem .4375rem;border-radius:var(--radius-md);background:var(--sup-cartao);
  font-size:.6875rem;cursor:pointer}
.chamada .os:hover{outline:1px solid var(--acao);outline-offset:-1px}
.chamada .os .n-os{font-weight:var(--font-weight-semibold);color:var(--txt-marca);
  font-variant-numeric:tabular-nums}
.chamada.atendendo{background:var(--ok-fundo)}
.chamada>.linha{display:flex;align-items:center;gap:.625rem}
.chamada .sen{font-size:1.5rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.chamada .cron{font-size:1.5rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;line-height:1.1}
.chamada .quem{font-size:.8125rem;color:var(--txt-forte);
  font-weight:var(--font-weight-medium)}
.chamada .sub{font-size:.6875rem;color:var(--txt-fraco);margin-top:.0625rem}
/* as três saídas são secundárias, não apagadas: quem chamou precisa achá-las
   sem procurar — contorno, altura de botão de verdade e o mesmo texto escuro */
.chamada .bts{display:flex;gap:.375rem;margin-top:.75rem}
.chamada .bts>.btn{flex:1;height:2rem;font-size:.75rem;padding:0 .5rem}
/* preferencial é grupo, não etiqueta solta: a lei manda atender antes, e quem
   confere a ordem é a pessoa — ela precisa ver os dois blocos de uma vez */
.gr-fila{margin-bottom:.5rem}
.gr-fila>.cab{display:flex;align-items:center;gap:.375rem;padding:0 .625rem .1875rem;
  font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-apagado)}
.gr-fila>.cab .qtd-gr{font-variant-numeric:tabular-nums}
.gr-fila.pref>.cab{color:var(--av)}
/* a preferencial é amarela SEMPRE, agrupada ou intercalada: é a cor que faz o
   atendente enxergar de longe que aquela linha vem antes */
.senha.pref{background:var(--av-fundo)}
.senha.pref:hover{background:var(--av-fundo);filter:brightness(.98)}
.senha.pref.on{background:var(--av-fundo);outline:2px solid var(--av-linha);
  outline-offset:-2px}
.senha .marca-pref{padding:.0625rem .375rem;flex-shrink:0}

/* ---------- ONDA 7 · ASSINATURA EM TELA ------------------------------------ */
/* a moldura do tablet: ela existe para lembrar, em toda prancheta, que aquele
   conteúdo é visto por CLIENTE — outra distância dos olhos, outro toque, e
   nenhum treinamento */
.tablet{width:22rem;flex-shrink:0;border-radius:1.25rem;padding:.75rem;
  background:var(--color-zinc-900);box-shadow:var(--shadow-lg)}
.tablet>.tela{border-radius:.75rem;background:var(--papel-branco);overflow:hidden;
  display:flex;flex-direction:column}
.tablet .cli-cab{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;
  border-bottom:1px solid var(--linha-fina)}
.tablet .cli-corpo{padding:.75rem}
/* a faixa onde se assina: tracejada, alta, e com a linha de base impressa —
   sem linha o cliente assina no meio do nada e a imagem sai torta */
.assina-area{height:8.5rem;border-radius:var(--radius-lg);position:relative;
  outline:2px dashed var(--linha);outline-offset:-2px;display:grid;place-items:center}
.assina-area .base{position:absolute;left:1.5rem;right:1.5rem;bottom:2.25rem;height:1px;
  background:var(--linha)}
.assina-area .dica{position:absolute;left:1.5rem;bottom:1.25rem;font-size:.6875rem;
  color:var(--txt-apagado)}
/* a nota da pesquisa: estrelas, com alvo grande — é dedo em tela e uma vez só.
   Estrela porque não precisa de legenda: ninguém confunde três estrelas com
   três de dez, e a escala já vem aprendida de fora do cartório. */
.nota{width:3rem;height:3rem;border-radius:var(--radius-lg);display:grid;
  place-items:center;cursor:pointer;color:var(--txt-apagado)}
.nota.on{color:var(--av-icone)}
.nota.on svg{fill:var(--av-icone)}
/* resultado de uma operação na tela do cliente: acerto em verde, problema em
   âmbar — nunca vermelho, que na frente do balcão soa como acusação */
.res-cli{width:4rem;height:4rem;border-radius:9999px;display:grid;place-items:center;
  margin:0 auto}
.res-cli.ok{background:var(--ok-fundo);color:var(--ok)}
.res-cli.pend{background:var(--av-fundo);color:var(--av)}
/* ---------- ONDA 7 · TV DA SALA DE ESPERA E TOTEM -------------------------- */
/* A TV é vista a cinco metros, em pé, por quem está ansioso. Nada aqui segue as
   escalas do sistema: o menor texto da TV é maior que o maior texto da tela de
   trabalho. Por isso ela tem tokens próprios em vez de reaproveitar os de UI. */
/* azul da marca, não preto: a TV fica ligada oito horas numa sala com luz de
   teto, e preto puro vira espelho. O azul escuro do manual dá o mesmo contraste
   sem refletir a sala inteira — e é a cor que a pessoa associa ao cartório. */
.tv{background:var(--marca-800);color:#fff;display:flex;
  flex-direction:column;overflow:hidden;
  --tv-linha:rgb(255 255 255 / .16); --tv-fraco:rgb(255 255 255 / .68);
  --tv-apagado:rgb(255 255 255 / .48); --tv-piscada:rgb(255 255 255 / .10)}
.tv .fraco{color:var(--tv-fraco)}
.tv .apagado{color:var(--tv-apagado)}
.tv .tv-cab{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;
  border-bottom:1px solid var(--tv-linha)}
.tv .tv-hora{font-size:1.75rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;line-height:1}
.tv .tv-chamada{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;padding:1.5rem 2rem}
.tv .tv-senha{font-size:6rem;font-weight:var(--font-weight-bold);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tv .tv-posto{font-size:2.5rem;font-weight:var(--font-weight-semibold);line-height:1.1;
  color:var(--marca-300)}
.tv .tv-rot{font-size:1rem;color:var(--tv-fraco);text-transform:uppercase;
  letter-spacing:.12em}
.tv .tv-lado{width:16rem;flex-shrink:0;border-left:1px solid var(--tv-linha);
  padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.625rem}
.tv .tv-ant{display:flex;align-items:baseline;gap:.625rem;
  font-variant-numeric:tabular-nums}
.tv .tv-ant .sen{font-size:1.375rem;font-weight:var(--font-weight-semibold)}
.tv .tv-ant .posto{font-size:.9375rem;color:var(--tv-fraco)}
.tv .tv-pe{padding:.875rem 1.5rem;border-top:1px solid var(--tv-linha);
  display:flex;align-items:center;gap:1rem;font-size:1.0625rem;color:var(--tv-fraco)}
/* o piscar da chamada nova: dois segundos, e nunca no texto — no fundo, porque
   texto piscando não se lê justamente quando mais se precisa dele */
.tv .tv-chamada.nova{background:var(--tv-piscada)}
/* segunda opção de fundo: o azul de ação, mais claro e mais “comum” que o azul
   escuro do manual. Mesma família, outra temperatura — o cartório escolhe. */
.tv.claro{background:var(--marca-500)}
.tv.claro{--tv-linha:rgb(255 255 255 / .22); --tv-fraco:rgb(255 255 255 / .78);
  --tv-apagado:rgb(255 255 255 / .58); --tv-piscada:rgb(255 255 255 / .14)}
.tv.claro .tv-posto{color:#fff}

/* o totem: um botão por serviço, do tamanho de uma mão */
.tot-bt{display:flex;align-items:center;gap:.875rem;padding:1.125rem 1.25rem;
  border-radius:var(--radius-xl);background:var(--sup-cartao);
  outline:1px solid var(--linha);outline-offset:-1px;cursor:pointer}
.tot-bt .rot-bt{font-size:1.25rem;font-weight:var(--font-weight-semibold);flex:1;
  text-align:left}
.tot-bt .esp-bt{font-size:.9375rem;color:var(--txt-fraco)}
.tot-bt.forte{background:var(--acao);color:var(--txt-sobre-acao);outline:0}
.tot-bt.forte .esp-bt{color:var(--txt-sobre-acao);opacity:.75}
/* o papel saindo da impressora: a pessoa precisa saber que a máquina está
   fazendo alguma coisa antes de a senha cair na bandeja, senão ela toca de novo */
.impressora{width:13rem;margin:0 auto;position:relative}
.impressora .fenda{height:.5rem;border-radius:9999px;background:var(--color-zinc-800)}
/* a área do papel tem altura RESERVADA: o cupom cresce dentro dela e o texto de
   baixo fica onde está. Layout que anda junto com a animação faz a pessoa
   perder a linha que estava lendo. */
.impressora>.vao{height:var(--vao-papel,13rem);overflow:hidden}
/* o papel DESLIZA para fora da fenda, recortado pelo vão — não “cresce”.
   Crescer por max-height dá um movimento que acelera e para sozinho; a
   impressora de verdade empurra o papel em velocidade constante, e é isso que
   faz a pessoa entender que a máquina está trabalhando. Por isso: linear. */
.impressora .papel{width:11rem;margin:0 auto;padding:.5rem .625rem 2rem;
  border-radius:0 0 .25rem .25rem;background:var(--papel-branco);
  color:var(--color-zinc-900);box-shadow:var(--shadow-sm);text-align:center;
  animation:sai-papel 7s linear infinite}
@keyframes sai-papel{
  0%   {transform:translateY(-102%); opacity:0}
  4%   {transform:translateY(-102%); opacity:1}
  46%  {transform:translateY(0);     opacity:1}
  90%  {transform:translateY(0);     opacity:1}
  97%  {transform:translateY(0);     opacity:0}
  100% {transform:translateY(-102%); opacity:0}
}

/* ---------- ONDA 7 · IMPRESSÃO --------------------------------------------- */
/* A folha na tela é a folha no papel: A4 em proporção, margens de verdade e
   nenhuma cor de interface. Tudo o que aparece aqui tem que existir depois de
   impresso — sombra, hover e badge não sobrevivem à impressora. */
.folha{width:100%;aspect-ratio:1/1.414;background:var(--papel-branco);
  color:var(--color-zinc-900);box-shadow:var(--shadow-md);display:flex;
  flex-direction:column;overflow:hidden;font-size:.5rem;line-height:1.55}
.folha.paisagem{aspect-ratio:1.414/1}
.folha>.cab-f{display:flex;align-items:center;gap:.5rem;padding:1.25rem 1.5rem .75rem;
  border-bottom:1px solid var(--color-zinc-300)}
.folha>.corpo-f{flex:1;padding:1rem 1.5rem;min-height:0}
.folha>.pe-f{padding:.625rem 1.5rem 1rem;border-top:1px solid var(--color-zinc-300);
  display:flex;align-items:flex-end;gap:.75rem;font-size:.4375rem;
  color:var(--color-zinc-500)}
.folha .t-f{font-size:.75rem;font-weight:var(--font-weight-semibold);line-height:1.25}
.folha .sub-f{font-size:.5rem;color:var(--color-zinc-500)}
/* a régua de margem: só existe na prancheta, para mostrar onde o papel acaba */
.margem{position:relative}
.margem::after{content:"";position:absolute;inset:1.5rem;pointer-events:none;
  outline:1px dashed var(--acao);opacity:.35}
/* ---------- ONDA 7 · NOTIFICAÇÕES E BUSCA GLOBAL --------------------------- */
/* uma notificação é uma linha clicável inteira: o alvo é a linha, não o link */
.notif{display:flex;gap:.625rem;padding:.5625rem .625rem;border-radius:var(--radius-md);
  cursor:pointer;position:relative}
.notif:hover{background:var(--sup-hover)}
.notif>.ic{width:1.75rem;height:1.75rem;border-radius:9999px;display:grid;
  place-items:center;flex-shrink:0;background:var(--sup-rebaixada);color:var(--txt-fraco)}
.notif.aviso>.ic{background:var(--av-fundo);color:var(--av)}
.notif.erro>.ic{background:var(--er-fundo);color:var(--er)}
.notif.ok>.ic{background:var(--ok-fundo);color:var(--ok)}
.notif .t{font-size:.75rem;font-weight:var(--font-weight-medium);line-height:1.35}
.notif .d{font-size:.6875rem;color:var(--txt-fraco);line-height:1.45;margin-top:.0625rem}
.notif .q{font-size:.625rem;color:var(--txt-apagado);white-space:nowrap;flex-shrink:0}
/* o ponto de não lida fica na margem, fora do texto: dentro dele viraria mais
   um enfeite competindo com o próprio aviso */
.notif .ponto-novo{position:absolute;left:.125rem;top:1.0625rem;width:.375rem;height:.375rem;
  border-radius:9999px;background:var(--acao)}
.notif.lida .t{font-weight:var(--font-weight-normal);color:var(--txt-fraco)}

/* a paleta de comando: um campo, uma lista, e o teclado como caminho principal */
.paleta{width:38rem;border-radius:var(--radius-xl);background:var(--sup-cartao);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  overflow:hidden;display:flex;flex-direction:column}
.paleta>.campo{display:flex;align-items:center;gap:.625rem;padding:.875rem 1rem;
  box-shadow:0 1px 0 var(--linha-fina)}
.paleta>.campo input,.paleta>.campo .txt{flex:1;font-size:1rem;color:var(--txt-forte)}
.paleta>.campo .txt.vazio{color:var(--txt-apagado)}
.paleta>.lista{padding:.375rem;max-height:24rem;overflow:hidden}
.paleta .gr{font-size:.5625rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-apagado);padding:.5rem .625rem .25rem}
.paleta .res{display:flex;align-items:center;gap:.625rem;padding:.4375rem .625rem;
  border-radius:var(--radius-md);cursor:pointer}
.paleta .res.on{background:var(--sup-selecionada)}
.paleta .res .t{font-size:.8125rem;flex:1;min-width:0}
.paleta .res .s{font-size:.6875rem;color:var(--txt-fraco)}
.paleta>.pe{display:flex;align-items:center;gap:.875rem;padding:.5rem .875rem;
  box-shadow:0 -1px 0 var(--linha-fina);font-size:.65625rem;color:var(--txt-apagado)}
.paleta>.pe .kbd{font-size:.5625rem}
/* ---------- ONDA 7 · SELEÇÃO EM LOTE --------------------------------------- */
/* o meio-marcado já existe na folha como .cx.ind — traço, não visto */
/* a barra do lote flutua sobre a tabela: ela só existe enquanto há seleção, e
   sair dela é desmarcar — por isso o × fica dentro, e não num canto distante */
/* a barra da seleção é azul CLARO: ela aparece por cima da tabela e some ao
   limpar, e uma faixa escura no meio da tela pesa como se fosse permanente */
.barra-lote{display:flex;align-items:center;gap:.75rem;padding:.5rem .5rem .5rem .875rem;
  border-radius:var(--radius-lg);background:var(--sup-selecionada);color:var(--txt-forte);
  outline:1px solid var(--acao);outline-offset:-1px;box-shadow:var(--shadow-sm)}
.barra-lote .cont{font-size:.8125rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--txt-marca)}
.barra-lote .tudo{font-size:.71875rem;color:var(--txt-marca);white-space:nowrap;
  cursor:pointer;text-decoration:underline}
.barra-lote .risco{width:1px;align-self:stretch;background:var(--linha)}
.barra-lote .ac{display:flex;align-items:center;gap:.375rem;height:1.875rem;
  padding:0 .625rem;border-radius:var(--radius-md);font-size:.75rem;
  font-weight:var(--font-weight-medium);cursor:pointer;white-space:nowrap;
  background:var(--sup-cartao);box-shadow:var(--shadow-sm)}
.barra-lote .ac:hover{background:var(--sup-cartao);filter:brightness(.97)}
.barra-lote .ac.destr{color:var(--er)}

/* ---------- ONDA 7 · E-MAIL ------------------------------------------------ */
/* O e-mail não é tela: ele é lido no Gmail de um celular, com a metade das
   fontes indisponível e as imagens bloqueadas por padrão. Por isso ele tem
   escala própria, fundo branco fixo e nada que dependa de cor para ser
   entendido. */
.msg{width:100%;background:var(--papel-branco);color:var(--color-zinc-900);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;
  display:flex;flex-direction:column;font-size:.8125rem;line-height:1.6}
.msg>.de{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;
  background:var(--sup-rebaixada);color:var(--txt-fraco);font-size:.6875rem}
.msg>.de .assunto{color:var(--txt-forte);font-weight:var(--font-weight-semibold);
  font-size:.75rem}
.msg>.cab-m{padding:1.125rem 1.25rem .75rem;border-bottom:1px solid var(--color-zinc-200)}
.msg>.corpo-m{padding:1.125rem 1.25rem}
.msg>.pe-m{padding:.875rem 1.25rem 1.125rem;border-top:1px solid var(--color-zinc-200);
  font-size:.6875rem;color:var(--color-zinc-500);line-height:1.55}
.msg .bt-m{display:inline-block;padding:.625rem 1.125rem;border-radius:var(--radius-md);
  background:var(--acao);color:#fff;font-size:.8125rem;
  font-weight:var(--font-weight-semibold)}
.msg .cx-m{margin:.875rem 0;padding:.75rem .875rem;border-radius:var(--radius-md);
  background:var(--sup-rebaixada);font-size:.75rem;line-height:1.6}
/* a grade do meio: rótulo à esquerda, valor à direita, uma linha por dado.
   É o que a pessoa confere de relance e o que ela copia para o WhatsApp — em
   parágrafo, esses mesmos dados viram um texto que ninguém lê até o fim. */
.msg .grade-m{margin:.875rem 0;border-top:1px solid var(--color-zinc-200)}
.msg .grade-m>div{display:flex;gap:.75rem;padding:.4375rem 0;
  border-bottom:1px solid var(--color-zinc-200)}
.msg .grade-m .rot-m{width:7.5rem;flex-shrink:0;color:var(--color-zinc-500);font-size:.75rem}
.msg .grade-m .val-m{flex:1;min-width:0;font-size:.75rem;text-align:right;
  font-weight:var(--font-weight-medium)}
.msg .grade-m .val-m.forte{font-size:.9375rem;font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums}

/* ---------- MOVIMENTO ------------------------------------------------------ */
/* Quem pede menos movimento no sistema operacional está dizendo que animação
   lhe faz mal — enjoo, enxaqueca, distração. O papel do totem, o pulso do
   cronômetro e o brilho do esqueleto param; nada do que eles comunicavam se
   perde, porque nenhum deles era a única fonte da informação. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1
    !important;transition-duration:.001ms!important}
  .impressora .papel{transform:none;opacity:1}
}

/* ---------- RESPONSIVO (§1.2) ---------------------------------------------- */
/* Três larguras, e a decisão em cada uma é sobre O QUE SAI, não sobre o que
   encolhe: fonte menor e coluna espremida não fazem caber, só fazem doer.

   ≥1100  · a gaveta DIVIDE a largura com o trabalho
   <1100  · a gaveta COBRE, com véu — não sobra largura para as duas
   <768   · uma coisa por vez: menu vira botão, tabela vira lista */
@media (max-width:1023px){ .so-desktop{display:none} }

@media (max-width:1099px){
  /* a gaveta deixa de dividir e passa a cobrir. É a mesma gaveta: mesmo
     conteúdo, mesma ordem, mesmo rodapé — só o encaixe muda. */
  .gaveta{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(23rem,88vw);
    box-shadow:var(--sombra-janela)}
  .gaveta-veu{position:fixed;inset:0;z-index:39;background:var(--veu)}
}

@media (max-width:767px){
  .grid{grid-template-columns:1fr}          /* formulário empilha */
  .rola-x{overflow-x:auto}                  /* tabela rola        */
  .rola-x>table{min-width:44rem}
  /* tabela vira lista: cada linha é um bloco com rótulo antes do valor, porque
     rolar a tabela para o lado esconde justamente a coluna que identifica */
  .lista-mob tbody tr{display:block;padding:.625rem 0;
    border-bottom:1px solid var(--linha-fina)}
  .lista-mob tbody td{display:flex;gap:.625rem;border:0;padding:.125rem 0}
  .lista-mob tbody td::before{content:attr(data-rot);width:6.5rem;flex-shrink:0;
    color:var(--txt-fraco);font-size:.6875rem}
  .lista-mob thead{display:none}
}

/* ---------- LAYOUT DA APLICAÇÃO (18) ---------------------------------------
   As pranchetas são estáticas e por isso usam style inline para layout. O
   sistema não pode: markup com estilo inline não se mantém. Estas classes são
   os mesmos padrões, nomeados — e as pranchetas podem adotá-las quando
   forem revisitadas.                                                        */

/* a moldura */
/* a moldura é uma JANELA: ocupa a tela e não cresce com o conteúdo. Quem
   rola é o miolo. Sem isto a barra lateral cresce junto com a tabela e o
   botão do rodapé dela vai parar a três telas de distância. */
.shell{height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--sup-pagina)}
.shell-topo{height:3.5rem;flex-shrink:0;display:flex;align-items:center;gap:.75rem;
  padding:0 1.25rem;background:var(--sup-cartao);box-shadow:0 1px 0 var(--linha-cartao)}
.shell-topo .marca{font-size:.9375rem;font-weight:var(--font-weight-semibold);
  color:var(--txt-marca);text-decoration:none}
.shell-meio{flex:1;display:flex;min-height:0}
.shell-lado{width:13.25rem;flex-shrink:0;background:var(--sup-cartao);display:flex;
  flex-direction:column;padding:.75rem .625rem;gap:.125rem;overflow-y:auto;
  box-shadow:1px 0 0 var(--linha-cartao)}
.shell-lado.rec{width:3.75rem;align-items:center;padding:.75rem 0}
/* a navegação ocupa a altura toda para que o botão do rodapé fique SEMPRE no
   rodapé — aberta ou recolhida, com dois itens ou com vinte. Antes ele caía
   logo abaixo do último item numa hora e lá embaixo noutra: ninguém achava. */
.shell-lado>.nav{flex:1;min-height:0;display:flex;flex-direction:column;
  gap:.125rem}
.shell-corpo{flex:1;min-width:0;display:flex;flex-direction:column}
.shell-corpo>main{flex:1;padding:1.5rem;overflow:auto}

/* a navegação: módulo e item, e o mesmo desenho recolhido */
.nav-mod{display:flex;align-items:center;gap:.5625rem;height:2rem;padding:0 .625rem;
  border-radius:var(--radius-md);font-size:var(--d-text-ui);color:var(--txt-fraco);
  text-decoration:none;cursor:pointer}
.nav-mod:hover{background:var(--sup-hover)}
.nav-mod.on{background:var(--sup-rebaixada);color:var(--txt-marca);
  font-weight:var(--font-weight-semibold)}
.nav-item{display:block;padding:.25rem .625rem .25rem 2.25rem;font-size:.75rem;
  color:var(--txt-fraco);text-decoration:none;border-radius:var(--radius-sm)}
.nav-item:hover{background:var(--sup-hover);color:var(--txt-forte)}
.nav-item.on{color:var(--txt-marca);font-weight:var(--font-weight-semibold);
  background:var(--sup-rebaixada)}
.nav-rec{width:2.375rem;height:2.125rem;border-radius:var(--radius-md);display:grid;
  place-items:center;color:var(--txt-fraco);margin-bottom:.1875rem}
.nav-rec.on{background:var(--sup-rebaixada);color:var(--txt-marca)}

/* migalhas */
.migalhas{height:1.875rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;
  padding:0 1.5rem;font-size:.6875rem;color:var(--txt-fraco)}
.migalhas .aqui{font-weight:var(--font-weight-medium);color:var(--txt-forte)}

/* a página: título, chamada e as pilhas */
.pagina>h1{margin-bottom:.1875rem}
.pagina-desc{margin:0 0 1.5rem;font-size:.8125rem;color:var(--txt-fraco);max-width:56rem;
  line-height:1.55}
.pilha{display:flex;flex-direction:column;gap:1rem}
.duas{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;align-items:start}
.duas.igual{grid-template-columns:1fr 1fr}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}

/* a grade de campos: seis colunas, como em toda prancheta de formulário */
.grade{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.campo>.lbl{display:block}
.campo .nota,.perfil-pref .nota{width:auto;height:auto;display:block;font-size:.625rem;
  color:var(--txt-fraco);margin-top:.25rem;line-height:1.45}   /* o .nota de 3rem é a carinha da pesquisa */

/* a barra de ações no fim do formulário */
.acoes-fim{display:flex;gap:.5rem;align-items:center;margin-top:1.125rem;
  padding-top:.875rem;border-top:1px solid var(--linha-fina)}
.acoes-fim .espaco{flex:1}

/* entrada: a porta. É a caixa `.login` da prancheta «Entrada e senha»,
   centrada na página inteira e sem moldura — quem está aqui ainda não provou
   quem é. As mesmas peças servem ao código, à senha nova e à tela trancada. */
.porta{display:grid;place-items:center;min-height:100vh;padding:1.5rem;
  background:var(--sup-pagina)}
.porta .login{margin:0 auto}
.porta-marca{margin-bottom:1.375rem}
.login h1{font-size:1rem;font-weight:var(--font-weight-semibold);margin:0 0 .25rem;
  letter-spacing:0;line-height:1.3}
.login .sub{font-size:.78125rem;color:var(--txt-fraco);margin:0 0 1.125rem;line-height:1.5}
.login .sub b{color:var(--txt-forte)}
.login .lbl-linha{display:flex;align-items:baseline;gap:.5rem}
.login .lbl-linha>.lbl{flex:1}
.login .lbl-linha>a{font-size:.6875rem}
.login .campo+.campo,.login .campo+.lbl,.login .campo+.lbl-linha,
.login .alerta+.lbl,.login .alerta+.lbl-linha{margin-top:.75rem}
.login .alerta{margin-bottom:.875rem}
.login .cheio{width:100%;margin-top:1.125rem}
.login .cheio+.cheio{margin-top:.5rem}
.login .ou{display:flex;align-items:center;gap:.625rem;margin:1.125rem 0;
  font-size:.65625rem;color:var(--txt-apagado)}
.login .ou::before,.login .ou::after{content:"";flex:1;height:1px;background:var(--linha-fina)}
.login .selo{width:2.625rem;height:2.625rem;border-radius:9999px;display:grid;
  place-items:center;margin-bottom:1rem;background:var(--acao-suave);color:var(--acao)}
.login .selo.ok{background:var(--ok-fundo);color:var(--ok)}
.login .miudo{font-size:.65625rem;color:var(--txt-fraco);margin-top:.875rem;line-height:1.5}
.login .miudo b{color:var(--txt-forte)}
/* a confirmação (tela 3) e o link que não vale mais: o parágrafo principal
   encosta na nota de baixo, que é um degrau menor (prancheta) */
.login .sub.junta{margin-bottom:.875rem;line-height:1.55}
.login .aviso{font-size:.6875rem;color:var(--txt-fraco);line-height:1.5;margin:0}
/* a caixa do código (prancheta «Sessão e segundo fator»): o prazo abaixo das
   seis caixas, o botão colado nele, e «enviar de novo» como botão que parece
   link — é POST, nunca GET, e pertence a outro form pelo atributo `form=` para
   que o Enter numa caixa envie o código, não o pedido de reenvio. */
.login .otp{margin-bottom:.875rem}
.login .prazo{font-size:.6875rem;color:var(--txt-fraco);line-height:1.5;margin:0 0 1rem}
.login .prazo+.cheio{margin-top:0}
.login .elo{background:none;border:0;padding:0;font:inherit;font-size:inherit;
  color:var(--acao);cursor:pointer}
.login .elo:hover{opacity:.85}
.login .elo:focus-visible{outline:2px solid var(--foco);outline-offset:2px;
  border-radius:var(--radius-xs)}
.login .marc.confiar{margin-top:1rem}
.login .marc.confiar>label{font-size:.75rem}
.login form.rodape-porta{margin-top:.5rem}
.login form.rodape-porta>.cheio{margin-top:0}
.login .marc{margin-top:1rem}
.login.larga{width:25rem;padding:0}
.login.larga>.miolo{padding:1.125rem 1.25rem 1.5rem}
/* o olho do campo de senha é um botão de verdade: recebe clique e foco */
.campo>.fim.olho{pointer-events:auto;cursor:pointer;color:var(--txt-fraco);background:none;
  border:0;padding:0;font:inherit}
.campo>.fim.olho:hover{color:var(--txt-forte)}
/* o ícone que não vale no momento some — o `svg{display:block}` da base
   venceria o `hidden` do navegador */
.campo>.fim.olho>[hidden]{display:none}
/* o campo de arquivo (o .pfx do certificado): o mesmo contorno dos outros, e
   o botão nativo com a cara de botão da folha */
input[type=file].arquivo{padding:0 .375rem;cursor:pointer;font-size:.75rem;color:var(--txt-fraco)}
input[type=file].arquivo::file-selector-button{height:1.625rem;margin:0 .5rem 0 0;padding:0 .625rem;
  border:0;border-radius:var(--radius-sm);background:var(--sup-rebaixada);color:var(--txt-forte);
  font:inherit;font-size:.71875rem;font-weight:var(--font-weight-medium);cursor:pointer}
.login .ou+.cheio,.login .btn.cheio+.btn.cheio{margin-top:.5rem}
/* botão de rótulo longo: quebra a linha em vez de vazar da caixa */
.login .btn.quebra{height:auto;min-height:var(--d-control-h);padding:.5rem .875rem;
  white-space:normal;text-align:center;line-height:1.3}
.campo>.fim.olho:focus-visible{outline:2px solid var(--foco);outline-offset:2px;
  border-radius:var(--radius-xs)}
/* as regras da senha, com o visto de cada uma (tela 4 da prancheta) */
.reqs{margin:.5rem 0 .875rem}
.req{display:flex;gap:.4375rem;align-items:center;font-size:.6875rem;
  color:var(--txt-apagado);margin-bottom:.1875rem}
.req.ok{color:var(--ok)} .req.falta{color:var(--er)}
/* as seis caixas do código, como campos de verdade */
.otp>input{width:2.5rem;height:3rem;padding:0;text-align:center;font-size:1.125rem;
  font-weight:var(--font-weight-semibold);border-radius:var(--radius-md);
  font-variant-numeric:tabular-nums}
.otp>input:focus{outline:2px solid var(--foco);outline-offset:-2px}
/* a caixa de marcar como campo de verdade — o mesmo desenho do `.cx` */
input[type=checkbox].cx{appearance:none;-webkit-appearance:none;width:.9375rem;
  height:.9375rem;padding:0;margin:0;cursor:pointer;display:grid;place-items:center;
  border-radius:var(--radius-xs);outline:1px solid var(--linha);outline-offset:-1px;
  background:var(--sup-cartao)}
input[type=checkbox].cx:checked{background:var(--acao);outline-color:var(--acao)}
input[type=checkbox].cx:checked::after{content:"";width:.4375rem;height:.1875rem;
  margin-top:-.125rem;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg)}
input[type=checkbox].cx:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.marc>label,label.marc{cursor:pointer;margin:0;font-weight:400;font-size:.75rem}
/* a sessão trancada: o cabeçalho diz de quem é (prancheta «Sessão e segundo fator») */
.trancada-cab{display:flex;gap:.75rem;align-items:center;padding:1.125rem 1.25rem;
  background:var(--sup-pagina);border-bottom:1px solid var(--linha-fina);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.trancada-cab>.quem{flex:1;min-width:0}
.trancada-cab .n{font-size:.9375rem;font-weight:var(--font-weight-semibold)}
.trancada-cab .c{font-size:.71875rem;color:var(--txt-fraco)}
.login table.dados{margin-bottom:.875rem}
.login table.dados td{font-size:.75rem;padding:.1875rem 0;border:0;height:auto}
.login table.dados td.rot{width:8rem;color:var(--txt-fraco);font-size:.71875rem}
/* a lista de sessões do perfil */
.sessao-linha{display:flex;align-items:center;gap:.5rem}
.sessao-linha .ic{color:var(--txt-fraco);display:flex}
.sessao-linha .d{font-size:.78125rem}
.sessao-linha .s{font-size:.65625rem;color:var(--txt-fraco);margin-top:.0625rem}
td.sessao-quando{font-size:.71875rem;color:var(--txt-fraco)}
td.sessao-acao{width:9rem;text-align:right}
td.sessao-acao>form{display:inline}
.sessoes-pe{display:flex;align-items:center;gap:.75rem;margin-top:.75rem}
.sessoes-pe>.note{flex:1;line-height:1.55}
/* na trancada, o aviso âmbar fala em texto forte: o âmbar é só do ícone */
.login .alerta.aviso .d{color:var(--txt-forte);opacity:1;line-height:1.55}
/* os dois botões cheios são dois formulários — o segundo cola no primeiro */
.login form+form>.cheio{margin-top:.5rem}
.login .miolo .campo+.cheio{margin-top:.875rem}
/* meu perfil (prancheta «Meu perfil»): quem você é, a senha, o segundo
   fator, as preferências — e o cadastro do aplicativo autenticador. Tudo
   dentro da moldura, em cards; as peças da porta (.otp, .reqs, o olho)
   servem aqui também. */
.perfil-aviso{margin-bottom:1rem}
.perfil-quem{display:flex;gap:.875rem;align-items:center}
.perfil-quem>.retrato{width:3rem;height:3rem;font-size:.9375rem}
.perfil-quem>.quem{flex:1;min-width:0}
.perfil-quem .n{font-size:1rem;font-weight:var(--font-weight-semibold)}
.perfil-quem .c{font-size:.75rem;color:var(--txt-fraco);margin-top:.125rem}
.perfil-grade{margin-top:1rem}
.perfil-alerta{margin-top:.875rem}
.perfil-alerta-pouco{margin-top:.75rem}
.perfil-alerta-cima{margin-bottom:.875rem}
.perfil-alerta .d,.perfil-alerta-pouco .d,.perfil-alerta-cima .d{line-height:1.5}
.perfil-nota{margin-top:.625rem;line-height:1.55}
.perfil-nota b{color:var(--txt-forte)}
/* as regras da senha à esquerda, o botão à direita — como a prancheta */
.perfil-pe{display:flex;align-items:flex-start;gap:1.25rem;margin-top:.875rem}
.perfil-pe>.reqs{flex:1;margin:0}
.perfil-pe .req{font-size:.71875rem;line-height:1.6;margin:0}
.perfil-pe .req:not(.ok):not(.falta){color:var(--txt-fraco)}
.perfil-botoes{display:flex;gap:.5rem;margin-top:.75rem;align-items:center}
/* o serviço «segundo fator» */
.svc-cab>.ic{color:var(--txt-fraco);display:flex}
.svc-cab .meio{font-size:.625rem;color:var(--txt-apagado)}
.svc-corpo .texto,.dialogo .texto{font-size:.78125rem;line-height:1.55;color:var(--txt-fraco)}
.svc-corpo .texto b,.dialogo .texto b{color:var(--txt-forte)}
/* as preferências: os cartões de opção são botões de um form */
.opts{display:flex;gap:.5rem}
.opts>.opt-card{flex:1;display:flex;gap:.5rem;align-items:center;padding:.5rem .625rem;
  background:var(--sup-cartao);border:0;font:inherit;text-align:left;color:inherit}
.opts>.opt-card.on{background:var(--sup-selecionada)}
.opts>.opt-card>.ic{display:flex;color:var(--txt-fraco)}
.opts>.opt-card>span:not(.ic){display:flex;flex-direction:column;min-width:0}
.opts>.opt-card .r{font-size:.78125rem;font-weight:var(--font-weight-medium)}
.opts>.opt-card .s{font-size:.65625rem;color:var(--txt-fraco)}
.opts>.opt-card.dis{opacity:.5;cursor:not-allowed}
.opts>button.opt-card:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
/* o cadastro do aplicativo: o QR à esquerda, os três passos à direita */
.dialogo{max-width:48rem}
.autenticador{display:flex;gap:1.5rem;align-items:flex-start}
.autenticador .qr{flex-shrink:0;padding:.5rem;background:#fff;border-radius:var(--radius-lg);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.autenticador .qr svg{display:block;width:11rem;height:11rem}
.autenticador .etapas{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem}
.autenticador .etapa{display:flex;gap:.625rem;align-items:flex-start}
.autenticador .etapa>div{flex:1;min-width:0}
.autenticador .etapa-n{width:1.375rem;height:1.375rem;border-radius:9999px;flex-shrink:0;
  display:grid;place-items:center;font-size:.625rem;font-weight:var(--font-weight-semibold);
  background:var(--acao-suave);color:var(--txt-marca)}
.autenticador .etapa .t{font-size:.78125rem;font-weight:var(--font-weight-medium);
  margin-bottom:.25rem}
.autenticador .etapa .d{font-size:.71875rem;color:var(--txt-fraco);line-height:1.5}
.autenticador .etapa .otp+.d{margin-top:.375rem}
.autenticador .chave{display:inline-block;margin-top:.375rem;padding:.25rem .5rem;
  font-size:.8125rem;letter-spacing:.06em;background:var(--sup-rebaixada);
  border-radius:var(--radius-sm);word-break:break-all;user-select:all}
.autenticador .campo{max-width:18rem}
/* os códigos de recuperação, mostrados uma vez */
.codigos{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.375rem .75rem;max-width:36rem}
.codigos code{display:block;padding:.375rem .5rem;font-size:.875rem;letter-spacing:.1em;
  background:var(--sup-rebaixada);border-radius:var(--radius-sm);text-align:center;
  user-select:all}
/* na porta: o código de recuperação fica dobrado embaixo das seis caixas */
.login details.recuperacao{margin-top:.875rem}
.login details.recuperacao>summary{font-size:.6875rem;color:var(--acao);cursor:pointer;
  list-style:none}
.login details.recuperacao>summary::-webkit-details-marker{display:none}
.login details.recuperacao[open]>summary{margin-bottom:.625rem}
.login details.recuperacao .miudo{margin-top:.5rem}

/* a chave e o rádio como CAMPOS de verdade — o mesmo desenho de `.sw` e `.rd`
   da folha, agora postáveis. Chave pintada não grava nada, e a tela de
   «Acesso e sessão» precisa que o que está desenhado seja o que vai no POST. */
input[type=checkbox].sw{appearance:none;-webkit-appearance:none;width:1.875rem;
  height:1.0625rem;padding:2px;margin:0;cursor:pointer;flex-shrink:0;display:flex;
  align-items:center;justify-content:flex-start;border:0;border-radius:9999px;
  background:var(--linha);outline:0}
input[type=checkbox].sw::after{content:"";width:.8125rem;height:.8125rem;
  border-radius:9999px;background:#fff;display:block}
input[type=checkbox].sw:checked{background:var(--acao);justify-content:flex-end}
/* travada: o estado continua legível — cinza sem estado esconde a decisão */
input[type=checkbox].sw:disabled{opacity:.45;cursor:not-allowed;background:var(--linha)}
input[type=checkbox].sw:checked:disabled{background:var(--acao)}
input[type=checkbox].sw:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
input[type=radio].rd{appearance:none;-webkit-appearance:none;width:.9375rem;
  height:.9375rem;padding:0;margin:0;cursor:pointer;flex-shrink:0;border:0;
  border-radius:9999px;background:var(--sup-cartao);
  outline:1px solid var(--linha);outline-offset:-1px}
input[type=radio].rd:checked{border:4.5px solid var(--acao);outline:0;
  background:var(--sup-cartao)}
input[type=radio].rd:disabled{opacity:.45;cursor:not-allowed}
input[type=radio].rd:focus-visible{outline:2px solid var(--foco);outline-offset:1px}

/* Configurações › Acesso e sessão — o bloco «Configuração do cartório» da
   prancheta «Sessão e segundo fator»: os meios empilhados, um cartão cada. */
.acesso-aviso{margin-bottom:1rem}
.acesso{max-width:44rem}
/* a chave e a explicação, uma sob a outra — como a prancheta desenha o bloco */
.acesso-chave{margin-bottom:.875rem}
.acesso-chave .d{display:block}
.acesso-sec{margin:1rem 0 .5rem}
.acesso-sec:first-child{margin-top:0}
.canais{display:flex;flex-direction:column;gap:.5rem}
.canais>.opt-card{display:block;margin:0;font-weight:400;background:var(--sup-cartao)}
.canais>.opt-card.dis{opacity:.6;cursor:not-allowed}
.canais .cab{display:flex;gap:.5rem;align-items:center}
.canais .cab>.ic{display:flex;color:var(--txt-fraco)}
.canais .r{flex:1;font-size:.84375rem;font-weight:var(--font-weight-semibold)}
.canais .r>.badge{margin-left:.375rem}
.canais .d{display:block;font-size:.71875rem;color:var(--txt-fraco);
  margin-top:.1875rem;padding-left:1.5rem;line-height:1.5}
/* a grade de cargos: o nome à esquerda, a chave à direita */
.acesso-cargos td{font-size:.78125rem}
.acesso-cargos td.chave{width:6rem}
.acesso-cargos td.chave>.marc{justify-content:flex-end;margin:0}
.acesso-nota{margin-top:.75rem;line-height:1.55}
.acesso-nota b{color:var(--txt-forte)}
.acesso-minutos,.acesso-senha{max-width:20rem}
.acesso-minutos>input{max-width:7rem}
/* o rótulo da chave de cada cargo existe para quem lê a tela em voz alta */
.acesso-oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
@media (max-width:768px){
  .shell-lado{display:none}
  .duas,.duas.igual,.tres{grid-template-columns:1fr}
  .grade>[class*="c"]{grid-column:span 6}
}

/* a marca. O símbolo é o elemento mais alto, então a altura do logotipo é a
   altura dele: 27px na barra do topo (manual da marca). No fundo escuro vale a
   versão de palavra branca — o símbolo continua colorido. */
.marca{display:inline-flex;align-items:center;height:1.6875rem;flex-shrink:0}
.marca .logo{height:100%;width:auto;display:block}
.marca .logo.escura{display:none}
.tema-escuro .marca .logo.clara{display:none}
.tema-escuro .marca .logo.escura{display:block}

/* busca ao vivo: a lista filtra enquanto se digita, com 300ms de espera e três
   letras de mínimo. O indicador só aparece durante o pedido — e some sozinho,
   porque pisca-pisca em cada tecla cansa mais do que informa. */
.htmx-indicator{opacity:0;transition:opacity .15s ease}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* a barra lateral recolhida: 60px de goteira, e ela ABRE SOZINHA quando o
   ponteiro entra — some ao sair e ao clicar num item. Balão de rótulo não
   resolve: ele aponta para o lado errado, cobre a tela e ainda obriga a
   adivinhar o que há embaixo. Mostrar a barra inteira é mais honesto.
   O botão do rodapé deixa de recolher: ele TRAVA a barra aberta.
   O logotipo não se parte — ele vive na barra do topo, de largura total. */
.shell-lado.rec{width:3.75rem;padding:0}
.shell-lado.rec>.nav{position:absolute;top:0;bottom:0;left:0;width:3.75rem;
  display:flex;flex-direction:column;gap:.125rem;padding:.75rem .625rem;
  background:var(--sup-cartao);overflow:hidden;white-space:nowrap;
  transition:width .12s ease,box-shadow .12s ease}
.shell-lado.rec:hover>.nav{width:13.25rem;box-shadow:var(--shadow-lg)}
/* o rótulo escondido não pode OCUPAR espaço: com opacidade zero ele continua
   empurrando o ícone para fora da goteira. Zera-se a largura junto. */
.shell-lado.rec:not(:hover) .nav-mod span,
.shell-lado.rec:not(:hover) .recolher span{opacity:0;width:0;overflow:hidden}
.shell-lado.rec:not(:hover) .nav-mod,
.shell-lado.rec:not(:hover) .recolher{gap:0}
.shell-lado.rec:not(:hover) .nav-item{opacity:0}
.shell-lado.rec:not(:hover) .nav-item{height:0;padding-top:0;padding-bottom:0;
  overflow:hidden}
/* recolhida, a marca do módulo é um quadrado do tamanho do ícone. Sem isto
   ela cresce até o tamanho do rótulo — que continua ocupando espaço, só
   invisível — e o fundo vaza para fora da goteira, com o canto cortado. */
.shell-lado.rec:not(:hover) .nav-mod,
.shell-lado.rec:not(:hover) .recolher{width:2.375rem;padding:0;
  justify-content:center}
.shell-lado.rec .nav-mod{padding:0 .5625rem}
/* o acordeão: fechado, o grupo é uma linha só; a seta diz que há mais. */
.nav-grupo:not(.aberto)>.nav-itens{display:none}
.nav-mod>.seta{margin-left:auto;display:flex;color:var(--txt-apagado);
  transform:rotate(-90deg);transition:transform .12s ease}
.nav-grupo.aberto>.nav-mod>.seta{transform:none}
.shell-lado.rec:not(:hover) .nav-mod>.seta{display:none}

/* o X que limpa a caixa de busca: só existe com a caixa cheia, e a regra
   é de CSS para que ele não pisque enquanto um script decide. */
.inp input:placeholder-shown ~ .tip>.limpar,
.inp input:placeholder-shown ~ .tip{display:none}
.inp input:not(:placeholder-shown) ~ .kbd{display:none}
/* o motivo do resultado, um nível abaixo do nome: o sócio que casou com a
   busca. Recuo e traço à esquerda dizem «isto pertence à linha de cima». */
.filho{margin-top:.1875rem;min-height:1.0625rem;
  font-size:.6875rem;color:var(--txt-fraco);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.375rem;line-height:1.5;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* só a coluna do nome leva o traço: nas demais, o vínculo é continuação. */
.filho.raiz{padding-left:.75rem;border-left:2px solid var(--linha-fina)}
.filho .dado{font-variant-numeric:tabular-nums;color:var(--txt-apagado)}

.limpar{display:flex;align-items:center;justify-content:center;width:1.25rem;
  height:1.25rem;padding:0;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--txt-apagado);cursor:pointer}
.limpar:hover{background:var(--sup-hover);color:var(--txt-forte)}

.recolher{display:flex;align-items:center;gap:.5rem;height:1.875rem;padding:0 .625rem;
  margin-top:auto;position:sticky;bottom:0;background:var(--sup-cartao);border-radius:var(--radius-md);color:var(--txt-apagado);
  font-size:.6875rem;cursor:pointer;text-decoration:none;flex-shrink:0}
.recolher:hover{background:var(--sup-hover);color:var(--txt-fraco)}
.recolher.travada{color:var(--txt-marca)}

/* a barra recolhida não pode cortar o balão: 60px de largura, nada para
   rolar, e o rótulo precisa sair para fora. */
.shell-lado.rec{overflow:visible}

/* a busca global vive presa à caixa do topo */
.busca-global{position:relative}
.busca-global .paleta{position:absolute;top:calc(100% + .5rem);right:0;z-index:40;
  width:31rem;max-width:min(31rem,90vw)}
.busca-global .paleta:empty{display:none}

/* o balão precisa passar por cima do conteúdo — senão a barra recolhida
   mostra o rótulo por baixo da tabela, que é o mesmo que não mostrar */
.tip>.bolha{z-index:60}
/* balão ancorado à esquerda — para quem vive na primeira coluna de uma tabela
   que rola: centralizado, ele sai pela borda e a rolagem o corta. */
.tip.esq>.bolha{left:0;transform:none}
.tip.esq>.bolha::after{left:.6875rem}
/* a barra do topo passa por cima da lateral: é dela que descem a busca
   global e os menus, e eles não podem ficar por baixo de nada. */
.shell-lado{position:relative;z-index:30}
.shell-topo{position:relative;z-index:50}

/* a tira de páginas aceita link, não só span: quem navega clica de verdade */
.pag>a{text-decoration:none;color:inherit}
.pag>a,.pag>span,.pag .tip>span:not(.bolha),.pag .tip>a:not(.bolha){
  width:1.5rem;height:1.5rem;border-radius:var(--radius-sm);display:grid;
  place-items:center;font-size:.6875rem;cursor:pointer;
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.pag>a.on,.pag>span.on{background:var(--acao);color:var(--txt-sobre-acao);
  font-weight:var(--font-weight-semibold);outline:0}
.pag>.sep{outline:0;cursor:default}

/* o funil abre no CLIQUE e fica aberto: filtro em balão de hover escapa do
   ponteiro no caminho até a opção */
.funil{position:relative;display:inline-flex}
.funil>summary{list-style:none;display:inline-flex;cursor:pointer;opacity:.45}
.funil>summary::-webkit-details-marker{display:none}
.funil[open]>summary,.funil.on>summary{opacity:1;color:var(--txt-marca)}
.funil>.opcoes{position:absolute;top:calc(100% + .375rem);left:-.5rem;z-index:70;
  min-width:11rem;padding:.25rem;border-radius:var(--radius-lg);
  background:var(--sup-cartao);box-shadow:var(--shadow-lg);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.funil>.opcoes a{display:block;padding:.375rem .5625rem;border-radius:var(--radius-sm);
  font-size:.78125rem;color:var(--txt-forte);text-decoration:none;font-weight:400;
  white-space:nowrap}
.funil>.opcoes a:hover{background:var(--sup-hover)}
.funil>.opcoes .limpar{color:var(--txt-fraco);font-size:.71875rem}

/* o cabeçalho inteiro ordena — não só as letras do rótulo */
.ordenavel{display:inline-flex;align-items:center;gap:.3125rem;color:inherit;
  text-decoration:none;cursor:pointer}
.ordenavel:hover{color:var(--txt-marca)}

/* menu suspenso preso a um gatilho — abre no clique e fica aberto, como o
   funil da tabela. É o mesmo `.menu` da folha, só que ancorado. */
.suspenso{position:relative;display:inline-flex}
.suspenso>summary{list-style:none;display:inline-flex;align-items:center;gap:.5rem;
  cursor:pointer}
.suspenso>summary::-webkit-details-marker{display:none}
.suspenso>.menu{position:absolute;top:calc(100% + .5rem);right:0;z-index:70;
  width:13rem}
.suspenso>.menu a.mi,.suspenso>.menu button.mi{width:100%;text-decoration:none;
  border:0;background:none;font:inherit;text-align:left}
.suspenso[open]>summary .seta{transform:rotate(180deg)}
.suspenso>summary .seta{transition:transform .12s ease;display:inline-flex;
  color:var(--txt-apagado)}
.menu .mi.dis{color:var(--txt-apagado);cursor:not-allowed}
.menu .mi.dis:hover{background:none}

/* usuários (prancheta «Usuários»): o cadastro com abas à esquerda. O cabeçalho
   é o mesmo «quem você é» do perfil (.perfil-quem); a coluna das abas é a
   .cfg-nav das configurações, mais estreita, com o item como link. */
.ficha-cab{margin-bottom:1rem}
.ficha-cab .botoes{display:flex;gap:.5rem;align-items:center}
.ficha-abas{display:flex;gap:1rem;align-items:flex-start}
.ficha-abas>.cfg-nav{width:11.5rem}
.ficha-abas>.miolo{flex:1;min-width:0}
a.cfg-item{text-decoration:none}
a.cfg-item .t{flex:1}
.ficha-sec{margin:1rem 0 .625rem}
.ficha-sec:first-child{margin-top:0}
.ficha-abas .svc{outline:1px solid var(--linha-fina);outline-offset:-1px}
/* as duas opções da redefinição são cartões com um rádio dentro */
.opts>label.opt-card{cursor:pointer;outline:1px solid var(--linha-fina);outline-offset:-1px;
  border-radius:var(--radius-lg)}
.opts>label.opt-card.on{outline-color:var(--acao)}
.opts>label.opt-card>input[type=radio]{width:auto;height:auto;margin:0;flex-shrink:0;
  accent-color:var(--acao)}
.opts>label.opt-card:has(input:checked){outline:2px solid var(--acao);outline-offset:-2px;
  background:var(--sup-selecionada)}

/* aprovação — prancheta «Aprovação»: a fila é a lista de .tarefa; o pedido
   aberto é um bloco com o cabeçalho colorido pela situação, o efeito primeiro,
   a justificativa depois e os botões por último. */
.tarefa .sla{font-size:.6875rem;color:var(--txt-fraco);white-space:nowrap}
.tarefa.urg .sla{color:var(--er)}
a.tarefa{text-decoration:none;color:inherit}
.tarefa .t{font-size:.78125rem;font-weight:var(--font-weight-medium)}
.tarefa .d{font-size:.6875rem;color:var(--txt-fraco)}
.pedido{border-radius:var(--radius-lg);overflow:hidden;outline:1px solid var(--linha-fina);
  outline-offset:-1px}
.pedido>.cab{padding:.875rem 1rem;background:var(--av-fundo);border-bottom:1px solid var(--av-linha)}
.pedido>.cab.ok{background:var(--ok-fundo);border-color:var(--ok-linha)}
.pedido>.cab.er{background:var(--er-fundo);border-color:var(--er-linha)}
.pedido>.cab.neutro{background:var(--sup-rebaixada);border-color:var(--linha-fina)}
.pedido>.cab .t{display:flex;gap:.5rem;align-items:center}
.pedido>.cab .t .ic{color:var(--av);display:flex}
.pedido>.cab.ok .t .ic{color:var(--ok)} .pedido>.cab.er .t .ic{color:var(--er)}
.pedido>.cab .t .n{font-size:.875rem;font-weight:var(--font-weight-semibold);flex:1}
.pedido>.cab .sub{font-size:.71875rem;color:var(--txt-fraco);margin-top:.3125rem}
.pedido>.miolo{padding:1rem}
.pedido .sec{margin:.875rem 0 .375rem} .pedido .sec:first-child{margin-top:0}
.pedido table.kv td:first-child{width:11rem;color:var(--txt-fraco);font-size:.75rem;
  font-weight:var(--font-weight-normal)}
.pedido table.kv td{font-size:.8125rem;color:var(--txt-forte)}
.pedido .texto{padding:.625rem .75rem;border-radius:var(--radius-lg);background:var(--sup-pagina);
  font-size:.78125rem;line-height:1.55;white-space:pre-wrap}
.pedido .texto .de{font-size:.65625rem;color:var(--txt-fraco);margin-bottom:.25rem;white-space:normal}
.pedido textarea{height:auto;min-height:3.25rem;align-items:flex-start;padding-top:.5625rem;
  resize:vertical;font:inherit;line-height:1.45}
.pedido .decisao{display:flex;gap:.5rem;margin-top:.875rem;align-items:center;flex-wrap:wrap}
.pedido .decisao .espaco{flex:1}
.pedido .decisao .note{display:flex;gap:.25rem;align-items:center;font-size:.65625rem;margin-left:auto}
.pedido .trilha{margin:0;padding-left:1.0625rem;font-size:.78125rem;line-height:1.65}