/*
 * Estilos do ERP SHIFTi (CSS puro, sem framework).
 *
 * Identidade visual (vault/Empresa/Identidade-Visual.md): azul-marinho da marca, em dois temas (escuro e claro) com a
 * mesma identidade. Cores só nas variáveis da seção 1 (a paleta ainda aguarda confirmação do CEO, P-32): para mudar a
 * paleta, troque só lá. Superfícies separadas por degrau de tom e por uma linha de 1px; sem sombra em repouso nas superfícies
 * (só no que flutua e, bem leve, em botões e cartões de tarefa), sem gradiente, sem brilho. Interação com ~150ms de
 * transição, sempre desligada para quem pede «reduzir movimento». O azul de destaque aparece na ação principal, nos links, no foco e no dado principal dos gráficos.
 * Tipografia: IBM Plex Sans (auto-hospedada em /assets/fonts), escala curta de 5 tamanhos, algarismos tabulares nos valores.
 * Tema: o atributo data-tema="escuro|claro" no <html> é posto por /assets/js/tema.js (preferência no navegador).
 * Decisão: vault/Documentacao-Tecnica/Decisoes/Decisao-Tipografia-Estilo-e-Tema-da-Interface.md
 *
 * Cor de detalhe (--cor-detalhe, lilás #EDE8FF da marca): só em detalhes, nunca no fundo da página.
 * Seções: 1 variáveis (tema escuro e tema claro) · 2 fonte e base · 3 estrutura (barra superior) · 4 layout público (login)
 *         5 formulários e botões · 6 avisos e status · 7 cartões e listas · 8 tabelas · 9 modal · 10 telas pequenas
 *         11 painel inicial (dashboard) · 12 tarefas do projeto: Quadro, Lista, menus flutuantes (.pop), gaveta lateral e avisos
 *
 * Documentação: vault/Documentacao-Tecnica/Codigo/public/assets/css/app.css.md
 */

/* ---------- 1. Variáveis (tema) ---------- */
/* Escuro é o padrão. Escala de superfícies (do mais fundo ao mais alto): fundo < superfície < superfície-2 < superfície-3. */
:root {
    color-scheme: dark;
    /* Marinho da marca (Frame 35 do logo e azuis do deck), em degraus mais afastados entre si. */
    --cor-fundo: #0d1520;
    --cor-superficie: #111a29;
    --cor-superficie-2: #172136;
    --cor-superficie-3: #1f2b45;
    --cor-texto: #e8edf4;
    --cor-texto-suave: #8da2bb;
    --cor-borda: #222e45;          /* contorno de cartão e linha forte de tabela */
    --cor-linha: #1a2539;          /* traço entre linhas */
    --cor-borda-campo: #4a5b78;    /* contorno de campo e de botão secundário */
    --cor-logo: #c8d8e8;
    /* Destaque: azul médio do deck. Texto sobre ele é o marinho (contraste 5,5:1). */
    --cor-primaria: #4a90d9;
    --cor-primaria-escura: #6aa5e3; /* passar o mouse */
    --cor-sobre-primaria: #0d1520;
    --cor-link: #4a90d9;
    --cor-link-linha: rgba(74, 144, 217, .45); /* sublinhado discreto em parágrafo corrido */
    --cor-foco: #6aa5e3;
    /* Lilás da marca (#EDE8FF no tema claro) SÓ EM DETALHES: item de menu atual, cabeçalho de tabela, hover de linha, selos e realces do painel. Nunca no fundo da página. */
    --cor-detalhe: #1d1b38;         /* equivalente sutil no escuro: lilás profundo, pouco saturado */
    --cor-detalhe-suave: #171a30;   /* passar o mouse numa linha ou atalho */
    --cor-detalhe-borda: #302d57;
    --cor-ativo: #1f2b45;           /* item de menu atual (azul-acinzentado; o lilás fica só em detalhes) */
    /* Estados (ponto de cor + texto; nos avisos, borda lateral + fundo suave). */
    --cor-aviso: #c9a84c;          /* dourado do deck */
    --cor-aviso-fundo: #231f14;
    --cor-ok: #6ee09a;
    --cor-ok-fundo: #12241d;
    --cor-erro: #ff8a7d;
    --cor-erro-fundo: #2a1a22;
    --cor-info: #4a90d9;
    --cor-info-fundo: #14223a;
    --cor-campo: #0d1520;
    --cor-hover-linha: #152033;
    --cor-sombra: rgba(0, 0, 0, .5); /* só no que flutua (menu, modal, janela) */
    --cor-sombra-leve: rgba(0, 0, 0, .35); /* relevo discreto de botão e de cartão de tarefa */
    --cor-fundo-modal: rgba(5, 9, 15, .75);
    /* Gráficos (graficos.js): azul para o dado principal; verde, amarelo e vermelho só quando o significado exige. */
    --cg-primaria: #4a90d9;
    --cg-ok: #5fcf8e;
    --cg-aviso: #c9a84c;
    --cg-erro: #ff8a7d;
    --cg-suave: #8da2bb;
    --cg-neutra: #5b6f8f;
    /* Forma, medidas e ritmo (múltiplos de 4px). */
    --raio: 4px;                   /* botões, campos, linhas, avisos */
    --raio-cartao: 16px;           /* contêineres em vidro: cartões, tabelas, menus, janelas (controles usam --raio: 4px); 12px no celular */
    --largura-max: 1360px;
    --altura-topo: 56px;
    --margem: 2rem;
    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
    --altura-controle: 36px;
    /* Tipografia: uma família; cinco tamanhos (12 · 14,5 · 16 · 20 · 26 px com a base de 14,5px). */
    --fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fonte-codigo: ui-monospace, Consolas, monospace;
    --fs-meta: .83rem;
    --fs-base: 1rem;
    --fs-secao: 1.1rem;
    --fs-tela: 1.4rem;
    --fs-titulo: 1.8rem;
}

/* Tema claro: mesma identidade, fundos neutros e o azul de destaque mais fundo para passar de 4,5:1. */
:root[data-tema="claro"] {
    color-scheme: light;
    --cor-fundo: #f3f5f8;
    --cor-superficie: #ffffff;
    --cor-superficie-2: #eff2f6;
    --cor-superficie-3: #e3e8ef;
    --cor-texto: #0d1520;
    --cor-texto-suave: #4b5b72;
    --cor-borda: #dce2ea;
    --cor-linha: #e8ecf1;
    --cor-borda-campo: #8795a9;
    --cor-logo: #1a1a1a;
    --cor-primaria: #2563a8;
    --cor-primaria-escura: #1d548f;
    --cor-sobre-primaria: #ffffff;
    --cor-link: #2563a8;
    --cor-link-linha: rgba(37, 99, 168, .4);
    --cor-foco: #2563a8;
    --cor-detalhe: #ede8ff;         /* lilás da marca (decisão do Leandro, 07/11/2026) */
    --cor-detalhe-suave: #f6f3ff;
    --cor-detalhe-borda: #dcd3f8;
    --cor-ativo: #e3e8ef;
    --cor-hover-linha: #f3f6fa;
    --cor-aviso: #8a6410;
    --cor-aviso-fundo: #fbf4e0;
    --cor-ok: #1b7a45;
    --cor-ok-fundo: #e9f6ee;
    --cor-erro: #b3362a;
    --cor-erro-fundo: #fbeceb;
    --cor-info: #2563a8;
    --cor-info-fundo: #e8f0fa;
    --cor-campo: #ffffff;
    --cor-sombra: rgba(13, 21, 32, .18);
    --cor-sombra-leve: rgba(13, 21, 32, .14);
    --cor-fundo-modal: rgba(13, 21, 32, .5);
    --cg-primaria: #2563a8;
    --cg-ok: #1b7a45;
    --cg-aviso: #a67c12;
    --cg-erro: #b3362a;
    --cg-suave: #4b5b72;
    --cg-neutra: #8795a9;
}

