/* =============================================================================
   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.

   OS CORTES DE LARGURA SÃO TRÊS, e só estes (guarda: nucleo.tests_responsivo):
     celular  < 640      @media (max-width:639.98px)
     tablet   640–1023   @media (min-width:640px) and (max-width:1023.98px)
     desktop  ≥ 1024     @media (min-width:1024px)  — o padrão, sem @media
   O ,98 é para a borda não valer para os dois lados em zoom fracionário.
   Fora de largura, só: print, hover:none, pointer:coarse, prefers-reduced-motion.
   ============================================================================= */

/* ---------- 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;
  --marca-800-fraca:rgba(36,54,110,.10);
}

/* ---------- ESCALA TIPOGRÁFICA (Fase 4) -----------------------------------
   A escala das pranchas do design novo: OITO passos, e a letra maior — o corpo
   e a célula em 14px, rótulo, ajuda e metadado no mínimo 12px, os títulos em
   16 · 18 · 20 · 26 · 30. Os 30 tokens --t-* da Fase 2 (um por literal que
   existia) apontam para ela, sem editar template; ficam fora só a miniatura
   da folha de papel (--t-7, --t-8: representação de documento, não texto de
   tela) e os tamanhos das superfícies de TV e totem (--t-32 em diante). */
:root{
  --f-12:.75rem; --f-13:.8125rem; --f-14:.875rem; --f-16:1rem;
  --f-18:1.125rem; --f-20:1.25rem; --f-26:1.625rem; --f-30:1.875rem;
  --t-7:.4375rem;
  --t-8:.5rem;
  --t-9:var(--f-12);
  --t-10:var(--f-12);
  --t-10-5:var(--f-12);
  --t-11:var(--f-12);
  --t-11-5:var(--f-12);
  --t-12:var(--f-12);
  --t-12-5:var(--f-13);
  --t-13:var(--f-13);
  --t-13-5:var(--f-14);
  --t-14:var(--f-14);
  --t-15:var(--f-16);
  --t-15-5:var(--f-16);
  --t-16:var(--f-16);
  --t-16-5:var(--f-16);
  --t-17:var(--f-18);
  --t-18:var(--f-18);
  --t-19:var(--f-18);
  --t-20:var(--f-20);
  --t-22:var(--f-20);
  --t-24:var(--f-26);
  --t-28:var(--f-26);
  --t-30:var(--f-30);
  --t-32:2rem;
  --t-40:2.5rem;
  --t-44:2.75rem;
  --t-48:3rem;
  --t-72:4.5rem;
  --t-128:8rem;
}

/* ---------- RAIO — três valores que a escala Tailwind não cobre;
   .375rem, .75rem e 2px(=.125rem) já existem em --radius-* e são
   reaproveitados nas trocas abaixo, não duplicados aqui. --------------- */
:root{
  --radius-hair:1px;
  --radius-2sm:.3125rem;
  --radius-3xl:1.25rem;
}

/* ---------- DELTAS DE DENSIDADE — lista fechada (UI_SPEC §3) ---------------- */
:root{
  /* Fase 4, pelas pranchas: controle de 40 (o pequeno 34), célula de ~60 de
     altura com 16 de lado. Antes: 36, 30, 10 e 14. */
  --d-control-h:2.5rem;       /* 40px                            */
  --d-control-h-sm:2.125rem;  /* 34px                            */
  --d-cell-y:1.125rem;        /* 18px · célula de ~60 com 14 de letra */
  --d-cell-x:1rem;            /* 16px                            */
  --d-text-ui:var(--f-14);    /* 14px · o corpo (Fase 4; antes 13,5) */
  --d-text-cell:var(--f-14);  /* 14px · a célula (Fase 4; antes 13) */
}

/* ---------- 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;
       /* a bobina térmica do cupom fiscal: creme, não branco. A senha sai
          nesse papel, e a animação do totem mostra o papel que a pessoa vai
          ter na mão — branco ali seria uma folha de escritório. */
       --papel-bobina:#f7f0d8; }
/* 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); }

/* ---------- RAIO ÚNICO (Fase 4, decisão da Spidea de 26/09) -------------------
   10px em campo, botão, cartão, aviso, menu, diálogo e na caixa do chat: os três
   raios de controle e de cartão do Tailwind apontam para ele. As peças pequenas
   (caixa de marcar, selo, página do paginador: --radius-xs/sm) e o que é redondo
   (pílula, avatar: 9999px) continuam como eram. */
:root{ --raio:10px; --radius-md:var(--raio); --radius-lg:var(--raio); --radius-xl:var(--raio); }

/* Texto forte (Fase 4): o corpo — célula de tabela, miolo de acordeão, texto de
   diálogo, de página de estado, do termo e do painel — é --txt-forte; o cinza
   (--txt-fraco, --txt-apagado) fica só em rótulo, ajuda, metadado e placeholder. */
/* ---------- PAPÉIS · CLARO -------------------------------------------------- */
/* Fase 4 (27/09): os valores vêm de docs/design_cartorio_v2/ferramentas/paleta.py,
   a FONTE ÚNICA das cores do design novo, já medida em contraste (WCAG 2.x). Não
   se edita valor aqui sem editar lá: o bloco é gerado a partir de TEMA[0] (claro)
   e TEMA[1] (escuro). O azul de ação é o #2563EB; a marca fica no logo, na barra
   e nas ilustrações. Os tokens que só o app usa vêm depois, com o valor de antes. */
:root{
  --sup-pagina:#FAFAFA; --sup-cartao:#FFFFFF; --sup-rebaixada:#F4F4F5;
  --sup-selecionada:#EFF6FF; --sup-hover:#FAFAFA; --txt-forte:#18181B; --txt-fraco:#52525B;
  --txt-apagado:#71717A; --txt-marca:#24366E; --txt-sobre-acao:#FFFFFF;
  --linha-fina:#E4E4E7; --linha:#D4D4D8; --linha-forte:#A1A1AA; --linha-campo:#8A8A94;
  --linha-cartao:rgb(24 24 27 / .08); --acao:#2563EB; --acao-forte:#1D4ED8;
  --acao-texto:#1D4ED8; --foco:#2563EB; --ok:#15803D; --ok-fundo:color-mix(in srgb, var(--ok-suave) 25%, var(--color-green-50));
  --ok-linha:#BBF7D0; --ok-icone:#16A34A; --ok-cheio:#15803D; --sobre-ok:#FFFFFF;
  --av:#B45309; --av-fundo:color-mix(in srgb, var(--av-suave) 25%, var(--color-amber-50)); --av-linha:#FDE68A; --av-icone:#D97706;
  --av-cheio:#FBBF24; --sobre-av:#422006; --er:#B91C1C; --er-fundo:color-mix(in srgb, var(--er-suave) 25%, var(--color-red-50));
  --er-linha:#FECACA; --er-icone:#DC2626; --er-cheio:#DC2626; --sobre-er:#FFFFFF;
  --er-texto:#991B1B; --ne:#52525B; --ne-fundo:#F4F4F5; --ne-linha:#E4E4E7;
  --ne-icone:#71717A; --ne-cheio:#52525B; --sobre-ne:#FFFFFF; --in-cheio:#2563EB;
  --sobre-in:#FFFFFF; --ok-suave:#DCFCE7; --sobre-ok-suave:#166534; --av-suave:#FEF3C7;
  --sobre-av-suave:#92400E; --er-suave:#FEE2E2; --sobre-er-suave:#991B1B;
  --ne-suave:#F4F4F5; --sobre-ne-suave:#3F3F46; --in-suave:#DBEAFE;
  --sobre-in-suave:#1E40AF; --barra:#141F44; --barra-txt:#FFFFFF; --barra-fraco:#B4C0DE;
  --barra-campo:rgb(255 255 255 / .10); --barra-linha:transparent;
  --txt-acao-linha:var(--color-zinc-600);          /* ícone de ação em repouso */
  /* o TEXTO de link: mais sóbrio que o azul do botão (#2563EB), no matiz da
     marca (Fase 4b, dono 27/09 achou o azul primário berrante no link).
     As três opções medidas (cartão claro / cartão escuro, todas ≥ 4,5):
       A marca-500 #3D6CAE / #8FB2E3 (5,31 / 7,76)
       B           #2F5FAE / #86A9E0 (6,23 / 7,05)
       C           #2E5C9E / #93B4E6 (6,69 / 7,97)  ← aplicada
     Trocar é mudar este par (e o do .tema-escuro). */
  --link:#2E5C9E;
  /* a letra da navegação no celular: 15px (canvas página 7), fora da escala de 8 */
  --f-nav-movel:.9375rem;
  /* fonte monoespaçada: PARA USO FUTURO. O dono tirou a mono de todo o app
     (Fase 5); o token e a classe .mono ficam definidos, sem uso. */
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* três tokens que a folha e os templates já usavam SEM definição (saíam
     transparentes até a Fase 4): o fundo de realce azul, a borda da marca e o
     fundo fraco — apontados para os papéis que eles queriam dizer */
  --acao-suave:var(--sup-selecionada); --linha-marca:var(--acao); --sup-fraca:var(--sup-rebaixada);
  /* o texto apagado SOBRE FUNDO PINTADO (rebaixado, linha selecionada): o
     --txt-apagado (zinc-500) dá 4,40:1 sobre o --sup-rebaixada e 4,44 sobre o
     --sup-selecionada, abaixo do AA. Não há token entre o zinc-500 e o zinc-600,
     então ali o apagado vira o --txt-fraco (dono, 30/09: só valor que já existe,
     ligado a token). Quem pinta o fundo redefine --txt-apagado para este token
     (bloco «APAGADO SOBRE FUNDO» logo depois da BASE). Mudar aqui muda tudo. */
  --txt-apagado-sobre-fundo:var(--txt-fraco);
  /* o que vive sobre a barra marinho: contorno da busca, da tecla ⌘K e o avatar */
  --barra-contorno:rgb(255 255 255 / .10); --barra-tecla:rgb(255 255 255 / .22); --barra-avatar:rgb(255 255 255 / .14);
  /* os ícones que a folha desenha dentro do campo (seta do select, calendário e
     relógio): SVG com a cor de --txt-fraco deste tema, porque data: URI não lê var() */
  --ic-seta:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2352525B'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  --ic-calendario:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2352525B'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'/%3E%3Cpath%20d='M16%202v4'/%3E%3Cpath%20d='M3%2010h18'/%3E%3Cpath%20d='M8%202v4'/%3E%3C/svg%3E");
  --ic-relogio:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2352525B'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E");
  /* o fundo de estado do CLARO é a «opção D» (dono, 30/09, 2ª decisão): 25 % do
     tom da pílula suave misturado ao tom 50 (green/amber/red-50 do Tailwind; o
     azul, sem blue-50 no 01-tailwind.css, mistura com o --sup-selecionada, que é
     o blue-50). Mais claro que a pílula, então ela se destaca na caixa; os
     -suave (pílulas) não mudam. O --ne-fundo já era o tom da pílula neutra.
     O escuro não muda (-fundo = -suave, no bloco .tema-escuro). */
  --info-fundo:color-mix(in srgb, var(--in-suave) 25%, var(--sup-selecionada)); --info-linha:#BFDBFE;
  --ponto-gravando:#c0392b; --tique-lido:#7FD1FF;
  --er-fixo:#b3261e; --ok-fixo:#15803d; --fundo-camera:#000;
  --anel-facial:rgba(0,0,0,.35); --sombra-legenda-camera:rgba(0,0,0,.5);
  --veu-balao-meu:rgba(255,255,255,.18);
  --realce-balao-meu:rgba(255,255,255,.25);
  --veu:rgb(9 9 11 / .45); --sombra-janela:0 12px 40px rgb(0 0 0 / .18);
  --sombra-cartao:0 1px 3px 0 rgb(0 0 0 / .08),0 1px 2px -1px rgb(0 0 0 / .08);
}
.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(37 99 235 / .20); --sup-hover:rgb(255 255 255 / .03);
  --txt-forte:#E9EDF7; --txt-fraco:#A7B3D0; --txt-apagado:#8591B3; --txt-marca:#74CDFE;
  --txt-sobre-acao:#FFFFFF; --linha-fina:#26314F; --linha:#2E3A5C; --linha-forte:#3D4B70;
  --linha-campo:#6475A0; --linha-cartao:rgb(255 255 255 / .09); --acao:#2563EB;
  --acao-forte:#3B82F6; --acao-texto:#7CB4FF; --foco:#7CB4FF; --ok:#4ADE80;
  --ok-fundo:rgb(74 222 128 / .16); --ok-linha:rgb(74 222 128 / .28); --ok-icone:#4ADE80;
  --ok-cheio:#15803D; --sobre-ok:#FFFFFF; --av:#FBBF24; --av-fundo:rgb(251 191 36 / .16);
  --av-linha:rgb(251 191 36 / .28); --av-icone:#FBBF24; --av-cheio:#FBBF24;
  --sobre-av:#422006; --er:#F87171; --er-fundo:rgb(248 113 113 / .16);
  --er-linha:rgb(248 113 113 / .30); --er-icone:#F87171; --er-cheio:#DC2626;
  --sobre-er:#FFFFFF; --er-texto:#FCA5A5; --ne:#A7B3D0; --ne-fundo:rgb(167 179 208 / .16);
  --ne-linha:rgb(167 179 208 / .22); --ne-icone:#8591B3; --ne-cheio:#475569;
  --sobre-ne:#FFFFFF; --in-cheio:#2563EB; --sobre-in:#FFFFFF;
  --ok-suave:rgb(74 222 128 / .16); --sobre-ok-suave:#86EFAC;
  --av-suave:rgb(251 191 36 / .16); --sobre-av-suave:#FCD34D;
  --er-suave:rgb(248 113 113 / .16); --sobre-er-suave:#FCA5A5;
  --ne-suave:rgb(167 179 208 / .16); --sobre-ne-suave:#CBD5E1;
  --in-suave:rgb(59 130 246 / .16); --sobre-in-suave:#93C5FD; --barra:#0A1030;
  --barra-txt:#FFFFFF; --barra-fraco:#A3B0D2; --barra-campo:rgb(255 255 255 / .08);
  --barra-linha:rgb(255 255 255 / .07);
  --txt-acao-linha:#A6B2CE;
  --txt-apagado-sobre-fundo:var(--txt-fraco);   /* re-resolve no escuro (var() herda já resolvido) */
  --link:#93B4E6;
  --info-fundo:var(--in-suave); --info-linha:rgb(116 205 254 / .26);
  --ponto-gravando:#c0392b; --tique-lido:#7FD1FF;
  --er-fixo:#b3261e; --ok-fixo:#15803d; --fundo-camera:#000;
  --anel-facial:rgba(0,0,0,.35); --sombra-legenda-camera:rgba(0,0,0,.5);
  --veu-balao-meu:rgba(255,255,255,.18);
  --realce-balao-meu:rgba(255,255,255,.25);
  --veu:rgb(4 6 14 / .65); --sombra-janela:0 12px 40px rgb(0 0 0 / .55);
  --sombra-cartao:0 1px 2px rgb(0 0 0 / .35);
  /* os ícones que a folha desenha dentro do campo (seta do select, calendário e
     relógio): SVG com a cor de --txt-fraco deste tema, porque data: URI não lê var() */
  --ic-seta:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23A7B3D0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  --ic-calendario:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23A7B3D0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'/%3E%3Cpath%20d='M16%202v4'/%3E%3Cpath%20d='M3%2010h18'/%3E%3Cpath%20d='M8%202v4'/%3E%3C/svg%3E");
  --ic-relogio:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23A7B3D0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E");
}

/* ---------- 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(--link);text-decoration:none;cursor:pointer} a:hover{opacity:.85}
svg{display:block;flex-shrink:0}
code{font-family:inherit;font-variant-numeric:tabular-nums}
h1{margin:0;font-size:var(--t-20);font-weight:var(--font-weight-semibold);letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums}
/* VALOR MONETÁRIO — sempre à direita, com dígitos tabulares, com ou sem «R$»
   (dono, 30/09). Não é a `.num`: essa é de toda contagem, protocolo e hora, que
   não vão à direita. Na célula alinha à direita (o cabeçalho da coluna leva a
   mesma classe); numa linha flexível ou numa grade, o valor vai para a ponta
   direita; dentro da caixa de digitação de dinheiro (`data-dinheiro`), o número
   nasce à direita como na calculadora. Guarda: nucleo.tests_dinheiro_a_direita. */
.dinheiro{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  justify-self:end;margin-left:auto}
input.dinheiro,.inp.dinheiro input{text-align:right;font-variant-numeric:tabular-nums}
/* a célula quebra: um texto de faixa («R$ 199,23 a R$ 8.290,03 · 20 faixas»)
   não pode alargar a coluna e espremer a descrição */
:is(td,th).dinheiro{white-space:normal}
.sec{font-size:var(--t-10-5);font-weight:var(--font-weight-semibold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-fraco)}
.note,.muted{font-size:var(--t-12-5);color:var(--txt-fraco)}


/* ---------- APAGADO SOBRE FUNDO (dono, 30/09) --------------------------------
   Os fundos pintados onde texto apagado aparece redefinem --txt-apagado para
   --txt-apagado-sobre-fundo (= --txt-fraco): 7,03:1 no rebaixado claro, 8,51 no
   escuro. Achados pela varredura de contraste de todas as telas
   (impl/ajustes-finais). O campo e o botão DESABILITADOS ficam de fora de
   propósito: são isentos no WCAG (1.4.3) e o cinza mais claro é o que diz
   «desabilitado». Os blocos que os templates pintam no style="" (22 templates:
   tabela de referência, biometria, unificar…) entram pelo seletor de atributo.
   Fundo rebaixado novo com texto apagado dentro: acrescente o seletor aqui. */
tr.sel td,.chip.off .qtd-fila,.ag-mes>.cel.fora,.ag-semana .col.fds,.pl-dia.util,
.painel-hub-faixa.cinza .painel-hub-cartao,
[style*="background:var(--sup-rebaixada)"],[style*="background:var(--sup-fraca)"]{--txt-apagado:var(--txt-apagado-sobre-fundo)}
/* ---------- CARTÃO ---------------------------------------------------------- */
.card{background:var(--sup-cartao);border-radius:var(--radius-lg);box-shadow:var(--sombra-cartao);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.card+.card{margin-top:1rem}
.card>h3{margin:0;padding:1rem 1.25rem 0;font-size:var(--t-16);font-weight:var(--font-weight-semibold)}
.card>p.desc{margin:.25rem 0 0;padding:0 1.25rem;font-size:var(--t-12-5);color:var(--txt-fraco)}
.card>.body{padding:1.25rem}

/* ---------- 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:var(--txt-sobre-acao)}
/* 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:var(--t-11);color:var(--av)}
/* SOB APROVAÇÃO — o padrão ÚNICO do app (dono, 30/09): âmbar, com o escudo de
   «pedir autorização». Nunca azul (azul é ação que faz). Onde mora:
   - o botão: .btn.aprov + {% icone "shield" %} + «Solicitar: …» (molde/_acao.html);
   - o item de menu: .mi.aprov, com o selo à direita (molde/_mi_aprovacao.html);
   - o selo solto numa linha de lista ou num menu: .selo-aprov (molde/_selo_aprov.html);
   - o ícone sozinho (lixeira compacta, ação da barra de lote): .ic-aprov, o escudo âmbar;
     dentro da coluna de ações da linha (.acoes, molde/_acoes_linha.html) é .acoes-aprov —
     nome próprio, porque .ic-aprov já é modificador (.btn.ic-aprov, .ac.ic-aprov).
   Guarda: nucleo.tests_aprovacao_ambar. */
.selo-aprov{display:inline-flex;align-items:center;gap:.25rem;flex-shrink:0;height:1.25rem;
  padding:0 .4375rem;border-radius:9999px;background:var(--av-fundo);color:var(--av);
  outline:1px solid var(--av-linha);outline-offset:-1px;font-size:var(--t-10-5);
  font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap}
.selo-aprov svg{width:.75rem;height:.75rem}
.menu .mi.aprov>.selo-aprov{margin-left:auto}
.menu button.mi.aprov{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.menu button.mi.aprov:hover{background:var(--sup-hover)}
.ic-aprov,.ic-aprov:hover,.btn.ic-aprov,.acoes .acoes-aprov,.acoes .acoes-aprov>span,
.acoes .acoes-aprov:hover,.acoes .acoes-aprov:hover>span:not(.bolha){color:var(--av)}
.barra-lote .ac.ic-aprov,.barra-lote .ac.ic-aprov:hover{background:var(--av-fundo);box-shadow:none;
  outline:1px solid var(--av-linha);outline-offset:-1px}
.btn.sm{height:var(--d-control-h-sm);padding:0 .6875rem;font-size:var(--t-12-5)}
.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 ----------------------------------------------------------- */
/* o checkbox e o radio CRUS ficam de fora desta regra: `display:flex` com
   largura inteira e altura de controle esticava um <input type=checkbox> em
   três retângulos (a lista «Quem entra» do grupo do chat, 07/09/2026). O
   `:where()` mantém a especificidade em zero, para nada mais mudar de
   ordem; quem quer o marcador da folha põe `.cx` ou `.rd` (MARCADORES). */
.inp,input:where(:not([type=checkbox]):not([type=radio])),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-campo);outline-offset:-1px}
/* a linha de cima dá `display:flex` a TODO <input>, e com isso apaga a regra
   do navegador que esconde o que tem `hidden` — um `<input type=file hidden>`
   aparecia na tela inteiro, com o «Escolher arquivo» do sistema operacional.
   Vale para o sistema todo, e não só para o chat: quem escrever `hidden` num
   controle espera que ele suma */
.inp[hidden],input[hidden],select[hidden],textarea[hidden]{display:none}
.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-campo);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}
/* campo dentro de campo: quando o próprio <input>/<select>/<textarea> nasce
   DENTRO de uma .inp — o endereço editável, a busca com ícone, um seletor
   de opções — a caixa é da .inp. Sem esta regra o filho, batido pela regra
   de cima (ele também é `input`/`select`/`textarea` cru), desenha a
   PRÓPRIA borda e o próprio fundo por dentro: duas caixas, uma dentro da
   outra — o que a Spidea reparou em Configurações › Integrações › SMS
   (13/09/2026) e que já era corrigido à mão, campo a campo, num `style`
   repetido — presente onde alguém lembrou, ausente onde alguém esqueceu.
   Aqui vira regra da folha: o filho nasce sem moldura própria, do tamanho
   da caixa que o cerca, herdando fonte e cor. */
.inp>input,.inp>select,.inp>textarea{border:0;outline:0;background:transparent;
  width:100%;height:100%;font:inherit;color:inherit}
/* o endereço de um aparelho do balcão (DEC-015): o link INTEIRO, clicável, com
   a seta que diz que ele abre fora e o botão que o copia. Quem instala a TV lê
   o endereço numa tela e digita em outra máquina — mostrar só o caminho obriga
   a adivinhar o resto, e o resto é o que muda de instalação para instalação.
   Serve à listagem e ao formulário: na tabela vai solto, no campo vai dentro
   da caixa (.inp.ro). */
.endereco{display:flex;align-items:center;gap:.25rem;min-width:0}
.endereco>.link{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--txt-marca);text-decoration:none}
.endereco>.link:hover{text-decoration:underline}
/* o reset do botão e o verde do «copiado» valem para todo .seta-bt, logo
   abaixo, em «:where(button:not(.btn)).seta-bt» e «.seta-bt.feito»: o copiado precisa do sinal
   em qualquer lugar — sem ele ninguém sabe se o clique pegou */
.inp.endereco{padding-right:.1875rem}
td .endereco{font-size:var(--t-12-5);max-width:100%}
td:has(>.endereco){width:15rem}
/* ao lado do botão que revoga: o endereço toma a largura que sobra */
.row>.endereco{flex:1}
.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:var(--txt-sobre-acao);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 var(--txt-sobre-acao);border-bottom:1.5px solid var(--txt-sobre-acao);transform:rotate(-45deg)}
.cx.on>i{width:.4375rem;height:.1875rem;margin-top:-.125rem;
  border-left:1.5px solid var(--txt-sobre-acao);border-bottom:1.5px solid var(--txt-sobre-acao);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:var(--radius-hair);background:var(--txt-sobre-acao)}
.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:var(--txt-sobre-acao);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:var(--t-12-5);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:.75rem 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-forte);
  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:var(--t-11);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-texto)}
tr:hover .acoes,tr:focus-within .acoes{opacity:1}
@media (hover:none){ .acoes{opacity:1} }

/* ---------- ETIQUETA E CHIP ------------------------------------------------- */
/* A PÍLULA de situação (Fase 4, decisão da Spidea): TODAS do tipo SUAVE — fundo
   tingido claro, texto e ícone na cor do estado —, redondas, com ícone + texto.
   ok ✓ · atenção e erro △ · em andamento ↻ (os ícones das pranchas, Lucide),
   desenhados por CSS com a máscara do próprio SVG, para não editar os mais de 150
   usos nos templates. A que só classifica (sem cor) é etiqueta NEUTRA suave, sem
   ícone; a que já traz um ícone dentro não ganha outro. Contraste da paleta.py:
   todas ≥ 4,5:1 nos dois temas. */
.badge{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .625rem;
  white-space:nowrap;border-radius:9999px;font-size:var(--t-12-5);line-height:1;
  font-weight:var(--font-weight-semibold);background:var(--ne-suave);color:var(--sobre-ne-suave);
  outline:0}
.badge.g{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.badge.y{background:var(--av-suave);color:var(--sobre-av-suave)}
.badge.r{background:var(--er-suave);color:var(--sobre-er-suave)}
.badge.n{background:var(--in-suave);color:var(--sobre-in-suave)}
.badge.g,.badge.y,.badge.r,.badge.n{padding-left:.4375rem}
.badge.g:not(:has(svg))::before,.badge.y:not(:has(svg))::before,
.badge.r:not(:has(svg))::before,.badge.n:not(:has(svg))::before{content:"";width:.875rem;
  height:.875rem;flex-shrink:0;background:currentColor;-webkit-mask:var(--pil-ic) center/contain no-repeat;
  mask:var(--pil-ic) center/contain no-repeat}
.badge:has(svg){padding-left:.4375rem}
.badge>svg{width:.875rem;height:.875rem}
.badge.g{--pil-ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.25'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E")}
.badge.y,.badge.r{--pil-ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.25'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E")}
.badge.n{--pil-ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.25'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208'/%3E%3Cpath%20d='M21%203v5h-5'/%3E%3Cpath%20d='M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016'/%3E%3Cpath%20d='M8%2016H3v5'/%3E%3C/svg%3E")}
.tag,.kbd{display:inline-block;padding:.125rem .4375rem;border-radius:var(--radius-sm);
  font-size:var(--t-12);font-variant-numeric:tabular-nums;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:var(--t-12-5);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:var(--t-9);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:var(--t-10);
  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:var(--t-12-5);color:var(--txt-forte)}

/* ---------- 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:var(--t-12-5);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:var(--t-11);
  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}
/* no celular a bolha em repouso sai da página (display:none), em vez de só ficar transparente:
   transparente ela ainda ocupava lugar e alargava o miolo — a dica de «Marcar a hora» (586 px,
   numa linha só) dava 189 px de rolagem lateral em /agenda/marcar/ —; e, quando aparece, quebra
   linha e cabe na tela (varredura visual de 28/09, item 4). Os `display:none` mais específicos
   de .agora-grade e .fio-ferramentas continuam valendo. */
@media (max-width:639.98px){
  .tip>.bolha{display:none;white-space:normal;width:max-content;max-width:calc(100vw - 2rem)}
  .tip:hover>.bolha,.tip:focus-within>.bolha{display:block}
  /* e cabe na LARGURA: centrada num botão encostado à borda, ela ainda saía uns 70 px
     da tela («Marcar a hora» em /agenda/marcar/). O gestos.js mede a bolha aberta e
     diz em --bolha-dx quanto ela anda para dentro; a seta volta o mesmo tanto e
     continua apontando o botão (restos de 29/09, item 8a). Só no celular. */
  .tip>.bolha{translate:var(--bolha-dx,0) 0}
  .tip>.bolha::after{translate:calc(-1 * var(--bolha-dx,0px)) 0}
}

/* ---------- 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)}
/* o atributo hidden vence o display do componente: `.alerta{display:flex}`
   sozinho o anulava (caixa vermelha vazia no link da captura facial, 03/10).
   Guarda: nucleo.tests_hidden_na_folha. */
.alerta[hidden],.btn[hidden],.badge[hidden],.note[hidden]{display:none}
.alerta .ic{flex-shrink:0}
.alerta .t{font-size:var(--d-text-ui);font-weight:var(--font-weight-semibold)}
.alerta .d{font-size:var(--t-12-5);opacity:.9;margin-top:.125rem}
/* Pílula suave DENTRO de aviso do MESMO estado (dono, 30/09): no tom da caixa ela
   sumia. Ganha um contorno fino da mesma cor, mais escuro: a própria cor do texto
   da pílula (--sobre-*-suave / --acao-texto) com alfa. Só nesse contexto; a
   pílula em cartão branco continua sem contorno. */
:is(.mu-aviso:not(.info) .mu-nivel.atencao, .mu-aviso.info .mu-nivel.informacao,
  .mu-aviso:not(.info) .badge.y, .mu-aviso.info .badge.n,
  .alerta:not(.ok):not(.erro) .badge.y, .alerta.ok .badge.g, .alerta.erro .badge.r,
  .toast.aviso .badge.y, .toast.ok .badge.g, .toast.erro .badge.r, .toast.info .badge.n,
  .mon-tabela tr[data-controlada="1"] .badge.r,
  .painel-hub-cartao:not(.av):not(.er) .badge.g, .painel-hub-cartao.av .badge.y,
  .painel-hub-cartao.er .badge.r){
  outline:1px solid color-mix(in srgb, currentColor 40%, transparent);outline-offset:-1px}

/* ---------- ESCALA DE PLANTÃO · COBERTURA (rodada 4, itens 8 e 9c, 29/09) ----
   A coluna «Cobertura» diz com palavra E ícone: coberto (verde), sem
   plantonista e plantonista afastado (atenção, amarelo — nada quebrou, falta
   escalar). A linha que pede atenção ganha o fundo de atenção; a nota sob o
   nome explica a troca ou o afastamento. Os pedaços vêm de
   templates/config/_plantao_*.html, pelos ganchos genéricos da Listagem. */
.esc-aviso{margin-bottom:.75rem;align-items:flex-start}
.esc-aviso-frases{font-size:var(--t-12-5);margin-top:.125rem}
.esc-quem{font-size:var(--t-12-5)}
.esc-apagado{color:var(--txt-apagado)}
.esc-riscado{text-decoration:line-through;color:var(--txt-fraco)}
.esc-nota{display:flex;gap:.25rem;align-items:flex-start;margin-top:.1875rem;
  font-size:var(--t-11);color:var(--txt-fraco)}
.esc-nota svg{width:.8125rem;height:.8125rem;flex-shrink:0;margin-top:.0625rem}
.esc-nota a{color:var(--txt-acao-linha)}
.esc-nota-av{color:var(--av)}
.esc-cob{display:inline-flex;align-items:center;gap:.3125rem;font-size:var(--t-12-5);
  font-weight:var(--font-weight-semibold);white-space:nowrap}
.esc-cob svg{width:.9375rem;height:.9375rem;flex-shrink:0}
.esc-cob-ok{color:var(--ok)}
.esc-cob-av{color:var(--av)}
.esc-cob-troca{color:var(--txt-fraco);font-weight:var(--font-weight-normal)}
.esc-btn{margin-left:.5rem;text-decoration:none}
.lc-linha.esc-atencao>td{background:var(--av-fundo)}
.funil.esc-filtro>summary{opacity:1;color:inherit}
.esc-filtro>.opcoes{left:0}
.lc-tabela td .badge{height:auto;min-height:1.5rem;padding-block:.125rem}
.esc-chip{text-decoration:none;color:inherit}
.esc-chip.on{background:var(--av-fundo);outline-color:var(--av-linha)}
@media (max-width:639.98px){
  .lc-linha.esc-atencao{background:var(--av-fundo)}
  .lc-linha.esc-atencao>td{background:transparent}
  .lc-linha>td:has(.esc-quem){display:block;grid-area:ex;min-width:0}
  .lc-linha>td:has(.esc-cob){display:block;grid-area:ex2;min-width:0}
  .esc-btn{margin:.25rem 0 0}
}

/* ---------- CARGOS E PERMISSÕES EM ABAS (Configurações · rodada 4) ----------
   O cargo aberto sem cartões laterais: o topo (título, resumo, «Duplicar» e
   «Novo cargo»), as abas do sistema (molde/_abas.html), o horário de trabalho
   com as três escolhas em cartões e a mesma tabela do expediente, a lista de
   pessoas e o diálogo «Novo cargo». Só tokens; cortes 639.98px / 1023.98px. */
.cargo-topo{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin:1rem 0 .875rem}
.cargo-topo-id{min-width:0;flex:1 1 20rem}
.cargo-topo-linha{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cargo-topo-nome{font-size:var(--t-18);font-weight:600}
.cargo-topo-acoes{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.cargo-abas{margin-bottom:1rem;border-bottom:1px solid var(--linha-fina)}
.cargo-painel{display:flex;flex-direction:column;gap:1rem;max-width:56rem}
.cargo-painel>.card{min-width:0}
.cargo-tabela{overflow-x:auto}
.cargo-pessoa{color:var(--txt-forte);font-weight:var(--font-weight-medium);text-decoration:none}
.cargo-pessoa:hover{text-decoration:underline}
.cargo-criar-form{border-radius:var(--radius-lg);padding:.875rem 1rem;outline:1px solid var(--linha-fina);outline-offset:-1px}
.cargo-criar-t{font-size:var(--t-13-5);font-weight:600;margin-bottom:.625rem}
/* as três escolhas do horário: cartões com rádio */
.cargo-modos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.cargo-modo{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;row-gap:.25rem;align-items:start;
  padding:.75rem;border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;
  cursor:pointer;background:var(--sup-cartao)}
.cargo-modo:has(input:checked){outline:2px solid var(--acao);background:var(--sup-selecionada)}
.cargo-modo>input{width:auto;height:auto;margin:.125rem 0 0;appearance:auto;accent-color:var(--acao)}
.cargo-modo-ic{display:flex;color:var(--txt-fraco)}
.cargo-modo>.t{grid-column:1/-1;font-size:var(--t-13-5);font-weight:600;color:var(--txt-forte)}
.cargo-modo>.d{grid-column:1/-1;font-size:var(--t-12);color:var(--txt-fraco);line-height:1.5}
.cargo-modo>input{grid-row:1}
.cargo-modo>.cargo-modo-ic{grid-row:1;grid-column:2}
/* a tabela do expediente só aparece com «próprio» marcado */
.cargo-horario:not(:has(input[name=horario_modo][value=proprio]:checked)) .cargo-semana{display:none}
.cargo-tolerancia{display:grid;grid-template-columns:14rem 1fr;gap:1rem;align-items:center;margin-top:1rem}
.cargo-tolerancia-caixa{display:flex;align-items:center;gap:.5rem}
.cargo-tolerancia-caixa>input{border:0;outline:0;background:transparent;width:100%;height:100%;font:inherit;color:inherit}
.cargo-tolerancia-caixa>.un{color:var(--txt-fraco);font-size:var(--t-12)}
.cargo-mais-de-um{margin-top:.25rem}
/* o diálogo «Novo cargo» / «Duplicar este cargo» */
.cargo-dialogo{border:0;border-radius:var(--radius-lg);box-shadow:var(--sombra-janela);padding:1.25rem 1.5rem;
  width:calc(100% - 2rem);max-width:34rem;background:var(--sup-cartao);color:var(--txt-forte)}
.cargo-dialogo::backdrop{background:var(--veu)}
.cargo-dialogo-cab{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cargo-dialogo-t{margin:0;font-size:var(--t-18);font-weight:650}
.cargo-dialogo-form{margin-top:.75rem}
.cargo-dialogo-acoes{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:1023.98px){
  .cargo-modos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639.98px){
  .cargo-topo-acoes{width:100%}
  .cargo-tolerancia{grid-template-columns:minmax(0,1fr)}
  .cargo-dialogo-acoes>.btn{flex:1 1 auto}
}

/* ---------- TIPOS DE AFASTAMENTO (Configurações · Usuários e permissões) ----
   A lista com o interruptor pequeno por coluna e o formulário do tipo com a
   prévia da porta (prancha da rodada 4, dono 29/09/2026). No celular a linha
   fica com o nome e o «Ativo»; o resto se lê ao abrir o tipo. */
.tipos-afast-busca{margin-bottom:.875rem;max-width:28rem}
.tipos-afast-busca .inp{gap:.4375rem;color:var(--txt-fraco)}
.tipos-afast-busca input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:var(--txt-forte)}
.tipos-afast td{vertical-align:middle}
.tipos-afast a.tit{color:var(--txt-forte);text-decoration:none;font-weight:var(--font-weight-medium)}
.tipos-afast tr.apagada a.tit{color:var(--txt-fraco)}
.tipos-afast .note{margin-top:.125rem}
.tipos-afast-sw{display:flex;align-items:center;gap:.5rem;margin:0;font-size:var(--t-12-5)}
.tipos-afast-sw button.sw{border:0;cursor:pointer}
.tipos-afast-editar{text-align:right}
.tipos-afast-nota{margin:.875rem 0 0;line-height:1.55}
.tipos-afast-alerta{margin-top:1rem}
@media (max-width:639.98px){ .tipos-afast .col-larga{display:none} }
.tipo-afast-lbl{margin-top:1rem}
.tipo-afast-chaves{display:flex;flex-direction:column;margin-top:1rem}
.tipo-afast-chave{padding:.75rem 0;border-top:1px solid var(--linha-fina);align-items:flex-start}
.tipo-afast-chave .t{display:block;font-weight:var(--font-weight-medium)}
.tipo-afast-chave .d{display:block;font-size:var(--t-12-5);color:var(--txt-fraco);margin-top:.125rem;line-height:1.5}
.tipo-afast-porta{display:flex;gap:.625rem;padding:.875rem 1rem;border-radius:var(--radius-lg);
  outline:1px dashed var(--linha);outline-offset:-1px;background:var(--sup-hover);margin-bottom:.75rem}
.tipo-afast-porta .t{font-weight:var(--font-weight-semibold)}
.tipo-afast-porta .d{font-size:var(--t-12-5);color:var(--txt-fraco);margin-top:.25rem;line-height:1.5}
.tipo-afast-quem{display:grid;grid-template-columns:9rem 1fr;gap:.5rem .75rem;margin:0;font-size:var(--t-12-5)}
.tipo-afast-quem dt{color:var(--txt-fraco)}
.tipo-afast-quem dd{margin:0}
@media (max-width:639.98px){ .tipo-afast-quem{grid-template-columns:1fr} .tipo-afast-quem dd{margin-bottom:.375rem} }
/* a porta recusando quem está afastado e acertou a senha */
.porta-afastado-ic{width:2.625rem;height:2.625rem;border-radius:9999px;display:grid;place-items:center;
  margin-bottom:1rem;background:var(--av-fundo);color:var(--av)}
.porta-afastado-volta{font-size:var(--t-12-5);color:var(--txt-fraco);margin:0 0 1rem;line-height:1.5}
.porta-afastado-quadro{display:grid;grid-template-columns:4.5rem 1fr;gap:.375rem .75rem;margin:0 0 1rem;
  padding:.75rem .875rem;border-radius:var(--radius-lg);background:var(--sup-rebaixada);font-size:var(--t-12-5)}
.porta-afastado-quadro dt{color:var(--txt-fraco)}
.porta-afastado-quadro dd{margin:0;font-weight:var(--font-weight-medium)}
.porta-afastado-nota{display:flex;gap:.5rem;align-items:flex-start;margin:0;font-size:var(--t-11-5);
  color:var(--txt-fraco);line-height:1.5}
.porta-afastado-nota svg{flex-shrink:0;margin-top:.0625rem}
/* lançar afastamento — a aba da ficha e o diálogo «Lançar ausência» */
.afast-lista td{vertical-align:top}
.afast-lista a{display:inline-flex;align-items:center;gap:.25rem}
.afast-tentativas{display:flex;align-items:center;gap:.25rem;color:var(--av)}
@media (max-width:639.98px){ .afast-lista .col-larga{display:none} }
.lancar-afast .lancar-grade{margin-top:.25rem}
.lancar-afast textarea.inp{height:auto;min-height:3.5rem;padding:.5rem .75rem;resize:vertical}
.lancar-seg{margin-top:.25rem}
.lancar-seg>label{display:inline-flex;align-items:center;padding:.3125rem .75rem;
  border-radius:var(--radius-sm);font-size:var(--t-12-5);color:var(--txt-fraco);cursor:pointer;margin:0}
.lancar-seg>label>input{position:absolute;opacity:0;pointer-events:none}
.lancar-seg>label:has(input:checked){background:var(--sup-cartao);color:var(--txt-forte);
  font-weight:var(--font-weight-medium);box-shadow:var(--shadow-xs)}
.lancar-seg>label:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:1px}
.lancar-afast .so-parte{display:none}
.lancar-afast:has(input[name=periodo][value=parte]:checked) .so-parte{display:block}
.lancar-afast:has(input[name=periodo][value=parte]:checked) label .so-parte{display:inline}
.lancar-afast:has(input[name=periodo][value=parte]:checked) .so-dia-inteiro{display:none}
.lancar-doc{display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;border-radius:var(--radius-lg);
  outline:1px dashed var(--linha);outline-offset:-1px}
.lancar-doc .note{display:block}
.lancar-erro{margin-bottom:.75rem}
.lancar-aviso{margin-top:.75rem}
.lancar-o-que{margin:0 0 .5rem}
.lancar-plantao{margin-top:.5rem}
.lancar-trocar{margin-top:.625rem}
.lancar-regra{margin:.75rem 0 0;line-height:1.5}
.lancar-ausencia-card{width:36rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);overflow:auto}
.lancar-ausencia-cab{display:flex;gap:.75rem;align-items:flex-start;padding:1.25rem 1.25rem 0}
.lancar-ausencia-cab>div{flex:1}
.lancar-ausencia-cab h3{margin:0;font-size:var(--t-16)}
.lancar-ausencia-cab .note{margin:.25rem 0 0}
.lancar-ausencia-cab .ic-topo{border:0;background:none;color:var(--txt-fraco);cursor:pointer}
/* Painel do dia · Usuários › Presença: o dia pelo horário do cargo (esperados,
   chegaram, atrasados, faltaram, afastados) — nucleo.horario, dono 29/09/2026 */
.pdia-esperado{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-bottom:.75rem}
.pdia-esp{display:flex;flex-direction:column;gap:.125rem;padding:.875rem 1rem;border-radius:var(--radius-lg);
  background:var(--sup-cartao);outline:1px solid var(--linha-cartao);outline-offset:-1px;min-width:0}
.pdia-esp .rot{font-size:var(--t-12-5);color:var(--txt-fraco)}
.pdia-esp b{font-size:var(--t-20);font-weight:var(--font-weight-semibold);line-height:1.3}
.pdia-esp .sub{font-size:var(--t-12);color:var(--txt-fraco)}
.pdia-esp.at b{color:var(--av)}
.pdia-esp.er b{color:var(--er)}
.pdia-atraso{display:inline-flex;align-items:center;gap:.25rem;margin-left:.375rem}
.pdia-tentou{display:flex;align-items:center;gap:.25rem;color:var(--er)}
@media (max-width:1023.98px){ .pdia-esperado{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:639.98px){ .pdia-esperado{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 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:var(--t-10-5);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:var(--t-12-5);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(--info-fundo);outline-color:var(--info-linha)} .toast.info .ic{color:var(--acao-texto)}
.tema-escuro .toast.info{background:var(--info-fundo);outline-color:var(--info-linha)}

/* ---------- VEREDITO do laudo ----------------------------------------------- */
/* A CONCLUSÃO de um laudo de assinatura, em faixa no topo dele (Spidea,
   13/09/2026). Herda o fundo tonal do `.alerta` e a DISCIPLINA DE COR do
   `.toast` logo acima: texto NEUTRO, cor só no ícone, e a cor do ícone vem do
   token próprio (`--ok-icone` e irmãos), que é mais suave que a do texto —
   verde-600 contra verde-700. O ícone é maior que o de linha porque aqui ele
   É o resultado, e não um detalhe; 1.5rem fica dentro da escala que o sistema
   já usa. A primeira versão desta faixa inventou tipografia (17px, caixa
   alta) e destoou do aplicativo inteiro: por isso ela NÃO declara tamanho de
   fonte — quem define o texto é `.alerta .t`. */
.veredito{align-items:center;gap:.75rem;padding:.8125rem .875rem;margin-bottom:.875rem;
  color:var(--txt-forte)}
.veredito .ic svg{width:1.5rem;height:1.5rem}
.veredito .d{color:var(--txt-fraco)}
.veredito.ok .ic{color:var(--ok-icone)}
.veredito.erro .ic{color:var(--er-icone)}
.veredito.aviso .ic{color:var(--av-icone)}

/* ---------- 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:var(--t-11);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:var(--t-12-5);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:var(--t-11);cursor:pointer;
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.pag>span.on{background:var(--acao);color:var(--txt-sobre-acao);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:var(--t-11);font-weight:700}
.ver{font-size:var(--t-12-5);padding:.4375rem .6875rem;border-left:2px solid var(--linha-fina);
  margin-left:.3125rem}
.ver.now{border-color:var(--ok)}

.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}
@media (max-width:639.98px){ .c1,.c2,.c3,.c4,.c5,.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:var(--t-13)}
/* 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:var(--t-10-5);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}
/* o <button> que veste .seta-bt (o copiar do campo somente leitura, o do
   sha256) não herda reset nenhum: sem esta linha o navegador lhe dá fundo
   cinza, borda 2px outset e 6px de recheio, e o ícone de 17px se espreme
   numa caixa de 26px — o copiar «desconfigurado» das fichas de Estação e de
   Spidea Hub, medido em Chrome de verdade (integradora, 17/09/2026). Antes o
   reset morava só em `.endereco .seta-bt`, e valia só lá dentro */
:where(button:not(.btn)).seta-bt{border:0;background:none;padding:0;font:inherit;color:var(--txt-acao-linha)}
.seta-bt:hover{background:var(--sup-rebaixada);color:var(--acao-texto)}
.seta-bt.feito{color:var(--ok)}
.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-texto)}
.grupo-campo .ferr.on{background:var(--acao-suave);color:var(--acao-texto);
  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:var(--t-13);line-height:1;width:1.25rem;height:1.25rem}
.cal-topo .mes{flex:1;text-align:center;white-space:nowrap;font-size:var(--t-13);
  font-weight:var(--font-weight-semibold);
  /* `.mes` é também a grade do mês da agenda (abaixo): aqui é só o rótulo */
  display:block;background:none;border-radius:0;overflow:visible;outline:0}
.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:var(--t-11-5);
  border-radius:var(--radius-sm);cursor:pointer}
.cal-grade>span.cab{color:var(--txt-apagado);font-size:var(--t-10);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)}
/* o campo de data do sistema (app: templates/molde/_data.html + static/datas.js,
   decisão do dono 29/09/2026 — dd/mm/aaaa em qualquer navegador): a caixa
   estica, o botão do calendário é <button> e o calendário flutua sobre a tela
   (fixo, para não ser cortado por cartão com overflow) */
.data-br>.inp{flex:1;min-width:0}
.data-br>.ferr{border:0;padding:0;font:inherit}
.cal-solto{position:fixed;z-index:60}
.cal-grade>span[role=button]:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
.cal-pe .btn.sm{height:1.625rem;font-size:var(--t-10-5);padding:0 .5rem}
/* no toque, cada dia ganha o alvo de 2,75rem (TOQUE, abaixo): sete deles não
   cabem nos 17rem — o calendário solto cresce até a largura da tela */
@media (pointer:coarse){
  .cal-solto{width:calc(7 * 2.75rem + 6px + 1.25rem);max-width:calc(100vw - 1rem)}
  .cal-solto .cal-grade>span{min-width:0}
}

/* 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:var(--t-11-5);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:var(--t-12-5)}

/* 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:var(--t-10-5);
  color:var(--acao-texto);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:var(--t-12-5);font-weight:var(--font-weight-medium);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arq .meta{font-size:var(--t-10-5);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:var(--t-10)}
.svc-cab .tit{font-size:var(--t-13);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:var(--radius-hair);background:var(--linha);
  margin-bottom:3px}
.arq-card .corpo{padding:.5625rem .625rem}
.arq-card .nome{font-size:var(--t-10-5);color:var(--txt-apagado);
  font-variant-numeric:tabular-nums;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:var(--t-13);cursor:pointer}
.paleta-it.on{background:var(--sup-selecionada)}
.paleta-it .sub{font-size:var(--t-11);color:var(--txt-fraco)}
.kbd{padding:.0625rem .3125rem;font-size:var(--t-10)}

/* ---------- 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:var(--t-12);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-texto);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:var(--t-11-5);margin-top:.4375rem;font-weight:var(--font-weight-medium)}
.passo .sub{font-size:var(--t-10);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:var(--t-12);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-texto);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}
/* a lista em LINHAS (o endereço, dono 28/09): sem cabeçalho único, o rótulo sobre cada caixa
   e um respiro entre as linhas de uma mesma entrada; a estrela e a lixeira ficam no alto */
.lista-form.em-linhas .li{align-items:flex-start;padding:.5rem 0}
.lista-form.em-linhas .li+.li{border-top:1px solid var(--linha-fina)}
.lista-form.em-linhas .li>.campos{row-gap:.5rem}
.lista-form.em-linhas .li>.campos>[data-rot]::before{content:attr(data-rot);display:block;
  font-size:var(--t-11);color:var(--txt-fraco);margin-bottom:.1875rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lista-form.em-linhas .li>.fim-li{margin-top:1.125rem}
/* 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:var(--t-10);color:var(--txt-apagado);white-space:nowrap}
.evento .quem{font-size:var(--t-11);color:var(--txt-fraco)}
.dia{font-size:var(--t-10-5);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:var(--radius-xs);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:var(--t-15);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:var(--t-18);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:var(--t-9);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:var(--papel-branco);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:var(--t-12)}
.eb:hover{background:var(--sup-rebaixada);color:var(--txt-forte)}
.eb.on{background:var(--acao-suave);color:var(--acao-texto)}
.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:var(--t-13);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:var(--t-12-5);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.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:var(--t-12-5);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:var(--t-12-5);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:var(--radius-xs);background:var(--color-zinc-400);opacity:.55;
  margin-bottom:11px}
.scan .titulo-ms{height:9px;width:58%;margin:0 auto 16px;border-radius:var(--radius-xs);
  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}
/* O visor do carimbo (missão «visualizador maior», pedido da Spidea,
   14/09/2026): tamanho FIXO nos dois eixos — não encolhe abaixo disso
   (a queixa de 14/09, «muito pequena») nem cresce sem fim com a página
   (a razão de ter ganho um max-height em 13/09). O desenho é o mesmo da
   caixa de "corte de imagens" do Transcribia: um visor de tamanho
   constante, fundo rebaixado para a borda da página aparecer, imagem
   centralizada e rolagem só quando o zoom manual passa do que cabe. O
   `.carimbo-palco` é o filho que o JS mede/redimensiona por página — ver
   `assinatura_carimbo.js`. */
.carimbo-area{position:relative;width:100%;height:495px;overflow:auto;
  border:1px solid var(--linha-fina);border-radius:var(--radius-lg);
  background:var(--sup-rebaixada);display:grid;place-items:center}
.carimbo-palco{position:relative;flex:none}
/* MEDIDO no visor de corte do Transcribia (~/Documents/transcribia,
   `.preview-viewport` em styles.css), porque a Spidea pediu «copie dele a caixa»
   e copiar é levar a medida, não o espírito: altura FIXA de 495px, largura
   100% SEM teto, `overflow:auto` e `place-items:center`. A primeira versão
   desta frente chutou 46rem × 32rem — ficou perto na altura e estreita
   demais na largura, que é justamente a queixa de 14/09 («muito pequena»).
   Os dois degraus abaixo são os mesmos de lá. O que NÃO copiei: o fundo
   xadrez (`background-image` em losangos), que existe lá para mostrar
   transparência de imagem; aqui a página do PDF é opaca e o xadrez só
   brigaria com as cores esmaecidas da casa. */
@media (max-width:1023.98px){.carimbo-area{height:450px}}
@media (max-width:639.98px){.carimbo-area{height:375px}}
.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:var(--t-11);
  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-variant-numeric:tabular-nums;font-size:var(--t-12-5);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:var(--t-12-5)}
.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:var(--t-14)}
.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:var(--t-11-5);font-weight:var(--font-weight-semibold);flex:1}
.coluna-cab .qtd{font-size:var(--t-10);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:var(--t-10);color:var(--txt-apagado);font-variant-numeric:tabular-nums}
.cartela .tit{font-size:var(--t-12);font-weight:var(--font-weight-medium);margin:.125rem 0 .25rem}
.cartela .pe{display:flex;align-items:center;gap:.3125rem;font-size:var(--t-10);
  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:var(--t-10);
  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:var(--t-11);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:var(--t-9);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:var(--t-10);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:var(--t-10-5)}
.agendado.livre{background:var(--sup-pagina);border-left-color:var(--linha);
  color:var(--txt-apagado)}
/* o dia cheio: a vista do Dia é para VARRER, procurando uma hora. Nome de 150
   caracteres quebrado em duas linhas desalinha a coluna inteira — ele sai
   cortado, como a célula do mês já corta em `.marca-ag`, e o inteiro fica no
   `title`. E a faixa da hora tem teto: passando de cinco, o resto se recolhe
   atrás do «+N mais», que é `<details>` do navegador e abre sem script. */
.hora-linha .agendado b,.hora-linha .agendado .sub{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* sem isto as reticências nunca chegam: item de flex tem `min-width:auto`, e a
   faixa CRESCE até caber o nome inteiro — a coluna continuava empurrada, agora
   para o lado, com rolagem horizontal. Só a faixa do DIA: na semana a coluna
   é estreita de propósito e não há `title` para devolver o que se cortasse */
.hora-linha>.faixa{min-width:0}
.mais-hora>summary{list-style:none;cursor:pointer;font-size:var(--t-10);
  color:var(--txt-fraco);padding:.125rem .375rem;margin-top:.125rem;
  border-radius:var(--radius-xs);background:var(--sup-pagina)}
.mais-hora>summary::-webkit-details-marker{display:none}
.mais-hora>summary:hover{background:var(--sup-hover);color:var(--txt-forte)}
.mais-hora .fe{display:none}
.mais-hora[open] .ab{display:none}
.mais-hora[open] .fe{display:inline}
.mais-hora .ocultos{display:flex;flex-direction:column;gap:.125rem;
  margin-top:.125rem}

/* ── agenda · rodada 2 do dia a dia (dono, 29/09/2026) ─────────────────────
   O marcador RETO volta: fio de 2 px à esquerda e canto reto — o desenho do
   `.agendado`, sem o colchete arredondado da rodada 1. «Faltou» esmaece (fio
   cinza); bloqueio e almoço saem listrados. Dia, semana e mês também no
   celular: a semana empilha os dias; o mês vira pontos e o dia tocado lista
   embaixo. A busca e os filtros são uma faixa só, abaixo da barra. */
.ag-barra{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:1rem 1.25rem;
  border-bottom:1px solid var(--linha-fina)}
.ag-barra .titulo{font-size:var(--t-16);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);margin:0 .5rem 0 .25rem;font-variant-numeric:tabular-nums}
.ag-barra .espaco{flex:1}
.ag-barra .seg>a{color:inherit;text-decoration:none}
.ag-marcado{display:block;min-width:0;padding:.4375rem .75rem .4375rem .6875rem;
  background:var(--acao-suave);border-left:2px solid var(--acao);border-radius:0;
  text-decoration:none;color:var(--txt-forte)}
.ag-marcado:hover{filter:brightness(.97)}
.ag-marcado b{display:block;font-size:var(--t-14);font-weight:var(--font-weight-semibold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-marcado .l{display:block;font-size:var(--t-12);color:var(--txt-fraco);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ag-marcado .sit{display:flex;gap:.25rem;align-items:center}
.ag-marcado .sit svg{width:.75rem;height:.75rem;flex-shrink:0}
.ag-marcado.ag-apagado{background:var(--sup-pagina);border-left-color:var(--linha-forte)}
.ag-marcado.ag-apagado b{color:var(--txt-fraco)}
.ag-marcado.listrado{background:repeating-linear-gradient(135deg,var(--sup-rebaixada) 0 8px,
  transparent 8px 16px);border-left-color:var(--linha-forte);color:var(--txt-fraco)}
.ag-marcado.listrado b{font-weight:var(--font-weight-medium);color:var(--txt-fraco)}
.ag-marcado .remover{margin-top:.25rem}
/* a busca e os filtros */
.ag-filtros{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.75rem 1.25rem;
  border-bottom:1px solid var(--linha-fina);background:var(--sup-fraca)}
.ag-busca{display:flex;align-items:center;gap:.5rem;flex:1 1 16rem;max-width:24rem;
  height:2.25rem;background:var(--sup-cartao)}
.ag-busca svg{width:1rem;height:1rem;color:var(--txt-fraco);flex-shrink:0}
.ag-busca input{height:auto}
.ag-filtros .chip{background:var(--sup-cartao);padding-right:.375rem;cursor:pointer}
.ag-filtros .chip svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.ag-filtros .chip select{appearance:none;border:0;outline:0;background:transparent;height:1.25rem;
  line-height:1.25rem;width:auto;min-width:0;max-width:14rem;field-sizing:content;padding:0 1.125rem 0 0;
  text-overflow:ellipsis;font:inherit;font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);cursor:pointer;background-image:var(--ic-seta);
  background-repeat:no-repeat;background-position:right center;background-size:.875rem}
.ag-filtros .chip .rot{margin:0;line-height:1.25rem}
.ag-filtros .chip select:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.ag-filtros .chip.on{background:var(--sup-selecionada);outline-color:var(--acao)}
.ag-filtros .chip .x{text-decoration:none}
/* «Limpar» é link de texto: desfaz a caixa de 1,25rem do `.limpar` (o x das
   caixas de busca), que espremia a palavra por cima do último chip */
.ag-filtros .limpar{width:auto;height:1.875rem;padding:0 .375rem;margin-left:.25rem;
  white-space:nowrap;font-size:var(--t-13);color:var(--link);text-decoration:none}
.ag-filtros .conta{margin-left:auto;font-size:var(--t-12);color:var(--txt-fraco)}
.ag-filtros .enviar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* o dia */
.ag-dia{padding:.75rem 1.25rem 1rem}
.ag-hora{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:.5rem;
  border-top:1px solid var(--linha-fina);padding:.5rem 0;min-height:3rem}
.ag-hora:first-child{border-top:0}
.ag-hora>.h{font-size:var(--t-13);font-weight:var(--font-weight-semibold);color:var(--txt-forte);
  padding-top:.4375rem;font-variant-numeric:tabular-nums}
.ag-hora.vazia>.h{font-weight:var(--font-weight-normal);color:var(--txt-fraco)}
.ag-hora>.faixa{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.5rem;min-width:0;align-content:start}
.ag-hora>.faixa>.almoco,.ag-hora>.faixa>.bloq{grid-column:1/-1}
.ag-hora .ag-livre{display:flex;align-items:center;gap:.375rem;grid-column:1/-1;
  font-size:var(--t-12);color:var(--txt-fraco);text-decoration:none;padding:.4375rem .75rem;
  border-radius:var(--radius-sm)}
a.livre:hover{background:var(--sup-hover);color:var(--acao-texto)}
.ag-hora .ag-livre svg{width:.875rem;height:.875rem}
.ag-hora .mais-hora{grid-column:1/-1}
.ag-hora .mais-hora .ocultos{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.5rem}
.ag-vazio{padding:1rem 1.25rem}
/* a semana */
.ag-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ag-semana>.col{border-left:1px solid var(--linha-fina);min-height:22rem;display:flex;
  flex-direction:column;min-width:0}
.ag-semana>.col:first-child{border-left:0}
.ag-semana>.col.fds{background:var(--sup-fraca)}
.ag-semana .cab{padding:.625rem .75rem;border-bottom:1px solid var(--linha-fina);
  text-decoration:none;color:inherit;display:block}
.ag-semana .cab .d{font-size:var(--t-12);color:var(--txt-fraco);text-transform:uppercase;
  letter-spacing:.04em}
.ag-semana .cab .n{font-size:var(--t-18);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);font-variant-numeric:tabular-nums}
.ag-semana .col.hoje .cab .n{color:var(--acao-texto)}
.ag-semana .cab .q{font-size:var(--t-12);color:var(--txt-fraco);min-height:1.125rem}
.ag-semana .itens{padding:.5rem;display:flex;flex-direction:column;gap:.375rem}
.ag-semana .ag-marcado{padding:.3125rem .5rem}
.ag-semana .ag-marcado b{font-size:var(--t-13)}
.ag-semana .ag-nada{font-size:var(--t-12);color:var(--txt-apagado);padding:.25rem .125rem}
.ag-semana .marca-ag,.ag-mes .marca-ag,.ag-dia-lista .marca-ag{font-size:var(--t-12);
  padding:.1875rem .5rem;margin:0}
/* o mês */
.ag-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ag-mes>.cab{padding:.5rem .75rem;font-size:var(--t-12);font-weight:var(--font-weight-medium);
  color:var(--txt-fraco);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--linha-fina)}
.ag-mes>.cel{position:relative;min-height:7rem;padding:.5rem;
  border-bottom:1px solid var(--linha-fina);border-left:1px solid var(--linha-fina);
  display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ag-mes>.cel:nth-child(7n+8){border-left:0}
.ag-mes>.cel.fora{background:var(--sup-fraca)}
.ag-mes>.cel.escolhido{outline:2px solid var(--acao);outline-offset:-2px}
.ag-mes .num{align-self:flex-start;font-size:var(--t-13);font-weight:var(--font-weight-medium);
  color:var(--txt-forte);text-decoration:none;font-variant-numeric:tabular-nums}
.ag-mes .cel.fora .num{color:var(--txt-apagado)}
.ag-mes .cel.hoje .num{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;
  border-radius:9999px;background:var(--acao);color:var(--txt-sobre-acao)}
.ag-mes .ag-marcado{padding:.1875rem .4375rem}
.ag-mes .ag-marcado b{font-size:var(--t-12);font-weight:var(--font-weight-medium)}
.ag-mes .mais{font-size:var(--t-12);color:var(--txt-fraco);text-decoration:none}
.ag-mes .tocar{display:none}
.ag-mes-pontos{display:none}
.ag-dia-lista{padding:.75rem 1rem 1rem;border-top:1px solid var(--linha-fina);
  display:flex;flex-direction:column;gap:.375rem}
.ag-dia-lista h4{margin:0 0 .125rem;font-size:var(--t-14);font-weight:var(--font-weight-semibold)}
.ag-dia-lista .ag-nada{font-size:var(--t-12);color:var(--txt-apagado)}
@media (min-width:640px){.ag-dia-lista{display:none}}
/* a busca */
.ag-res-dia{padding:.75rem 1.25rem 0;font-size:var(--t-12);font-weight:var(--font-weight-semibold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco)}
.ag-res{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:.75rem;
  align-items:center;padding:.625rem 1.25rem;border-bottom:1px solid var(--linha-fina);
  text-decoration:none;color:inherit}
.ag-res:hover{background:var(--sup-hover)}
.ag-res>.h{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;
  color:var(--txt-forte)}
.ag-res>.ag-marcado{background:transparent;padding:.125rem .625rem;border-left-color:var(--linha-forte)}
.ag-res mark{background:var(--av-fundo);color:inherit;border-radius:var(--radius-xs);padding:0 .0625rem}
.ag-res-nota{padding:.75rem 1.25rem;border-bottom:1px solid var(--linha-fina);font-size:var(--t-13);
  color:var(--txt-fraco)}
/* a legenda */
.ag-legenda{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--t-12);color:var(--txt-fraco);
  padding:.75rem 1.25rem;border-top:1px solid var(--linha-fina)}
.ag-legenda span{display:inline-flex;gap:.375rem;align-items:center}
.ag-legenda i{display:inline-block;width:.75rem;height:.75rem;border-left:2px solid var(--acao);background:var(--acao-suave)}
.ag-legenda i.ap{border-left-color:var(--linha-forte);background:var(--sup-pagina)}
.ag-legenda i.bl{border-left-color:var(--txt-apagado);background:repeating-linear-gradient(135deg,
  var(--sup-rebaixada) 0 3px,transparent 3px 6px)}
@media (max-width:639.98px){
  .ag-barra{padding:1rem}
  .ag-barra .titulo{flex:1;min-width:0}
  .ag-barra .seg{order:5;flex-basis:100%;display:flex}
  .ag-barra .seg>*{flex:1;text-align:center}
  .ag-barra .espaco{display:none}
  .ag-barra .acao{order:6;flex:1}
  .ag-filtros{padding:.75rem 1rem}
  .ag-busca{max-width:none;flex-basis:100%}
  .ag-filtros .conta{margin-left:0;flex-basis:100%}
  .ag-dia{padding:.5rem 1rem 1rem}
  .ag-hora{grid-template-columns:3.5rem minmax(0,1fr)}
  .ag-hora>.faixa,.ag-hora .mais-hora .ocultos{grid-template-columns:minmax(0,1fr)}
  .ag-semana{grid-template-columns:minmax(0,1fr)}
  .ag-semana>.col{border-left:0;border-top:1px solid var(--linha-fina);min-height:0}
  .ag-semana>.col:first-child{border-top:0}
  .ag-semana .cab{display:flex;gap:.625rem;align-items:baseline}
  .ag-mes>.cel{min-height:3.25rem;padding:.375rem .25rem;align-items:center}
  .ag-mes>.cel .ag-marcado,.ag-mes>.cel .marca-ag,.ag-mes>.cel .mais{display:none}
  .ag-mes>.cab{padding:.5rem 0;text-align:center}
  .ag-mes .num{align-self:center}
  .ag-mes .tocar{display:block;position:absolute;inset:0}
  .ag-mes-pontos{display:flex;gap:.1875rem}
  .ag-mes-pontos i{width:.375rem;height:.375rem;border-radius:9999px;background:var(--acao)}
  .ag-mes-pontos i.ap{background:var(--linha-forte)}
  .ag-mes-pontos i.av{background:var(--av-icone)}
  .ag-res{grid-template-columns:3.5rem minmax(0,1fr);padding:.625rem 1rem}
  .ag-res>.badge{grid-column:2;justify-self:start}
  .ag-res-dia{padding:.75rem 1rem 0}
  .ag-legenda{padding:.75rem 1rem}
}

/* ── a aba «Agendamento» da O.S. (rodada 3) ───────────────────────────────
   Pede só quem vem, o dia e a hora; o resto é etiqueta lida da regra. */
.ag-aba>.os-lede{margin:0}
.ag-aba>.os-lede+.ag-lado{margin-top:1rem}
.ag-regra{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0 1rem}
.ag-regra .tag{display:inline-flex;gap:.3125rem;align-items:center;font-size:var(--t-12)}
.ag-regra .tag svg{width:.8125rem;height:.8125rem}
.ag-lado{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1rem;align-items:start}
.ag-pilha{display:flex;flex-direction:column;gap:1rem;min-width:0}
.ag-cartao{background:var(--sup-cartao);border-radius:var(--radius-lg);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;min-width:0}
.ag-cartao>.cab{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:1rem 1.25rem .75rem}
.ag-cartao>.cab h3{margin:0;flex:1;font-size:var(--t-16);font-weight:var(--font-weight-semibold);
  display:flex;align-items:center;gap:.5rem}
.ag-cartao>.cab h3 svg{width:1rem;height:1rem;color:var(--acao-texto)}
.ag-cartao>.cab .meta{font-size:var(--t-13);color:var(--txt-fraco)}
.ag-cartao>.corpo{padding:1.25rem}
.ag-cartao>.cab+.corpo{padding-top:.25rem}
.ag-cartao>.pe{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.875rem 1.25rem;
  border-top:1px solid var(--linha-fina)}
.ag-cartao>.pe .espaco{flex:1}
.ag-cartao>.pe>.cresce{flex:1;display:flex}
.ag-cartao>.pe>.cresce>.btn,.ag-cartao>.pe>.cresce>.tip,.ag-cartao>.pe>.cresce>.tip>.btn{flex:1;width:100%}
.ag-quem{max-width:22rem;margin-bottom:1.25rem}
.ag-rot{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem}
.ag-rot .lbl{margin:0;flex:1}
.ag-outra>summary{list-style:none;cursor:pointer}
.ag-outra>summary::-webkit-details-marker{display:none}
.ag-outra[open]>summary{margin-bottom:.5rem}
.ag-outra .linha{display:flex;gap:.5rem;align-items:center;max-width:22rem}
.ag-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.ag-dias>button,.ag-dias>span{appearance:none;border:0;font:inherit;text-align:center;
  padding:.5rem .25rem;border-radius:var(--radius-lg);background:var(--sup-cartao);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;cursor:pointer;color:var(--txt-forte);
  min-width:0}
.ag-dias>button:hover{background:var(--sup-hover)}
.ag-dias .s{display:block;font-size:var(--t-12);color:var(--txt-fraco);text-transform:uppercase;
  letter-spacing:.04em}
.ag-dias .n{display:block;font-size:var(--t-16);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums}
.ag-dias .v{display:block;font-size:var(--t-12);color:var(--ok)}
.ag-dias .ag-dia-on{outline:2px solid var(--acao);outline-offset:-2px;background:var(--sup-selecionada)}
.ag-dias .ag-dia-dis{background:var(--sup-fraca);color:var(--txt-apagado);cursor:not-allowed}
.ag-dias .ag-dia-dis .v,.ag-dias .ag-dia-dis .s{color:var(--txt-apagado)}
.ag-dias .ag-dia-dis.ag-dia-on .v{color:var(--acao-texto)}
.ag-vagas{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.5rem}
.ag-vaga{appearance:none;border:0;font:inherit;text-align:left;padding:.5rem .75rem;
  border-radius:var(--radius-lg);background:var(--sup-cartao);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;cursor:pointer;color:var(--txt-forte);min-width:0}
button.ag-vaga:hover{background:var(--sup-hover)}
.ag-vaga b{display:block;font-size:var(--t-16);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums}
.ag-vaga span{display:block;font-size:var(--t-12);color:var(--ok)}
.ag-vaga.on{outline:2px solid var(--acao);outline-offset:-2px;background:var(--sup-selecionada)}
.ag-vaga.on span{color:var(--acao-texto)}
.ag-vaga.ag-cheia{background:var(--sup-fraca);cursor:not-allowed}
.ag-vaga.ag-cheia b,.ag-vaga.ag-cheia span{color:var(--txt-apagado)}
.ag-vaga.encaixe{outline-style:dashed;outline-color:var(--av-linha);background:var(--av-fundo)}
.ag-vaga.encaixe span{color:var(--av)}
.ag-vaga.encaixe.on{outline-style:solid;outline-color:var(--av-linha)}
.ag-vaga.nao{background:transparent;outline-style:dashed;outline-color:var(--linha-fina);cursor:default}
.ag-vaga.nao b,.ag-vaga.nao span{color:var(--txt-apagado);font-weight:var(--font-weight-medium)}
.ag-proxima{display:flex;gap:1rem;align-items:center;padding:1rem 1.25rem;
  border-radius:var(--radius-lg);background:var(--sup-selecionada);outline:2px solid var(--acao);
  outline-offset:-2px}
.ag-proxima .ic{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;
  height:2.75rem;border-radius:9999px;background:var(--sup-cartao);color:var(--acao-texto);flex-shrink:0}
.ag-proxima .ic svg{width:1.375rem;height:1.375rem}
.ag-proxima .t{flex:1;min-width:0}
.ag-proxima .t span{display:block;font-size:var(--t-12);color:var(--txt-fraco)}
.ag-proxima .t b{display:block;font-size:var(--t-20);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);font-variant-numeric:tabular-nums}
.ag-grade{margin-top:1rem;border-radius:var(--radius-lg);outline:1px solid var(--linha-cartao);
  outline-offset:-1px}
.ag-grade>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;font-size:var(--t-14);font-weight:var(--font-weight-medium)}
.ag-grade>summary::-webkit-details-marker{display:none}
.ag-grade>summary .seta{margin-left:auto;display:flex;transition:transform .15s}
.ag-grade[open]>summary .seta{transform:rotate(180deg)}
.ag-grade>div{padding:0 1rem 1rem}
.ag-resumo{display:flex;flex-direction:column;gap:.75rem;padding:0 1.25rem 1rem}
.ag-resumo .q{font-size:var(--t-12);color:var(--txt-fraco)}
.ag-resumo .q b{display:block;font-size:var(--t-16);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);margin-top:.125rem}
.ag-resumo textarea{height:4.5rem;padding:.5rem .75rem}
.ag-estado{display:flex;gap:.875rem;align-items:flex-start;padding:1rem 1.25rem}
.ag-estado .ic{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;
  height:2.25rem;border-radius:var(--radius-lg);background:var(--sup-rebaixada);
  color:var(--txt-fraco);flex-shrink:0}
.ag-estado .ic svg{width:1.125rem;height:1.125rem}
.ag-estado b{display:block;font-size:var(--t-14);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte)}
.ag-estado p{margin:.25rem 0 0;font-size:var(--t-13);color:var(--txt-fraco);line-height:1.5}
.ag-estado .btn{margin-top:.625rem}
.ag-pares{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.625rem 1rem;margin:0;
  font-size:var(--t-14)}
.ag-pares dt{color:var(--txt-fraco)}
.ag-pares dd{margin:0;color:var(--txt-forte);overflow-wrap:anywhere}
.ag-hist{list-style:none;margin:0;padding:0 1.25rem 1rem;display:flex;flex-direction:column;
  gap:.5rem;font-size:var(--t-13);color:var(--txt-fraco)}
.ag-hist li{display:flex;gap:.5rem;align-items:baseline}
.ag-hist li svg{width:.875rem;height:.875rem;flex-shrink:0;position:relative;top:.125rem}
.ag-hist b{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
.ag-hist-nota{padding:0 1.25rem 1rem;font-size:var(--t-13);color:var(--txt-fraco)}
.ag-qual{display:flex;flex-direction:column;max-width:36rem;margin-top:.5rem;
  border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px}
.ag-qual>a{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;text-decoration:none;
  color:inherit;border-top:1px solid var(--linha-fina)}
.ag-qual>a:first-child{border-top:0}
.ag-qual>a:hover{background:var(--sup-hover)}
.ag-qual .t{flex:1;min-width:0;font-weight:var(--font-weight-semibold)}
.ag-qual .t .cod{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ag-qual .t .sub{display:block;font-size:var(--t-12);font-weight:var(--font-weight-normal);
  color:var(--txt-fraco)}
.ag-qual .apagada .t{color:var(--txt-fraco)}
.ag-qual svg{width:1rem;height:1rem;color:var(--txt-fraco);flex-shrink:0}
@media (max-width:1023.98px){.ag-lado{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639.98px){
  .ag-dias{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ag-vagas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-cartao>.corpo{padding:1rem}
  .ag-cartao>.cab{padding:1rem 1rem .75rem}
  .ag-cartao>.pe{padding:.875rem 1rem}
  .ag-resumo{padding:0 1rem 1rem}
  .ag-pares{grid-template-columns:minmax(0,1fr);gap:.125rem}
  .ag-pares dd{margin-bottom:.5rem}
}

/* 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:var(--t-12-5);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:var(--t-9);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-texto)}
.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:var(--t-9);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-texto)}

/* 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:var(--t-10-5);color:var(--txt-fraco);letter-spacing:.04em;
  text-transform:uppercase}
.metrica .val{font-size:var(--t-24);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;margin-top:.1875rem;line-height:1.1}
.metrica .delta{font-size:var(--t-10-5);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:var(--t-9);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:var(--t-12-5);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:var(--t-10);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:var(--t-12);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:var(--t-11-5)}
.perm-linha .acao{flex:1;font-variant-numeric:tabular-nums;font-size:var(--t-11);
  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:var(--t-9);
  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:var(--t-11-5)}
.perm-grade th{font-weight:var(--font-weight-medium);text-align:left;padding:.375rem .5rem;
  color:var(--txt-fraco);font-size:var(--t-11);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:var(--t-12)}
.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:var(--t-9);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:var(--t-10);color:var(--txt-apagado);
  font-weight:var(--font-weight-normal)}
.perm-nao{color:var(--linha);font-size:var(--t-12)}
.perm-nota{display:block;font-size:var(--t-9);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:var(--t-11);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}

/* ---------- CARGOS E PERMISSÕES · TRÊS VISÕES NUMA TELA (dono, 03/10/2026) ------
   Matriz (padrão) · Por cargo · Por permissão. Prefixo cg-. Estado = fundo suave
   + contorno fino + pílula + ícone — sem barra de acento à esquerda. Só tokens. */
.cg-tela{min-width:0}
.cg-cab{align-items:flex-start}
.cg-cab-d{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0}
.cg-cab-ac{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
/* toolbar segmentada de três ícones (links: cada visão tem endereço) */
.cg-seg{display:inline-flex;padding:2px;gap:2px;background:var(--sup-rebaixada);border-radius:var(--radius-md);
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.cg-segb{position:relative;display:grid;place-items:center;width:2.25rem;height:1.875rem;
  border-radius:var(--radius-sm);color:var(--txt-fraco);text-decoration:none}
.cg-segb.on{background:var(--sup-cartao);color:var(--txt-marca);box-shadow:var(--shadow-xs)}
.cg-segb:hover{color:var(--txt-forte)}
.cg-segb:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.cg-segb svg{width:1rem;height:1rem}
.cg-segb::after{content:attr(data-tip);position:absolute;top:calc(100% + .375rem);right:0;
  background:var(--txt-forte);color:var(--sup-cartao);font-size:var(--t-11-5);padding:.25rem .5rem;
  border-radius:var(--radius-md);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .12s;z-index:30}
.cg-segb:hover::after,.cg-segb:focus-visible::after{opacity:1}
/* ferramentas */
.cg-ferr{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.625rem}
.cg-escondidos{display:contents}
.cg-ferr-matriz{display:contents}
.cg-ferr-linha{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.625rem;
  justify-content:space-between}
.cg-busca{display:flex;gap:.5rem;align-items:center;outline:1px solid var(--linha-campo);outline-offset:-1px;
  border-radius:var(--radius-md);padding:0 .625rem;height:2rem;background:var(--sup-cartao);
  width:18rem;max-width:100%;color:var(--txt-fraco)}
.cg-busca input{border:0;outline:0;background:transparent;height:100%;font:inherit;
  font-size:var(--t-12-5);color:var(--txt-forte);width:100%;padding:0;box-shadow:none}
.cg-busca:focus-within{outline:2px solid var(--foco);outline-offset:-2px}
.cg-sel{height:2rem;border-radius:var(--radius-md);outline:1px solid var(--linha-campo);outline-offset:-1px;
  border:0;background:var(--sup-cartao);font-size:var(--t-12-5);padding:0 .5rem;color:var(--txt-forte);width:auto}
.cg-sel-l{width:100%}
.cg-esp{flex:1}
.cg-chip{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;outline:1px solid var(--linha-fina);
  outline-offset:-1px;padding:0 .625rem;height:1.625rem;font-size:var(--t-12);background:var(--sup-cartao);
  color:var(--txt-fraco);white-space:nowrap;border:0;cursor:pointer;text-decoration:none}
.cg-chip.on{background:var(--sup-selecionada);outline-color:var(--info-linha);color:var(--txt-marca);
  font-weight:var(--font-weight-semibold)}
.cg-dica{display:block;color:var(--txt-fraco);font-size:var(--t-11-5);font-weight:var(--font-weight-normal)}
.cg-cd{display:block;color:var(--txt-apagado);font-size:var(--t-11);font-variant-numeric:tabular-nums}
.cg-nota{display:flex;gap:.25rem;align-items:center;color:var(--av);font-size:var(--t-11)}
.cg-nota svg,.cg-lk svg{width:.75rem;height:.75rem}
.cg-nova{display:inline-block;border-radius:9999px;padding:0 .4375rem;font-size:var(--t-10-5);
  background:var(--info-fundo);color:var(--txt-marca);outline:1px solid var(--info-linha);outline-offset:-1px;
  font-weight:var(--font-weight-medium);vertical-align:.0625rem}
.cg-avisos:empty{display:none}
.cg-avisos .alerta{margin-bottom:.75rem}
.alerta.aprov{background:var(--av-fundo);outline-color:var(--av-linha);color:var(--av)}
.cg-cartao{background:var(--sup-cartao);border-radius:var(--radius-lg);box-shadow:var(--sombra-cartao);min-width:0}
.cg-vazio{padding:2rem;text-align:center;color:var(--txt-fraco)}
.cg-chips{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:.625rem}
.cg-legenda{display:flex;gap:.875rem;align-items:center;flex-wrap:wrap;font-size:var(--t-12);color:var(--txt-fraco)}
.cg-legenda>span{display:inline-flex;gap:.375rem;align-items:center}
.cg-celular-dica{display:none;margin-top:.5rem}
.cg-pagina{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
.cg-pagina:has(.cg-gav){grid-template-columns:minmax(0,1fr) 23rem}
.cg-principal{min-width:0}
.cg-regras{margin-top:1.25rem}
/* matriz */
.cg-mx{overflow:auto;max-height:min(44rem,calc(100dvh - 14rem));border-radius:var(--radius-lg);
  background:var(--sup-cartao);box-shadow:var(--sombra-cartao)}
.cg-mxt{border-collapse:separate;border-spacing:0;width:100%}
.cg-mxt th,.cg-mxt td{padding:0;font-weight:var(--font-weight-normal);text-align:center;
  border-bottom:1px solid var(--linha-fina);background:var(--sup-cartao)}
.cg-c0{position:sticky;left:0;z-index:2;text-align:left!important;min-width:18rem;max-width:18rem;
  padding:.3125rem .75rem!important;border-right:1px solid var(--linha-fina)}
.cg-mxt thead th{position:sticky;top:0;z-index:3;background:var(--sup-rebaixada);height:3.875rem;box-sizing:border-box}
.cg-mxt thead tr.cg-resl th{top:3.875rem;height:2rem;z-index:3;font-size:var(--t-11);color:var(--txt-fraco);
  background:var(--sup-cartao);border-bottom:1px solid var(--linha-forte)}
.cg-mxt thead th.cg-c0{z-index:5}
.cg-hc{min-width:6.5rem;position:relative;padding:.25rem .375rem!important;line-height:1.25;font-size:var(--t-12)}
.cg-hc-b{display:block;width:100%;border:0;background:transparent;cursor:pointer;color:inherit;font:inherit;
  padding:.125rem .75rem .125rem .125rem;border-radius:var(--radius-md)}
.cg-hc-b:hover,.cg-hc-b:focus-visible{background:var(--sup-selecionada);color:var(--txt-marca)}
.cg-hc-b b{font-weight:var(--font-weight-semibold);display:block}
.cg-hx{position:absolute;top:.125rem;right:.125rem;color:var(--txt-apagado);border:0;background:transparent;
  cursor:pointer;display:inline-flex;padding:.125rem}
.cg-hx:hover{color:var(--txt-forte)}
.cg-hx svg{width:.75rem;height:.75rem}
.cg-lk{color:var(--txt-apagado);vertical-align:-.125rem}
.cg-res-n{font-variant-numeric:tabular-nums}
.cg-res-n .l{color:var(--ok)}
.cg-res-n .a,.cg-ap{color:var(--av)}
.cg-mrow td,.cg-mrow th{background:var(--sup-rebaixada)!important;font-size:var(--t-11-5);color:var(--txt-fraco);height:2rem}
.cg-mtog{display:flex;gap:.375rem;align-items:center;border:0;background:transparent;cursor:pointer;
  color:var(--txt-forte);font:inherit;font-size:var(--t-12-5);padding:0;width:100%;text-align:left}
.cg-mtog svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.cg-mtog b{font-weight:var(--font-weight-semibold)}
.cg-mtog .cg-dica{margin-left:.125rem}
.cg-ico-fechado{display:none}
.cg-mod[data-fechado] .cg-ico-aberto{display:none}
.cg-mod[data-fechado] .cg-ico-fechado{display:inline-flex}
.cg-mod[data-fechado] .cg-lin{display:none}
.cg-mxt tbody .cg-lin th.cg-c0 b{font-weight:var(--font-weight-medium);font-size:var(--t-12-5);display:block}
.cg-cel{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.625rem;
  border-radius:var(--radius-md);cursor:pointer;outline:1px solid var(--linha-fina);outline-offset:-1px;
  background:var(--sup-rebaixada);color:var(--txt-apagado);border:0;position:relative;margin:.1875rem 0;padding:0}
.cg-cel svg{width:1rem;height:1rem}
.cg-i{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.cg-sprite{position:absolute}
.cg-cel.liberada{background:var(--ok-fundo);outline-color:var(--ok-linha);color:var(--ok)}
.cg-cel.aprovacao{background:var(--av-fundo);outline-color:var(--av-linha);color:var(--av)}
.cg-cel.sem_permissao{background:var(--er-fundo);outline-color:var(--er-linha);color:var(--er)}
.cg-cel.dis{cursor:default;opacity:.65}
.cg-cel.mud{outline:2px solid var(--acao);outline-offset:1px}
.cg-cel.aberta,.cg-est.aberta,.cg-tag-b.aberta{outline:2px solid var(--foco);outline-offset:1px}
.cg-cel-leg{cursor:default;margin:0}
.cg-lim{position:absolute;right:-.1875rem;bottom:-.25rem;width:.8125rem;height:.8125rem;border-radius:9999px;
  background:var(--sup-cartao);color:var(--txt-fraco);display:flex;align-items:center;justify-content:center;
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.cg-lim svg{width:.5625rem;height:.5625rem}
.cg-cel-lim{position:relative}
/* por cargo */
.cg-pc{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1rem;align-items:start}
.cg-lcs{padding:.5rem;max-height:min(46rem,calc(100dvh - 12rem));overflow:auto;position:sticky;top:.5rem}
.cg-lc-b{display:flex;gap:.5rem;align-items:center;outline:1px solid var(--linha-campo);outline-offset:-1px;
  border-radius:var(--radius-md);padding:0 .625rem;height:2rem;color:var(--txt-fraco);margin-bottom:.25rem}
.cg-lc-b input{border:0;outline:0;background:transparent;height:100%;font:inherit;font-size:var(--t-12-5);
  width:100%;padding:0;color:var(--txt-forte);box-shadow:none}
.cg-lc-n{padding:.375rem .5rem 0}
.cg-gr{font-size:var(--t-10-5);text-transform:uppercase;letter-spacing:.04em;color:var(--txt-apagado);
  padding:.5rem .5rem .125rem}
.cg-lc{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.4375rem .5rem;
  border-radius:var(--radius-md);font-size:var(--t-13);width:100%;color:inherit;text-decoration:none}
.cg-lc:hover{background:var(--sup-rebaixada)}
.cg-lc.on{background:var(--sup-selecionada);color:var(--txt-marca)}
.cg-lc.off{opacity:.6}
.cg-lc b{font-weight:var(--font-weight-semibold)}
.cg-lc-d{display:flex;gap:.375rem;align-items:center;color:var(--txt-apagado)}
.cg-lc-d svg{width:.875rem;height:.875rem}
.cg-nl{color:var(--ok);font-variant-numeric:tabular-nums;font-size:var(--t-12)}
.cg-dir{padding:1rem}
.cg-cg{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cg-cg-n{font-size:var(--t-18);font-weight:var(--font-weight-semibold)}
.cg-trocar{display:none}
.cg-res{font-size:var(--t-12-5);color:var(--txt-fraco);margin:.25rem 0 .375rem}
.cg-res b{color:var(--txt-forte);font-variant-numeric:tabular-nums}
.cg-bar{height:.375rem;border-radius:9999px;background:var(--sup-rebaixada);display:flex;overflow:hidden;margin-bottom:.75rem}
.cg-bar i{display:block}
.cg-bar .l{background:var(--ok-icone)}
.cg-bar .a{background:var(--av-icone)}
.cg-md{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;margin-top:.5rem;overflow:hidden}
.cg-md-c{display:flex;gap:.5rem;align-items:center;padding:.5rem .75rem;font-size:var(--t-13);
  background:var(--sup-rebaixada);cursor:pointer;border:0;width:100%;text-align:left;color:inherit;font:inherit}
.cg-md-c svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.cg-md-c b{font-weight:var(--font-weight-semibold)}
.cg-md-n{color:var(--txt-fraco);font-size:var(--t-11-5);font-variant-numeric:tabular-nums}
.cg-ln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;
  padding:.4375rem .75rem;border-top:1px solid var(--linha-fina)}
.cg-ln b{font-weight:var(--font-weight-medium);font-size:var(--t-13);display:block}
.cg-ln.mud{background:var(--info-fundo)}
.cg-ctl{display:flex;justify-content:flex-end}
.cg-est{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;border:0;background:transparent;
  padding:.125rem .25rem .125rem 0;border-radius:9999px;color:inherit}
.cg-est svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.cg-est.dis{cursor:default;opacity:.7}
.cg-est.mud{outline:2px solid var(--acao);outline-offset:1px}
.cg-mod[data-fechado]>.cg-ln{display:none}
.cg-md[data-fechado] .cg-ln{display:none}
/* por permissão */
.cg-pp{padding:1rem}
.cg-ln-b{grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:start}
.cg-tags{display:flex;gap:.25rem;flex-wrap:wrap;align-items:center}
.cg-tag{display:inline-flex;gap:.125rem;align-items:center;border-radius:9999px;height:1.5rem;padding:0 .25rem 0 .5rem;
  font-size:var(--t-11);outline:1px solid var(--linha-fina);outline-offset:-1px;white-space:nowrap;
  border:0;color:inherit;background:var(--sup-cartao)}
.cg-tag-b{display:inline-flex;gap:.25rem;align-items:center;border:0;background:transparent;color:inherit;
  font:inherit;cursor:pointer;padding:0;height:100%;border-radius:9999px}
.cg-tag svg{width:.75rem;height:.75rem}
.cg-tag.liberada{background:var(--ok-fundo);outline-color:var(--ok-linha);color:var(--ok)}
.cg-tag.aprovacao{background:var(--av-fundo);outline-color:var(--av-linha);color:var(--av)}
.cg-tag.sem_permissao{background:var(--er-fundo);outline-color:var(--er-linha);color:var(--er)}
.cg-tag.dis{opacity:.7}
.cg-tag.dis .cg-tag-b{cursor:default}
.cg-tag.mud{outline:2px solid var(--acao);outline-offset:1px}
.cg-tag-x{display:inline-flex;border:0;background:transparent;color:inherit;cursor:pointer;padding:.125rem;
  border-radius:9999px;opacity:.7}
.cg-tag-x:hover{opacity:1}
.cg-tag.add{background:var(--sup-cartao);color:var(--txt-fraco);outline-style:dashed;outline-color:var(--linha-campo);
  padding:0 .5rem;cursor:pointer}
.cg-tag-leg{padding:0 .5rem}
.cg-lc[hidden],.cg-gr[hidden]{display:none}
/* popovers, gaveta, diálogo, barra */
.cg-pop-lugar{display:contents}
.cg-pop{position:fixed;z-index:40;background:var(--sup-cartao);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px;padding:.5rem;
  display:flex;flex-direction:column;gap:.125rem;width:17rem;max-width:calc(100vw - 1rem);
  max-height:calc(100dvh - 1rem);overflow:auto}
.cg-pop-add,.cg-pop-cols{width:20rem}
.cg-pop-t{font-size:var(--t-12);font-weight:var(--font-weight-semibold);padding:.125rem .375rem .375rem}
.cg-pop-r{font-size:var(--t-11);color:var(--txt-fraco);padding:.375rem .375rem .125rem;
  border-top:1px solid var(--linha-fina);margin-top:.25rem}
.cg-pop-r svg{width:.75rem;height:.75rem;vertical-align:-.125rem}
.cg-op{display:flex;gap:.5rem;align-items:center;padding:.375rem .5rem;border-radius:var(--radius-md);flex-wrap:wrap;
  cursor:pointer;border:0;background:transparent;color:inherit;width:100%;text-align:left}
.cg-op:hover{background:var(--sup-rebaixada)}
.cg-op.on{background:var(--sup-selecionada)}
.cg-op.dis{opacity:.7;cursor:not-allowed}
.cg-op .cg-mt{flex-basis:100%;margin-left:1.5rem;color:var(--txt-fraco);font-size:var(--t-11);display:flex;gap:.25rem;align-items:center}
.cg-op .cg-mt svg{width:.75rem;height:.75rem;flex-shrink:0}
.cg-ok svg{width:1rem;height:1rem;color:var(--ok)}
.cg-sp{width:1rem;display:inline-block}
.cg-como{border:0;margin:0;padding:0 .375rem .25rem;display:flex;gap:.375rem;flex-wrap:wrap;align-items:center}
.cg-chip-r{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;outline:1px solid var(--linha-fina);
  outline-offset:-1px;padding:0 .625rem;height:1.625rem;font-size:var(--t-12);cursor:pointer}
.cg-chip-r:has(input:checked){background:var(--sup-selecionada);outline-color:var(--info-linha);color:var(--txt-marca)}
.cg-chip-r input{width:auto;height:auto;margin:0}
.cg-cp{display:flex;flex-direction:column;gap:.125rem;max-height:15rem;overflow:auto}
.cg-cb{display:flex;gap:.5rem;align-items:center;padding:.3125rem .5rem;border-radius:var(--radius-md);
  font-size:var(--t-12-5);cursor:pointer;width:100%}
.cg-cb:hover{background:var(--sup-rebaixada)}
.cg-cb b{flex:1;font-weight:var(--font-weight-medium)}
.cg-cb input{width:auto;height:auto;margin:0}
.cg-vistas{display:flex;gap:.25rem;flex-wrap:wrap;padding:.25rem .375rem}
.cg-fim{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.cg-gaveta-lugar{min-width:0}
.cg-gav{position:sticky;top:.5rem;max-height:calc(100dvh - 7rem);background:var(--sup-cartao);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  padding:1rem 1.125rem;display:flex;flex-direction:column;gap:.625rem;overflow:auto}
.cg-gav h3{margin:0;font-size:var(--t-18)}
.cg-gav-c{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.cg-gav .cg-cg{margin-top:.375rem}
.cg-gav .btn{justify-content:flex-start}
.cg-xb{border:0;background:transparent;cursor:pointer;color:var(--txt-fraco);display:inline-flex;padding:.25rem;
  border-radius:var(--radius-md)}
.cg-xb:hover{background:var(--sup-rebaixada)}
.cg-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.cg-num{background:var(--sup-rebaixada);border-radius:var(--radius-md);padding:.5rem .625rem}
.cg-num b{display:block;font-size:var(--t-18);font-variant-numeric:tabular-nums}
.cg-num b.l{color:var(--ok)}
.cg-num b.a{color:var(--av)}
.cg-num span{font-size:var(--t-11);color:var(--txt-fraco)}
.cg-sec{font-size:var(--t-11);text-transform:uppercase;letter-spacing:.04em;color:var(--txt-apagado);margin-top:.375rem}
.cg-txt{font-size:var(--t-12)}
.cg-pess{display:flex;flex-direction:column;gap:.25rem;font-size:var(--t-12-5)}
.cg-pess>div{display:flex;gap:.5rem;align-items:center}
.cg-av{width:1.5rem;height:1.5rem;border-radius:9999px;background:var(--sup-selecionada);color:var(--txt-marca);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-10-5);
  font-weight:var(--font-weight-semibold);text-transform:uppercase}
.cg-dlg{width:34rem;max-width:calc(100vw - 1rem)}
.cg-dlg:not([open]){display:none}
.cg-copiar{display:flex;flex-direction:column;gap:.5rem}
.cg-lbl{font-size:var(--t-12);color:var(--txt-fraco);margin-top:.375rem}
.cg-rad{display:flex;gap:.625rem;align-items:flex-start;padding:.5rem .625rem;border-radius:var(--radius-md);
  outline:1px solid var(--linha-fina);outline-offset:-1px;font-size:var(--t-12-5);cursor:pointer}
.cg-rad.on{background:var(--sup-selecionada);outline-color:var(--info-linha)}
.cg-rad input{margin-top:.1875rem;width:auto;height:auto}
.cg-prev{background:var(--sup-rebaixada);border-radius:var(--radius-md);padding:.625rem .75rem;
  font-size:var(--t-12-5);max-height:12rem;overflow:auto}
.cg-pv{display:flex;gap:.5rem;align-items:center;margin-top:.375rem}
.cg-pv>span:first-child{flex:1}
.cg-pv svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
/* a barra de mudanças: presa embaixo, só existe com rascunho */
.cg-barra-lugar{position:sticky;bottom:1rem;z-index:20;margin-top:1rem}
.cg-barra-lugar:empty{display:none}
.cg-pbar{position:relative;display:flex;gap:.75rem;align-items:center;background:var(--sup-cartao);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);outline:2px solid var(--acao);outline-offset:-2px;
  padding:.625rem .875rem;font-size:var(--t-13)}
.cg-pbar.sol{outline-color:var(--av-icone)}
.cg-pbar-l{flex:1;min-width:0}
.cg-pbar-i{display:flex;gap:.5rem;align-items:center;cursor:pointer;list-style:none}
.cg-pbar-i::-webkit-details-marker{display:none}
.cg-pbar-i.sol{color:var(--av)}
.cg-pbar-i svg{width:1rem;height:1rem}
.cg-pbar-n{font-weight:var(--font-weight-semibold)}
.cg-pbar-ver{display:inline-flex;color:var(--txt-fraco)}
.cg-pbar-l[open] .cg-pbar-ver{transform:rotate(180deg)}
.cg-pbar-lista{position:absolute;left:0;right:0;bottom:calc(100% + .5rem);background:var(--sup-cartao);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  padding:.5rem .75rem;max-height:11rem;overflow:auto;font-size:var(--t-12)}
.cg-pbar-lista>div{display:flex;gap:.5rem;align-items:center;padding:.1875rem 0;flex-wrap:wrap}
.cg-pbar-lista svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.cg-pbar-ac{display:flex;gap:.5rem;flex-shrink:0}
.cg-prog{display:none;flex-direction:column;gap:.375rem;flex:1;min-width:0}
.cg-prog-t{font-size:var(--t-12-5);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}
.cg-prog-b{height:.5rem;border-radius:9999px;background:var(--sup-rebaixada);overflow:hidden;
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.cg-prog-b i{display:block;height:100%;width:0;background:var(--acao);transition:width .15s}
.cg-pbar.sol .cg-prog-b i{background:var(--av-icone)}
.cg-pbar[data-ativo]>.cg-prog,.cg-copiar[data-ativo] .cg-prog{display:flex}
.cg-pbar[data-ativo]>.cg-pbar-l,.cg-pbar[data-ativo]>.cg-pbar-ac{display:none}
.cg-calc{display:none;font-size:var(--t-12);color:var(--txt-fraco)}
.cg-copiar.htmx-request .cg-calc{display:block}
details.cg-regras>summary{cursor:pointer;font-size:var(--t-12-5);font-weight:var(--font-weight-medium);
  color:var(--txt-fraco);padding:.375rem 0}
details.cg-regras[open]>summary{margin-bottom:.5rem}
@media (max-width:1023.98px){
  .cg-pagina:has(.cg-gav){grid-template-columns:minmax(0,1fr)}
  .cg-gav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;max-height:75dvh;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0}
}
@media (max-width:639.98px){
  .cg-cab{flex-wrap:wrap;gap:.5rem;align-items:center}
  .cg-cab .cab-lista-texto{flex:1 1 0;flex-basis:0}
  .cg-cab .pagina-desc{display:none}
  .cg-cab-d{display:contents}
  .cg-cab-ac{order:3;flex-basis:100%;justify-content:flex-start}
  .cg-xc{display:none}
  .cg-celular-dica{display:block}
  /* o popover vira folha de baixo: a célula fica logo acima, e o conteúdo rola dentro dela */
  .cg-pop{left:.5rem!important;right:.5rem;top:auto!important;bottom:.5rem;width:auto;max-height:75dvh}
  .cg-pop-add,.cg-pop-cols{width:auto}
  .cg-c0{min-width:8rem;max-width:8rem;padding:.3125rem .5rem!important}
  .cg-hc{min-width:5.5rem}
  .cg-mxt thead .cg-c0 .cg-dica{display:none}
  .cg-mxt thead tr.cg-resl th.cg-c0{white-space:normal;line-height:1.2}
  .cg-ferr-linha .cg-dica{display:none}
  .cg-pc{grid-template-columns:minmax(0,1fr)}
  .cg-lcs{display:none}
  .cg-trocar{display:flex;flex-direction:column;gap:.25rem;font-size:var(--t-12);color:var(--txt-fraco);margin-top:.5rem}
  .cg-busca{width:100%}
  .cg-ln-b{grid-template-columns:minmax(0,1fr)}
  .cg-barra-lugar{position:sticky;bottom:0;margin-top:.5rem}
  .cg-pbar{flex-wrap:wrap}
  .cg-pbar-d{display:none}
  .cg-pbar-ac{width:100%;justify-content:flex-end}
}

/* ---------- 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:var(--t-13-5);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 .125rem;border-radius:9999px;background:var(--er-icone);
  color:var(--txt-sobre-acao);font-size:var(--t-9);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:var(--t-10-5);color:var(--txt-apagado);letter-spacing:.08em}
.pag-estado .tit{font-size:var(--t-17);font-weight:var(--font-weight-semibold)}
.pag-estado .txt{font-size:var(--t-13);color:var(--txt-forte);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:var(--t-13-5);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:var(--t-12-5)}
.senha .quem .sub{font-size:var(--t-10-5);color:var(--txt-fraco);margin-top:.0625rem}
.senha{position:relative}
.senha .esp{font-size:var(--t-10-5);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:var(--t-9);text-transform:uppercase;letter-spacing:.05em;
  color:var(--txt-apagado);white-space:nowrap}
.med .par .val{font-size:var(--t-15);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:var(--t-10);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:var(--t-11);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:var(--t-24);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.chamada .cron{font-size:var(--t-24);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;line-height:1.1}
.chamada .quem{font-size:var(--t-13);color:var(--txt-forte);
  font-weight:var(--font-weight-medium)}
.chamada .sub{font-size:var(--t-11);color:var(--txt-fraco);margin-top:.0625rem}
/* a tarja da gravação, no rodapé da gaveta (prancheta Audio; plano §12.2).
   Os dois lados do balcão veem a mesma tarja — gravação visível só para quem
   atende é gravação escondida —, então ela é discreta mas nunca some: mesmo
   «desligada» ocupa a linha, para que a ausência de gravação seja tão visível
   quanto a presença dela. */
.tarja-grav{margin-top:.625rem}
.tarja-grav .tg{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;
  border-radius:var(--radius-lg);background:var(--sup-rebaixada)}
.tarja-grav .tg[hidden]{display:none}
.tarja-grav .tg .ic{display:flex;flex-shrink:0;color:var(--txt-fraco)}
.tarja-grav .tg .t{flex:1;min-width:0}
/* o nome do estado é a palavra que a pessoa lê de relance, e ele precisa de
   cor própria: sem `--txt-forte` ele herda o cinza da caixa em que a tarja
   cai e some dentro do próprio fundo — visto no retrato, não no código */
.tarja-grav .tg .n{font-size:var(--t-12-5);font-weight:var(--font-weight-medium);
  color:var(--txt-forte)}
.tarja-grav .tg .d{font-size:var(--t-10-5);color:var(--txt-fraco);margin-top:.0625rem;
  font-variant-numeric:tabular-nums}
.tarja-grav .tg .mot{height:1.625rem;margin-top:.3125rem;font-size:var(--t-11);
  padding:0 .375rem;width:100%}
.tarja-grav .tg>.btn{flex-shrink:0;height:1.75rem;font-size:var(--t-11)}
/* gravando: o vermelho é do ponto que pulsa, e o ícone acompanha — é o único
   estado em que alguma coisa está sendo captada, e ele não se confunde com os
   outros três de relance.
   O estado se pinta pelo ATRIBUTO, e não por uma classe `.gravando`: essa
   classe já existe, e é do painel de gravar áudio do chat (`.gravando .t`
   fixa o tamanho da letra). Duas coisas com o mesmo nome de classe é o que
   faz um conserto num canto quebrar o outro — foi visto no retrato. */
.tarja-grav [data-gravacao-bloco="gravando"]{background:var(--er-fundo)}
.tarja-grav [data-gravacao-bloco="gravando"] .ic{color:var(--er)}
.tarja-grav .pulso.er{background:var(--er)}
.tarja-grav [data-gravacao-bloco="pausada"]{background:var(--av-fundo)}
/* 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:var(--t-12);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:var(--t-10);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:var(--radius-3xl);padding:.75rem;
  background:var(--color-zinc-900);box-shadow:var(--shadow-lg)}
.tablet>.tela{border-radius:var(--radius-xl);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:var(--t-11);
  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:var(--t-28);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:var(--t-128);font-weight:var(--font-weight-bold);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* o posto é a segunda informação da tela, e não a menor: branco como a
   senha e grande o bastante para se ler junto com ela. Azul claro dava a
   entender que era detalhe. */
.tv .tv-posto{font-size:var(--t-72);font-weight:var(--font-weight-semibold);line-height:1.1;
  color:#fff;white-space:nowrap}
.tv .tv-rot{font-size:var(--t-22);color:var(--tv-fraco);text-transform:uppercase;
  letter-spacing:.12em}
.tv .tv-lado{width:21rem;flex-shrink:0;border-left:1px solid var(--tv-linha);
  padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.875rem}
/* duas colunas: a senha numa, o posto na outra, alinhados linha a linha —
   «AP-001» é um caractere mais largo que «A-001», e sem a grade a coluna dos
   guichês fica serrilhada. `display:contents` põe os dois filhos direto na
   grade de cima. */
.tv .tv-antes{display:grid;grid-template-columns:max-content 1fr;
  gap:.875rem .75rem;align-items:baseline;font-variant-numeric:tabular-nums}
.tv .tv-ant{display:contents}
.tv .tv-ant.vazia .posto{grid-column:1/-1}
.tv .tv-ant .sen{font-size:var(--t-30);font-weight:var(--font-weight-semibold)}
.tv .tv-ant .posto{font-size:var(--t-20);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:var(--t-17);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 */
/* a chamada nova acende em âmbar — a única cor fora da marca que entra na TV,
   e entra porque é a que se enxerga de longe, de canto de olho, por quem não
   estava olhando. A senha PULSA entre o branco e o âmbar: pulsar é trocar de
   cor, nunca sumir, porque texto que apaga não se lê justamente quando é
   preciso lê-lo. Dura o anúncio e para — piscar sempre vira ruído. */
.tv{--tv-chama:#ffd23f}
/* o FUNDO não muda: quem pulsa é o texto que se lê de longe — a senha e o
   posto, juntos e no mesmo compasso, porque são as duas informações da tela e
   quem olha precisa pegar as duas de uma vez. Cada uma volta à sua própria
   cor, não a uma cor comum: o posto é do azul claro da marca, a senha é
   branca. */
.tv .tv-chamada.nova .tv-rot{color:var(--tv-chama);opacity:.85}
.tv .tv-chamada.nova .tv-senha,
.tv .tv-chamada.nova .tv-posto{animation:tv-chamando 1s steps(1,end) infinite}
@keyframes tv-chamando{0%,49%{color:var(--tv-chama)}50%,100%{color:#fff}}
@media (prefers-reduced-motion:reduce){
  .tv .tv-chamada.nova .tv-senha,
  .tv .tv-chamada.nova .tv-posto{animation:none;color:var(--tv-chama)}
}
/* 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:var(--t-20);font-weight:var(--font-weight-semibold);flex:1;
  text-align:left}
.tot-bt .esp-bt{font-size:var(--t-15);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-bobina);
  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:var(--t-8);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:var(--t-7);
  color:var(--color-zinc-500)}
.folha .t-f{font-size:var(--t-12);font-weight:var(--font-weight-semibold);line-height:1.25}
.folha .sub-f{font-size:var(--t-8);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:var(--t-12);font-weight:var(--font-weight-medium);line-height:1.35}
.notif .d{font-size:var(--t-11);color:var(--txt-fraco);line-height:1.45;margin-top:.0625rem}
.notif .q{font-size:var(--t-10);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 linha do sino é um BOTÃO de verdade (teclado e leitor de tela): a mesma
   cara da linha da prancheta, sem a cara de botão do navegador */
.gaveta button.notif,.avisos-pagina-lista button.notif{border:0;background:none;font:inherit;color:inherit;
  text-align:left;width:100%}
.gaveta button.notif:hover,.avisos-pagina-lista button.notif:hover{background:var(--sup-hover)}
/* O PAINEL DOS AVISOS (prancheta Avisos): o mesmo flutuante do shell, mas
   suspenso sob o sino em vez de gaveta lateral — abre no sino, fecha ao
   clicar fora. A âncora (--sino-direita, --sino-topo) é do avisos.js. */
#gaveta[data-de="avisos"]{position:fixed;top:var(--sino-topo,3.25rem);right:var(--sino-direita,1rem);
  bottom:auto;left:auto;z-index:60;width:min(27rem,calc(100vw - 1rem));
  max-height:min(34rem,calc(100vh - 4.5rem));border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  overflow:hidden}
#gaveta[data-de="avisos"]~#gaveta-veu{display:none}
#gaveta[data-de="avisos"]>.cab{box-shadow:none;height:2.75rem}
#gaveta[data-de="avisos"] button.aba,.avisos-pagina-lista button.aba{border:0;background:none;font:inherit;
  font-size:var(--d-text-ui);color:var(--txt-fraco);padding:0 0 .5rem;cursor:pointer}
/* o «Ver o pedido» do item: cara de link (token de ação + seta); o item inteiro é o botão */
.notif .av-go{display:inline-flex;gap:.1875rem;align-items:center;margin-top:.1875rem;
  color:var(--acao-texto);font-weight:var(--font-weight-medium)}
.notif .av-go svg{width:.75rem;height:.75rem}
.notif:hover .av-go{text-decoration:underline}
/* quatro abas cabem em 24 rem: sem quebra de linha, e rolam se faltar largura */
#gaveta[data-de="avisos"] .abas,.avisos-pagina-lista .abas{gap:.625rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#gaveta[data-de="avisos"] .abas::-webkit-scrollbar,.avisos-pagina-lista .abas::-webkit-scrollbar{display:none}
/* o NÚMERO da aba nunca é cortado (a 390 a «Aprovações» perdia o dígito): a aba
   encolhe só pelo rótulo, que ganha reticências, e o número fica inteiro */
#gaveta[data-de="avisos"] button.aba,.avisos-pagina-lista button.aba{display:inline-flex;align-items:center;
  white-space:nowrap;min-width:0;flex:0 1 auto}
#gaveta[data-de="avisos"] button.aba .rot,.avisos-pagina-lista button.aba .rot{min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#gaveta[data-de="avisos"] button.aba .ct,.avisos-pagina-lista button.aba .ct{flex-shrink:0}
#avisos-lista>.abas{padding:.5rem .875rem 0;margin:0;flex-shrink:0}
/* a 390 as quatro abas com número de dois dígitos cabem inteiras (medido: 351 px
   de abas + 3 vãos em 374 px de faixa); mais estreito que isso, o rótulo cede */
@media (max-width:639.98px){
  #avisos-lista>.abas{padding-inline:.5rem}
  #gaveta[data-de="avisos"] .abas,.avisos-pagina-lista .abas{gap:.375rem}
  #gaveta[data-de="avisos"] button.aba .ct,.avisos-pagina-lista button.aba .ct{margin-left:.25rem;padding:.0625rem .25rem}
}
/* o número da aba «Aprovações»: o âmbar do «sob aprovação» (molde/_selo_aprov.html) */
#gaveta[data-de="avisos"] .aba .ct.aprov,.avisos-pagina-lista .aba .ct.aprov{background:var(--av-fundo);
  color:var(--av);outline:1px solid var(--av-linha);outline-offset:-1px}
#gaveta[data-de="avisos"] button.aba.on,.avisos-pagina-lista button.aba.on{color:var(--txt-forte)}
/* o aviso urgente que salta na tela: canto superior direito, sob o sino (a
   mesma âncora do painel), por cima de tudo (dono, 03/10/2026) */
.avisos-saltam{position:fixed;right:1rem;top:var(--sino-topo,3.5rem);z-index:70;display:flex;
  flex-direction:column;gap:.5rem;align-items:flex-end}
.avisos-saltam:empty{display:none}
.avisos-saltam .toast{cursor:pointer}
/* o fundo suave do estado é translúcido no escuro: o aviso que salta fica POR
   CIMA do conteúdo, então o tom vai sobre o cartão opaco (senão o texto de
   baixo atravessa o toast) */
.avisos-saltam .toast.erro{background:linear-gradient(var(--er-fundo),var(--er-fundo)),var(--sup-cartao)}
.avisos-saltam .toast[hidden]{display:none}
/* a página /avisos/: o filtro «Mostrar encerrados» e o histórico (dono,
   03/10/2026) — o encerrado é fundo rebaixado + pílula, sem cor de alerta, e
   não se clica: já não há o que resolver */
.avisos-filtros{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.avisos-rodape{margin-top:1rem}
.avisos-rodape a{color:var(--acao-texto);font-weight:var(--font-weight-medium)}
.avisos-encerrados{margin-top:1rem}
.avisos-encerrados>h2{font-size:var(--t-13);margin:0 0 .5rem}
.avisos-encerrados>.card{padding:.375rem}
.notif.encerrada{background:var(--sup-rebaixada);cursor:default}
.notif.encerrada:hover{background:var(--sup-rebaixada)}
.notif.encerrada .t .badge{margin-left:.25rem}
.avisos-encerrados .mais{display:flex;gap:.5rem;padding:.5rem .25rem}
.avisos-encerrados .mais .btn{flex:1;height:1.75rem;font-size:var(--t-11)}

/* 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:var(--t-16);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:var(--t-9);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:var(--t-13);flex:1;min-width:0}
.paleta .res .s{font-size:var(--t-11);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:var(--t-10-5);color:var(--txt-apagado)}
.paleta>.pe .kbd{font-size:var(--t-9)}
/* ---------- 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:var(--t-13);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--txt-marca)}
.barra-lote .tudo{font-size:var(--t-11-5);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:var(--t-12);
  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:var(--t-13);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:var(--t-11)}
.msg>.de .assunto{color:var(--txt-forte);font-weight:var(--font-weight-semibold);
  font-size:var(--t-12)}
.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:var(--t-11);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:var(--txt-sobre-acao);font-size:var(--t-13);
  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:var(--t-12);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:var(--t-12)}
.msg .grade-m .val-m{flex:1;min-width:0;font-size:var(--t-12);text-align:right;
  font-weight:var(--font-weight-medium)}
.msg .grade-m .val-m.forte{font-size:var(--t-15);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.

   ≥1024  · a gaveta DIVIDE a largura com o trabalho; barra lateral à vista
   <1024  · a gaveta COBRE, com véu; os módulos vão para o ⋮ da barra
   <640   · uma coisa por vez: formulário em uma coluna, tabela vira lista */
@media (max-width:1023.98px){ .so-desktop{display:none} }

@media (max-width:1023.98px){
  /* 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)}
}

/* a tabela rola dentro do cartão quando o miolo aperta — e o miolo aperta sem
   a janela mudar de tamanho, porque a gaveta da fila divide a largura. Amarrar
   isto a uma media query deixava as colunas espremidas até o ilegível com a
   gaveta aberta. */
.rola-x{overflow-x:auto}
.rola-x>table{min-width:52rem}

@media (max-width:639.98px){
  .grid{grid-template-columns:1fr}          /* formulário empilha */
  .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:var(--t-11)}
  .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:var(--t-15);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, grupo, item, trilho): o bloco NAVEGAÇÃO (Fase 4c), no fim da folha */

/* migalhas */
.migalhas{height:1.875rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;
  padding:0 1.5rem;font-size:var(--t-11);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:var(--t-13);color:var(--txt-fraco);max-width:56rem;
  line-height:1.55}
/* o cabeçalho das listas (molde/listar.html): título e descrição à esquerda, os botões de
   ação à direita. No celular não há largura para os dois lado a lado — o texto ficava numa
   coluna de ~80 px quebrando palavra por palavra —, então os botões descem para baixo da
   descrição e o texto ocupa a linha inteira (varredura visual de 28/09, item 1). */
.cab-lista{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.125rem}
.cab-lista-texto{flex:1;min-width:0}
.cab-lista-texto .pagina-desc{margin-bottom:0}
/* mais de uma ação no cabeçalho da lista (Cargos e permissões, dono 30/09) */
.cab-lista-acoes{display:flex;gap:.5rem;flex-wrap:wrap;flex-shrink:0}
/* a lista de Cargos: a tabela em largura total e, embaixo, só o cartão de
   orientação (dono, 30/09, revisão das telas: sem cartões laterais) */
.cargos-lista{display:flex;flex-direction:column;gap:1rem}
@media (max-width:639.98px){
  .cab-lista{flex-wrap:wrap;row-gap:.625rem}
  .cab-lista-texto{flex-basis:100%}
}
.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:var(--t-10);
  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:var(--t-16);font-weight:var(--font-weight-semibold);margin:0 0 .25rem;
  letter-spacing:0;line-height:1.3}
.login .sub{font-size:var(--t-12-5);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:var(--t-11)}
.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:var(--t-10-5);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-texto)}
.login .selo.ok{background:var(--ok-fundo);color:var(--ok)}
.login .miudo{font-size:var(--t-10-5);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:var(--t-11);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:var(--t-11);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(--link);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:var(--t-12)}
/* entrando com certificado a confiança não vale (decisão da Spidea, 14/09/2026):
   a caixinha fica inativa, e a bolha diz por quê ao passar o mouse */
.login .marc.confiar>.tip{gap:.5rem;align-items:center}
.login .marc.confiar.dis label{font-size:var(--t-12);color:var(--txt-apagado);cursor:not-allowed}
/* «Conferindo o código…»: o card troca o conteúdo por isto no mesmo evento do
   sexto dígito, antes de o pedido sair (porta.js) */
.login .conferindo{display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:2.25rem 0 1.75rem;font-size:var(--t-13);color:var(--txt-fraco)}
.login .conferindo .roda{width:1.75rem;height:1.75rem;border-radius:9999px;
  border:2px solid var(--linha-fina);border-top-color:var(--acao);
  animation:conferindo-roda .8s linear infinite}
@keyframes conferindo-roda{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.login .conferindo .roda{animation-duration:2.4s}}
/* a marca na tela trancada: a caixa larga não tem respiro próprio */
.login.larga>.porta-marca{display:block;margin:1.25rem 1.25rem 0}
.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:var(--t-12);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:var(--t-11-5);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 */
/* as abas da porta: os dois caminhos do certificado, um endereço cada */
.login .abas{margin-bottom:1.125rem}
.login .abas>.aba{text-decoration:none;color:var(--txt-fraco)}
.login .abas>.aba:hover{color:var(--txt-forte);opacity:1}
.login .abas>.aba.on{color:var(--txt-forte)}
.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:var(--t-11);
  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:var(--t-18);
  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}
/* o rádio como campo de verdade — o mesmo desenho do `.rd` (Fundir dois
   cadastros: fica ou sai, uma escolha por linha) */
input[type=radio].rd{appearance:none;-webkit-appearance:none;width:.9375rem;height:.9375rem;
  padding:0;margin:0;border-radius:9999px;background:var(--sup-cartao);
  outline:1px solid var(--linha);outline-offset:-1px;cursor:pointer;flex-shrink:0}
input[type=radio].rd:checked{border:4.5px solid var(--acao);outline:0}
input[type=radio].rd:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
/* 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 var(--txt-sobre-acao);border-bottom:1.5px solid var(--txt-sobre-acao);
  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:var(--t-12)}
/* 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:var(--t-15);font-weight:var(--font-weight-semibold)}
.trancada-cab .c{font-size:var(--t-11-5);color:var(--txt-fraco)}
.login table.dados{margin-bottom:.875rem}
.login table.dados td{font-size:var(--t-12);padding:.1875rem 0;border:0;height:auto}
.login table.dados td.rot{width:8rem;color:var(--txt-fraco);font-size:var(--t-11-5)}
/* 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:var(--t-12-5)}
.sessao-linha .s{font-size:var(--t-10-5);color:var(--txt-fraco);margin-top:.0625rem}
td.sessao-quando{font-size:var(--t-11-5);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:var(--t-15)}
.perfil-quem>.quem{flex:1;min-width:0}
.perfil-quem .n{font-size:var(--t-16);font-weight:var(--font-weight-semibold)}
.perfil-quem .c{font-size:var(--t-12);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:var(--t-11-5);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:var(--t-10);color:var(--txt-apagado)}
.svc-corpo .texto,.dialogo .texto{font-size:var(--t-12-5);line-height:1.55;color:var(--txt-forte)}
.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:var(--t-12-5);font-weight:var(--font-weight-medium)}
.opts>.opt-card .s{font-size:var(--t-10-5);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:var(--papel-branco);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:var(--t-10);font-weight:var(--font-weight-semibold);
  background:var(--acao-suave);color:var(--txt-marca)}
.autenticador .etapa .t{font-size:var(--t-12-5);font-weight:var(--font-weight-medium);
  margin-bottom:.25rem}
.autenticador .etapa .d{font-size:var(--t-11-5);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:var(--t-13);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:var(--t-14);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:var(--t-11);color:var(--link);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:var(--txt-sobre-acao);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:var(--t-13-5);font-weight:var(--font-weight-semibold)}
.canais .r>.badge{margin-left:.375rem}
.canais .d{display:block;font-size:var(--t-11-5);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:var(--t-12-5)}
.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:639.98px){
  .duas,.duas.igual,.tres{grid-template-columns:1fr}
}

/* 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 recolhida e o acordeão: o bloco NAVEGAÇÃO (Fase 4c), no fim da folha */

/* 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:var(--t-11);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)}

/* 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:var(--t-11);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:var(--t-12-5);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:var(--t-11-5)}

/* 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}

/* o guichê no menu do avatar (10/09/2026, desenho aprovado com a Spidea): a
   linha do posto de agora, com o selo do modo e o desconectar embutido —
   e o flyout «Estação de trabalho», que é o MESMO .suspenso/.menu acima,
   só que aberto por FORA do menu principal, à esquerda, porque o gatilho
   dele já está dentro de um menu aberto (nunca embaixo, que empurraria o
   resto do menu para baixo). */
.menu .suspenso{width:100%}
.menu .suspenso>summary{width:100%;padding:.375rem .5625rem;border-radius:var(--radius-md);
  gap:.5rem}
.menu .suspenso>summary:hover{background:var(--sup-hover)}
.menu .suspenso>.menu{top:-.3125rem;right:calc(100% + .5rem);width:13.5rem}
.guiche-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* o nome do balcão (a Estação) QUEBRA em até duas linhas em vez de cortar em «VM Windo…»
   (dono, 28/09): o selo «Manual» fica ao lado, no alto; passando de duas, as reticências */
.guiche-nome [data-balcao]{white-space:normal;overflow-wrap:anywhere;display:-webkit-box!important;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.menu .suspenso>summary:has([data-balcao]){align-items:flex-start}
.menu .suspenso>summary:has([data-balcao])>svg,.menu .suspenso>summary:has([data-balcao])>.guiche-selo,
.menu .suspenso>summary:has([data-balcao])>.seta{margin-top:.0625rem}
.guiche-selo{display:inline-flex;align-items:center;padding:.09375rem .375rem;
  border-radius:var(--radius-2sm);font-size:var(--t-10);font-weight:var(--font-weight-medium);
  white-space:nowrap;flex-shrink:0}
.guiche-selo.automatico{background:var(--ok-fundo);color:var(--ok);
  border:1px solid var(--ok-linha)}
.guiche-selo.manual{background:var(--sup-rebaixada);color:var(--txt-fraco);
  border:1px solid var(--linha)}
.guiche-sair{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:var(--radius-2sm);color:var(--txt-apagado);
  position:relative;z-index:1;border:0;background:none;padding:0;cursor:pointer}
/* o menu do avatar ganha largura para «Guichê 12 · Manual» caber inteiro —
   o selo do Manual é mais largo que o do Auto, e 13rem cortava o nome */
/* 18rem (era 15): o nome do balcão cabe em duas linhas ao lado do selo (dono, 28/09) */
.topo-dir>.suspenso>.menu{width:18rem}
.guiche-sair:hover{background:var(--er-fundo);color:var(--er)}
/* o «Automático» e cada guichê são a mesma linha do resto do menu — sem
   isto, o flyout pareceria outro componente dentro do mesmo cartão */
.menu .opc-guiche{width:100%}
/* o botão de recarregar na MESMA linha do «Automático», à direita (pedido da
   Spidea, 23/09/2026): busca agora a Spidea Station desta máquina. O mesmo
   quadrado de 1,5rem do `.guiche-sair`, sem cor de alarme — é uma pergunta à
   máquina, não um ato sobre o posto. Enquanto o aperto de mão corre, o ícone
   gira (`aria-busy`), mais devagar para quem pediu menos movimento. */
.menu .linha-automatico{display:flex;align-items:center;gap:.125rem}
.suspenso>.menu .linha-automatico>button.mi{flex:1;min-width:0;width:auto}
.estacao-agora{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;margin-right:.25rem;border-radius:var(--radius-2sm);
  color:var(--txt-apagado);border:0;background:none;padding:0;cursor:pointer}
.estacao-agora:hover{background:var(--sup-hover);color:var(--txt-forte)}
.estacao-agora:focus-visible{outline:2px solid var(--acao);outline-offset:1px}
.estacao-agora[aria-busy="true"]{cursor:progress}
.estacao-agora[aria-busy="true"] svg{animation:conferindo-roda .8s linear infinite}
@media (prefers-reduced-motion:reduce){
  .estacao-agora[aria-busy="true"] svg{animation-duration:2.4s}}
/* o espaço em branco de quem não está marcado — mesma largura do ícone
   `check`, para o texto das linhas ficar alinhado com ou sem a marca */
.marca-check{width:1.0625rem;flex-shrink:0;display:inline-block}
/* por que o Automático não trouxe posto — dentro do menu flutuante, na
   letra pequena das notas, sem virar alarme: é informação, não erro */
.menu .motivo-posto{padding:.125rem .5625rem .3125rem 1.5625rem;font-size:var(--t-10);
  line-height:1.35;color:var(--txt-apagado);white-space:normal}
/* posto ocupado por outra pessoa: a mesma linha, sem link e sem cinza — o
   rótulo à direita («Ana Carolina») já diz por que não se escolhe */
.menu .mi.sem-link{cursor:default}
.menu .mi.sem-link:hover{background:none}

/* o aviso de posto divergente, no rodapé da gaveta (10/09/2026): a estação
   tem posto fixo e a pessoa está noutro. Âmbar, o tom de «confira», não o
   vermelho de erro: estar noutro posto pode ser de propósito */
.aviso-posto{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.5rem;
  padding:.5625rem .625rem;border-radius:var(--radius-md);font-size:var(--t-11-5);
  line-height:1.4;background:var(--av-fundo);color:var(--txt-fraco);
  border:1px solid var(--av-linha)}
.aviso-posto>svg{flex-shrink:0;color:var(--av-icone);margin-top:.0625rem}
.aviso-posto>div>b:first-child{display:block;color:var(--txt-forte);
  font-weight:var(--font-weight-semibold);margin-bottom:.125rem}
/* o posto por onde a chamada vai sair, em negrito dentro da frase (pedido
   da Spidea, 10/09/2026): é o nome que a TV vai mostrar */
.aviso-posto .posto-da-chamada{color:var(--txt-forte);
  font-weight:var(--font-weight-semibold)}
.aviso-posto .link{font:inherit;padding:0;background:none;border:0;cursor:pointer;
  color:var(--txt-marca);text-decoration:underline}

/* ---------- ONDA 8 · OS DISPOSITIVOS DO BALCÃO --------------------------- */
/* Totem, painel da sala de espera e tablet não têm shell: ocupam a tela inteira
   do aparelho, sem menu e sem pessoa. As classes abaixo são a moldura deles, o
   cupom de 80 mm que a impressora do navegador recebe e a pesquisa do tablet
   (DEC-015). O que é da TV e do totem em si continua na ONDA 7. */
/* a moldura dos dispositivos: ocupa a tela inteira, coluna, sem rolagem */
.disp{min-height:100vh;display:flex;flex-direction:column;background:var(--sup-pagina);
  touch-action:manipulation;user-select:none;-webkit-user-select:none}
.disp-cab{display:flex;align-items:center;gap:.875rem;padding:1.125rem 1.5rem;
  background:var(--sup-cartao);box-shadow:0 1px 0 var(--linha-cartao)}
.disp-cab img{height:2.125rem;width:auto} .disp-cab .meio{flex:1;min-width:0}
.disp-cab .nome{font-size:var(--t-18);font-weight:var(--font-weight-semibold)}
.disp-cab .atrib{font-size:var(--t-13);color:var(--txt-fraco)}
.disp-cab .hora{font-size:var(--t-22);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;text-align:right}
.disp-cab .data{font-size:var(--t-12);color:var(--txt-fraco);text-align:right}
.disp-meio{flex:1;padding:1.5rem;display:flex;flex-direction:column;min-height:0}
/* o totem */
.tot-titulo{font-size:var(--t-24);font-weight:var(--font-weight-semibold)}
.tot-sub{font-size:var(--t-16);color:var(--txt-fraco);margin-top:.25rem}
.tot-grade{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem;margin-top:1.125rem}
.tot-bt{border:0;font:inherit;color:inherit;text-align:left;min-height:3.5rem;
  padding:1.375rem 1.5rem;-webkit-tap-highlight-color:transparent}
.tot-bt:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.tot-bt .ic{display:flex;color:var(--txt-marca);flex-shrink:0}
.tot-bt.forte .ic{color:inherit}
/* a descrição sob o rótulo do botão do totem. Chama-se `tot-sub`, e não
   `desc`, porque `desc` já é modificador em `.marc.desc` — e a auditoria §2
   da folha reprova, com razão, a classe que é modificador num lugar e filho
   escopado noutro: quem usasse as duas juntas pegaria as duas regras. */
.tot-bt .tot-sub{display:block;font-size:var(--t-15);font-weight:400;
  color:var(--txt-fraco);margin-top:.125rem}
.tot-bt.forte .tot-sub{color:inherit;opacity:.75}
/* os dois não ocupam a largura toda: coluna centrada, com ar dos lados —
   encostado nas bordas o botão deixa de parecer botão e vira faixa. A altura
   dos dois continua igual (1fr 1fr), que é o que a prancheta manda. */
.tot-filas{display:grid;grid-template-rows:1fr 1fr;gap:.875rem;flex:1;
  margin:1.125rem auto 0;width:100%;max-width:44rem;max-height:25rem}
/* a saída é pequena de propósito: não disputa com a escolha */
.tot-voltar{display:inline-flex;align-items:center;gap:.4375rem;margin:1rem auto 0;
  padding:.625rem 1.25rem;border:0;border-radius:var(--radius-lg);font:inherit;
  font-size:var(--t-16);background:var(--sup-rebaixada);color:var(--txt-fraco);cursor:pointer}
.tot-voltar:hover{background:var(--sup-hover);color:var(--txt-forte)}
.tot-voltar:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.tot-voltar .ic{display:flex}
.tot-filas .tot-bt{padding:1.25rem 1.5rem;gap:1.25rem;align-items:center}
.tot-filas .rot-bt{font-size:var(--t-28);line-height:1.15}
.tot-filas .esp-bt{font-size:var(--t-16)}
.tot-prior{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .875rem;margin-top:.625rem}
.tot-prior>span{display:flex;align-items:center;gap:.5rem;font-size:var(--t-14);
  line-height:1.25;font-weight:400}
.tot-prior .ic{display:flex;color:var(--txt-marca);flex-shrink:0}
.tot-nota{font-size:var(--t-15);color:var(--txt-apagado);text-align:center;margin-top:1rem}
.tot-centro .tot-nota{margin-top:.25rem}
.tot-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.5rem}
.tot-centro .titulo{font-size:var(--t-20);font-weight:var(--font-weight-semibold);margin-top:.375rem}
.tot-centro .impressora{width:19rem;margin-top:.375rem;--vao-papel:12.5rem}
.tot-centro .papel{width:17rem;padding:.875rem 1rem 3rem}
.cupom .serv{font-size:var(--t-12);letter-spacing:.08em;color:var(--txt-fraco);text-transform:uppercase}
.cupom .cod{font-size:var(--t-48);font-weight:var(--font-weight-bold);
  font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.02em}
.cupom .det{font-size:var(--t-14);color:var(--txt-fraco);line-height:1.5}
.tot-previsao{margin-top:.75rem;padding:.75rem 1.25rem;border-radius:var(--radius-lg);
  background:var(--sup-rebaixada);font-size:var(--t-16);line-height:1.5}
.tot-aviso{margin-top:.75rem;padding:.75rem 1.25rem;border-radius:var(--radius-lg);
  background:var(--av-fundo);color:var(--av);font-size:var(--t-15);line-height:1.5;max-width:26rem}
.tot-fechado .titulo{font-size:var(--t-32);font-weight:var(--font-weight-semibold);margin-top:1.125rem}
.tot-fechado .texto{font-size:var(--t-18);color:var(--txt-forte);margin-top:.5rem;max-width:34rem;
  line-height:1.6}
.tot-fechado .quando{display:flex;gap:2.5rem;margin-top:1.75rem;padding:1.125rem 2rem;
  border-radius:var(--radius-lg);background:var(--sup-rebaixada);text-align:left}
.tot-fechado .quando .rot{font-size:var(--t-12);text-transform:uppercase;letter-spacing:.05em;
  color:var(--txt-apagado)}
.tot-fechado .quando .val{font-size:var(--t-17);font-weight:var(--font-weight-medium);
  margin-top:.1875rem}
.tot-fechado .site{font-size:var(--t-15);color:var(--txt-apagado);margin-top:1.25rem;line-height:1.5}
.tot-fechado .site b{color:var(--txt-fraco)}
.res-cli.g{width:5rem;height:5rem}
/* sem comunicação: âmbar, nunca vermelho — na frente do balcão vermelho soa como acusação */
.tot-semrede{display:flex;align-items:center;gap:.625rem;margin:0 1.5rem;padding:.75rem 1.25rem;
  border-radius:var(--radius-lg);background:var(--av-fundo);color:var(--av);font-size:var(--t-16)}
.tot-semrede .ic{display:flex;flex-shrink:0} .tot-semrede[hidden]{display:none}
/* os ícones da folha saem em 17px; nas telas do cliente eles crescem para o tamanho da prancheta */
.tot-bt>.ic svg{width:30px;height:30px} .tot-prior .ic svg{width:22px;height:22px}
.tot-semrede .ic svg,.tv-pe .ic svg{width:20px;height:20px}
.res-cli svg{width:30px;height:30px} .res-cli.g svg{width:38px;height:38px}
.tv-vazia .ic svg{width:64px;height:64px} .nota svg{width:30px;height:30px}
.tot-filas .tot-bt.pref{align-items:flex-start} .tot-filas .tot-bt.pref>.ic{margin-top:.25rem}
/* a hora marcada no totem (plano da agenda, §7 · etapa 3C) — acrescentado no
   fim da seção do totem, sem tocar no que já estava */
/* «Tenho hora marcada» não é o décimo serviço: fica embaixo, sozinho, depois
   do vão que o `flex:1` abre — a grade cresce, e ele continua no rodapé */
.tot-rodape{margin-top:auto;padding-top:1rem;display:flex}
.tot-hora-marcada{flex:1;padding:1rem;justify-content:center;gap:.625rem}
.tot-hora-marcada .rot-bt{flex:0 1 auto;font-size:var(--t-17);
  font-weight:var(--font-weight-medium)}
.tot-hora-marcada>.ic{color:var(--txt-fraco)}
/* a tela do CPF: o texto de um lado, o teclado do outro — o dedo vai sempre
   ao mesmo canto, e o visor fica na altura dos olhos, não sob a mão */
.tot-hm{flex:1;display:flex;gap:2rem;min-height:0;justify-content:space-between}
/* o lado do texto não cresce sem fim: numa tela larga o visor de onze
   dígitos ficaria do tamanho da parede e o dedo longe do teclado */
.tot-hm-lado{flex:1;max-width:44rem;display:flex;flex-direction:column;
  justify-content:center}
.tot-hm-form{margin-top:1.25rem}
.tot-visor{height:4rem;font-size:var(--t-32);justify-content:center;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;outline:2px solid var(--foco);outline-offset:-2px}
.tot-hm-nota{font-size:var(--t-14);color:var(--txt-apagado);margin-top:.875rem;line-height:1.5}
/* âmbar para o que a pessoa pode resolver, vermelho só para o freio */
.tot-hm-erro{margin-top:1rem;padding:.75rem 1rem;border-radius:var(--radius-lg);
  background:var(--av-fundo);color:var(--av);font-size:var(--t-15);line-height:1.45;
  display:flex;gap:.5rem;align-items:flex-start}
.tot-hm-erro.er{background:var(--er-fundo);color:var(--er)}
.tot-hm-erro .ic{display:flex;flex-shrink:0;margin-top:.0625rem}
.tot-hm-erro .ic svg{width:18px;height:18px}
.tot-teclado{width:20rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem;
  align-content:center}
.tot-tecla{padding:.875rem;justify-content:center;text-align:center;
  font-size:var(--t-24);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;cursor:pointer}
.tot-tecla.aux{font-size:var(--t-15);color:var(--txt-fraco)}
/* a TV em tela cheia */
.tv.disp{background:var(--marca-800)} .tv.claro.disp{background:var(--marca-500)}
.tv-meio{flex:1;display:flex;min-height:0}
.tv-cab img{height:1.75rem;width:auto} .tv-cab .meio{flex:1;min-width:0}
.tv-lado .tv-rot{font-size:var(--t-17)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tv-cab .nome{font-size:var(--t-17);font-weight:var(--font-weight-semibold)}
.tv-cab .atrib,.tv-cab .data{font-size:var(--t-13);color:var(--tv-fraco)}
.tv-cab .data{text-align:right}
.tv .tv-senha.parada{opacity:.75}
.tv .tv-rot.baixo{margin-top:.75rem}
.tv-lado .espaco{flex:1}
.tv-lado .espera{font-size:var(--t-17);color:var(--tv-apagado);line-height:1.5}
.tv-vazia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.75rem;padding:2rem}
.tv-vazia .ic{color:var(--tv-apagado);display:flex}
.tv-vazia .titulo{font-size:var(--t-32);font-weight:var(--font-weight-semibold)}
.tv-vazia .texto{font-size:var(--t-18);color:var(--tv-fraco);max-width:32rem;line-height:1.6}
.tv-pe .ic{color:var(--marca-300);display:flex} .tv-pe .aviso{flex:1}
.tv-pe .site{font-size:var(--t-15);color:var(--tv-apagado)}
.tv-som{position:fixed;left:1rem;bottom:4.5rem;height:2.5rem;padding:0 1rem;border:0;
  border-radius:9999px;background:rgb(255 255 255 / .16);color:#fff;font:inherit;
  font-size:var(--t-15);cursor:pointer}
/* o tablet em tela cheia: sem a moldura de aparelho da prancheta */
.tablet.disp{width:100%;padding:0;border-radius:0;background:var(--papel-branco)}
.tablet.disp>.tela{flex:1;border-radius:0;min-height:100vh}
.tablet .cli-cab img{height:1.375rem;width:auto} .tablet .cli-cab .meio{flex:1;min-width:0}
.tablet .cli-cab .nome{font-size:var(--t-13);font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.tablet .cli-cab .posto{font-size:var(--t-11);color:var(--txt-fraco)}
.tablet .repouso{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.125rem;padding:1.5rem}
.tablet .repouso img{height:3.5rem;width:auto;margin-bottom:1rem}
.tablet .repouso .titulo{font-size:var(--t-24);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);line-height:1.3}
.tablet .repouso .atrib{font-size:var(--t-15);color:var(--txt-fraco);margin-top:.5rem}
.tablet .repouso .rodape{margin-top:1.5rem;padding-top:1rem;width:100%;max-width:22rem;
  border-top:1px solid var(--linha-fina);font-size:var(--t-13);color:var(--txt-apagado);line-height:1.6}
/* o ponto vermelho do repouso: a mesma tarja que o atendente vê na gaveta,
   do lado do cliente — gravação que só aparece para um dos lados é gravação
   escondida (prancheta Audio) */
.tablet .repouso{position:relative}
.tablet .repouso .grava{position:absolute;top:1rem;left:0;right:0;display:flex;
  align-items:center;justify-content:center;gap:.4375rem;font-size:var(--t-14);
  font-weight:var(--font-weight-medium);color:var(--er)}
.tablet .repouso .grava .pulso{width:.5rem;height:.5rem;background:var(--er)}
/* o termo da gravação: letra grande porque quem lê está de pé e é a primeira
   vez, e os dois botões do mesmo tamanho porque recusar não é erro */
.tablet .termo{max-width:34rem;margin:0 auto;padding:1.5rem 1rem 1rem}
.tablet .termo .titulo{font-size:var(--t-22);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);line-height:1.3;text-align:center}
.tablet .termo .texto{font-size:var(--t-16);line-height:1.65;color:var(--txt-forte);
  margin-top:1rem}
.tablet .termo .termo-acoes{display:flex;gap:.75rem;margin-top:1.75rem}
.tablet .termo .termo-acoes .btn{flex:1;height:3.5rem;font-size:var(--t-17)}
.tablet .termo .versao{font-size:var(--t-12);color:var(--txt-apagado);text-align:center;
  margin-top:.875rem}
.tablet .pesq{text-align:center;max-width:26rem;margin:0 auto;padding:1rem .75rem}
.tablet .pesq .titulo{font-size:var(--t-20);font-weight:var(--font-weight-semibold);margin-top:.75rem;
  color:var(--txt-forte)}
.tablet .pesq .sub{font-size:var(--t-15);color:var(--txt-fraco);margin-top:.1875rem}
.tablet .pesq .estrelas{display:flex;gap:.5rem;justify-content:center;margin:1.25rem 0 .375rem}
.tablet .pesq .nota{width:3.5rem;height:3.5rem;border:0;background:transparent;padding:0;font:inherit}
.tablet .pesq .nota:focus-visible{outline:2px solid var(--foco)}
.tablet .pesq .legenda{font-size:var(--t-14);color:var(--txt-fraco);min-height:1.25rem}
.tablet .pesq textarea{margin-top:.875rem;height:4.5rem;padding:.625rem .75rem;resize:none;
  font-size:var(--t-15);user-select:text;-webkit-user-select:text}
.tablet .pesq .pesq-acoes{display:flex;gap:.5rem;margin-top:.75rem}
.tablet .pesq .pesq-acoes .btn{height:2.75rem;font-size:var(--t-15)} .tablet .pesq .pesq-acoes .btn.envia{flex:1}
.tablet .pesq .anon{font-size:var(--t-12);color:var(--txt-apagado);margin-top:.625rem;line-height:1.4}
/* a impressão da senha: folha de 80 mm, e o cupom é a única coisa impressa */
@media print{
  @page{size:80mm auto;margin:4mm}
  body *{visibility:hidden}
  .cupom,.cupom *{visibility:visible}
  /* o papel de verdade já é creme; imprimir fundo gastaria a bobina inteira */
  .cupom{position:absolute;left:0;top:0;width:72mm;box-shadow:none;animation:none;
    transform:none;opacity:1;padding:2mm;background:none}
}

/* parear: a segunda porta do aparelho. Uma caixa no meio da tela, e dentro
   dela um campo largo com as letras espaçadas — quem digita está de pé, a
   dois metros, com um controle de TV na mão. */
.parear{align-items:center;justify-content:center;padding:1rem;
  background:var(--sup-pagina)}
.par-caixa{display:flex;flex-direction:column;align-items:center;gap:.75rem;
  text-align:center;background:var(--sup-cartao);border-radius:var(--radius-xl);
  box-shadow:var(--sombra-janela);padding:2.5rem 3rem;max-width:32rem}
.par-caixa img{height:2rem;width:auto;margin-bottom:.25rem}
.par-caixa h1{font-size:var(--t-22);font-weight:var(--font-weight-semibold);margin:0}
.par-nota{margin:0;font-size:var(--t-14);color:var(--txt-fraco)}
.par-codigo{width:15rem;height:4.5rem;margin:.5rem 0;text-align:center;
  font-size:var(--t-40);letter-spacing:.35em;text-indent:.35em;text-transform:uppercase;
  font-weight:var(--font-weight-semibold);border:0;outline:1px solid var(--linha);
  outline-offset:-1px;border-radius:var(--radius-md);background:var(--sup-cartao);
  color:var(--txt-forte);user-select:text;-webkit-user-select:text}
.par-codigo:focus{outline:2px solid var(--foco);outline-offset:-2px}
/* o código na tela de quem o gera: lido de longe, às vezes em voz alta para
   quem está com o controle na mão — então sai maior e com as letras
   separadas, como se lê um código, e não como se lê um nome */
.cod-par{font-size:var(--t-18);letter-spacing:.12em;
  font-weight:var(--font-weight-semibold)}
.par-erro{margin:0;font-size:var(--t-14);color:var(--er-texto)}
/* a porta do aparelho sem cookie (DEC-015, emenda de 02/10/2026): uma
   mensagem por estado, trocada pelo atributo do body, sem script inline */
[data-aparelho-entrar] [data-quando]{display:none}
[data-aparelho-entrar]:not([data-aparelho-estado]) [data-quando="sem-chave"],
[data-aparelho-estado="sem-chave"] [data-quando="sem-chave"],
[data-aparelho-estado="entrando"] [data-quando="entrando"],
[data-aparelho-estado="recusada"] [data-quando="recusada"],
[data-aparelho-estado="erro"] [data-quando="erro"]{display:block}
.par-bt{width:15rem;height:3rem;font-size:var(--t-16)}
.par-rodape{margin:.5rem 0 0;font-size:var(--t-12);color:var(--txt-fraco);line-height:1.5}

/* ---------- ONDA 8 · A GAVETA NO SHELL --------------------------------- */
/* a gaveta no shell: escondida até o ícone abrir; o menu da senha idem; os
   botões que vestem .chip/.aba/.mi (são <button>, para o teclado); o véu, o
   modal de decisão e o cupom que vai à impressora do navegador */
#gaveta[hidden],#gaveta-veu[hidden],.gaveta .menu[hidden],[data-relato][hidden]{display:none}
.gaveta button.chip,.gaveta button.aba,.gaveta button.mi{border:0;font-family:inherit;cursor:pointer}
.gaveta button.aba{background:none}
.gaveta button.mi{width:100%;background:none;text-align:left}
.ic-topo.on{color:var(--txt-marca)}
/* o HALO do sino (dono, 03/10/2026): fundo redondo suave em volta do ícone, só
   quando há aviso «para mim» por ler — o contador carrega o `data-halo`; com só
   «do sistema» por ler fica apenas o número. Estado = fundo suave + contorno
   fino, sem barra lateral. */
button.ic-topo[data-gaveta="avisos"]{border:0;background:none;padding:0;font:inherit}
.ic-topo:has([data-halo]),.shell-topo .ic-topo:has([data-halo]){border-radius:9999px;
  padding:.5rem;margin:-.5rem .75rem -.5rem -.5rem;align-items:center;justify-content:center;
  background:var(--er-suave);color:var(--sobre-er-suave);
  outline:1px solid var(--er-linha);outline-offset:-1px}
.ic-topo:has([data-halo]) .conta{top:-.125rem;right:-.375rem}
/* a sugestão de cancelar, depois de três chamadas sem resposta: tonal, acima
   das saídas, e do tamanho de um aviso — sugerir não é alarmar */
.chamada .sugestao{display:flex;align-items:flex-start;gap:.375rem;margin-top:.625rem;
  padding:.4375rem .5rem;border-radius:var(--radius-md);background:var(--av-fundo);
  color:var(--av);font-size:var(--t-11);line-height:1.45}
.chamada .sugestao svg{flex-shrink:0;margin-top:.0625rem}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--veu)}
#cupom{display:none}
/* abaixo de 1024px a gaveta cobre — mas não a barra do topo (z-index 50):
   ela desce 3,5rem para a barra continuar à vista */
@media (max-width:1023.98px){#gaveta,#gaveta-veu{top:var(--topo-fim,3.5rem)}}
@media print{
  body>*:not(#cupom){display:none!important}
  #cupom{display:block!important;color:#000;background:#fff}
  @page{size:80mm auto;margin:3mm}
}
/* 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»: «Meus pedidos» segue na lista de .tarefa. */
.tarefa .sla{font-size:var(--t-11);color:var(--txt-fraco);white-space:nowrap}
.tarefa.urg .sla{color:var(--er)}
a.tarefa{text-decoration:none;color:inherit}
.tarefa .t{font-size:var(--t-12-5);font-weight:var(--font-weight-medium)}
.tarefa .d{font-size:var(--t-11);color:var(--txt-fraco)}
/* Fila e pedido — desenho da prancha «Aprovação»: a fila ocupa 2/3, cada pedido
   é uma linha inteira clicável; o pedido abre com o efeito de título e a
   decisão numa faixa própria no fim do cartão. */
.apv-cab{margin-bottom:1rem}
.apv-cab h1{margin-bottom:.25rem}
.apv-cab .pagina-desc{margin-bottom:0;max-width:52rem}
.apv-duas{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;align-items:start}
.apv-card{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;overflow:hidden}
.apv-card-cab{display:flex;gap:.75rem;align-items:center;padding:1rem 1.25rem .75rem}
.apv-card-cab h3{margin:0;font-size:var(--f-16);font-weight:600;flex:1;min-width:0}
.apv-card-cab .meta{font-size:var(--f-13);color:var(--txt-fraco)}
.apv-corpo{border-top:1px solid var(--linha-fina)}
.apv-vazio{padding:1rem 1.25rem;font-size:var(--f-13);line-height:1.5;color:var(--txt-fraco)}
.apv-linha{display:flex;gap:.875rem;align-items:flex-start;padding:1rem 1.25rem;
  border-top:1px solid var(--linha-fina);text-decoration:none;color:inherit}
.apv-linha:first-child{border-top:0}
.apv-linha:hover{background:var(--sup-hover)}
.apv-linha .fx{width:3px;align-self:stretch;border-radius:2px;background:var(--linha)}
.apv-linha.urg .fx{background:var(--er)}
.apv-linha .t{flex:1;min-width:0}
.apv-linha .t b{display:block;font-size:var(--f-14);font-weight:500;line-height:1.45;color:var(--txt-forte)}
.apv-linha .t span{font-size:var(--f-12);color:var(--txt-fraco)}
.apv-linha .sla{white-space:nowrap}
.apv-linha .ir{display:flex;align-self:center;color:var(--txt-fraco)}
.apv-linha .ir svg{width:1rem;height:1rem}
.apv-regras-caixa>summary{display:flex;gap:.5rem;align-items:center;padding:.75rem 1.25rem;cursor:pointer;
  list-style:none;font-size:var(--f-14);font-weight:600;color:var(--txt-forte)}
.apv-regras-caixa>summary::-webkit-details-marker{display:none}
.apv-regras-caixa>summary svg{width:1.125rem;height:1.125rem;color:var(--txt-fraco)}
.apv-regras-caixa>summary .seta{margin-left:auto;display:flex;transition:transform .12s}
.apv-regras-caixa[open]>summary .seta{transform:rotate(180deg)}
.apv-regras{list-style:none;margin:0;padding:.25rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
.apv-regras li{display:flex;gap:.625rem;font-size:var(--f-13);line-height:1.5;color:var(--txt-forte)}
.apv-regras li svg{width:1rem;height:1rem;flex-shrink:0;color:var(--acao-texto);margin-top:.1875rem}
.apv-efeito{padding:1.25rem;border-bottom:1px solid var(--linha-fina)}
.apv-efeito .linha1{display:flex;gap:.75rem;align-items:flex-start}
.apv-efeito h2{flex:1;min-width:0;margin:0;font-size:var(--f-18);font-weight:600;line-height:1.4;color:var(--txt-forte)}
.apv-ic{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;
  border-radius:var(--raio);background:var(--av-suave);color:var(--av-icone)}
.apv-ic svg{width:1.125rem;height:1.125rem}
.apv-ic.ok{background:var(--ok-suave);color:var(--ok)}
.apv-ic.er{background:var(--er-suave);color:var(--er)}
.apv-ic.neutro{background:var(--sup-rebaixada);color:var(--txt-fraco)}
.apv-efeito .quem{display:flex;gap:.25rem .5rem;flex-wrap:wrap;align-items:center;margin-top:.625rem;
  font-size:var(--f-13);color:var(--txt-fraco)}
.apv-efeito .quem span+span::before{content:"· "}
.apv-efeito .quem b{color:var(--txt-forte);font-weight:600}
.apv-efeito .quem .apv-urg{color:var(--er)}
.apv-rot{font-size:var(--f-12);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-fraco);margin:0 0 .5rem}
.apv-bloco{padding:1rem 1.25rem;border-bottom:1px solid var(--linha-fina)}
.apv-pares{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.625rem 1rem;margin:0;font-size:var(--f-14)}
.apv-pares dt{color:var(--txt-fraco)}
.apv-pares dd{margin:0;color:var(--txt-forte);overflow-wrap:anywhere}
.apv-texto{font-size:var(--f-14);line-height:1.55;color:var(--txt-forte)}
.apv-texto.apv-seg{margin-top:.625rem}
.apv-texto .de{font-size:var(--f-12);color:var(--txt-fraco);margin-bottom:.25rem}
.apv-texto .fraco,.apv-trilha .fraco{color:var(--txt-fraco)}
.apv-trilha{margin:0;padding-left:1.0625rem;font-size:var(--f-13);line-height:1.65}
.apv-resposta{margin-top:.75rem}
.apv-decisao{padding:1.25rem;background:var(--sup-fraca)}
.apv-decisao textarea.inp{width:100%;min-height:5rem;padding:.625rem .75rem;height:auto;align-items:flex-start}
.apv-decisao .bts,.apv-resposta .bts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.75rem}
.apv-decisao .bts .espaco{flex:1}
.apv-acao{display:inline-flex;gap:.375rem;align-items:center}
.apv-acao svg{width:1rem;height:1rem}
.apv-decisao .note.apv-acao{font-size:var(--f-12)}
@media (max-width:1023.98px){.apv-duas{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639.98px){
  .apv-decisao .bts .btn{flex:1 1 100%;justify-content:center}
  .apv-decisao .bts .espaco{display:none}
  .apv-efeito .linha1{flex-wrap:wrap}
  .apv-efeito h2{flex:1 1 calc(100% - 2.75rem)}
  .apv-efeito .linha1 .badge{margin-left:2.75rem}
  .apv-linha{flex-wrap:wrap;column-gap:.75rem;row-gap:.5rem}
  .apv-linha .t{flex:1 1 calc(100% - 1.5rem)}
  .apv-linha .ir{display:none}
  .apv-linha .sla{margin-left:calc(3px + .75rem)}
}

/* ── O endereço que começa pelo CEP (DEC-018) ─────────────────────────────
   O componente é uma grade com uma faixa dentro: país e CEP em cima, e o
   miolo que o CEP TROCA embaixo, ocupando a linha inteira. O miolo é o alvo
   do htmx, e ele precisa ser um bloco de largura cheia — se fosse célula da
   grade, a troca reescreveria a largura junto com o conteúdo.

   Enquanto a busca vai e volta, o miolo esmaece em vez de sumir: campo que
   desaparece embaixo do cursor faz a pessoa perder o lugar onde estava. */
.endereco-postal>.miolo{grid-column:1/-1}
.endereco-postal>.miolo.htmx-request{opacity:.45;transition:opacity .12s}
/* «buscando o CEP»: a roda dentro da caixa do CEP enquanto o provedor
   responde (até 5 s, dono, 29/10/2026). Na serventia quem anda é o miolo;
   na ficha é a LINHA da lista, que posta a cada change — e por isso a roda
   só aparece depois de .35 s: o que demora é o CEP, que sai de casa, e
   mexer no número não pisca roda nenhuma. A roda é a do «Conferindo». */
.inp.cep-busca{position:relative}
.inp.cep-busca::after{content:"";position:absolute;right:.625rem;top:50%;
  width:.875rem;height:.875rem;margin-top:-.4375rem;border-radius:9999px;
  border:2px solid var(--linha-fina);border-top-color:var(--acao);
  opacity:0;visibility:hidden;pointer-events:none}
.li.htmx-request .inp.cep-busca::after,
.endereco-postal:has(>.miolo.htmx-request) .inp.cep-busca::after{
  opacity:1;visibility:visible;transition:opacity .15s .35s,visibility 0s .35s;
  animation:conferindo-roda .8s linear infinite}
@media (prefers-reduced-motion:reduce){.inp.cep-busca::after{animation-duration:2.4s}}
.aviso-cep{display:flex;align-items:center;gap:.4375rem;margin:0 0 .625rem;
  padding:.5rem .6875rem;border-radius:var(--radius-lg);
  background:var(--av-fundo);color:var(--av);
  outline:1px solid var(--av-linha);outline-offset:-1px;
  font-size:var(--t-12-5);line-height:1.4}
.aviso-cep svg{flex-shrink:0}

/* ONDA 9 · O PULSO ÚNICO (DEC-022) — o aviso discreto de «sem conexão»:
   no shell, uma tira no rodapé; na TV, uma linha no pé. Some sozinho. */
.pulso-aviso{position:fixed;left:50%;bottom:.75rem;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:.4375rem;padding:.4375rem .75rem;
  border-radius:9999px;background:var(--av-fundo);color:var(--av);
  outline:1px solid var(--av-linha);outline-offset:-1px;font-size:var(--t-12);
  box-shadow:var(--shadow-md)}
.pulso-aviso svg{width:.9375rem;height:.9375rem}
.pulso-aviso[hidden],.tv-semrede[hidden]{display:none}
.tv-semrede{position:absolute;left:50%;bottom:4.5rem;transform:translateX(-50%);
  display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;
  background:rgba(245,158,11,.18);color:#fbbf24;font-size:var(--t-18)}
.tv-semrede svg{width:1.25rem;height:1.25rem}

/* ---------- ONDA 9 · A CONVERSA INTERNA ---------------------------------- */
/* O chat mora em dois lugares e é o mesmo desenho nos dois: a gaveta do shell
   (`Conversa-Flutuante.dc.html`) e a tela cheia (`Conversa.dc.html`). O que
   muda é a moldura — a largura da gaveta, e a página inteira. */

/* com um fio aberto a gaveta alarga para caber a lista estreita e o fio */
.gaveta.larga{width:40rem}
.gaveta-larga-corpo{flex:1;display:flex;gap:.625rem;padding:.5rem .75rem;min-height:0}
.chat-lista-estreita{width:13rem;flex-shrink:0;border-right:1px solid var(--linha-fina);
  padding-right:.375rem;overflow:auto}
@media (max-width:1023.98px){.gaveta.larga{width:100%}
  .chat-lista-estreita{display:none}}

.chat-lista{display:flex;flex-direction:column}
.notif.conversa{align-items:center;border-radius:var(--radius-md)}
.notif.conversa.on{background:var(--sup-selecionada)}

/* a tela cheia: lista de 16rem à esquerda, fio à direita */
.chat-cheio{display:flex;gap:.875rem;height:calc(100vh - 9rem);min-height:24rem}
.chat-cheio-lista{width:16rem;flex-shrink:0;display:flex;flex-direction:column;
  border-right:1px solid var(--linha-fina);padding-right:.5rem;min-height:0}
/* a coluna da esquerda também recebe as caixas de «Nova conversa» e «Novo
   grupo», que são as MESMAS da gaveta: o cabeçalho e o pé delas são desenhados
   por `.gaveta>.cab` e `.gaveta>.pe`, e aqui não há gaveta nenhuma acima. O
   desenho é o de lá, sem a sombra que separa da moldura — a moldura aqui é a
   linha da coluna. */
.chat-cheio-lista>.cab{height:2.5rem;flex-shrink:0;display:flex;align-items:center;
  gap:.5rem}
.chat-cheio-lista>.cab .tit{font-size:var(--t-13-5);
  font-weight:var(--font-weight-semibold);flex:1}
.chat-cheio-lista>.corpo{flex:1;overflow:hidden;min-height:0}
.chat-cheio-lista>.pe{flex-shrink:0;padding:.6875rem 0 0}
.chat-cheio-vazio{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:2rem;color:var(--txt-fraco)}
.chat-cheio-vazio>.ic{color:var(--txt-apagado)}
.chat-cheio-vazio .t{font-size:var(--t-15);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte)}
.chat-cheio-vazio .d{font-size:var(--t-12-5);line-height:1.55;max-width:28rem}

/* o fio: cabeçalho, balões e a caixa de escrever */
.fio{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.fio-cab{display:flex;align-items:center;gap:.5rem;padding-bottom:.625rem;
  border-bottom:1px solid var(--linha-fina);margin-bottom:.5rem;flex-shrink:0}
.fio-msgs{flex:1;display:flex;flex-direction:column;gap:.125rem;overflow:auto;
  padding-right:.25rem;min-height:0;
  /* o chat.js soma a altura que cresceu em cima ao scrollTop quando chegam as
     mensagens anteriores; com a ancoragem do navegador ligada a compensação
     contaria duas vezes */
  overflow-anchor:none}
/* o fio em páginas: `.fio-corpo` guarda o contêiner rolável e o botão «ir para
   o fim», que flutua no canto de baixo SEM rolar junto com os balões */
.fio-corpo{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.fio-corpo>.fio-msgs{flex:1}
/* a sentinela do topo: uma linha discreta; o botão é também o plano B de quem
   não tem observador de interseção */
.fio-antes{display:flex;justify-content:center;padding:.25rem 0 .5rem;flex-shrink:0}
.fio-antes .btn{height:1.5rem;font-size:var(--t-11);padding:0 .625rem;
  color:var(--txt-apagado)}
.fio-antes.htmx-request .btn{opacity:.55;cursor:progress}
.fio-ir-fim{position:absolute;right:.75rem;bottom:.5rem;z-index:2;
  display:inline-flex;align-items:center;gap:.375rem;height:1.875rem;padding:0 .75rem;
  border:0;border-radius:999px;background:var(--acao);color:var(--txt-sobre-acao);cursor:pointer;
  font:inherit;font-size:var(--t-11-5);font-weight:var(--font-weight-semibold);
  box-shadow:var(--shadow-md)}
.fio-ir-fim:hover{filter:brightness(.95)}
.fio-ir-fim[hidden]{display:none}
.fio-ir-fim.htmx-request{opacity:.6;cursor:progress}
.fio-ir-fim .n{background:var(--realce-balao-meu);border-radius:999px;padding:0 .4375rem;
  font-variant-numeric:tabular-nums}
/* o marco que substitui a sentinela na última página: não há mais antigas */
.fio-inicio{flex-shrink:0;padding:.25rem 0 .5rem;font-size:var(--t-10-5);
  color:var(--txt-apagado);text-align:center}
/* a tarja «mensagens não lidas» que a abertura ancorada põe acima da primeira */
.fio-nao-lidas{display:flex;align-items:center;gap:.5rem;margin:.5rem 0;flex-shrink:0;
  font-size:var(--t-10-5);color:var(--txt-marca)}
.fio-nao-lidas::before,.fio-nao-lidas::after{content:"";flex:1;height:1px;
  background:var(--acao)}
.fio-busca{flex-shrink:0;margin-bottom:.5rem;max-height:12rem;overflow:auto}
.fio-busca[hidden],.fio-os[hidden]{display:none}
.fio-os{display:flex;gap:.375rem;align-items:center;margin-top:.5rem}

/* um balão e o que o acompanha: quem falou, a hora, e o que se pode fazer com
   ele. O botão de retirar só aparece no hover — ele não é o assunto.

   `.chat-msg`, e não `.msg`: aquela é a peça do E-MAIL (ONDA 7), com fundo
   de papel e largura inteira, e o balão do chat herdava a caixa branca dela
   por trás de cada linha. Nome curto em folha compartilhada colide. */
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.chat-msg.meu{align-items:flex-end}
.chat-msg>.quem{font-size:var(--t-9);color:var(--txt-apagado);margin-bottom:.125rem}
.chat-msg .retirar{position:absolute;top:.125rem;right:.25rem;opacity:0;
  transition:opacity .12s}
.chat-msg.meu .retirar{right:auto;left:.25rem}
.chat-msg:hover .retirar,.chat-msg:focus-within .retirar{opacity:1}
.balao.retirada{font-style:italic;opacity:.7}
.chat-msg.piscou>.balao{outline:2px solid var(--acao);outline-offset:2px}
.chat-sistema{text-align:center;font-size:var(--t-10-5);color:var(--txt-apagado);
  margin:.375rem 0}
/* a menção dentro do texto: o nome fica marcado, e é o único destaque que ela
   ganha — o sino não acende por chat (decisão 4) */
.mencao{background:var(--acao-suave);color:var(--txt-marca);border-radius:var(--radius-xs);
  padding:0 .125rem;font-weight:var(--font-weight-medium)}
.balao.meu .mencao{background:var(--realce-balao-meu);color:inherit}
.chat-msg.mencionada>.balao{outline:1px solid var(--acao);outline-offset:-1px}

/* o cartão-atalho de O.S.: um link, e a legenda que diz que ele é só um link */
.cartao-os{display:flex;gap:.5rem;align-items:center;padding:.4375rem .5625rem;
  border-radius:var(--radius-lg);background:var(--sup-cartao);
  outline:1px solid var(--linha-fina);outline-offset:-1px;max-width:78%;
  text-decoration:none;color:inherit;margin-bottom:.125rem}
.cartao-os:hover{background:var(--sup-hover)}
.cartao-os>.ic{color:var(--txt-fraco);display:flex;flex-shrink:0}
.cartao-os .t{display:block;font-size:var(--t-11-5);font-weight:var(--font-weight-semibold)}
.cartao-os .n{display:block;font-size:var(--t-9);color:var(--txt-apagado)}

/* a caixa de escrever, com os botões de mídia à esquerda */
.fio-caixa{display:flex;gap:.4375rem;align-items:flex-end;margin-top:.75rem;
  padding-top:.625rem;border-top:1px solid var(--linha-fina);flex-shrink:0;
  position:relative}
.fio-caixa .inp.escrever{flex:1;height:auto;min-height:2.25rem;align-items:flex-start;
  padding-top:.4375rem}
.fio-caixa textarea{border:0;outline:0;background:transparent;width:100%;font:inherit;
  color:inherit;resize:none;line-height:1.45;max-height:7.5rem}

/* o menu do «@»: sobe da caixa, e a seta anda nele */
.mencao-menu{position:absolute;bottom:calc(100% + .375rem);left:0;right:0;z-index:70;
  max-height:12rem;overflow:auto;background:var(--sup-cartao);border-radius:var(--radius-lg);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;box-shadow:var(--shadow-md);
  padding:.25rem}
.mencao-menu[hidden]{display:none}
.mencao-item{display:flex;align-items:center;gap:.5rem;width:100%;border:0;
  background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:.3125rem .5rem;border-radius:var(--radius-md);font-size:var(--t-12-5)}
.mencao-item .cargo{margin-left:auto;font-size:var(--t-11);color:var(--txt-fraco)}
.mencao-item:hover,.mencao-item.on{background:var(--sup-selecionada)}

/* um achado da busca dentro da conversa */
.achado{display:block;padding:.3125rem .5rem;border-radius:var(--radius-md);
  text-decoration:none;color:inherit}
.achado:hover{background:var(--sup-hover)}
.achado .quem{display:block;font-size:var(--t-9);color:var(--txt-apagado)}
.achado .t{display:block;font-size:var(--t-11-5)}

/* a aba como <button> fora da gaveta: a folha desenha `.aba` como texto, e o
   navegador desenha `<button>` como caixa cinza. A gaveta já tinha a linha
   (ONDA 8); a tela cheia do chat é o primeiro lugar fora dela em que a aba é
   botão — e tem de ser botão, porque ela é acionável pelo teclado */
button.aba{border:0;background:none;font-family:inherit}
/* na tela cheia o «Abrir em tela cheia» seria um link para a própria página:
   o botão sai sempre do fio (a resposta do «enviar» é a mesma para os dois
   lugares) e é aqui que ele se esconde */
.chat-cheio .tela-cheia{display:none}

/* ---------- ONDA 9-B · A MÍDIA DA CONVERSA (frente 4) -------------------- */

/* o balão de mídia: a foto, o áudio ou o anexo, e a legenda embaixo — uma
   mensagem só, e por isso um balão só. O recheio encolhe porque a imagem já
   tem borda e cantos próprios; o texto do balão comum precisa de margem, a
   foto não */
.balao.midia{padding:.25rem;display:flex;flex-direction:column;gap:.25rem;
  max-width:min(20rem,70vw)}
.balao.midia .legenda{padding:0 .25rem;font-size:var(--t-12-5);line-height:1.45}
.balao.midia .hora{align-self:flex-end;padding-right:.25rem}

/* a miniatura clicável: a foto natural abre na mesma rota, noutra aba */
.chat-foto{display:block;line-height:0}
.chat-foto img{max-width:100%;max-height:16rem;border-radius:var(--radius-sm);
  display:block;object-fit:cover}

.chat-audio{width:15rem;max-width:100%;height:2.25rem;display:block}

/* a transcrição do áudio pela IA (plano_chat §15): ela mora DENTRO do balão,
   abaixo do tocador, porque é a mesma mensagem — e vem com o rótulo que diz
   de onde saiu, para que ninguém a leia como palavra da pessoa. O botão que
   a pede fica no mesmo lugar, e cinza enquanto a tarefa da IA estiver
   travada. */
.transcricao{display:block;margin-top:.375rem;padding:.375rem .5rem;
  border-radius:var(--radius-md);background:var(--sup-hover);
  font-size:var(--t-11-5);line-height:1.45;white-space:pre-wrap}
.balao.meu .transcricao{background:var(--veu-balao-meu)}
.transcricao>.rot{display:block;font-size:var(--t-9);text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-apagado);margin-bottom:.125rem}
.balao.meu .transcricao>.rot{color:inherit;opacity:.75}
.balao .btn.transcrever,.balao .btn.dis[data-sem-permissao="chat.transcrever"]{
  margin-top:.375rem;height:1.625rem;font-size:var(--t-11);gap:.3125rem}

/* o anexo: clipe, nome e tamanho — o mesmo desenho do cartão de O.S., porque
   os dois são «isto leva a outro lugar» dentro de um balão */
.chat-anexo{display:flex;gap:.5rem;align-items:center;padding:.375rem .5rem;
  border-radius:var(--radius-md);text-decoration:none;color:inherit;
  background:var(--sup-hover)}
.balao.meu .chat-anexo{background:var(--veu-balao-meu)}
.chat-anexo>.ic{display:flex;flex-shrink:0;color:var(--txt-fraco)}
.balao.meu .chat-anexo>.ic{color:inherit}
.chat-anexo .n{display:block;font-size:var(--t-11-5);
  font-weight:var(--font-weight-semibold);word-break:break-all}
.chat-anexo .t{display:block;font-size:var(--t-9);color:var(--txt-apagado)}
.balao.meu .chat-anexo .t{color:inherit;opacity:.75}

/* a PRÉVIA, acima da caixa de escrever: o que vai subir, antes de subir */
.fio-midia{margin-top:.5rem;padding:.5rem;border:1px solid var(--linha-fina);
  border-radius:var(--radius-md);background:var(--sup-fraca);
  display:flex;flex-direction:column;gap:.4375rem}
.fio-midia[hidden]{display:none}
.fio-midia .linha{display:flex;gap:.375rem;align-items:center}
.fio-midia .linha[hidden]{display:none}
.fio-midia .previa{display:flex}
.previa-foto,.previa-audio,.previa-anexo{display:flex;align-items:center;
  gap:.5rem;min-width:0}
.previa-foto img{max-height:5rem;max-width:8rem;border-radius:var(--radius-sm);
  display:block}
.previa-foto .n,.previa-audio .n{font-size:var(--t-10);color:var(--txt-apagado)}
.previa-anexo .n{font-size:var(--t-12);font-weight:var(--font-weight-semibold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.previa-anexo .t{font-size:var(--t-10);color:var(--txt-apagado);flex-shrink:0}

/* GRAVANDO: o ponto que pisca, o cronômetro e o limite escrito ao lado dele
   — quem grava tem de ver quanto falta para o minuto que a regra dá */
.gravando{display:flex;align-items:center;gap:.5rem;width:100%}
.gravando .ponto{width:.5rem;height:.5rem;border-radius:50%;
  background:var(--ponto-gravando);flex-shrink:0;animation:pulsar 1.2s infinite}
.gravando .t{font-size:var(--t-12);flex:1}
.gravando .lim{color:var(--txt-apagado)}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- ONDA 9-C · A PRESENÇA (plano_chat.md §14) -------------------- */

/* O ponto colorido no canto do retrato: verde online · âmbar ausente ·
   vermelho ocupado · cinza offline. A PALAVRA vai na dica (`title`), e não na
   cor: quem não distingue verde de vermelho tem de saber o mesmo que os
   outros, e cor sozinha nunca é informação (art. 21 · acessibilidade).

   Ele mora DENTRO do `.retrato`, que é `display:grid` — por isso o
   `position:relative` no invólucro e não no retrato: o retrato centraliza as
   iniciais, e um filho posicionado dentro dele brigaria com o `place-items`.
   O anel da cor de fundo é o que o separa do retrato quando os dois têm cor
   parecida; ele acompanha o tema porque é `--sup-cartao`, e não branco. */
.com-presenca{position:relative;display:inline-flex;flex-shrink:0}
.presenca{position:absolute;right:-1px;bottom:-1px;width:.625rem;height:.625rem;
  border-radius:9999px;box-shadow:0 0 0 2px var(--sup-cartao);
  background:var(--txt-apagado)}
.presenca.online{background:var(--ok-icone)}
.presenca.ausente{background:var(--av-icone)}
.presenca.ocupado{background:var(--er-icone)}
.presenca.offline{background:var(--linha-forte)}
/* no retrato pequeno da lista e do cabeçalho do fio o ponto encolhe junto:
   um ponto de 10px num retrato de 30px vira um segundo elemento, e não uma
   marca do primeiro */
.com-presenca.sm .presenca{width:.5rem;height:.5rem;box-shadow:0 0 0 1.5px var(--sup-cartao)}

/* a linha do estado PRÓPRIO, no menu do avatar e no cabeçalho do chat: o
   ponto, a palavra, e — se ocupado — até que horas. O menu já é estreito;
   por isso a hora vai em texto apagado à direita, como «aqui» e «livre» do
   guichê fazem na mesma lista */
.presenca-linha{display:inline-flex;align-items:center;gap:.375rem;
  font-size:var(--t-10);color:var(--txt-fraco)}
.presenca-linha .presenca{position:static;box-shadow:none;width:.5rem;height:.5rem}

/* ---------- ONDA 9-D · OS RECIBOS (os tiques, §17) ----------------------- */
/* Um tique cinza · dois cinzas · dois azuis — os do WhatsApp, e a decisão da
   Spidea de 07/09/2026 (corrigida no mesmo dia: entregue é cinza, lida é azul). Eles moram no RODAPÉ do balão, ao lado da hora, e só
   nas mensagens do próprio: o balão «deles» tem hora e mais nada.

   A cor não é a informação: o `title` e o `aria-label` do rodapé dizem
   «Enviada», «Entregue» ou «Lida» por extenso, porque distinguir um cinza de
   dois num ícone de 12px não é dado a todo mundo. */
.rodape{display:inline-flex;align-items:center;gap:.1875rem;margin-left:.375rem;
  vertical-align:baseline}
.rodape .hora{margin-left:0}
.tiques{display:inline-flex;line-height:0;opacity:.75}
/* o traço 1,25 da folha some num ícone de 12px sobre o azul do balão
   próprio: dois tiques viravam um borrão da cor do fundo. O tique é o único
   ícone da casa que engrossa, e é por isso — ele tem de ser lido de relance,
   e a diferença entre um e dois é a informação */
.tiques svg{width:.875rem;height:.875rem;stroke-width:2.25}
/* o tique único é o mesmo cinza da hora — «saiu daqui, e nada mais sei» */
.tiques.um{opacity:.55}
/* dois cinzas: chegou a todos, e ninguém abriu ainda — o mesmo cinza do
   único; o que muda é a contagem */
.tiques.dois{opacity:.55}
/* dois azuis, a cor do sistema: todos leram. No balão próprio, que já é
   azul, o azul claro — senão o tique some no fundo */
.tiques.lida{color:var(--marca-500);opacity:1}
.balao.meu .tiques.lida{color:var(--tique-lido)}
/* na mídia o rodapé continua colado à direita, como a hora estava */
.balao.midia .rodape{align-self:flex-end;padding-right:.25rem}

/* o menu do botão direito: o `.menu` da folha, posto onde o clique foi. Um
   só na página, movido — não um por balão */
.chat-menu{position:fixed;z-index:90;width:11rem}
.chat-menu[hidden]{display:none}
.chat-menu .mi[hidden]{display:none}
/* os itens são <button>, e não <div>: o menu ACIONA o botão que o balão já
   tem, e um botão dentro dele responde a Enter e ao teclado de graça. O
   preço é desmontar o desenho nativo do <button>, que a folha nunca precisou
   fazer porque o .mi dela sempre foi <div> */
.chat-menu .mi{width:100%;background:none;border:0;font:inherit;text-align:left}

/* «Informações»: por destinatário, a hora da entrega e a da leitura. É um
   cartão dentro do véu de `.modal`, e o véu fecha ao clique fora */
.chat-info[hidden]{display:none}
.chat-recibos{width:min(22rem,92vw);max-height:80vh;overflow:auto;
  background:var(--sup-cartao);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;padding:.75rem .875rem}
.chat-recibos>.cab{font-size:var(--t-13-5);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);display:flex;flex-direction:column;gap:.125rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--linha-fina)}
.chat-recibos>.cab .q{font-size:var(--t-10);font-weight:var(--font-weight-normal);
  color:var(--txt-apagado)}
.chat-recibos .linha{padding:.5rem 0;border-bottom:1px solid var(--linha-fina)}
.chat-recibos .linha:last-child{border-bottom:0}
.chat-recibos .n{font-size:var(--t-12-5);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);margin-bottom:.1875rem}
.chat-recibos .q{font-size:var(--t-11);color:var(--txt-fraco);display:flex;gap:.375rem}
.chat-recibos .q .rot{width:4.25rem;flex-shrink:0;color:var(--txt-apagado)}
.chat-recibos .q em{font-style:normal;color:var(--txt-apagado)}

/* disponibilidade do Spidea Hub (plano do Hub §11.9) — a barra de 90 dias,
   um quadrado por dia, nas cores de sempre: ok, aviso, erro, e o apagado
   para «sem medida» */
.disp-topo{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.625rem}
.disp-topo .espaco,.disp-hub-cab .espaco,.disp-filtro .espaco{flex:1}
.seg>a{padding:.25rem .625rem;border-radius:var(--radius-sm);font-size:var(--t-11);
  color:var(--txt-fraco);text-decoration:none}
.seg>a.on{background:var(--sup-cartao);color:var(--txt-forte);
  font-weight:var(--font-weight-medium);box-shadow:var(--shadow-xs)}
.grade-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:.75rem;margin-bottom:.75rem}
.metrica.destaque .val{font-size:var(--t-32);color:var(--txt-marca)}
.disp-hub{display:flex;flex-direction:column;gap:.375rem}
.disp-hub+.disp-hub{padding-top:.875rem;border-top:1px solid var(--linha-fina)}
.disp-hub-cab{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dias{display:flex;gap:2px;align-items:stretch;height:1.75rem}
.dias>.tip{flex:1;min-width:0;display:flex}
.dias .dia{flex:1;border-radius:var(--radius-hair);background:var(--linha)}
.dias .dia.verde{background:var(--ok-icone)}
.dias .dia.amarelo{background:var(--av-icone)}
.dias .dia.vermelho{background:var(--er-icone)}
.dias .dia.cinza{background:var(--linha-fina)}
.dias>.tip>.bolha{white-space:nowrap}
.disp-legenda{display:flex;justify-content:space-between}
.disp-filtro{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;padding:.625rem 1rem}
.disp-relato ul{margin:.375rem 0 0;padding-left:1rem;font-size:var(--t-12)}

/* ---------- PAINEL DO SPIDEA HUB PELA SPIDEA (plano do Hub §5) --------------
   As mesmas páginas do painel local, com os tokens da casa. A faixa (§5.2):
   um cartão por conexão, cor INTEIRA; passando de 3 min sem retrato, a faixa
   inteira perde a cor — o cinza diz «isto é do último retrato», não «ok». */
.painel-hub-nav{display:flex;align-items:flex-end;gap:.75rem;margin-bottom:1rem;
  border-bottom:1px solid var(--linha-fina)}
.painel-hub-nav .abas{border-bottom:0;overflow-x:auto;flex:1;min-width:0}
.painel-hub-nav>.tip{margin-bottom:.375rem}
.painel-hub-faixa-bloco{margin-bottom:1rem}
.painel-hub-retrato{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;
  font-size:var(--t-12-5);color:var(--txt-fraco);margin-bottom:.5rem}
.painel-hub-retrato.cinza{padding:.5625rem .75rem;border-radius:var(--radius-lg);
  background:var(--sup-rebaixada);color:var(--txt-forte);outline:1px solid var(--linha-cartao);
  outline-offset:-1px}
.painel-hub-faixa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.625rem}
.painel-hub-cartao{border-radius:var(--radius-lg);padding:.75rem .875rem;min-height:6rem;
  background:var(--ok-fundo);outline:1px solid var(--ok-linha);outline-offset:-1px}
.painel-hub-cartao.av{background:var(--av-fundo);outline-color:var(--av-linha)}
.painel-hub-cartao.er{background:var(--er-fundo);outline-color:var(--er-linha)}
.painel-hub-rot{display:flex;align-items:center;gap:.375rem;font-size:var(--t-11);
  font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-fraco)}
.painel-hub-bola{width:.5625rem;height:.5625rem;border-radius:50%;background:var(--ok)}
.painel-hub-cartao.av .painel-hub-bola{background:var(--av)}
.painel-hub-cartao.er .painel-hub-bola{background:var(--er)}
.painel-hub-palavra{margin-top:.25rem;font-size:var(--t-19);font-weight:var(--font-weight-semibold);
  color:var(--ok)}
.painel-hub-cartao.av .painel-hub-palavra{color:var(--av)}
.painel-hub-cartao.er .painel-hub-palavra{color:var(--er)}
.painel-hub-frase{font-size:var(--t-12-5);color:var(--txt-forte)}
.painel-hub-desde{font-size:var(--t-11-5);color:var(--txt-fraco)}
.painel-hub-faixa.cinza .painel-hub-cartao{background:var(--sup-rebaixada);outline-color:var(--linha-cartao)}
.painel-hub-faixa.cinza .painel-hub-bola{background:var(--txt-apagado)}
.painel-hub-faixa.cinza .painel-hub-palavra,
.painel-hub-faixa.cinza .painel-hub-frase{color:var(--txt-apagado)}
.painel-hub-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;
  margin-bottom:1rem;align-items:start}
.painel-hub-fichas>.card+.card{margin-top:0}
.painel-hub-espaco{margin-bottom:1rem}
.painel-hub-duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0;
  align-items:start}
.painel-hub-duas>.card+.card{margin-top:0}
/* meia largura não cabe o mínimo de 52rem do .rola-x: as tabelas daqui têm três colunas curtas */
.painel-hub-duas .rola-x>table{min-width:0}
/* o rótulo leva no máximo metade da largura e quebra; antes (`max-content`),
   a 1280 o cartão de 272 px dava 44 px ao valor e «08/10 10:52:28» vazava
   (tela «Cópia física», 09/10/2026) */
.painel-hub-pares{display:grid;grid-template-columns:fit-content(50%) minmax(0,1fr);gap:.375rem 1rem;margin:0;
  font-size:var(--t-13)}
.painel-hub-pares dt{color:var(--txt-fraco)} .painel-hub-pares dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* no celular, rótulo comprido («Último pedaço do banco (WAL) recebido») tomava a
   linha e espremia o valor letra a letra (tela «Cópia física», 07/10/2026): com
   `.dividido`, as duas colunas dividem a largura e o rótulo é que quebra */
@media (max-width:639.98px){.painel-hub-pares.dividido{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.painel-hub-grande{font-size:var(--t-20);font-weight:var(--font-weight-semibold);line-height:1.2}
.painel-hub-dica{margin:.625rem 0 0}
.painel-hub-texto{margin:0 0 .75rem;font-size:var(--t-13);color:var(--txt-forte)}
.painel-hub-vazio{padding:1.125rem;text-align:center;font-size:var(--t-13);color:var(--txt-fraco);
  background:var(--sup-rebaixada);border-radius:var(--radius-lg)}
.painel-hub-codigo{font-variant-numeric:tabular-nums;font-size:var(--t-12)}
.painel-hub-linha{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--txt-forte)}
.painel-hub-erro{color:var(--er);white-space:pre-wrap;overflow-wrap:anywhere}
.painel-hub-resultado{white-space:pre-wrap;overflow-wrap:anywhere;max-width:28rem}
.painel-hub-fim{text-align:right;white-space:nowrap}
.painel-hub-form{display:inline-flex;margin:0}
/* o balão do motivo, preso à esquerda: o botão cinza mora no canto esquerdo do cartão, e o
   balão centrado saía da página */
.painel-hub-tip-esq>.bolha{left:0;transform:none}
.painel-hub-tip-esq>.bolha::after{left:1.25rem}
.painel-hub-teste{display:flex;flex-direction:column;gap:.25rem;max-width:22rem}
.painel-hub-teste .btn{margin-top:.625rem}
.painel-hub-filtro{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.painel-hub-filtro .inp:first-child{flex:1;min-width:12rem}
.painel-hub-filtro select.inp{width:auto}
.painel-hub-alerta{margin-bottom:.75rem}
.painel-hub-tempo{display:grid;grid-template-columns:repeat(96,1fr);gap:2px;height:1.875rem}
.painel-hub-tempo i{border-radius:var(--radius-xs);background:var(--ok)}
.painel-hub-tempo i.er{background:var(--er)} .painel-hub-tempo i.cinza{background:var(--linha)}
.painel-hub-tempo-rot{display:flex;justify-content:space-between;margin-top:.25rem}
.painel-hub-barras{display:flex;align-items:flex-end;gap:2px;height:2.75rem}
.painel-hub-barras i{flex:1;min-width:2px;background:var(--acao);border-radius:var(--radius-xs) 2px 0 0}
@media (max-width:1023.98px){.painel-hub-faixa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .painel-hub-duas{grid-template-columns:1fr}}
@media (max-width:639.98px){.painel-hub-faixa{grid-template-columns:1fr}
  .painel-hub-nav{flex-direction:column;align-items:stretch}}
/* o Hub calado há mais de 3 min: o alerta acima da faixa cinza (29/09/2026) */
.painel-hub-calado{margin-bottom:.75rem}

/* ---------- HUBS: a lista e o cadastro em abas (decisão do dono, 29/09/2026) --- */
/* a lista: o nome com onde fica embaixo, e a estrela do principal */
.hub-nome{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.hub-nome>b{font-weight:var(--font-weight-semibold);font-size:var(--t-13)}
.hub-nome>span{font-size:var(--t-12);color:var(--txt-fraco)}
.hub-estrela{display:inline-flex;margin:0}
.hub-estrela .estrela{border:0;background:none;padding:0}
.estrela.hub-estrela-dis{cursor:not-allowed}
.estrela.hub-estrela-dis:hover{background:none;color:var(--txt-apagado)}
/* o cadastro: as abas num cartão, como a ficha; cada aba com os seus cartões */
.hub-abas{margin:.25rem 0 1rem;background:var(--sup-cartao);border-radius:var(--raio);
  padding:0 1rem;box-shadow:var(--sombra-cartao,none);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.hub-abas>.abas{border-bottom:0}
.hub-cadastro{margin-top:0}
.hub-card-cab{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:1rem 1.25rem 0}
.hub-card-cab>h3{margin:0;flex:1;min-width:0;font-size:var(--t-16);font-weight:var(--font-weight-semibold)}
.hub-card-meta{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--t-12-5);color:var(--txt-fraco)}
.hub-card-pe{margin:0;padding:.875rem 1.25rem;border-top:1px solid var(--linha-fina)}
.hub-sub{display:block;font-size:var(--t-12);color:var(--txt-fraco)}
.hub-codigo{margin-top:1.25rem}
.hub-nota{margin:.75rem 0 0;line-height:1.5}
.hub-forte{font-weight:var(--font-weight-semibold)}
.hub-apagado{color:var(--txt-apagado)}
.hub-nq,.hub-nq .badge{white-space:nowrap}

/* ---------- SHELL NO CELULAR E NO TABLET (< 1024) ---------------------------
   Prancha «Shell · opção 1» (rodada 4): a barra fica com a marca, a lupa, o ⋮
   e o avatar. São as mesmas peças do desktop — a busca global, a barra
   lateral, o menu do avatar e os ícones de conversa, notificações, agenda e
   fila —, mudadas de lugar (static/shell.js). No desktop nada aqui aparece:
   `.so-movel` some e o resto só vale abaixo de 1024. */
.busca-global>.inp.busca-inp{width:17.5rem;gap:.5rem;height:2rem;font-size:var(--t-12-5);
  background:var(--sup-rebaixada)}
.rot-agora,.lado-cab{display:none}
.veu-shell{position:fixed;inset:var(--topo-fim,3.5rem) 0 0 0;z-index:45;background:var(--veu)}
.veu-shell[hidden]{display:none}
@media (min-width:1024px){ .so-movel{display:none!important} }
@media (max-width:1023.98px){
  .shell-topo{gap:.125rem;padding:0 .375rem 0 1rem}
  .topo-dir>[data-agora],.shell-lado{display:none}
  .topo-bt{width:2.75rem;height:2.75rem;display:grid;place-items:center;flex-shrink:0;
    border:0;background:none;padding:0;font:inherit;border-radius:var(--radius-md)}
  .topo-quem,.topo-avatar>summary>.seta{display:none}
  .topo-avatar>summary{position:relative;width:2.75rem;height:2.75rem;justify-content:center;
    cursor:pointer}
  .topo-dir>.topo-avatar{padding-left:0!important}
  .soma-avisos{position:absolute;top:-.25rem;right:-.375rem;min-width:1.125rem;height:1.125rem;
    padding:0 .25rem;border-radius:9999px;background:var(--er);color:var(--txt-sobre-acao);
    font-size:var(--t-10);font-weight:var(--font-weight-semibold);display:grid;place-items:center;
    line-height:1}
  .soma-avisos[hidden]{display:none}

  /* a lupa: a MESMA busca global, por cima da barra */
  .busca-global{display:none}
  .busca-aberta .busca-global{display:flex;align-items:center;gap:.125rem;position:absolute;
    inset:0;z-index:5;padding:0 .375rem 0 1rem;background:var(--sup-cartao)}
  .busca-aberta .busca-global>.inp.busca-inp{flex:1;width:auto;height:2.75rem;
    font-size:var(--t-16)}
  .busca-aberta .busca-global .kbd{display:none}
  .busca-global .paleta{left:0;right:0;top:100%;width:auto;max-width:none;
    border-radius:0 0 var(--radius-xl) var(--radius-xl)}

  /* o painel do avatar: o menu inteiro, em pé à direita, com o «Agora» */
  .topo-dir>.topo-avatar>.menu{position:fixed;top:var(--topo-fim,3.5rem);right:0;bottom:0;
    width:min(22rem,88vw);border-radius:0;overflow-y:auto;z-index:90;padding:.5rem;
    box-shadow:var(--sombra-janela)}
  .painel-quem{display:flex;align-items:center;gap:.5rem}
  .painel-quem-txt{flex:1;min-width:0}
  .painel-rot{padding:.5rem .5625rem .25rem;font-size:var(--t-10);letter-spacing:.06em;
    font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--txt-fraco)}
  .agora-grade{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.25rem .5625rem .5rem}
  .agora-grade>.tip{display:block}
  .agora-grade>.tip>.bolha{display:none}
  /* o ladrilho é flex SEMPRE: a regra de toque dá inline-grid a todo .ic-topo,
     e em grade o ícone, o rótulo e o contador desciam um sob o outro (393px, 27/09) */
  .agora-grade .ic-topo{display:flex!important;flex-direction:row;justify-content:flex-start;
    width:100%;min-height:3rem;align-items:center;gap:.5rem;
    padding:.5rem .625rem!important;border-radius:var(--radius-lg);
    background:var(--sup-rebaixada)!important;color:var(--txt-forte);
    font-size:var(--t-12-5)!important;text-align:left;line-height:1.25}
  /* os quatro ladrilhos do MESMO tamanho, qualquer que seja o texto: altura
     fixa, rótulo em no máximo 2 linhas, ícone e contador no mesmo lugar */
  .agora-grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:3.5rem}
  .agora-grade .ic-topo{height:100%;min-height:0!important}
  .agora-grade .rot-agora{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden;flex:1;min-width:0}
  .agora-grade .ic-topo>svg{flex-shrink:0}
  .agora-grade .ic-topo>[id^="conta-"],.agora-grade .ic-topo>.conta{margin-left:auto;flex-shrink:0;
    display:flex}
  .agora-grade .ic-topo .conta{position:static;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;
    display:grid;place-items:center;font-size:var(--t-10)}
  .topo-dir>.topo-avatar>.menu .mi{min-height:2.75rem}
  /* o posto é um acordeão DENTRO do painel (prancha «Shell-Op1-Posto»): a
     lista abre embaixo, em largura total — nunca ao lado, para fora da tela */
  .shell-topo .menu .suspenso{display:flex;flex-direction:column;align-items:stretch}
  .shell-topo .menu .suspenso>summary{min-height:2.75rem;gap:.625rem}
  .shell-topo .menu .suspenso>summary .seta{transform:rotate(-90deg)}
  .shell-topo .menu .suspenso[open]>summary{background:var(--sup-rebaixada)}
  .shell-topo .menu .suspenso[open]>summary .seta{transform:rotate(90deg)}
  .shell-topo .menu .suspenso>.menu{position:static;width:auto;box-shadow:none;outline:0;
    margin:0 0 .5rem;padding:.25rem 0;border-radius:0;background:var(--sup-cartao);
    border-bottom:1px solid var(--linha-fina)}
  .shell-topo .menu .suspenso>.menu .mi{min-height:2.75rem}
  .shell-topo .menu .suspenso>.menu .mi>span{white-space:normal!important}
  .shell-topo .menu .motivo-posto{white-space:normal}

  /* o ⋮: a MESMA barra lateral, como gaveta */
  .modulos-abertos .shell-lado{display:flex;position:fixed;top:var(--topo-fim,3.5rem);right:0;bottom:0;
    width:min(20rem,85vw);z-index:90;padding:.5rem .75rem;overflow-y:auto;
    box-shadow:var(--sombra-janela)}
  .modulos-abertos .lado-cab{display:flex;align-items:center;justify-content:space-between;
    padding:0 0 .25rem .625rem;font-size:var(--t-15);font-weight:var(--font-weight-semibold)}
  .modulos-abertos .shell-lado .recolher{display:none}
}

/* ---------- FICHA E FORMULÁRIOS POR LARGURA ---------------------------------
   O cabeçalho da ficha de pessoa era flex inline sem corte nenhum: a 390px os
   chips de «MOSTRAR» viravam uma coluna de 30px por cima do nome (medido na
   auditoria de 26/09). As classes repetem o que o inline dizia, então o
   desktop não muda; abaixo de 1024 a finalidade desce para uma linha própria,
   e abaixo de 640 tudo empilha e os chips rolam para o lado. */
/* nome longo (Design, 30/10/2026): a linha quebra em vez de um cobrir o outro.
   O nome pede a largura dele; a finalidade pede 14rem; os botões descem quando
   não cabem. O nome maior que a linha inteira quebra dentro da caixa dele. */
.pessoa-cab{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center;margin:.5rem 0 .875rem}
.pessoa-cab-quem{display:flex;gap:.75rem;align-items:center;min-width:0}
.pessoa-cab-txt{min-width:0}
.pessoa-cab-nome{font-size:var(--t-15);font-weight:600;display:flex;flex-wrap:wrap;
  gap:.25rem .5rem;align-items:center}
.pessoa-cab-sub{font-size:var(--t-11);color:var(--txt-fraco)}
.pessoa-cab-fio{width:1px;align-self:stretch;background:var(--linha-fina)}
.pessoa-cab-fin{flex:1 1 14rem;min-width:0}
.pessoa-cab-chips{display:flex;gap:.375rem;flex-wrap:wrap;align-items:center}
.pessoa-cab-acoes{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
@media (max-width:1023.98px){
  /* base «auto», e não 0: com base 0 os botões ficavam na linha do nome e
     cobriam a pílula */
  .pessoa-cab-quem{flex:1 1 auto}
  .pessoa-cab-fio{display:none}
  .pessoa-cab-fin{order:3;flex-basis:100%}
}
@media (max-width:639.98px){
  .pessoa-cab{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.625rem}
  .pessoa-cab-acoes{order:-1;justify-content:flex-end}
  /* os chips do «MOSTRAR» quebram linha: rolar de lado empurrava a página
     (Design, ficha CCN, 29/10/2026) */
  .pessoa-cab-chips{flex-wrap:wrap}
  .pessoa-cab-chips>*{white-space:nowrap}

  /* formulário em uma coluna, campo na largura toda; a reserva de 6,5rem à
     direita da seção é a coluna da estrela e da lixeira, que aqui desce */
  .secao-form{padding-right:0}
  .grid,.grade{grid-template-columns:1fr}
  .grade>*{grid-column:1/-1}
  .campo .inp,.campo input,.campo select,.campo textarea{max-width:100%}
  /* a lista repetível: cada linha vira um bloco, com o rótulo em cima de cada caixa */
  .lista-form .cab-cols{display:none}
  .lista-form .li{padding:.5rem 0;border-bottom:1px solid var(--linha-fina)}
  .lista-form .li>.campos{flex-basis:100%;grid-template-columns:1fr!important;gap:.5rem}
  .lista-form .li>.campos>[data-rot]::before{content:attr(data-rot);display:block;
    font-size:var(--t-11);color:var(--txt-fraco);margin-bottom:.1875rem}
  .lista-form .li>.fim-li{margin-left:auto}
  /* o «Salvar» de cada seção fica embaixo, à vista, enquanto a seção está na tela */
  .acoes-fim{position:sticky;bottom:0;z-index:4;background:var(--sup-cartao);
    padding-bottom:.625rem;margin-bottom:0!important}
}

/* ---------- LISTAS NO CELULAR (< 640) ---------------------------------------
   A linha vira cartão: a primeira coluna em cima, a segunda embaixo, a
   situação e as ações à direita, e a caixa da seleção à esquerda. O
   cabeçalho da tabela some — e a ordenação e o funil de cada coluna descem
   para a folha «Ordenar e filtrar», com os mesmos links. Paginador, «N por
   página», etiquetas, Avançado e a seleção continuam. Tabelas de detalhe
   (fora de .lista-cartoes) seguem rolando no cartão, com .rola-x.
   Sem :has() aqui: medido em 27/09, uma regra com :has() na tabela — mesmo
   num @media que não vale — muda o raster do texto das linhas esmaecidas no
   Chrome em 1440 (23 a 53 px). A seleção vira a classe .com-selecao. */
@media (min-width:640px){ .so-celular{display:none!important} }
.folha-filtros>summary{list-style:none;cursor:pointer}
.folha-filtros>summary::-webkit-details-marker{display:none}
.folha-filtros[open]::before{content:"";position:fixed;inset:0;z-index:95;background:var(--veu)}
.folha{position:fixed;left:0;right:0;bottom:0;z-index:96;max-height:85vh;overflow-y:auto;
  background:var(--sup-cartao);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:.5rem 1rem 1rem;box-shadow:var(--sombra-janela)}
.folha-cab{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--t-15);font-weight:var(--font-weight-semibold);padding:.25rem 0 .25rem}
.folha-rot{margin-top:.75rem;padding:.25rem 0;font-size:var(--t-10);letter-spacing:.06em;
  font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--txt-fraco)}
.folha-op{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;color:inherit;
  text-decoration:none;font-size:var(--t-14)}
.folha-op.on{color:var(--txt-marca);font-weight:var(--font-weight-semibold)}
.folha-op:not(.on) .folha-dir{opacity:.45}
.folha-dir{margin-left:auto;display:flex}
.folha-chips{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.folha-chips .chip{text-decoration:none;color:inherit;min-height:2.25rem}
.folha-limpar{margin-left:auto;font-size:var(--t-12-5);color:var(--txt-acao-linha)}
@media (max-width:639.98px){
  .lista-cartoes{overflow-x:visible!important}
  .lc-tabela{min-width:0!important;width:100%;display:block}
  .lc-tabela>thead{display:none}
  .lc-tabela>tbody{display:block}
  .lc-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"p1 sit" "p2 ac" "ex ac" "ex2 ac";column-gap:.75rem;row-gap:.125rem;
    align-items:center;padding:.625rem .25rem;border-bottom:1px solid var(--linha-fina)}
  .com-selecao .lc-linha{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"cx p1 sit" "cx p2 ac" "cx ex ac" "cx ex2 ac"}
  .lc-linha>td{display:none;padding:0;border:0;width:auto!important}
  .lc-linha>.lc-cx{display:flex;grid-area:cx}
  .lc-linha>.lc-cx>a{display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem}
  .lc-linha>.lc-p1{display:block;grid-area:p1;min-width:0}
  .lc-linha>.lc-p2{display:block;grid-area:p2;min-width:0}
  .lc-linha>.lc-extra{display:block;grid-area:ex;min-width:0}
  /* texto sem espaço (a mensagem técnica de /erros/) quebra dentro do cartão em vez de vazar */
  .lc-linha>:is(.lc-p1,.lc-p2,.lc-extra){overflow-wrap:anywhere}
  .lc-linha>.lc-extra2{display:block;grid-area:ex2;text-align:left!important}
  .lc-linha>.lc-sit{display:block;grid-area:sit;justify-self:end}
  .lc-linha>.lc-ac{display:block;grid-area:ac;justify-self:end}
  .lc-linha .acoes{opacity:1}
  /* selecionada: o cartão inteiro se pinta, não as células soltas da grade */
  .lc-linha.sel{background:var(--sup-selecionada)}
  .lc-linha.sel>td,.lc-linha.sel:hover>td{background:transparent}
  /* paginador compacto: ‹ › e o «1–25 de N»; a tira de números sai */
  .foot{flex-wrap:wrap;gap:.5rem;padding:.625rem .25rem}
  .foot .pag>*:not(:first-child):not(:last-child){display:none}
  /* a barra da seleção fica embaixo, à mão */
  .barra-lote{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0!important;
    border-radius:0;flex-wrap:wrap;row-gap:.25rem;box-shadow:var(--sombra-janela)}
  .barra-lote .risco{display:none}
  .barra-lote-folga{height:5rem}
}
@media (pointer:coarse){
  /* ações da barra da seleção: 40 de desenho, 44 de alvo (o × não tem fundo) */
  .barra-lote .ac{position:relative;height:2.5rem}
  .barra-lote .ac::after{content:"";position:absolute;left:50%;top:50%;
    width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
}

/* ---------- DIÁLOGOS E GAVETAS NO CELULAR (< 640) ---------------------------
   O diálogo (.modal e o <dialog> nativo) e a gaveta do shell viram folha de
   baixo em largura total: o polegar alcança os botões, e o cartão não fica
   espremido no meio de uma tela estreita. As larguras fixas vêm no style de
   cada cartão (25rem, 27rem), por isso o !important. */
@media (max-width:639.98px){
  .modal{place-items:end stretch}
  .modal>*{width:100%!important;max-width:none!important;max-height:90vh;overflow-y:auto;
    margin:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0!important}
  dialog[open]{margin:auto 0 0 0!important;width:100%!important;max-width:none!important;
    max-height:90vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0!important}
  #gaveta{top:calc(var(--topo-fim,3.5rem) + .75rem);left:0;right:0;width:100%;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}
}

/* ---------- TOQUE (pointer:coarse) ------------------------------------------
   Com dedo, todo alvo recebe o toque numa área de 44×44: botão, link de ação,
   ícone clicável, caixa de marcar, chave, aba e item de menu. O DESENHO do
   controle fica em 40px (pedido do dono, 27/09: 44 cheio ficava alto demais);
   os 4px que faltam são área invisível — um ::after transparente centrado no
   botão, no chip e no link, e 2px de borda transparente em cima e embaixo no
   campo e no select (que não aceitam pseudo-elemento), com o fundo recortado
   na borda. O ícone solto (17px) fica no centro de uma caixa de 44 sem fundo.
   Com mouse (pointer:fine) nada disto vale: o desktop fica como está. Link
   DENTRO de frase fica de fora, como o WCAG 2.5.8 permite. */
@media (pointer:coarse){
  :root{--d-control-h:2.5rem;--d-control-h-sm:2.5rem}
  /* altura FIXA de 40: com auto o botão esticava até a caixa de 44 do campo ao lado */
  .btn,.chip{min-height:0;height:2.5rem!important}
  .btn{min-width:2.5rem}
  /* a área invisível: 44×44 no mínimo, centrada no controle, sem fundo */
  .btn,.chip,.alvo-link,.ordenavel,.migalhas a,.lbl-linha>a,.seg a,.aba,button.aba,
  div>a[href]:only-child:not(.btn):not(.chip){position:relative}
  .btn::after,.chip::after,.alvo-link::after,.ordenavel::after,.migalhas a::after,
  .lbl-linha>a::after,.seg a::after,.aba::after,button.aba::after,
  div>a[href]:only-child:not(.btn):not(.chip)::after{content:"";position:absolute;
    left:50%;top:50%;width:max(100%,2.75rem);height:max(100%,2.75rem);
    transform:translate(-50%,-50%)}
  /* campo e select: 40 de desenho dentro de 44 de caixa */
  .inp,select,input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.inp *)){
    min-height:2.75rem;height:auto;border-top:2px solid transparent;
    border-bottom:2px solid transparent;background-clip:padding-box;outline-offset:-3px}
  .inp.err,.inp.ok,.inp.ro,.inp.modo:hover{outline-offset:-3px}
  .inp.focus,.inp.err.focus,input:not(.inp *):focus,select:focus{outline-offset:-4px}
  .inp>input{height:2.5rem}
  textarea{min-height:2.5rem}
  /* links de ação e abas: 40 de linha, 44 de alvo */
  div>a[href]:only-child:not(.btn):not(.chip),.ordenavel,.migalhas a,.lbl-linha>a,.seg a{
    display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem}
  .aba,button.aba{display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem}
  /* quem recorta ou cobre a área invisível: as migalhas (30px de faixa, e o
     <main> vem por cima), a faixa de chips que rola, e o rótulo com link */
  .migalhas{position:relative;z-index:2;height:auto;min-height:2.75rem}
  .pessoa-cab-chips{padding-block:2px}
  /* sem fundo, o botão fantasma pode ter a caixa inteira de 44: não há desenho a inflar */
  .btn.ghost,.seg a{min-width:2.75rem}
  .lbl-linha{min-height:2.75rem;align-items:center}
  summary,[role=button],[role=menuitem],.mi,.nav-mod,label.marc,.marc>label{min-height:2.75rem}
  .nav-item{display:flex;align-items:center;min-height:2.75rem}
  /* ícone clicável: a caixa cresce em volta do ícone, que não tem fundo */
  .acoes a,.acoes button:not(.btn),.acoes .btn.ghost,a.tip,.tip>button:not(.btn),.tip>.btn.ghost,.seta-bt,.estrela,button.fim,.limpar,.chip .x,
  .ic-topo,.funil>summary,.alvo-cx,span[role=button]{min-width:2.75rem;min-height:2.75rem;
    display:inline-grid;place-items:center}
  .campo>.fim{height:2.75rem}
  .pag>a,.pag>span,.pag .tip>span:not(.bolha),.pag .tip>a:not(.bolha){width:auto;
    min-width:2.75rem;height:2.75rem}
  a.marca{height:2.75rem;padding:.53125rem 0}
  /* a chave: o trilho de 30×17 vira desenho dentro de uma caixa de 44 */
  input[type=checkbox].sw{position:relative;display:block;width:2.75rem;height:2.75rem;
    padding:0;background:transparent!important}
  input[type=checkbox].sw::before{content:"";position:absolute;left:.4375rem;top:.84375rem;
    width:1.875rem;height:1.0625rem;border-radius:9999px;background:var(--linha)}
  input[type=checkbox].sw:checked::before{background:var(--acao)}
  input[type=checkbox].sw::after{position:absolute;top:calc(.84375rem + 2px);
    left:calc(.4375rem + 2px)}
  input[type=checkbox].sw:checked::after{left:calc(.4375rem + 1.875rem - 2px - .8125rem)}
  /* a caixa de marcar solta (fora de rótulo) ganha a mesma folga */
  input[type=checkbox].cx,input[type=radio].rd{margin:.875rem}
}

/* ---------- GRADES POR LARGURA (complemento do toque) -----------------------
   Os grids escritos no style das telas (59 em 26 templates, medido em 27/09)
   não têm corte: no celular a coluna do meio de «7rem 8rem 1fr auto» ficava
   com 22px e o campo dela, ilegível. Abaixo de 1024 todo grid inline do miolo
   vira uma coluna (no tablet a O.S. põe dois deles lado a lado, e a conta volta
   a espremer); quem precisa ficar em colunas (o mês da agenda) diz
   `fica-em-colunas`. No tablet os campos curtos da .grade ocupam meia linha
   e a lista repetível vai a duas colunas. */
@media (min-width:640px) and (max-width:1023.98px){
  .grade>.c1,.grade>.c2{grid-column:span 3}
  .lista-form .cab-cols{display:none}
  .lista-form .li{padding:.5rem 0;border-bottom:1px solid var(--linha-fina)}
  .lista-form .li>.campos{flex-basis:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.5rem .75rem}
  .lista-form .li>.campos>[data-rot]::before{content:attr(data-rot);display:block;
    font-size:var(--t-11);color:var(--txt-fraco);margin-bottom:.1875rem}
  .lista-form .li>.fim-li{margin-left:auto}
  .secao-form{padding-right:0}
}
@media (max-width:1023.98px){
  main [style*="grid-template-columns"]:not(.fica-em-colunas){grid-template-columns:1fr!important}
  main [style*="grid-template-columns"]:not(.fica-em-colunas)>*{grid-column:1/-1!important}
  #calendario,.rola-celular{overflow-x:auto}
  /* o balão de dica escondido (opacity 0) ainda alarga a área de rolagem e
     deixava arrastar o miolo 56px para o lado, no vazio (O.S., 390px) */
  .shell-corpo>main{overflow-x:hidden}
  .mes{grid-template-columns:repeat(7,minmax(2.75rem,1fr))}
}
@media (max-width:639.98px){
  /* a conversa em tela cheia: sem conversa aberta, a lista na largura toda.
     Com uma conversa aberta, a lista sai (volta-se a ela pela migalha) e o
     fio ocupa a altura da tela — barra (3,5rem), migalhas (2,75rem) e o
     respiro do miolo (3rem) —, com a caixa colada embaixo e a conversa
     rolando acima. Antes a caixa ficava no meio da tela, ou abaixo da dobra
     com o teclado aberto (medido em 393×852 e 393×500, 27/09). */
  .chat-cheio{flex-direction:column;height:auto;min-height:0}
  .chat-cheio-lista{width:auto;border-right:0;padding-right:0}
  .chat-cheio-vazio{display:none}
  .chat-cheio.com-fio{height:calc(100dvh - 9.25rem)}
  .chat-cheio.com-fio>.chat-cheio-lista{display:none}
}

/* ---------- COMPOR MENSAGEM NA LARGURA ESTREITA -----------------------------
   Com a gaveta cobrindo (< 1024) ou na conversa em tela cheia do celular, a
   composição é um CARTÃO com borda, como nos apps de chat: o campo «Escreva…»
   em cima, na largura toda, crescendo com o texto (static/chat.js); embaixo,
   dentro do mesmo cartão, os ícones à esquerda (câmera, microfone, anexo,
   O.S.) e o enviar quadrado à direita, na mesma linha. */
@media (max-width:1023.98px){
  .fio-caixa{flex-wrap:wrap;align-items:center;gap:.125rem;border-top:0;padding:.375rem;
    background:var(--sup-cartao);border-radius:var(--radius-lg);
    outline:1px solid var(--linha);outline-offset:-1px}
  .fio-caixa>.inp.escrever{order:1;flex:1 1 100%;min-width:0;outline:0;background:transparent;
    padding-left:.375rem}
  .fio-caixa>.inp.escrever:focus-within{outline:0}
  .fio-caixa:focus-within{outline:2px solid var(--foco);outline-offset:-2px}
  .fio-caixa>.tip:not(.dir),.fio-ferramentas>.tip{order:2}
  .fio-caixa>button.btn,.fio-caixa>.tip.dir{order:3;margin-left:auto}
}
/* no CELULAR (pedido do dono, 27/09) é a composição do WhatsApp: o «+», a
   caixa (uma pílula) e o enviar numa linha só, sem o cartão em volta. O «+»
   abre uma gaveta que sobe POR BAIXO da caixa — ela ocupa lugar, então a
   conversa sobe junto —: um painel na largura toda, com as ferramentas em
   ladrilhos redondos com rótulo, quatro por linha. O tablet fica com o
   cartão acima; fora do celular o contêiner das ferramentas nem existe para
   o layout (display:contents). */
.fio-ferramentas{display:contents}
.rot-ferramenta{display:none}
@media (max-width:639.98px){
  .fio-caixa{flex-wrap:wrap;align-items:center;gap:.375rem;padding:.5rem 0 0;
    background:none;outline:0;border-radius:0}
  .fio-caixa:focus-within{outline:0}
  /* o «+» como no WhatsApp: ícone de 24px com o traço dos outros, colado à
     caixa (o mesmo vão que há entre a caixa e o enviar), 40 de altura como
     ela; o alvo de 44 é a área invisível do .btn::after */
  .fio-caixa>button.fio-mais{order:1;flex-shrink:0;margin-left:0;width:1.5rem;min-width:0!important;
    height:2.5rem!important;padding:0;color:var(--txt-fraco)}
  .fio-caixa>button.fio-mais>svg{width:1.5rem;height:1.5rem}
  /* a caixa com o raio e a borda do nosso campo (.inp), 40 de desenho */
  .fio-caixa>.inp.escrever{order:2;flex:1 1 0;padding-left:.6875rem;background-color:var(--sup-cartao);
    background-clip:padding-box;
    outline:1px solid var(--linha-campo);outline-offset:-3px;border-radius:var(--radius-md)}
  .fio-caixa>.inp.escrever:focus-within{outline:2px solid var(--foco);outline-offset:-4px}
  .fio-caixa>.inp.escrever{padding-top:0;padding-bottom:0}
  .fio-caixa>.inp.escrever>textarea{min-height:2.5rem;padding:.625rem 0;box-sizing:border-box}
  .fio-caixa>button.btn:not(.fio-mais),.fio-caixa>.tip.dir{order:3;margin-left:0;flex-shrink:0}
  .fio-ferramentas{display:none}
  .fio-caixa.com-ferramentas>.fio-ferramentas{order:4;flex-basis:calc(100% + 1.5rem);display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.75rem;margin:.5rem -.75rem -.75rem;
    padding:1.25rem .5rem 1rem;background:var(--sup-rebaixada);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;animation:gaveta-sobe .16s ease-out}
  .fio-ferramentas>.tip{display:block;min-width:0}
  .fio-ferramentas>.tip>.bolha{display:none}
  .fio-ferramentas>.tip>.btn{width:100%;height:auto!important;flex-direction:column;
    gap:.5rem;padding:0;background:none;color:var(--txt-forte);white-space:normal}
  .fio-ferramentas>.tip>.btn>svg{width:3.5rem;height:3.5rem;padding:1.125rem;
    border-radius:9999px;background:var(--sup-cartao);color:var(--acao-texto)}
  .fio-ferramentas>.tip>.btn:disabled>svg{color:var(--txt-apagado)}
  .fio-ferramentas .rot-ferramenta{display:block;font-size:var(--t-12-5);
    font-weight:var(--font-weight-medium)}
  .fio-caixa.com-ferramentas>.fio-mais svg{transform:rotate(45deg)}
}
@keyframes gaveta-sobe{from{transform:translateY(.75rem);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .fio-ferramentas{animation:none!important} }

/* ---------- O CHAT REDESENHADO (prancha do chat, dia a dia rodada 1) -------
   A linha da lista e o cabeçalho do fio saíram do `style=` para classes: a
   gaveta continua com as mesmas medidas (as regras sem `.chat-cheio`), e a
   tela cheia as muda sem `!important`. */
.notif.conversa{padding:.5rem .75rem;text-decoration:none;color:inherit}
.notif.conversa>.retrato,.notif.conversa>.com-presenca>.retrato{width:2rem;height:2rem;
  font-size:var(--t-11)}
.conv-txt{flex:1;min-width:0}
.conv-linha{display:flex;gap:.375rem;align-items:baseline}
.conv-nome{font-size:var(--t-12-5);font-weight:var(--font-weight-medium);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-qdo{font-size:var(--t-9);color:var(--txt-apagado);flex-shrink:0}
.conv-prev{font-size:var(--t-11);color:var(--txt-fraco);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conv-mencao{padding:0 .3125rem;height:.9375rem;font-size:var(--t-9);margin-right:.25rem}
.conv-n{padding:0 .3125rem;min-width:1rem;height:1rem;justify-content:center;
  border-radius:9999px;align-self:center}
.fio-cab>.retrato,.fio-cab>.com-presenca>.retrato{width:1.875rem;height:1.875rem;
  font-size:var(--t-10)}
.fio-quem{flex:1;min-width:0}
.fio-nome{font-size:var(--t-13);font-weight:var(--font-weight-semibold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fio-sub{font-size:var(--t-10);color:var(--txt-fraco)}
/* `.balao` é também o nome da ficha da escolha múltipla (mais abaixo, 1,75rem
   de altura, uma linha só, `span` sem quebra) — e ela vinha por cima do
   balão do chat: mensagem longa saía cortada numa pílula, na gaveta e na
   tela cheia. Aqui o balão da conversa volta a ser o da conversa. */
.chat-msg>.balao{display:block;height:auto;max-width:78%;padding:.4375rem .625rem;
  font-size:var(--t-12-5);font-weight:400;line-height:1.5;outline:0;gap:0}
.chat-msg>.balao.midia{display:flex;padding:.25rem;max-width:min(20rem,70vw);gap:.25rem}
.chat-msg>.balao>span{overflow:visible;text-overflow:clip;white-space:normal}
.chat-msg>.balao>.transcricao{white-space:pre-wrap}

/* A tela cheia: lista e conversa num CARTÃO só, com altura fixa — a lista de
   20rem à esquerda (busca, abas da folha, conversas, pé) e o fio à direita
   (cabeçalho, balões sobre o fundo da página, caixa com as ferramentas). */
.chat-cheio{gap:0;background:var(--sup-cartao);border-radius:var(--raio);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;overflow:hidden}
.chat-cheio-lista{width:20rem;padding-right:0;border-right:1px solid var(--linha-fina)}
.chat-lista-topo{padding:1rem 1rem .25rem;flex-shrink:0}
.chat-lista-topo .inp{gap:.5rem}
.chat-lista-topo .inp>svg{flex-shrink:0;color:var(--txt-fraco)}
.chat-cheio-lista>.abas[data-abas]{padding:0 1rem;gap:1.25rem;flex-shrink:0}
.chat-lista-rola{flex:1;overflow:auto;min-height:0;padding:.5rem}
.chat-cheio-lista>.pe{padding:.75rem 1rem;border-top:1px solid var(--linha-fina)}
.chat-cheio-lista>.cab{padding:0 1rem}
.chat-cheio .notif.conversa{padding:.625rem;gap:.625rem;border-radius:var(--raio)}
.chat-cheio .notif.conversa>.retrato,
.chat-cheio .notif.conversa>.com-presenca>.retrato{width:2.25rem;height:2.25rem;
  font-size:var(--f-13)}
.chat-cheio .conv-nome{font-size:var(--f-14);color:var(--txt-forte)}
.chat-cheio .conv-qdo{font-size:var(--f-12)}
.chat-cheio .conv-prev{font-size:var(--f-13)}

/* os balões da tela cheia: o próprio no azul claro da seleção, o dos outros
   no branco do cartão com a linha fina; a hora (e os tiques) numa linha
   própria embaixo, à direita. O que era claro sobre o azul forte (menção,
   transcrição, anexo, tique lido) volta às cores do fundo claro. */
.chat-cheio .balao{border-radius:var(--raio);color:var(--txt-forte)}
.chat-cheio .balao:not(.midia){max-width:min(32rem,85%);padding:.5rem .75rem;
  font-size:var(--f-14);line-height:1.45}
.chat-cheio .balao.deles{background:var(--sup-cartao);outline:1px solid var(--linha-fina);
  outline-offset:-1px}
.chat-cheio .balao.meu{background:var(--sup-selecionada)}
.chat-cheio .balao .rodape{display:flex;justify-content:flex-end;margin:.125rem 0 0}
.chat-cheio .balao .hora{font-size:var(--f-12);opacity:1;color:var(--txt-apagado)}
.chat-cheio .balao.meu .tiques.lida{color:var(--acao-texto)}
.chat-cheio .balao.meu .mencao{background:var(--sup-cartao);color:var(--txt-marca)}
.chat-cheio .balao.meu .transcricao,.chat-cheio .balao.meu .chat-anexo{background:var(--sup-cartao)}
.chat-cheio .balao.meu .transcricao>.rot{color:var(--txt-apagado);opacity:1}
.chat-cheio .balao.meu .chat-anexo>.ic{color:var(--txt-fraco)}
.chat-cheio .balao.meu .chat-anexo .t{color:var(--txt-apagado);opacity:1}
.chat-cheio .chat-msg>.quem{font-size:var(--f-12)}
.chat-cheio .fio-msgs>.dia{align-self:center;font-size:var(--f-12);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--txt-fraco);background:var(--sup-cartao);
  border-radius:9999px;padding:.125rem .75rem;outline:1px solid var(--linha-fina);
  outline-offset:-1px}

@media (min-width:640px){
  .chat-cheio .fio-cab{padding:.75rem 1rem;margin-bottom:0}
  .chat-cheio .fio-cab>.retrato,.chat-cheio .fio-cab>.com-presenca>.retrato{
    width:2.25rem;height:2.25rem;font-size:var(--f-13)}
  .chat-cheio .fio-nome{font-size:var(--f-14)}
  .chat-cheio .fio-sub{font-size:var(--f-12)}
  .chat-cheio .fio>.alerta,.chat-cheio .fio-busca{margin:.5rem 1rem}
  .chat-cheio .fio-msgs{padding:1.25rem 1.5rem;gap:.5rem;background:var(--sup-pagina)}
  .chat-cheio .fio-os,.chat-cheio .fio-midia{margin:.5rem 1rem 0}
  .chat-cheio .fio>.note{border-top:1px solid var(--linha-fina)}
}
@media (min-width:640px) and (max-width:1023.98px){
  .chat-cheio .fio-caixa{margin:.75rem 1rem}
}
/* no computador as ferramentas (Foto · Áudio · Anexo · O.S.) ficam à
   esquerda da caixa, na mesma linha, e o Enviar é o botão azul */
@media (min-width:1024px){
  .chat-cheio .fio-caixa{margin-top:0;padding:.75rem 1rem;gap:.25rem;align-items:flex-end}
  .chat-cheio .fio-caixa .btn.icon{width:2.5rem;height:2.5rem}
  .chat-cheio .fio-caixa .inp.escrever{min-height:2.5rem;padding-top:.5rem;margin-left:.25rem}
}
/* no celular, como hoje: /chat/ é a lista (no cartão, de altura inteira) e a
   conversa aberta ocupa a tela sem cartão em volta, com a composição do
   WhatsApp do bloco acima */
@media (max-width:639.98px){
  .chat-cheio-lista{width:auto;border-right:0}
  /* o retrato com o ponto da presença encostava no nome (o `gap:0` do
     cabeçalho no celular só previa o retrato sem ponto) */
  .fio-cab>.com-presenca{margin-right:.5rem}
  .chat-cheio:not(.com-fio){min-height:calc(100dvh - 9.25rem)}
  .chat-cheio:not(.com-fio)>.chat-cheio-lista{flex:1}
  .chat-cheio.com-fio{background:none;outline:0;border-radius:0;overflow:visible}
  .chat-cheio.com-fio .fio-msgs{padding:.5rem 0;gap:.375rem}
}

/* ---------- A BUSCA NO CELULAR E NO TABLET: GAVETA QUE DESCE DO TOPO --------
   A lupa abre a MESMA busca global como uma gaveta que desce de cima: o campo
   no topo, os resultados embaixo, até 85 % da altura, com véu atrás; tocar no
   véu ou no ✕ fecha (static/shell.js). Com dedo, as dicas de teclado
   (↑ ↓ navegar · ↵ abrir · esc fechar) saem: não há teclado para cumpri-las. */
@media (max-width:1023.98px){
  .busca-aberta .busca-global{position:fixed;top:0;left:0;right:0;bottom:auto;z-index:100;
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,auto);
    align-items:center;gap:.25rem;max-height:85vh;padding:.5rem .375rem .5rem 1rem;
    background:var(--sup-cartao);border-radius:0 0 var(--radius-xl) var(--radius-xl);
    box-shadow:var(--sombra-janela)}
  .busca-aberta .busca-global .paleta{position:static;grid-column:1/-1;align-self:stretch;
    width:auto;max-width:none;max-height:none;min-height:0;overflow-y:auto;border-radius:0;
    box-shadow:none;outline:0;margin:0 -.375rem 0 -1rem;background:var(--sup-cartao)}
  .busca-aberta .busca-global .paleta>.lista{max-height:none;overflow:visible}
  .busca-aberta .busca-global .paleta .res{min-height:2.75rem}
  .busca-aberta .veu-shell{inset:0}
}
@media (pointer:coarse){ .paleta>.pe,.paleta .kbd,.busca-global .kbd{display:none} }

/* ---------- AS TELAS FORA DO SHELL NO CELULAR (< 640) -----------------------
   A porta (entrar, código, trancada, senha provisória, esqueci a senha, troca
   de senha) tinha o cartão com largura fixa — 22rem, e 25rem na trancada — e
   a 390px ele passava da borda: na trancada, a pílula «sessão trancada»
   ficava cortada. Aqui o cartão cabe na tela, o cabeçalho da trancada quebra
   linha, e os seis dígitos do código dividem a linha. */
@media (max-width:639.98px){
  .porta{padding:1rem}
  .login{width:min(100%,22rem)}
  .login.larga{width:min(100%,25rem)}
  .trancada-cab{flex-wrap:wrap;row-gap:.5rem}
  .otp{gap:.25rem;justify-content:space-between}
  .otp>input{flex:1;min-width:0;max-width:3rem}
  .tabela-simples{width:100%;table-layout:fixed}
  .tabela-simples td,.tabela-simples th{overflow-wrap:anywhere}
}
@media (pointer:coarse){
  .otp>input{min-width:2.75rem}
  .login .elo{position:relative;display:inline-flex;align-items:center;min-height:2.5rem}
  .login .elo::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,2.75rem);
    height:max(100%,2.75rem);transform:translate(-50%,-50%)}
}

/* ---------- A PORTA COM A BARRA MARINHO (Fase 3c) ---------------------------
   Entrar, código, trancada, senha provisória, esqueci e troca de senha, a
   licença bloqueada, os erros, sem conexão e manutenção: a barra marinho no
   topo com o logo branco (--barra*, os valores da Station), e embaixo a tela.
   No desktop o cartão fica centrado sob a barra (o dono autorizou mudar o
   desktop SÓ nestas telas); no celular e no tablet a tela é cheia, sem cartão
   flutuando. O topo do cartão é o logotipo da Spidea alinhado à esquerda
   (.porta-marca, o desenho de antes da 3c): a ilustração grande que a 3c pôs
   ali saiu (pedido do dono, 29/09) porque empurrava o formulário e obrigava a
   rolar. O .porta-ilus abaixo continua sendo a base da tag {% ilustracao %},
   que a captura, o tablet, o totem e a assinatura usam com moldura própria. */
.porta{display:flex;flex-direction:column;place-items:initial;min-height:100vh;padding:0}
.porta-barra{height:3.5rem;flex-shrink:0;display:flex;align-items:center;padding:0 1.25rem;
  background:var(--barra);color:var(--barra-txt)}
.porta-barra-marca{display:flex;align-items:center;height:2.75rem}
.porta-barra-marca img{height:1.5rem;width:auto;display:block}
.porta-miolo{flex:1;display:grid;place-items:center;padding:2rem 1.5rem}
/* a trancada é irmã da tela de entrar: mesma largura de cartão (22rem)
   (pedido do dono, 27/09) */
.porta .login.larga{width:22rem}
.porta-ilus{display:flex;justify-content:center;width:fit-content;margin:0 auto 1.125rem;
  padding:.75rem;border-radius:1.125rem;background:var(--sup-rebaixada)}
.porta-ilus>svg{width:7.5rem;height:7.5rem;display:block}
.login.estado{width:28rem;padding:1.75rem 1.5rem 1.5rem}
.login.estado .pag-estado{height:auto;padding:0}
.login.documento{width:min(56rem,100%);padding:1.5rem}
.login.documento>h1{margin-top:0}
@media (max-width:1023.98px){
  .porta-barra{padding:0 1rem}
  .porta-miolo{display:block;padding:0;background:var(--sup-cartao)}
  .porta .login,.porta .login.larga,.porta .login.estado,.porta .login.documento{width:100%;
    max-width:none;min-height:calc(100vh - 3.5rem);border-radius:0;box-shadow:none;outline:0;
    padding:1.5rem 1.25rem 2rem}
  .porta .login.larga{padding:0 0 2rem}
  .porta .login:not(.documento)>*{max-width:30rem;margin-inline:auto}
  /* a caixa larga não tem respiro próprio: o logo ganha o recuo do .miolo. O
     respiro de cima é padding da caixa, não margem do logo — margem somada ao
     min-height da tela cheia fazia a página rolar 24px */
  .porta .login.larga{padding-top:1.5rem}
  .porta .login.larga>.porta-marca{margin-top:0;padding-inline:1.25rem}
}
/* a marca fica só na barra marinho, no celular e no computador: o logo de
   dentro do cartão repetia o da barra e sai (pedido do dono, 29/09) */
.porta .porta-marca,.porta .login.larga>.porta-marca{display:none}

/* ---------- A BARRA MARINHO EM TODO O APP (Fase 4) --------------------------
   A barra do topo passa ao marinho das pranchas (--barra*), no desktop e no
   celular, com o logo branco nos dois temas. O que vive nela se ajusta ao fundo
   escuro: ícones em --barra-fraco (e --barra-txt ao passar o ponteiro), a busca
   do desktop como campo translúcido (--barra-campo) entre os ícones, o
   avatar com fundo translúcido e o nome em branco. Contadores seguem cheios
   (vermelho e azul, texto branco). A altura continua 3,5rem (56px, a da porta
   e a da prancha do celular), porque os encaixes do celular contam com ela.
   Na lateral, o item ativo fica azul-claro com texto azul, como na prancha. */
.shell-topo{background:var(--barra);color:var(--barra-txt);box-shadow:inset 0 -1px 0 var(--barra-linha)}
.shell-topo .marca .logo.clara{display:none}
.shell-topo .marca .logo.escura{display:block}
.shell-topo .ic-topo,.shell-topo .topo-bt{color:var(--barra-fraco)}
.shell-topo .ic-topo:hover,.shell-topo .ic-topo.on,.shell-topo .topo-bt:hover{color:var(--barra-txt)}
.shell-topo .marca{order:-2}
.busca-global>.inp.busca-inp{width:17.5rem;height:2.5rem;background:var(--barra-campo);
  color:var(--barra-fraco);outline:1px solid var(--barra-contorno);outline-offset:-1px;
  font-size:var(--t-14)}
.busca-global>.inp.busca-inp input{color:var(--barra-txt)}
.busca-global>.inp.busca-inp input::placeholder{color:var(--barra-fraco)}
.busca-global>.inp.busca-inp .kbd{background:transparent;color:var(--barra-fraco);
  outline:1px solid var(--barra-tecla);outline-offset:-1px}
.busca-global>.inp.busca-inp .limpar{color:var(--barra-fraco)}
/* a busca ENTRE os ícones, como no desenho antigo (dono, 29/09 — revoga a do centro, 28/09):
   a marca à esquerda e o bloco todo encostado à direita em .topo-dir — a conversa e o sino,
   a busca, a agenda, a fila e o avatar. A largura do campo é a do desenho antigo (17,5rem);
   os resultados abrem sob o campo, presos à borda direita dele. O nome na barra tem teto e
   reticências: inteiro, ele está no menu do avatar. No celular e no tablet o .topo-dir não
   faz caixa. */
.topo-dir{display:flex;align-items:center;gap:.75rem;justify-content:flex-end;min-width:0}
@media (min-width:1024px){
  .topo-dir{flex:1}
  .topo-dir>.topo-avatar .topo-quem{max-width:11rem}
  .topo-dir>.topo-avatar .topo-quem>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:1023.98px){ .topo-dir{display:contents} }
.topo-dir>.topo-avatar>summary .retrato{background:var(--barra-avatar)!important;color:var(--barra-txt)!important}
.topo-dir>.topo-avatar>summary .topo-quem>span:first-child{color:var(--barra-txt)}
.topo-dir>.topo-avatar>summary .topo-quem>span:last-child{color:var(--barra-fraco)!important}
.topo-dir>.topo-avatar>summary .seta{color:var(--barra-fraco)}
.shell-topo .soma-avisos{box-shadow:0 0 0 2px var(--barra)}
/* o que ABRE a partir da barra (resultados da busca, painel do avatar com o
   posto e o «Agora», menus) é superfície de cartão: repõe a cor do texto e a
   dos ícones, senão herda o branco e o --barra-fraco da barra (branco sobre
   branco no claro, achado do dono 27/09). */
.shell-topo .paleta,.shell-topo .suspenso>.menu,.shell-topo .menu{color:var(--txt-forte)}
.shell-topo .menu .ic-topo,.shell-topo .menu .topo-bt{color:var(--txt-fraco)}
.shell-topo .menu .ic-topo:hover,.shell-topo .menu .ic-topo.on{color:var(--txt-forte)}
.shell-topo .menu .ic-topo .rot-agora{color:var(--txt-forte)}
/* contador: vermelho CHEIO com o texto do par medido (--sobre-er), nos dois temas;
   o --er-icone do escuro é claro demais para texto branco (2,77) */
.ic-topo .conta{background:var(--er-cheio);color:var(--sobre-er)}
.soma-avisos{background:var(--er-cheio);color:var(--sobre-er)}
/* dado secundário sobre o item destacado e sobre o rebaixado: o apagado não
   chega a 4,5 lá (4,44 e 4,40); o fraco chega */
.paleta .filho .dado,.med .par .rot-med{color:var(--txt-fraco)}
@media (max-width:1023.98px){
  /* no celular a busca aberta é a gaveta clara de cima: volta ao campo do app */
  .busca-aberta .busca-global>.inp.busca-inp{width:auto;background:var(--sup-rebaixada);
    color:var(--txt-fraco);outline-color:var(--linha-campo)}
  .busca-aberta .busca-global>.inp.busca-inp input{color:var(--txt-forte)}
  .busca-aberta .busca-global>.inp.busca-inp input::placeholder{color:var(--txt-apagado)}
}

/* ---------- CAMPOS: recuo, anel de foco, seta e ícone à direita (Fase 4) ----
   Pedidos do dono sobre a ficha (27/09). Três causas medidas: o <input> de
   dentro da caixa .inp herdava o recuo de campo (11px) e somava com o da
   caixa — o texto começava em 22px, contra 11 no select; o mesmo <input> tem
   outline:0 e a caixa só reagia à CLASSE .focus, que ninguém põe — o anel de
   foco só aparecia no select, que não tem caixa; e o display:flex que a folha
   dá a todo <input> encostava o calendário do campo de data no texto.
   Agora: todo controle começa o texto no mesmo recuo; o anel de foco é o
   mesmo (2px, --foco) em campo solto, na caixa .inp (:focus-within), na do
   chat e na da busca; a seta do select e o ícone da data e da hora são da
   folha — 16px, centrados, a 12px da borda direita —, com recuo à direita
   para o texto nunca passar por baixo. */
.inp>input,.inp>select,.inp>textarea{padding-left:0;padding-right:0;flex:1;min-width:0}
.inp:focus-within{outline:2px solid var(--foco);outline-offset:-2px}
select,select.inp{appearance:none;-webkit-appearance:none;background-image:var(--ic-seta);
  background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem 1rem;
  padding-right:2.5rem}
/* `.inp>select` herda o `background:transparent` da regra da caixa .inp — um atalho que volta
   background-repeat a `repeat` e background-size a `auto` —, então aqui a seta repõe os dois:
   sem isso ela se repetia na largura toda do campo (varredura visual de 28/09, item 2). */
.inp>select{background-image:var(--ic-seta);background-repeat:no-repeat;background-size:1rem 1rem;
  background-position:right 0 center;padding-right:1.75rem}
select[multiple],select[size]:not([size="1"]){background-image:none;padding-right:.6875rem}
input[type=date],input[type=time],input[type=datetime-local]{display:block}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{margin-left:auto;width:1rem;height:1rem;padding:0;
  cursor:pointer;background:var(--ic-calendario) center/1rem 1rem no-repeat;color:transparent;opacity:1}
input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--ic-relogio)}
input[type=date]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit{padding:0}
/* a reserva de 40px à direita é do ícone de estado (.fim: erro, ok, o olho da
   senha): só existe quando ele existe — sem ele, o texto e o calendário da data
   vão até o recuo normal de 12px */
.campo>.inp{padding-right:.6875rem}
.campo:has(>.fim)>.inp{padding-right:2.5rem}
@media (pointer:coarse){ .inp:focus-within{outline-offset:-4px} }

/* ---------- O ESTADO DE ERRO DO CAMPO (Fase 4) --------------------------------
   O das pranchetas (folha/_form.py): contorno de 2px em --er-icone, o ícone de
   alerta dentro da caixa e a mensagem embaixo em --er-texto, com ícone. Vale
   para o erro que vem do servidor (.err, aria-invalid) e para o do navegador
   (:user-invalid — o obrigatório vazio ou o formato errado, depois que a
   pessoa sai do campo ou tenta gravar), sem esperar o envio. Com foco, o anel
   fica vermelho. O .ok é o contorno de campo com o ✓; o foco passa por cima. */
.inp.err,select.err,input.err,textarea.err,[aria-invalid="true"]:not(.inp>*),
.inp:has(>[aria-invalid="true"]),
input:user-invalid:not(.inp>*),select:user-invalid,textarea:user-invalid,.inp:has(>:user-invalid){
  outline:2px solid var(--er-icone);outline-offset:-2px;color:var(--txt-forte)}
.inp.err:focus-within,.inp:has(>[aria-invalid="true"]):focus-within,.inp:has(>:user-invalid):focus-within,
select.err:focus,[aria-invalid="true"]:not(.inp>*):focus,select:user-invalid:focus{
  outline:2px solid var(--er-icone);outline-offset:-2px;box-shadow:0 0 0 3px var(--er-fundo)}
.inp>.ic-erro{display:flex;flex-shrink:0;color:var(--er-icone)}
.inp>.ic-erro>svg{width:1rem;height:1rem}
.bad{display:flex;align-items:flex-start;gap:.375rem;color:var(--er-texto);font-size:var(--t-12-5)}
.bad>svg{width:.9375rem;height:.9375rem;flex-shrink:0;margin-top:.0625rem;color:var(--er-icone)}
.inp.ok{outline:1px solid var(--linha-campo);outline-offset:-1px}
.resumo-erros{margin-bottom:.875rem;align-items:center}
.resumo-erros .resumo-txt{flex:1;min-width:0}
.resumo-erros .resumo-ir{flex-shrink:0}
.ficha-abas+.resumo-erros{margin-top:.75rem}
@media (max-width:639.98px){ .resumo-erros{flex-wrap:wrap} .resumo-erros .resumo-txt{flex-basis:calc(100% - 2.5rem)} .resumo-erros .resumo-ir{margin-left:1.875rem} }
.resumo-erros .d a{color:var(--er-texto);text-decoration:underline;text-underline-offset:2px}
@media (pointer:coarse){
  .inp.err,.inp:has(>[aria-invalid="true"]),.inp:has(>:user-invalid),select.err,select:user-invalid{outline-offset:-4px}
}

/* ---------- PENDÊNCIAS DA FASE 3 NO DESENHO NOVO (Fase 4) --------------------
   O cabeçalho da trancada deixa a faixa cinza: fica no fundo do cartão, com o
   avatar no azul-claro da seleção, o nome em 16 e o cargo em 13, separado do
   resto por linha fina — como o «quem» do painel do avatar. */
.trancada-cab{background:transparent;border-radius:0;padding:1rem 1.25rem}
.trancada-cab>.retrato{background:var(--sup-selecionada);color:var(--txt-marca)}
.trancada-cab .n{font-size:var(--t-16)}
.trancada-cab .c{font-size:var(--t-13)}
/* com dedo, o contorno do campo era outline puxado 3px para dentro — e ficava
   2px para dentro também dos lados, que não têm borda invisível. Vira sombra
   interna, que começa onde o fundo começa: 40px de desenho, sem recuo lateral.
   A cor e a espessura vêm de dois tokens que cada estado troca. */
@media (pointer:coarse){
  .inp,select,input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.inp *)){
    outline:0!important;box-shadow:inset 0 0 0 var(--campo-fio,1px) var(--campo-cor,var(--linha-campo))}
  .inp:focus-within,select:focus,input:not(.inp *):focus{--campo-fio:2px;--campo-cor:var(--foco)}
  .inp.ro{--campo-cor:var(--linha-forte)}
  .inp.dis,input[disabled]{--campo-cor:var(--linha-fina)}
  .inp.err,select.err,input.err,[aria-invalid="true"]:not(.inp>*),.inp:has(>[aria-invalid="true"]),
  input:user-invalid:not(.inp>*),select:user-invalid,.inp:has(>:user-invalid){--campo-fio:2px;--campo-cor:var(--er-icone)}
  .busca-global>.inp.busca-inp{--campo-cor:var(--barra-contorno)}
  .busca-aberta .busca-global>.inp.busca-inp{--campo-cor:var(--linha-campo)}
  .fio-caixa>.inp.escrever{--campo-cor:var(--linha-campo)}
  .fio-caixa>.inp.escrever:focus-within{--campo-fio:2px;--campo-cor:var(--foco)}
}
/* a lista no celular pela prancha «Pessoas-Celular»: o número de filtros ativos
   no «Ordenar e filtrar», a direção dita em palavra (Crescente/Decrescente), e
   a barra da seleção com o ✕ e a contagem à esquerda e as ações como botões */
.folha-conta{min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;
  display:inline-grid;place-items:center;background:var(--acao);color:var(--txt-sobre-acao);
  font-size:var(--t-12);font-weight:var(--font-weight-semibold);margin-left:.125rem}
.folha-sentido{margin-top:.5rem}
.folha-chips .chip.on{background:var(--sup-selecionada);color:var(--acao-texto);outline-color:var(--acao)}
.folha-chips .chip>svg{width:.875rem;height:.875rem}
@media (max-width:639.98px){
  .barra-lote{padding:.5rem .75rem;gap:.5rem;background:var(--sup-cartao);
    box-shadow:0 -1px 0 var(--linha-fina)}
  .barra-lote>.tip:last-child{order:-1}
  .barra-lote>.tip:last-child .ac{background:none;outline:0;padding:0}
  .barra-lote>div[style*="flex:1"]{display:none}
  .barra-lote .cont{margin-right:auto}
  .barra-lote form .ac,.barra-lote>.ac,.barra-lote>.tip:not(:last-child) .ac{height:2.5rem;padding:0 .875rem;
    border-radius:var(--raio);background:var(--sup-cartao);color:var(--txt-forte);
    outline:1px solid var(--linha);outline-offset:-1px}
}

/* ---------- NADA MAIS LARGO QUE O CONTÊINER (Fase 4, achado do dono 27/09) ---
   Em «Meu perfil» os campos do certificado (DN, hash) passavam do cartão, os
   três botões do segundo fator se sobrepunham e a lista dos meios ficava 92px
   para fora — escondida pelo overflow:hidden do cartão. Regra geral:
   - a coluna da grade é minmax(0,1fr): o conteúdo longo não alarga a coluna;
   - campo e caixa nunca passam do pai; texto sem espaço quebra no só-leitura;
   - grupo de botões QUEBRA LINHA em vez de espremer; no celular o rótulo
     quebra dentro do botão (nunca corta nem vaza);
   - o campo focado rola para cima da barra fixa do fim do formulário. */
.grade{grid-template-columns:repeat(6,minmax(0,1fr))}
.grade>*,.grid>*,.campo,.secao-form>*{min-width:0}
.inp,select,textarea,input:not([type=checkbox]):not([type=radio]){max-width:100%}
div.inp.ro{height:auto;min-height:var(--d-control-h);overflow-wrap:anywhere;
  white-space:normal;padding-block:.5rem;line-height:1.35}
.btn{max-width:100%}
:is(div,form,footer,section,nav,span,p):has(>.btn~.btn,>.btn~form,>form~.btn,>form~form>.btn,>.btn~.tip>.btn){flex-wrap:wrap}
:is(div,form,footer,section,nav,span,p):has(>.btn~.btn,>.btn~form,>form~.btn)>.btn{flex-shrink:0}
@media (max-width:1023.98px){
  .lista-form{margin-right:0}
  .lista-form .li{flex-wrap:wrap}
  .lista-form .li>.fim-li{width:auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  main{scroll-padding-bottom:5rem}
}
@media (max-width:639.98px){
  .grid,.grade{grid-template-columns:minmax(0,1fr)}
  .btn{white-space:normal;text-align:center;overflow-wrap:anywhere;height:auto!important;
    min-height:2.5rem;line-height:1.25;padding-block:.375rem}
}

/* ---------- ARQUIVO: OS DOIS COMPONENTES DE UPLOAD (Fase 4, 27/09) -----------
   SIMPLES (molde/_arquivo.html): uma linha no desenho do campo — o botão
   «Escolher arquivo» nosso, o nome com o tamanho e o ✕. DETALHADO
   (molde/_arquivos.html): a área tracejada da prancheta «Upload» e a lista
   `.arq`. Nos dois, o <input type="file"> cobre a área inteira, transparente:
   clicar ou soltar chega ao próprio input; o anel de foco, o erro e o
   «arquivo passando por cima» são os mesmos dos outros campos. */
.arquivo{position:relative;display:flex;align-items:center;gap:.625rem;
  min-height:var(--d-control-h);padding:0 .25rem;border-radius:var(--raio);
  background:var(--sup-cartao);outline:1px solid var(--linha-campo);outline-offset:-1px;
  max-width:100%;min-width:0}
.arquivo>.arquivo-in,.solta.arquivos>.arquivo-in{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;margin:0;padding:0;border:0;opacity:0;cursor:pointer;z-index:1;font-size:0}
.arquivo .arquivo-bt{flex-shrink:0;pointer-events:none;height:2rem!important;min-height:0;
  padding:0 .75rem;white-space:nowrap}
.arquivo .arquivo-bt::after{content:none}
.arquivo .arquivo-bt>svg{width:.9375rem;height:.9375rem}
.arquivo-nome{flex:1;min-width:0;font-size:var(--t-13);color:var(--txt-fraco);line-height:1.3;
  padding-block:.25rem;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden}
.arquivo.tem .arquivo-nome,.arquivo.tem-atual .arquivo-nome{color:var(--txt-forte)}
.arquivo-x,.arq-tirar{position:relative;z-index:2;display:grid;place-items:center;flex-shrink:0;
  width:2rem;height:2rem;border:0;padding:0;background:none;color:var(--txt-fraco);
  border-radius:var(--radius-md);cursor:pointer}
.arquivo-x:hover,.arq-tirar:hover{color:var(--txt-forte);background:var(--sup-hover)}
.arquivo-x>svg,.arq-tirar>svg{width:1rem;height:1rem}
.arquivo-x[hidden]{display:none}
.arquivo:focus-within,.solta.arquivos:focus-within{outline:2px solid var(--foco);outline-offset:-2px}
.arquivo.sobre,.solta.arquivos.sobre{outline:2px dashed var(--acao);outline-offset:-2px;
  background:var(--acao-suave)}
.arquivo.err,.arquivo:has(>.arquivo-in:user-invalid),
.solta.arquivos.err,.solta.arquivos:has(>.arquivo-in:user-invalid){outline:2px solid var(--er-icone);outline-offset:-2px}
.arquivo.err:focus-within,.solta.arquivos.err:focus-within{box-shadow:0 0 0 3px var(--er-fundo)}
.solta.arquivos{position:relative;display:flex;flex-direction:column;align-items:center;gap:.375rem;
  padding:1.25rem 1rem;border-radius:var(--raio);background:var(--sup-pagina);
  outline:1px dashed var(--linha-campo);outline-offset:-1px}
.solta-ic{display:flex;color:var(--txt-fraco)}
.solta-ic>svg{width:1.375rem;height:1.375rem}
.solta-t{font-size:var(--t-13);color:var(--txt-forte)}
.solta-link{color:var(--link)}
.solta-d{font-size:var(--t-12);color:var(--txt-fraco)}
.arq-lista{display:flex;flex-direction:column;margin-top:.625rem}
.arq-lista:empty{display:none}
.arq .ic{font-size:var(--t-10);font-weight:var(--font-weight-semibold)}
.arq-corpo{flex:1;min-width:0}
.arq .prog{margin-top:.375rem}
.arq .prog[hidden]{display:none}
.arq.erro .meta{color:var(--er-texto)}
@media (max-width:639.98px){
  /* no celular o botão fica só com o clipe: a linha inteira é o alvo, e o
     nome escolhido (com o tamanho) ganha o espaço */
  .arquivo .arquivo-bt{width:2rem;padding:0}
  .arquivo .arquivo-bt>.rot{display:none}
}
@media (pointer:coarse){
  /* 40 de desenho, 44 de alvo: o input passa 2px para cima e para baixo */
  .arquivo>.arquivo-in{inset:-2px 0;height:auto;min-height:0;border:0}
  .arquivo-x,.arq-tirar{width:2.5rem;height:2.5rem}
  .arquivo-x::after,.arq-tirar::after{content:"";position:absolute;left:50%;top:50%;
    width:2.75rem;height:2.75rem;transform:translate(-50%,-50%)}
}

/* ---------- O INSTRUMENTO NOVO NAS TELAS NOVAS (Fase 4, 27/09) --------------
   Com o «recortado» (o que passa do pai com overflow hidden) e as 64 telas de
   Configurações e de usuário na medida, apareceu o que o miolo com
   overflow-x:hidden escondia abaixo de 1024:
   - grid inline de uma coluna com 1fr crescia até a tabela de dentro;
   - tabela solta mais larga que o cartão: rola dentro do próprio pai;
   - linhas de status, medidas, segmentado e cabeçalho da seção quebram;
   - no celular o mês da agenda (7 × 44) pede menos folga no cartão. */
@media (max-width:1023.98px){
  main [style*="grid-template-columns"]:not(.fica-em-colunas){grid-template-columns:minmax(0,1fr)!important}
  .card,.svc,main [style*="grid-template-columns"]>*{min-width:0}
  main :is(div,section,form):has(>table:not(.lc-tabela)){overflow-x:auto;max-width:100%}
  .svc-cab,.med,.seg{flex-wrap:wrap}
  .seg{max-width:100%}
}
@media (max-width:639.98px){
  /* só linha: coluna com wrap mede a linha pelo conteúdo e alarga o cartão */
  main div[style*="display:flex"]:not([style*="nowrap"]):not([style*="column"]){flex-wrap:wrap}
  .duas,.tres{grid-template-columns:minmax(0,1fr)!important}
  .duas>*,.tres>*,.pilha>*{min-width:0}
  .card>.body:has(.mes){padding-inline:.5rem}
}
/* toque: os alvos que faltavam na lista (links nas células das tabelas de
   Configurações, ícones de ação, a chave de botão, o título-link do cartão,
   o endereço do painel, o menu da ficha do usuário e o × solto) */
@media (pointer:coarse){
  main td a:not(.btn):not(.chip),a.acoes,button.sw,a.tit,a.link,button.x{position:relative}
  main td a:not(.btn):not(.chip)::after,a.acoes::after,button.sw::after,a.tit::after,
  a.link::after,button.x::after{content:"";position:absolute;left:50%;top:50%;
    width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
  a.cfg-item{display:flex;align-items:center;min-height:2.75rem}
  /* a linha do arquivo como os outros campos: 40 de desenho em 44 de caixa
     (bordas transparentes), com o contorno por box-shadow inset — o input
     transparente não invade o botão de baixo */
  .arquivo{border-top:2px solid transparent;border-bottom:2px solid transparent;
    background-clip:padding-box;min-height:2.75rem;outline:0!important;
    box-shadow:inset 0 0 0 var(--campo-fio,1px) var(--campo-cor,var(--linha-campo))}
  .arquivo>.arquivo-in{inset:-2px 0}
  .arquivo:focus-within{--campo-fio:2px;--campo-cor:var(--foco)}
  .arquivo.err,.arquivo:has(>.arquivo-in:user-invalid){--campo-fio:2px;--campo-cor:var(--er-icone)}
  .arquivo.sobre{--campo-fio:2px;--campo-cor:var(--acao)}
}
/* pílula com frase longa (o aviso do Serpro em Configurações · Facial, 1440):
   nunca passa do pai — o texto quebra dentro dela */
.badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* as duas e três colunas também no tablet e no desktop: a coluna não cresce
   pela tabela de dentro (Configurações · Integrações, 768: +86px) */
.duas{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.duas.igual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
/* botão não encolhe abaixo do rótulo: quem cede é o campo ao lado (Uptime, 768) */
.btn{flex-shrink:0}
@media (pointer:coarse){
  /* onde a área invisível esbarra no vizinho ou é recortada pelo pai, a caixa
     de 44 é de verdade: ícones de ação lado a lado, título-link do cartão,
     endereço do painel/totem, links em célula e em parágrafo */
  a.acoes{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem}
  a.tit,a.link{display:inline-flex;align-items:center;min-height:2.75rem}
  main td a:not(.btn):not(.chip){display:inline-flex;align-items:center;justify-content:center;
    min-width:2.75rem;min-height:2.75rem}
  main p a:not(.btn):not(.chip),main .desc a{position:relative}
  main p a:not(.btn):not(.chip)::after,main .desc a::after{content:"";position:absolute;left:50%;top:50%;
    width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
  td:has(>button.sw),td:has(>.tip>button.sw){height:2.75rem}
  .arquivo>.arquivo-in,.solta.arquivos>.arquivo-in{z-index:0}
}
@media (pointer:coarse){
  /* linhas com a chave: 44 de altura, senão a área de uma cobre a da vizinha */
  :is(div,li):has(>form>button.sw,>button.sw){min-height:2.75rem}
  /* link solto no meio do texto (sem classe): área de 44 */
  main a:not([class]){position:relative}
  main a:not([class])::after{content:"";position:absolute;left:50%;top:50%;
    width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
  select{min-width:2.75rem}
  .seg{overflow:visible}
}
@media (pointer:coarse){
  .seg{row-gap:.25rem}
  tr:has(button.sw)>td{padding-block:.25rem}
}
@media (pointer:coarse){
  /* a chave ocupa 44 de caixa: quando a linha quebra, o que desce não encosta nela */
  form:has(>button.sw){min-height:2.75rem;align-items:center}
}
@media (max-width:1023.98px){
  /* a tabela que rola no próprio pai toma a largura do conteúdo: não espreme
     a célula até o select virar 28px (Configurações · IA, 390) */
  main :is(div,section,form):has(>table:not(.lc-tabela))>table:not(.lc-tabela){width:max-content;min-width:100%}
}

/* ---------- FASE 4b (27/09) ------------------------------------------------ */
/* o aviso suave do CPF gravado que não fecha na conta, acima do cabeçalho */
.alerta.cpf-torto{margin-bottom:.75rem}

/* link de TEXTO (Fase 4b): cor --link, peso normal, sem sublinhado em
   repouso (nem nos cartões de lista) e sublinhado no ponteiro e no foco.
   Botão, chip, item de menu e cartão-link não entram: têm o próprio estado. */
a:not([class]),a.link,a.tit,a.alvo-link,td a:not(.btn):not(.chip),.migalhas a,.solta-link,
.login .elo,.login details.recuperacao>summary{font-weight:inherit}
:is(a:not([class]),a.link,a.tit,a.alvo-link,td a:not(.btn):not(.chip),.migalhas a,.login .elo,
  .login details.recuperacao>summary):is(:hover,:focus-visible){text-decoration:underline;
  text-underline-offset:.1875rem;text-decoration-thickness:1px;opacity:1}
/* cartões numa grade (ou na pilha, que já tem gap) alinham pelo topo: a
   margem de «cartão depois de cartão» é do fluxo empilhado, não da grade
   (Início: o 2º e o 3º cartão desciam 16px — dono, 27/09) */
:is(.duas,.tres,.pilha,.grid,.grade,[style*="display:grid"],[style*="display: grid"])>.card{margin-top:0}
/* cabeçalho da conversa de grupo no celular: retrato, nome e quatro ícones
   de 44 não cabiam em 342px com a folga entre eles (+5px, 390). Com dedo o
   alvo de 44 já separa os ícones; o nome cede com reticências. */
@media (max-width:639.98px){
  .fio-cab{gap:0}
  .fio-cab>.retrato{margin-right:.5rem}
  .fio-cab>div{flex:1;min-width:0;overflow:hidden}
  .fio-cab>div>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- NAVEGAÇÃO (Fase 4c, canvas páginas 7 e 8, rodada 7) ------------
   Uma regra só nos três níveis e nos três lugares (a barra, a coluna de
   Configurações e a gaveta do celular):
   - módulo, grupo e item em 14px (15 no celular), peso 400, texto forte;
   - ícone do módulo de 20px, em texto forte; o do grupo num quadradinho
     24×24 rebaixado;
   - o item preso a uma guia vertical de 1,5px (--linha-forte);
   - selecionado: fundo --sup-selecionada, cor de ação e peso 500; o módulo
     ativo (e o grupo pai do item de agora) leva o traço de 3px e a cor,
     sem fundo;
   - cinza só em contagem, seta, metadado e «Recolher menu». */
.shell-lado{width:17rem;padding:.75rem .75rem .5rem;gap:0;overflow:visible}
.lado-n1,.lado-n2{display:flex;flex-direction:column;min-height:0;flex:1}
.lado-n2{display:none}
.nav-filtro{padding:0 0 .75rem;flex-shrink:0}
.nav-filtro .inp{height:2.5rem;gap:.5rem}
.nav-filtro .inp>svg{width:1.125rem;height:1.125rem;color:var(--txt-fraco);flex-shrink:0}
.nav-filtro input::-webkit-search-cancel-button{cursor:pointer}
.shell-lado .nav,.grupos-config .nav{flex:1;min-height:0;overflow-y:auto;display:flex;
  flex-direction:column;gap:.125rem;margin:0 -.75rem;padding:0 .75rem}
.nav-mod{display:flex;align-items:center;gap:.75rem;min-height:2.5rem;width:100%;
  padding:0 .625rem;border:0;background:none;font:inherit;font-size:var(--f-14);
  font-weight:400;line-height:1.3;color:var(--txt-forte);text-align:left;
  border-radius:var(--raio);cursor:pointer;text-decoration:none;position:relative}
.nav-mod:hover{background:var(--sup-hover);color:var(--txt-forte);text-decoration:none}
.nav-ic{display:flex;color:var(--txt-forte);flex-shrink:0}
.nav-ic>svg{width:1.25rem;height:1.25rem}
.nav-ic-g{width:1.5rem;height:1.5rem;display:grid;place-items:center;flex-shrink:0;
  border-radius:.375rem;background:var(--sup-rebaixada);color:var(--txt-forte)}
.nav-ic-g>svg{width:1rem;height:1rem}
.nav-nome{flex:1;min-width:0}
.nav-mod>.seta{display:flex;flex-shrink:0;color:var(--txt-fraco);transition:transform .12s ease}
.nav-mod>.seta>svg{width:1rem;height:1rem}
.nav-grupo.aberto>.nav-mod>.seta{transform:rotate(90deg)}
.nav-conta{margin-left:auto;flex-shrink:0;font-size:var(--f-12);color:var(--txt-fraco);
  font-variant-numeric:tabular-nums}
.nav-meta{font-size:var(--f-12);color:var(--txt-fraco);margin-left:.375rem}
.nav-meta::before{content:"· "}
/* o módulo ativo e o grupo pai do item de agora: traço de 3px e cor, sem fundo */
.nav-mod.on{color:var(--acao-texto);background:none;font-weight:400}
.nav-mod.on:hover{background:var(--sup-hover)}
.nav-mod.on .nav-ic,.nav-mod.on .nav-ic-g{color:var(--acao-texto)}
.nav-mod.on::before{content:"";position:absolute;left:-.75rem;top:.375rem;bottom:.375rem;
  width:3px;border-radius:0 3px 3px 0;background:var(--acao)}
.nav-grupo:not(.aberto)>.nav-itens{display:none}
.nav-grupo[hidden]{display:none}
/* os itens presos à guia que desce do ícone do pai */
.nav-itens{position:relative;display:flex;flex-direction:column;gap:.125rem;
  margin:.125rem 0 .375rem 1.25rem;padding-left:.75rem}
.nav-itens::before{content:"";position:absolute;left:0;top:.125rem;bottom:.125rem;
  width:1.5px;background:var(--linha-forte)}
.nav-g+.nav-itens{margin-left:1.375rem}
.nav-item{display:flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.375rem .625rem;
  font-size:var(--f-14);font-weight:400;line-height:1.3;color:var(--txt-forte);
  border-radius:var(--raio);text-decoration:none}
.nav-item:hover{background:var(--sup-hover);color:var(--txt-forte);text-decoration:none}
.nav-item.on{background:var(--sup-selecionada);color:var(--acao-texto);font-weight:500}
.nav-item.dis{color:var(--txt-apagado);cursor:not-allowed}
.nav-item[hidden]{display:none}
.nav-item mark,.nav-mod mark{background:var(--av-suave);color:inherit;border-radius:2px;padding:0 1px}
/* a seção das telas de configuração que casam com o filtro do menu */
.nav-em-config{margin-top:.5rem}
.nav-em-config[hidden]{display:none}
.nav-rotulo{padding:.5rem .625rem .25rem;font-size:var(--f-12);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-fraco)}
.nav-em-config>.nav-itens{margin-left:.625rem}
.nav-vazio{padding:.5rem .625rem;font-size:var(--f-13);color:var(--txt-fraco)}
.nav-vazio[hidden]{display:none}
.nav-nada{padding:.5rem .625rem;line-height:1.5}
/* embaixo, separado por linha: Configurações (item único) e «Recolher menu» */
.nav-pe{flex-shrink:0;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--linha-fina);
  display:flex;flex-direction:column;gap:.125rem}
.recolher{display:flex;align-items:center;gap:.75rem;min-height:2.25rem;padding:0 .625rem;
  border-radius:var(--raio);font-size:var(--f-13);color:var(--txt-fraco);text-decoration:none}
.recolher>svg{width:1rem;height:1rem}
.recolher:hover{background:var(--sup-hover);color:var(--txt-forte);text-decoration:none}

/* o trilho: a barra recolhida e a área de Configurações — só ícones, com dica */
.nav-trilho{display:none;flex:1;flex-direction:column;align-items:center;gap:.25rem}
.shell-lado.rec{width:4rem;padding:.75rem .5rem;align-items:stretch}
.trilho-bt{width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border-radius:var(--raio);color:var(--txt-forte);position:relative}
.trilho-bt>svg{width:1.25rem;height:1.25rem}
.trilho-bt:hover{background:var(--sup-hover)}
.trilho-bt.on{background:var(--sup-selecionada);color:var(--acao-texto)}
.trilho-bt.on::before{content:"";position:absolute;left:-.5rem;top:.5rem;bottom:.5rem;
  width:3px;border-radius:0 3px 3px 0;background:var(--acao)}
.trilho-pe{margin-top:auto;width:100%;padding-top:.5rem;border-top:1px solid var(--linha-fina);
  display:flex;flex-direction:column;align-items:center;gap:.25rem}
.trilho-tip>.bolha{left:calc(100% + .5rem);right:auto;top:50%;bottom:auto;
  transform:translateY(-50%);white-space:nowrap;text-align:left;line-height:1.35}
.trilho-tip>.bolha::after{left:auto;right:100%;top:50%;
  transform:translate(50%,-50%) rotate(45deg)}
@media (min-width:1024px){
  .shell-lado.rec>.lado-n1{display:none}
  .shell-lado.rec>.nav-trilho{display:flex}
}

/* a coluna de Configurações: filtro e grupos em sanfona de um só, com contagem;
   a tela abre à direita, com a migalha «Configurações › Grupo» */
.coluna-config{width:20rem;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  padding:.75rem;background:var(--sup-cartao);box-shadow:1px 0 0 var(--linha-cartao);
  position:relative;z-index:29}
.grupos-config{display:flex;flex-direction:column;min-height:0;flex:1}

/* celular e tablet: a mesma barra é a gaveta do ⋮, com dois níveis */
@media (max-width:1023.98px){
  .coluna-config,.nav-trilho{display:none!important}
  .shell-lado.rec{width:auto;padding:.5rem .75rem}
  .modulos-abertos .shell-lado{width:min(21rem,88vw);overflow:hidden}
  .shell-lado .lado-n1,.shell-lado .lado-n2{flex:1;min-height:0}
  .shell-lado[data-nivel="2"]>.lado-n1{display:none}
  .shell-lado[data-nivel="2"]>.lado-n2{display:flex;animation:gaveta-entra-dir .16s ease}
  .shell-lado[data-nivel="1"]>.lado-n1{animation:gaveta-entra-esq .16s ease}
  .modulos-abertos .lado-cab{font-size:var(--f-18)}
  .lado-cab2{display:flex;align-items:center;justify-content:space-between;padding:0 0 .25rem}
  .volta-mod{display:inline-flex;align-items:center;gap:.25rem;min-height:2.75rem;padding:0 .5rem;
    border:0;background:none;font:inherit;font-size:var(--f-nav-movel);color:var(--link);cursor:pointer}
  .volta-mod>svg{width:1.125rem;height:1.125rem}
  .lado-tit{padding:.25rem .625rem .75rem;font-size:var(--f-20);font-weight:var(--font-weight-semibold);
    color:var(--txt-forte)}
  .shell-lado .nav-mod,.shell-lado .nav-item{min-height:2.75rem;font-size:var(--f-nav-movel)}
  .nav-pe .nav-config{background:var(--sup-selecionada);color:var(--acao-texto)}
  .nav-pe .nav-config .nav-ic{color:var(--acao-texto)}
  .nav-pe .nav-config::before{display:none}
  .recolher{display:none}
}
@media (prefers-reduced-motion:reduce){
  .shell-lado>.lado-n1,.shell-lado>.lado-n2{animation:none!important}
}
@keyframes gaveta-entra-dir{from{transform:translateX(1.5rem);opacity:0}to{transform:none;opacity:1}}
@keyframes gaveta-entra-esq{from{transform:translateX(-1.5rem);opacity:0}to{transform:none;opacity:1}}
/* «Em Configurações»: nome e grupo correm como texto (o grupo em cinza depois) */
.nav-em-config .nav-item{display:block;line-height:1.35}
.nav-em-config .nav-nome{display:inline}
.nav-em-config .nav-item[hidden]{display:none}
/* a área de Configurações deixa o miolo mais estreito no desktop (o trilho e a
   coluna ocupam 384px): coluna de grid não cresce pelo conteúdo, e a tabela
   larga rola dentro do próprio pai (Cargos, Finalidades, 1440) */
main [style*="grid-template-columns"]>*,.duas>*,.tres>*{min-width:0}
.com-coluna main :is(div,section,form):has(>table:not(.lc-tabela)){overflow-x:auto;max-width:100%}
.com-coluna main :is(div,section,form):has(>table:not(.lc-tabela))>table:not(.lc-tabela){min-width:100%}
/* a mesma regra vale em qualquer largura para a tabela solta num cartão de .duas/.tres: a
   coluna do grid tem metade (ou um terço) do miolo, e a tabela que não cabe rola dentro do
   próprio cartão em vez de passar por baixo do vizinho (Relatório do dia, «Por fila» sob
   «Por guichê» a 1440 — varredura visual de 28/09, item 3) */
:is(.duas,.tres) :is(div,section,form):has(>table:not(.lc-tabela)){overflow-x:auto;max-width:100%}
/* o anel de foco da casa em todo controle da navegação (o padrão do navegador
   não é o --foco e some no fundo selecionado) */
:is(.nav-mod,.nav-item,.trilho-bt,.volta-mod,.recolher,.shell-lado .ic-topo,.nav-pe .nav-config):focus-visible{
  outline:2px solid var(--foco);outline-offset:-2px}

/* PARA USO FUTURO: a fonte monoespaçada saiu de todo o app (pedido do dono,
   Fase 5). Números, CPF, protocolo, selo e hash usam a fonte do app, com
   dígitos tabulares onde alinham em coluna. Nada usa esta classe hoje
   (nucleo.tests_sem_mono). */
.mono{font-family:var(--mono)}

/* ---------- ABAS: O COMPONENTE (Fase 5, molde/_abas.html + static/abas.js) --
   O selecionado na regra da navegação: cor de ação, peso 500 e o traço de
   3px embaixo. Contagem em pílula cinza; o contador de erro, vermelho. No
   celular a lista rola na horizontal (sem barra) e a aba ativa fica à vista.
   Na impressão todas as abas saem — o papel não tem aba. */
.abas[data-abas]{gap:1.5rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.abas[data-abas]::-webkit-scrollbar{display:none}
.abas[data-abas]>.aba{display:inline-flex;align-items:center;gap:.375rem;flex-shrink:0;
  min-height:2.75rem;padding:0 .125rem;font-size:var(--f-14);font-weight:400;
  color:var(--txt-forte);box-shadow:none;position:relative}
.abas[data-abas]>.aba:hover{color:var(--acao-texto)}
.abas[data-abas]>.aba.on{color:var(--acao-texto);font-weight:500;
  box-shadow:inset 0 -3px 0 var(--acao)}
.abas[data-abas]>.aba .ct{margin-left:0;padding:.0625rem .4375rem;font-size:var(--f-12);
  font-weight:500;background:var(--sup-rebaixada);color:var(--txt-fraco)}
.abas[data-abas]>.aba.on .ct{background:var(--sup-selecionada);color:var(--acao-texto)}
.abas[data-abas]>.aba .ct.err{background:var(--er-cheio);color:var(--sobre-er)}
.abas[data-abas]>.aba .ct[hidden]{display:none}
.abas[data-abas]>.aba:focus-visible{outline:2px solid var(--foco);outline-offset:-2px;
  border-radius:var(--radius-sm)}
.aba-painel[hidden]{display:none}
.aba-painel:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
@media print{
  .abas[data-abas]{display:none}
  .aba-painel[hidden]{display:block!important}
}

/* ---------- FICHA DE PESSOA EM ABAS (Fase 5) -------------------------------- */
.ficha-abas{margin:.25rem 0 .875rem;background:var(--sup-cartao);border-radius:var(--raio);
  padding:0 1rem;box-shadow:var(--sombra-cartao,none);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.ficha-abas>.abas{border-bottom:0}
.ficha-painel{display:flex;flex-direction:column;gap:.75rem}
/* a casca da ficha CCN (frente T0, 29/10/2026): o ponto amarelo da aba com
   alteração não gravada, a barra «Gravar» da aba que grava sozinha e o aviso
   de três saídas ao trocar de aba (prancha TrocaDeAba) */
.aba-pendente{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--av);
  margin-left:.375rem;vertical-align:middle;flex-shrink:0}
.aba-pendente[hidden]{display:none}
.aba-barra{position:sticky;bottom:0;z-index:2;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  padding:.75rem 1rem;background:var(--sup-cartao);border-radius:var(--raio);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;box-shadow:var(--sombra-cartao,none)}
.aba-barra>.espaco{flex:1}
.aba-barra form{display:inline;margin:0}
.aba-barra-txt{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--t-13);color:var(--txt-fraco)}
.aba-barra-txt svg{width:1rem;height:1rem}
.troca-dialogo{border:0;border-radius:var(--radius-lg);box-shadow:var(--sombra-janela);padding:1.5rem;
  width:calc(100% - 2rem);max-width:34rem;background:var(--sup-cartao);color:var(--txt-forte)}
.troca-dialogo::backdrop{background:var(--veu)}
.troca-form{display:flex;flex-direction:column;gap:.875rem;margin:0}
.troca-t{display:flex;gap:.75rem;align-items:center;margin:0;font-size:var(--t-18);font-weight:650;line-height:1.3}
.troca-t .ic{display:flex;color:var(--av);flex-shrink:0}
.troca-mudou{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .875rem;border-radius:var(--radius-md);
  background:var(--sup-rebaixada);font-size:var(--t-13-5);line-height:1.45;overflow-wrap:anywhere}
.troca-d{margin:0;font-size:var(--t-13-5);line-height:1.5;color:var(--txt-fraco)}
.troca-acoes{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:639.98px){ .troca-dialogo{padding:1rem} .troca-acoes>.btn{flex:1 1 auto} .aba-barra>.espaco{flex-basis:100%;height:0} }
/* a aba Histórico: as O.S. em que a pessoa figura (prancha Historico) */
.svc-cab .ct-cab{margin-left:.25rem;padding:.0625rem .375rem;border-radius:9999px;font-size:var(--t-11);
  background:var(--sup-rebaixada);color:var(--txt-fraco);font-variant-numeric:tabular-nums}
.hist-filtros{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}
.hist-filtros>.espaco{flex:1}
.hist-chip{text-decoration:none;color:var(--txt-forte);background:transparent;cursor:pointer}
.hist-chip.on{background:var(--sup-selecionada);outline-color:var(--acao);color:var(--txt-marca)}
.hist-chip .hist-n{color:var(--txt-fraco);font-variant-numeric:tabular-nums}
.hist-chip.on .hist-n{color:inherit}
.hist-busca{margin:0;width:16.25rem;max-width:100%}
.hist-busca-caixa{gap:.4375rem;height:2rem;font-size:var(--t-12-5)}
.hist-busca-caixa>svg{flex-shrink:0;color:var(--txt-fraco)}
.hist-busca-caixa>input{flex:1;min-width:0}
.hist-pilula{white-space:nowrap}
.aba-barra form[hidden]{display:none}
.aba-barra .btn:disabled{opacity:.5;cursor:default;pointer-events:none}
/* o cabeçalho da ficha não empurra a página para o lado (Design, 29/10/2026):
   o menu do CCN fechado não ocupa lugar, e a pílula da situação não encolhe */
.ccn-botao:not([open])>.ccn-menu{display:none}
.pessoa-cab-nome>.badge{white-space:nowrap;flex-shrink:0}
/* o rascunho de outra pessoa, numa linha (o ponto e a barra contam o seu) */
.rascunho-alheio{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem;
  padding:.625rem .875rem;border-radius:var(--raio);background:var(--av-suave);color:var(--sobre-av-suave);font-size:var(--t-13)}
.rascunho-alheio>.espaco{flex:1}
.rascunho-alheio form{display:inline;margin:0}
.hist-tabela{border-radius:var(--radius-md);outline:1px solid var(--linha-fina);outline-offset:-1px;overflow:hidden}
.hist-os{display:inline-flex;align-items:center;height:1.75rem;padding:0 .625rem;border-radius:9999px;
  background:var(--sup-selecionada);color:var(--txt-marca);font-weight:600;letter-spacing:.06em;text-decoration:none}
.hist-tipo{font-weight:var(--font-weight-semibold)}
.hist-fraco{color:var(--txt-fraco)}
.hist-pe{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.625rem .875rem;
  border-top:1px solid var(--linha-fina);font-size:var(--t-12-5);color:var(--txt-fraco)}
@media (max-width:639.98px){ .hist-busca{width:100%} .hist-filtros>.espaco{display:none} }
/* no celular cada O.S. empilha: código e situação; o tipo; papel, data e quem
   abriu em cinza (Design, 29/10/2026). O corte é o das listas-cartão da casa
   (.lc-tabela, 640 px), que já tira a tabela do max-content */
@media (max-width:639.98px){
  .hist-tabela thead{display:none}
  .hist-tabela table,.hist-tabela tbody{display:block}
  .hist-tabela table,.hist-tabela tbody{width:100%;min-width:0;overflow:visible}
  .hist-tabela tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:.375rem;row-gap:.3125rem;
    padding:.75rem .875rem;border-bottom:1px solid var(--linha-fina)}
  .hist-tabela td{display:block;padding:0;border:0;min-width:0}
  .hist-tabela .hc-os{order:1}
  .hist-tabela .hc-sit{order:2}
  .hist-tabela .hc-abrir{order:3;margin-left:auto}
  .hist-tabela .hc-tipo{order:4;flex-basis:100%}
  .hist-tabela .hc-papel{order:5}
  .hist-tabela .hc-data{order:6}
  .hist-tabela .hc-por{order:7;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hist-tabela .hc-papel,.hist-tabela .hc-data,.hist-tabela .hc-por{font-size:var(--t-12-5)}
  .hist-tabela .hc-data::before,.hist-tabela .hc-por::before{content:"· "}
}
/* a aba Cartão (prancha FichaCCN-Cartao): os quatro dados em linha, e abaixo a
   assinatura ao lado do histórico. Empilha abaixo de 1024 px; no celular os
   dados vão de dois em dois e cada evento empilha como no Histórico */
.cart-bloco+.cart-bloco{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--linha-fina)}
.cart-cab{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center;margin-bottom:.875rem}
.cart-tit{font-size:var(--f-15);font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.cart-cab .espaco{flex:1}
.cart-cab form{display:inline;margin:0}
.cart-acoes{display:flex;flex-wrap:wrap;gap:.5rem}
.cart-dados{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.875rem 1.5rem;margin:0}
.cart-dados dt{font-size:var(--t-12);font-weight:var(--font-weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-fraco);margin-bottom:.25rem}
.cart-dados dd{margin:0;font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.cart-grade{display:grid;grid-template-columns:22.5rem minmax(0,1fr);gap:1.5rem;margin-top:1.5rem}
.cart-grade .cart-tit{display:block;margin-bottom:.625rem}
.cart-assinatura{display:flex;align-items:center;justify-content:center;min-height:8.5rem;padding:1.5rem;
  border-radius:var(--radius-lg);background:var(--sup-cartao);outline:1px solid var(--linha-fina);outline-offset:-1px}
.cart-assinatura img{max-width:100%;max-height:7rem;display:block}
/* a imagem guardada é tinta escura em fundo claro: no escuro o traço fica claro sobre a superfície, como na prancha */
.tema-escuro .cart-assinatura img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.cart-sem-assinatura{color:var(--txt-fraco);text-align:center}
.cart-nota{margin-top:.5rem;font-size:var(--t-12-5);line-height:1.5;color:var(--txt-fraco)}
.cart-tabela{border-radius:var(--radius-md);outline:1px solid var(--linha-fina);outline-offset:-1px;overflow:hidden}
@media (max-width:1023.98px){ .cart-grade{grid-template-columns:minmax(0,1fr)} }
@media (max-width:639.98px){
  .cart-dados{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-acoes{width:100%;flex-direction:column}
  .cart-acoes .btn{width:100%}
  .cart-tabela thead{display:none}
  .cart-tabela table,.cart-tabela tbody{display:block;width:100%;min-width:0;overflow:visible}
  .cart-tabela tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:.375rem;row-gap:.3125rem;
    padding:.75rem .875rem;border-bottom:1px solid var(--linha-fina)}
  .cart-tabela td{display:block;padding:0;border:0;min-width:0}
  .cart-tabela .cc-oque{order:1;flex:1 1 calc(100% - 6rem);font-weight:var(--font-weight-semibold)}
  .cart-tabela .cc-data,.cart-tabela .cc-selo,.cart-tabela .cc-por{font-size:var(--t-12-5);color:var(--txt-fraco)}
  .cart-tabela .cc-os{order:2;flex:0 0 5rem;text-align:right}
  .cart-tabela .cc-data{order:3}.cart-tabela .cc-selo{order:4}.cart-tabela .cc-por{order:5}
  .cart-tabela .cc-selo:empty{display:none}
  .cart-tabela .cc-selo:not(:empty)::before,.cart-tabela .cc-por:not(:empty)::before{content:"· "}
}
/* as faixas do topo da ficha (sigilo, restrição, falecimento): uma linha cada,
   o «Ver em Restrições» à direita, como na prancha */
.alerta[data-faixa]{align-items:center;margin-bottom:.5rem}
.alerta[data-faixa] .faixa-txt{flex:1;min-width:0}
.alerta[data-faixa] .faixa-linha{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.alerta[data-faixa] .t{font-size:var(--f-14)}
.alerta[data-faixa] .d{color:var(--txt-forte);opacity:1;font-size:var(--f-13);line-height:1.45;margin-top:.1875rem}
.alerta[data-faixa] .faixa-meta{color:var(--txt-fraco)}
.faixa-ver{flex-shrink:0;font-size:var(--f-13);color:var(--link);align-self:center}
@media (max-width:639.98px){ .alerta[data-faixa]{flex-wrap:wrap} .alerta[data-faixa] .faixa-txt{flex-basis:calc(100% - 2.5rem)} .faixa-ver{margin-left:1.875rem} }
/* no toque, o «Ver em Restrições» é alvo de 44 px (a medida de sempre) */
@media (pointer:coarse){ .faixa-ver{display:inline-flex;align-items:center;min-height:2.75rem} }
/* o acordeão das seções (Restrições, Anotações, Observações, Falecimento) */
.svc[data-acordeao]>.svc-cab{cursor:pointer}
.svc[data-acordeao]>.svc-cab .ic{transition:transform .12s ease}
.svc[data-acordeao].fechado>.svc-cab .ic{transform:rotate(-90deg)}
.svc[data-acordeao]>.svc-cab:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.svc-cab .tit{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pilula-conta{display:inline-flex;align-items:center;padding:.0625rem .4375rem;border-radius:9999px;
  font-size:var(--f-12);font-weight:500;background:var(--sup-rebaixada);color:var(--txt-fraco)}
.sub-rotulo{margin:.75rem 0 .375rem;font-size:var(--f-12);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-fraco)}
.sub-rotulo .note{text-transform:none;letter-spacing:0}
.form-falecimento>.sub-rotulo:first-of-type{margin-top:0}
/* o botão dividido do CCN no cabeçalho da ficha: o estado à esquerda, a seta à
   direita — as duas metades abrem o mesmo menu (enviar não é um clique solto) */
.ccn-botao{position:relative}
.ccn-dividido{display:inline-flex;align-items:stretch;height:var(--d-control-h);list-style:none;
  border-radius:var(--raio);background:var(--sup-cartao);outline:1px solid var(--linha);
  outline-offset:-1px;cursor:pointer;font-size:var(--f-14);color:var(--txt-forte)}
.ccn-dividido::-webkit-details-marker{display:none}
.ccn-principal{display:inline-flex;align-items:center;gap:.5rem;padding:0 .75rem}
.ccn-principal>svg{width:1.125rem;height:1.125rem}
.ccn-seta{display:inline-flex;align-items:center;padding:0 .5rem;border-left:1px solid var(--linha);color:var(--txt-fraco)}
.ccn-seta>svg{width:1rem;height:1rem}
.ccn-dividido:hover{background:var(--sup-hover)}
.ccn-dividido:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.ccn-botao[open]>.ccn-dividido{outline-color:var(--acao)}
.ccn-botao>.ccn-menu{position:absolute;right:0;left:auto;top:calc(100% + .375rem);width:min(25rem,92vw);z-index:60;padding:0}
.ccn-cab{padding:.875rem 1rem;border-bottom:1px solid var(--linha-fina)}
.ccn-cab-linha{display:flex;gap:.5rem;align-items:center;justify-content:space-between;font-size:var(--f-14)}
.ccn-cab-d{margin-top:.375rem;font-size:var(--f-13);line-height:1.45;color:var(--txt-fraco)}
.ccn-item{display:flex;gap:.75rem;padding:.875rem 1rem;margin:0}
.ccn-item+.ccn-item{border-top:1px solid var(--linha-fina)}
.ccn-ic{display:flex;color:var(--txt-forte);padding-top:.125rem}
.ccn-ic>svg{width:1.125rem;height:1.125rem}
.ccn-txt{flex:1;min-width:0}
.ccn-t{font-size:var(--f-14);font-weight:500}
.ccn-d{font-size:var(--f-13);line-height:1.45;color:var(--txt-fraco);margin-top:.125rem}
.ccn-bt{margin-top:.5rem}
.ccn-pe{padding:.75rem 1rem;border-top:1px solid var(--linha-fina);font-size:var(--f-12);line-height:1.45;color:var(--txt-fraco)}
@media (max-width:639.98px){ .ccn-botao>.ccn-menu{right:auto;left:0} }
/* a aba Documentos única (proposta 3c): cada documento é um acordeão com o
   resumo na linha de cima; aberto, os campos, os arquivos e o soltar */
.docs-cab{display:flex;align-items:center;gap:.5rem;margin-bottom:.625rem;flex-wrap:wrap}
.docs-tit{font-size:var(--f-16);font-weight:600}
.docs-ct{font-size:var(--f-13);color:var(--txt-fraco)}
.docs-acoes{margin-left:auto;display:flex;gap:.5rem}
.doc-acc>.svc-cab{align-items:flex-start}
.doc-acc>.svc-cab>.doc-seta{margin-top:.125rem}
.doc-res{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}
.doc-tit{font-size:var(--f-14);font-weight:600;color:var(--txt-forte)}
.doc-num{font-weight:400;font-variant-numeric:tabular-nums;margin-left:.25rem}
.doc-meta{font-size:var(--f-13);color:var(--txt-fraco)}
.doc-res>.doc-venc{margin-top:.125rem;font-size:var(--f-13)}
.doc-lado{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.doc-arqs>svg{width:.875rem;height:.875rem}
.doc-acc.vencido{outline-color:var(--er-linha)}
.doc-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.625rem .75rem}
.doc-regua{margin-top:.625rem;padding:.5rem .625rem;border-radius:var(--radius-md);background:var(--sup-rebaixada)}
.doc-regua-t{font-size:var(--f-12);color:var(--txt-fraco);margin-bottom:.4375rem}
.doc-arq-t{margin:.875rem 0 .375rem;font-size:var(--f-12);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-fraco)}
.arq-cartoes{list-style:none;margin:0 0 .5rem;padding:0}
.arq-cartoes>.arq{margin-bottom:.375rem}
.arq-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.arq-acoes{display:flex;align-items:center;gap:.375rem;flex-shrink:0}
.arq-ligar>.menu{width:16rem}
.doc-envio .solta{padding:1rem}
.doc-novo{margin:.25rem 0 .75rem}
.doc-novo>summary{list-style:none;display:inline-flex;cursor:pointer}
.doc-novo>summary::-webkit-details-marker{display:none}
.doc-novo>form{margin-top:.625rem;padding:.75rem;border-radius:var(--radius-lg);background:var(--sup-cartao);
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.doc-novo-pe{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin-top:.625rem}
@media (max-width:639.98px){
  .doc-acc>.svc-cab{flex-wrap:wrap}
  .doc-lado{width:100%;padding-left:1.625rem}
  .arq{flex-wrap:wrap} .arq-acoes{width:100%;justify-content:flex-end}
}

/* ---------- SELEÇÃO MÚLTIPLA COM BALÕES (molde/_multipla.html) -------------
   O <select multiple> nativo é a verdade e aparece sem script; com o script
   (.viva) ele some e a caixa de balões aparece por cima. Foco, erro e só
   leitura são os da caixa (.inp) da Fase 4. No celular a lista é folha de
   baixo, com véu e «Pronto». */
.multipla{position:relative}
.multipla.viva>.multipla-nativo{display:none}
.multipla:not(.viva)>.multipla-caixa,.multipla:not(.viva)>.multipla-folha,
.multipla:not(.viva)>.multipla-veu{display:none}
.multipla-nativo{height:auto;padding:.25rem}
.multipla-caixa{height:auto;min-height:var(--d-control-h);flex-wrap:wrap;gap:.3125rem;
  padding:.3125rem 2rem .3125rem .375rem;cursor:text}
.campo>.multipla>.multipla-caixa{padding-right:2rem}
.multipla-baloes{display:contents;list-style:none;margin:0;padding:0}
.multipla-caixa.dis{display:flex;list-style:none;margin:0}
.balao{display:inline-flex;align-items:center;gap:.3125rem;height:1.75rem;max-width:100%;
  padding:0 .25rem 0 .5rem;border-radius:var(--radius-md);background:var(--sup-rebaixada);
  color:var(--txt-forte);font-size:var(--f-13);font-weight:500;
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.multipla-caixa.dis .balao{padding-right:.5rem}
.balao>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balao-ic{width:1.125rem;height:.8125rem;border-radius:2px;flex-shrink:0;object-fit:cover}
.balao-x{display:inline-flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;
  border:0;border-radius:var(--radius-sm);background:none;color:var(--txt-fraco);cursor:pointer;padding:0}
.balao-x>svg{width:.875rem;height:.875rem}
.balao-x:hover{background:var(--sup-hover);color:var(--txt-forte)}
.balao-x:focus-visible{outline:2px solid var(--foco);outline-offset:0}
.multipla-caixa>.multipla-busca{flex:1;min-width:6rem;height:1.75rem;padding:0 .25rem;
  outline:0;background:transparent;border:0}
.multipla-caixa>.multipla-busca:focus{outline:0}
.multipla-seta{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);display:flex;
  color:var(--txt-fraco);pointer-events:none}
.multipla-seta>svg{width:1rem;height:1rem}
.multipla.aberta .multipla-seta{transform:translateY(-50%) rotate(180deg)}
.multipla-folha{position:absolute;left:0;right:0;top:calc(100% + .375rem);z-index:70;
  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}
.multipla-folha[hidden]{display:none}
.multipla-folha-cab{display:none}
.multipla-lista{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto}
.multipla-lista>[role=option]{display:flex;align-items:center;gap:.5rem;padding:.4375rem .5625rem;
  border-radius:var(--radius-sm);cursor:pointer;font-size:var(--f-14);color:var(--txt-forte)}
.multipla-lista>[role=option][hidden]{display:none}
.multipla-lista>[role=option]:hover,.multipla-lista>[role=option].ativa{background:var(--sup-hover)}
.multipla-lista>[role=option].ativa{outline:2px solid var(--foco);outline-offset:-2px}
.multipla-rot{flex:1;min-width:0}
.multipla-marca{display:flex;color:var(--acao-texto);visibility:hidden}
.multipla-marca>svg{width:1rem;height:1rem}
.multipla-lista>[aria-selected=true]{font-weight:500}
.multipla-lista>[aria-selected=true] .multipla-marca{visibility:visible}
.multipla-vazio{padding:.5rem .5625rem;font-size:var(--f-13);color:var(--txt-fraco)}
.multipla-vazio[hidden],.multipla-veu[hidden]{display:none}
.multipla-nada{color:var(--txt-apagado)}
.balao-rot{display:inline-flex;align-items:center;min-width:0;border:0;background:none;padding:0 .125rem;
  font:inherit;color:inherit;cursor:pointer;border-radius:var(--radius-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balao-rot:hover{text-decoration:underline;text-underline-offset:2px}
.balao-rot:focus-visible{outline:2px solid var(--foco);outline-offset:0}
.balao-det{color:var(--txt-fraco);font-weight:400}
.multipla-passo2[hidden],.multipla-lista[hidden]{display:none}
.multipla-passo2-cab{display:flex;align-items:center;gap:.25rem;padding:.25rem .25rem .375rem;
  font-size:var(--f-13);font-weight:500;color:var(--txt-forte);border-bottom:1px solid var(--linha-fina);margin-bottom:.25rem}
.multipla-passo2-cab>.btn{padding:0 .375rem}
@media (pointer:coarse){ .multipla-caixa{padding-top:0;padding-bottom:0} .multipla-caixa>.multipla-busca{height:2.75rem}
  .balao{height:2.75rem} .balao-rot{align-self:stretch;min-height:2.75rem}
  .balao-x{width:2.75rem;height:2.75rem;margin:0 -.25rem 0 0}
  .multipla-lista>[role=option]{min-height:2.75rem} }
@media (max-width:639.98px){
  .multipla-veu{position:fixed;inset:0;z-index:90;background:var(--veu)}
  .multipla-folha{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:91;max-height:70vh;
    display:flex;flex-direction:column;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom))}
  .multipla-folha-cab{display:flex;align-items:center;justify-content:space-between;
    padding:.25rem .25rem .5rem .5rem;font-size:var(--f-14);font-weight:600}
  .multipla-lista{max-height:none;flex:1}
  html.multipla-folha-aberta{overflow:hidden}
}

/* Tabela de emolumentos — as vigências lado a lado (item da tabela, parcial
   financeiro/_vigencias.html). Só apresentação: a estrutura, as caixas e os
   nomes que o salvar posta não mudam (decisão do dono, 29/09/2026: «não altere
   a tabela, só ajuste formatação»).
   - o cartão deste formulário abre até 84rem — só ele, e com !important
     porque o molde põe o limite em estilo inline;
   - Faixa e Selo ficam presos à esquerda enquanto os períodos rolam por dentro
     do cartão; a borda direita esmaece enquanto ainda há coluna escondida;
   - a divisória entre períodos é a linha forte; o período vigente tem o fundo
     da seleção, do cabeçalho à última faixa;
   - a caixa de valor é leve (fio fino, número à direita, dígitos tabulares) e
     ganha o contorno do campo ao passar e o do foco ao editar. */
form.card:has(#vigencias){max-width:84rem !important}
#vigencias{width:auto;min-width:100%}
.rola-x.vg-rola>table{min-width:0}
#vigencias th,#vigencias td{padding:.3125rem .25rem;white-space:nowrap;font-size:var(--t-11-5)}
#vigencias td{border-bottom-color:var(--linha-fina)}
#vigencias col.vg-hoje{background:var(--sup-selecionada)}
#vigencias .vg-ini{border-left:1px solid var(--linha-forte)}
#vigencias .vg-fx,#vigencias .vg-sl{position:sticky;z-index:1;background:var(--sup-cartao)}
#vigencias .vg-fx{left:0;width:2.25rem;min-width:2.25rem;max-width:2.25rem;padding-left:0;font-weight:var(--font-weight-semibold)}
#vigencias .vg-sl{left:2.25rem;width:2.875rem;min-width:2.875rem;box-shadow:inset -1px 0 0 var(--linha)}
#vigencias thead .vg-fx,#vigencias thead .vg-sl{vertical-align:bottom}
#vigencias .vg-sl .tip{font-weight:var(--font-weight-medium);color:var(--txt-fraco)}
#vigencias tbody tr:hover td.vg-fx,#vigencias tbody tr:hover td.vg-sl{
  background:linear-gradient(var(--sup-hover),var(--sup-hover)),var(--sup-cartao)}
#vigencias tbody tr:hover td:not(.vg-fx):not(.vg-sl){background:transparent}
#vigencias th.vg-per{text-align:center;padding-top:.5rem;padding-bottom:.5rem;
  font-size:var(--t-12-5);border-bottom-color:var(--linha-fina)}
#vigencias .vg-per-cab{position:sticky;left:5.125rem;display:inline-flex;align-items:center;gap:.375rem}
#vigencias th.vg-hoje{color:var(--txt-marca)}
#vigencias th.vg-rot{text-align:right;font-size:var(--t-11);font-weight:var(--font-weight-medium);
  color:var(--txt-fraco)}
#vigencias .vg-ate,#vigencias th.vg-ini{padding-left:.4375rem}
#vigencias td.vg-ate{text-align:right;color:var(--txt-fraco)}
#vigencias td.vg-val{text-align:right}
#vigencias td.vg-tot{font-weight:var(--font-weight-semibold);padding-right:.4375rem}
#vigencias td.vg-vazio{text-align:center;color:var(--txt-apagado);font-size:var(--t-11)}
#vigencias input.inp{display:inline-block;width:3.75rem;height:1.625rem;padding:0 .3125rem;
  font-size:var(--t-11-5);text-align:right;font-variant-numeric:tabular-nums;
  background:var(--sup-cartao);border-radius:var(--radius-sm);outline:1px solid var(--linha);
  outline-offset:-1px;--campo-cor:var(--linha)}
#vigencias input.inp:hover{outline-color:var(--linha-campo);--campo-cor:var(--linha-campo)}
#vigencias input.inp:focus{outline:2px solid var(--foco);outline-offset:-2px;--campo-fio:2px;--campo-cor:var(--foco)}
/* a borda direita esmaecida enquanto há coluna escondida vale para TODA tabela que
   rola dentro do cartão (restos de 29/09, item 8c): no Mac a barra de rolagem só
   aparece ao rolar, e «Por fila» no Relatório do dia a 1440 parecia cortada. A
   máscara mora só nos quadros-chave: sem rolagem a linha do tempo fica inativa, a
   animação não vale e a tabela que cabe não ganha máscara nenhuma. */
@supports (animation-timeline:scroll()){
  .rola-x,
  :is(.duas,.tres) :is(div,section,form):has(>table:not(.lc-tabela)),
  .com-coluna main :is(div,section,form):has(>table:not(.lc-tabela)){
    mask-size:calc(100% + 2.5rem) 100%;mask-repeat:no-repeat;
    animation:rola-esmaece linear both;animation-timeline:scroll(self inline)}
  @media (max-width:1023.98px){
    main :is(div,section,form):has(>table:not(.lc-tabela)){
      mask-size:calc(100% + 2.5rem) 100%;mask-repeat:no-repeat;
      animation:rola-esmaece linear both;animation-timeline:scroll(self inline)}
  }
  @keyframes rola-esmaece{
    from{mask-image:linear-gradient(to left,transparent 0,var(--txt-forte) 2.5rem);mask-position:100% 0}
    to{mask-image:linear-gradient(to left,transparent 0,var(--txt-forte) 2.5rem);mask-position:0 0}}
}
/* FICHA DO USUÁRIO (frente ficha-aprov, prancha «Usuário»): um cartão por assunto */
.fcard{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;box-shadow:var(--sombra-cartao,none);min-width:0}
.fcard-cab{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;padding:1rem 1.25rem .75rem}
.fcard-cab h3{margin:0;font-size:var(--f-16);font-weight:600;flex:1;min-width:0}
.fcard-cab .meta{font-size:var(--f-13);color:var(--txt-fraco)}
.fcard-corpo{padding:0 1.25rem 1.25rem}
.fcard-corpo.fcard-texto{font-size:var(--f-14);line-height:1.55;color:var(--txt-forte)}
.fcard-corpo.fcard-fraco{color:var(--txt-fraco)}
.fcard-corpo>*+*{margin-top:.75rem}
.fcard-pe{display:flex;gap:.5rem;align-items:center;padding:.875rem 1.25rem;border-top:1px solid var(--linha-fina)}
.fcard-pe .espaco{flex:1}
.fcard-form{padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--linha-fina)}
.fcard-form .sub-rotulo{margin-top:0}
.fcard-form .acoes-fim{border-top:0;padding-top:0;margin-top:1rem}
/* a aba Cargos da ficha do usuário (dono, 30/09, revisão das telas): o
   «Acrescentar cargo» em linhas — cargo; período; ato e anexo — e o anexo na lista */
.fcard-form .grade.uc-linha{margin-top:.75rem}
.uc-estrela-form{display:inline}
.uc-estrela-bt{border:0;background:none;cursor:pointer;color:inherit}
.uc-anexo{display:inline-flex;align-items:center;gap:.25rem;color:var(--link);text-decoration:none;max-width:14rem}
.uc-anexo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-anexo svg{width:.875rem;height:.875rem;flex-shrink:0}
.fcard .fcard-aviso{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--f-13);
  color:var(--txt-fraco);line-height:1.5;margin-top:1rem}
.fcard .fcard-aviso svg{width:1rem;height:1rem;flex-shrink:0;margin-top:.125rem}
.fcard .fcard-aviso b{color:var(--txt-forte);font-weight:500}
.fcard .grade .nota{font-size:var(--f-12)}
.fcard-tab{width:100%;border-collapse:collapse;font-size:var(--f-14)}
.fcard-tab th{font-size:var(--f-12);font-weight:500;color:var(--txt-fraco);text-align:left;padding:.5rem .75rem;
  border-bottom:1px solid var(--linha-fina);border-top:1px solid var(--linha-fina);white-space:nowrap;background:var(--sup-fraca)}
.fcard-tab td{padding:.75rem;border-bottom:1px solid var(--linha-fina);vertical-align:middle;color:var(--txt-forte)}
.fcard-tab tbody tr:last-child td{border-bottom:0}
.fcard-tab th:first-child,.fcard-tab td:first-child{padding-left:1.25rem}
.fcard-tab th:last-child,.fcard-tab td:last-child{padding-right:1.25rem}
.fcard-tab td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.fcard-tab tr.esmaecida td{color:var(--txt-fraco)}
.fcard-tab .sessao-acao{text-align:right;white-space:nowrap}
.fcard-largo{overflow-x:auto;border-radius:var(--raio)}
.fcard .sessoes-pe{padding:0 1.25rem 1.25rem;margin-top:0}
.fcard-ler{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;margin:0 0 .875rem}
.fcard-ler>summary{display:flex;gap:.5rem;align-items:center;padding:.75rem 1.25rem;cursor:pointer;
  list-style:none;font-size:var(--f-14);font-weight:500;color:var(--txt-forte)}
.fcard-ler>summary::-webkit-details-marker{display:none}
.fcard-ler>summary svg{width:1.125rem;height:1.125rem;color:var(--txt-fraco)}
.fcard-ler>summary .seta{margin-left:auto;display:flex;transition:transform .12s}
.fcard-ler[open]>summary .seta{transform:rotate(180deg)}
.fcard-ler>div{padding:0 1.25rem 1rem 2.875rem;font-size:var(--f-13);line-height:1.6;color:var(--txt-fraco)}
.fcard-ler>div p{margin:0}
.btn.outline.fperigo{color:var(--er-texto);outline-color:var(--er-linha);border-color:var(--er-linha)}
.btn.outline.fperigo:hover{background:var(--er-fundo)}
@media (max-width:639.98px){.fcard-cab,.fcard-corpo,.fcard-pe,.fcard-form{padding-left:1rem;padding-right:1rem}}
/* cargos no celular: cada lançamento vira cartão (prancha «Usuário» 390) —
   estrela à esquerda, cargo e ação na primeira linha, início/fim/ato embaixo */
@media (max-width:639.98px){
  .fcard-cartoes thead{display:none}
  .fcard-cartoes tr{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;column-gap:.5rem;
    align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--linha-fina)}
  .fcard-cartoes tbody tr:last-child{border-bottom:0}
  .fcard-cartoes td,.fcard-cartoes td:first-child,.fcard-cartoes td:last-child{display:block;padding:0;border:0}
  .fcard-cartoes td:nth-child(1){grid-column:1;grid-row:1}
  .fcard-cartoes td:nth-child(2){grid-column:2;grid-row:1}
  .fcard-cartoes td:nth-child(6){grid-column:3;grid-row:1}
  .fcard-cartoes td[data-rotulo]{grid-column:2/-1;font-size:var(--f-12);color:var(--txt-fraco);white-space:normal}
  .fcard-cartoes td[data-rotulo]::before{content:attr(data-rotulo) " ";font-weight:500}
  .fcard-cartoes td[colspan]{grid-column:1/-1}
  /* a aba Cargos tem oito colunas (linha·grau e anexo): a ação é a 8ª */
  .fcard-cartoes.uc-cargos-tab td:nth-child(6){grid-row:auto}
  .fcard-cartoes.uc-cargos-tab td:nth-child(8){grid-column:3;grid-row:1}
}
@media (max-width:639.98px){.fcard .grade{grid-template-columns:minmax(0,1fr)}.fcard .grade .campo{min-width:0;grid-column:1/-1!important}.fcard .grade .campo>.inp{width:100%;box-sizing:border-box}}

/* ---------- NOTIFICAÇÕES · o sino, a gaveta e «Ver todas» (dono, 29/09) ---- */
/* A gaveta do sino é o MESMO <aside id="gaveta"> da conversa, da agenda e da
   fila; aqui só o miolo. O ponto azul marca a não lida; a cor do ícone
   responde «alguém está parado esperando?» (vermelho = pedido de aprovação). */
.nt-corpo{padding:.5rem .25rem 0;display:flex;flex-direction:column;min-height:0}
.nt-rola{flex:1;overflow:auto;min-height:0}
.nt-abas{margin:0 .5rem .25rem;padding:0 .25rem}
.nt-grupo{font-size:var(--t-11);font-weight:var(--font-weight-semibold);text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-fraco);padding:.625rem .75rem .25rem}
.nt-lista{list-style:none;margin:0;padding:0}
.nt-item{position:relative;display:flex;gap:.625rem;padding:.625rem .75rem .625rem 1.125rem;
  border-radius:var(--radius-md)}
.nt-item:hover{background:var(--sup-hover)}
.nt-item.nova::before{content:"";position:absolute;left:.375rem;top:1.0625rem;width:.4375rem;
  height:.4375rem;border-radius:9999px;background:var(--acao)}
.nt-ic{width:1.875rem;height:1.875rem;border-radius:9999px;display:grid;place-items:center;
  flex-shrink:0;background:var(--sup-rebaixada);color:var(--txt-fraco)}
.nt-ic svg{width:.9375rem;height:.9375rem}
.nt-ic.urg{background:var(--er-fundo);color:var(--er-icone)}
.nt-ic.at{background:var(--av-fundo);color:var(--av-icone)}
.nt-ic.bom{background:var(--ok-fundo);color:var(--ok-icone)}
.nt-ic.in{background:var(--acao-suave);color:var(--acao-texto)}
.nt-tx{flex:1;min-width:0}
.nt-t{display:flex;gap:.5rem;align-items:baseline}
.nt-t b{flex:1;min-width:0;font-size:var(--t-13);font-weight:var(--font-weight-semibold);
  color:var(--txt-forte);line-height:1.35}
.nt-item:not(.nova) .nt-t b{font-weight:var(--font-weight-medium)}
.nt-t time{font-size:var(--t-11);color:var(--txt-fraco);white-space:nowrap}
.nt-d{font-size:var(--t-12);color:var(--txt-fraco);line-height:1.45;margin-top:.0625rem;
  overflow-wrap:anywhere}
.nt-d b{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
.nt-acoes{display:flex;flex-wrap:wrap;gap:.375rem .75rem;align-items:center;margin-top:.375rem;
  font-size:var(--t-12)}
.nt-acoes form{display:contents}
.nt-acoes a{color:var(--acao-texto);text-decoration:none;font-weight:var(--font-weight-medium);
  display:inline-flex;align-items:center;gap:.25rem}
.nt-acoes a.bt{height:1.625rem;padding:0 .625rem;border-radius:var(--radius-md);background:var(--acao);
  color:var(--txt-sobre-acao)}
.nt-acoes svg{width:.8125rem;height:.8125rem}
.nt-acoes .nt-lida{border:0;background:none;padding:0;font:inherit;cursor:pointer;color:var(--txt-fraco);
  display:inline-flex;align-items:center;gap:.25rem}
.nt-acoes .nt-lida:hover{color:var(--txt-forte)}
.nt-vezes{display:inline-flex;align-items:center;font-size:var(--t-11);font-weight:var(--font-weight-semibold);
  border-radius:9999px;padding:0 .375rem;background:var(--sup-rebaixada);color:var(--txt-forte);
  margin-left:.25rem;vertical-align:1px}
.nt-vazio{padding:1rem .75rem;font-size:var(--t-12-5);color:var(--txt-fraco)}
.nt-mais{padding:.5rem .75rem .75rem;font-size:var(--t-12)}
.nt-mais a{color:var(--acao-texto);text-decoration:none}
.nt-pe{display:flex;flex-direction:column;gap:.5rem}
.nt-pe form{display:contents}
.nt-pe .btn{width:100%;justify-content:center}
.nt-pe .ln{display:flex;justify-content:space-between;font-size:var(--t-12)}
.nt-pe .ln a{color:var(--acao-texto);text-decoration:none}
/* no celular a gaveta do sino cobre a largura toda, como a da conversa */
@media (max-width:639.98px){#gaveta[data-de="notificacoes"]{width:100%;top:3.5rem}
  #gaveta[data-de="avisos"]{width:100%;left:0;right:0;top:3.5rem;border-radius:0 0 var(--radius-xl) var(--radius-xl)}}

/* «Ver todas» (/notificacoes/): a lista e, ao lado, «O que me avisa» */
.nt-pag{display:grid;grid-template-columns:minmax(0,1fr) 27rem;gap:1rem;align-items:start}
@media (max-width:1023.98px){.nt-pag{grid-template-columns:1fr}}
.nt-pag>.card>.nt-lista{padding:0 .5rem .5rem}
.nt-pag>.card>.nt-grupo{padding-left:1rem}
.nt-filtros{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;padding:.875rem 1rem .5rem}
.nt-filtros .chip{text-decoration:none;padding:0 .5rem 0 .625rem}
.nt-filtros .chip.on{background:var(--acao-suave);color:var(--acao-texto);outline-color:var(--acao)}
.nt-filtros .chip svg{width:.875rem;height:.875rem}
.nt-q{font-size:var(--t-11);font-weight:var(--font-weight-semibold);color:var(--txt-fraco);
  font-variant-numeric:tabular-nums}
.nt-q.forte{min-width:1.125rem;height:1.125rem;border-radius:9999px;background:var(--acao);
  color:var(--txt-sobre-acao);display:inline-grid;place-items:center;padding:0 .25rem}
.nt-filtros .sep{width:1px;height:1.25rem;background:var(--linha-fina);margin:0 .25rem}
.nt-periodo>.menu{left:0;right:auto}
.nt-rodape{padding:.75rem 1rem;font-size:var(--t-12);color:var(--txt-fraco);
  border-top:1px solid var(--linha-fina)}
.nt-regras{font-size:var(--t-12);color:var(--txt-fraco);line-height:1.5}
.nt-regras .sec{margin:0 0 .5rem}
.nt-regras .sec~.sec{margin-top:1rem}
.nt-regras p{margin:0 0 .625rem}
.nt-regras ul{margin:0;padding-left:1.125rem}
.nt-regras b{color:var(--txt-forte)}
.nt-tab{overflow-x:auto}
.nt-regras table{width:100%;border-collapse:collapse;font-size:var(--t-12);table-layout:fixed}
.nt-regras th:nth-child(1){width:29%}
.nt-regras th:nth-child(2){width:31%}
.nt-regras th:nth-child(4){width:4.5rem}
@media (max-width:639.98px){.nt-regras table{min-width:30rem}}
.nt-regras th{text-align:left;overflow-wrap:break-word;font-weight:var(--font-weight-semibold);color:var(--txt-fraco);
  padding:.375rem .5rem;border-bottom:1px solid var(--linha-fina)}
.nt-regras td{padding:.375rem .5rem;overflow-wrap:break-word;border-bottom:1px solid var(--linha-fina);color:var(--txt-forte);
  vertical-align:top}
.nt-regras td small{display:block;color:var(--txt-fraco);font-size:var(--t-11)}
.nt-cor{display:inline-flex;font-size:var(--t-11);font-weight:var(--font-weight-semibold);
  border-radius:9999px;padding:0 .375rem;white-space:nowrap}
.nt-cor.urg{background:var(--er-fundo);color:var(--er)}
.nt-cor.at{background:var(--av-fundo);color:var(--av)}
.nt-cor.bom{background:var(--ok-fundo);color:var(--ok)}

/* ══════════════════════════════════════════════════════════════════════
   O MURAL DE AVISOS e o INÍCIO v2 (decisões do dono, 29/09/2026; pranchas
   inicio-indicadores, inicio-v2 itens 1–2 e rodada 4 itens 7–9)
   ══════════════════════════════════════════════════════════════════════ */

/* ── a faixa do URGENTE, acima da barra (a anatomia da faixa da licença) ── */
.faixa-urgente-caixa{flex-shrink:0}
/* (dono, 30/09, 3ª versão): o fundo é o --er-fundo, o mesmo dos outros avisos
   de erro (opção D no claro), com a letra --sobre-er-suave; o fio de baixo em
   --er-linha separa da barra */
.faixa-urgente{flex-shrink:0;display:flex;align-items:center;gap:.625rem;padding:.5rem 1rem;
  background:var(--er-fundo);color:var(--sobre-er-suave);box-shadow:inset 0 -1px 0 var(--er-linha);
  font-size:var(--t-12-5);line-height:1.4;min-width:0}
.faixa-urgente>.ic{display:flex;flex-shrink:0;color:var(--er-icone)}
.faixa-urgente>.ic svg{width:1rem;height:1rem}
.fx-urg-linha{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-urg-linha b{font-weight:var(--font-weight-semibold)}
.fx-urg-titulo{color:inherit;font-weight:var(--font-weight-medium)}
.fx-urg-ver,.fx-urg-mais{flex-shrink:0;border:0;background:none;font:inherit;font-size:var(--t-12);
  color:var(--sobre-er-suave);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0 .125rem;white-space:nowrap}
a.fx-urg-mais{font-weight:var(--font-weight-semibold)}
.fx-urg-ciente{height:1.75rem;font-size:var(--t-11);color:var(--er);outline-color:currentColor}
.fx-urg-ciente svg{width:.875rem;height:.875rem}
/* o «Ciente» mora SÓ no texto aberto por «ver» (dono, 30/09, revisão das telas):
   o botão do cartão com a letra e o contorno vermelhos, um pouco mais largo */
.fx-urg-texto .fx-urg-ciente,.fx-urg-texto .fx-urg-ciente:hover{min-width:8.5rem;justify-content:center;background:var(--sup-cartao);color:var(--sobre-er-suave);
  box-shadow:inset 0 0 0 1px var(--er-linha);outline-color:var(--er)}
.faixa-urgente :focus-visible,.fx-urg-texto :focus-visible{outline:2px solid var(--er);outline-offset:2px}
.faixa-urgente-fina{display:block;width:100%;height:.3125rem;border:0;padding:0;margin:0;cursor:pointer;
  background:var(--er-icone)}
.faixa-urgente-fina:hover{height:.5rem}
.faixa-urgente-fina:focus-visible{outline:2px solid var(--foco);outline-offset:-2px;height:.5rem}
.fx-urg-texto{background:var(--er-fundo);border-top:1px solid var(--er-linha);border-bottom:1px solid var(--er-linha);
  padding:.25rem 1rem .75rem 2.625rem;display:flex;flex-direction:column;gap:.625rem}
.fx-urg-texto[hidden]{display:none}
.fx-urg-item{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem}
.fx-urg-item+.fx-urg-item{border-top:1px dashed var(--er-linha)}
.fx-urg-t{font-size:var(--f-13);color:var(--txt-forte)}
.fx-urg-d{font-size:var(--f-13);color:var(--txt-forte);line-height:1.5}
.fx-urg-m{font-size:var(--f-12);color:var(--txt-fraco)}
.fx-urg-m b{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
.fx-urg-item form{margin:0}
@media (max-width:639.98px){
  .faixa-urgente{padding:.5rem .75rem;gap:.5rem}
  .fx-urg-texto{padding:.25rem .75rem .75rem}
}

/* ── os avisos no topo do Início ───────────────────────────────────────── */
.mu-pilha{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.mu-aviso{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .875rem;border-radius:var(--raio);
  outline:1px solid var(--av-linha);outline-offset:-1px;background:var(--av-fundo)}
.mu-aviso[hidden]{display:none}
.mu-aviso.info{background:var(--info-fundo);outline-color:var(--info-linha)}
.mu-aviso>.ic{display:flex;flex-shrink:0;margin-top:.0625rem;color:var(--av-icone)}
.mu-aviso.info>.ic{color:var(--acao-texto)}
.mu-aviso>.ic svg{width:1.125rem;height:1.125rem}
.mu-aviso .tx{flex:1;min-width:0}
.mu-aviso .t{font-size:var(--f-14);font-weight:var(--font-weight-semibold);color:var(--txt-forte);line-height:1.35}
.mu-aviso .d{font-size:var(--f-13);color:var(--txt-forte);line-height:1.5;margin-top:.125rem;overflow-wrap:anywhere}
.mu-aviso .m{font-size:var(--f-12);color:var(--txt-fraco);margin-top:.25rem;display:flex;gap:.25rem .75rem;flex-wrap:wrap}
.mu-aviso .m b{font-weight:var(--font-weight-medium);color:var(--txt-forte)}
.mu-nivel{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--f-12);font-weight:var(--font-weight-semibold);
  border-radius:9999px;padding:.0625rem .5rem;margin-right:.375rem;vertical-align:.0625rem;white-space:nowrap}
.mu-nivel.atencao{background:var(--av-suave);color:var(--sobre-av-suave)}
.mu-nivel.informacao{background:var(--acao-suave);color:var(--acao-texto)}
.mu-nivel.urgente{background:var(--er-fundo);color:var(--er);outline:1px solid var(--er-linha);outline-offset:-1px}
.mu-recolher,.mu-mostrar{flex-shrink:0;display:inline-flex;align-items:center;gap:.25rem;border:0;background:none;font:inherit;
  font-size:var(--f-12);color:var(--txt-fraco);cursor:pointer;padding:.25rem .375rem;border-radius:var(--radius-md)}
.mu-recolher:hover{background:var(--sup-hover);color:var(--txt-forte)}
.mu-recolher svg{width:.875rem;height:.875rem}
.mu-mostrar{color:var(--acao-texto);font-weight:var(--font-weight-medium);padding:0}
.mu-recolhidos{display:flex;align-items:center;gap:.5rem;font-size:var(--f-12);color:var(--txt-fraco);
  padding:.375rem .75rem;border-radius:var(--raio);outline:1px dashed var(--linha-forte);outline-offset:-1px}
.mu-recolhidos[hidden]{display:none}
.mu-recolhidos svg{width:.875rem;height:.875rem}
.mu-pe{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:var(--f-12)}
.mu-pe a{color:var(--acao-texto);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.mu-pe svg{width:.875rem;height:.875rem}
.mu-urg-nota{display:inline-flex;align-items:center;gap:.25rem;color:var(--er);margin-right:auto}
@media (max-width:639.98px){
  .mu-aviso{flex-wrap:wrap}
  .mu-aviso .tx{flex-basis:calc(100% - 2rem)}
  .mu-recolher{margin-left:auto}
}

/* ── a tela do mural: «No ar» e «Histórico» ─────────────────────────────── */
.mu-abas{margin-bottom:1rem}
.mu-grade{display:grid;grid-template-columns:minmax(0,1fr) 25rem;gap:1rem;align-items:start}
.mu-grade.so-lista{grid-template-columns:minmax(0,1fr)}
@media (max-width:1023.98px){.mu-grade{grid-template-columns:minmax(0,1fr)}}
.mu-sec{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .5rem;flex-wrap:wrap}
.mu-sec h2{margin:0;font-size:var(--f-13);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco)}
.mu-sec .meta{font-size:var(--f-12);color:var(--txt-fraco)}
.mu-card{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);box-shadow:var(--sombra-cartao);
  padding:.875rem 1rem;display:flex;flex-direction:column;gap:.375rem}
.mu-card+.mu-card{margin-top:.625rem}
/* o destaque do nível (dono, 30/09, revisão das telas): sem o «colchete» — a
   borda grossa colorida só à esquerda. O cartão fica com o contorno fino, no
   fio do estado, o FUNDO de estado (-fundo, opção D no claro), a pílula e o
   ícone do nível */
.mu-card.atencao{background:var(--av-fundo);outline-color:var(--av-linha)}
.mu-card.informacao{background:var(--info-fundo);outline-color:var(--info-linha)}
.mu-card.urgente{background:var(--er-fundo);outline-color:var(--er-linha)}
.mu-card .cab{display:flex;gap:.5rem;align-items:flex-start}
.mu-card .cab>.ic{display:flex;flex-shrink:0;margin-top:.125rem;color:var(--acao-texto)}
.mu-card .cab>.ic svg{width:1.125rem;height:1.125rem}
.mu-card.atencao .cab>.ic{color:var(--av-icone)}
.mu-card.urgente .cab>.ic{color:var(--er-icone)}
/* a pílula no cartão do mesmo tom: o contorno fino da mesma cor (dono, 30/09) */
.mu-card.atencao .mu-nivel.atencao,.mu-card.informacao .mu-nivel.informacao{
  outline:1px solid color-mix(in srgb, currentColor 40%, transparent);outline-offset:-1px}
.mu-card .cab h3{margin:0;flex:1;min-width:0;font-size:var(--t-15);font-weight:var(--font-weight-semibold);color:var(--txt-forte);line-height:1.35}
.mu-card .tx{font-size:var(--f-13);line-height:1.5;color:var(--txt-forte);overflow-wrap:anywhere}
.mu-card .meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:var(--f-12);color:var(--txt-fraco)}
.mu-card .meta span{display:inline-flex;align-items:center;gap:.25rem}
.mu-card .meta b{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
.mu-card .meta svg{width:.8125rem;height:.8125rem;flex-shrink:0}
.mu-vida{display:flex;align-items:center;gap:.5rem;font-size:var(--f-12);color:var(--txt-fraco)}
.mu-vida .bar{flex:1;height:.3125rem;border-radius:9999px;background:var(--sup-rebaixada);overflow:hidden}
.mu-vida .bar i{display:block;height:100%;background:var(--acao)}
.mu-card.atencao .mu-vida .bar i{background:var(--av)}
.mu-card.urgente .mu-vida .bar i{background:var(--er)}
.mu-vida b{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
.mu-retirar{flex-shrink:0;height:1.75rem;padding:0 .625rem;border-radius:var(--radius-md);font:inherit;font-size:var(--f-12);
  font-weight:var(--font-weight-medium);background:transparent;color:var(--er-texto);outline:1px solid var(--er-linha);outline-offset:-1px;
  border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;text-decoration:none;white-space:nowrap}
.mu-retirar:hover{background:var(--er-fundo)}
.mu-retirar svg{width:.8125rem;height:.8125rem}
.mu-confirma{margin-top:.25rem;border-radius:var(--radius-md);background:var(--er-fundo);outline:1px solid var(--er-linha);outline-offset:-1px;
  padding:.625rem .75rem;display:flex;flex-direction:column;gap:.5rem}
.mu-confirma[hidden]{display:none}
.mu-confirma .q{font-size:var(--f-13);font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.mu-confirma .q small{display:block;font-weight:var(--font-weight-normal);color:var(--txt-fraco);font-size:var(--f-12);margin-top:.125rem}
.mu-confirma .campo{margin:0}
.mu-confirma .bts{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.mu-opcional{font-weight:var(--font-weight-normal);color:var(--txt-fraco)}
.mu-vazio-sec{font-size:var(--f-12);color:var(--txt-fraco);margin:.625rem 0 .5rem}
.mu-form .campo{margin-bottom:.875rem}
.mu-form-cab{margin:.25rem 0 .75rem;display:flex;align-items:center;gap:.5rem}
.mu-form textarea.inp{width:100%;min-height:6.5rem;resize:vertical;font:inherit;color:inherit;padding:.5rem .625rem;line-height:1.5;height:auto}
.mu-conta-car{font-size:var(--t-11);color:var(--txt-fraco);text-align:right;margin-top:.1875rem}
.mu-campo-grupo{border:0;padding:0;margin:0 0 .875rem;min-width:0}
.mu-campo-grupo>legend{padding:0;margin-bottom:.375rem}
.mu-escolha{display:flex;gap:.5rem;flex-wrap:wrap}
.mu-escolha label{flex:1;min-width:8rem;display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .625rem;border-radius:var(--radius-md);
  outline:1px solid var(--linha-fina);outline-offset:-1px;font-size:var(--f-13);font-weight:var(--font-weight-medium);cursor:pointer;color:var(--txt-forte);margin:0}
.mu-escolha.mu-tres label{min-width:6.5rem;flex-basis:0}
.mu-escolha label:has(input:checked){outline:2px solid var(--acao);outline-offset:-2px;background:var(--acao-suave)}
.mu-escolha label.urgente:has(input:checked){outline-color:var(--er);background:var(--er-fundo)}
.mu-escolha label.atencao:has(input:checked){outline-color:var(--av);background:var(--av-fundo)}
.mu-escolha label span svg{display:inline-block;vertical-align:-.1875rem;width:.9375rem;height:.9375rem;margin-right:.125rem}
.mu-escolha label small{display:block;color:var(--txt-fraco);font-size:var(--t-11);font-weight:var(--font-weight-normal);margin-top:.125rem}
.mu-escolha input{margin-top:.125rem}
.mu-dias{display:flex;align-items:center;gap:.5rem}
.mu-dias .inp{width:4.5rem;flex:none}
.mu-dias .inp input{text-align:center}
.mu-dias .passo{flex:none;width:2.25rem;height:var(--d-control-h);border-radius:var(--radius-md);display:grid;place-items:center;
  outline:1px solid var(--linha-fina);outline-offset:-1px;background:var(--sup-cartao);color:var(--txt-forte);border:0;cursor:pointer;
  font:inherit;font-size:var(--f-18);line-height:1}
.mu-dias .passo:hover{background:var(--sup-hover)}
.mu-dias-rot{font-size:var(--f-13)}
.mu-cx-cargos{display:grid;grid-template-columns:1fr 1fr;gap:.375rem .75rem;margin-top:.5rem;padding:.625rem .75rem;
  border-radius:var(--radius-md);background:var(--sup-fraca)}
.mu-cx-cargos[hidden]{display:none}
.mu-cx-cargos label{display:flex;gap:.5rem;align-items:center;font-size:var(--f-13);color:var(--txt-forte);margin:0;
  font-weight:var(--font-weight-normal);white-space:nowrap}
.mu-cx-cargos label span{margin-left:auto;color:var(--txt-fraco);font-size:var(--f-12)}
.mu-previa{margin-top:.25rem;padding:.625rem;border-radius:var(--radius-md);outline:1px dashed var(--linha-forte);outline-offset:-1px}
.mu-previa .rot{font-size:var(--t-11);text-transform:uppercase;letter-spacing:.05em;color:var(--txt-fraco);margin-bottom:.375rem}
.mu-previa .mu-aviso{padding:.5rem .625rem}
.mu-previa .mu-aviso[hidden],.mu-previa .faixa-urgente[hidden]{display:none}
.mu-previa-faixa{border-radius:var(--radius-md)}
.mu-previa-faixa .fx-urg-ver{text-decoration:underline;cursor:default}
@media (max-width:639.98px){
  .mu-cx-cargos{grid-template-columns:1fr}
  .mu-card .meta span{display:flex}
  .mu-card .cab{flex-wrap:wrap}
}

/* histórico */
.mh-filtros{display:flex;gap:.4375rem;align-items:center;margin-bottom:.75rem;flex-wrap:wrap}
.mh-busca{min-width:16rem;flex:1}
.mh-busca .inp{gap:.5rem}
.mh-busca .inp svg{width:1rem;height:1rem;color:var(--txt-fraco);flex-shrink:0}
.mh-chip{text-decoration:none;color:var(--txt-forte)}
.mh-chip.on{background:var(--acao-suave);color:var(--acao-texto);outline-color:var(--acao)}
.mh-q{font-size:var(--t-11);font-weight:var(--font-weight-semibold);border-radius:9999px;padding:0 .375rem;
  background:var(--sup-rebaixada);color:var(--txt-fraco)}
.mh-chip.on .mh-q{background:var(--acao);color:var(--txt-sobre-acao)}
.mh-mes>summary svg{width:.875rem;height:.875rem}
.mh-tab{width:100%}
.mh-tab td{vertical-align:top;font-size:var(--f-13)}
.mh-tab td small{display:block;color:var(--txt-fraco);font-size:var(--f-12);line-height:1.4}
.mh-tab td b{font-weight:var(--font-weight-semibold)}
.mh-tab td.lc-p1 .mu-nivel{margin-bottom:.25rem}
.mh-tab .lc-ac{text-align:right}
.mh-c-aviso{width:34%}.mh-c-pub{width:16%}.mh-c-ar{width:12%}.mh-c-sit{width:10%}.mh-c-ret{width:18%}.mh-c-ac{width:10%}
.mh-sit{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--f-12);font-weight:var(--font-weight-medium);
  border-radius:9999px;padding:.0625rem .5rem;white-space:nowrap}
.mh-sit.ar{background:var(--ok-fundo);color:var(--ok)}
.mh-sit.venc{background:var(--sup-rebaixada);color:var(--txt-fraco)}
.mh-sit.ret{background:var(--er-fundo);color:var(--er-texto)}
.mh-cientes{margin-top:.25rem;font-size:var(--f-12)}
.mh-cientes>summary{cursor:pointer;color:var(--acao-texto);display:inline-flex;align-items:center;gap:.25rem}
.mh-cientes>summary svg{width:.8125rem;height:.8125rem}
.mh-cientes ul{margin:.25rem 0 0;padding:0 0 0 1rem}
.mh-cientes li{color:var(--txt-fraco)}
.mh-cientes li b{color:var(--txt-forte);font-weight:var(--font-weight-medium)}
.mh-trilha{margin-top:1rem}
.mh-trilha-cab{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem .5rem;flex-wrap:wrap}
.mh-trilha-cab svg{width:1rem;height:1rem;color:var(--txt-fraco)}
.mh-trilha-cab h3{margin:0;font-size:var(--f-14);font-weight:var(--font-weight-semibold)}
.mh-trilha-cab .meta{font-size:var(--f-12);color:var(--txt-fraco)}
.mh-trilha-cab a{margin-left:auto;white-space:nowrap;font-size:var(--f-12);color:var(--acao-texto);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.mh-trilha ol{list-style:none;margin:0;padding:0 1rem .5rem}
.mh-trilha li{display:flex;gap:.75rem;padding:.5rem 0;border-top:1px solid var(--linha-fina);font-size:var(--f-13)}
.mh-trilha li:first-child{border-top:0}
.mh-trilha time{width:7.5rem;flex-shrink:0;color:var(--txt-fraco);font-variant-numeric:tabular-nums;font-size:var(--f-12)}
.mh-trilha code{font-size:var(--f-12);background:var(--sup-rebaixada);border-radius:var(--radius-xs);padding:0 .25rem}
.mh-trilha-vazia{padding:0 1rem;margin:0 0 1rem}
@media (max-width:639.98px){
  .mh-trilha time{width:5.5rem}
  .mh-trilha li{flex-wrap:wrap}
  .mh-busca{min-width:100%}
}

/* =============================================================================
   PAINEL DO DIA — /atendimento/hoje/ e o Meu dia (decisões do dono, 29/09/2026;
   pranchas dia a dia, rodadas 2, 3 e 4). O antigo Relatório do dia, em abas,
   com o Mapa dos guichês e «Quem está onde» dentro. Prefixo pdia- (as classes
   pd-/r2-/r3-/r4- das pranchas, na folha). Só token: claro e escuro de graça.
   ============================================================================= */
.pdia-cab{margin-bottom:.75rem}
.pdia-cab h1{margin-bottom:.25rem}
.pdia-cab .pagina-desc{margin-bottom:0;max-width:52rem}
.pdia-abas{margin-bottom:1rem}
.pdia-abas .aba svg{width:1rem;height:1rem}

/* a barra: o período e os filtros da aba — UMA peça em todas as abas */
.pdia-barra{position:relative;background:var(--sup-cartao);border-radius:var(--raio);
  outline:1px solid var(--linha-cartao);outline-offset:-1px;margin-bottom:1rem}
.pdia-per{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.75rem 1rem}
.pdia-per .titulo{font-size:var(--f-16);font-weight:600;color:var(--txt-forte);white-space:nowrap}
.pdia-per .titulo small{font-size:var(--f-13);font-weight:400;color:var(--txt-fraco);margin-left:.375rem}
.pdia-per .espaco{flex:1}
.pdia-per .seg>a{font-size:var(--f-13);padding:.3125rem .875rem}
.pdia-data,.pdia-exportar,.pdia-chip{position:relative}
.pdia-data>summary,.pdia-exportar>summary,.pdia-chip>summary,.pdia-fil-cel>summary{list-style:none;cursor:pointer}
.pdia-data>summary::-webkit-details-marker,.pdia-exportar>summary::-webkit-details-marker,
.pdia-chip>summary::-webkit-details-marker,.pdia-fil-cel>summary::-webkit-details-marker{display:none}
.pdia-data-bt{display:inline-flex;align-items:center;gap:.375rem;height:2rem;padding:0 .625rem;
  border-radius:var(--radius-md);outline:1px solid var(--linha);outline-offset:-1px;
  font-size:var(--f-13);color:var(--txt-forte);background:var(--sup-cartao);white-space:nowrap}
.pdia-data-bt svg{width:.9375rem;height:.9375rem;color:var(--txt-fraco)}
.pdia-pop{position:absolute;z-index:20;top:calc(100% + .375rem);left:0;background:var(--sup-cartao);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);outline:1px solid var(--linha-fina);
  outline-offset:-1px;padding:.375rem}
.pdia-data-pop{width:16rem;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.pdia-data-pop .btn{align-self:flex-end}
.pdia-exportar>summary{gap:.375rem}
.pdia-exportar>summary svg{width:1rem;height:1rem}
.pdia-menu-exp{left:auto;right:0;width:22rem}
.pdia-menu-exp a{display:flex;gap:.625rem;align-items:flex-start;padding:.5rem .625rem;
  border-radius:var(--radius-md);text-decoration:none;color:var(--txt-forte)}
.pdia-menu-exp a:hover{background:var(--sup-hover)}
.pdia-menu-exp a svg{width:1.125rem;height:1.125rem;color:var(--txt-fraco);flex-shrink:0;margin-top:.0625rem}
.pdia-menu-exp b{display:block;font-size:var(--f-13);font-weight:500}
.pdia-menu-exp span{display:block;font-size:var(--f-12);color:var(--txt-fraco);line-height:1.45}
.pdia-menu-exp .pe{display:flex;gap:.375rem;align-items:center;font-size:var(--f-12);color:var(--txt-fraco);
  padding:.5rem .625rem .25rem;border-top:1px solid var(--linha-fina);margin-top:.25rem}
.pdia-menu-exp .pe svg{width:.875rem;height:.875rem;flex-shrink:0}
.pdia-padrao{display:inline-block!important;font-size:var(--f-12)!important;font-weight:600;
  color:var(--acao-texto)!important;background:var(--acao-suave);border-radius:9999px;
  padding:0 .4375rem;margin-left:.25rem}
.pdia-fil{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.625rem 1rem;
  border-top:1px solid var(--linha-fina);background:var(--sup-fraca);border-radius:0 0 var(--raio) var(--raio)}
.pdia-fil-cel{display:none}
.pdia-busca{flex:0 1 17rem;margin:0}
.pdia-busca .inp{display:flex;align-items:center;gap:.375rem;height:2rem;padding:0 .625rem;background:var(--sup-cartao)}
.pdia-busca .inp svg{width:1rem;height:1rem;color:var(--txt-fraco);flex-shrink:0}
.pdia-busca input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:var(--f-13);color:inherit}
.pdia-chip>summary.chip{background:var(--sup-cartao)}
.pdia-chip>summary.chip b{font-weight:500;color:var(--txt-forte)}
.pdia-chip>summary.chip svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.pdia-chip>summary.chip.on,.pdia-chip-fixo{background:var(--sup-selecionada);outline-color:var(--acao)}
.pdia-chip-fixo .x{display:flex}
.pdia-chip-fixo .x svg{width:.875rem;height:.875rem}
.pdia-opcoes{min-width:13rem;max-height:20rem;overflow-y:auto}
.pdia-opcoes a{display:flex;align-items:center;gap:.5rem;padding:.4375rem .5rem;border-radius:var(--radius-md);
  font-size:var(--f-13);color:var(--txt-forte);text-decoration:none;white-space:nowrap}
.pdia-opcoes a:hover{background:var(--sup-hover)}
.pdia-opcoes a.on{font-weight:500}
.pdia-opcoes a svg{width:.875rem;height:.875rem;color:var(--acao-texto);flex-shrink:0}
.pdia-opcoes a .vazio{display:inline-block;width:.875rem;flex-shrink:0}
.pdia-opcoes .cab{font-size:var(--f-12);font-weight:600;color:var(--txt-forte);padding:.25rem .5rem .5rem}
.pdia-opcoes .cab span{font-weight:400;color:var(--txt-fraco);margin-left:.25rem}
.pdia-opcoes .cx{display:inline-grid;place-items:center;width:1rem;height:1rem;border-radius:var(--radius-sm);
  outline:1px solid var(--linha-forte);outline-offset:-1px;flex-shrink:0}
.pdia-opcoes .cx.on{background:var(--acao);outline-color:var(--acao)}
.pdia-opcoes .cx.on svg{color:var(--txt-sobre-acao);width:.75rem;height:.75rem}
.pdia-opcoes .q{margin-left:auto;font-size:var(--f-12);color:var(--txt-fraco);font-variant-numeric:tabular-nums}
.pdia-opcoes .q.pdia-zero{color:var(--txt-apagado)}
.pdia-opcoes .pe{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .25rem;margin-top:.25rem;
  border-top:1px solid var(--linha-fina);font-size:var(--f-12);color:var(--txt-fraco);white-space:normal}
.pdia-opcoes .pe a{padding:0;color:var(--link);font-size:var(--f-12)}
.pdia-notas{display:inline-flex;gap:.25rem;align-items:center}
.pdia-notas .rot{font-size:var(--f-12);color:var(--txt-fraco);margin-right:.25rem}
.pdia-notas a.n{display:inline-flex;align-items:center;gap:.125rem;height:1.75rem;padding:0 .5rem;
  border-radius:var(--radius-md);font-size:var(--f-13);background:var(--sup-cartao);text-decoration:none;
  outline:1px solid var(--linha);outline-offset:-1px;color:var(--txt-fraco)}
.pdia-notas a.n.on{background:var(--sup-selecionada);outline-color:var(--acao);color:var(--txt-forte)}
.pdia-visao>a{display:inline-flex;align-items:center;gap:.3125rem;font-size:var(--f-12)}
.pdia-visao svg{width:.875rem;height:.875rem}
.pdia-fil .seg>a{font-size:var(--f-12)}
.pdia-limpar{white-space:nowrap;font-size:var(--f-13);color:var(--link);text-decoration:none}
.pdia-fil .conta{margin-left:auto;font-size:var(--f-12);color:var(--txt-fraco);white-space:nowrap}

/* período maior que um dia: a faixa diz que os números são SOMAS e MÉDIAS */
.pdia-somas{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:-.25rem 0 1rem;
  font-size:var(--f-13);color:var(--txt-fraco)}
.pdia-somas .tag{display:inline-flex;gap:.375rem;align-items:center;height:1.625rem;padding:0 .625rem;
  border-radius:9999px;background:var(--acao-suave);color:var(--acao-texto);font-weight:500;font-size:var(--f-12)}
.pdia-somas .tag svg{width:.875rem;height:.875rem}
.pdia-nota-per{display:flex;gap:.375rem;align-items:center;font-size:var(--f-12);color:var(--txt-fraco);margin:-.5rem 0 1rem}
.pdia-nota-per svg{width:.875rem;height:.875rem}

/* pílulas, números grandes, cartões */
.pdia-pilulas{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.25rem 0 1rem}
.pdia-pil{display:inline-flex;align-items:center;gap:.375rem;height:1.75rem;padding:0 .75rem;border-radius:9999px;
  background:var(--sup-cartao);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  font-size:var(--f-13);color:var(--txt-forte);white-space:nowrap}
.pdia-pil b{font-weight:600;font-variant-numeric:tabular-nums}
.pdia-pil svg{width:.875rem;height:.875rem;color:var(--txt-fraco)}
.pdia-pil .presenca{position:static;display:inline-block;box-shadow:none;width:.5rem;height:.5rem}
.pdia-pil .presenca.pdia-ponto-acao{background:var(--acao)}
.pdia-pil.fraca{color:var(--txt-fraco)}
.pdia-pil-sub{font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.pdia-kpi{background:var(--sup-cartao);border-radius:var(--raio);padding:1rem 1.125rem;
  outline:1px solid var(--linha-cartao);outline-offset:-1px;box-shadow:var(--sombra-cartao)}
.pdia-kpi .r{font-size:var(--f-12);font-weight:500;color:var(--txt-fraco);display:flex;gap:.375rem;align-items:center}
.pdia-kpi .r svg{width:1rem;height:1rem}
.pdia-kpi .v{font-size:var(--f-26);font-weight:600;line-height:1.2;margin-top:.375rem;
  font-variant-numeric:tabular-nums;color:var(--txt-forte)}
.pdia-kpi .s{font-size:var(--f-12);color:var(--txt-fraco);margin-top:.125rem}
.pdia-card{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);
  outline-offset:-1px;box-shadow:var(--sombra-cartao);margin-bottom:1rem;min-width:0}
.pdia-card-cab{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;padding:1rem 1.25rem .75rem}
.pdia-card-cab h3{margin:0;padding:0;font-size:var(--f-16);font-weight:600;flex:1;min-width:0}
.pdia-card-cab .meta{font-size:var(--f-13);color:var(--txt-fraco)}
.pdia-card-cab .meta.longa{flex:0 1 auto;min-width:0}
.pdia-card-desc{padding:0 1.25rem .75rem;margin-top:-.5rem;font-size:var(--f-13);color:var(--txt-fraco)}
.pdia-card-corpo{padding:0 1.25rem 1.25rem}
.pdia-card-corpo.nu{padding:0 0 .5rem}
.pdia-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.pdia-duas.dois-um{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.pdia-duas>.pdia-card,.pdia-pilha>.pdia-card{margin-bottom:0}
.pdia-pilha{display:flex;flex-direction:column;gap:1rem}
.pdia-bloco-mb{margin-bottom:1rem}
.pdia-largura-toda{margin-bottom:1rem}
.pdia-rola{overflow-x:auto}
.pdia-card>.pdia-largo{border-radius:var(--raio)}
.pdia-pares{display:grid;grid-template-columns:auto 1fr;gap:.625rem 1rem;margin:0;font-size:var(--f-14)}
.pdia-pares dt{color:var(--txt-fraco)}
.pdia-pares dd{margin:0;color:var(--txt-forte)}
.pdia-pares a{color:var(--link);text-decoration:none;margin-left:.25rem;font-size:var(--f-13)}

/* a tabela do painel: cabeçalho discreto, números alinhados, linha que respira */
.pdia-tab{width:100%;border-collapse:collapse;font-size:var(--f-14)}
.pdia-tab th{font-size:var(--f-12);font-weight:500;color:var(--txt-fraco);text-align:left;padding:.5rem .75rem;
  border-bottom:1px solid var(--linha-fina);border-top:1px solid var(--linha-fina);white-space:nowrap;background:var(--sup-fraca)}
.pdia-tab td{padding:.75rem;border-bottom:1px solid var(--linha-fina);vertical-align:middle;color:var(--txt-forte)}
.pdia-tab tbody tr:last-child td{border-bottom:0}
.pdia-tab th:first-child,.pdia-tab td:first-child{padding-left:1.25rem}
.pdia-tab th:last-child,.pdia-tab td:last-child{padding-right:1.25rem}
.pdia-tab.compacta td,.pdia-tab.compacta th{padding-left:.625rem;padding-right:.625rem;white-space:nowrap}
.pdia-tab.compacta td:first-child,.pdia-tab.compacta th:first-child{padding-left:1.25rem}
.pdia-tab .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pdia-tab .zero{color:var(--txt-apagado)}
.pdia-tab .nw{white-space:nowrap}
.pdia-tab .badge{white-space:nowrap}
.pdia-tab tr.apagada td{color:var(--txt-fraco)}
.pdia-tab tr.apagada .retrato{opacity:.6}
.pdia-tab tr.apagada .nome{color:var(--txt-fraco);font-weight:400}
.pdia-tab tfoot td{font-weight:600;border-top:1px solid var(--linha);border-bottom:0}
.pdia-tab td.pdia-acoes{text-align:right;white-space:nowrap}
.pdia-tab td.seta{width:1.5rem;color:var(--txt-apagado)}
.pdia-tab td.seta svg{width:1rem;height:1rem}
.pdia-c-pres{width:10rem} .pdia-c-chegou{width:8rem} .pdia-c-guiche{width:12rem}
.pdia-c-acoes{width:15rem;text-align:right!important} .pdia-c-per{width:13rem}
.pdia-c-quando{width:8.5rem} .pdia-c-nota{width:7.5rem} .pdia-c-senha{width:13rem}
.pdia-c-canal{width:5.5rem} .pdia-c-tipo{width:13rem} .pdia-c-disp{width:10rem} .pdia-c-grav{width:6.5rem}
.pdia-cod{font-size:var(--f-13);font-weight:500;font-variant-numeric:tabular-nums}
.pdia-sub{display:block;font-size:var(--f-12);color:var(--txt-fraco);margin-top:.0625rem;font-weight:400}
.pdia-a-direita{margin:0 0 0 auto!important}
.pdia-vazio-linha{color:var(--txt-apagado);font-size:var(--f-13)}
.pdia-quem{display:flex;gap:.625rem;align-items:center;min-width:0;text-decoration:none;color:inherit}
.pdia-quem .retrato{width:2rem;height:2rem;font-size:var(--f-12);flex-shrink:0}
.pdia-quem .retrato.xs{width:1.625rem;height:1.625rem}
.pdia-quem-txt{display:flex;flex-direction:column;min-width:0}
.pdia-quem .nome{font-size:var(--f-14);font-weight:500;color:var(--txt-forte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdia-acao{display:inline-flex;gap:.375rem;align-items:center;white-space:nowrap}
.pdia-acao svg{width:1rem;height:1rem}
.pdia-form-linha{display:inline}
.pdia-curto-largo{display:inline}

/* a árvore: guichê → quem ocupou (e satisfação por guichê → usuário) */
.pdia-arvore tr.mae td{background:var(--sup-fraca)}
.pdia-arvore tr.mae.apagada td{background:transparent}
.pdia-arvore tr.filha td:first-child{padding-left:2.5rem;position:relative}
.pdia-arvore tr.filha td:first-child::before{content:"";position:absolute;left:1.5rem;top:0;bottom:50%;
  width:.625rem;border-left:1px solid var(--linha-forte);border-bottom:1px solid var(--linha-forte)}
.pdia-arvore tr.filha.meio td:first-child::after{content:"";position:absolute;left:1.5rem;top:50%;bottom:0;
  border-left:1px solid var(--linha-forte)}
.pdia-periodo{font-size:var(--f-13);color:var(--txt-fraco);white-space:nowrap;font-variant-numeric:tabular-nums}
.pdia-no-posto{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--f-13);color:var(--txt-forte);white-space:nowrap}
.pdia-no-posto i{width:.5rem;height:.5rem;border-radius:9999px;background:var(--ok)}
.pdia-filhas{display:flex;flex-direction:column;gap:.625rem;margin-top:.75rem;padding-left:.75rem;border-left:2px solid var(--linha-fina)}

/* Guichês: a faixa «Agora» — sempre o momento. AZUL (informação), nunca vermelho */
.pdia-agora{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;
  border-radius:var(--raio);background:var(--acao-suave);outline:1px solid var(--acao);outline-offset:-1px;
  color:var(--txt-forte);font-size:var(--f-13)}
.pdia-agora .rot{display:inline-flex;align-items:center;gap:.375rem;font-weight:600;color:var(--acao-texto)}
.pdia-agora .rot svg{width:1rem;height:1rem}
.pdia-agora .pdia-pil{background:var(--sup-cartao);margin:0}
.pdia-agora .sep{width:1px;align-self:stretch;background:var(--acao);opacity:.35;margin:0 .25rem}
.pdia-agora .pdia-agora-nota{flex-basis:100%;font-size:var(--f-12);color:var(--txt-fraco)}

/* Usuários: cabeçalho que ordena, linha que abre o detalhe */
.pdia-ord{display:inline-flex;align-items:center;gap:.25rem;color:inherit;text-decoration:none;white-space:nowrap}
.pdia-ord .seta{display:inline-flex;opacity:.45}
.pdia-ord .seta svg{width:.875rem;height:.875rem}
.pdia-ord.on{color:var(--txt-forte);font-weight:600}
.pdia-ord.on .seta{opacity:1;color:var(--acao-texto)}
th.n .pdia-ord{justify-content:flex-end}
.pdia-linha-clica{cursor:pointer}
.pdia-tab tr.pdia-linha-clica:hover td{background:var(--sup-hover)}
.pdia-hor{display:block;font-size:var(--f-12);color:var(--txt-fraco);margin-top:.125rem;white-space:nowrap}
.pdia-gs{display:flex;flex-direction:column;gap:.125rem;font-size:var(--f-13)}
.pdia-aviso-naomon{margin-bottom:1rem}
.pdia-aviso-naomon a{color:var(--link)}
.pdia-naomon-nome{display:inline-flex;align-items:center;gap:.25rem;color:var(--txt-apagado);font-style:italic}
.pdia-naomon-nome svg{width:.8125rem;height:.8125rem}
.pdia-voltar{display:inline-flex;align-items:center;gap:.375rem;margin-bottom:.75rem;font-size:var(--f-13);
  color:var(--link);text-decoration:none}
.pdia-voltar svg{width:1rem;height:1rem}
.pdia-pessoa-cab{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;padding:1rem 1.25rem .75rem}
.pdia-pessoa-cab .t{flex:1;min-width:0;display:flex;flex-direction:column}
.pdia-pessoa-cab .t b{font-size:var(--f-16);color:var(--txt-forte)}
.pdia-pessoa-cab .t span{font-size:var(--f-13);color:var(--txt-fraco)}
.pdia-pessoa-nav{display:flex;gap:.375rem;align-items:center}
.pdia-mini{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;padding:0 1.25rem 1rem}
.pdia-mini>div{font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-mini b{display:block;font-size:var(--f-18);font-weight:600;color:var(--txt-forte);font-variant-numeric:tabular-nums;margin-top:.125rem}

/* estrelas âmbar do tablet (estrela-ambar-cheia|vazia.svg), em miniatura */
.pdia-est{display:inline-flex;gap:.125rem;align-items:center;vertical-align:middle}
.pdia-e{display:block;flex-shrink:0}
.pdia-e path{stroke-width:7;stroke-linejoin:round}
.pdia-e.cheia path{fill:var(--av-icone);stroke:var(--av-icone)}
.pdia-e.vazia path{fill:var(--sup-cartao);stroke:var(--txt-apagado)}
.pdia-media{display:inline-flex;align-items:center;gap:.375rem;font-variant-numeric:tabular-nums}
.pdia-media b{font-weight:500}
.pdia-dia-nota{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:center}
.pdia-media-grande{display:flex;align-items:baseline;gap:.375rem;margin-bottom:.25rem}
.pdia-media-grande .v{font-size:var(--f-30);font-weight:600;color:var(--txt-forte);font-variant-numeric:tabular-nums}
.pdia-dist{display:flex;flex-direction:column;gap:.375rem}
.pdia-dist>div{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 2rem;gap:.5rem;align-items:center;font-size:var(--f-13);color:var(--txt-fraco)}
.pdia-dist .dn{display:inline-flex;align-items:center;gap:.25rem}
.pdia-dist .b{height:.5rem;border-radius:9999px;background:var(--sup-rebaixada);overflow:hidden}
.pdia-dist .b i{display:block;height:100%;background:var(--av-icone);border-radius:9999px}
.pdia-dist .baixa{color:var(--txt-forte);font-weight:500}
.pdia-dist .baixa .b i{background:var(--er)}
.pdia-dist .q{text-align:right;font-variant-numeric:tabular-nums}
.pdia-aval td,.pdia-inc td{vertical-align:top}
.pdia-coment{color:var(--txt-forte);line-height:1.5;min-width:14rem;white-space:normal!important}
.pdia-coment.vazio{color:var(--txt-apagado);font-style:italic}
/* nota baixa (dono, 30/09): sem o «colchete» — o fundo de estado de erro na linha/item
   e a pílula «nota baixa», suave, como as do sistema */
.pdia-tab tr.pdia-baixa td{background:var(--er-fundo)}
.pdia-item.pdia-baixa{background:var(--er-fundo)}
.pdia-sel-baixa{display:inline-flex;align-items:center;font-size:var(--f-12);font-weight:var(--font-weight-semibold);white-space:nowrap;
  background:var(--er-suave);color:var(--sobre-er-suave);border-radius:9999px;padding:.0625rem .5rem;
  outline:1px solid color-mix(in srgb, currentColor 40%, transparent);outline-offset:-1px}
.pdia-tab .pdia-sel-baixa{margin-left:.5rem}
.pdia-item .pdia-sel-baixa{margin:0 0 0 .5rem}
.pdia-sel-baixa-nota{font-size:var(--f-12);color:var(--txt-fraco);margin-left:.5rem}
.pdia-pe-lista{display:flex;justify-content:space-between;gap:1rem;padding:.625rem 1.25rem;border-top:1px solid var(--linha-fina);
  font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-pag{display:flex;gap:1rem}
.pdia-pag a{color:var(--link);text-decoration:none}
.pdia-ler-tabs{padding:0 0 .5rem}
.pdia-nota-pe{margin:.75rem 0 0}

/* Incidentes */
.pdia-relato{color:var(--txt-forte);line-height:1.5;min-width:18rem;max-width:34rem;white-space:normal!important}
.pdia-tipo-inc{display:inline-flex;align-items:center;gap:.375rem;font-weight:500;color:var(--txt-forte);white-space:nowrap}
.pdia-tipo-inc svg{width:.875rem;height:.875rem;color:var(--av-icone);flex-shrink:0}
.pdia-tipo-inc.forte svg{color:var(--er)}
.pdia-disparos{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.pdia-disparos span{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--f-12);color:var(--txt-fraco);white-space:nowrap}
.pdia-disparos span svg{width:.75rem;height:.75rem}
.pdia-disparos span.on{color:var(--txt-forte)}
.pdia-inc-mini{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--f-12);color:var(--av);margin-left:.25rem}
.pdia-inc-mini svg{width:.75rem;height:.75rem}

/* «Como ler»: o texto explicativo, num lugar só e recolhido */
.pdia-ler{margin-top:1rem;background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);outline-offset:-1px}
.pdia-ler>summary{display:flex;gap:.5rem;align-items:center;padding:.75rem 1.25rem;cursor:pointer;list-style:none;
  font-size:var(--f-14);font-weight:500;color:var(--txt-forte)}
.pdia-ler>summary::-webkit-details-marker{display:none}
.pdia-ler>summary svg{width:1.125rem;height:1.125rem;color:var(--txt-fraco)}
.pdia-ler>summary .seta{margin-left:auto;display:flex;transition:transform .12s}
.pdia-ler[open]>summary .seta{transform:rotate(180deg)}
.pdia-ler>div{padding:0 1.25rem 1rem 2.875rem;font-size:var(--f-13);line-height:1.6;color:var(--txt-fraco)}
.pdia-ler>div p{margin:0 0 .5rem}

/* o celular: a tabela vira lista de cartões */
.pdia-celular{display:none!important}
.pdia-itens{display:flex;flex-direction:column}
.pdia-item{display:block;padding:.875rem 1rem;border-top:1px solid var(--linha-fina);text-decoration:none;color:inherit}
.pdia-item:first-child{border-top:0}
.pdia-item.apagada{opacity:.62}
.pdia-item-cab{display:flex;gap:.625rem;align-items:center}
.pdia-item-cab .t{flex:1;min-width:0;font-weight:600;font-size:var(--f-14);color:var(--txt-forte)}
.pdia-item-cab>svg{width:1rem;height:1rem;color:var(--txt-apagado);flex-shrink:0}
.pdia-item-pares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.625rem}
.pdia-item-pares.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pdia-item-pares>div{font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-item-pares b{display:block;font-size:var(--f-14);font-weight:500;color:var(--txt-forte);font-variant-numeric:tabular-nums}
.pdia-item-acoes{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.pdia-item-acoes .btn,.pdia-item-acoes .pdia-form-linha{flex:1}
.pdia-item-acoes .pdia-form-linha .btn{width:100%}
.pdia-item-est{margin-top:.375rem}
.pdia-texto{font-size:var(--f-14);line-height:1.55;color:var(--txt-forte);margin-top:.375rem}
.pdia-item .pdia-sub{margin-top:.25rem}

/* Meu dia: a presença do dia e os seis números */
.pdia-meu-presenca{display:flex;gap:.5rem 1.25rem;flex-wrap:wrap;align-items:center;padding:.75rem 1rem;margin-bottom:1rem;
  border-radius:var(--raio);background:var(--sup-cartao);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  font-size:var(--f-13);color:var(--txt-fraco)}
.pdia-meu-presenca .it{display:inline-flex;align-items:center;gap:.375rem}
.pdia-meu-presenca .it b{color:var(--txt-forte);font-weight:600}
.pdia-meu-presenca svg{width:1rem;height:1rem}
.pdia-meu-presenca .fraco{color:var(--txt-apagado);font-size:var(--f-12)}
.pdia-meu-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.pdia-meu-kpis>div{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);outline-offset:-1px;
  padding:.875rem 1rem;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.pdia-meu-kpis .r{display:flex;align-items:center;gap:.375rem;font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-meu-kpis .r svg{width:.9375rem;height:.9375rem}
.pdia-meu-kpis b{font-size:var(--f-26);font-weight:600;color:var(--txt-forte);font-variant-numeric:tabular-nums;line-height:1.15}
.pdia-meu-kpis .s{font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-meu-sat{display:flex;align-items:center;gap:.5rem}

/* o atalho «Meu dia» no pé da gaveta da fila */
.pdia-meu-dia{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;margin:0 0 .5rem;border-radius:var(--raio);
  background:var(--sup-fraca);outline:1px solid var(--linha-fina);outline-offset:-1px;text-decoration:none;color:var(--txt-forte)}
.pdia-meu-dia:hover{background:var(--sup-hover)}
.pdia-meu-dia .ic{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:9999px;
  background:var(--acao-suave);color:var(--acao-texto);flex-shrink:0}
.pdia-meu-dia .ic svg{width:1rem;height:1rem}
.pdia-meu-dia .tx{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--f-13);line-height:1.35}
.pdia-meu-dia small{font-size:var(--f-12);color:var(--txt-fraco)}
.pdia-meu-dia .seta{color:var(--txt-apagado);display:flex}
.pdia-meu-dia .seta svg{width:1rem;height:1rem}

/* tablet: os números em três colunas, as duas colunas empilham */
@media (max-width:1023.98px){
  .pdia-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdia-meu-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pdia-mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pdia-duas,.pdia-duas.dois-um{grid-template-columns:minmax(0,1fr)}
  .pdia-card-cab .meta.longa{flex-basis:100%;order:5;margin-top:-.25rem}
}
/* celular: a tabela vira cartões; os filtros recolhem em «Filtros» */
@media (max-width:639.98px){
  .pdia-largo{display:none!important}
  .pdia-celular{display:flex!important}
  .pdia-per{padding:.625rem .75rem;gap:.375rem}
  .pdia-per .titulo{flex:1;text-align:center;font-size:var(--f-14);white-space:normal}
  .pdia-per .titulo small{display:block;margin:0}
  .pdia-per .espaco,.pdia-hoje,.pdia-data-bt .t,.pdia-exportar>summary .t,.pdia-exportar>summary svg:last-child{display:none}
  .pdia-per .pdia-seg-per{order:9;width:100%;display:flex}
  .pdia-per .pdia-seg-per>a{flex:1;text-align:center}
  .pdia-data-pop{left:auto;right:-3rem}
  .pdia-menu-exp{width:min(22rem,calc(100vw - 2rem))}
  .pdia-fil{display:none}
  .pdia-fil-cel{display:block;padding:.5rem .75rem;border-top:1px solid var(--linha-fina)}
  .pdia-fil-cel>summary{gap:.375rem}
  .pdia-fil-cel>summary .ct{display:inline-grid;place-items:center;min-width:1.125rem;height:1.125rem;border-radius:9999px;
    background:var(--acao);color:var(--txt-sobre-acao);font-size:var(--f-12);padding:0 .25rem}
  .pdia-fil-folha{display:flex;flex-direction:column;align-items:stretch;gap:.625rem;margin-top:.625rem}
  .pdia-fil-folha .pdia-busca{flex:none}
  .pdia-fil-folha .pdia-pop{position:static;box-shadow:none;margin-top:.375rem}
  .pdia-fil-folha .seg{display:flex}
  .pdia-fil-folha .seg>a{flex:1;text-align:center}
  .pdia-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pdia-kpi .v{font-size:var(--f-20)}
  .pdia-meu-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pdia-meu-kpis b{font-size:var(--f-20)}
  .pdia-mini{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 1rem 1rem}
  .pdia-tab{font-size:var(--f-13)}
  .pdia-tab th,.pdia-tab td{padding:.625rem .4375rem}
  .pdia-tab th:first-child,.pdia-tab td:first-child{padding-left:1rem}
  .pdia-tab th:last-child,.pdia-tab td:last-child{padding-right:1rem}
  .pdia-tab.estreita td:first-child{white-space:normal}
  .pdia-curto-largo{display:none}
  .pdia-dia-nota{grid-template-columns:minmax(0,1fr)}
  .pdia-agora .sep{display:none}
  .pdia-pessoa-nav{width:100%}
  .pdia-ler>div{padding:0 1rem 1rem}
}
@media print{
  .pdia-abas,.pdia-fil,.pdia-fil-cel,.pdia-exportar,.pdia-data,.pdia-hoje,.pdia-seg-per,
  .pdia-per>a.btn,.pdia-acoes,.pdia-acao,.pdia-ler>summary .seta,.pdia-meu-dia{display:none!important}
  .pdia-barra,.pdia-card,.pdia-kpi,.pdia-agora{box-shadow:none}
  .pdia-rola{overflow:visible}
}

/* ── o Início v2: cabeçalho, os 12 cartões, Hoje, Minhas pendências ───── */
.in-cab{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.in-cab h1{margin:0}
.in-data{font-size:var(--f-14);color:var(--txt-fraco);margin-top:.25rem}
.in-vivo{margin-left:auto;display:inline-flex;align-items:center;gap:.375rem;font-size:var(--f-12);color:var(--txt-fraco)}
.in-vivo i{width:.5rem;height:.5rem;border-radius:9999px;background:var(--ok);display:inline-block}
.in-secao{display:flex;align-items:baseline;gap:.75rem;margin:1.25rem 0 .5rem;flex-wrap:wrap}
.in-secao h2{margin:0;font-size:var(--f-13);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco)}
.in-secao .meta{font-size:var(--f-12);color:var(--txt-fraco)}
.in-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@media (max-width:1023.98px){.in-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
.in-kpi{position:relative;display:flex;flex-direction:column;background:var(--sup-cartao);border-radius:var(--raio);
  outline:1px solid var(--linha-cartao);box-shadow:var(--sombra-cartao);padding:.875rem 1rem .75rem;color:inherit;text-decoration:none;min-width:0}
a.in-kpi:hover{outline-color:var(--acao);background:var(--sup-hover)}
a.in-kpi:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.in-kpi .r{display:flex;align-items:center;gap:.375rem;font-size:var(--f-12);font-weight:var(--font-weight-medium);color:var(--txt-fraco)}
.in-kpi .r svg{width:1rem;height:1rem;flex-shrink:0}
.in-kpi .v{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.5rem;margin-top:.375rem;font-size:var(--f-30);
  font-weight:var(--font-weight-semibold);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--txt-forte)}
.in-kpi .v small{font-size:var(--f-14);font-weight:var(--font-weight-medium);color:var(--txt-fraco)}
.in-kpi .s{font-size:var(--f-12);color:var(--txt-fraco);margin-top:.25rem;line-height:1.45}
.in-kpi .s b{color:var(--txt-forte);font-weight:var(--font-weight-semibold)}
.in-kpi .pe{display:flex;align-items:center;gap:.25rem;margin-top:auto;padding-top:.625rem;font-size:var(--f-12);color:var(--acao-texto);font-weight:var(--font-weight-medium)}
.in-kpi .pe svg{width:.875rem;height:.875rem}
.in-kpi .pe.fechado{color:var(--txt-fraco);font-weight:var(--font-weight-normal)}
.in-kpi.in-alerta .v{color:var(--er-texto)}
/* o cartão que pede atenção (dono, 30/09, revisão das telas): sem o «colchete»
   à esquerda — o fundo de estado, o fio do estado e o ícone na cor dele */
.in-kpi.in-alerta,a.in-kpi.in-alerta:hover{background:var(--er-fundo)}
.in-kpi.in-alerta{outline-color:var(--er-linha)}
.in-kpi.in-atencao,a.in-kpi.in-atencao:hover{background:var(--av-fundo)}
.in-kpi.in-atencao{outline-color:var(--av-linha)}
.in-kpi.in-alerta .r svg{color:var(--er-icone)}
.in-kpi.in-atencao .r svg{color:var(--av-icone)}
.in-tend{display:inline-flex;align-items:center;gap:.125rem;font-size:var(--f-12);font-weight:var(--font-weight-semibold);border-radius:9999px;
  padding:.0625rem .5rem;white-space:nowrap;align-self:center}
.in-tend svg{width:.75rem;height:.75rem}
.in-tend.bom{color:var(--ok);background:var(--ok-fundo)}
.in-tend.ruim{color:var(--er-texto);background:var(--er-fundo)}
.in-tend.igual{color:var(--txt-fraco);background:var(--sup-rebaixada)}
.in-barra{display:flex;height:.375rem;border-radius:9999px;overflow:hidden;background:var(--sup-rebaixada);margin-top:.5rem}
.in-barra i{display:block;height:100%}
.in-barra .in-ok{background:var(--ok)}.in-barra .in-av{background:var(--av)}.in-barra .in-ap{background:var(--linha-forte)}
.in-dois{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.375rem}
.in-dois>div{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.in-kpi .in-dois .v{margin-top:0}
.in-dois .rot{font-size:var(--f-12);color:var(--txt-fraco);display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.in-kpi .in-dois .sis .v{color:var(--txt-fraco)}
.selo-sistema{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--t-11);font-weight:var(--font-weight-semibold);letter-spacing:.02em;
  border-radius:var(--radius-sm);padding:0 .375rem;height:1.125rem;background:var(--sup-rebaixada);color:var(--txt-fraco);
  outline:1px solid var(--linha-fina);outline-offset:-1px;white-space:nowrap}
.selo-sistema svg{width:.75rem;height:.75rem}
.in-card{background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);box-shadow:var(--sombra-cartao);min-width:0}
.in-card-cab{display:flex;gap:.75rem;align-items:center;padding:1rem 1.25rem .75rem;min-width:0}
.in-card-cab h3{margin:0;font-size:var(--f-16);font-weight:var(--font-weight-semibold)}
.in-card-cab .meta{font-size:var(--f-13);color:var(--txt-fraco);min-width:0}
.in-card-link{margin-left:auto;white-space:nowrap;flex-shrink:0;font-size:var(--f-12);color:var(--acao-texto);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.in-card-link svg{width:.875rem;height:.875rem}
.in-mod-ic{width:2rem;height:2rem;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0;
  background:var(--sup-selecionada);color:var(--txt-marca)}
.in-mod-ic svg{width:1rem;height:1rem}
.in-duas{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.75rem;margin-top:1.25rem}
@media (max-width:1023.98px){.in-duas{grid-template-columns:minmax(0,1fr)}}
.in-lista{list-style:none;margin:0;padding:0 .5rem .5rem}
.in-lista li{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--raio);min-width:0}
.in-lista li+li{border-top:1px solid var(--linha-fina)}
.in-lista .linha{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none;flex:1;min-width:0}
.in-lista a.linha:hover .t{color:var(--acao-texto)}
.in-lista .h{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);width:3rem;flex-shrink:0}
.in-lista .t{flex:1;min-width:0;font-size:var(--f-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-lista .t small{display:block;color:var(--txt-fraco);font-size:var(--f-12);white-space:normal}
.in-lista .n{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);font-size:var(--f-16);min-width:2rem;text-align:right}
.in-lista .zero{color:var(--txt-apagado);font-weight:var(--font-weight-normal)}
.in-lista .ic{display:flex;color:var(--txt-fraco)}.in-lista .ic svg{width:1rem;height:1rem}
.in-sit{font-size:var(--f-12);border-radius:9999px;padding:.0625rem .5rem;white-space:nowrap;color:var(--acao-texto);background:var(--acao-suave)}
.in-sit.chegou{color:var(--ok);background:var(--ok-fundo)}
.in-sit.faltou{color:var(--txt-fraco);background:var(--sup-rebaixada)}
.in-sub{padding:.25rem 1.25rem 0;font-size:var(--f-12);font-weight:var(--font-weight-semibold);color:var(--txt-fraco);text-transform:uppercase;letter-spacing:.04em}
.in-vazio{font-size:var(--f-13);color:var(--txt-fraco);margin:0;padding:.5rem 1.25rem .75rem}
.in-sem-chave{display:flex;align-items:center;gap:.375rem;font-size:var(--f-12);color:var(--txt-fraco);padding:.25rem 1.25rem .875rem}
.in-sem-chave svg{width:.875rem;height:.875rem}
.in-restrito{margin-top:1.25rem;border-radius:var(--raio);outline:1px dashed var(--linha-forte);padding:.75rem;background:var(--sup-fraca)}
.in-restrito .in-secao{margin-top:.125rem}
.in-mini{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
@media (max-width:1023.98px){.in-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
.in-mini a{display:flex;flex-direction:column;gap:.125rem;background:var(--sup-cartao);border-radius:var(--raio);outline:1px solid var(--linha-cartao);
  padding:.625rem .75rem;color:inherit;text-decoration:none;min-width:0}
.in-mini a:hover{outline-color:var(--acao)}
.in-mini .v{font-size:var(--f-20);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}
.in-mini .r{font-size:var(--f-12);color:var(--txt-fraco)}
.in-mini a.ruim .v{color:var(--er-texto)}
.in-mini a.zero .v{color:var(--txt-apagado)}
.in-atalhos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@media (max-width:1023.98px){.in-atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.in-atalhos .in-card-cab{padding:.75rem 1rem .5rem}
.in-atalhos .in-card-cab h3{font-size:var(--f-14);flex:1}
.in-links{list-style:none;margin:0;padding:0 .5rem .5rem}
.in-links a{display:flex;align-items:center;gap:.5rem;padding:.375rem .625rem;border-radius:var(--radius-md);font-size:var(--f-13);
  color:var(--txt-forte);text-decoration:none}
.in-links a:hover{background:var(--sup-hover);color:var(--acao-texto)}
.in-links .pilula-conta{margin-left:auto}
.in-links .seta{display:flex;color:var(--txt-apagado);margin-left:auto}
.in-links .pilula-conta+.seta{margin-left:0}
.in-links .seta svg{width:.875rem;height:.875rem}
.in-cfg{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;padding:.75rem 1rem;background:var(--sup-cartao);border-radius:var(--raio);
  outline:1px solid var(--linha-cartao);color:inherit;text-decoration:none;min-width:0}
.in-cfg:hover{outline-color:var(--acao)}
.in-cfg b{font-weight:var(--font-weight-semibold)}
.in-cfg .meta{color:var(--txt-fraco);font-size:var(--f-13);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-cfg .seta{display:flex;color:var(--txt-apagado)}
@media (max-width:639.98px){
  .in-grade{gap:.5rem}
  .in-kpi{padding:.75rem .75rem .625rem}
  .in-kpi .v{font-size:var(--f-26);column-gap:.375rem}
  .in-kpi .v small{display:block;font-size:var(--f-12)}
  .in-vivo{margin-left:0}
  .in-atalhos{grid-template-columns:minmax(0,1fr)}
  .in-lista li{padding:.5rem}
  .in-card-cab{padding:.875rem 1rem .625rem;flex-wrap:wrap}
}

/* ── o cartão PLANTÃO ──────────────────────────────────────────────────── */
.in-plantao{margin-top:1.25rem}
.pl-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sem{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.pl-sem svg{width:.875rem;height:.875rem}
.pl-hoje{display:flex;align-items:center;gap:.5rem;font-size:var(--f-13);padding:.125rem 1.25rem .75rem;color:var(--txt-forte)}
.pl-hoje svg{width:1rem;height:1rem;color:var(--txt-fraco);flex-shrink:0}
.pl-faixa{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;padding:0 1rem 1rem}
.pl-dia{border-radius:var(--raio);outline:1px solid var(--linha-fina);outline-offset:-1px;padding:.5rem .625rem .625rem;min-width:0;
  display:flex;flex-direction:column;gap:.25rem;background:var(--sup-cartao)}
.pl-dia .q{font-size:var(--f-12);color:var(--txt-fraco);display:flex;align-items:center;gap:.375rem}
.pl-dia .q b{color:var(--txt-forte);font-weight:var(--font-weight-semibold)}
.pl-dia .hj{font-size:var(--t-11);font-weight:var(--font-weight-semibold);color:var(--acao-texto);background:var(--acao-suave);border-radius:9999px;padding:0 .375rem}
.pl-dia.util{background:var(--sup-fraca);outline-style:dashed}
.pl-dia.util .n{font-size:var(--f-12);color:var(--txt-apagado);font-weight:var(--font-weight-normal)}
.pl-dia.plantao{box-shadow:inset 0 3px 0 var(--acao)}
.pl-dia.hoje{outline:2px solid var(--acao);outline-offset:-2px}
.pl-dia .mot{font-size:var(--t-11);color:var(--txt-fraco);text-transform:uppercase;letter-spacing:.04em}
.pl-dia .n{font-size:var(--f-13);font-weight:var(--font-weight-semibold);color:var(--txt-forte);line-height:1.3;overflow-wrap:anywhere}
.pl-dia .n s{color:var(--txt-fraco);text-decoration-thickness:1px}
.pl-dia .sa{font-size:var(--f-12);color:var(--txt-fraco);line-height:1.35;overflow-wrap:anywhere}
.pl-dia.descoberto{box-shadow:inset 0 3px 0 var(--av);background:var(--av-fundo)}
.pl-sit{display:flex;align-items:center;gap:.25rem;margin-top:.375rem;font-size:var(--f-12);font-weight:var(--font-weight-semibold);flex-wrap:wrap}
.pl-sit svg{width:.875rem;height:.875rem;flex-shrink:0}
.pl-sit small{flex-basis:100%;font-weight:var(--font-weight-normal);color:var(--txt-fraco);padding-left:1.125rem}
.pl-sit.av{color:var(--sobre-av-suave)} .pl-sit.ok{color:var(--ok)}
.pl-alerta{display:flex;gap:.75rem;align-items:flex-start;margin:0 1rem .75rem;padding:.75rem .875rem;border-radius:var(--raio);
  background:var(--av-fundo);outline:1px solid var(--av-linha);outline-offset:-1px;font-size:var(--f-13);color:var(--txt-forte);line-height:1.5}
.pl-alerta .ic{color:var(--av-icone);display:flex;margin-top:.0625rem}
.pl-alerta .ic svg{width:1.125rem;height:1.125rem}
.pl-alerta .tx{flex:1;min-width:0}
.pl-alerta-mais{color:var(--txt-fraco)}
.pl-alerta .bts{display:flex;gap:.375rem;flex-shrink:0;flex-wrap:wrap}
.pl-alerta .bts svg{width:.875rem;height:.875rem}
.pl-legenda{display:flex;gap:1rem;flex-wrap:wrap;padding:0 1rem 1rem;font-size:var(--f-12);color:var(--txt-fraco)}
.pl-legenda span{display:inline-flex;align-items:center;gap:.25rem}
.pl-legenda svg{width:.875rem;height:.875rem}
.pl-legenda .pl-ok{color:var(--ok)} .pl-legenda .pl-av{color:var(--sobre-av-suave)}
@media (max-width:1023.98px){.pl-faixa{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:639.98px){
  .pl-meta{display:none}
  .pl-faixa{grid-template-columns:minmax(0,1fr);gap:.375rem;padding:0 .75rem .75rem}
  .pl-dia{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:.125rem .5rem;padding:.5rem .625rem}
  .pl-dia .q{width:5.5rem}
  .pl-dia.util{padding:.25rem .625rem}
  .pl-dia .sa,.pl-dia .pl-sit{width:100%;padding-left:6rem;margin-top:0}
  .pl-sit small{flex-basis:auto;padding:0}
  .pl-alerta{flex-wrap:wrap;margin:0 .75rem .75rem}
  .pl-alerta .bts{width:100%}
  .pl-hoje{padding:.125rem 1rem .75rem}
}

/* ---------- CONFIGURAÇÃO DOS AVISOS (/configuracoes/avisos/) -----------------
   Desktop: tabela de quatro colunas. Celular (< 640): cada aviso vira um cartão
   (nome e pílulas, quem recebe, e as duas chaves lado a lado com o rótulo) —
   sem rolagem lateral, sem coluna cortada (03/10/2026). */
.cfg-av-quem{width:12rem}
.cfg-av-chave{width:5rem;text-align:center}
.cfg-av-email{width:8rem}
.cfg-av-pilula{margin-left:.375rem}
.cfg-av-pedido{font-size:var(--t-11)}
.tabela-config-avisos .marc{justify-content:center}
@media (max-width:639.98px){
  .tabela-config-avisos,.tabela-config-avisos tbody{display:block}
  main :is(div,section,form):has(>table.tabela-config-avisos)>table.tabela-config-avisos{width:100%;min-width:0}
  .tabela-config-avisos thead{display:none}
  .tabela-config-avisos tr{display:grid;grid-template-columns:1fr 1fr;gap:.375rem .75rem;
    padding:.75rem 0;border-bottom:1px solid var(--linha-fina)}
  .tabela-config-avisos tr:last-child{border-bottom:0}
  .tabela-config-avisos td{display:block;width:auto;padding:0;border:0;min-width:0}
  .tabela-config-avisos td:first-child,.tabela-config-avisos td.cfg-av-quem{grid-column:1/-1}
  .tabela-config-avisos td:first-child .cfg-av-pilula{margin-left:.25rem}
  .tabela-config-avisos td.cfg-av-chave{display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:.5rem;text-align:left;padding:.375rem .625rem;border-radius:var(--radius-md);
    background:var(--sup-rebaixada)}
  .tabela-config-avisos td.cfg-av-chave::before{content:attr(data-rotulo);font-size:var(--t-12);
    color:var(--txt-fraco)}
  .tabela-config-avisos td.cfg-av-chave .marc{margin:0}
  .tabela-config-avisos td.cfg-av-chave .cfg-av-pedido{flex-basis:100%}
}
/* o incidente do painel do dia: uma frase e «Dar por tratado» na própria linha */
.pdia-tratar-form{display:flex;gap:.375rem;align-items:center}
.pdia-tratar-form input{min-width:11rem;flex:1}
.pdia-tratar{white-space:normal}
/* /avisos/: o rótulo da aba inteiro no celular (a faixa quebra em duas linhas
   em vez de cortar «Tod…»), e a segunda fileira de filtros por tipo */
.avisos-pagina-lista .abas{flex-wrap:wrap;overflow:visible;row-gap:.25rem}
.avisos-pagina-lista button.aba .rot{overflow:visible;text-overflow:clip}
.avisos-tipos{margin-top:-.25rem}
.avisos-explica{margin:0 0 .75rem}
/* a ficha da conexão: as regras do teste (dono, 03/10/2026) */
.cx-vigia-desc{margin:0 0 .625rem;line-height:1.55}
.cx-vigia-nota{font-size:var(--t-10);margin-top:.25rem;line-height:1.45}
.cx-paga{margin-top:.75rem}
.cx-selo{margin-top:.75rem}
.grav-inc{padding:.5rem 0;border-top:1px solid var(--linha-fina)}
.grav-inc:first-child{border-top:0}
/* a aba Vínculos da ficha (T5): a tabela cabe na largura, com o texto quebrando;
   no celular cada linha vira cartão, com o rótulo sobre o valor */
/* a especificidade vence o «width:max-content» geral de tabela em main */
main .rola-x.rola-x>table.vin-tab.vin-tab{min-width:0;width:100%}
/* cabe sem rolar; visível, o balão do lápis não conta como largura */
.rola-x.vin-rola{overflow-x:visible}
.vin-tab th,.vin-tab td{white-space:normal;overflow-wrap:break-word;padding-inline:.375rem}
.vin-tab .vin-arquivo{overflow-wrap:anywhere}
.vin-tab .vin-acoes{text-align:right;white-space:nowrap}
/* a pessoa falecida leva mais pílulas: «Mostrar» desce, como abaixo de 1024 */
.pessoa-cab-desce .pessoa-cab-quem{flex:1 1 auto}
.pessoa-cab-desce .pessoa-cab-fio{display:none}
.pessoa-cab-desce .pessoa-cab-fin{order:3;flex-basis:100%}
@media (max-width:639.98px){
  main .rola-x.rola-x>table.vin-tab.vin-tab,.vin-tab tbody,.vin-tab tr,.vin-tab td{display:block;width:auto}
  .vin-tab thead{display:none}
  .vin-tab tr{padding:.625rem 0;border-bottom:1px solid var(--linha-fina)}
  .vin-tab tr:last-child{border-bottom:0}
  .vin-tab td{padding:.1875rem 0;border:0}
  .vin-tab td[data-rot]::before{content:attr(data-rot);display:block;font-size:var(--t-10-5);color:var(--txt-fraco)}
  .vin-acoes.vazio{display:none}
}

/* a aba Identificação da ficha (frente T2, prancha FichaCCN-Identificacao) */
.ident{display:flex;flex-direction:column;gap:1.5rem;padding:1.25rem 1.5rem;background:var(--sup-cartao);border-radius:var(--raio);
  outline:1px solid var(--linha-cartao);outline-offset:-1px}
.ident-bloco{display:flex;flex-direction:column;gap:.75rem}
.ident [hidden],.ident-painel[hidden]{display:none!important}
.ident-t{margin:.75rem 0 0;font-size:var(--t-14,1rem);font-weight:var(--font-weight-semibold)}
.ident-bloco>.ident-t:first-of-type{margin-top:0}
.ident-sub{margin-left:.375rem;font-size:var(--t-12-5);font-weight:400;color:var(--txt-fraco)}
.ident-tranca{display:inline-flex;color:var(--txt-apagado)}
.ident-cresce{flex:1;min-width:0}
.ident-nota{line-height:1.5}
.ident .linha-reg{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem;border-radius:var(--radius-md);background:var(--sup-rebaixada)}
.ident-ok{display:flex;color:var(--ok)}
.ident-ret{flex-shrink:0;width:2rem;height:2rem;font-size:var(--t-12)}
.ident-pendente{background:var(--av-fundo)!important;outline:1px solid var(--av-linha);outline-offset:-1px}
.ident-sugestao{align-items:center;flex-wrap:wrap;background:var(--info-fundo);outline-color:var(--info-linha);color:var(--txt-forte)}
.ident-sugestao .ic{color:var(--acao-texto)}
.fil{display:flex;flex-direction:column;gap:.5rem}
.fil-tabela{width:100%;border-collapse:collapse}
.fil-tabela th{padding:.5rem .75rem;text-align:left;font-size:var(--t-11);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco)}
.fil-tabela td{padding:.625rem .75rem;border-top:1px solid var(--linha-fina);vertical-align:middle}
.fil-fraco{color:var(--txt-fraco)}
.fil-acoes{white-space:nowrap;text-align:right;width:5rem}
.fil-acoes .seta-bt{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--link)}
.fil-edita>td{background:var(--sup-rebaixada)}
.fil-edita form,.fil-novo form{display:flex;flex-direction:column;gap:.75rem}
.fil-novo form{margin-top:.5rem}
.fil-novo>summary{list-style:none;display:inline-flex;cursor:pointer}
.ident tr[hidden]{display:none!important}
.ident-nac{display:flex;flex-direction:column;gap:.75rem}
.ident-conjuge{display:flex;flex-direction:column;gap:.5rem}
.ident-travado{position:relative}
.ident-cadeado{position:absolute;right:.625rem;top:calc(1.5rem + (var(--d-control-h) - 1rem)/2);display:flex;color:var(--txt-fraco)}
.ident-cadeado svg{width:1rem;height:1rem}
.ident-mudar-nome{display:flex;align-items:flex-end}
.ident-mudar-nome .btn{width:100%;white-space:normal;height:auto;min-height:var(--d-control-h)}
.ident-prof{position:relative}
.ident-prof input[type=search]{padding-right:7rem;text-overflow:ellipsis}
.ident-prof-selo{position:absolute;right:.5rem;top:calc(1.5rem + (var(--d-control-h) - 1.25rem)/2)}
.ident-prof:focus-within .ident-prof-selo{display:none}
.ident .secao-form{padding-right:0}
.ident-prof-lista{position:absolute;z-index:5;left:0;right:0;top:calc(1.5rem + var(--d-control-h) + .25rem);background:var(--sup-cartao);border-radius:var(--radius-lg);
  box-shadow:var(--sombra-janela);max-height:22rem;overflow:auto}
.ident-prof-lista:empty{display:none}
.ident-prof-item{display:flex;justify-content:space-between;gap:.75rem;width:100%;padding:.5rem .875rem;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ident-prof-item:hover,.ident-prof-item:focus-visible{background:var(--sup-hover)}
.ident-prof-item .note{white-space:nowrap}
.ident-prof-nova{border-top:1px solid var(--linha-fina)}
.ident-prof-nova>span:first-child{display:inline-flex;align-items:center;gap:.375rem}
.ident .rep-vazio{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.ident .lista-form,.ident #lista-genitores{min-width:0;max-width:100%}
.ident-achados-t{padding:.5rem .875rem .25rem;font-size:var(--t-11);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco)}
.ident-ninguem{padding:.5rem .875rem}
.ident-painel{display:flex;flex-direction:column;gap:.75rem;padding:.875rem;border-radius:var(--radius-lg);outline:2px solid var(--foco);outline-offset:-2px}
.ident-painel-cab{display:flex;justify-content:space-between;gap:.5rem}
.ident-painel-ou{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ident-achado{display:flex;align-items:center;gap:.75rem;width:100%;padding:.5rem .75rem;border:0;border-radius:var(--radius-md);background:var(--sup-rebaixada);font:inherit;color:inherit;text-align:left;cursor:pointer;margin-top:.25rem}
.ident-achado:hover,.ident-achado:focus-visible{background:var(--sup-hover)}
.ident-bloco-txt{display:block}
.ident-marca{display:flex;gap:.625rem;align-items:flex-start;cursor:pointer}
.ident-marca input{margin-top:.1875rem;flex-shrink:0}
.ident-marca .note{display:block}
.ident-link{border:0;background:none;padding:0;font:inherit;color:var(--link);cursor:pointer}
.ident-dialogo{width:min(36rem,calc(100vw - 2rem))}
.ident-dialogo>form,.ident-dialogo{display:flex;flex-direction:column;gap:.75rem}
.ident-dialogo:not([open]){display:none}
@media (max-width:639.98px){ .ident{padding:1rem} .ident-mudar-nome .btn{width:100%} .ident .linha-reg>.btn{flex:1 1 auto} .ident-prof-item{flex-direction:column;gap:.125rem} .fil-tabela tr{display:block;padding:.5rem 0;border-top:1px solid var(--linha-fina)} .fil-tabela td{display:block;padding:.125rem .25rem;border:0} .fil-tabela td.fil-sem{display:none} .fil-acoes{text-align:left} }
.ident .linha-reg>.ident-cresce{flex:1 1 14rem}

/* ============================================================================
   03 · CAPTURA DE DIGITAL E DE FOTO (Fase 6, thread A · 27/09/2026)
   O desenho das pranchas aprovadas no canvas «Spidea Cartório · Design novo»,
   páginas 5 e 6. Só tokens da 02-spidea.css; nenhuma cor escrita aqui.
   As ilustrações entram pela tag {% ilustracao %} (SVG embutido): dentro de
   .cap-ilus o foco do desenho volta ao azul da marca, como na skill
   estilo-spidea, e não ao azul do botão.
   Cortes: < 640 (celular) e < 1024 (tablet), os mesmos da 02.
   ========================================================================== */

/* ---------- a ilustração no ladrilho ---------- */
.cap-ilus{--acao:var(--marca-500)}
.cap-ladrilho{display:grid;place-items:center;padding:1.25rem;border-radius:1rem;background:var(--sup-rebaixada)}
.cap-ladrilho.ok{background:var(--ok-fundo);outline:1px solid var(--ok-linha);outline-offset:-1px}
.cap-ladrilho.er{background:var(--er-fundo);outline:1px solid var(--er-linha);outline-offset:-1px}
.cap-ladrilho.av{background:var(--av-fundo);outline:1px solid var(--av-linha);outline-offset:-1px}
.cap-ladrilho .porta-ilus{margin:0;width:100%;justify-content:center;padding:0;background:none;border-radius:0}
.cap-ladrilho .porta-ilus>svg{width:100%;height:auto;max-width:12.5rem}
.cap-ladrilho.maos .porta-ilus>svg{max-width:40rem}
.cap-ladrilho.foto .porta-ilus>svg{max-width:15rem}
.cap-ladrilho.mini{padding:.5rem;border-radius:.75rem}
.cap-ladrilho.mini .porta-ilus>svg{max-width:5.5rem}

/* ---------- a tela da digital: mãos à esquerda, captura à direita ---------- */
.cap-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:1rem;align-items:start;margin-bottom:1rem}
.cap-grade>.card{margin:0}
.cap-cartao{display:flex;flex-direction:column;gap:1rem;padding:1.25rem 1.5rem}
.cap-cartao-cab{display:flex;align-items:center;gap:.25rem .5rem;flex-wrap:wrap}
.cap-cartao-cab h3{flex:1;margin:0;font-size:var(--t-16);font-weight:var(--font-weight-semibold)}
.cap-titulo{margin:0;font-size:var(--t-22);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--txt-forte)}
.cap-titulo .cap-dedo-nome{color:var(--txt-marca)}
.cap-titulo.ok{color:var(--ok)} .cap-titulo.er{color:var(--er)} .cap-titulo.av{color:var(--av)}
.cap-sub{margin:.25rem 0 0;font-size:var(--t-14);color:var(--txt-fraco);line-height:1.5}
.cap-sub.forte{color:var(--txt-forte)}
.cap-prazo{display:flex;align-items:center;gap:.5rem;font-size:var(--t-13);color:var(--txt-fraco)}
.cap-prazo .cresce{flex:1;min-width:0}

/* as mãos e os dez dedos */
.cap-maos{display:flex;flex-direction:column;gap:1rem;padding:1.25rem 1.5rem}
.cap-dedos{display:flex;flex-direction:column;gap:.625rem}
.cap-mao{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cap-mao-rot{width:7rem;flex-shrink:0;font-size:var(--t-12);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-fraco)}
.cap-mao-dedos{display:flex;gap:.375rem;flex-wrap:wrap}
/* o dedo é um BOTÃO (data-escolher-dedo): 40 de desenho, 44 de alvo */
.cap-dedo{position:relative;display:inline-flex;align-items:center;gap:.3125rem;height:2.5rem;padding:0 .75rem 0 .5rem;border:0;margin:0;
  border-radius:999px;font:inherit;font-size:var(--t-13);font-weight:var(--font-weight-semibold);cursor:pointer;white-space:nowrap;
  background:var(--ne-suave);color:var(--sobre-ne-suave)}
.cap-dedo::after{content:"";position:absolute;inset:-.125rem}
.cap-dedo svg{width:1rem;height:1rem;flex-shrink:0}
.cap-dedo.ok{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.cap-dedo.lendo{background:var(--in-suave);color:var(--sobre-in-suave);box-shadow:0 0 0 2px var(--acao)}
.cap-dedo.erro{background:var(--er-suave);color:var(--sobre-er-suave)}
.cap-dedo:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.cap-legenda{display:flex;gap:.25rem 1rem;flex-wrap:wrap;font-size:var(--t-12-5);color:var(--txt-fraco);line-height:1.5}
.cap-legenda span{display:inline-flex;align-items:center;gap:.3125rem}
.cap-legenda i{width:.625rem;height:.625rem;border-radius:999px;display:inline-block}
.cap-legenda i.ok{background:var(--ok-icone)} .cap-legenda i.lendo{background:var(--acao)} .cap-legenda i.erro{background:var(--er-icone)}

/* o formulário de pedir (dedo e estação) e os avisos */
.cap-form{display:flex;flex-direction:column;gap:.75rem}
.cap-aviso{display:flex;gap:.625rem;align-items:flex-start;padding:.75rem .875rem;border-radius:var(--radius-md);font-size:var(--t-13);line-height:1.5;
  background:var(--er-fundo);color:var(--txt-forte);outline:1px solid var(--er-linha);outline-offset:-1px}
.cap-aviso>svg{flex-shrink:0;color:var(--er);margin-top:.125rem}
.cap-aviso.av{background:var(--av-fundo);outline-color:var(--av-linha)} .cap-aviso.av>svg{color:var(--av)}
.cap-aviso.ne{background:var(--sup-rebaixada);outline-color:var(--linha-fina)} .cap-aviso.ne>svg{color:var(--txt-fraco)}

/* o modal «qualidade não atingiu o mínimo» */
.cap-modal{border:0;border-radius:var(--radius-lg);box-shadow:var(--sombra-janela);padding:0;max-width:28rem;width:calc(100% - 2rem);
  background:var(--sup-cartao);color:var(--txt-forte)}
.cap-modal::backdrop{background:var(--veu)}
.cap-modal .cap-modal-corpo{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
.cap-modal .cap-modal-acoes{display:flex;gap:.5rem;flex-wrap:wrap}

/* a caixa compacta da ficha («Foto e biometria»): o leitor pequeno ao lado do título */
.cap-caixa{display:flex;flex-direction:column;gap:.75rem;margin-top:.875rem;padding:.875rem 1rem;border-radius:var(--radius-md);background:var(--sup-rebaixada)}
.cap-mini{display:flex;gap:.875rem;align-items:center}
.cap-mini .cresce{flex:1;min-width:0}
.cap-mini .cap-ladrilho{flex-shrink:0;background:var(--sup-cartao)}
.cap-mini .cap-ladrilho.ok{background:var(--ok-fundo)} .cap-mini .cap-ladrilho.er{background:var(--er-fundo)} .cap-mini .cap-ladrilho.av{background:var(--av-fundo)}
.cap-mini .cap-ladrilho.mini .porta-ilus>svg{width:4.5rem}
.cap-mini .cap-h{flex:1;margin:0;font-size:var(--t-14);font-weight:var(--font-weight-semibold)}

/* ---------- o tablet do cliente: as mãos grandes e uma frase ---------- */
.cap-tablet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;min-height:70vh;text-align:center;padding:1rem}
.cap-tablet .cap-titulo{font-size:var(--t-28)}
.cap-tablet .cap-ladrilho.maos{width:100%;max-width:48rem}
.cap-tablet .cap-dedos{align-items:center}
.cap-tablet .cap-mao{justify-content:center}
.cap-tablet .cap-dedo{cursor:default}
@keyframes tablet-piscar{0%,100%{opacity:1}50%{opacity:.25}}
.tablet-dedo-piscando{animation:tablet-piscar 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tablet-dedo-piscando{animation:none}}

/* ---------- a foto: câmera à esquerda, a orientação à direita ---------- */
.cap-foto{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:start}
.cap-foto>.card{margin:0}
.cap-dicas{display:flex;flex-direction:column}
.cap-dicas>div{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.375rem 0;border-bottom:1px solid var(--linha-fina);font-size:var(--t-14)}
.cap-dicas>div:last-child{border-bottom:0}
.cap-dicas svg{color:var(--txt-marca);flex-shrink:0}
/* a orientação segue o que o facial.js já pinta (a caixa em lendo · ok · erro; o
   selo do veredito em g · y · r): só CSS, nenhum gancho novo. O veredito vence a caixa. */
.cap-coluna{display:flex;flex-direction:column;gap:1rem}
.cap-coluna>.card{margin:0}
.cap-guia>.g{display:none;flex-direction:column;gap:1rem}
.cap-guia>.g-aguardando{display:flex}
.cap-foto:has([data-facial-caixa].erro) .cap-guia>.g-aguardando{display:none}
.cap-foto:has([data-facial-caixa].erro) .cap-guia>.g-cam{display:flex}
.cap-foto:has([data-facial-veredito]:not([hidden]) .badge:is(.g,.y,.r)) .cap-guia>.g{display:none}
.cap-foto:has([data-facial-veredito]:not([hidden]) .badge.g) .cap-guia>.g-ok{display:flex}
.cap-foto:has([data-facial-veredito]:not([hidden]) .badge.y) .cap-guia>.g-av{display:flex}
.cap-foto:has([data-facial-veredito]:not([hidden]) .badge.r) .cap-guia>.g-er{display:flex}

/* o link do cliente (porta) e o tablet do atendimento: a mesma ilustração, pequena,
   acima do título; na porta vale o .porta-ilus da 02 como está */
.cap-ilus.ok>.porta-ilus{background:var(--ok-fundo);outline:1px solid var(--ok-linha);outline-offset:-1px}
.cap-cli{width:9rem;margin:0 auto .75rem}
.cap-cli .porta-ilus>svg{max-width:100%}

/* ---------- tablet e celular ---------- */
@media (max-width:1023.98px){
  .cap-grade,.cap-foto{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639.98px){
  .cap-maos,.cap-cartao{padding:1rem}
  .cap-mao-rot{width:100%}
  .cap-cartao-cab>.cap-sub{flex-basis:100%}
  .cap-titulo{font-size:var(--t-20)}
  .cap-tablet .cap-titulo{font-size:var(--t-22)}
  .cap-ladrilho{padding:.75rem}
  .cap-cartao .acoes-cap .btn{width:100%}
}

/* ---------- as subabas Digital e Foto da seção «Foto e biometria» da ficha (Fase 5) ---------- */
.bio-painel{display:flex;flex-direction:column;gap:.875rem;padding-top:.875rem}
#biometria .abas[data-abas]{margin-top:.25rem;border-bottom:1px solid var(--linha-fina)}

/* ---------- Fase 8 · captura -------------------------------------------------
   O dedo PULADO (a dispensa de «Quando não é possível» cobre o dedo): na
   pílula, fundo rebaixado com borda tracejada e a seta de pular — a cor não
   é o único sinal; nas mãos, uma marca na ponta do dedo, numa camada por
   cima do desenho, que não muda. */
.cap-dedo.pulado{background:var(--sup-rebaixada);color:var(--txt-fraco);
  outline:1px dashed var(--linha-campo);outline-offset:-1px}
.cap-legenda i.pulado{background:transparent;outline:1.5px dashed var(--txt-fraco);outline-offset:-1.5px}
.cap-maos-desenho{position:relative;width:100%;max-width:40rem;margin:0 auto}
.cap-maos-desenho .porta-ilus>svg{max-width:none}
.cap-pulados{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cap-pulado circle{fill:var(--sup-rebaixada);stroke:var(--txt-fraco);stroke-width:2.5;stroke-dasharray:5 4}
.cap-pulado path{fill:none;stroke:var(--txt-forte);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cap-pulado{pointer-events:auto;cursor:help}
/* a contagem regressiva do pedido de digital: número tabular, e perto do fim
   ela avisa (âmbar); zerada, some o número e fica «tempo esgotado» */
.cap-contagem{font-variant-numeric:tabular-nums;font-weight:600;color:var(--txt-forte);white-space:nowrap}
.cap-contagem.perto{color:var(--av)}
.cap-contagem.zerou{color:var(--er-texto)}
/* a câmera que não liga: um cartão por motivo, e o `data-cam` da caixa da
   imagem escolhe qual — sem motivo conhecido, a genérica */
.g-cam>.cam-v{display:none}
.cap-foto:has([data-facial-caixa][data-cam="negada"]) .g-cam>.cam-negada,
.cap-foto:has([data-facial-caixa][data-cam="nao-encontrada"]) .g-cam>.cam-nao-encontrada,
.cap-foto:has([data-facial-caixa][data-cam="em-uso"]) .g-cam>.cam-em-uso,
.cap-foto:has([data-facial-caixa]:not([data-cam="negada"]):not([data-cam="nao-encontrada"]):not([data-cam="em-uso"])) .g-cam>.cam-outra{display:block}

/* ── Aba Biometria da ficha (T4, pranchas FichaCCN-Biometria e -Foto) ───────── */
#biometria .bio-sub .abas[data-abas]{border-bottom:0;gap:.5rem;margin-bottom:1rem;overflow:visible}
#biometria .bio-sub .abas[data-abas]>.aba{height:2.125rem;min-height:2.125rem;padding:0 .75rem;border:1px solid var(--linha);border-radius:999px;font-size:var(--t-13);font-weight:var(--font-weight-medium,500);color:var(--txt-forte);box-shadow:none;margin:0}
#biometria .bio-sub .abas[data-abas]>.aba::after{display:none}
#biometria .bio-sub .abas[data-abas]>.aba.on{background:var(--sup-selecionada);border-color:var(--acao);color:var(--acao-texto);box-shadow:none}
.bio-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem .75rem;margin-bottom:1rem}
.bio-ajuda{font-size:var(--t-13);line-height:1.5;color:var(--txt-fraco);margin:0}
.bio-ok{color:var(--ok-texto,var(--ok))}
.bio-falta{color:var(--av-texto,var(--av))}
.bio-link{display:inline-flex;align-items:center;gap:.25rem;min-height:2.75rem;background:none;border:0;padding:0;font:inherit;font-size:var(--t-13);color:var(--acao);cursor:pointer}
.bio-link svg{width:1rem;height:1rem}
.bio-grade{display:grid;grid-template-columns:minmax(0,1fr) 25rem;gap:1.25rem;align-items:start}
.bio-maos-bloco,.bio-foto-bloco{display:flex;flex-direction:column;gap:1rem;min-width:0}
.bio-titulo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.bio-titulo h3{margin:0;font-size:var(--t-16);font-weight:var(--font-weight-semibold,600)}
.bio-maos{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1rem;padding:1.25rem 1.5rem;background:var(--sup-rebaixada);border-radius:var(--radius-lg);color:var(--txt-fraco)}
.bio-mao{flex:1 1 13rem;min-width:0;max-width:19rem;height:auto;overflow:visible}
.bio-palma{fill:var(--sup-cartao)}
.bio-dedo{cursor:pointer;outline:0;color:var(--txt-fraco)}
.bio-dedo .tr{stroke:currentColor}
.bio-dedo .base,.bio-dedo .fu{stroke:var(--sup-cartao)}
.bio-dedo.ok .tr{stroke:var(--ok)}
.bio-dedo.ok .fu{stroke:var(--ok-suave)}
.bio-dedo.legado .tr{stroke:var(--av)}
.bio-dedo.legado .fu{stroke:var(--av-suave)}
.bio-dedo.dispensada .tr{stroke:var(--txt-fraco);stroke-dasharray:6 5}
.bio-dedo.dispensada .fu{stroke:var(--sup-rebaixada)}
.bio-dedo:hover .tr,.bio-dedo:focus-visible .tr{stroke:var(--acao)}
.bio-det .sinal.ok{stroke:var(--ok)}
.bio-det .sinal.legado{stroke:var(--av)}
.bio-det .sinal.risco{stroke:var(--txt-fraco)}
.bio-anel{stroke:var(--acao)}
.bio-legenda{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:var(--t-13)}
.bio-legenda span{display:inline-flex;align-items:center;gap:.375rem}
.bio-legenda i{width:1rem;height:1rem;border-radius:.3125rem;border:2px solid var(--txt-fraco);background:var(--sup-cartao)}
.bio-legenda i.ok{border-color:var(--ok);background:var(--ok-suave)}
.bio-legenda i.legado{border-color:var(--av);background:var(--av-suave)}
.bio-legenda i.dispensada{background:var(--sup-rebaixada);border-style:dashed}
.bio-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.bio-painel-dedo{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--sup-cartao);border:1px solid var(--linha);border-radius:var(--radius-lg);min-width:0}
.bio-kv{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0}
.bio-kv .larga{grid-column:1/-1}
.bio-kv dt{font-size:var(--t-12);font-weight:var(--font-weight-semibold,600);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco);margin-bottom:.25rem}
.bio-kv dd{margin:0;font-size:var(--t-14);font-weight:var(--font-weight-medium,500)}
.bio-sec{font-size:var(--t-12);font-weight:var(--font-weight-semibold,600);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-fraco);margin-bottom:.25rem}
.bio-dispensados{padding-top:1rem;border-top:1px solid var(--linha-fina);display:flex;flex-direction:column;gap:.5rem}
.bio-reg{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;background:var(--sup-rebaixada);border-radius:var(--radius-md);font-size:var(--t-13)}
.bio-reg .cresce,.bio-ant .cresce{flex:1;min-width:0}
.bio-dispensar>summary{list-style:none;cursor:pointer;width:max-content;max-width:100%}
.bio-dispensar>summary::-webkit-details-marker{display:none}
.bio-dispensar form{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-top:.75rem}
.bio-dispensar .campo{width:100%}
.bio-dispensar select.inp{font:inherit;color:inherit;width:100%}
.bio-por-arquivo{margin-top:1rem}
.bio-por-arquivo>summary{cursor:pointer;font-size:var(--t-13);color:var(--acao);min-height:2.75rem;display:flex;align-items:center}
.bio-modal{max-width:40rem}
.bio-modal-largo{max-width:52rem}
.bio-modal-recorte{max-width:62.5rem}
.bio-modal-corpo{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
.bio-modal-fecha{display:flex;justify-content:flex-end}
.bio-hist{width:100%;font-size:var(--t-13)}
.bio-foto{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.5rem;align-items:start}
.bio-foto-coluna{display:flex;flex-direction:column;align-items:flex-start;gap:.625rem}
.bio-foto-coluna .btn{align-self:stretch;justify-content:center}
.bio-foto-dados{display:flex;flex-direction:column;gap:1rem;min-width:0}
.bio-retrato{width:100%;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--sup-rebaixada)}
.bio-retrato img{display:block;width:100%;height:100%;object-fit:cover}
.bio-retrato.vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.75rem;text-align:center;font-size:var(--t-12);color:var(--txt-apagado)}
.bio-uso{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;font-size:var(--t-13)}
.bio-uso .cresce{flex:1;min-width:0}
.bio-uso svg{color:var(--ok)}
.bio-ant{display:flex;align-items:flex-start;gap:.75rem;padding:.625rem 0;border-bottom:1px solid var(--linha-fina);font-size:var(--t-13)}
.bio-ant-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-top:.375rem}
.bio-mini{display:grid;place-items:center;width:3rem;height:3.75rem;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;background:var(--sup-rebaixada);color:var(--txt-apagado)}
.bio-mini img{display:block;width:100%;height:100%;object-fit:cover}
.ct-bio{min-width:1.5rem;padding:0 .375rem;border:1px solid var(--linha);border-radius:var(--radius-sm);font-size:var(--t-12);text-align:center}
.bio-rec-grade{display:grid;grid-template-columns:minmax(0,1fr) 12.5rem;gap:1.5rem;align-items:start}
.bio-rec-doc{position:relative;width:fit-content;max-width:100%;justify-self:center;line-height:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--sup-rebaixada);touch-action:none}
.bio-rec-doc canvas{display:block;width:auto;height:auto;max-width:100%;max-height:65vh}
.bio-rec-moldura{position:absolute;outline:2px solid var(--acao);box-shadow:0 0 0 2000px var(--veu);cursor:move;touch-action:none}
.bio-rec-moldura:focus-visible{outline-width:3px;outline-offset:1px}
.bio-rec-moldura span{position:absolute;width:1rem;height:1rem;border-radius:.1875rem;background:var(--sup-cartao);outline:2px solid var(--acao)}
.bio-rec-moldura span::after{content:"";position:absolute;inset:-.875rem}
.bio-rec-moldura [data-canto=nw]{left:-.5rem;top:-.5rem;cursor:nwse-resize}
.bio-rec-moldura [data-canto=ne]{right:-.5rem;top:-.5rem;cursor:nesw-resize}
.bio-rec-moldura [data-canto=sw]{left:-.5rem;bottom:-.5rem;cursor:nesw-resize}
.bio-rec-moldura [data-canto=se]{right:-.5rem;bottom:-.5rem;cursor:nwse-resize}
.bio-rec-lado{display:flex;flex-direction:column;gap:.875rem;min-width:0}
.bio-rec-previa{display:block;width:100%;max-width:11.25rem;height:auto;border-radius:var(--radius-lg);background:var(--sup-rebaixada)}
.bio-rec-rodape{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--linha-fina)}
.bio-grade.sozinha{grid-template-columns:minmax(0,1fr)}
@media (max-width:64rem){.bio-grade{grid-template-columns:minmax(0,1fr)}}
@media (max-width:40rem){
  .bio-maos{padding:.75rem;flex-direction:column;align-items:center}
  .bio-mao{flex:none;width:100%;max-width:22rem}
  .bio-foto,.bio-rec-grade{grid-template-columns:minmax(0,1fr)}
  .bio-foto-coluna{max-width:15rem}
  .bio-painel-dedo{padding:1rem}
  .bio-modal-corpo{padding:1rem}
}
/* a nota e «Ver histórico» dividem a linha com Digital/Foto; moram no painel de cada subaba */
#biometria .bio-painel{padding-top:0}
#biometria .bio-sub .abas[data-abas]{margin-bottom:.5rem}
.bio-topo{justify-content:flex-start;margin-bottom:.25rem}
@media (min-width:50rem){
  #biometria .svc-corpo{position:relative}
  #biometria .bio-sub .abas[data-abas]{margin-bottom:1rem}
  #biometria .bio-topo{position:absolute;top:1rem;right:.75rem;height:2.125rem;margin:0;flex-wrap:nowrap;justify-content:flex-end}
}
.bio-gravado{display:flex;align-items:center;gap:.375rem;margin:0;font-size:var(--t-13);font-weight:var(--font-weight-medium,500);color:var(--ok-texto,var(--ok))}
.bio-retrato>a{display:block;width:100%;height:100%}

/* Aba Documentos e leitura do documento (T3): o envio no topo, a tabela, a linha aberta
   e a conferência. Pranchas Documentos, DocumentoLido, DocumentoManual, FichaNovaLeitura */
.docs{display:flex;flex-direction:column;gap:1rem;min-width:0;max-width:100%}
.docs>.docs-cab{margin-bottom:-.5rem}
.doc-zona{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 1.25rem;
  border:2px dashed var(--linha-campo);border-radius:.875rem;background:var(--sup-rebaixada)}
.ident>.doc-zona{margin-bottom:1rem}
.doc-zona-mao-so{border-style:solid;border-width:1px}
.doc-zona>input[type=file]{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.doc-zona-acima{position:relative;z-index:1}
.doc-zona-ic{display:grid;place-items:center;flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--sup-selecionada);color:var(--txt-marca)}
.doc-zona-ic>svg{width:1.375rem;height:1.375rem}
.doc-zona>.ident-cresce{flex:1 1 16rem;min-width:0}
.doc-zona-t{font-size:var(--t-14,1rem);font-weight:650}
.doc-zona-lendo{display:none;color:var(--txt-marca);font-weight:600}
.doc-zona.htmx-request .doc-zona-lendo{display:block}
.doc-zona-mao{border:0;background:none;padding:.25rem;font:inherit;font-size:var(--t-12-5);color:var(--txt-marca);
  text-decoration:underline;cursor:pointer;white-space:nowrap}
.doc-tabela{border-radius:var(--radius-md);outline:1px solid var(--linha-fina);outline-offset:-1px;overflow-x:auto;max-width:100%}
.doc-tabela table{width:100%;min-width:0}
.doc-arq-link{max-width:100%;min-width:0}
.doc-arq-link>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* o nome do arquivo corta com reticências no espaço que sobra, sem alargar a tabela */
@media (min-width:640px){
  .doc-col-arq{width:22%;max-width:0}
  .doc-col-arq .doc-arq-link{display:flex}
}
.doc-col-ccn{width:4rem}
.doc-col-uf{width:3.5rem}
.doc-col-acao{width:2.75rem;text-align:right}
tr.doc-aberta>td{background:var(--sup-selecionada)}
.doc-radio{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;border-radius:50%;
  border:2px solid var(--linha-campo);background:none;box-sizing:border-box}
button.doc-radio{cursor:pointer}
.doc-radio.on{border-color:var(--acao)}
.doc-radio.on::after{content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--acao)}
.doc-radio.dis{opacity:.45}
.doc-arq-link{display:inline-flex;align-items:center;gap:.375rem;border:0;background:none;padding:0;font:inherit;
  color:var(--txt-marca);cursor:pointer;text-decoration:none}
.doc-arq-link>svg{width:.9375rem;height:.9375rem;flex-shrink:0}
.doc-nota{margin-top:-.5rem}
.doc-edita{flex-direction:column;align-items:stretch;gap:.75rem}
.doc-edita-cab{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.doc-edita-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}
@media (max-width:639.98px){.doc-edita-pe>.note{flex:1 1 100%}}
.doc-arqs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.375rem}
.doc-arqs>.arq{flex:0 1 auto;min-width:0;max-width:100%}
.doc-arq-envio{display:flex;flex-wrap:wrap;gap:.5rem}
.doc-ccn-nota{color:var(--sobre-in-suave,var(--txt-fraco))}
.lei{display:flex;flex-direction:column;gap:1rem}
.lei-cab{display:flex;align-items:center;gap:.5rem}
.lei-tit{flex:1;margin:0}
.lei-grade{display:grid;grid-template-columns:minmax(0,18.75rem) minmax(0,1fr);gap:1.75rem;align-items:start}
.lei-doc{position:sticky;top:0;display:flex;flex-direction:column;gap:.5rem}
.lei-img{display:block;width:100%;height:auto;border-radius:.75rem;background:var(--sup-rebaixada)}
.lei-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:1.42;
  border-radius:.75rem;background:var(--sup-rebaixada);color:var(--txt-fraco);text-align:center;padding:1rem}
.lei-doc-pe{display:flex;justify-content:flex-end}
.lei-campos{display:flex;flex-direction:column;gap:1.125rem;min-width:0}
.lei-linha{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 11rem;gap:.75rem;align-items:center;
  padding:.5rem 0;border-bottom:1px solid var(--linha-fina)}
.lei-rot{font-size:var(--t-12-5);color:var(--txt-fraco)}
.lei-meio{min-width:0}
.lei-meio select.inp{width:100%;font:inherit;color:inherit}
.lei-fim{display:flex;justify-content:flex-end}
.lei-atencao{outline:2px solid var(--av);outline-offset:-2px}
.lei-nota{color:var(--av)}
.lei-selo{display:inline-flex;align-items:center;gap:.1875rem;padding:.0625rem .4375rem;border-radius:9999px;
  font-size:var(--t-11);font-weight:600;white-space:nowrap;background:var(--in-suave);color:var(--sobre-in-suave)}
.lei-selo>svg{width:.75rem;height:.75rem}
.lei-selo.conferir,.lei-selo.diverge{background:var(--av-suave);color:var(--sobre-av-suave)}
.lei-selo.confere{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.campo:has(>.lei-selo-campo){position:relative}
.lei-selo-campo{position:absolute;top:0;right:0;z-index:1}
.lei-usar{position:relative;white-space:nowrap;text-align:center;cursor:pointer}
.lei-usar:has(input:checked){outline:2px solid var(--acao);outline-offset:-2px;background:var(--sup-selecionada)}
.lei-usar:has(input:focus-visible){outline:2px solid var(--acao);outline-offset:2px}
.lei-usar input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.alerta.lei-lido{background:var(--in-suave);outline-color:transparent;color:var(--sobre-in-suave);margin-bottom:1rem}
.alerta.lei-lido .t,.alerta.lei-lido .d,.alerta.lei-lido .ic{color:inherit}
.lei-foto{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.625rem 0}
.lei-foto-img{width:4rem;height:5rem;object-fit:cover;border-radius:.5rem;flex-shrink:0;background:var(--sup-rebaixada)}
.lei-foto>.ident-cresce{flex:1 1 12rem;min-width:0}
.lei-foto-t{font-weight:600}
.lei-foto-acoes{display:flex;flex-direction:column;align-items:flex-end;gap:.375rem}
.lei-usar-foto{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-12-5)}
.lei-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;padding-top:.375rem}
#leitura-nova{padding:1.25rem}
@media (max-width:979.98px){ .lei-grade{grid-template-columns:minmax(0,1fr)} .lei-doc{position:static} }
@media (max-width:639.98px){
  .doc-zona-bt{flex:1 1 auto;justify-content:center}
  .doc-tabela{outline:0;overflow:visible}
  .doc-tabela thead{display:none}
  .doc-tabela table,.doc-tabela tbody{display:block;width:100%;min-width:0}
  .doc-tabela tr{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:.25rem .5rem;padding:.75rem;margin-bottom:.5rem;
    border-radius:var(--radius-md);outline:1px solid var(--linha-fina);outline-offset:-1px}
  .doc-tabela td{display:contents}
  .doc-tabela td[data-rotulo]::before{content:attr(data-rotulo);font-size:var(--t-12);color:var(--txt-fraco)}
  .doc-col-acao{text-align:left}
  .lei-linha{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .5rem}
  .lei-rot{grid-column:1/-1}
  .lei-linha:has(.lei-usar) .lei-meio,.lei-linha:has(.lei-usar) .lei-fim{grid-column:1/-1}
  .lei-linha:has(.lei-usar) .lei-fim{justify-content:flex-start}
  #leitura-nova{padding:1rem}
}
.doc-edita{display:flex;padding:.875rem 1rem;border-radius:var(--radius-lg);background:var(--sup-cartao);outline:1px solid var(--linha-fina);outline-offset:-1px}
/* Aba Endereço e contato (T3, prancha FichaCCN-Endereco). */
.contato{display:flex;flex-direction:column;gap:.75rem}
.contato-bloco{min-width:0}
.contato-lista{display:flex;flex-direction:column;gap:.625rem;min-width:0}
.contato-bloco>.svc-corpo{display:flex;flex-direction:column;gap:.625rem}
.contato-tranca{display:flex;color:var(--txt-apagado)}
.contato-tabela{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.contato-tabela th{text-align:left;font-size:var(--t-12);font-weight:var(--font-weight-medium);color:var(--txt-fraco);padding:.5rem .625rem;border-bottom:1px solid var(--linha-fina);white-space:nowrap}
.contato-tabela td{padding:.5rem .625rem;border-bottom:1px solid var(--linha-fina);vertical-align:middle;overflow-wrap:anywhere}
.contato-tabela tr[data-abre-linha]{cursor:pointer}
.contato-tabela tbody tr[data-abre-linha]:hover{background:var(--sup-hover)}
.contato-acoes{white-space:nowrap;text-align:right}
.contato-acoes button{border:0;background:none;cursor:pointer;color:inherit}
.contato-arq{display:inline-flex;align-items:center;gap:.375rem;min-width:0}
.contato-sim{display:inline-flex;color:var(--ok)}
.contato-editar.linha-reg{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;padding:.75rem;border-radius:var(--radius-md);background:var(--sup-rebaixada)}
.contato-editar[hidden]{display:none}
.contato-grade{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:.75rem}
.contato-caixa{grid-column:span var(--c,6);min-width:0}
.contato-caixa[hidden]{display:none}
.contato-buscar{align-self:end}
.contato-comprovante{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.contato-comprovante button{border:0;background:none;cursor:pointer;color:inherit}
.contato-pe{display:flex;justify-content:flex-end;gap:.5rem}
.contato-lista>.btn{align-self:flex-start}
/* o modal «Buscar CEP»: o CEP pelo endereço (dono, 02/11/2026) */
.cep-procurar-grade{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem}
.cep-procurar-grade .cep-p-rua,.cep-procurar-grade .cep-p-bairro{grid-column:1/-1}
.cep-procurar-grade select,.cep-procurar-grade input{width:100%}
.cep-procurar-achados:empty{display:none}
.cep-procurar-achados{display:flex;flex-direction:column;gap:.5rem}
.cep-achados{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;border-radius:var(--radius-md);outline:1px solid var(--linha-fina);outline-offset:-1px}
.cep-achados li+li{border-top:1px solid var(--linha-fina)}
.cep-achado{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:.75rem;align-items:baseline;width:100%;padding:.625rem .75rem;border:0;background:none;color:inherit;font:inherit;font-size:var(--t-13);text-align:left;cursor:pointer}
.cep-achado:hover,.cep-achado:focus-visible{background:var(--sup-hover)}
.cep-achado:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
@media (max-width:639.98px){
  .cep-achado{grid-template-columns:5rem minmax(0,1fr)}
  .cep-achado .note{grid-column:2}
}
@media (max-width:1023.98px){
  .contato-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contato-caixa{grid-column:span 1}
}
/* a tabela do endereço pede a largura toda: com o menu aberto, só cabe de 1280 para cima */
@media (max-width:1279.98px){
  .contato-tabela,.contato-tabela tbody{display:block}
  .contato-tabela thead{display:none}
  .contato-tabela tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.125rem .75rem;padding:.5rem 0;border-bottom:1px solid var(--linha-fina)}
  .contato-tabela td{display:block;padding:.125rem .25rem;border:0}
  .contato-tabela td[data-rot]::before{content:attr(data-rot) ": ";color:var(--txt-fraco);font-size:var(--t-12)}
  .contato-acoes{text-align:left}
}
@media (max-width:639.98px){
  .contato-grade{grid-template-columns:minmax(0,1fr)}
  .contato-pe .btn{flex:1 1 auto}
}
.doc-nova{padding:1.25rem}

/* ============================================================================
   04 · A ORDEM DE SERVIÇO EM ABAS (Fase 5, parte A · thread A · 27/09/2026)
   O desenho das pranchas «O.S.» do canvas «Spidea Cartório · Design novo»
   (página 4). Só tokens da 02-spidea.css; o componente de abas é o da 02
   (.abas[data-abas], .aba-painel) e não se repete aqui.
   Cortes: < 640 (celular) e < 1024 (tablet), os mesmos da 02.
   ========================================================================== */

/* os números que alinham (código, valores, datas): a fonte do app, dígitos de mesma largura */
.os-tab{font-variant-numeric:tabular-nums}

/* ---------- a linha do número ---------- */
.os-cab{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1rem}
.os-cab-txt{flex:1;min-width:0}
.os-linha{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap}
/* o cartão do número (retorno do dono, 27/09): um pouco maior e com o raio de
   controle (10 px) — parece um botão, não uma pílula; o «Copiar» mora dentro */
.os-num{display:inline-flex;align-items:center;height:2.625rem;padding:0 .5rem 0 1rem;border-radius:var(--raio);
  background:var(--in-suave);color:var(--sobre-in-suave);font-size:var(--t-20);font-weight:650;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;outline:1px solid var(--linha-fina);outline-offset:-1px}
.os-tipo{font-size:var(--t-20);font-weight:650;letter-spacing:-.01em;color:var(--txt-forte)}
.os-meta{font-size:var(--t-13);color:var(--txt-fraco);margin-top:.375rem;line-height:1.5}
.os-meta b{color:var(--txt-forte)}
.os-meta a{color:var(--link)}
.os-acoes{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- a faixa: requerentes, prazo, responsável, hora, o saldo por último ---------- */
.os-faixa{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) max-content;gap:1rem 1.5rem;
  padding:1rem 1.25rem;margin:0 0 1rem}
.os-faixa .k{font-size:var(--t-11-5);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--txt-fraco);margin-bottom:.25rem}
.os-faixa .v{font-size:var(--t-15);font-weight:600;color:var(--txt-forte)}
.os-faixa .d{display:block;font-size:var(--t-12-5);color:var(--txt-fraco);margin-top:.125rem}
.os-faixa a.d{color:var(--link)}
.os-faixa .d.av{color:var(--av)}
.os-faixa .os-er,.os-dados .os-er{color:var(--er)} .os-faixa .os-ok,.os-dados .os-ok{color:var(--ok)}
.os-faixa .apagado,.os-dados .apagado{color:var(--txt-apagado)}
.os-req{display:flex;gap:.375rem;align-items:center;flex-wrap:wrap;min-height:1.75rem}
.os-req .nome{font-weight:650;font-size:var(--t-15);color:var(--txt-forte)}
.os-req .papel{font-size:var(--t-13);color:var(--txt-fraco)}
.os-apres{font-size:var(--t-13);color:var(--txt-fraco);margin-top:.25rem}
.os-apres b{color:var(--txt-forte)}

/* o alerta de exigência, ACIMA das abas */
.os-bloqueio{margin-bottom:1rem;align-items:center}
.os-bloqueio .cresce{flex:1;min-width:0}
.os-cobrar{display:flex;justify-content:flex-end;margin:-.5rem 0 .75rem}

/* ---------- o cartão das abas ---------- */
.os-abas{padding:0 1.25rem 1.25rem;margin:0}
.os-abas>.abas{margin:0 -1.25rem 1.25rem;padding:0 1.25rem;border-bottom:1px solid var(--linha-fina)}
.os-abas>.aba-painel{display:flex;flex-direction:column;gap:1.25rem}
.os-abas>.aba-painel[hidden]{display:none}
/* o título de cada painel é para o leitor de tela (a aba já diz o nome à vista) */
.os-abas>.aba-painel>h3:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.os-sub{display:block;font-size:var(--t-16);font-weight:600;color:var(--txt-forte);margin-bottom:.625rem}
.os-lede{margin:0;font-size:var(--t-13);color:var(--txt-fraco)}
.os-lede b{color:var(--txt-forte)}

/* ---------- Serviços: cada serviço é um acordeão; o pedido mora dentro ---------- */
.os-svcs{display:flex;flex-direction:column;gap:.5rem}
.os-svc{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;background:var(--sup-cartao)}
/* a coluna da situação cabe «despachado ao módulo» numa linha (11rem) */
.os-svc-cab{display:grid;grid-template-columns:1.25rem minmax(0,1fr) auto 7.5rem 8rem 11rem auto;gap:.875rem;
  align-items:center;min-height:4rem;padding:.5rem 1rem;cursor:pointer;list-style:none}
.os-svc-cab::-webkit-details-marker{display:none}
.os-svc-cab:focus-visible{outline:2px solid var(--foco);outline-offset:-2px;border-radius:var(--radius-lg)}
.os-svc-seta{display:flex;color:var(--txt-fraco);transition:transform .15s}
.os-svc[open]>.os-svc-cab .os-svc-seta{transform:rotate(90deg)}
.os-svc[open]>.os-svc-cab{border-bottom:1px solid var(--linha-fina)}
.os-svc-nome{display:flex;flex-direction:column;min-width:0}
.os-svc-nome .t{font-weight:600;color:var(--txt-forte)}
.os-svc-nome .d{font-size:var(--t-12-5);color:var(--txt-fraco);line-height:1.4}
.os-svc-nome .d.ok{color:var(--ok)}
.os-svc-valor{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.os-svc-valor .d{font-size:var(--t-11-5);color:var(--txt-apagado)}
.os-svc-sit{white-space:nowrap;justify-self:start}
.os-svc-selo{font-size:var(--t-12-5);color:var(--txt-fraco);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-svc-acao{display:flex;gap:.25rem;justify-content:flex-end;align-items:center}
.os-svc-acao form{margin:0}
.os-svc-corpo{padding:1rem}
.os-svc-corpo .sec{margin-bottom:.625rem}
.os-grade6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}

/* os formulários da O.S. em linha: campos que crescem e o botão no fim */
.os-form{display:flex;flex-direction:column;gap:.5rem;margin:0}
.os-linha-form{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.os-linha-form>.campo{flex:1 1 12rem;min-width:0}
.os-linha-form>.campo.estreito{flex:0 1 8rem}
.os-linha-form>.campo.estreito:has(.bad){flex:1 1 16rem}
.os-linha-form>.btn{align-self:flex-end}
.os-linha-form .lbl+.inp{margin-top:0}
.os-legado,.os-info{align-items:center}
/* o aviso que só informa: o azul de informação da folha, não o amarelo de atenção */
.alerta.os-info,.alerta.os-legado{background:var(--info-fundo);outline-color:var(--linha-fina);color:var(--txt-marca)}
.alerta.os-info .d,.alerta.os-legado .d{color:var(--txt-forte);opacity:1}
.os-info .cresce{flex:1;min-width:0}
.os-perigo{color:var(--er)}

/* ---------- Dados da O.S.: só leitura ---------- */
.os-dados{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.os-dados-esq,.os-dados-dir{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.os-kv{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;padding:.25rem 1rem}
.os-kv>div{display:flex;gap:.75rem;align-items:center;min-height:2.75rem;padding:.375rem 0;border-bottom:1px solid var(--linha-fina);flex-wrap:wrap}
.os-kv>div:last-child{border-bottom:0}
.os-kv .k{width:9rem;flex-shrink:0;font-size:var(--t-13);color:var(--txt-fraco)}
.os-kv .v{flex:1;min-width:0;font-size:var(--t-14);color:var(--txt-forte)}
.os-kv .v .d{color:var(--txt-fraco)}
.os-obs{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;padding:.75rem 1rem;font-size:var(--t-14)}
.os-bloco{border-radius:var(--radius-lg);outline:1px solid var(--linha-fina);outline-offset:-1px;padding:1rem;
  display:flex;flex-direction:column;gap:.75rem}
.os-bloco .os-kv{outline:0;padding:0}
.os-pendencia{padding:.625rem .75rem;border-radius:var(--radius-md);background:var(--sup-rebaixada);font-size:var(--t-13);line-height:1.55}


/* ---------- Conta ---------- */
.os-extrato td{vertical-align:middle}
.os-extrato tr.previsto td{opacity:.65}
.os-abas .fraco{color:var(--txt-fraco)} .os-abas .os-forte{font-weight:600;color:var(--txt-forte)}
.os-abas td.dir,.os-abas th.dir{text-align:right;white-space:nowrap}
.os-abas td.os-er,.os-exig-ic.er{color:var(--er)} .os-abas td.os-ok,.os-exig-ic.ok,.os-abas .os-ok{color:var(--ok)}
/* «Pendência do cartório?» (dono, 30/09): o «Sim.» no vermelho escuro da pílula de erro, o «Não.» sem cor */
.os-pendencia .os-er{color:var(--sobre-er-suave)} .os-pendencia .os-ok{color:inherit} .os-pendencia :is(.os-er,.os-ok) b{font-weight:600}
.os-nota{margin-top:.625rem;line-height:1.55}
.os-prejuizo{margin-top:.625rem}
.os-conta-acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.os-maiusculas{text-transform:uppercase}

/* ---------- Exigências ---------- */
.os-exigs{display:flex;flex-direction:column;gap:.5rem}
.os-exig{display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 1rem;border-radius:var(--radius-lg);
  outline:1px solid var(--linha-fina);outline-offset:-1px;background:var(--sup-cartao)}
.os-exig.pendente{outline-color:var(--er-linha)}
.os-exig .cresce{flex:1;min-width:0}
.os-exig .t{font-weight:600;color:var(--txt-forte)}
.os-exig .d{font-size:var(--t-13);color:var(--txt-fraco);line-height:1.5;margin-top:.125rem}
.os-exig-ic{display:flex;padding-top:.125rem;color:var(--txt-apagado)}
.os-exig-acoes{margin-top:.625rem;align-items:flex-start}
.os-exig-acoes form{margin:0}
.os-exig-fim{text-align:right;white-space:nowrap}
.os-exig-fim .d{font-size:var(--t-12);color:var(--txt-apagado);margin-top:.25rem}

/* ---------- Andamento: o stepper e a linha do tempo da folha ---------- */
.os-passos{list-style:none;margin:0;padding:0;min-width:36rem}
.os-andamento{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.os-andamento-dir{display:flex;flex-direction:column;gap:1rem;min-width:0}
.os-andamento .evento .cresce{flex:1;min-width:0}
.os-evento-cab{display:flex;gap:.5rem;align-items:baseline;justify-content:space-between}
.os-evento-cab .t{font-size:var(--t-14);color:var(--txt-forte)}
.os-andamento .evento .d{font-size:var(--t-12);color:var(--txt-apagado)}
.os-evento-det{margin-top:.375rem;padding:.5rem .625rem;border-radius:var(--radius-lg);background:var(--sup-rebaixada);font-size:var(--t-13);line-height:1.55}
.os-bloco textarea.inp{height:auto;padding:.5rem .75rem;font:inherit;color:inherit;width:100%}
.os-dir{display:inline-flex;align-items:center;gap:.375rem;justify-content:flex-end}
.os-msg{padding:.5rem .625rem;border-radius:var(--radius-lg);background:var(--sup-rebaixada);font-size:var(--t-13);line-height:1.5}
.os-msg .d{font-size:var(--t-12);color:var(--txt-fraco)}

/* ---------- Entrega: o disponível em cima, o entregue embaixo ---------- */
.os-disponiveis{display:flex;flex-direction:column;gap:.5rem}
.os-disp{display:flex;gap:.75rem;align-items:center;min-height:3.5rem;padding:.5rem 1rem;border-radius:var(--radius-lg);
  outline:1px solid var(--linha-fina);outline-offset:-1px;background:var(--sup-cartao);cursor:pointer}
.os-disp input[type=checkbox]{width:1.125rem;height:1.125rem;margin:0;flex:none;accent-color:var(--acao)}
.os-disp .cresce{flex:1;min-width:0;display:flex;flex-direction:column}
.os-disp .t{font-weight:600;color:var(--txt-forte)}
.os-disp .d{font-size:var(--t-12-5);color:var(--txt-fraco)}


/* ---------- Fase 5-A b: o «Copiar» do número, o menu «⋯», o saldo em destaque ---------- */
.os-num{gap:.25rem;padding-right:.25rem}
.os-copiar{position:relative;display:grid;place-items:center;width:1.75rem;height:1.75rem;border:0;margin:0;padding:0;
  border-radius:999px;background:none;color:inherit;cursor:pointer}
.os-copiar::after{content:"";position:absolute;inset:-.5rem}
.os-copiar:hover{background:var(--sup-cartao)}
.os-num .os-copiar{border-radius:calc(var(--raio) - 3px)}
.os-copiar:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.os-copiar svg{width:1rem;height:1rem}
.os-toast{position:fixed;right:1rem;bottom:1rem;z-index:60;width:auto;min-width:10rem}

.os-mais{position:relative}
.os-mais>summary{list-style:none}
.os-mais>summary::-webkit-details-marker{display:none}
.os-mais>summary:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.os-menu{position:absolute;right:0;top:calc(100% + .375rem);z-index:40;width:19rem;max-width:calc(100vw - 2rem)}
.os-menu form{margin:0}
.os-menu .mi{width:100%;min-height:2.75rem;border:0;background:none;font:inherit;font-size:var(--t-13);text-align:left;text-decoration:none}
.os-menu .mi.dis{flex-wrap:wrap}
.os-menu .mi .d{flex-basis:100%;padding-left:1.5rem;font-size:var(--t-11-5);color:var(--txt-apagado)}
.os-menu .mi.os-perigo{color:var(--er)}
/* o menu ⋮ em grupos (dono, 30/09/2026): A O.S. · O cliente · O dinheiro · Cancelar */
.os-menu-grupo{padding:.5rem .75rem .25rem;font-size:var(--t-10-5);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-fraco)}
.os-menu-sep{height:1px;margin:.375rem 0;background:var(--linha-fina)}
.os-selo-excecao{margin-left:auto;height:1.375rem;display:inline-flex;align-items:center;padding:0 .5rem;
  border-radius:9999px;background:var(--av-suave);color:var(--sobre-av-suave);font-size:var(--t-10-5);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.os-pelo-menu{margin-top:.375rem}
/* quem cuida, DISCRETO sob o número: departamentos (sigla + nome) e responsável */
.os-quem{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin-top:.25rem}
.os-quem-k{color:var(--txt-fraco)}
.os-quem-sep{color:var(--txt-apagado)}
.os-dep{display:inline-flex;align-items:center;height:1.375rem;padding:0 .5rem;border-radius:9999px;
  background:var(--ne-suave);color:var(--sobre-ne-suave);font-size:var(--t-11-5);font-weight:600;letter-spacing:.03em}
.os-dep-nome{font-weight:400;letter-spacing:0}
.os-dep.ajuste{background:var(--av-suave);color:var(--sobre-av-suave)}
.os-dep:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.os-assumir{display:inline-flex;margin:0 0 0 .25rem}
.os-assumir>.btn{height:1.625rem}
/* a janela «Ajustar departamento» (o bypass) e o diálogo das TRÊS SAÍDAS */
.os-ajuste-busca{gap:.4375rem;color:var(--txt-fraco)}
.os-ajuste-busca input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:var(--txt-forte)}
.os-ajuste-lista{display:flex;flex-direction:column;max-height:16rem;overflow:auto;border-radius:var(--raio);
  outline:1px solid var(--linha-fina);outline-offset:-1px}
.os-ajuste-lista.err{outline-color:var(--er)}
.os-ajuste-item{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.25rem .75rem;cursor:pointer;
  border-bottom:1px solid var(--linha-fina)}
.os-ajuste-item:last-of-type{border-bottom:0}
.os-ajuste-item[hidden]{display:none}
.os-ajuste-nome{flex:1;min-width:0;font-size:var(--t-13);color:var(--txt-forte)}
.os-ajuste-origem{font-size:var(--t-11-5);color:var(--txt-fraco)}
.os-ajuste-vazio{padding:.75rem}
.os-saidas{display:flex;flex-direction:column;gap:.5rem}
.os-saida{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;border-radius:var(--raio);cursor:pointer;
  outline:1px solid var(--linha);outline-offset:-1px}
.os-saida:has(input:checked){outline:2px solid var(--acao);outline-offset:-2px}
.os-saida-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem;font-size:var(--t-13)}
.os-saida-txt .d{font-size:var(--t-12);color:var(--txt-fraco)}

.os-saldo{border-radius:var(--radius-lg);padding:.625rem .75rem;margin:-.25rem 0;
  background:var(--sup-rebaixada);outline:1px solid var(--linha-fina);outline-offset:-1px}
.os-saldo.devedor{background:var(--er-fundo);outline-color:var(--er-linha)}
.os-saldo.devedor .v,.os-saldo.devedor .os-saldo-rot{color:var(--er)}
.os-saldo.a_pagar{background:var(--av-fundo);outline-color:var(--av-linha)}
.os-saldo.a_pagar .os-saldo-rot{color:var(--av)}
.os-saldo.credor{background:var(--ok-fundo);outline-color:var(--ok-linha)}
.os-saldo.credor .v,.os-saldo.credor .os-saldo-rot{color:var(--ok)}
.os-saldo .d{color:var(--txt-forte)}
.os-saldo .v{white-space:nowrap}
.os-saldo{min-width:13.5rem}
.os-saldo .v{text-align:right;font-size:var(--t-18)}
.os-saldo .d{text-align:right}

/* ---------- Dados: o formulário padrão; cada campo grava pela sua action (Fase 8) ---------- */
.os-ed{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.os-ed>.inp{flex:1 1 10rem;min-width:0;width:auto}
.os-ed-col{flex-direction:column;align-items:stretch}
.os-ed-col>.inp{flex:none}
.os-ed textarea{height:auto;min-height:5rem;padding:.5rem .75rem;font:inherit;line-height:1.5;field-sizing:content;resize:vertical}
.os-bts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.os-motivo{display:flex;gap:.375rem;align-items:flex-start}
.os-motivo svg{flex:none;margin-top:.0625rem}
.os-sub2{font-size:var(--t-13);font-weight:600;color:var(--txt-forte);margin-bottom:.5rem}
.os-reqs{display:flex;flex-direction:column}
.os-req-ed{display:grid;grid-template-columns:minmax(0,1fr) 13rem 27.5rem;gap:.5rem .75rem;align-items:center;
  padding:.5rem 0;border-bottom:1px solid var(--linha-fina)}
.os-req-nome{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;min-width:0}
.os-req-nome .nome{font-weight:600;color:var(--txt-forte);overflow-wrap:anywhere}
.os-req-bts{display:flex;gap:.375rem;flex-wrap:wrap;justify-content:flex-end}
.os-req-novo select.inp+.lbl{margin-top:.5rem}
.os-trava{align-items:flex-start}
.btn.os-perigo{color:var(--er)}
.os-secao{display:flex;flex-direction:column;gap:.625rem;padding-top:1rem;border-top:1px solid var(--linha-fina)}
.os-secao:first-of-type{border-top:0;padding-top:0}
.os-secao .inp.dis{display:flex;align-items:center;gap:.5rem;min-height:2.5rem;height:auto;padding:.375rem .75rem;flex-wrap:wrap}
.os-secao .inp.dis .cresce{flex:1;min-width:0}
.os-secao .inp.os-alto{align-items:flex-start;line-height:1.5}
.os-secao .inp.dis.os-apagado{color:var(--txt-apagado)}

/* ---------- Andamento: a nota na largura inteira; os anexos dela na linha do tempo ---------- */
.os-nota-texto{height:auto;min-height:5.5rem;padding:.625rem .75rem;font:inherit;color:inherit;width:100%;
  field-sizing:content;resize:vertical}
.os-evento-anexos{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.375rem}
.os-evento-anexos .chip{text-decoration:none;min-height:2.25rem}

/* ---------- os diálogos das ações raras e da mensagem ao cliente ---------- */
.os-dialogo{border:0;border-radius:var(--radius-lg);box-shadow:var(--sombra-janela);padding:1.25rem 1.5rem;
  width:calc(100% - 2rem);max-width:32rem;background:var(--sup-cartao);color:var(--txt-forte)}
.os-dialogo::backdrop{background:var(--veu)}
.os-dialogo-t{display:flex;gap:.5rem;align-items:center;margin:0;font-size:var(--t-18);font-weight:650}
.os-dialogo-acoes{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.25rem}
.os-confirma{display:flex;gap:.5rem;align-items:center;min-height:2.75rem;font-size:var(--t-14)}
.os-confirma input{width:1.125rem;height:1.125rem;accent-color:var(--acao)}
.os-lista-cobrar{margin:0;padding-left:1.125rem;font-size:var(--t-14);line-height:1.6}
.os-botao-perigo{background:var(--er-cheio);color:var(--sobre-er)}
.os-botao-perigo:hover{filter:brightness(.95)}

/* o registro das entregas */
.os-entregas td .d{font-size:var(--t-12);color:var(--txt-fraco)}
.os-entregas td.dir form{margin:0}
.os-devedora-aviso{align-items:center}

/* ---------- a listagem de O.S. (molde `listar`, dono 30/09/2026) ----------
   situação e marcas em SÍMBOLO, o responsável em AVATAR, o cliente em coluna
   larga; o nome inteiro vem na dica do sistema (.tip + .bolha) */
.os-l-cod{font-weight:600;letter-spacing:.06em;color:var(--txt-forte);text-decoration:none}
.os-l-cod:hover{color:var(--link)}
.os-l-cli{display:flex;flex-direction:column;gap:.125rem;min-width:13rem;font-size:var(--t-12-5);line-height:1.35}
.os-l-nome{color:var(--txt-forte)}
.os-l-nome.forte{font-weight:600}
.os-l-tipo{display:block;font-size:var(--t-12);line-height:1.35}
.os-l-sub{display:block;font-size:var(--t-10);color:var(--txt-apagado)}
.os-l-apagado{color:var(--txt-apagado)}
.os-l-ic{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:9999px;
  background:var(--ne-suave);color:var(--sobre-ne-suave)}
.os-l-ic>svg{width:.875rem;height:.875rem}
.os-l-ic.g{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.os-l-ic.y{background:var(--av-suave);color:var(--sobre-av-suave)}
.os-l-ic.r{background:var(--er-suave);color:var(--sobre-er-suave)}
.os-l-ic.n{background:var(--in-suave);color:var(--sobre-in-suave)}
.retrato.os-l-av{width:1.75rem;height:1.75rem;font-size:var(--t-10-5)}
.os-l-ic:focus-visible,.os-l-av:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.os-l-marcas{display:inline-flex;gap:.25rem;flex-wrap:wrap}
.os-l-saldo{display:block;font-size:var(--t-12-5)}
.os-l-saldo.er{color:var(--er)}
.os-l-saldo.ok{color:var(--ok)}
.os-l-chips{display:flex;gap:.4375rem;flex-wrap:wrap;align-items:center}
.os-l-chips>a.chip{text-decoration:none;color:inherit}
.os-l-sep{width:1px;height:1.25rem;background:var(--linha)}
/* Departamento × Responsável: duas linhas de chips com a contagem (dono, 30/09) */
.os-l-quem{flex-basis:100%;display:flex;flex-direction:column;gap:.4375rem;padding:.625rem .75rem;
  border-radius:var(--raio);outline:1px solid var(--linha-fina);outline-offset:-1px}
.os-l-quem-linha{display:flex;flex-wrap:wrap;gap:.4375rem;align-items:center}
.os-l-quem-k{width:6.5rem;font-size:var(--t-12);color:var(--txt-fraco)}
.os-l-quem-linha>a.chip{text-decoration:none;color:inherit}
.os-l-quem-linha>a.chip>svg{width:.875rem;height:.875rem}
.os-l-n{font-variant-numeric:tabular-nums;color:var(--txt-fraco)}
.os-l-pessoa{margin:0;display:inline-flex}
.os-l-pessoa select{border:0;background:transparent;font:inherit;color:inherit;height:auto;min-height:0;width:auto;max-width:12rem;padding:0;box-shadow:none;outline:0}
.os-l-deps{display:inline-flex;gap:.25rem;flex-wrap:wrap}
/* a agenda: o departamento e o responsável HERDADOS da O.S. */
.ag-herdado{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin:0 0 .75rem;font-size:var(--t-13);color:var(--txt-fraco)}
.ag-marcado .ag-quem .os-dep{height:1.125rem;padding:0 .375rem;font-size:var(--t-10-5)}

/* ---------- tablet e celular ---------- */
@media (max-width:1023.98px){
  .os-req-ed{grid-template-columns:minmax(0,1fr) minmax(0,14rem)}
  .os-req-bts{grid-column:1/-1;justify-content:flex-start}
  .os-faixa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-saldo{grid-column:1/-1}
  .os-faixa-req{grid-column:1/-1}
  .os-dados,.os-andamento{grid-template-columns:minmax(0,1fr)}
  .os-svc-cab{grid-template-columns:1.25rem minmax(0,1fr) auto auto;grid-template-areas:none}
  .os-svc-cab>.badge:first-of-type,.os-svc-selo{display:none}
  /* a situação não cabe na primeira linha: desce com as ações, sem quebrar */
  .os-svc-sit{grid-column:2;grid-row:2;justify-self:start;white-space:nowrap}
  .os-svc-acao{grid-column:3/-1;grid-row:2}
}
@media (max-width:639.98px){
  .os-req-ed{grid-template-columns:minmax(0,1fr)}
  .os-req-bts{justify-content:flex-start}
  .os-tipo{font-size:var(--t-18)}
  .os-acoes{width:100%}
  .os-acoes>.btn{flex:1 1 auto}
  /* o menu ⋮ no celular: a largura da linha das ações, nunca para fora da tela */
  .os-acoes{position:relative}
  .os-mais{position:static}
  .os-menu{left:0;right:0;width:auto;max-width:none}
  .os-faixa{padding:.875rem 1rem;gap:.75rem 1rem}
  .os-abas{padding:0 1rem 1rem}
  .os-abas>.abas{margin:0 -1rem 1rem;padding:0 1rem}
  .os-svc-cab{grid-template-columns:1.25rem minmax(0,1fr) auto;padding:.5rem .75rem}
  /* a natureza sai; a situação fica, numa linha sob o nome, e as ações abaixo */
  .os-svc-cab>.badge:not(.os-svc-sit),.os-svc-valor .d{display:none}
  .os-svc-sit{grid-column:2/-1;grid-row:2;justify-self:start}
  .os-svc-acao{grid-column:2/-1;grid-row:3;justify-content:flex-start}
  .os-grade6{grid-template-columns:minmax(0,1fr)}
  .os-grade6>*{grid-column:auto!important}
  .os-kv .k{width:100%}
  .os-linha-form>.btn{width:100%}
  .os-dialogo{padding:1rem}
  .os-dialogo-acoes>.btn{flex:1 1 auto}
  .os-exig{flex-wrap:wrap}
  .os-exig-fim{text-align:left;width:100%;padding-left:2rem}
}

/* ---------- Vínculo pendente: a faixa da O.S. e a tela da regra ---------- */
.os-pendencia{margin-bottom:1rem;align-items:center}
.os-pendencia .cresce{flex:1;min-width:0}
.os-pendencia .btn{flex-shrink:0;text-decoration:none}
@media (max-width:40rem){.os-pendencia{flex-wrap:wrap}.os-pendencia .btn{width:100%;justify-content:center}}
.os-regra-vinculos{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}
.os-regra-vinculos .chip{text-decoration:none}
.os-regra-card{overflow:hidden;margin-bottom:1rem}
.os-regra-tabela th:first-child{width:45%}
.os-regra{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin:0}
.os-regra select.inp{width:auto;font:inherit;color:inherit}
.os-regra-op{height:var(--d-control-h-sm);padding:0 .6875rem;border:1px solid var(--linha);border-radius:999px;
  background:var(--sup-cartao);color:var(--txt-forte);font:inherit;font-size:var(--t-12-5);cursor:pointer;
  display:inline-flex;align-items:center}
.os-regra-op.on{background:var(--info-fundo);border-color:var(--acao);color:var(--txt-marca);font-weight:var(--font-weight-medium)}
.os-regra-op.dis{cursor:default;opacity:.65}
.os-regra-nota{max-width:56rem}
@media (max-width:40rem){
  .os-regra-tabela thead{display:none}
  .os-regra-tabela tr{display:block;padding:.625rem .75rem;border-bottom:1px solid var(--linha-fina)}
  .os-regra-tabela td{display:block;padding:.1875rem 0;border:0}
}

/* 05-tablet · Fase 9 (tablet, totem e TV). Só tokens da folha; sem hex, sem font-size ou raio literais. */

/* ============================================================== O TABLET DO CLIENTE (thread C)
   O desenho aprovado em 27/09 (docs/design_tablet_totem_tv, as pranchas «Tablet-*» e «Digital-*»),
   portado da aparelhos.css das pranchas para os tokens do app. Tudo mora sob `.tab-raiz`, a raiz da
   página do tablet pareado (atendimento/tablet/tablet.html) e da tela de digital do tablet (não
   `.tab`, que é a classe das tabelas do app — `<table class="tab">`): o
   totem e a TV (06) e a assinatura (07) têm as raízes deles. Quem olha é o cliente, de pé, sem
   treinamento: letra grande, alvo de toque de 56 a 84 px, nenhuma palavra do sistema. */
.tab-raiz{--tab-pad:3rem;min-height:100vh;display:flex;flex-direction:column;background:var(--sup-pagina);
  color:var(--txt-forte);-webkit-font-smoothing:antialiased}
.tab-raiz *{box-sizing:border-box}
.tab-raiz p,.tab-raiz h1,.tab-raiz h2{margin:0}
.tab-raiz .num{font-variant-numeric:tabular-nums}
.tab-raiz>.tab-tela,.tab-raiz #agora{flex:1;display:flex;flex-direction:column;min-height:0}
/* o quiosque tem a altura da tela: o que é longo (o aviso) rola por dentro, não a página */
.tab-raiz:has(>.tab-tela){height:100vh;height:100dvh;min-height:0}

/* a barra marinho do topo: a identidade do cartório, nunca o sistema (DEC-015) */
.tab-barra{background:var(--barra);color:var(--barra-txt);display:flex;align-items:center;gap:1.125rem;
  padding:0 2rem;height:4.75rem;flex-shrink:0}
.tab-barra img{height:1.875rem;width:auto;display:block}
.tab-barra .ident{flex:1;min-width:0;border-left:1px solid var(--barra-contorno);padding-left:1.125rem}
.tab-barra .nome{font-size:var(--t-19);font-weight:var(--font-weight-semibold);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab-barra .sub{font-size:var(--t-14);color:var(--barra-fraco);line-height:1.3}
.tab-pil{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .875rem;border-radius:9999px;
  background:var(--barra-avatar);font-size:var(--t-15);font-weight:var(--font-weight-semibold);white-space:nowrap}
.tab-pil svg{width:1.0625rem;height:1.0625rem}
.tab-pil.tab-grava{background:color-mix(in srgb,var(--er-icone) 24%,transparent);font-size:var(--t-14)}
.tab-pil.tab-grava i{width:.625rem;height:.625rem;border-radius:50%;background:var(--er-icone);animation:tab-pisca 1.6s ease-in-out infinite}
@keyframes tab-pisca{0%,100%{opacity:1}50%{opacity:.35}}

/* o miolo */
.tab-corpo{flex:1;min-height:0;display:flex;flex-direction:column;padding:2.25rem var(--tab-pad);gap:1.5rem;overflow-y:auto}
.tab-corpo.centro{align-items:center;justify-content:center;text-align:center;gap:1.375rem}
.tab-olho{font-size:var(--t-13);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-fraco)}
.tab-h1{font-size:var(--t-32);font-weight:700;letter-spacing:-.015em;line-height:1.18}
.tab-h1.g{font-size:var(--t-44)}
.tab-h1 em{font-style:normal;color:var(--txt-marca)}
.tab-lead{font-size:var(--t-19);color:var(--txt-fraco);line-height:1.5}
.tab-lead b{color:var(--txt-forte)}
.tab-miudo{font-size:var(--t-14);color:var(--txt-fraco);line-height:1.5}
.tab-col{display:flex;flex-direction:column}
.tab-linha{display:flex;align-items:center}
.tab-cartao{background:var(--sup-cartao);border-radius:var(--radius-3xl);box-shadow:var(--sombra-cartao),inset 0 0 0 1px var(--linha-cartao)}
.tab-ic{width:3.5rem;height:3.5rem;border-radius:var(--radius-xl);display:grid;place-items:center;
  background:var(--sup-selecionada);color:var(--txt-marca);flex-shrink:0}
.tab-ic svg{width:1.75rem;height:1.75rem}
.tab-ic.redondo{width:6.25rem;height:6.25rem;border-radius:50%}
.tab-ic.redondo svg{width:2.75rem;height:2.75rem}
.tab-ic.ok{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.tab-ic.av{background:var(--av-suave);color:var(--sobre-av-suave)}
.tab-ic.ne{background:var(--sup-rebaixada);color:var(--txt-forte)}
.tab-pilula{display:inline-flex;align-items:center;gap:.5rem;height:2.125rem;padding:0 .875rem;border-radius:9999px;
  font-size:var(--t-15);font-weight:var(--font-weight-semibold);background:var(--sup-rebaixada);color:var(--txt-forte)}
.tab-pilula svg{width:1.0625rem;height:1.0625rem}
.tab-pilula.in{background:var(--in-suave);color:var(--sobre-in-suave)}
.tab-pilula.ok{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.tab-pilula.er{background:var(--er-suave);color:var(--sobre-er-suave)}

/* os botões do tablet: alvo de 56 a 84 px */
.tab-bt{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;height:3.75rem;padding:0 1.75rem;
  border:0;border-radius:var(--raio);font:inherit;font-size:var(--t-19);font-weight:var(--font-weight-semibold);
  background:var(--acao);color:var(--txt-sobre-acao);cursor:pointer;text-decoration:none}
.tab-bt svg{width:1.375rem;height:1.375rem}
.tab-bt.g{height:5.25rem;font-size:var(--t-24)}
.tab-bt.contorno{background:var(--sup-cartao);color:var(--txt-forte);box-shadow:inset 0 0 0 1.5px var(--linha-campo)}
.tab-bt.fant{background:transparent;color:var(--txt-fraco);height:3rem;font-size:var(--t-17)}
.tab-bt[disabled],.tab-bt[aria-disabled="true"]{background:var(--sup-rebaixada);color:var(--txt-fraco);cursor:not-allowed}
.tab-bt:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* a lista com ícone (boas-vindas, PIX, foto) */
.tab-lista{display:flex;flex-direction:column;gap:.875rem;list-style:none;margin:0;padding:0}
.tab-lista li{display:flex;gap:.875rem;align-items:flex-start;font-size:var(--t-18);line-height:1.45}
.tab-lista li svg{width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--txt-marca);margin-top:.0625rem}

/* ---------------------------------------------------------------- o descanso e o só logo */
.tab-logo{height:4.5rem;width:auto}
.tab-logo.escura,.tema-escuro .tab-logo.clara{display:none}
.tema-escuro .tab-logo.escura{display:block}
.tab-info{display:flex;gap:2.5rem;padding:1.375rem 2rem;text-align:left}
.tab-info .rot{font-size:var(--t-14);color:var(--txt-fraco)}
.tab-info .val{font-size:var(--t-19);font-weight:var(--font-weight-semibold)}
.tab-so-logo{flex:1;display:grid;place-items:center;background:var(--barra)}
.tab-so-logo img{width:min(26rem,60vw);height:auto;animation:tab-respira 6s ease-in-out infinite}
@keyframes tab-respira{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.03);opacity:1}}

/* ---------------------------------------------------------------- boas-vindas e o aviso */
.tab-boas{display:grid;grid-template-columns:minmax(0,1fr) 27.5rem;gap:3rem;align-items:center;padding:2.5rem 3.5rem;flex:1}
.tab-consent{padding:1.625rem;gap:.875rem}
.tab-consent .tit{font-size:var(--t-19);font-weight:650}
.tab-marca{display:flex;gap:.875rem;align-items:center;padding:1rem 1.125rem;border-radius:var(--raio);
  background:var(--sup-selecionada);font-size:var(--t-18);font-weight:var(--font-weight-semibold);cursor:pointer}
.tab-marca input{width:1.75rem;height:1.75rem;margin:0;accent-color:var(--acao);flex-shrink:0;cursor:pointer}
.tab-ler{justify-content:space-between;height:3.5rem}
.tab-ler span{flex:1;text-align:left}
.tab-aviso{display:flex;flex-direction:column;gap:1.125rem;padding:1.75rem 3.5rem;flex:1;min-height:0}
.tab-aviso[hidden],.tab-boas[hidden]{display:none}
.tab-doc{position:relative;flex:1;min-height:0;border-radius:var(--radius-xl);background:var(--sup-cartao);
  box-shadow:inset 0 0 0 1px var(--linha);overflow-y:auto}
.tab-doc .texto{max-width:45rem;margin:0 auto;padding:1.75rem 2.5rem 3.75rem;font-size:var(--t-18);line-height:1.7;
  white-space:pre-line}
.tab-doc .texto h2{font-size:var(--t-14);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-fraco);margin:1.25rem 0 .5rem}
.tab-doc .texto h2:first-child{margin-top:0}
.tab-aviso-acoes{display:grid;grid-template-columns:1fr 1.6fr;gap:.875rem}
.tab-aviso-acoes .tab-bt{height:4.5rem}

/* ---------------------------------------------------------------- a digital */
/* a tela do tablet dentro da ficha: a régua da captura (.cap-tablet) centra e encolhe; aqui ela ocupa a largura */
.tab-raiz.cap-tablet{min-height:calc(100vh - 7rem);align-items:stretch;justify-content:flex-start;text-align:left;padding:0;gap:0}
.tab-dig{display:grid;grid-template-columns:minmax(0,1fr) 19.75rem;gap:1.5rem;flex:1;min-height:0}
.tab-ladrilho{border-radius:var(--radius-3xl);background:var(--sup-rebaixada);display:grid;place-items:center;position:relative;padding:1.5rem}
.tab-ladrilho.ok{background:var(--ok-fundo)} .tab-ladrilho.er{background:var(--er-fundo)}
.tab-ladrilho .porta-ilus{margin:0;padding:0;background:none;width:100%;justify-content:center}
.tab-ladrilho .porta-ilus>svg{width:100%;height:auto;max-width:9rem}
.tab-maos{position:relative;width:100%;max-width:47.5rem}
.tab-maos .porta-ilus{margin:0;padding:0;background:none;width:100%;display:block}
.tab-maos .porta-ilus>svg{width:100%;height:auto;max-width:none;display:block}
.tab-mk{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.tab-mk.ok{width:7.2%;aspect-ratio:1;border-radius:50%;background:var(--ok-cheio);color:var(--txt-sobre-acao);
  box-shadow:0 0 0 3px var(--sup-rebaixada)}
.tab-mk.ok svg{width:58%;height:58%}
/* o círculo que pisca: o halo AZUL (decisão do dono, rodada 2) no dedo do pedido — só enquanto o leitor lê (EM_CAPTURA) */
.tab-mk.tab-pulso{width:13.5%;aspect-ratio:1;border-radius:50%;border:4px solid var(--acao);animation:tab-pulso 1.2s ease-in-out infinite}
.tab-mk.alvo{width:13.5%;aspect-ratio:1;border-radius:50%;border:3px solid color-mix(in srgb,var(--acao) 45%,transparent)}
@keyframes tab-pulso{0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:1}50%{transform:translate(-50%,-50%) scale(1.12);opacity:.25}}
.tab-anel{position:relative;display:grid;place-items:center;width:7.5rem;height:7.5rem}
.tab-anel svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.tab-anel .trilho{stroke:var(--linha-fina)} .tab-anel .arco{stroke:var(--acao);transition:stroke-dashoffset .5s linear}
.tab-anel .dentro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tab-anel .seg{font-size:var(--t-40);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tab-anel .un{font-size:var(--t-13);color:var(--txt-fraco);margin-top:.25rem}
.tab-fim{width:7.5rem;height:7.5rem;border-radius:50%;display:grid;place-items:center;background:var(--ok-suave);color:var(--sobre-ok-suave)}
.tab-fim svg{width:3.25rem;height:3.25rem}
.tab-legenda{display:flex;gap:1.375rem;align-items:center;font-size:var(--t-14);color:var(--txt-fraco);flex-wrap:wrap}
.tab-legenda span{display:inline-flex;align-items:center;gap:.5rem}
.tab-legenda .b{width:1.125rem;height:1.125rem;border-radius:50%;display:grid;place-items:center}
.tab-legenda .b.ok{background:var(--ok-cheio);color:var(--txt-sobre-acao)} .tab-legenda .b.ok svg{width:.75rem;height:.75rem}
.tab-legenda .b.agora{border:3px solid var(--acao)}
.tab-aviso-g{display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 1.125rem;border-radius:var(--raio);font-size:var(--t-16);line-height:1.5}
.tab-aviso-g svg{width:1.375rem;height:1.375rem;flex-shrink:0}
.tab-aviso-g.er{background:var(--er-fundo);color:var(--er-texto);box-shadow:inset 0 0 0 1px var(--er-linha)}
.tab-aviso-g.in{background:var(--sup-selecionada);color:var(--txt-marca);box-shadow:inset 0 0 0 1px var(--linha-fina)}

/* ---------------------------------------------------------------- a foto (tablet e celular do cliente) */
.tab-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center;flex:1}
.tab-foto .tab-ladrilho{aspect-ratio:1;max-height:34rem}
.tab-foto .tab-ladrilho .porta-ilus>svg{max-width:15rem}
.tab-cam-v{display:none}
.tab-cam[data-cam="negada"] .tab-cam-v.negada,.tab-cam[data-cam="nao-encontrada"] .tab-cam-v.nao-encontrada,
.tab-cam[data-cam="em-uso"] .tab-cam-v.em-uso,.tab-cam[data-cam="outra"] .tab-cam-v.outra{display:flex}

/* ---------------------------------------------------------------- o PIX */
.tab-pix{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3.5rem;align-items:center;padding:2.25rem 3.5rem;flex:1}
.tab-valor{font-size:var(--t-48);font-weight:750;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.tab-qr{padding:1rem;border-radius:var(--radius-xl);background:var(--papel-branco);box-shadow:inset 0 0 0 1px var(--linha);
  width:13rem;height:13rem;display:grid;place-items:center;color:var(--papel-escuro)}
.tab-qr svg{width:100%;height:100%}
.tab-copia{display:flex;align-items:center;gap:.75rem;width:18.75rem;padding:.75rem .875rem;border:0;border-radius:var(--raio);
  background:var(--sup-rebaixada);font:inherit;font-size:var(--t-14);color:var(--txt-forte);text-align:left;cursor:not-allowed}
.tab-copia span{flex:1;min-width:0;word-break:break-all;line-height:1.45;font-variant-numeric:tabular-nums}
.tab-pix-pulso{width:.625rem;height:.625rem;border-radius:50%;background:var(--acao);animation:tab-pisca 1.4s ease-in-out infinite;flex-shrink:0}
.tab-prog{height:.5rem;border-radius:9999px;background:var(--linha-fina);overflow:hidden}
.tab-prog i{display:block;height:100%;background:var(--acao)}

/* ---------------------------------------------------------------- a pesquisa: estrelas âmbar com número e rótulo */
.tab-pesq{width:min(51.25rem,100%);margin:0 auto;padding:2rem 0;gap:1.375rem;justify-content:center}
.tab-est5{display:flex;flex-shrink:0;gap:1rem;justify-content:center;position:relative;width:max-content;margin-inline:auto}
.tab-est5 .nota{width:6rem;display:flex;flex-direction:column;align-items:center;gap:.375rem;border:0;background:none;padding:0;
  font:inherit;color:inherit;cursor:pointer;height:auto;min-height:0}
.tab-est5 .q{width:5.5rem;height:5.5rem;border-radius:var(--radius-3xl);display:grid;place-items:center;background:var(--sup-cartao);
  box-shadow:inset 0 0 0 1.5px var(--linha)}
.tab-est5 .q .porta-ilus{margin:0;padding:0;background:none}
.tab-est5 .q .porta-ilus>svg{width:3.875rem;height:auto}
.tab-est5 .est{position:relative;display:grid;place-items:center} .tab-est5 .est>*{grid-area:1/1}
.tab-est5 .cheia{opacity:0}
.tab-est5 .nota.on .q{background:var(--av-fundo);box-shadow:inset 0 0 0 1.5px var(--av-linha)}
.tab-est5 .nota.on .cheia{opacity:1}
.tab-est5 .nota.sel .q{box-shadow:inset 0 0 0 3px var(--av-icone)}
.tab-est5 .n{font-size:var(--t-22);font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
.tab-est5 .r{font-size:var(--t-14);color:var(--txt-fraco);text-align:center;line-height:1.2;min-height:2.125rem}
.tab-est5 .nota.sel .r{color:var(--txt-forte);font-weight:650}
.tab-est5 .nota:focus-visible .q{outline:2px solid var(--foco);outline-offset:2px}
/* a animação da prancha «pesquisa animada»: enquanto ninguém tocou, o toque vai do meio (3) à 5 e as
   estrelas acendem — mostra que é para tocar; o primeiro toque de verdade a desliga (tablet.js) */
.tab-est5.anim .toque{position:absolute;left:0;top:0;transform-origin:1.5rem .25rem;pointer-events:none;
  animation:tab-toque5 6s ease-in-out infinite}
.tab-est5.anim .toque .porta-ilus{margin:0;padding:0;background:none}
.tab-est5.anim .toque svg{display:block;width:3rem;height:auto}
@keyframes tab-toque5{0%{transform:translate(15.5rem,5.25rem) rotate(-48deg);opacity:0}10%{transform:translate(15.5rem,2.25rem) rotate(-48deg);opacity:1}
  32%{transform:translate(29.5rem,2.25rem) rotate(-48deg);opacity:1}62%{transform:translate(29.5rem,2.25rem) rotate(-48deg);opacity:1}
  74%,100%{transform:translate(29.5rem,5.25rem) rotate(-48deg);opacity:0}}
.tab-est5.anim .nota .cheia{animation:tab-est5 6s linear infinite}
@keyframes tab-est5{0%,31%{opacity:0}33%,70%{opacity:1}78%,100%{opacity:0}}
.tab-est5:not(.anim) .toque{display:none}
.tab-comentario{width:100%;height:6rem;border:0;border-radius:var(--raio);background:var(--sup-cartao);
  box-shadow:inset 0 0 0 1.5px var(--linha-campo);padding:1rem 1.125rem;font:inherit;font-size:var(--t-17);color:var(--txt-forte);resize:none}
.tab-comentario:focus{outline:2px solid var(--foco);outline-offset:-2px}
.tab-pesq-acoes{display:flex;gap:.875rem;justify-content:space-between}
.tab-pesq-acoes .tab-envia{width:15rem}

/* ---------------------------------------------------------------- a configuração «Tablet do cliente» (a tela do app) */
.tabcfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center;padding:1.25rem}
.tabcfg .tit{font-size:var(--t-15);font-weight:var(--font-weight-semibold);margin-bottom:.625rem}
.tabcfg-seg{display:inline-flex;padding:.25rem;border-radius:var(--radius-xl);background:var(--sup-rebaixada);gap:.25rem;border:0;margin:0}
.tabcfg-seg label{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:2.5rem;padding:0 1.125rem;border-radius:var(--raio);
  font-size:var(--t-15);font-weight:var(--font-weight-semibold);color:var(--txt-fraco);cursor:pointer}
.tabcfg-seg label svg{width:1.125rem;height:1.125rem}
.tabcfg-seg input{position:absolute;opacity:0;pointer-events:none}
.tabcfg-seg label:has(input:checked){background:var(--sup-cartao);color:var(--txt-forte);box-shadow:var(--sombra-cartao)}
.tabcfg-seg label:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:2px}
.tabcfg-seg label:has(input:disabled){cursor:not-allowed}
.tabcfg-desenho{border-radius:var(--radius-3xl);background:var(--sup-rebaixada);display:grid;place-items:center;padding:1.25rem}
/* a demonstração tem o tamanho fixo do caminho do movimento (460 × 306): aqui ela só escala */
.tabcfg-desenho{overflow:hidden}
.tabcfg-desenho .ass-anim{zoom:.8}
@media (max-width:90rem){.tabcfg-desenho .ass-anim{zoom:.7}}
@media (max-width:40rem){.tabcfg-desenho .ass-anim{zoom:.62}}
.tabcfg-desenho [data-modo]{display:none}
.tabcfg:has(input[value="dedo"]:checked) [data-modo="dedo"],.tabcfg:has(input[value="caneta"]:checked) [data-modo="caneta"]{display:block}
.tabcfg-linha{padding:1rem 1.25rem;margin-top:1rem}

/* ---------------------------------------------------------------- o retrato (800 × 1280) */
@media (max-aspect-ratio:1/1){
  .tab-raiz{--tab-pad:2rem}
  .tab-boas,.tab-pix,.tab-foto{grid-template-columns:minmax(0,1fr);padding:2rem;gap:2rem}
  .tab-boas{align-content:center}
  .tab-dig{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .tab-dig>.tab-col{flex-direction:row}
  .tab-dig>.tab-col>*{flex:1}
  .tab-aviso{padding:1.75rem 2rem}
  .tab-foto{align-content:start}
  .tab-foto .tab-ladrilho{aspect-ratio:auto;width:100%;height:34vh;max-height:none}
  .tab-est5{gap:.5rem} .tab-est5 .nota{width:5.25rem} .tab-est5 .q{width:4.75rem;height:4.75rem}
  .tab-pesq{padding:2rem}
  .tab-est5.anim .toque{display:none}
}
@media (max-width:40rem){.tabcfg{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .tab-pil.tab-grava i,.tab-mk.tab-pulso,.tab-pix-pulso,.tab-so-logo img,.tab-est5.anim .toque,.tab-est5.anim .nota .cheia{animation:none!important}
  .tab-est5.anim .toque{opacity:0}
}

/* 06-totem-tv · Fase 9 (tablet, totem e TV). Só tokens da folha; sem hex, sem font-size ou raio literais. */

/* ============================================================== O TOTEM (thread D)
   O desenho aprovado em 27/09 (docs/design_tablet_totem_tv, pranchas «Totem-*»), portado da aparelhos.css
   das pranchas para os tokens do app. Tudo mora sob `.tt-raiz`, a raiz de atendimento/totem/totem.html.

   UM desenho, três aparelhos, sem @media de orientação (a folha só tem os três cortes de largura):
   - a ESCALA segue o lado menor da tela (vmin), presa entre dois tokens: o totem deitado 1280 × 800, em pé
     1080 × 1920 e o celular 390 × 844 saem nos tamanhos das pranchas;
   - as DUAS COLUNAS (texto e teclado, texto e impressora) quebram sozinhas: cada coluna pede 55vh de largura,
     e só a tela deitada tem largura para as duas lado a lado.
   Todo texto do totem passa de 7:1 (é lido de pé, a meio metro): o azul de ação é o `--sobre-in-suave`
   (o #1E40AF das pranchas) no claro, e o `--acao` no escuro. */
.tt-raiz{--tt-acao:var(--sobre-in-suave);--tt-acao-txt:var(--txt-sobre-acao);
  --tt-pad:clamp(1rem,5vmin,3.5rem);--tt-gap:clamp(.625rem,2vmin,1.375rem);
  --tt-h1:clamp(var(--t-24),4.8vmin,var(--t-72));--tt-h1g:clamp(var(--t-28),5.6vmin,var(--t-72));
  --tt-rot:clamp(var(--t-18),3vmin,var(--t-40));--tt-desc:clamp(var(--t-14),2.1vmin,var(--t-24));
  --tt-lead:clamp(var(--t-16),2.4vmin,var(--t-28));--tt-olho:clamp(var(--t-11),1.6vmin,var(--t-20));
  --tt-cod:clamp(var(--t-72),14vmin,calc(var(--t-128) * 1.4));--tt-hora:clamp(var(--t-20),3.8vmin,var(--t-48));
  --tt-bt:clamp(4.75rem,14.5vmin,10.625rem);--tt-ic:clamp(2.75rem,8vmin,5.5rem);
  --tt-tecla:clamp(3.875rem,10.5vmin,8.25rem);--tt-barra-h:clamp(3.75rem,9.5vmin,7rem);
  --tt-raio:var(--radius-3xl);
  height:100vh;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--sup-pagina);
  color:var(--txt-forte);-webkit-font-smoothing:antialiased}
.tt-raiz.tema-escuro{--tt-acao:var(--acao)}
.tt-raiz *{box-sizing:border-box}
.tt-raiz p,.tt-raiz h1,.tt-raiz h2,.tt-raiz ul{margin:0}
.tt-raiz ul{padding:0;list-style:none}
.tt-raiz button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tt-raiz svg{flex-shrink:0}
/* a ilustração da casa ({% ilustracao %}) vem num invólucro com ladrilho próprio (02): aqui o ladrilho é nosso */
.tt-raiz .porta-ilus,.tv[data-tv9] .porta-ilus{margin:0;padding:0;background:none;border-radius:0;width:auto}

/* a barra marinho do topo: a identidade do cartório, nunca o sistema (DEC-015) */
.tt-barra{background:var(--barra);color:var(--barra-txt);display:flex;align-items:center;gap:var(--tt-gap);
  padding:0 var(--tt-pad);height:var(--tt-barra-h);flex-shrink:0}
.tt-barra img{height:calc(var(--tt-barra-h) * .4);width:auto;display:block}
.tt-barra .ident{flex:1;min-width:0;border-left:1px solid var(--barra-contorno);padding-left:var(--tt-gap)}
.tt-barra .nome{font-size:var(--tt-desc);font-weight:var(--font-weight-semibold);line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tt-barra .sub,.tt-barra .data{font-size:var(--tt-olho);color:var(--barra-fraco);line-height:1.3}
.tt-barra .hora{font-size:var(--tt-hora);font-weight:var(--font-weight-bold);line-height:1;text-align:right;
  font-variant-numeric:tabular-nums}
.tt-barra .data{text-align:right;margin-top:.25rem}
.tt-semrede{display:flex;align-items:center;gap:.75rem;padding:.75rem var(--tt-pad);background:var(--av-suave);
  color:var(--sobre-av-suave);font-size:var(--tt-desc);font-weight:var(--font-weight-semibold)}
.tt-semrede[hidden]{display:none}
.tt-semrede svg{width:1.375rem;height:1.375rem}

/* a tela que o htmx troca: nunca rola a página; o miolo cabe, e no celular apertado rola por dentro */
.tt-tela{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.tt-miolo{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--tt-gap);padding:var(--tt-pad)}
.tt-meio{justify-content:center}
.tt-col{display:flex;flex-direction:column;gap:var(--tt-gap);min-width:0}
.tt-duas{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--tt-gap) * 2)}
.tt-duas>*{flex:1 1 max(18rem,55vh);min-width:0}

.tt-olho{font-size:var(--tt-olho);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-fraco)}
.tt-h1{font-size:var(--tt-h1);font-weight:var(--font-weight-bold);letter-spacing:-.015em;line-height:1.18}
.tt-h1.g{font-size:var(--tt-h1g)}
.tt-lead{font-size:var(--tt-lead);color:var(--txt-fraco);line-height:1.5}
.tt-nota{font-size:var(--tt-desc);color:var(--txt-fraco);line-height:1.45}
.tt-site{display:flex;align-items:center;gap:.625rem;font-size:var(--tt-desc)}
.tt-site svg{width:1.375rem;height:1.375rem;color:var(--txt-marca)}

/* os botões de serviço: o cartão com o quadrinho do ícone, alvo de toque de 76 a 170 px */
.tt-raiz .tt-bt{display:flex;align-items:center;gap:var(--tt-gap);padding:0 calc(var(--tt-gap) * 1.4);min-height:var(--tt-bt);
  border-radius:var(--tt-raio);background:var(--sup-cartao);text-align:left;width:100%;
  box-shadow:var(--sombra-cartao),inset 0 0 0 1.5px var(--linha)}
.tt-raiz .tt-bt:active{background:var(--sup-selecionada)}
.tt-ic{width:var(--tt-ic);height:var(--tt-ic);border-radius:var(--radius-2xl);display:grid;place-items:center;flex-shrink:0;
  background:var(--sup-selecionada);color:var(--txt-marca)}
.tt-ic>svg{width:50%;height:50%}
.tt-raiz .tt-ic-ilus .porta-ilus{width:78%;height:78%}
.tt-ic-ilus .porta-ilus>svg{width:100%;height:100%}
.tt-bt-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.tt-bt-txt .rot,.tt-hora-marcada .rot{font-size:var(--tt-rot);font-weight:var(--font-weight-semibold);line-height:1.2}
.tt-bt-txt .tt-desc{font-size:var(--tt-desc);color:var(--txt-fraco);margin-top:.2rem;line-height:1.35}
.tt-esp{margin-left:auto;display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;border-radius:9999px;
  background:var(--sup-rebaixada);color:var(--txt-fraco);font-size:var(--tt-desc);font-weight:var(--font-weight-semibold);
  white-space:nowrap}
.tt-esp svg{width:1.05em;height:1.05em}
.tt-raiz .tt-forte{background:var(--tt-acao);color:var(--tt-acao-txt);box-shadow:none}
.tt-raiz .tt-forte:active{background:var(--acao-forte)}
.tt-forte .tt-bt-txt .tt-desc{color:color-mix(in srgb,var(--tt-acao-txt) 86%,transparent)}
.tt-forte .tt-ic{background:var(--sup-cartao)}

/* 1 · o início: duas colunas deitado, uma em pé e no celular; a hora marcada embaixo, sozinha */
.tt-raiz .tot-grade{margin:0;flex:1;min-height:0;display:grid;gap:var(--tt-gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(18rem,60vh)),1fr));grid-auto-rows:minmax(var(--tt-bt),1fr)}
.tt-raiz .tt-hora-marcada{justify-content:center;min-height:calc(var(--tt-bt) * .6);flex-shrink:0}
.tt-hora-marcada>svg{width:calc(var(--tt-rot) * 1.15);height:calc(var(--tt-rot) * 1.15);color:var(--txt-marca)}

/* 2 · geral ou preferencial: os dois botões altos e centrados; as prioridades, pequenas, embaixo */
.tt-filas{flex:1 0 auto;display:flex;flex-direction:column;justify-content:safe center;gap:var(--tt-gap);
  width:min(100%,max(72%,40rem));align-self:center}
.tt-raiz .tt-fila{min-height:var(--tt-bt)}
.tt-fila .tt-ic{width:calc(var(--tt-ic) * 1.1);height:calc(var(--tt-ic) * 1.1)}
.tt-casos-bloco{display:flex;flex-direction:column;gap:.5rem;margin-top:calc(var(--tt-gap) * .6)}
.tt-casos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(13rem,22vh)),1fr));gap:.375rem 1.125rem}
.tt-casos li{display:flex;align-items:center;gap:.5rem;font-size:var(--tt-desc);color:var(--txt-fraco);line-height:1.25}
.tt-raiz .tt-casos .porta-ilus{flex-shrink:0}
.tt-casos .porta-ilus>svg{width:calc(var(--tt-desc) * 1.7);height:calc(var(--tt-desc) * 1.7)}
.tt-rodape{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}

/* o botão médio (Voltar, Pular, Só a impressa) */
.tt-raiz .tt-bt-m{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.5rem;
  padding:0 1.5rem;border-radius:var(--raio);font-size:var(--tt-desc);font-weight:var(--font-weight-semibold)}
.tt-raiz .tt-bt-m.contorno{background:var(--sup-cartao);color:var(--txt-forte);box-shadow:inset 0 0 0 1.5px var(--linha-campo)}
.tt-bt-m svg{width:1.375rem;height:1.375rem}

/* o CPF e o celular: o visor e o teclado numérico na tela */
.tt-visor{height:calc(var(--tt-tecla) * 1.1);border-radius:var(--radius-2xl);background:var(--sup-cartao);
  box-shadow:inset 0 0 0 2.5px var(--tt-acao);display:flex;align-items:center;justify-content:center;
  font-size:clamp(var(--t-28),5vmin,var(--t-72));font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.tt-teclado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--tt-gap) * .8)}
.tt-raiz .tt-tecla{height:var(--tt-tecla);border-radius:var(--radius-2xl);background:var(--sup-cartao);
  box-shadow:var(--sombra-cartao),inset 0 0 0 1.5px var(--linha);display:flex;align-items:center;justify-content:center;
  gap:.375rem;font-size:clamp(var(--t-24),4.4vmin,var(--t-48));font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums}
.tt-raiz .tt-tecla:active{background:var(--sup-selecionada)}
.tt-raiz .tt-tecla.aux{font-size:var(--tt-desc);color:var(--txt-fraco)}
.tt-tecla.aux svg{width:1.375rem;height:1.375rem}
.tt-pular{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;
  border-radius:var(--radius-2xl);background:var(--sup-rebaixada);font-size:var(--tt-desc)}

/* avisos e pílulas grandes */
.tt-raiz .tt-aviso{display:flex;gap:.75rem;align-items:flex-start;margin:0;padding:.875rem 1.125rem;border-radius:var(--raio);
  font-size:var(--tt-desc);line-height:1.5}
.tt-aviso[hidden]{display:none}
.tt-aviso>svg{width:1.375rem;height:1.375rem;margin-top:.1rem}
.tt-raiz .tt-aviso.er{background:var(--er-fundo);color:var(--er-texto);box-shadow:inset 0 0 0 1px var(--er-linha)}
.tt-raiz .tt-aviso.av{background:var(--av-fundo);color:var(--sobre-av-suave);box-shadow:inset 0 0 0 1px var(--av-linha)}
.tt-raiz .tt-aviso.ok{background:var(--ok-fundo);color:var(--sobre-ok-suave);box-shadow:inset 0 0 0 1px var(--ok-linha)}
.tt-raiz .tt-aviso.in{background:var(--sup-selecionada);color:var(--txt-marca);box-shadow:inset 0 0 0 1px var(--linha-fina)}
.tt-pil{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:9999px;
  font-size:var(--tt-desc);font-weight:var(--font-weight-semibold)}
.tt-pil svg{width:1.1em;height:1.1em}
.tt-pil.ok{background:var(--ok-suave);color:var(--sobre-ok-suave)}
.tt-pil.av{background:var(--av-suave);color:var(--sobre-av-suave)}
.tt-pil.er{background:var(--er-suave);color:var(--sobre-er-suave)}
.tt-pil.ne{background:var(--ne-suave);color:var(--sobre-ne-suave)}

/* a senha no celular: os dois canais; o falso (WhatsApp, «Em breve») aparece, desligado */
.tt-canais{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(16rem,40vh)),1fr));gap:var(--tt-gap)}
.tt-raiz .tt-canal{display:flex;align-items:center;gap:var(--tt-gap);padding:calc(var(--tt-gap) * 1.2);min-height:var(--tt-bt);
  border-radius:var(--tt-raio);text-align:left;background:var(--sup-cartao);box-shadow:var(--sombra-cartao),inset 0 0 0 2px var(--linha)}
.tt-raiz .tt-canal[aria-disabled="true"]{background:var(--sup-rebaixada);box-shadow:inset 0 0 0 2px var(--linha-fina);cursor:default}
.tt-canal[aria-disabled="true"] .tt-ic{background:var(--sup-cartao);color:var(--txt-fraco)}

/* 4 · retire sua senha: o ladrilho da ilustração, o cartão da senha e os chips */
.tt-ld{border-radius:var(--tt-raio);background:var(--sup-rebaixada);display:grid;place-items:center;
  padding:calc(var(--tt-gap) * 1.2);position:relative;align-self:stretch}
.tt-ld.av{background:var(--av-fundo)} .tt-ld.er{background:var(--er-fundo)} .tt-ld.ne{background:var(--ne-fundo)}
.tt-raiz .tt-ld .porta-ilus{width:min(100%,max(12rem,52vmin))}
.tt-ld .porta-ilus>svg{width:100%;height:auto}
.tt-cartao{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--tt-gap) * 1.5);
  padding:calc(var(--tt-gap) * 1.2) calc(var(--tt-gap) * 1.5);border-radius:var(--radius-2xl);background:var(--sup-cartao);
  box-shadow:var(--sombra-cartao),inset 0 0 0 1px var(--linha-cartao)}
.tt-cod{font-size:var(--tt-cod);font-weight:var(--font-weight-extrabold);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.tt-cartao-det{font-size:var(--tt-desc);line-height:1.5}
.tt-cartao-det .fraco{color:var(--txt-fraco)}
.tt-chips{display:flex;flex-wrap:wrap;gap:.625rem}
.tt-chip{display:inline-flex;align-items:center;gap:.625rem;padding:.75rem 1.125rem;border-radius:var(--raio);
  background:var(--sup-rebaixada);font-size:var(--tt-desc)}
.tt-chip svg{width:1.375rem;height:1.375rem;color:var(--txt-marca)}
.tt-quando{display:flex;flex-wrap:wrap;gap:1rem}
.tt-quando>div{padding:1rem 1.375rem;border-radius:var(--radius-2xl);background:var(--sup-cartao);box-shadow:inset 0 0 0 1px var(--linha)}
.tt-quando .k{font-size:var(--tt-olho);font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-fraco)}
.tt-quando .v{font-size:var(--tt-rot);font-weight:var(--font-weight-semibold);margin-top:.25rem}

/* a impressora NOVA (decidida em 27/09): o corpo é uma ilustração, o papel azul é outra, que desce pela fenda */
.tt-imp{position:relative;width:min(100%,max(12rem,52vmin))}
.tt-raiz .tt-imp>.porta-ilus{width:100%}
.tt-imp>.porta-ilus>svg{width:100%;height:auto}
.tt-imp-vao{position:absolute;left:30%;top:44%;width:40%;height:50%;overflow:hidden}
.tt-imp-papel{animation:tt-sai-papel 7s linear infinite}
.tt-raiz .tt-imp-papel .porta-ilus{width:100%}
.tt-imp-papel .porta-ilus>svg{width:100%;height:auto;display:block}
@keyframes tt-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}}
/* o cupom do fallback sem Spidea Hub existe só para a folha de 80 mm do @media print (02) */
.tt-raiz .tt-so-impresso{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a ANTIGA, de reserva (a .impressora da 02), cabe no ladrilho */
.tt-imp-antiga{margin:0 auto}

/* só o logotipo: fora do horário, quando a aparência pede */
.tt-so-logo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tt-gap);
  padding:var(--tt-pad);text-align:center}
.tt-so-logo img{width:min(70%,32rem);height:auto;animation:tt-respira 6s ease-in-out infinite}
.tt-so-logo img.escuro,.tt-raiz.tema-escuro .tt-so-logo img.claro{display:none}
.tt-raiz.tema-escuro .tt-so-logo img.escuro{display:block}
@keyframes tt-respira{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.03);opacity:1}}

/* o celular: a barra enxuta (sem a atribuição e a data) e sem o tempo de espera no botão */
@media (max-width:639.98px){
  .tt-barra .sub,.tt-barra .data{display:none}
  .tt-barra .nome{white-space:normal;overflow:visible;line-height:1.2}
  .tt-esp{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tt-imp-papel,.tt-so-logo img{animation:none!important}
}
@media print{
  .tt-raiz .tt-so-impresso{width:72mm;height:auto;overflow:visible;clip-path:none;white-space:normal}
}

/* ============================================================== A TV DA SALA DE ESPERA (thread D)
   O desenho aprovado em 27/09 (pranchas «TV-*»): o ESCURO é o escolhido (marinho, cartões um tom acima e o
   âmbar de «Chamando agora»); o CLARO é a barra marinho sobre o fundo branco. Raiz `.tv[data-tv9]` (a `.tv` que o
   painel.js procura, e o `.claro` de sempre); por cima das regras antigas da 02 (`.tv .tv-*`), que continuam valendo para quem não é
   `[data-tv9]`. A tela é a mesma em 1920 × 1080 e em 1280 × 720: a escala segue a largura (vw), presa entre tokens.
   Os papéis da TV não seguem o tema do sistema: são o suporte físico (como `--papel-branco` na 02). */
.tv[data-tv9]{--tv9-pagina:var(--marca-950);--tv9-cartao:color-mix(in srgb,var(--marca-950),var(--marca-800) 30%);
  --tv9-rebaixada:color-mix(in srgb,var(--marca-950),var(--marca-800) 15%);--tv9-txt:var(--barra-txt);
  --tv9-fraco:var(--barra-fraco);--tv9-marca:var(--marca-300);--tv9-linha:var(--barra-contorno);
  --tv9-destaque:var(--color-amber-300);--tv9-chama-fundo:color-mix(in srgb,var(--color-amber-400) 14%,transparent);
  --tv9-pad:clamp(1.5rem,2.5vw,3rem);--tv9-gap:clamp(1.25rem,1.9vw,2.25rem);--tv9-raio:var(--radius-3xl);
  height:100vh;overflow:hidden;display:flex;flex-direction:column;background:var(--tv9-pagina);color:var(--tv9-txt);
  -webkit-font-smoothing:antialiased}
.tv[data-tv9].claro{--tv9-pagina:var(--papel-branco);--tv9-cartao:var(--marca-50);--tv9-rebaixada:var(--marca-100);
  --tv9-txt:var(--marca-950);--tv9-fraco:var(--color-zinc-700);--tv9-marca:var(--marca-800);--tv9-linha:var(--color-zinc-300);
  --tv9-destaque:var(--color-amber-900);--tv9-chama-fundo:var(--color-amber-100)}
.tv.disp[data-tv9]{background:var(--tv9-pagina);color:var(--tv9-txt)}
.tv[data-tv9] *{box-sizing:border-box}
.tv[data-tv9] h2,.tv[data-tv9] p{margin:0}
.tv[data-tv9] .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* a barra: marinho nos dois temas */
.tv9-barra{background:var(--barra);color:var(--barra-txt);display:flex;align-items:center;gap:var(--tv9-gap);
  height:clamp(4.5rem,5.8vw,7rem);padding:0 var(--tv9-pad);flex-shrink:0}
.tv9-barra img{height:clamp(1.75rem,2.3vw,2.75rem);width:auto;display:block}
.tv9-barra .ident{flex:1;min-width:0;border-left:1px solid var(--barra-contorno);padding-left:var(--tv9-gap)}
.tv9-barra .nome{font-size:clamp(var(--t-20),1.56vw,var(--t-30));font-weight:var(--font-weight-semibold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv9-barra .sub,.tv9-barra .data{font-size:clamp(var(--t-14),1.1vw,var(--t-22));color:var(--barra-fraco)}
.tv9-barra .hora{font-size:clamp(var(--t-40),2.9vw,var(--t-72));font-weight:var(--font-weight-bold);line-height:1;
  text-align:right;font-variant-numeric:tabular-nums}
.tv9-barra .data{text-align:right;margin-top:.375rem}

/* o miolo: a chamada e, ao lado, as últimas */
.tv[data-tv9] .tv9-meio{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31vw);
  gap:var(--tv9-gap);padding:var(--tv9-gap) var(--tv9-pad)}
.tv[data-tv9] .tv9-chamada{flex:none;border-radius:var(--tv9-raio);background:var(--tv9-cartao);display:flex;
  flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:var(--tv9-gap);text-align:center}
.tv[data-tv9] .tv9-chamada.agora{box-shadow:inset 0 0 0 clamp(4px,.32vw,6px) var(--tv9-destaque)}
.tv9-selo{display:inline-flex;align-items:center;gap:.875rem;padding:.5em 1.1em;border-radius:9999px;
  font-size:clamp(var(--t-20),1.46vw,var(--t-28));font-weight:var(--font-weight-bold);letter-spacing:.06em;
  text-transform:uppercase}
.tv9-selo svg{width:1.2em;height:1.2em}
.tv9-selo.agora{background:var(--tv9-chama-fundo);color:var(--tv9-destaque)}
.tv9-selo.antes{background:var(--tv9-rebaixada);color:var(--tv9-fraco)}
.tv[data-tv9] .tv-senha{font-size:clamp(var(--t-128),15.6vw,calc(var(--t-128) * 2.35));font-weight:var(--font-weight-extrabold);
  letter-spacing:-.03em;line-height:.95;font-variant-numeric:tabular-nums;margin-top:.12em;color:var(--tv9-txt)}
.tv9-para{display:flex;align-items:center;gap:.26em;margin-top:.22em;font-size:clamp(var(--t-48),5.2vw,calc(var(--t-72) * 1.4));
  font-weight:var(--font-weight-bold);color:var(--tv9-marca);line-height:1}
.tv9-para svg{width:.92em;height:.92em}
.tv[data-tv9] .tv9-para .tv-posto{font-size:inherit;font-weight:inherit;color:inherit;line-height:1;margin:0}
.tv9-para.parado{font-size:clamp(var(--t-28),2.6vw,var(--t-48));color:var(--tv9-fraco)}
.tv[data-tv9] .tv-chamada.nova .tv-senha,.tv[data-tv9] .tv-chamada.nova .tv9-para{animation:tv9-chamando 1s steps(1,end) 6}
@keyframes tv9-chamando{50%{opacity:.35}}

.tv9-lado{display:flex;flex-direction:column;min-width:0;border-radius:var(--tv9-raio);background:var(--tv9-cartao);
  padding:var(--tv9-gap);box-shadow:inset 0 0 0 2px var(--tv9-linha)}
.tv9-lado h2{font-size:clamp(var(--t-18),1.36vw,var(--t-28));font-weight:var(--font-weight-bold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--tv9-fraco)}
.tv[data-tv9] .tv-antes{display:flex;flex-direction:column;align-items:stretch;width:100%;margin:0}
.tv9-ult{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:1.5rem;padding:.55em 0;
  border-bottom:2px solid var(--tv9-linha)}
.tv9-ult .sen{font-size:clamp(var(--t-40),3.33vw,var(--t-72));font-weight:var(--font-weight-extrabold);font-variant-numeric:tabular-nums}
.tv9-ult .posto{font-size:clamp(var(--t-24),2.08vw,var(--t-48));font-weight:var(--font-weight-semibold);color:var(--tv9-fraco);text-align:right}
.tv9-ult.vazia .posto{grid-column:1/-1;text-align:left}
.tv9-espera{margin-top:auto;display:flex;align-items:center;gap:1rem;padding-top:1rem;
  font-size:clamp(var(--t-18),1.36vw,var(--t-28));color:var(--tv9-fraco);line-height:1.35}
.tv9-espera svg{width:2.1vw;height:2.1vw;min-width:1.75rem;min-height:1.75rem;color:var(--tv9-marca)}
.tv9-espera b{color:var(--tv9-txt)}

/* aguarde: gente esperando e ninguém chamado */
.tv9-vazia{grid-column:1/-1;border-radius:var(--tv9-raio);background:var(--tv9-cartao);display:flex;align-items:center;
  justify-content:center;gap:var(--tv9-gap);padding:var(--tv9-pad)}
.tv9-vazia .ic svg{width:clamp(4rem,6vw,7rem);height:clamp(4rem,6vw,7rem);color:var(--tv9-marca)}
.tv9-vazia .t{font-size:clamp(var(--t-48),3.75vw,var(--t-72));font-weight:var(--font-weight-extrabold);line-height:1.1}
.tv9-vazia .d{font-size:clamp(var(--t-24),1.9vw,var(--t-40));color:var(--tv9-fraco);margin-top:.5em;line-height:1.4;max-width:48rem}

/* só o logotipo: fechado ou ocioso. A barra e o rodapé somem junto (a marca `data-estado` do miolo). */
.tv9-so-logo{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;text-align:center}
.tv9-so-logo img{width:min(46vw,60vh);height:auto;animation:tt-respira 6s ease-in-out infinite}
.tv[data-tv9]:not(.claro) .tv9-so-logo img.claro,.tv[data-tv9].claro .tv9-so-logo img.escuro{display:none}
.tv9-so-logo .legenda{font-size:clamp(var(--t-18),1.36vw,var(--t-28));color:var(--tv9-fraco);max-width:60rem;line-height:1.45}
.tv9-so-logo .legenda b{color:var(--tv9-txt)}
.tv[data-tv9]:has(#agora[data-estado="fechado"]) .tv9-barra,.tv[data-tv9]:has(#agora[data-estado="fechado"]) .tv9-pe,
.tv[data-tv9]:has(#agora[data-estado="vazia"]) .tv9-barra,.tv[data-tv9]:has(#agora[data-estado="vazia"]) .tv9-pe{display:none}

/* o rodapé */
.tv9-pe{display:flex;align-items:center;gap:var(--tv9-gap);height:clamp(4.25rem,5.4vw,6.5rem);padding:0 var(--tv9-pad);
  background:var(--tv9-cartao);flex-shrink:0}
.tv9-pe .ic{display:grid;place-items:center;width:clamp(2.75rem,3.1vw,3.75rem);height:clamp(2.75rem,3.1vw,3.75rem);
  border-radius:var(--radius-2xl);background:var(--tv9-rebaixada);color:var(--tv9-marca)}
.tv9-pe .ic svg{width:55%;height:55%}
.tv9-pe .aviso{flex:1;min-width:0;font-size:clamp(var(--t-18),1.4vw,var(--t-30));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv9-pe .site{font-size:clamp(var(--t-16),1.25vw,var(--t-28));color:var(--tv9-fraco);font-weight:var(--font-weight-semibold)}
.tv9-semrede{position:fixed;left:50%;top:1rem;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1.25rem;border-radius:var(--raio);background:var(--av-cheio);color:var(--sobre-av);
  font-size:clamp(var(--t-16),1.1vw,var(--t-22));font-weight:var(--font-weight-semibold)}
.tv9-semrede[hidden],.tv9-som[hidden]{display:none}
.tv9-som{position:fixed;right:1.5rem;bottom:7rem;padding:1rem 1.5rem;border:0;border-radius:var(--raio);
  background:var(--acao);color:var(--txt-sobre-acao);font:inherit;font-size:var(--t-20);font-weight:var(--font-weight-semibold)}
@media (prefers-reduced-motion:reduce){
  .tv9-so-logo img,.tv[data-tv9] .tv-chamada.nova .tv-senha,.tv[data-tv9] .tv-chamada.nova .tv9-para{animation:none!important}
}

/* ============================================================== AS TELAS DE CONFIGURAÇÃO (CPF no totem, Senha no celular) */
.tt-cfg{display:flex;flex-direction:column;gap:1rem;max-width:56rem;min-width:0}
.tt-cfg .card{margin:0}
.tt-cfg-linha{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}
/* o título do cartão já está dentro do padding da linha: sem o padding do .card>h3,
   ele alinha com os rótulos (Senha no celular, «As mensagens», 29/09) */
.tt-cfg-linha>h3{padding:0}
.tt-cfg-tabela{position:relative;overflow-x:auto;max-width:100%;min-width:0}
.tt-cfg-tabela .tab{width:100%}
.tt-cfg-motivo{padding:.5rem 1rem 1rem}
.tt-cfg-aviso{display:flex;gap:.625rem;align-items:flex-start;padding:.75rem .875rem}
.tt-cfg-aviso svg{width:1.125rem;height:1.125rem;flex-shrink:0}
.tt-cfg-n{max-width:7rem}
/* as três mensagens uma em cada linha, largura total (dono, 29/09) */
.tt-cfg-textos{display:grid;grid-template-columns:1fr;gap:.75rem}
.tt-cfg-textos textarea{width:100%;height:auto;min-height:5.5rem;padding:.625rem .75rem;line-height:1.5;resize:vertical}
.tv9-dirija{margin-top:.6em;font-size:clamp(var(--t-20),1.46vw,var(--t-28));font-weight:var(--font-weight-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tv9-fraco)}
.tv9-dirija+.tv9-para{margin-top:.08em}
/* a linha da finalidade do número (decisão do dono, 28/09): curta, com o escudo */
.tt-privacidade{display:flex;align-items:flex-start;gap:.5rem}
.tt-privacidade svg{width:1.25em;height:1.25em;margin-top:.1em;color:var(--txt-marca)}
/* os botões DE CADA TOTEM, dentro da tela do totem (decisão do dono, 29/09 noite): a lista
   que era «Botões do totem» — botão, descrição, fila e «aparece» — e a linha de adicionar */
.tt-botoes-card{max-width:56rem;margin-top:1rem}
.tt-botoes .cab-cols,.tt-botoes .li>.campos,.tt-botoes-novo{grid-template-columns:2fr 1.6fr 1.6fr .7fr}
/* três botões no fim da linha (subir, descer, salvar) numa fileira só: a calha de 6,5rem da
   lista do formulário cabe dois, e o terceiro descia para baixo dos outros */
.tt-botoes.lista-form{margin-right:0}
.tt-botoes .cab-cols{padding-right:8.75rem}
.lista-form.tt-botoes .li>.fim-li{width:8.75rem;flex-wrap:nowrap}
.tt-botoes-novo{display:grid;gap:.75rem;align-items:center;margin-top:.75rem;padding-top:.75rem;
  border-top:1px solid var(--linha-fina)}
.tt-botoes-nota{margin:.75rem 0 0;line-height:1.55}
@media (max-width:639.98px){
  .tt-botoes .cab-cols{display:none}
  .tt-botoes .li>.campos,.tt-botoes-novo{grid-template-columns:1fr 1fr}
  .tt-botoes.lista-form{margin-right:0}
  .tt-botoes .li{flex-wrap:wrap;padding:.5rem 0}
  .tt-botoes .li+.li{border-top:1px solid var(--linha-fina)}
  .lista-form.tt-botoes .li>.fim-li{width:auto;padding-left:0;margin-left:auto}
}

/* 07-assinatura · Fase 9 (tablet, totem e TV). Só tokens da folha; sem hex, sem font-size ou raio literais. */

/* ---------- a assinatura no tablet (templates/assinatura/tablet.html) ----------
   Pranchas «Tablet-assinatura-*» do canvas «Tablet, totem e TV» (aprovadas em 27/09/2026):
   1280 × 800 deitado e 800 × 1280 em pé. O cabeçalho é o da thread C (05-tablet.css); o
   miolo mora num <main class="tab-corpo">, e os passos trocam por data-passo no #agora. */
.ass{display:flex;flex-direction:column;min-height:100%}
.ass .ass-passo{display:none}
.ass[data-passo="como"] [data-passo-de="como"],
.ass[data-passo="assinar"] [data-passo-de="assinar"],
.ass[data-passo="ler"] [data-passo-de="ler"]{display:flex}
.ass .tab-corpo{flex:1;flex-direction:column;gap:.875rem;padding:1.5rem 3rem;min-width:0}
.ass .ass-feito{display:flex}
.ass-olho{display:block;font-size:var(--t-12-5);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-fraco)}
.ass-h1{margin:.25rem 0 0;font-size:var(--t-32);font-weight:750;line-height:1.15;color:var(--txt-forte);letter-spacing:-.01em}
.ass-h1:focus{outline:0}
.ass-nota{margin:0;text-align:center;font-size:var(--t-13);color:var(--txt-fraco)}
.btn.ass-bt-grande{min-height:3.25rem;padding:0 1.5rem;font-size:var(--t-17);gap:.625rem}
.btn.ass-bt-grande svg{width:1.25rem;height:1.25rem}

/* o documento: os itens que saem (entrega) ou o valor (devolução), e «Ver o documento» */
.ass-doc{display:flex;gap:.875rem;align-items:center;padding:.875rem 1.125rem;border-radius:var(--radius-lg);
  background:var(--sup-cartao);box-shadow:var(--sombra-cartao);outline:1px solid var(--linha-fina);outline-offset:-1px}
.ass-doc .cresce{flex:1;min-width:0}
.ass-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.ass-itens li{display:flex;gap:.75rem;align-items:flex-start}
.ass-doc-ic{flex:none;display:grid;place-items:center;color:var(--acao)}
.ass-doc-ic svg{width:1.5rem;height:1.5rem}
.ass-doc-t{display:block;font-size:var(--t-17);font-weight:650;color:var(--txt-forte)}
.ass-doc-d{display:block;font-size:var(--t-13);color:var(--txt-fraco);margin-top:.125rem}
.ass-valor{display:block;font-size:var(--t-40);font-weight:750;line-height:1.1;color:var(--txt-forte);font-variant-numeric:tabular-nums}
.ass-doc>.ass-doc-ic{width:3.5rem;height:3.5rem;border-radius:var(--radius-lg);background:var(--sup-selecionada)}
.btn.ass-ver{flex:none;min-height:3rem;font-size:var(--t-17)}

/* o campo: a linha, o X, a dica e quem assina — o traço é um <canvas> por cima de tudo */
.ass-area{position:relative;flex:1;min-height:14rem;max-height:22rem;border-radius:var(--radius-xl);
  background:var(--sup-cartao);box-shadow:inset 0 0 0 2px var(--acao)}
.ass-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:crosshair;
  color:var(--txt-forte);border-radius:inherit}
.ass-base{position:absolute;left:2.5rem;right:2.5rem;bottom:3.625rem;border-top:2px solid var(--linha-forte)}
.ass-x{position:absolute;left:2.5rem;bottom:4.25rem;display:grid;color:var(--acao)}
.ass-x svg{width:1.875rem;height:1.875rem;stroke-width:3}
.ass-dica{position:absolute;right:2.5rem;bottom:4.25rem;font-size:var(--t-15);color:var(--txt-fraco)}
.ass-quem{position:absolute;left:2.5rem;right:2.5rem;bottom:1.375rem;font-size:var(--t-15);color:var(--txt-fraco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ass-acoes{display:flex;gap:.875rem;justify-content:space-between;align-items:center;flex-wrap:wrap}

/* como assinar: a ilustração animada à esquerda, os três passos à direita */
.ass[data-passo="como"] .ass-como{flex-direction:row;align-items:center;gap:2.25rem}
.ass-como-ilus{flex:none;display:grid;place-items:center;padding:1.25rem;border-radius:var(--radius-xl);background:var(--sup-rebaixada)}
.ass-como-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.875rem}
.ass-passos{list-style:none;margin:.25rem 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.ass-passos li{display:flex;gap:.875rem;align-items:flex-start;font-size:var(--t-17);line-height:1.45;color:var(--txt-forte)}
.ass-passos .n{flex:none;width:2.125rem;height:2.125rem;display:grid;place-items:center;border-radius:var(--radius-md);
  background:var(--sup-selecionada);color:var(--acao);font-weight:700}

/* a animação de «animacoes.html» (thread D): o traço se desenha enquanto a mão percorre o
   mesmo caminho. A caixa tem o tamanho da demonstração (460 × 306), porque o caminho do
   movimento está nessa escala. */
.ass-anim{position:relative;width:28.75rem;height:19.125rem}
/* a moldura da .porta-ilus (fundo, recuo e raio, da 02) sai daqui: ela cobria o campo azul
   atrás da mão e empurrava o desenho 0,75rem, tirando a mão da trilha do traço */
.ass-anim .porta-ilus{display:block;width:100%;margin:0;padding:0;background:none;border-radius:0}
.ass-anim .ass-mao .porta-ilus{width:auto}
.ass-anim .porta-ilus svg{width:100%;height:auto;display:block}
.ass-anim .rabisco{stroke-dasharray:100;stroke-dashoffset:100;animation:ass-risca 4s linear infinite}
.ass-mao{position:absolute;left:0;top:0;offset-rotate:0deg;animation:ass-mao 4s linear infinite;
  offset-path:path('M84.3333 237.667c11.5-19.1667 15.3333-34.5 19.1667-49.8333s11.5-23 19.1667 0 7.66667 34.5 26.8333 0 26.8333-46 42.1667-11.5 19.1667 26.8333 46-3.83333 23-23 49.8333-15.3333')}
.ass-anim .ass-mao .porta-ilus svg{height:auto}
.ass-mao.dedo{offset-anchor:50% 10%}
.ass-anim .ass-mao.dedo .porta-ilus svg{width:3.3125rem}
.ass-mao.caneta{offset-anchor:11% 89%}
.ass-anim .ass-mao.caneta .porta-ilus svg{width:7.875rem}
@keyframes ass-risca{0%,10%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:0}}
@keyframes ass-mao{0%{offset-distance:0%;opacity:0}6%,10%{offset-distance:0%;opacity:1}70%{offset-distance:100%;opacity:1}
  82%,100%{offset-distance:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ass-anim .rabisco{animation:none;stroke-dashoffset:0}
  .ass-mao{animation:none;opacity:0}
}

/* lendo: o documento em coluna única, com rolagem que se vê */
.ass-texto{flex:1;min-height:0;overflow:auto;padding:1.5rem 2rem;border-radius:var(--radius-lg);
  background:var(--sup-cartao);outline:1px solid var(--linha-fina);outline-offset:-1px}
.ass-texto p{max-width:34rem;margin:0 auto .75rem;font-size:var(--t-17);line-height:1.6;color:var(--txt-forte)}
.ass-texto.grande p{font-size:var(--t-22)}

/* assinada: o check, o documento, a prévia do traço */
.ass-feito{flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ass-feito-ic{width:6.5rem;height:6.5rem;display:grid;place-items:center;border-radius:50%;background:var(--ok-fundo);color:var(--ok-icone)}
.ass-feito-ic svg{width:3rem;height:3rem;stroke-width:2.5}
.ass-feito-d{margin:0;font-size:var(--t-18);color:var(--txt-fraco)}
.ass-previa{position:relative;width:min(100%,24rem);padding:1rem 1.25rem 2.5rem;border-radius:var(--radius-lg);
  background:var(--sup-cartao);box-shadow:inset 0 0 0 1.5px var(--linha-campo)}
.ass-previa-area{position:relative;height:4.5rem;padding-left:2.25rem}
.ass-previa .ass-x{left:0;bottom:.25rem}
.ass-previa .ass-x svg{width:1.375rem;height:1.375rem}
.ass-traco{width:100%;height:100%;fill:none;stroke:var(--txt-forte);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.ass-previa .ass-base{left:1.25rem;right:1.25rem;bottom:2.25rem;border-top-width:1.5px}
.ass-previa .ass-quem{left:1.25rem;right:1.25rem;bottom:.625rem;font-size:var(--t-14);text-align:left}

/* em pé (800 × 1280) e telas estreitas: uma coluna */
@media (max-width:899.98px){
  .ass .tab-corpo{padding:1.5rem 2.25rem}
  .ass[data-passo="como"] .ass-como{flex-direction:column;align-items:stretch}
  .ass-como-ilus{align-self:center}
  .ass-area{max-height:28rem;min-height:18rem}
  .ass-doc{flex-wrap:wrap}
}
@media (max-width:519.98px){
  .ass .tab-corpo{padding:1rem}
  .ass-como-ilus{padding:.75rem}
  .ass-anim{zoom:.62}
  .ass-h1{font-size:var(--t-24)}
  .ass-acoes .btn{flex:1 1 auto}
}

/* ---------- o lado do atendente: a aba Entrega, a Conta e o recibo assinado ---------- */
.os-ent-bts{align-items:center}
.os-falsos{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--linha-fina)}
/* o controle FALSO (regra do dono, Fase 9): à vista, com o desenho, sem ação — «Em breve» */
.btn.os-falso{opacity:.62;cursor:not-allowed}
.btn.os-falso:hover{background:none}
.os-tablet-espera,.os-devolucao{align-items:center}
.os-tablet-espera .ic{color:var(--acao)}
.os-recibo{display:inline-flex;gap:.375rem;align-items:center;min-height:2.75rem;font-weight:600;color:var(--link);text-decoration:none}
.os-recibo svg{width:1rem;height:1rem;flex:none}
.recibo-ass{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
.recibo-ass h1{margin:.25rem 0 0}
.recibo-ass-cartao{display:flex;flex-direction:column;gap:.875rem;padding:1.25rem 1.5rem}
.recibo-ass-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin:0}
.recibo-ass-dados dt{font-size:var(--t-12);font-weight:600;color:var(--txt-fraco)}
.recibo-ass-dados dd{margin:.125rem 0 0;color:var(--txt-forte);overflow-wrap:anywhere}
.recibo-ass-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.recibo-ass-itens li{display:flex;gap:.5rem;align-items:center}
.recibo-ass-itens svg{width:1rem;height:1rem;flex:none;color:var(--acao)}
.recibo-ass-traco{width:100%;max-width:28rem}
@media (max-width:639.98px){ .recibo-ass-dados{grid-template-columns:minmax(0,1fr)} .recibo-ass-cartao{padding:1rem} }

/* ============================================================================
   DEPARTAMENTOS · 30/09/2026 — Configurações › Serventia › Departamentos, a aba
   «Departamentos» da ficha do usuário, o campo do tipo de serviço e a linha do
   Início. Só tokens da folha: claro e escuro de graça. Prefixo dp-.
   ========================================================================== */

/* ------------------------------------------------ a pílula do departamento
   Neutra de propósito: as cores da folha dizem ESTADO; o departamento é um NOME. */
.dp-pil{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .5rem 0 .375rem;
  border-radius:9999px;background:var(--sup-cartao);outline:1px solid var(--linha-fina);outline-offset:-1px;
  font-size:var(--f-12);font-weight:500;color:var(--txt-forte);white-space:nowrap;max-width:100%;
  text-decoration:none;vertical-align:middle}
.dp-pil svg{width:.875rem;height:.875rem;color:var(--txt-fraco);flex-shrink:0}
a.dp-pil:hover{background:var(--sup-rebaixada)}
.dp-sigla{font-weight:600;letter-spacing:.04em}
.dp-sigla-inp{text-transform:uppercase}

/* ------------------------------------------------ a ESTRELA ÂMBAR DE SELEÇÃO MÚLTIPLA
   Classe NOVA (dono, 30/09): comporta-se como checkbox/interruptor — marcar uma
   não desmarca as outras (zero, uma ou várias). A `.estrela` de sempre continua
   sendo a de UM só (cargo favorito, Hub principal), como rádio. Contorno quando
   desligada; cheia em âmbar quando ligada; foco visível pelo teclado. */
.estrela-multipla{width:1.75rem;height:1.75rem;border-radius:var(--radius-sm);display:inline-grid;
  place-items:center;border:0;background:none;padding:0;color:var(--txt-apagado);cursor:pointer;
  flex-shrink:0;font:inherit}
.estrela-multipla svg{width:1.125rem;height:1.125rem;fill:none;transition:transform .12s ease}
.estrela-multipla:hover{background:var(--sup-rebaixada);color:var(--av-icone)}
.estrela-multipla:focus-visible{outline:2px solid var(--acao);outline-offset:1px}
.estrela-multipla.on{color:var(--av-icone)}
.estrela-multipla.on svg{fill:var(--av-icone)}
.estrela-multipla:active svg{transform:scale(.88)}
.estrela-multipla.dis{cursor:default}
.estrela-multipla.dis:hover{background:none;color:var(--txt-apagado)}
.estrela-multipla.dis.on:hover{color:var(--av-icone)}
.dp-col-estrela{width:3.25rem;text-align:center}
.dp-col-estrela form{display:inline}
.dp-col-estrela .tip{display:inline-flex}

/* ------------------------------------------------ a lista (Configurações) */
.dp-busca{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}
.dp-busca>.inp{flex:1;min-width:14rem;display:flex;gap:.5rem;align-items:center}
.dp-busca>.inp input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:inherit}
.dp-busca>.inp svg{width:1rem;height:1rem;color:var(--txt-fraco);flex-shrink:0}
.dp-situacao{display:inline-flex;gap:.375rem;align-items:center}
.dp-situacao .dp-rot{font-size:var(--f-12);color:var(--txt-fraco)}
.dp-situacao select{width:auto}
.dp-tab{width:100%}
.dp-tab td{vertical-align:middle}
.dp-tab .badge,.dp-tab .kbd{white-space:nowrap}
.dp-tab .tit{font-weight:500;color:var(--txt-forte);text-decoration:none}
.dp-tab .tit:hover{text-decoration:underline}
.dp-abrir{width:2.5rem;text-align:right}
.dp-abrir a{color:var(--txt-fraco);display:inline-grid;place-items:center}
.dp-abrir svg{width:1rem;height:1rem}
.dp-membros{display:inline-flex;align-items:center}
.dp-membros .retrato{width:1.75rem;height:1.75rem;font-size:var(--t-10,.625rem);outline:2px solid var(--sup-cartao);
  margin-left:-.375rem}
.dp-membros .retrato:first-child{margin-left:0}
.dp-membros .mais{font-size:var(--f-12);color:var(--txt-fraco);margin-left:.5rem;white-space:nowrap}
.dp-regra{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--f-12);color:var(--txt-fraco);line-height:1.5;
  padding:.625rem .75rem;border-radius:var(--radius-md);background:var(--sup-pagina);margin-top:.75rem}
.dp-regra .ic svg{width:.9375rem;height:.9375rem;flex-shrink:0;margin-top:.125rem}
.dp-regra b{color:var(--txt-forte);font-weight:500}

/* ------------------------------------------------ um departamento */
.voltar-lista{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--f-13);color:var(--txt-fraco);
  text-decoration:none;margin-bottom:.75rem}
.voltar-lista svg{width:1rem;height:1rem}
.voltar-lista:hover{color:var(--txt-forte)}
.dp-cab{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.75rem}
.dp-cab-txt{flex:1;min-width:0}
.dp-cab-txt h1{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.dp-impede{margin:-.25rem 0 .75rem}
.dp-tipos{display:flex;gap:.375rem;flex-wrap:wrap}
.dp-tipos .kbd{text-decoration:none;color:var(--txt-forte)}
.dp-nota-tipos{margin-top:.625rem}
.dp-quem{display:flex;gap:.5rem;align-items:center;min-width:0}
.dp-quem .retrato{width:1.75rem;height:1.75rem;font-size:var(--f-12);flex-shrink:0}
.dp-quem .nome{font-size:var(--f-14);font-weight:500;color:var(--txt-forte);line-height:1.25}
.dp-quem .sub{display:block;font-size:var(--f-12);color:var(--txt-fraco);font-weight:400}

/* a escolha de vários usuários (incluir em lote) e de departamentos (tipo) */
.dp-escolha{display:flex;flex-direction:column;max-height:15rem;overflow:auto;padding:.25rem;
  border-radius:var(--radius-md);outline:1px solid var(--linha-campo,var(--linha-fina));outline-offset:-1px;
  background:var(--sup-cartao)}
.dp-escolha-l{display:flex;gap:.5rem;align-items:center;padding:.4375rem .625rem;border-radius:var(--radius-sm);
  font-size:var(--f-13);color:var(--txt-forte);cursor:pointer}
.dp-escolha-l:hover{background:var(--sup-rebaixada)}
.dp-escolha-l:has(input:checked){background:var(--sup-selecionada)}
.dp-escolha-l .n{flex:1;min-width:0}
.dp-escolha-l .m{font-size:var(--f-12);color:var(--txt-fraco);white-space:nowrap}
.dp-escolha-l.dis{cursor:default;color:var(--txt-apagado)}
.dp-escolha-l.dis:hover{background:none}
.dp-tipo-deps{display:flex;flex-direction:column;gap:.375rem}
/* incluir membros em LARGURA TOTAL (dono, 30/09, revisão das telas): a lista
   de usuários ocupa a linha inteira do cartão, em colunas; no celular, uma */
.dp-escolha-larga{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  column-gap:.5rem;max-height:18rem;align-content:start}

/* os avisos */
.dp-avisos-tab tr.dp-grupo th{font-size:var(--t-10-5,.65625rem);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-apagado);background:var(--sup-pagina);text-align:left;
  padding-top:.625rem;padding-bottom:.375rem}
.dp-av-nome{font-weight:500;color:var(--txt-forte)}
.dp-col-sw{width:5rem}
.dp-destino{width:auto;max-width:100%;min-width:14rem}

@media (max-width:639.98px){
  .dp-busca>.inp{min-width:0;flex-basis:100%}
  .dp-tab thead{display:none}
  .dp-tab,.dp-tab tbody,.dp-tab tr,.dp-tab td{display:block;width:100%}
  .dp-tab tr{padding:.75rem 0;border-bottom:1px solid var(--linha-fina)}
  .dp-tab td{border:0;padding:.125rem 0;white-space:normal;overflow-wrap:anywhere;max-width:none}
  .dp-tab .note{white-space:normal}
  .dp-tab td.col-larga{display:none}
  .dp-tab td.dp-abrir{display:none}
  .dp-destino{min-width:0;width:100%}
  .dp-col-sw{width:auto}
}

/* ============================================================================
   CÓPIA FÍSICA NO HUB · 15/10/2026 — a aba «Cópia física» do painel do Hub de
   cópia e o selo «Hub de cópia» com o balão (decisão do dono; desenho da frente
   de design cb12d2539, docs/design/copia_fisica_no_hub/). Só tokens da folha:
   claro e escuro de graça. Prefixo cf-.

   Folha SÓ DO CARTÓRIO, como a 07 e a 08: o painel local do Spidea Hub copia
   byte a byte só a 01 e a 02 (agentes/spidea-hub/ferramentas/trazer_a_folha.py),
   e o Hub está congelado pela trava da 1.2.12 — regra nova na 02 quebraria a
   guarda dele (agentes/spidea-hub/tests/test_painel_design.py).
   ========================================================================== */

/* as abas do painel com a 9ª aba: vão menor para caber a 1280 ao lado de «Copiar tudo» */
.painel-hub-nav .abas{gap:.875rem}
.cf-pilha>*+*{margin-top:1rem}
.cf-pilha>.cf-secao{margin-top:1.75rem}
.cf-secao{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;margin:0}
.cf-secao h2{margin:0;font-size:var(--t-14);font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.cf-secao p{margin:0;font-size:var(--t-12-5);color:var(--txt-fraco)}

/* a faixa de conexões, curta, nesta aba */
.cf-faixa-curta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:var(--t-12-5);color:var(--txt-fraco)}
.cf-faixa-curta .bolas{display:inline-flex;gap:.25rem}
.cf-faixa-curta .bolas i{width:.5rem;height:.5rem;border-radius:9999px;background:var(--ok-icone)}
.cf-faixa-curta .bolas i.av{background:var(--av-icone)}
.cf-faixa-curta a{color:var(--link)}

/* o selo no título */
.cf-selo-linha{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.375rem;font-size:var(--t-12-5);color:var(--txt-fraco)}

/* o «ao vivo» */
.cf-vivo{display:inline-flex;align-items:center;gap:.4375rem;font-size:var(--t-12);color:var(--txt-fraco);white-space:nowrap}
.cf-vivo .ponto{width:.5rem;height:.5rem;border-radius:9999px;background:var(--ok-icone);box-shadow:0 0 0 .1875rem var(--ok-suave)}
.cf-vivo.parado .ponto{background:var(--txt-apagado);box-shadow:none}
.cf-vivo.calado .ponto{background:var(--txt-apagado);box-shadow:none}
.cf-vivo.calado{color:var(--txt-forte)}
@media (prefers-reduced-motion:no-preference){
  .cf-vivo.ao-vivo .ponto{animation:cf-pulsa 2s ease-in-out infinite}
  @keyframes cf-pulsa{50%{box-shadow:0 0 0 .3125rem var(--ok-suave)}}}
.cf-mudou{border-radius:.25rem;background:var(--acao-suave);box-shadow:0 0 0 .1875rem var(--acao-suave)}
@media (prefers-reduced-motion:no-preference){.cf-mudou{transition:background 1.6s ease-out,box-shadow 1.6s ease-out}}

/* o resumo: a frase do Hub + o caminho da cópia */
.cf-resumo{background:var(--sup-cartao);border-radius:var(--radius-lg);box-shadow:var(--sombra-cartao);overflow:hidden}
.cf-resumo-topo{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem}
.cf-resumo-topo .sinal{flex-shrink:0;width:2.25rem;height:2.25rem;border-radius:9999px;display:grid;place-items:center}
.cf-resumo-topo .sinal svg{width:1.25rem;height:1.25rem}
.cf-resumo-topo.ok .sinal{background:var(--ok-suave);color:var(--ok)}
.cf-resumo-topo.aviso .sinal{background:var(--av-suave);color:var(--av)}
.cf-resumo-topo.erro .sinal{background:var(--er-suave);color:var(--er)}
.cf-resumo-topo.cinza .sinal{background:var(--sup-rebaixada);color:var(--txt-fraco)}
.cf-resumo-topo .txt{flex:1;min-width:0}
.cf-resumo-topo .frase{font-size:var(--t-16);font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.cf-resumo-topo.aviso .frase{color:var(--av)}.cf-resumo-topo.erro .frase{color:var(--er)}
.cf-resumo-topo .fazer{margin-top:.25rem;font-size:var(--t-13);color:var(--txt-forte)}
.cf-resumo-topo .de{margin-top:.25rem;font-size:var(--t-12);color:var(--txt-fraco)}
.cf-caminho{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,1fr) 2rem minmax(0,1fr);border-top:1px solid var(--linha-fina);
  background:var(--sup-fraca)}
.cf-etapa{padding:.875rem 1.25rem 1rem;min-width:0}
.cf-etapa .rot{display:flex;align-items:center;gap:.375rem;font-size:var(--t-11);color:var(--txt-fraco);text-transform:uppercase;letter-spacing:.04em}
.cf-etapa .rot svg{width:.9375rem;height:.9375rem}
.cf-etapa .palavra{margin-top:.25rem;display:flex;align-items:center;gap:.4375rem;font-size:var(--t-15);font-weight:var(--font-weight-semibold);color:var(--txt-forte)}
.cf-etapa .palavra i{width:.5625rem;height:.5625rem;border-radius:9999px;background:var(--ok-icone);flex-shrink:0}
.cf-etapa.av .palavra{color:var(--av)}.cf-etapa.av .palavra i{background:var(--av-icone)}
.cf-etapa.er .palavra{color:var(--er)}.cf-etapa.er .palavra i{background:var(--er-cheio)}
.cf-etapa.cinza .palavra{color:var(--txt-fraco)}.cf-etapa.cinza .palavra i{background:var(--txt-apagado)}
.cf-etapa dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;margin:.5rem 0 0;font-size:var(--t-12-5)}
.cf-etapa dt{color:var(--txt-fraco);min-width:0}.cf-etapa dd{margin:0;text-align:right;color:var(--txt-forte);font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-seta{display:grid;place-items:center;color:var(--txt-apagado)}
.cf-seta svg{width:1.125rem;height:1.125rem}
.cf-uso{height:.375rem;border-radius:9999px;background:var(--sup-rebaixada);overflow:hidden;margin-top:.5rem;position:relative}
.cf-uso>span{display:block;height:100%;background:var(--acao)}
.cf-uso.av>span{background:var(--av-icone)}
.cf-uso>b{position:absolute;top:-.125rem;bottom:-.125rem;width:2px;background:var(--txt-fraco)}

/* os atos do Oficial */
.cf-atos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
.cf-atos>.card+.card{margin-top:0}
.cf-ato{display:flex;align-items:center;gap:.875rem;padding:.75rem 0;border-top:1px solid var(--linha-fina)}
.cf-ato:first-child{border-top:0;padding-top:0}.cf-ato:last-child{padding-bottom:0}
.cf-ato .ic{flex-shrink:0;width:2.25rem;height:2.25rem;border-radius:var(--radius-lg);display:grid;place-items:center;
  background:var(--sup-rebaixada);color:var(--txt-forte)}
.cf-ato .txt{flex:1;min-width:0}
.cf-ato .t{font-size:var(--t-13);font-weight:var(--font-weight-medium);color:var(--txt-forte)}
.cf-ato .d{font-size:var(--t-12);color:var(--txt-fraco)}
.cf-ato form{margin:0;flex-shrink:0}
/* a origem desce INTEIRA para a linha de baixo quando não cabe; o título
   nunca quebra palavra a palavra (revisão da design, 15/10/2026) */
.cf-cab-card{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .625rem;padding:1rem 1.25rem 0}
.cf-cab-card h3{margin:0;font-size:var(--t-16);font-weight:var(--font-weight-semibold);flex:1 1 auto;min-width:min(100%,12rem)}
.cf-cab-card .cf-de{margin-left:auto;white-space:nowrap}
.cf-de{font-size:var(--t-11-5);color:var(--txt-fraco);white-space:nowrap}
.cf-sinc-num{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 .5rem}
.cf-sinc-num b{font-size:var(--t-22);font-weight:var(--font-weight-semibold);color:var(--txt-forte);font-variant-numeric:tabular-nums}
.cf-sinc-num span{font-size:var(--t-12-5);color:var(--txt-fraco)}
.cf-botoes{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.cf-sem-chave{display:flex;gap:.625rem;align-items:flex-start;font-size:var(--t-12-5);color:var(--txt-fraco)}
.cf-sem-chave svg{flex-shrink:0;margin-top:.0625rem}

/* os detalhes, por assunto */
.cf-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.cf-grade>.card+.card{margin-top:0}
.cf-grade>.inteiro{grid-column:1/-1}
.cf-grade .card>.body{padding-top:.75rem}
.cf-tec{margin-top:.75rem;border-top:1px solid var(--linha-fina);padding-top:.625rem}
.cf-tec>summary{cursor:pointer;font-size:var(--t-12);color:var(--txt-fraco);list-style:none;display:inline-flex;align-items:center;gap:.25rem}
.cf-tec>summary::-webkit-details-marker{display:none}
.cf-tec>summary svg{width:.875rem;height:.875rem;transition:transform .15s}
.cf-tec[open]>summary svg{transform:rotate(90deg)}
.cf-tec>dl{margin-top:.625rem}
.cf-tec code{font-size:var(--t-12)}
/* sem notícia: o que VEIO DO HUB fica cinza, com a hora fixa (o par marcado
   `cf-fixo` e a etapa cinza); o que é do Spidea segue com a cor de sempre */
.cf-velho dd.cf-fixo,.cf-etapa.cinza dd,.cf-etapa.cinza .palavra{color:var(--txt-fraco)}
.cf-pe{font-size:var(--t-12);color:var(--txt-fraco)}

@media (max-width:1023.98px){
  .cf-atos{grid-template-columns:1fr}
  .cf-caminho{grid-template-columns:1fr}
  .cf-seta{height:1.25rem}.cf-seta svg{transform:rotate(90deg)}
  .cf-etapa{padding:.75rem 1.25rem}}
@media (max-width:767.98px){
  .cf-grade{grid-template-columns:1fr}
  .cf-resumo-topo{padding:.875rem 1rem;flex-wrap:wrap}.cf-resumo-topo .txt{flex-basis:calc(100% - 3rem)}
  .cf-resumo-topo .cf-vivo{order:3;padding-left:3rem}.cf-etapa{padding:.75rem 1rem}
  .cf-ato{flex-wrap:wrap}.cf-ato form{width:100%;padding-left:3.125rem}
  .cf-cab-card{flex-wrap:wrap;padding:1rem 1rem 0}.cf-cab-card .cf-de{margin-left:0;width:100%}}

/* o balão do selo: frase longa, quebra em linhas, ANCORADO À ESQUERDA do selo
   — centrado, a caixa dele (mesmo transparente) passava da borda e dava
   rolagem lateral no miolo (937 px a 1280; medido, revisão da design) */
.tip>.cf-bolha{width:17rem;max-width:min(17rem,calc(100vw - 2rem));white-space:normal;text-align:left;
  left:0;transform:none}
.tip>.cf-bolha::after{left:.75rem}
/* a faixa curta: as cores dos cartões da faixa, e cinza quando o retrato é velho */
.cf-faixa-curta .bolas i.er{background:var(--er-cheio)}
.cf-faixa-curta .bolas i:not(.ok):not(.av):not(.er){background:var(--txt-apagado)}
.cf-faixa-curta.cinza .bolas i{background:var(--txt-apagado)}
/* os erros no celular: o código não quebra por dentro (como a hora), então o
   detalhe desce para baixo dele em vez de encostar */
@media (max-width:767.98px){
  .cf-grade [data-quadro="erros"] .painel-hub-pares{grid-template-columns:1fr}
  .cf-grade [data-quadro="erros"] .painel-hub-pares dd{text-align:left}}
/* a dica dos botões desabilitados dos atos («Exige a permissão …») quebra em
   linhas: numa linha só (377 px) ela passava da borda no cartão da direita */
.cf-botoes .tip>.bolha{white-space:normal;width:max-content;max-width:min(16rem,calc(100vw - 2rem))}