/* ---------- 2. Fonte e base ---------- */
/* IBM Plex Sans (SIL OFL 1.1), subconjunto latino, pesos 400, 500 e 600; licença em /assets/fonts/ibm-plex-sans/OFL.txt. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

* { box-sizing: border-box; }
/* 90,625% de 16px = 14,5px: a base média. Em rem, para respeitar o tamanho de letra que o usuário escolheu no navegador. */
html { font-size: 90.625%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: var(--fs-base); font-weight: 400; color: var(--cor-texto); background: var(--cor-fundo); line-height: 1.5; }
/* Link: na cor de destaque, sem sublinhado; sublinha ao passar o mouse e no foco do teclado. */
a { color: var(--cor-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Em texto corrido o sublinhado fica, discreto. */
.texto a, .alerta a, .ajuda a, .resumo-abertura a, .janela-item p a { text-decoration: underline; text-decoration-color: var(--cor-link-linha); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.texto a:hover, .alerta a:hover, .ajuda a:hover, .resumo-abertura a:hover, .janela-item p a:hover { text-decoration-color: currentColor; }
h1 { font-size: var(--fs-titulo); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--e4); }
h2 { font-size: var(--fs-secao); line-height: 1.3; font-weight: 600; margin: 0 0 var(--e3); }
h3 { font-size: var(--fs-base); font-weight: 600; margin: var(--e5) 0 var(--e2); }
p { margin: 0 0 var(--e3); }
code { font-family: var(--fonte-codigo); background: var(--cor-superficie-2); padding: 1px 6px; border-radius: var(--raio); font-size: .92em; }
small { font-size: var(--fs-meta); }
.ajuda { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.inline { display: inline; }
::selection { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
/* Algarismos tabulares: valores e colunas numéricas não "dançam". */
.num { font-variant-numeric: tabular-nums; }

/* ---------- 3. Estrutura: barra superior + conteúdo (área logada) ---------- */
/* Barra no topo: logo, menus em dropdown (<details>, funcionam sem JavaScript) e a conta à direita. Mesmo tom do fundo,
   separada só por uma linha. */
.topo { position: sticky; top: 0; z-index: 30; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.topo-in { display: flex; align-items: center; gap: var(--e5); max-width: var(--largura-max); height: var(--altura-topo); margin: 0 auto; padding: 0 var(--margem); }
.marca { display: block; flex: none; padding: var(--e1) 0; text-decoration: none; }
.marca img { display: block; height: 26px; width: auto; }
/* Logo sem a frase «THINK. SHIFT.» (decisão do Leandro, 07/11/2026): um SVG por tema, o outro escondido. tema.js põe data-tema no <html>
   antes da primeira pintura, então o logo certo já aparece no primeiro quadro; sem JavaScript vale o tema escuro (padrão). */
:root:not([data-tema="claro"]) .marca img.logo-no-claro { display: none; }
:root[data-tema="claro"] .marca img.logo-no-escuro { display: none; }
.topo-menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-width: 0; }
.topo-botao { display: none; }
.menu { display: flex; align-items: center; gap: var(--e1); }
.menu-link, .menu-titulo { display: flex; align-items: center; gap: var(--e2); height: 34px; padding: 0 var(--e3); border-radius: var(--raio); color: var(--cor-texto-suave); text-decoration: none; font-size: var(--fs-base); font-weight: 500; cursor: pointer; white-space: nowrap; }
.menu-link:hover, .menu-titulo:hover, .menu-grupo[open] > .menu-titulo { background: var(--cor-superficie-2); color: var(--cor-texto); text-decoration: none; }
.menu-link[aria-current="page"], .menu-grupo-ativo > .menu-titulo { background: var(--cor-ativo); color: var(--cor-texto); }
/* REGRA DOS ÍCONES (decisão do Leandro, opção D): só o item PRINCIPAL da barra superior (Painel, Comercial, Operação,
   Acesso e os próximos módulos) tem ícone, 16px, traço 1,5, SVG inline do Lucide (ISC), antes do rótulo. Itens de
   submenu (dropdowns) e menu da conta NÃO têm ícone. Item principal novo = ícone novo em views/layout.php. */
.icone { display: block; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
/* Seta dos dropdowns (chevron-down do Lucide): gira quando abre. */
.icone-seta { width: 14px; height: 14px; color: var(--cor-texto-suave); transition: transform .15s; }
.menu-grupo[open] > .menu-titulo .icone-seta, .conta[open] > .conta-nome .icone-seta { transform: rotate(180deg); }
/* Painéis dos dropdowns: flutuam de verdade, então são os únicos elementos da barra com sombra. */
.menu-grupo, .conta { position: relative; }
.menu-itens, .conta-opcoes { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: var(--e1); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); background: var(--cor-superficie-2); box-shadow: 0 8px 24px var(--cor-sombra); }
.conta-opcoes { left: auto; right: 0; }
.menu-itens a, .conta-opcoes a, .conta-opcoes .botao-link { display: block; width: 100%; padding: var(--e2) var(--e3); border-radius: var(--raio); color: var(--cor-texto); text-decoration: none; text-align: left; font-size: var(--fs-base); }
.menu-itens a:hover, .conta-opcoes a:hover, .conta-opcoes .botao-link:hover { background: var(--cor-superficie-3); color: var(--cor-texto); text-decoration: none; }
.menu-itens a[aria-current="page"], .conta-opcoes a[aria-current="page"] { background: var(--cor-ativo); font-weight: 500; }
/* Bolinha de aviso do menu (P-87): 8px, dourado de atenção (--cor-aviso), sem número; vale para qualquer aviso. Aparece no subitem e no rótulo do grupo. O pulso é só opacidade/escala (compositor) e some com «reduzir movimento». */
.aviso-ponto { position: relative; flex: none; display: inline-block; width: 8px; height: 8px; margin-left: var(--e2); border-radius: 50%; background: var(--cor-aviso); vertical-align: middle; }
.aviso-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cor-aviso); opacity: 0; animation: aviso-pulso 2.4s ease-out infinite; }
@keyframes aviso-pulso { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .aviso-ponto::after { animation: none; } }
.conta-opcoes .inline { display: block; }
.conta-opcoes .botao-link { background: none; border: 0; font: inherit; cursor: pointer; }
/* Troca de tema (escuro | claro): dois botões num item do menu da conta; só funciona com JavaScript, então some sem ele. */
.conta-tema { display: none; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e2) var(--e3); border-top: 1px solid var(--cor-borda); margin-top: var(--e1); padding-top: var(--e3); }
html.js .conta-tema { display: flex; }
.conta-tema-rotulo { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.conta-tema-opcoes { display: inline-flex; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); overflow: hidden; }
.conta-tema-opcoes button { font: inherit; font-size: var(--fs-meta); padding: 2px var(--e3); border: 0; background: transparent; color: var(--cor-texto-suave); cursor: pointer; }
.conta-tema-opcoes button + button { border-left: 1px solid var(--cor-borda-campo); }
.conta-tema-opcoes button:hover { color: var(--cor-texto); }
.conta-tema-opcoes button[aria-pressed="true"] { background: var(--cor-ativo); color: var(--cor-texto); font-weight: 500; }
/* Conta: inicial do nome num círculo neutro e o nome; as opções abrem num dropdown. */
.conta-nome { display: flex; align-items: center; gap: var(--e2); height: 36px; padding: 0 var(--e3) 0 var(--e1); border-radius: 999px; font-size: var(--fs-base); font-weight: 500; }
.conta-nome:hover, .conta[open] > .conta-nome { background: var(--cor-superficie-2); }
.conta-inicial { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cor-borda-campo); color: var(--cor-texto); font-size: var(--fs-meta); font-weight: 500; flex: none; }
.conta-texto { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conteudo { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: var(--e6) var(--margem) 64px; }

/* ---------- 4. Layout público (login) ---------- */
/* Sóbrio: marca centralizada sobre o fundo e um formulário limpo num quadro de contorno fino. */
body.publico { display: grid; place-items: center; min-height: 100vh; padding: var(--e4); }
.caixa-publica { width: 100%; max-width: 380px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); padding: var(--e6); border-radius: var(--raio-cartao); }
.marca-grande { margin: 0 0 var(--e6); padding: 0; text-align: center; }
.marca-grande img { display: inline-block; height: 32px; }
.caixa-publica h1 { font-size: var(--fs-tela); margin-bottom: var(--e5); }
.caixa-publica .formulario .botao { margin-top: var(--e4); width: 100%; }
.caixa-publica > p:last-child { margin: var(--e5) 0 0; text-align: center; font-size: var(--fs-meta); }

/* ---------- 5. Formulários e botões ---------- */
.formulario { display: flex; flex-direction: column; gap: var(--e2); }
.formulario-largo { max-width: 880px; margin-left: auto; margin-right: auto; margin-bottom: var(--e5); }
.formulario label { font-weight: 500; margin-top: var(--e3); }
.formulario small { color: var(--cor-texto-suave); }
/* Formulário de cadastro (fase 2): cada bloco é um cartão com os campos em DUAS colunas (<div class="campo"> = rótulo + controle
   + dica). Campo com área de texto, ou com class="campo-largo", ocupa a linha toda; avisos, listas de opções e linhas de
   serviço também. No celular vira uma coluna só. Formulário pequeno dentro de um cartão (login, 2FA, assinatura) segue em coluna. */
.formulario-largo fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e5); align-items: start; }
.formulario-largo fieldset > :not(.campo) { grid-column: 1 / -1; }
.formulario-largo fieldset > p { margin: 0; }
.campo { display: grid; grid-template-rows: 1fr auto; gap: var(--e2); min-width: 0; }
.campo > label { margin: 0; align-self: end; }
.campo > small { margin-top: calc(-1 * var(--e1)); }
.campo-largo, .campo:has(textarea) { grid-column: 1 / -1; }
.campo-largo > label, .campo:has(textarea) > label { align-self: start; }
.formulario-largo .opcao { margin: 0 !important; }
.cartao .formulario { max-width: 520px; }
input, select, textarea { font: inherit; color: var(--cor-texto); padding: 0 var(--e3); height: var(--altura-controle); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); background: var(--cor-campo); width: 100%; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
textarea { height: auto; padding: var(--e2) var(--e3); line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--cor-texto-suave); opacity: .85; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--cor-texto-suave); }
/* Foco: contorno azul visível, bem mais forte que o anel do navegador. */
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor-foco); outline-offset: 1px; border-color: var(--cor-foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-foco) 22%, transparent); }
input:user-invalid, select:user-invalid, textarea:user-invalid, [aria-invalid="true"] { border-color: var(--cor-erro); }
input:disabled, select:disabled, textarea:disabled { color: var(--cor-texto-suave); background: var(--cor-superficie-2); cursor: not-allowed; }
/* Módulo 01: linha de serviço do contrato (serviço | valor | detalhe). */
.linha-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--e2); margin-top: var(--e1); }
.linha-dividir { grid-template-columns: minmax(0, 1fr) auto; }
.linha-dividir .botao { white-space: nowrap; }
/* Rótulo só para leitores de tela. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
fieldset { border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: var(--e5); margin: 0 0 var(--e5); display: flex; flex-direction: column; gap: var(--e2); background: var(--cor-superficie); min-width: 0; }
fieldset[disabled] { opacity: .75; }
/* Fieldset que só serve para desabilitar uma tabela inteira (perfis): sem moldura própria, a tabela já tem a dela. */
.fieldset-tabela { border: 0; padding: 0; background: none; border-radius: 0; margin: 0 0 var(--e5); }
legend { font-size: var(--fs-secao); font-weight: 600; padding: 0; float: left; width: 100%; margin-bottom: var(--e1); }
legend + * { clear: both; }
.opcao { display: flex; gap: var(--e2); align-items: baseline; font-weight: 400 !important; margin-top: var(--e1) !important; }
.opcao input, .opcao-inline input { width: auto; height: auto; accent-color: var(--cor-primaria); }
.opcao-inline { display: inline-flex; gap: var(--e2); align-items: center; }
/* Botões: três pesos de ênfase. Principal chapado no destaque; secundário só com contorno; perigo em vermelho suave. */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--altura-controle); background: var(--cor-primaria); color: var(--cor-sobre-primaria); border: 1px solid transparent; border-radius: var(--raio); padding: 0 var(--e4); font: inherit; font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px var(--cor-sombra-leve);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease; }
.botao:hover { background: var(--cor-primaria-escura); color: var(--cor-sobre-primaria); text-decoration: none; box-shadow: 0 3px 8px var(--cor-sombra-leve); }
/* Pressionado: desce 1px e perde o relevo, para o clique ter resposta física. */
.botao:active { transform: translateY(1px); box-shadow: none; filter: brightness(.94); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.botao-secundario { background: transparent; color: var(--cor-texto); border-color: var(--cor-borda-campo); box-shadow: none; }
.botao-secundario:hover { background: var(--cor-superficie-2); color: var(--cor-texto); border-color: var(--cor-texto-suave); box-shadow: 0 1px 3px var(--cor-sombra-leve); }
.botao-perigo { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: transparent; box-shadow: none; }
.botao-perigo:hover { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: var(--cor-erro); box-shadow: none; }
/* <summary> com cara de botão (ex.: «Filtros»): mesma aparência e o mesmo foco. */
summary.botao { list-style: none; }
.botao-pequeno, .celula-acoes .botao { min-height: 30px; padding: 0 var(--e3); font-size: var(--fs-meta); }
.botao-link { background: none; border: 0; padding: 0; font: inherit; color: var(--cor-link); cursor: pointer; }
.botao-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.acoes { display: flex; gap: var(--e3); margin-top: var(--e4); align-items: center; flex-wrap: wrap; }
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); margin-bottom: var(--e5); }
.cabecalho-pagina h1, .cabecalho-pagina h2 { margin: 0; }
.filtro { display: flex; gap: var(--e3); align-items: center; margin-bottom: var(--e4); flex-wrap: wrap; }
.filtro select { width: auto; }
.filtro input { flex: 1 1 14rem; max-width: 420px; min-width: 0; }
.filtro label { font-weight: 500; }
/* Voltar (acima do título), introdução da tela e título de seção dentro de uma lista. */
.voltar { margin: 0 0 var(--e3); }
.nota-pagina { max-width: 80ch; margin: calc(-1 * var(--e3)) 0 var(--e5); color: var(--cor-texto-suave); }
.titulo-secao { margin: var(--e6) 0 var(--e3); }
.nota-pagina + .titulo-secao, .alerta + .titulo-secao { margin-top: var(--e5); }
/* Telas de leitura longa (conta, segurança): coluna estreita para a linha não passar de ~80 caracteres. */
.pagina-estreita { max-width: 760px; }

/* ---------- 6. Avisos e status ---------- */
/* Aviso: faixa no topo do conteúdo, fixa (não some sozinha), com borda lateral colorida e fundo suave. Sem toast. */
.alerta { padding: var(--e3) var(--e4); border-radius: var(--raio); border-left: 3px solid var(--cor-borda-campo); background: var(--cor-superficie-2); margin: 0 0 var(--e5); }
ul.alerta { padding-left: 2.25rem; }
.alerta-ok { border-left-color: var(--cor-ok); background: var(--cor-ok-fundo); }
.alerta-erro { border-left-color: var(--cor-erro); background: var(--cor-erro-fundo); }
.alerta-aviso { border-left-color: var(--cor-aviso); background: var(--cor-aviso-fundo); }
.alerta-info { border-left-color: var(--cor-info); background: var(--cor-info-fundo); }
/* Status: ponto de 8px + texto, sem fundo e sem pílula. A cor do ponto diz o estado; o texto fica na cor normal. */
.status, .etiqueta { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; flex: none; font-size: var(--fs-base); color: var(--cor-texto); background: none; padding: 0; }
.status::before, .etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-texto-suave); flex: none; }
.status-ok::before { background: var(--cor-ok); }
.status-erro::before, .etiqueta-alerta::before { background: var(--cor-erro); }
.status-aviso::before, .etiqueta-aviso::before { background: var(--cor-aviso); }
.status-info::before { background: var(--cor-info); }
.status-neutro::before { background: var(--cor-texto-suave); }
/* Marcador que vem depois de um texto ou de outro status na mesma célula. */
.ao-lado, .status + .etiqueta, .status + .status, .etiqueta + .etiqueta { margin-left: var(--e3); }

/* ---------- 7. Cartões e listas ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e5); align-items: start; }
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: var(--e5); margin-bottom: var(--e5); }
.cartoes .cartao { margin-bottom: 0; }
.lista-dados { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0 var(--e5); margin: 0; }
.lista-dados dt, .lista-dados dd { padding: 9px 0; border-bottom: 1px solid var(--cor-linha); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lista-dados dt { color: var(--cor-texto-suave); }
.lista-dados dt:last-of-type, .lista-dados dt:last-of-type + dd { border-bottom: 0; }
.lista-dados dd small { color: var(--cor-texto-suave); }
.cartao > h2 { margin-bottom: var(--e3); }
.cartao > :last-child { margin-bottom: 0; }
.lista-dados + .alerta, .lista-dados + form, .cartao form + form { margin-top: var(--e4); }
.botao + small { margin-left: var(--e3); }
.lista-modulos { list-style: none; padding: 0; margin: 0; }
.lista-modulos li { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: var(--e2) 0; }

/* ---------- 8. Tabelas ---------- */
/* Sem listras; traços finos entre as linhas. Cabeçalho menor, na cor de detalhe (lilás); números à direita. */
.tabela-rolagem { overflow-x: auto; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { text-align: left; padding: 11px var(--e4); border-bottom: 1px solid var(--cor-linha); vertical-align: top; }
.tabela th { padding-top: var(--e3); padding-bottom: var(--e3); font-size: var(--fs-meta); font-weight: 500; color: var(--cor-texto-suave); border-bottom-color: var(--cor-borda); white-space: nowrap; }
.tabela thead th { color: var(--cor-texto); }
.tabela tbody tr:hover { background: var(--cor-hover-linha); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num, .tabela .moeda { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela td small, .tabela td .ajuda { display: block; margin-top: 2px; }
.tabela select, .tabela input { width: auto; min-width: 8rem; }
.tabela-compacta td { font-size: var(--fs-meta); }
.tabela th.num { text-align: right; }
/* Linha de «nada aqui»: ocupa a tabela inteira, centralizada e em tom suave. */
.tabela td[colspan] { padding: var(--e6) var(--e4); text-align: center; color: var(--cor-texto-suave); }
/* Cabeçalho de linha (th scope=row, ex.: quarentena «O que muda»): texto principal, não o tom do cabeçalho de coluna. */
.tabela tbody th[scope="row"] { padding: 11px var(--e4); font-size: var(--fs-base); font-weight: 500; color: var(--cor-texto); white-space: normal; border-bottom: 1px solid var(--cor-linha); }
.tabela tbody tr:last-child th[scope="row"] { border-bottom: 0; }
/* Coluna de ações de uma linha (tarefas): botões pequenos lado a lado, quebrando linha só quando falta espaço. */
.celula-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-width: 14rem; }
.celula-acoes form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; }
.celula-acoes .filtro { margin: 0; }
.celula-acoes input, .celula-acoes select { height: 30px; font-size: var(--fs-meta); min-width: 0; width: auto; max-width: 11rem; }
/* Formulário com campo para preencher (devolver, delegar, convidar) ocupa a linha toda; o de só botões fica ao lado dos outros. */
.celula-acoes form:has(input:not([type="hidden"]), select) { flex: 1 1 100%; }
.celula-acoes form input:not([type="date"]) { flex: 1 1 8rem; max-width: 16rem; }
.celula-acoes form input[type="date"] { flex: 0 0 9.5rem; }
.linha-retirada { opacity: .55; }
.linha-nova { background: var(--cor-superficie-2); }
.json { font-family: var(--fonte-codigo); font-size: var(--fs-meta); word-break: break-word; max-width: 420px; }
/* Dentro de um cartão, a tabela perde a moldura própria (o cartão já a tem). */
.cartao .tabela { margin: 0; }
.cartao .tabela-rolagem { border: 0; border-radius: 0; background: none; }
/* Módulo 01: campo que muda num pedido da quarentena (RN-086). Dourado da marca = atenção. */
.linha-alterada { background: var(--cor-aviso-fundo); }
.linha-alterada td:first-child { box-shadow: inset 3px 0 0 var(--cor-aviso); }

/* ---------- 9. Modal (troca de senha) ---------- */
/* O modal flutua de verdade, então é o único elemento com sombra (junto com os dropdowns). */
.modal { border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: var(--e6); width: min(440px, 92vw); background: var(--cor-superficie); color: var(--cor-texto); box-shadow: 0 16px 48px var(--cor-sombra); }
.modal::backdrop { background: var(--cor-fundo-modal); }
.modal h1 { font-size: var(--fs-tela); }
.sair-modal { margin-top: var(--e4); text-align: center; }
.fundo-modal-texto { color: var(--cor-texto-suave); }

/* ---------- 10. Telas pequenas ---------- */
/* Abaixo de 900px a barra superior vira logo + botão; o menu abre empilhado embaixo (sem JavaScript fica sempre aberto). */
@media (max-width: 900px) {
    :root { --margem: 1rem; }
    .topo-in { flex-wrap: wrap; height: auto; min-height: var(--altura-topo); gap: var(--e2) var(--e4); }
    .topo-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--e3); }
    html.js .topo-botao { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); background: transparent; cursor: pointer; }
    html.js .topo-menu { display: none; }
    html.js .topo.aberto .topo-menu { display: flex; }
    .topo-botao-barras, .topo-botao-barras::before, .topo-botao-barras::after { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--cor-texto); }
    .topo-botao-barras { position: relative; }
    .topo-botao-barras::before, .topo-botao-barras::after { content: ""; position: absolute; left: 0; }
    .topo-botao-barras::before { top: -6px; }
    .topo-botao-barras::after { top: 6px; }
    .menu { flex-direction: column; align-items: stretch; }
    .menu-link, .menu-titulo { height: 44px; }
    /* Os dropdowns viram blocos dentro do menu, sem sombra. */
    .menu-itens, .conta-opcoes { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 var(--e1) var(--e4); }
    .menu-itens a, .conta-opcoes a, .conta-opcoes .botao-link { padding: var(--e3); }
    .conta-nome { height: 44px; }
    .conta-texto { max-width: none; }
    .conta-tema { padding-left: var(--e3); }
    .conteudo { padding-top: var(--e5); padding-bottom: var(--e6); }
}
@media (max-width: 640px) {
    :root { --fs-titulo: 1.55rem; }
    .lista-dados { grid-template-columns: 1fr; }
    .lista-dados dt { padding-bottom: 0; border-bottom: 0; }
    .lista-dados dd { padding-top: 2px; }
    .linha-item { grid-template-columns: 1fr; }
    .formulario-largo fieldset { grid-template-columns: 1fr; }
    .cartao .formulario { max-width: none; }
    .celula-acoes { min-width: 16rem; }
    .cartao .tabela:has(.celula-acoes) { min-width: 900px; }
    .cabecalho-pagina { flex-wrap: wrap; }
    .filtro input { max-width: none; }
    /* Tabela que não cabe: rola dentro da própria moldura, sem quebrar números e nomes em pedaços. */
    .tabela-rolagem .tabela { min-width: 720px; }
    .cartao { overflow-x: auto; }
    .cartao .tabela { min-width: 560px; }
    fieldset { padding: var(--e4); }
    .caixa-publica { padding: var(--e5); }
}
/* Toque: alvos de pelo menos 40px (44px nos controles principais). */
@media (pointer: coarse), (max-width: 640px) {
    :root { --altura-controle: 44px; }
    .botao-pequeno, .botao-fantasma, .celula-acoes .botao { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .botao, .icone-seta, input, select, textarea { transition: none; }
    .botao:active { transform: none; }
}

/* 2FA e senha temporária (RN-080, RN-082): chave/códigos legíveis e fáceis de copiar */
.chave-2fa { font-family: var(--fonte-codigo); font-size: var(--fs-secao); letter-spacing: .08em; user-select: all; }
.codigos-recuperacao { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--e2); }
.codigos-recuperacao code { display: block; padding: var(--e2) var(--e3); text-align: center; user-select: all; }
.quebra { word-break: break-all; }
/* Código de 6 dígitos (login em duas etapas, ligar o 2FA): algarismos tabulares e um pouco de respiro entre eles. */
input[autocomplete="one-time-code"] { font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.cartao ol { padding-left: 1.25rem; margin: 0 0 var(--e4); }
.cartao ol li { margin-bottom: var(--e2); }
.cartao details { margin: 0 0 var(--e4); }
.cartao summary { color: var(--cor-link); }
/* Quarentena, decisão: aprovar de um lado; rejeitar (com motivo) logo abaixo, separado por um traço. */
.decisao > .inline { margin-bottom: var(--e4); }
.decisao > .formulario { padding-top: var(--e4); border-top: 1px solid var(--cor-linha); }
/* Página de erro (403, 404, 405, 500): bloco curto e centrado na área de conteúdo, com a saída óbvia (voltar ao painel). */
.pagina-erro { max-width: 520px; margin: var(--e6) auto 0; padding: var(--e6); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); }
.pagina-erro h1 { font-size: var(--fs-tela); }
.pagina-erro p:last-child { margin: var(--e5) 0 0; }

/* ---------- 11. Painel inicial (dashboard) ---------- */
/* Grade de 12 colunas com um só espaço (24px): 7 + 5 = 12 em todas as linhas, então os blocos chegam às duas bordas do
   conteúdo. Cartões da mesma linha esticam juntos (mesma borda inferior). Entre o título, os números e a grade: 32px. */
.titulo-linha { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e6); }
.titulo-linha h1 { margin: 0; }
.subtitulo { margin: var(--e1) 0 0; color: var(--cor-texto-suave); }
.titulo-acoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.carimbo { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
/* Saudação do painel: «Boa noite, Leandro!» com a data por extenso; a hora da última leitura fica à direita. */
.saudacao { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--e1) var(--e4); margin-bottom: var(--e6); }
.saudacao h1 { margin: 0; }
.saudacao-data { margin: var(--e1) 0 0; color: var(--cor-texto-suave); }
.botao-fantasma { min-height: 30px; padding: 0 var(--e3); font-size: var(--fs-meta); white-space: nowrap; background: transparent; color: var(--cor-texto); border-color: var(--cor-borda-campo); }
.botao-fantasma:hover { background: var(--cor-superficie-2); color: var(--cor-texto); border-color: var(--cor-texto-suave); }

/* KPIs: um só bloco dividido por traços finos; o valor é texto, sem ícone, sem miniatura. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--e6); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); background: var(--cor-superficie); }
.kpi { display: flex; flex-direction: column; gap: var(--e2); padding: 18px var(--e5); min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--cor-borda); }
.kpi-rotulo { color: var(--cor-texto-suave); font-size: var(--fs-base); }
.kpi-valor { font-size: var(--fs-titulo); line-height: 1.15; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-alerta .kpi-valor { color: var(--cor-aviso); }
.kpi-nota { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
/* Valor + chip de variação na mesma linha; o chip é texto pequeno com ponto de cor (sem pílula). */
.kpi-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e1) var(--e3); }
.kpi-variacao { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cor-texto-suave); white-space: nowrap; }
.kpi-variacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-texto-suave); }
.kpi-variacao-alta { color: var(--cor-ok); }
.kpi-variacao-alta::before { background: var(--cor-ok); }
/* Barrinhas decorativas: azul do gráfico; só a do mês atual em cor cheia. */
.kpi-grafico { display: block; width: 100%; height: 32px; margin-top: var(--e1); }
.kpi-barra { fill: var(--cg-primaria); opacity: .4; }
.kpi-barra-atual { opacity: 1; }
.kpi-barra-zero { fill: var(--cg-neutra); opacity: .35; }
.kpi-legenda { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.kpi-ver { margin-top: auto; padding-top: var(--e2); font-size: var(--fs-meta); width: fit-content; }
.kpi-ver::after { content: " →"; }

.grade-painel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e6) var(--e5); }
.bloco { display: flex; flex-direction: column; min-width: 0; padding: var(--e5); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); background: var(--cor-superficie); }
.bloco h2 { margin: 0 0 var(--e4); }
.bloco-7 { grid-column: span 7; }
.bloco-5 { grid-column: span 5; }
.bloco-12 { grid-column: 1 / -1; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); margin-bottom: var(--e4); }
.bloco-topo h2 { margin: 0; }
.bloco-nota { padding: 1px var(--e2); border-radius: var(--raio); background: var(--cor-detalhe); color: var(--cor-texto-suave); font-size: var(--fs-meta); white-space: nowrap; }
.vazio { margin: 0; padding: var(--e3) var(--e4); border: 1px dashed var(--cor-borda-campo); border-radius: var(--raio); color: var(--cor-texto-suave); }

.operacoes { list-style: none; margin: 0; padding: 0; }
.operacoes li + li { border-top: 1px solid var(--cor-linha); }

/* Faixa «Novidades do ERP» (RN-119): largura total, no topo do painel, na cor de detalhe (lilás). Linha: versão à esquerda, itens em colunas e o «Li» à direita.
   Cada item é um <details>: fechado mostra só o título; aberto, o detalhe. Funciona sem JavaScript. */
.novidades { margin-bottom: var(--e6); padding: var(--e4) var(--e5); border: 1px solid var(--cor-detalhe-borda); border-radius: var(--raio-cartao); background: var(--cor-detalhe); }
.novidades-versao { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) auto; align-items: start; gap: var(--e3) var(--e5); }
.novidades-versao + .novidades-versao { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--cor-detalhe-borda); }
.novidades-meta h2 { margin: 0; }
.novidades-ver { margin: 0; color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.novidades-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e1) var(--e5); }
.novidade summary, .novidade-simples { display: flex; align-items: center; gap: var(--e2); min-height: 30px; margin: 0; font-weight: 500; border-radius: var(--raio); }
.novidade summary { cursor: pointer; }
.novidade summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid var(--cor-texto-suave); border-bottom: 1.5px solid var(--cor-texto-suave); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.novidade[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.novidade summary:hover { color: var(--cor-link); }
.novidade p { margin: 0 0 var(--e2); color: var(--cor-texto-suave); font-size: var(--fs-meta); line-height: 1.45; }
.novidades-acao { margin: 0; }
@media (max-width: 1100px) {
    .novidades-versao { grid-template-columns: minmax(0, 1fr) auto; }
    .novidades-itens { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .novidades { padding: var(--e4); }
    .novidades-itens { grid-template-columns: 1fr; }
}

/* Resumo do seu dia (RN-114): texto corrido de abertura e blocos separados por um traço suave. Cada item tem um ponto
   de cor (dourado = precisa de você, cinza = acompanhar), o texto e, se houver, a ação à direita. */
.resumo-abertura { margin: 0; padding: var(--e2) 0; border-radius: var(--raio); font-size: var(--fs-secao); line-height: 1.6; max-width: 80ch; }
/* As seções do resumo se distribuem em colunas quando há largura (em vez de uma pilha longa); no celular, uma só. */
/* Resumo do dia em blocos curtos (pedido do Leandro, 09/11/2026): uma frase por assunto, marcador de cor próprio (ponto), sem emoji; entrada escalonada de ~40 ms. */
.resumo-blocos { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--e3); }
.resumo-bloco { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4); border: 1px solid var(--vidro-borda, var(--cor-borda)); border-radius: var(--raio-cartao); background: var(--cor-campo); animation: bloco-entra .3s cubic-bezier(.22, 1, .36, 1) both; }
.resumo-bloco:nth-child(2) { animation-delay: 40ms; }
.resumo-bloco:nth-child(3) { animation-delay: 80ms; }
.resumo-bloco h3 { margin: 0 0 2px; font-size: var(--fs-base); font-weight: 600; }
.resumo-bloco p { margin: 0; color: var(--cor-texto-suave); line-height: 1.45; }
.resumo-bloco-marca { flex: none; width: 8px; height: 8px; margin-top: .45rem; border-radius: 50%; background: var(--cor-texto-suave); }
.resumo-bloco-agenda .resumo-bloco-marca { background: var(--cor-primaria); }
.resumo-bloco-semana .resumo-bloco-marca { background: var(--cor-ok); }
.resumo-bloco-seguranca .resumo-bloco-marca { background: var(--cor-aviso); }
@keyframes bloco-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .resumo-bloco { animation: none; } }
.resumo-secoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0 var(--e6); margin-top: var(--e5); }
.resumo-secao { min-width: 0; padding-top: var(--e4); border-top: 1px solid var(--cor-borda); }
.resumo-secao h3 { margin: 0 0 var(--e2); font-size: var(--fs-base); font-weight: 600; color: var(--cor-texto); }
.resumo-secao > p { margin: 0 0 var(--e2); color: var(--cor-texto-suave); line-height: 1.5; }
.resumo-itens { list-style: none; margin: 0; padding: 0; }
.resumo-item { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; }
.resumo-item + .resumo-item { border-top: 1px solid var(--cor-linha); }
.resumo-marca { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-texto-suave); }
.resumo-item-atencao .resumo-marca { background: var(--cor-aviso); }
.resumo-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resumo-item-texto strong { font-weight: 500; overflow-wrap: anywhere; }
.resumo-item-texto a { color: var(--cor-texto); }
.resumo-item-texto a:hover { color: var(--cor-link); }
.resumo-item-texto span { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.resumo-item-texto ul { margin: var(--e1) 0 0; padding-left: var(--e4); color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.resumo-rodape { margin: var(--e5) 0 0; color: var(--cor-texto-suave); font-size: var(--fs-meta); }

/* Acesso rápido: faixa de largura total logo abaixo do resumo, com os nomes das telas como links de contorno fino. */
.atalhos li { display: flex; }
.atalhos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--e3); }
.atalho { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: var(--e2) var(--e4); border: 1px solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-texto); text-decoration: none; }
.atalho:hover { background: var(--cor-hover-linha); border-color: var(--cor-borda); text-decoration: none; }
.atalho-nome { font-weight: 500; overflow-wrap: anywhere; }
.atalho-nota { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
/* Escolher as telas fixas do Acesso rápido (RN-121). */
.atalhos-gerenciar { margin-top: var(--e4); }
.atalhos-gerenciar summary { cursor: pointer; color: var(--cor-texto-suave); }
.atalhos-lista { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--e2) var(--e4); }
.atalhos-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

/* Últimas operações: texto à esquerda, quando à direita. */
.operacoes li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); padding: var(--e3) 0; }
.operacoes li:first-child { padding-top: 0; }
.operacoes a { color: var(--cor-texto); }
.operacoes a:hover { color: var(--cor-link); }
.operacoes time { flex: none; color: var(--cor-texto-suave); font-size: var(--fs-meta); }

/* Gráficos (graficos.js). A lista de texto fica visível sem JavaScript e só para leitores de tela com ele. */
.grafico { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.grafico-lista { margin: 0; padding-left: 1.2rem; color: var(--cor-texto-suave); }
.grafico-area { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.grafico-area svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-area path, .grafico-area circle[stroke-dasharray] { transition: fill-opacity .12s, stroke-opacity .12s; }
.grafico-dica { position: absolute; z-index: 5; padding: var(--e1) var(--e3); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie-3); box-shadow: 0 4px 12px var(--cor-sombra); font-size: var(--fs-meta); white-space: nowrap; pointer-events: none; }
.rosca { display: flex; align-items: center; gap: var(--e5); }
.rosca svg { flex: none; width: auto; }
.rosca-legenda { flex: 1; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rosca-legenda td { padding: 6px 0; }
.rosca-legenda td:nth-child(n+2) { text-align: right; padding-left: var(--e3); }
.rosca-legenda td:last-child { color: var(--cor-texto-suave); width: 3.2rem; }
.rosca-ponto { display: inline-block; width: 8px; height: 8px; margin-right: var(--e2); border-radius: 50%; }
.barras-h { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--e4); }
.barra-h-topo { display: flex; justify-content: space-between; gap: var(--e4); margin-bottom: 6px; }
.barra-h-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h-valor { font-weight: 500; font-variant-numeric: tabular-nums; }
.barra-h-trilho { height: 8px; border-radius: 999px; background: var(--cor-superficie-2); }
.barra-h-preench { height: 100%; min-width: 4px; border-radius: 999px; }

@media (max-width: 1100px) {
    .bloco-7, .bloco-5 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi:nth-child(3) { border-left: 0; }
    .kpi:nth-child(n+3) { border-top: 1px solid var(--cor-borda); }
    .kpi { padding: var(--e4); }
    .kpi-valor { font-size: var(--fs-tela); }
    .titulo-acoes { width: 100%; }
    .titulo-acoes .carimbo { width: 100%; }
    .rosca { flex-direction: column; align-items: stretch; }
    .rosca svg { align-self: center; }
    .bloco-topo { flex-direction: column; gap: var(--e1); }
    .bloco { padding: var(--e4); }
    .resumo-item { flex-wrap: wrap; }
    .grade-painel { gap: var(--e5); }
}

/* Bloco sem nada para mostrar: a moldura continua e a frase ocupa a altura que o cartão tem. */
.bloco > .vazio { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3rem; }
@media (max-width: 760px) {
    /* No celular a ação da pendência desce para a linha de baixo, alinhada ao texto (sem espremê-lo). */
    .resumo-item-texto { flex: 1 1 calc(100% - 2rem); }
    .resumo-item .botao { margin-left: 1.4rem; }
}

/* Janela flutuante do painel (RN-113): tarefas delegadas do dia e avisos. <details open>; recolhe sem JavaScript. */
/* Mesma família dos dropdowns (flutua: superfície-2, contorno e sombra dos tokens); comportamento inalterado. */
/* Arrastar e redimensionar (janela-movel.js): o cabeçalho (summary) tem altura fixa e só o corpo rola, para as alças nunca rolarem junto.
   Depois do primeiro gesto o JS põe a classe .janela-ajustada e fixa left/top/width/height em px (CSSOM); recolhida, a altura volta a automática. */
.janela-flutuante { --janela-max: 70vh; position: fixed; right: var(--e4); bottom: var(--e4); z-index: 50; width: min(26rem, calc(100vw - 2rem)); max-height: var(--janela-max); overflow: hidden;
    background: var(--cor-superficie-2); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-cartao); box-shadow: 0 8px 24px var(--cor-sombra); }
.janela-flutuante > summary { cursor: pointer; height: 2.75rem; padding: .75rem var(--e4); line-height: 1.25rem; font-weight: 600; user-select: none; touch-action: none; }
.janela-flutuante > summary:hover { background: var(--cor-superficie-3); }
.janela-flutuante.janela-ajustada > summary { cursor: grab; }
.janela-flutuante.janela-movendo > summary { cursor: grabbing; }
.janela-flutuante:not([open]) { height: auto !important; }
.janela-corpo { overflow-y: auto; max-height: calc(var(--janela-max) - 2.75rem); padding: 0 var(--e4) var(--e4); }
.janela-ajustada.janela-tem-altura .janela-corpo { height: calc(100% - 2.75rem); max-height: none; }
.janela-movendo { user-select: none; }
.janela-movendo .janela-corpo, .chat-janela.janela-movendo .chat-mensagens { pointer-events: none; }
/* Alças de redimensionar (janela de avisos: 8; chat: nw, n, w). Faixas finas nas bordas e quadrados nos cantos, dentro da janela. */
.alca-redim { position: absolute; z-index: 3; touch-action: none; }
.alca-n, .alca-s { left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.alca-e, .alca-w { top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.alca-n { top: 0; } .alca-s { bottom: 0; } .alca-w { left: 0; } .alca-e { right: 0; }
.alca-nw, .alca-ne, .alca-sw, .alca-se { width: 16px; height: 16px; }
.alca-nw { top: 0; left: 0; cursor: nwse-resize; } .alca-se { bottom: 0; right: 0; cursor: nwse-resize; }
.alca-ne { top: 0; right: 0; cursor: nesw-resize; } .alca-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.alca-nw::after, .alca-se::after, .alca-ne::after, .alca-sw::after { content: ""; position: absolute; width: 8px; height: 8px; opacity: 0; transition: opacity .12s; }
.alca-nw::after { top: 4px; left: 4px; border-top: 2px solid var(--cor-texto-suave); border-left: 2px solid var(--cor-texto-suave); }
.alca-se::after { bottom: 4px; right: 4px; border-bottom: 2px solid var(--cor-texto-suave); border-right: 2px solid var(--cor-texto-suave); }
.alca-ne::after { top: 4px; right: 4px; border-top: 2px solid var(--cor-texto-suave); border-right: 2px solid var(--cor-texto-suave); }
.alca-sw::after { bottom: 4px; left: 4px; border-bottom: 2px solid var(--cor-texto-suave); border-left: 2px solid var(--cor-texto-suave); }
.alca-redim:hover::after, .janela-movendo .alca-redim::after { opacity: .8; }
.janela-flutuante:not([open]) .alca-redim { display: none; }
@media (prefers-reduced-motion: reduce) { .alca-redim::after { transition: none; } }
/* Janela de avisos: indicadores de «tem mais» (continuidade.js). O corpo rola e o título fica fixo; sombra no rodapé enquanto há conteúdo
   abaixo (e no topo depois de rolar) e a pílula «Mais N abaixo ↓» leva ao próximo item. Só gradiente (sem filtro nem animação). */
.janela-flutuante::before, .janela-flutuante::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 28px; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.janela-flutuante::before { top: 2.75rem; background: linear-gradient(to bottom, var(--cor-sombra-leve), transparent); }
.janela-flutuante::after { bottom: 0; height: 48px; background: linear-gradient(to top, var(--vidro-fundo-denso, var(--cor-superficie-2)) 15%, transparent); }
.janela-flutuante[data-rola-acima]::before, .janela-flutuante[data-rola-abaixo]::after { opacity: 1; }
.janela-mais { position: absolute; left: 50%; bottom: var(--e3); z-index: 4; transform: translateX(-50%); padding: 3px var(--e3); border: 1px solid var(--cor-borda-campo); border-radius: 999px;
    background: var(--cor-superficie-2); color: var(--cor-texto); font: inherit; font-size: var(--fs-meta); font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px var(--cor-sombra-leve); }
.janela-mais:hover { background: var(--cor-superficie-3); border-color: var(--cor-texto-suave); }
.janela-mais[hidden] { display: none; }
.janela-flutuante:not([open]) .janela-mais { display: none; }
.janela-corpo { scrollbar-width: thin; overscroll-behavior: contain; padding-bottom: var(--e6); }
.janela-item form + form { margin-top: var(--e1); }
@media (prefers-reduced-motion: reduce) { .janela-flutuante::before, .janela-flutuante::after { transition: none; } }
@media (max-width: 640px) { .alca-redim { display: none; } .janela-flutuante > summary { touch-action: auto; cursor: pointer; } }
.janela-item { border-top: 1px solid var(--cor-linha); padding: var(--e3) 0 0; margin-top: var(--e3); }
.janela-item p { margin: 0 0 var(--e2); }
.texto-livre { overflow-wrap: anywhere; }

/* «Pergunte ao sistema» (RN-123): resposta do assistente e botão «Atualizar» do resumo do dia. Texto puro (as quebras de linha vêm daqui). */
.acoes-formulario { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.assistente-resposta { margin-top: var(--e5); padding: var(--e4); border: 1px solid var(--cor-linha); border-radius: var(--raio-cartao); background: var(--cor-superficie); }
.assistente-resposta h2 { margin: 0 0 var(--e2); font-size: var(--fs-secao); }
.assistente-resposta-erro { border-left: 3px solid var(--cor-aviso); }
.assistente-texto { margin: 0; white-space: pre-wrap; line-height: 1.6; max-width: 80ch; }
.resumo-ia-acao { display: inline-flex; align-items: center; gap: var(--e3); margin: 0; }
.resumo-ia-acao .ajuda { margin: 0; }
.link-assistente { margin: var(--e2) 0 0; font-size: var(--fs-meta); }

/* Janela de chat flutuante do assistente (RN-123 item 13): botão discreto no canto inferior direito de toda tela logada e
   janelinha sobre a tela atual. Só tokens do tema (escuro e claro). Pilha: botão 55 e janela 60, acima da janela de tarefas
   (50, RN-113). Com a janela de tarefas na tela, ela sobe acima do botão (body.com-janela-flutuante) e, com o chat aberto em
   tela larga, passa para a esquerda dele; no celular o chat ocupa a tela toda. Sem JavaScript o botão é só um link para /assistente. */
.chat-botao { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 55; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    border-radius: 50%; border: 1px solid var(--cor-borda-campo); background: var(--cor-superficie-2); color: var(--cor-texto); box-shadow: 0 4px 12px var(--cor-sombra);
    text-decoration: none; transition: background-color .12s, border-color .12s; }
.chat-botao:hover { background: var(--cor-superficie-3); border-color: var(--cor-texto-suave); color: var(--cor-texto); text-decoration: none; }
.chat-botao .icone { width: 20px; height: 20px; }
.chat-botao[aria-expanded="true"] { display: none; }
.com-janela-flutuante .janela-flutuante { --janela-max: calc(70vh - 3.75rem); bottom: calc(var(--e4) + 2.75rem + var(--e3)); }
.chat-janela { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 60; display: flex; flex-direction: column; width: min(27.5rem, calc(100vw - 2rem)); height: min(40rem, calc(100vh - 6rem));
    background: var(--cor-superficie-2); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-cartao); box-shadow: 0 8px 24px var(--cor-sombra); overflow: hidden; }
.chat-janela[hidden], .chat-janela [hidden] { display: none; }
.chat-topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--cor-linha); }
.chat-topo h2 { margin: 0; font-size: var(--fs-base); flex: 1 1 auto; }
.chat-fechar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--raio); background: transparent; color: var(--cor-texto-suave); cursor: pointer; }
.chat-fechar:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }
.chat-mensagens { flex: 1 1 auto; overflow-y: auto; padding: var(--e3) var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.chat-vazio { margin: 0; color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.chat-msg { margin: 0; padding: var(--e2) var(--e3); border-radius: var(--raio); max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.chat-msg-usuario { align-self: flex-end; background: var(--cor-superficie-3); }
.chat-msg-ia { align-self: flex-start; background: var(--cor-superficie); border: 1px solid var(--cor-linha); }
.chat-msg-erro { align-self: flex-start; background: var(--cor-aviso-fundo); border-left: 3px solid var(--cor-aviso); }
.chat-msg-espera { align-self: flex-start; color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.chat-recentes { padding: 0 var(--e4) var(--e2); max-height: 7.5rem; overflow-y: auto; }
.chat-recentes p { margin: 0 0 var(--e1); }
.chat-recentes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-recente { display: block; width: 100%; padding: 2px var(--e2); text-align: left; font: inherit; font-size: var(--fs-meta); color: var(--cor-link); background: none; border: 0; border-radius: var(--raio); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-recente:hover { background: var(--cor-superficie-3); }
.chat-aviso { margin: 0 var(--e4) var(--e2); padding: var(--e2) var(--e3); border-left: 3px solid var(--cor-aviso); background: var(--cor-aviso-fundo); border-radius: var(--raio); font-size: var(--fs-meta); }
.chat-form { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4) var(--e2); border-top: 1px solid var(--cor-linha); }
.chat-form textarea { width: 100%; min-height: 3.2rem; resize: none; }
.chat-form-acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.chat-rodape { margin: 0; padding: 0 var(--e4) var(--e3); font-size: var(--fs-meta); }
/* Chat aberto em tela larga: a janela de avisos (se ainda no lugar padrão) passa para a esquerda dele, qualquer que seja a largura
   que o usuário deu ao chat (--chat-largura, posta por janela-movel.js; sem ela vale o padrão de 27,5rem). */
@media (min-width: 981px) {
    .com-janela-flutuante.chat-aberto .janela-flutuante { --janela-max: 70vh; right: calc(var(--e4) + var(--chat-largura, 27.5rem) + var(--e4)); bottom: var(--e4); }
}
@media (max-width: 640px) {
    .chat-janela { inset: 0; width: auto; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
    .chat-janela .alca-redim { display: none; }
}
html:not(.js) .chat-janela { display: none; }
.lista-recentes { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-direction: column; gap: var(--e1); }

/* ---------- Vidro fosco e fundo em degradê em TODO o ERP (decisão do Leandro, 09/11/2026; antes só no painel) ----------
   Um único conjunto de tokens (--vidro-*), valendo nos dois temas. Vale na área logada (body.layout-app, posto por views/layout.php)
   e na tela de login (body.publico). Contêineres (cartão, bloco de formulário, caixa da tabela, filtros, janelas, menus, gaveta)
   viram vidro: translúcido, desfoque, borda fina, sombra leve e raio de 16px (--raio-cartao). Controles (botões, campos, selos)
   continuam com 4-6px e SÓLIDOS. Regras: (1) desfoque só no contêiner, nunca em linha de tabela ou item repetido; (2) tabelas e
   janelas usam o vidro DENSO (88%), os cartões 72%; (3) nada de filtro animado; (4) quem tem menu flutuante com position: fixed
   dentro (a seção de tarefas, #tarefas) fica sem desfoque, porque backdrop-filter vira o «bloco de referência» do fixed e
   deslocaria o menu: ali o vidro é só translúcido. Contraste (WCAG, calculado sobre o pior fundo do degradê): texto principal
   ~14:1 no escuro e ~17:1 no claro; texto suave ~6,3:1 nos dois; link/azul ~5:1: todos acima de 4,5:1.
   Fallbacks: sem backdrop-filter, com «reduzir transparência» ou em modo de alto contraste o vidro vira cor sólida da superfície.
   Para reverter tudo: apague este bloco (e a classe layout-app do body). */
:root {
    --vidro-fundo: rgba(17, 26, 41, .72);
    --vidro-fundo-denso: rgba(17, 26, 41, .88);
    --vidro-borda: rgba(141, 162, 187, .22);
    --vidro-desfoque: 10px;
    --vidro-sombra: 0 6px 24px rgba(0, 0, 0, .25);
    --vidro-sombra-alta: 0 12px 32px rgba(0, 0, 0, .35);
}
:root[data-tema="claro"] {
    --vidro-fundo: rgba(255, 255, 255, .72);
    --vidro-fundo-denso: rgba(255, 255, 255, .88);
    --vidro-borda: rgba(135, 149, 169, .35);
    --vidro-sombra: 0 6px 24px rgba(13, 21, 32, .08);
    --vidro-sombra-alta: 0 12px 32px rgba(13, 21, 32, .14);
}
/* Fundo em degradê: fundo da marca → superfície → lilás profundo (claro: lilás #EDE8FF), com dois brilhos azuis suaves. O fundo sólido
   da regra base do body é o fallback. */
body.layout-app, body.publico {
    background:
        radial-gradient(60rem 36rem at 12% -8%, color-mix(in srgb, var(--cor-primaria) 16%, transparent), transparent 70%),
        radial-gradient(48rem 30rem at 100% 30%, color-mix(in srgb, var(--cor-detalhe-borda) 40%, transparent), transparent 70%),
        linear-gradient(165deg, var(--cor-fundo) 0%, var(--cor-superficie-2) 50%, var(--cor-detalhe) 100%);
    background-attachment: fixed;
}
/* Contêineres em vidro (72%). */
body.layout-app :is(.cartao, fieldset, .bloco, .kpi, .novidades, .filtro, .pagina-erro, .assistente-resposta), .caixa-publica {
    background: var(--vidro-fundo);
    border-color: var(--vidro-borda);
    box-shadow: var(--vidro-sombra);
    -webkit-backdrop-filter: blur(var(--vidro-desfoque));
    backdrop-filter: blur(var(--vidro-desfoque));
}
/* Filtros/busca: faixa em vidro com respiro; dentro de célula de tabela continua simples. */
body.layout-app .filtro { padding: var(--e3) var(--e4); border: 1px solid var(--vidro-borda); border-radius: var(--raio-cartao); }
body.layout-app .celula-acoes .filtro { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Caixa da tabela e superfícies que flutuam: vidro denso (88%), mais opaco para texto denso e para o que fica sobre outro conteúdo. */
body.layout-app :is(.tabela-rolagem, .menu-itens, .conta-opcoes, .pop-painel, .janela-flutuante, .chat-janela, .chat-botao, .modal, .toast, .gaveta) {
    background: var(--vidro-fundo-denso);
    border-color: var(--vidro-borda);
    -webkit-backdrop-filter: blur(var(--vidro-desfoque));
    backdrop-filter: blur(var(--vidro-desfoque));
}
body.layout-app :is(.tabela-rolagem) { box-shadow: var(--vidro-sombra); }
body.layout-app :is(.menu-itens, .conta-opcoes, .pop-painel, .janela-flutuante, .chat-janela, .modal, .toast) { box-shadow: var(--vidro-sombra-alta); }
body.layout-app .gaveta { border-left-color: var(--vidro-borda); }
/* Seção de tarefas (Quadro/Lista): translúcida SEM desfoque (guarda menus fixos, ver acima). Colunas: fundo suave; cartões de tarefa sólidos. */
body.layout-app #tarefas.cartao { background: var(--vidro-fundo-denso); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.layout-app .coluna { background: color-mix(in srgb, var(--cor-fundo) 55%, transparent); border-color: var(--vidro-borda); }
body.layout-app .quadro .tarefa { background: var(--cor-superficie); }
/* Controles continuam sólidos sobre o vidro (campos já têm --cor-campo). */
body.layout-app .botao-secundario { background: var(--cor-campo); }
body.layout-app .botao-secundario:hover { background: var(--cor-superficie-2); }
/* Painel: cartões de KPI soltos (sem a moldura única) e levantam ao passar o mouse. */
.painel .kpis { gap: var(--e4); border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.painel .kpi:nth-child(n) { border: 1px solid var(--vidro-borda); border-radius: var(--raio-cartao); }
.painel .kpi { padding: var(--e5); }
.painel .kpi, .painel .bloco { transition: transform .2s ease, box-shadow .2s ease; }
.painel .kpi:hover, .painel .bloco:hover { transform: translateY(-5px); box-shadow: var(--vidro-sombra-alta); }
@media (prefers-reduced-motion: reduce) {
    .painel .kpi, .painel .bloco { transition: none; }
    .painel .kpi:hover, .painel .bloco:hover { transform: none; }
}
/* Sem desfoque, com «reduzir transparência» ou em alto contraste: cor sólida da superfície (mesma leitura, sem transparência). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root, :root[data-tema="claro"] { --vidro-fundo: var(--cor-superficie); --vidro-fundo-denso: var(--cor-superficie-2); }
}
@media (prefers-reduced-transparency: reduce) {
    :root, :root[data-tema="claro"] { --vidro-fundo: var(--cor-superficie); --vidro-fundo-denso: var(--cor-superficie-2); }
    body.layout-app *, .caixa-publica { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (forced-colors: active) {
    :root, :root[data-tema="claro"] { --vidro-fundo: Canvas; --vidro-fundo-denso: Canvas; --vidro-borda: CanvasText; }
    body.layout-app *, .caixa-publica { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Celular: os menus da barra viram blocos dentro do menu aberto (sem vidro próprio). */
@media (max-width: 900px) {
    body.layout-app :is(.menu-itens, .conta-opcoes) { background: transparent; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 640px) {
    :root { --raio-cartao: 12px; }
    .painel .kpi { padding: var(--e4); }
}

/* Mini calendário do mês (painel): grade de 7 colunas; dia com tarefa = ponto; hoje = quadrado de destaque. */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.cal th { padding: var(--e1) 0; color: var(--cor-texto-suave); font-size: var(--fs-meta); font-weight: 500; }
.cal td { position: relative; height: 2.4rem; padding: 0; font-size: var(--fs-base); }
.cal-marcado::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--cor-primaria); }
.cal-hoje { font-weight: 600; background: var(--cor-detalhe); border-radius: var(--raio); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.cal-legenda { margin: var(--e3) 0 0; }

/* ---------- Progresso de projetos e tarefas (Módulo 03) ----------
   Barra = tarefas concluídas ÷ total; SVG decorativo (aria-hidden) com role="progressbar" no contêiner e a definição sempre em texto.
   Cores: o mesmo azul/verde/dourado dos pontos de status; nada novo. Sem animação para quem pede «reduzir movimento». */
.progresso-vazio { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.progresso-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-bottom: var(--e2); }
.progresso-pct { font-size: var(--fs-titulo); line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.progresso-frase { color: var(--cor-texto-suave); font-size: var(--fs-base); }
.progresso-trilho { height: 10px; overflow: hidden; border-radius: 999px; background: var(--cor-superficie-3); }
.progresso-trilho svg, .faixa { display: block; width: 100%; height: 100%; }
.progresso-preenche { fill: var(--cor-primaria); transform-box: fill-box; transform-origin: left center; animation: preencher .8s ease-out both; }
.progresso-pct + .progresso-frase { margin: 0; }
@keyframes preencher { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Mini (listas e sprints): percentual e frase na linha, barra fina embaixo. */
.progresso-mini { min-width: 9rem; margin: var(--e1) 0 var(--e3); }
.progresso-mini .progresso-pct { font-size: var(--fs-base); font-weight: 600; }
.progresso-mini .progresso-frase { font-size: var(--fs-meta); }
.progresso-mini .progresso-topo { margin-bottom: var(--e1); }
.progresso-mini .progresso-trilho { height: 6px; }
.tabela .progresso-mini { margin: 0; }
/* Faixa segmentada por status (ficha do projeto) e legenda com ponto + texto. */
.andamento { margin-bottom: var(--e4); max-width: 44rem; }
.faixa { height: 10px; margin-top: var(--e3); border-radius: 999px; background: var(--cor-superficie-3); }
.faixa-concluida { fill: var(--cor-ok); }
.faixa-em_revisao { fill: var(--cor-aviso); }
.faixa-em_andamento { fill: var(--cor-info); }
.faixa-a_fazer { fill: var(--cor-texto-suave); opacity: .55; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e2) 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); }
/* Sprint atual (janela calculada contém hoje) e avatar de iniciais do responsável. */
.sprint-atual { color: var(--cor-primaria); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; margin-right: var(--e1); border-radius: 50%; background: var(--cor-detalhe); border: 1px solid var(--cor-detalhe-borda); color: var(--cor-texto); font-size: .72rem; font-weight: 600; vertical-align: middle; }
.status::before { transition: background-color .25s ease; }
@media (prefers-reduced-motion: reduce) {
    .progresso-preenche { animation: none; }
    .status::before { transition: none; }
}

/* ---------- 12. Tarefas do projeto: Quadro, Lista, menus flutuantes, gaveta e avisos ----------
   Telas de trabalho: raio de 4-6px (o raio de 16px é só do painel inicial). Só tokens da seção 1. Transições de ~150ms nos
   estados (passar o mouse, foco, pressionado) e 150-250ms nas entradas; tudo desligado em «reduzir movimento» (fim do bloco).
   Atenção: o painel dos menus usa position: fixed e a camada de clique-fora também; por isso NENHUM ancestral deles pode ter
   transform, filter ou backdrop-filter (isso prenderia o «fixed» ao ancestral). Os cartões, por isso, só mudam cor e sombra. */

/* Menu flutuante genérico (<details class="pop">). Sem JavaScript abre pelo <summary>; app.js posiciona o painel. */
.pop { position: relative; display: inline-block; }
.pop > summary { cursor: pointer; }
.pop[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 70; cursor: default; } /* clique fora fecha */
.pop-painel { position: fixed; z-index: 72; min-width: 13rem; max-width: min(22rem, calc(100vw - 16px)); max-height: min(70vh, 28rem); overflow-y: auto; padding: var(--e1);
    border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); background: var(--cor-superficie-2); box-shadow: 0 8px 24px var(--cor-sombra); animation: pop-entra .16s ease-out; }
.pop-painel-larga { width: 18rem; padding: var(--e4); }
.pop-painel form { margin: 0; }
.pop-titulo { margin: 0; padding: var(--e2) var(--e3) var(--e1); color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.pop-item { display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 40px; padding: 0 var(--e3); border: 0; border-radius: var(--raio); background: none; color: var(--cor-texto);
    font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.pop-item:hover, .pop-item:focus-visible { background: var(--cor-superficie-3); color: var(--cor-texto); text-decoration: none; outline: none; }
.pop-item:focus-visible { box-shadow: inset 0 0 0 2px var(--cor-foco); }
.pop-item:active { background: var(--cor-ativo); }
.pop-item-perigo, .pop-item-perigo:hover, .pop-item-perigo:focus-visible { color: var(--cor-erro); }
.pop-sep { height: 0; margin: var(--e1) 0; border: 0; border-top: 1px solid var(--cor-borda); }
.filtro-pop { display: flex; flex-direction: column; gap: var(--e2); }
.filtro-pop label { font-weight: 500; margin-top: var(--e1); }
@keyframes pop-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pop-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Sem JavaScript, as ações que dependem dele (gaveta) não aparecem no menu. */
html:not(.js) button[data-gaveta] { display: none; }

/* Chip de status (abre o menu «Mover para») e botão «⋯». */
.chip { display: inline-flex; align-items: center; gap: var(--e2); min-height: 32px; padding: 0 var(--e2) 0 var(--e3); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: transparent; color: var(--cor-texto);
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.chip .status { font-size: var(--fs-meta); }
.chip:hover { background: var(--cor-superficie-2); border-color: var(--cor-borda-campo); }
.pop[open] > .chip { background: var(--cor-superficie-3); border-color: var(--cor-borda-campo); }
.pop[open] > .chip .icone-seta { transform: rotate(180deg); }
.chip-fixo { padding: 0 var(--e1); border-color: transparent; cursor: default; }
.chip-fixo:hover { background: transparent; border-color: transparent; }
.botao-icone { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--raio); background: transparent; color: var(--cor-texto-suave); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.botao-icone:hover, .pop[open] > .botao-icone { background: var(--cor-superficie-3); color: var(--cor-texto); }
.botao-icone .icone { fill: currentColor; stroke: none; width: 18px; height: 18px; }
@media (pointer: coarse), (max-width: 640px) {
    .chip { min-height: 40px; }
    .botao-icone { width: 44px; height: 44px; }
}

/* Barra de ferramentas da seção: alternância Quadro | Lista à esquerda, Filtros à direita. */
.tarefas-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.alternar { display: inline-flex; padding: 2px; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); background: var(--cor-superficie-2); }
.alternar[hidden], .quadro[hidden], .vista-lista[hidden] { display: none; }
.alternar-opcao { min-height: 30px; padding: 0 var(--e4); border: 0; border-radius: 3px; background: transparent; color: var(--cor-texto-suave); font: inherit; font-weight: 500; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.alternar-opcao:hover { color: var(--cor-texto); }
.alternar-opcao[aria-pressed="true"] { background: var(--cor-ativo); color: var(--cor-texto); box-shadow: 0 1px 2px var(--cor-sombra-leve); }
@media (pointer: coarse), (max-width: 640px) { .alternar-opcao { min-height: 40px; } }

/* A tarefa: o mesmo <li> vira linha (Lista) ou cartão (Quadro). */
.tarefas, .coluna-lista { list-style: none; margin: 0; padding: 0; }
.grupo-sprint + .grupo-sprint { margin-top: var(--e5); }
.tarefas { border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); }
.tarefas:empty { display: none; }
.tarefa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 11rem 8.5rem auto 2.5rem; grid-template-areas: "corpo resp prazo status mais"; align-items: center; gap: var(--e3) var(--e4);
    padding: var(--e3) var(--e4); background: var(--cor-superficie); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.tarefa + .tarefa { border-top: 1px solid var(--cor-linha); }
.tarefa:first-child { border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; }
.tarefa:last-child { border-radius: 0 0 var(--raio-cartao) var(--raio-cartao); }
.tarefa:only-child { border-radius: var(--raio-cartao); }
.tarefa:hover { background: var(--cor-hover-linha); }
.tarefa[aria-busy="true"] { opacity: .6; pointer-events: none; }
.tarefa-corpo { grid-area: corpo; min-width: 0; }
.tarefa-info { display: contents; }
.tarefa-resp { grid-area: resp; display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.tarefa-resp .avatar { margin-right: 0; flex: none; }
.tarefa-resp-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-resp-vazio .tarefa-resp-nome, .tarefa-sem-prazo { color: var(--cor-texto-suave); }
.tarefa-prazo { grid-area: prazo; display: flex; flex-direction: column; align-items: flex-start; font-variant-numeric: tabular-nums; }
.tarefa-prazo .status { font-size: var(--fs-meta); }
.tarefa-status { grid-area: status; }
.tarefa-mais { grid-area: mais; justify-self: end; }
.tarefa-titulo { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.tarefa-feita .tarefa-titulo { color: var(--cor-texto-suave); }
.tarefa-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 2px 0 0; overflow: hidden; color: var(--cor-texto-suave); font-size: var(--fs-meta); white-space: pre-line; }
.tarefa-devolvida { margin: var(--e1) 0 0; padding: var(--e1) var(--e2); border-left: 3px solid var(--cor-aviso); background: var(--cor-aviso-fundo); border-radius: var(--raio); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.tarefa-meta { display: flex; flex-wrap: wrap; gap: 0 var(--e3); margin: 2px 0 0; color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.tarefa-sprint { display: none; font-weight: 500; }
.tarefa-titulo .etiqueta, .tarefa-titulo .status { font-size: var(--fs-meta); }

/* Linha estreita (e cartão do Quadro): título em cima, responsável + prazo e chip embaixo. */
@media (max-width: 760px) {
    .tarefa { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "corpo mais" "info status"; }
    .tarefa-info { display: flex; grid-area: info; align-items: center; flex-wrap: wrap; gap: var(--e1) var(--e3); min-width: 0; }
    .tarefa-prazo { flex-direction: row; align-items: center; gap: var(--e2); }
}

/* Quadro (Kanban). */
.quadro { display: grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: var(--e3); align-items: start; margin-bottom: var(--e4); }
.coluna { min-width: 0; min-height: 8rem; padding: var(--e2); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); background: var(--cor-fundo);
    transition: border-color .15s ease, background-color .15s ease, opacity .15s ease; }
.coluna-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); margin: 0; padding: var(--e2) var(--e2) var(--e3); font-size: var(--fs-base); }
.coluna-contagem { color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.coluna-lista { display: flex; flex-direction: column; gap: var(--e2); min-height: 4rem; }
.coluna-lista:empty::before { content: "Nenhuma tarefa"; display: grid; place-items: center; min-height: 4rem; border: 1px dashed var(--cor-borda-campo); border-radius: var(--raio); color: var(--cor-texto-suave); font-size: var(--fs-meta); }
.quadro .tarefa { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "corpo mais" "info status"; padding: var(--e3); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: 0 1px 2px var(--cor-sombra-leve); }
.quadro .tarefa + .tarefa { border-top: 1px solid var(--cor-borda); }
.quadro .tarefa:hover { background: var(--cor-superficie); border-color: var(--cor-borda-campo); box-shadow: 0 3px 10px var(--cor-sombra-leve); }
.quadro .tarefa[draggable="true"] { cursor: grab; }
.quadro .tarefa.arrastando { opacity: .4; cursor: grabbing; }
.quadro .tarefa-info { display: flex; grid-area: info; align-items: center; flex-wrap: wrap; gap: var(--e1) var(--e3); min-width: 0; }
.quadro .tarefa-prazo { flex-direction: row; align-items: center; gap: var(--e2); }
.quadro .tarefa-resp-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quadro .tarefa-resp-vazio, .quadro .tarefa-sem-prazo { display: none; }
.quadro .tarefa-sprint { display: inline; }
.quadro .tarefa-mais { align-self: start; margin: calc(-1 * var(--e1)) calc(-1 * var(--e1)) 0 0; }
.coluna-ok { border-color: var(--cor-primaria); border-style: dashed; }
.coluna-nao { opacity: .55; }
.coluna.sobre { border-style: solid; background: var(--cor-info-fundo); }
/* Tela estreita: as colunas viram faixas que rolam para o lado (a troca de status pelo menu continua em cada cartão). */
@media (max-width: 900px) {
    .quadro { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 20rem); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--e2); }
    .coluna { scroll-snap-align: start; }
}

/* Gaveta lateral (<dialog>): Delegar, Convidar, Devolver e confirmação de Arquivar. */
.gaveta { position: fixed; inset: 0 0 0 auto; width: min(26rem, 100vw); max-width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--cor-borda);
    background: var(--cor-superficie); color: var(--cor-texto); box-shadow: -8px 0 32px var(--cor-sombra); }
.gaveta[open] { animation: gaveta-entra .22s ease-out; }
.gaveta::backdrop { background: var(--cor-fundo-modal); }
@keyframes gaveta-entra { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.gaveta-form { display: flex; flex-direction: column; gap: var(--e3); min-height: 100%; padding: var(--e5); }
.gaveta-titulo { margin: 0; font-size: var(--fs-secao); }
.gaveta-tarefa { margin: 0; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.gaveta-campo { font-weight: 500; }
.gaveta-acoes { display: flex; justify-content: flex-end; gap: var(--e3); margin-top: auto; padding-top: var(--e4); }
.filtro-pop .gaveta-acoes { margin-top: var(--e2); padding-top: 0; }
.gaveta-erro { margin: 0; }
.gaveta-contador { margin: 0; text-align: right; }
.escolha { margin: 0; padding: 0; border: 0; background: none; gap: var(--e2); }
.escolha legend { float: none; width: auto; margin-bottom: var(--e2); font-size: var(--fs-base); font-weight: 500; }
.pessoa { position: relative; display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--cor-borda); border-radius: var(--raio); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease; }
.pessoa[hidden] { display: none; }
.pessoa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pessoa .avatar { margin-right: 0; }
.pessoa:hover { background: var(--cor-hover-linha); border-color: var(--cor-borda-campo); }
.pessoa:has(input:checked) { background: var(--cor-info-fundo); border-color: var(--cor-primaria); }
.pessoa:has(input:focus-visible) { outline: 2px solid var(--cor-foco); outline-offset: 2px; }

/* Avisos curtos de uma ação feita sem recarregar a página (exceção à regra de aviso em faixa: aqui a página não recarrega). */
.toasts { position: fixed; left: 50%; bottom: var(--e5); z-index: 90; display: flex; flex-direction: column; gap: var(--e2); width: min(32rem, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
.toast { margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--cor-borda); border-left: 3px solid var(--cor-ok); border-radius: var(--raio-cartao); background: var(--cor-superficie-2); box-shadow: 0 8px 24px var(--cor-sombra); animation: toast-entra .2s ease-out; }
.toast-erro { border-left-color: var(--cor-erro); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Celular: o painel do menu vira uma folha presa embaixo da tela, com fundo escurecido; a gaveta ocupa a largura toda. */
@media (max-width: 640px) {
    .pop[open] > summary::before { background: var(--cor-fundo-modal); }
    .pop-painel, .pop-painel-larga { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; max-height: 75vh; padding: var(--e2) var(--e2) calc(var(--e2) + env(safe-area-inset-bottom));
        border-width: 1px 0 0; border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; animation-name: pop-sobe; }
    .pop-painel-larga { padding: var(--e4) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom)); }
    .gaveta { width: 100vw; border-left: 0; }
    .gaveta-form { padding: var(--e4); }
    .toasts { bottom: calc(var(--e4) + 3.5rem); }
}

/* Troca de tema (correção, 09/11/2026): menus e janelas SÓLIDOS (sem translucidez nem desfoque: só os contêineres grandes da página são vidro).
   tema.js fecha os menus abertos na hora e põe data-trocando-tema no <html> durante a View Transition; aí o desfoque, o filtro, a transição
   e a animação dos flutuantes ficam desligados, para nenhum desfoque nem mistura dos dois temas ser amostrado. */
body.layout-app :is(.menu-itens, .conta-opcoes, .pop-painel, .gaveta, .modal, .toast, .janela-flutuante, .chat-janela, .chat-botao) {
    background: var(--cor-superficie-2); border-color: var(--cor-borda-campo);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-trocando-tema] :is(.menu-itens, .conta-opcoes, .pop-painel, .gaveta, .modal, .toast, .janela-flutuante, .chat-janela, .chat-botao) {
    -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; transition: none; animation: none; will-change: auto;
}

/* ---------- 13. Animação de entrada ao logar (pedido do Leandro, 09/11/2026; quarta versão: abertura já no primeiro desenho) ----------
   SÓ quando o servidor marca <body data-entrada> (uma vez, logo depois do login concluído, 2FA incluso; ver Kernel). O servidor também
   escreve no HTML a camada de abertura (.entrada-abertura: fundo da marca com brilho radial e o SÍMBOLO no centro), então o estado inicial
   é 100% CSS e já cobre a tela no PRIMEIRO desenho (nenhum lampejo do painel; app.css fica no <head>, sem estilo inline por causa da CSP).
   A logo real da barra fica com opacity 0 até o símbolo chegar. O JS (app.js, iniciarEntrada) só ASSUME: mede o alvo, voa o símbolo,
   dissolve o fundo, revela o nome e remove tudo. Segurança sem JS: animações CSS de reserva dissolvem a camada e revelam a logo real
   depois de ~2,2 s, então ninguém fica preso na abertura. A camada nunca recebe clique. «Reduzir movimento»: sem camada, logo visível. */
.entrada-abertura { position: fixed; inset: 0; z-index: 1000; pointer-events: none; --w: min(104px, 30vw); }
.entrada-fundo { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, var(--cor-superficie-3) 0, var(--cor-fundo) 70%); }
.entrada-simbolo { position: absolute; display: block; max-width: none; width: var(--w); height: auto;
    left: calc(50% - var(--w) / 2); top: calc(50% - var(--w) * 0.6975 - 12px); transform-origin: 0 0; will-change: transform; }
:root:not([data-tema="claro"]) .entrada-simbolo.simbolo-no-claro, :root[data-tema="claro"] .entrada-simbolo.simbolo-no-escuro { display: none; }
body[data-entrada] .marca img { opacity: 0; transition: none; animation: entrada-revela 1ms 2.2s forwards; }
body[data-entrada].entrada-chegou .marca img { opacity: 1; animation: none; }
body[data-entrada] .entrada-abertura { animation: entrada-some 300ms ease 2.2s forwards; }
@keyframes entrada-revela { to { opacity: 1; } }
@keyframes entrada-some { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .entrada-abertura { display: none; }
    body[data-entrada] .marca img { opacity: 1; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pop-painel, .gaveta[open], .toast { animation: none; }
    .pop-item, .chip, .botao-icone, .alternar-opcao, .tarefa, .coluna, .pessoa { transition: none; }
}