/* ==========================================================================
   TJ Fiscal · Design System
   Dashboard interno para acompanhamento de notas fiscais.
   HTML/CSS/JS puro.

   Paleta da Thermojet (site oficial thermojet.com):
     vermelho #ED1C24 · azul #0088CB · amarelo #FFCB05 · chumbo #2F2E2E
     e cinzas neutros quentes (#605E5E, #727272, #A0A09F, #F0F0F0).

   Papel de cada cor (vale para o site inteiro):
     chumbo   - estrutura e ações (botões, links, item ativo, filtros)
     vermelho - marca (logo, marcador do menu) e URGÊNCIA (atraso).
                Fica só nisso: se tudo for vermelho, o atraso não se destaca.
     âmbar    - atenção: vence hoje, nota com você, fim de semana
     azul     - foco do teclado e o vencimento do TÍTULO (pagamento),
                para não confundir com o prazo de entrega
     verde    - concluído / recebido pelo Fiscal
   ========================================================================== */

:root{
  /* superfícies (cinzas neutros da marca) */
  --bg: #f3f3f2;
  --card: #ffffff;
  --surface-2: #efeeed;
  --surface-3: #f8f8f7;

  /* texto. Contraste sobre o branco: text-2 8,4:1 e text-3 5,2:1 (o mínimo
     para texto é 4,5:1). O text-3 antigo (#94a3b8) dava só 2,6:1. */
  --text: #2f2e2e;
  --text-strong: #1c1b1b;
  --text-2: #504e4d;
  --text-3: #6e6c6b;

  /* bordas */
  --border: #e3e2e0;
  --border-soft: #eeedeb;
  --border-strong: #cfcdcb;

  /* ação: botões principais, links, filtro ativo. Chumbo da marca, não
     vermelho (o vermelho ficou para urgência). --on-primary é o texto
     escrito SOBRE um fundo --primary. */
  --primary: #2f2e2e;
  --primary-dark: #2f2e2e;
  --primary-hover: #1c1b1b;
  --primary-soft: #efeeed;
  --primary-ring: rgba(47,46,46,.12);
  --on-primary: #ffffff;

  /* foco do teclado: azul da marca, distinto de erro e de ação */
  --focus: #0088cb;
  --focus-ring: rgba(0,136,203,.25);

  /* cores da marca para usos de identidade (não de estado) */
  --brand-red: #ed1c24;
  --brand-red-dark: #c4161d;

  /* marcador vermelho do item ativo do menu */
  --nav-active: #ed1c24;
  --nav-active-hover: #c4161d;

  /* sidebar escura - chumbo da marca */
  --sidebar-bg: #2f2e2e;
  --sidebar-border: rgba(255,255,255,.06);
  --sidebar-text: rgba(255,255,255,.66);
  --sidebar-text-strong: #ffffff;
  --sidebar-dim: rgba(255,255,255,.32);
  --sidebar-icon: rgba(255,255,255,.40);
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-glass: rgba(255,255,255,.06);
  --sidebar-glass-border: rgba(255,255,255,.12);

  /* escala de urgência da tabela (mais escuro = mais crítico) */
  --urg-critica: #9b1218;
  --urg-alta: #ed1c24;
  --urg-hoje: #f5a400;
  --urg-proxima: #f3dc86;

  /* cinza-chumbo - usado em ícones/elementos neutros, sem carga de marca */
  --neutral-icon: #2f2e2e;
  --neutral-icon-soft: #efeeed;

  /* azul da marca: tipo "Serviço" e tudo que é do vencimento do título.
     O --brand-cyan-text é o azul escurecido para texto (5,5:1 no branco);
     o azul puro (#0088cb) só passa em ícones e preenchimentos. */
  --brand-cyan: #0088cb;
  --brand-cyan-soft: #e6f3fa;
  --brand-cyan-text: #006fa6;
  --brand-graphite: #605e5e;
  --brand-graphite-soft: #ededec;

  /* banner de boas-vindas do Início: card liso, como os demais */
  --hero-bg: #ffffff;
  --hero-border: var(--border);

  /* estados semânticos. Os de texto (--danger, --success, --warning) passam
     de 4,5:1 sobre o branco; os -accent são para ícones, barras e pontos. */
  --danger: #c8161d;
  --danger-soft: #fdeeee;
  --danger-accent: #ed1c24;
  --success: #047857;
  --success-soft: #ebf7f1;
  --success-accent: #10b981;
  --warning: #9a5b00;
  --warning-soft: #fff6dc;
  --warning-accent: #f5a400;

  /* raios: menores que antes, para um visual mais sóbrio de sistema */
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* sombras sutis */
  --shadow-sm: 0 1px 2px rgba(28,27,27,.06);
  --shadow-md: 0 4px 16px -6px rgba(28,27,27,.12), 0 1px 3px rgba(28,27,27,.05);
  --shadow-lg: 0 24px 56px -20px rgba(28,27,27,.30);

  /* layout */
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 78px;
  --gutter: 14px;
  /* canto arredondado do bloco de conteúdo (único elemento com borda em volta) */
  --inner-radius: 20px;

  /* barra de rolagem (todas as do site) */
  --scroll-thumb: #cfcdcb;
  --scroll-thumb-hover: #a8a5a3;

  /* ---------- cards: borda fina + sombra discreta ----------
     Visual de sistema corporativo: o card se separa do fundo pela borda,
     não por uma sombra "flutuante". */
  --card-border: var(--border);
  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(28,27,27,.04);
  --shadow-card-hover: 0 4px 14px -6px rgba(28,27,27,.14);

  /* ---------- escala tipográfica ----------
     5 tamanhos de texto + 2 para números/títulos grandes. Todo font-size do
     CSS usa um destes; não crie tamanhos soltos. A base é 14px: quem usa o
     portal não é da área fiscal e lê listas longas o dia todo. */
  --fs-xs: 11.5px;     /* rótulos em caixa alta, datas pequenas */
  --fs-sm: 12.5px;     /* textos de apoio, etiquetas */
  --fs-base: 14px;     /* texto padrão da interface e das tabelas */
  --fs-md: 15px;       /* texto de destaque, subtítulo do topo */
  --fs-lg: 16.5px;     /* títulos de card */
  --fs-num: 21px;      /* números médios (legendas, anel) */
  --fs-display: 28px;  /* saudação e números grandes dos KPIs */

  /* ---------- movimento ----------
     Curva e durações de todas as animações. Num sistema de trabalho, mais de
     400ms já vira espera. As durações em ms usadas no portal.js
     (DUR_FECHAR_MODAL, DUR_SAIDA_NOTA) acompanham estes valores. */
  --ease: cubic-bezier(.22,.68,.36,1);
  --dur-rapida: .16s;
  --dur-media: .25s;
  --dur-lenta: .4s;

  /* Fonte do site inteiro. Para trocar, mude só esta linha e o <link> do
     Google Fonts nos HTML (veja fontes.html para comparar as opções). */
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-family: var(--font);
}

/* ==========================================================================
   Tema escuro
   Ativado por data-theme="dark" no <html> (alternado pelo botão da topbar e
   persistido em localStorage). Só redefine as variáveis do design system -
   como todo o CSS já consome essas variáveis, o site inteiro inverte junto,
   sem precisar reescrever componente por componente.
   ========================================================================== */
:root[data-theme="dark"]{
  /* superfícies - grafite neutro, sem o tom azulado de antes */
  --bg: #141414;
  --card: #1c1c1c;
  --surface-2: #272625;
  --surface-3: #212120;

  /* texto claro. text-3 passa de 4,5:1 sobre o card e sobre o surface-2 */
  --text: #e8e6e5;
  --text-strong: #f6f5f4;
  --text-2: #b4b1af;
  --text-3: #979492;

  /* bordas */
  --border: #343230;
  --border-soft: #2a2928;
  --border-strong: #4a4744;

  /* ação no escuro: botão claro com texto escuro */
  --primary: #ecebea;
  --primary-dark: #ecebea;
  --primary-hover: #ffffff;
  --primary-soft: #2c2b2a;
  --primary-ring: rgba(255,255,255,.12);
  --on-primary: #1c1b1b;

  --focus: #38aae2;
  --focus-ring: rgba(56,170,226,.35);

  /* sidebar: um degrau mais escura que o card, para separar do conteúdo */
  --sidebar-bg: #0f0f0f;
  --sidebar-border: rgba(255,255,255,.05);
  --sidebar-text: rgba(255,255,255,.68);
  --sidebar-text-strong: #ffffff;
  --sidebar-dim: rgba(255,255,255,.34);
  --sidebar-icon: rgba(255,255,255,.44);
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-glass: rgba(255,255,255,.05);
  --sidebar-glass-border: rgba(255,255,255,.10);

  /* elementos neutros (ícones de KPI) numa base escura */
  --neutral-icon: #e8e6e5;
  --neutral-icon-soft: #2c2b2a;
  --brand-graphite-soft: #2c2b2a;
  --brand-graphite: #cfccca;

  /* azul da marca clareado para ler no fundo escuro */
  --brand-cyan-soft: #10293a;
  --brand-cyan-text: #6cc4ee;

  /* estados semânticos - fundos suaves reescritos para o escuro */
  --danger-soft: #3a1a1b;
  --success-soft: #10241b;
  --warning-soft: #2f2610;
  --success: #4ccf97;
  --warning: #f0b84a;

  /* no escuro o vermelho vivo do tema claro fica berrante (badge "Em atraso",
     KPI de atraso, prazo). Aqui ele vira um tom rosado mais suave, que lê bem
     no fundo escuro sem gritar. Só afeta o tema escuro. */
  --danger: #f28b8f;
  --danger-accent: #ef5257;

  --scroll-thumb: #3d3b39;
  --scroll-thumb-hover: #55524f;

  /* no escuro a sombra some no fundo, então a borda faz a separação */
  --card-border: var(--border);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35);
  --shadow-card-hover: 0 10px 28px -12px rgba(0,0,0,.7);

  /* sombras mais densas para dar profundidade no fundo escuro */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px -6px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 56px -20px rgba(0,0,0,.7);

  /* banner de boas-vindas (tema escuro) */
  --hero-bg: #1c1c1c;
  --hero-border: var(--border);
}

/* alguns tons "hard-coded" (definidos direto na regra, não via variável) que
   precisam de ajuste pontual no tema escuro para manter o contraste */
:root[data-theme="dark"] tbody tr:hover td{background:rgba(255,255,255,.03);}
:root[data-theme="dark"] .search-wrap input:focus{background:var(--surface-2);}
:root[data-theme="dark"] .export-btn:hover{background:#12261b; border-color:#1f4733;}
:root[data-theme="dark"] .badge-ambar{background:#33260d; color:#e4b563;}
:root[data-theme="dark"] .periodo-chip:hover,
:root[data-theme="dark"] .filtros-btn:hover{border-color:var(--border-strong);}
:root[data-theme="dark"] .filtros-limpar:hover:not(:disabled),
:root[data-theme="dark"] .pagination-btns button:not(:disabled):hover{border-color:var(--border-strong);}
:root[data-theme="dark"] .modal-overlay-portal{background:rgba(0,0,0,.62);}
:root[data-theme="dark"] .sidebar-backdrop{background:rgba(0,0,0,.55);}
:root[data-theme="dark"] .filtros-btn.tem-filtro,
:root[data-theme="dark"] .periodo-atalhos button:hover{border-color:var(--border-strong);}

/* faixa do topo (topbar): mesmo tom dos cards e da tabela (--card), com um
   separador sutil marcando onde ela termina sobre o fundo escuro. Só no tema
   escuro. */
:root[data-theme="dark"] .topbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
}
/* os controles da topbar recebem um leve realce para continuarem legíveis
   sobre a faixa (que agora tem a mesma cor dos cards) */
:root[data-theme="dark"] .topbar .tema-toggle,
:root[data-theme="dark"] .topbar .periodo-chip,
:root[data-theme="dark"] .topbar .user-avatar-btn{
  background:var(--surface-2); border-color:var(--border);
}

/* botão de alternar tema, na topbar */
.tema-toggle{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; padding:0; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card); color:var(--text-2);
}
.tema-toggle svg{width:17px; height:17px;}
.tema-toggle:hover{background:var(--surface-2); color:var(--text-strong); border-color:var(--border-strong);}
:root[data-theme="dark"] .tema-toggle:hover{border-color:var(--border-strong);}
/* sol e lua ficam um sobre o outro: ao trocar o tema, um gira e encolhe
   enquanto o outro aparece. Ao abrir a página o tema já vem aplicado pelo
   tema.js, então não há animação na carga, só no clique. */
.tema-toggle{position:relative; overflow:hidden;}
.tema-toggle svg{
  position:absolute; inset:0; margin:auto;
  transition:transform var(--dur-lenta) var(--ease), opacity var(--dur-media) ease;
}
.tema-toggle .icone-sol{opacity:0; transform:rotate(-90deg) scale(.4);}
:root[data-theme="dark"] .tema-toggle .icone-sol{opacity:1; transform:none;}
:root[data-theme="dark"] .tema-toggle .icone-lua{opacity:0; transform:rotate(90deg) scale(.4);}

*{box-sizing:border-box;}

/* ---------- barra de rolagem ----------
   Uma regra só para o site inteiro: fina, arredondada, sem as setinhas do
   Windows e com a cor do tema. Chrome/Edge usam o ::-webkit-scrollbar;
   o Firefox, que não tem esse recurso, usa o scrollbar-color. */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-button{display:none; width:0; height:0;}
::-webkit-scrollbar-thumb{
  background-color:var(--scroll-thumb); border-radius:99px;
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover);}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;}
}
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{
  margin:0; background:var(--card); color:var(--text);
  font-size:var(--fs-md); line-height:1.5; letter-spacing:-.005em;
}

button{
  font-family:inherit; font-size:var(--fs-base); font-weight:500; cursor:pointer;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--card); padding:9px 14px; color:var(--text);
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
button:hover{background:var(--surface-2);}
/* toque de "apertei": o botão encolhe 2% enquanto está pressionado */
button:active:not(:disabled){transform:scale(.98);}
button:focus-visible, input:focus-visible, a:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

input{
  font-family:inherit; font-size:var(--fs-base); color:var(--text);
  border-radius:var(--radius-sm); border:1px solid var(--border);
  padding:9px 12px; background:var(--card);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring);}
input::placeholder{color:var(--text-3);}

.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-hover); border-color:var(--primary-hover);}
.btn-full{width:100%;}


/* ==========================================================================
   App shell
   ========================================================================== */

/* A superfície branca preenche a janela inteira, de ponta a ponta: o menu fica
   encostado no canto e a topbar divide a mesma superfície, formando um "L".
   O único elemento com borda arredondada é o bloco de conteúdo (abaixo). */
.app-shell{
  display:flex;
  height:100vh;
  background:var(--card);
  overflow:hidden;
}

/* ---------- sidebar: coluna no canto, na mesma superfície do painel ---------- */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border);
  overflow-y:auto; overscroll-behavior:contain; min-height:0;
  display:flex; flex-direction:column; padding:18px 12px 14px;
  transition:width .2s ease, transform .24s cubic-bezier(.4,0,.2,1);
}

.sidebar{--scroll-thumb:rgba(255,255,255,.16); --scroll-thumb-hover:rgba(255,255,255,.28);}
.sidebar-brand{display:flex; align-items:center; justify-content:center; padding:8px 8px 22px;}
.brand-logo{height:44px; width:auto; max-width:100%; display:block; object-fit:contain;}
/* marca compacta, usada apenas quando a sidebar está recolhida */
.brand-mark{
  display:none;
  height:36px; width:36px; flex-shrink:0;
  object-fit:contain;
}

.nav-section-label{
  font-size:var(--fs-xs); font-weight:600; color:var(--sidebar-dim); text-transform:uppercase;
  letter-spacing:.08em; margin:18px 10px 7px;
}

.portal-nav{display:flex; flex-direction:column; gap:3px;}
.nav-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 12px; border-radius:10px; border:none; background:transparent;
  color:var(--sidebar-text); font-size:var(--fs-base); font-weight:500; text-decoration:none;
  font-family:inherit; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{width:17px; height:17px; color:var(--sidebar-icon); flex-shrink:0; transition:color .15s ease;}
.nav-item:hover{background:var(--sidebar-hover); color:var(--sidebar-text-strong);}
.nav-item:hover svg{color:rgba(255,255,255,.78);}

/* item ativo: fundo claro translúcido + ícone e barrinha em vermelho. O
   vermelho cheio fica guardado para o que é urgente. */
.nav-item.is-active{
  background:rgba(255,255,255,.09);
  color:#fff; font-weight:600;
}
.nav-item.is-active::before{
  content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--nav-active);
}
.nav-item.is-active svg{color:#ff5c66;}
.nav-item.is-active:hover{color:#fff; background:rgba(255,255,255,.12);}

.nav-badge{
  margin-left:auto; background:rgba(255,255,255,.10); color:rgba(255,255,255,.70);
  font-size:var(--fs-xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.nav-item.is-active .nav-badge{background:rgba(255,255,255,.16); color:#fff;}
/* sidebar recolhida: a barrinha encosta na borda da coluna estreita */
.app-shell.is-collapsed .nav-item.is-active::before,
html.is-collapsed .app-shell .nav-item.is-active::before{left:-10px;}

.nav-tag{
  margin-left:auto; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--sidebar-dim); background:rgba(255,255,255,.08); border-radius:var(--radius-pill);
  padding:2px 7px; line-height:1.6;
}
.nav-item-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* suporte no rodapé do menu: um item igual aos outros (classe nav-item),
   empurrado para baixo e separado por uma linha fina. Ao clicar abre o balão
   com o e-mail do suporte. */
.sidebar-rodape{
  margin-top:auto; padding-top:10px;
  border-top:1px solid var(--sidebar-border);
}
:root:not([data-theme="dark"]) .sidebar-rodape{border-top-color:rgba(255,255,255,.08);}
.sidebar-support .nav-item-label{flex:1;}
.support-seta{width:14px !important; height:14px !important; color:var(--sidebar-dim) !important; transition:transform .15s ease, color .15s ease;}
.sidebar-support:hover .support-seta{color:var(--sidebar-text-strong) !important; transform:translateX(2px);}
/* balão aberto: o item fica com o mesmo fundo do hover */
.sidebar-support[aria-expanded="true"]{background:var(--sidebar-hover); color:var(--sidebar-text-strong);}
/* menu recolhido: só o ícone, sem a setinha */
.app-shell.is-collapsed .support-seta,
html.is-collapsed .app-shell .support-seta{display:none;}

/* balão "Dúvidas? Entrar em contato com..." do botão de suporte.
   position:fixed + posicionado via JS (não fica preso ao overflow da
   sidebar, então funciona igual com o menu aberto, recolhido ou no drawer
   mobile). --arrow-left e o modificador --baixo também são setados via JS,
   conforme o espaço disponível na tela. */
.support-popover{
  position:fixed; z-index:60; width:224px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:14px 16px;
  animation:scaleIn .15s ease both;
  --arrow-left:20px;
}
.support-popover[hidden]{display:none;}
/* seta (quadrado rotacionado) apontando pro botão que abriu o balão */
.support-popover::after{
  content:""; position:absolute; left:var(--arrow-left); bottom:-7px;
  width:12px; height:12px; background:var(--card);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transform:translateX(-50%) rotate(45deg);
}
/* quando não cabe espaço acima do botão, o balão abre pra baixo e a seta vai pro topo */
.support-popover.support-popover--baixo::after{
  bottom:auto; top:-7px;
  border-right:none; border-bottom:none;
  border-left:1px solid var(--border); border-top:1px solid var(--border);
}
.support-popover-titulo{margin:0 0 4px; font-size:var(--fs-base); font-weight:700; color:var(--text-strong);}
.support-popover-texto{margin:0 0 10px; font-size:var(--fs-sm); color:var(--text-3);}
.support-popover-copiar{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:var(--fs-base); font-weight:600; color:var(--primary); transition:color .15s ease;
}
.support-popover-copiar:hover{color:var(--primary-hover);}
.support-popover-copiar svg{width:14px; height:14px; flex-shrink:0;}
.support-popover-email{word-break:break-all;}

/* backdrop do drawer (só aparece no mobile) */
.sidebar-backdrop{
  position:fixed; inset:0; z-index:35; background:rgba(15,23,42,.4);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none;
  transition:opacity .24s ease;
}

/* ---------- sidebar recolhida (desktop) ----------
   Os seletores "html.is-collapsed .app-shell" existem para o menu.js aplicar o
   estado recolhido já no <html>, antes de o app-shell existir, evitando o flash
   do menu aberto ao trocar de página. */
.app-shell.is-collapsed .sidebar,
html.is-collapsed .app-shell .sidebar{width:var(--sidebar-w-collapsed); padding-left:10px; padding-right:10px;}
.app-shell.is-collapsed .sidebar-brand,
html.is-collapsed .app-shell .sidebar-brand{padding:4px 0 20px;}
.app-shell.is-collapsed .brand-logo,
html.is-collapsed .app-shell .brand-logo{display:none;}
.app-shell.is-collapsed .brand-mark,
html.is-collapsed .app-shell .brand-mark{display:block;}
.app-shell.is-collapsed .nav-section-label,
.app-shell.is-collapsed .nav-item span,
.app-shell.is-collapsed .support-text,
html.is-collapsed .app-shell .nav-section-label,
html.is-collapsed .app-shell .nav-item span,
html.is-collapsed .app-shell .support-text{display:none;}
.app-shell.is-collapsed .nav-item,
html.is-collapsed .app-shell .nav-item{justify-content:center; padding:11px 0;}
/* recolhida: o suporte continua acessível, só como ícone */
.app-shell.is-collapsed .sidebar-support,
html.is-collapsed .app-shell .sidebar-support{justify-content:center; padding:11px 0;}


/* ==========================================================================
   Topbar
   ========================================================================== */

.app-content{
  flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column;
}

/* sem card próprio: fica "colada" no menu, na mesma superfície branca.
   O padding lateral usa o mesmo recuo do bloco de conteúdo para as duas
   áreas ficarem alinhadas na vertical. */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:16px var(--gutter); flex-shrink:0;
}

.sidebar-toggle{
  border:none; background:transparent; padding:7px; display:flex; color:var(--text-2);
  border-radius:var(--radius-sm); flex-shrink:0;
}
.sidebar-toggle:hover{background:var(--surface-2); color:var(--text-strong);}
.sidebar-toggle svg{width:18px; height:18px;}

.topbar-title{margin:0; font-size:var(--fs-md); font-weight:600; color:var(--text-strong); letter-spacing:-.01em;}
.topbar-title span{font-weight:400; color:var(--text-3);}

.topbar-right{display:flex; align-items:center; gap:8px; margin-left:auto;}

/* ---------- seletor de período ---------- */
.periodo{position:relative; flex-shrink:0;}
.periodo-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 11px;
  font-size:var(--fs-base); font-weight:500; color:var(--text-2); white-space:nowrap;
}
.periodo-chip svg{width:14px; height:14px; color:var(--text-3); flex-shrink:0;}
.periodo-chevron{width:13px; height:13px;}
.periodo-chip:hover{border-color:var(--border-strong); color:var(--text-strong);}
.periodo-chip[aria-expanded="true"]{
  border-color:var(--primary); color:var(--text-strong);
  box-shadow:0 0 0 3px var(--primary-ring);
}

.periodo-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:248px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:12px;
}
.periodo-menu[hidden]{display:none;}
.periodo-titulo{
  margin:0 0 7px; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3);
}

.periodo-atalhos{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.periodo-atalhos button{
  flex:1 1 auto; font-size:var(--fs-sm); padding:7px 10px; border-radius:var(--radius-pill);
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-2);
}
.periodo-atalhos button:hover{
  background:var(--primary-soft); border-color:var(--border-strong); color:var(--primary-dark);
}

.periodo-lista{
  display:flex; flex-direction:column; max-height:212px; overflow-y:auto;
  margin:0 -4px 12px; padding:0 4px;
}
.periodo-item{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:7px 8px; border-radius:var(--radius-sm);
  font-size:var(--fs-base); color:var(--text);
  transition:background .12s ease;
}
.periodo-item:hover{background:var(--surface-3);}
.periodo-item input{
  width:15px; height:15px; margin:0; flex-shrink:0;
  accent-color:var(--primary); cursor:pointer;
}

.periodo-rodape{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:11px; border-top:1px solid var(--border-soft);
}
.periodo-contagem{font-size:var(--fs-sm); color:var(--text-3);}
.periodo-aplicar{
  background:var(--primary); border-color:var(--primary); color:var(--on-primary);
  font-size:var(--fs-base); font-weight:600; padding:8px 16px;
}
.periodo-aplicar:hover:not(:disabled){background:var(--primary-hover); border-color:var(--primary-hover);}
.periodo-aplicar:disabled{opacity:.5; cursor:not-allowed;}

/* pill do usuário */
.topbar-user{position:relative; flex-shrink:0;}
.user-avatar-btn{
  display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px;
  background:var(--surface-3); border:1px solid var(--border-soft); border-radius:var(--radius-pill);
}
.user-avatar-btn:hover{background:var(--surface-2); border-color:var(--border);}
.user-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(145deg, var(--brand-red) 0%, var(--brand-red-dark) 100%); color:#fff;
  font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; justify-content:center;
}
.user-pill-name{font-size:var(--fs-base); font-weight:600; color:var(--text-strong); white-space:nowrap;}
.user-chevron{width:14px; height:14px; color:var(--text-3); flex-shrink:0;}

.user-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:216px; z-index:50;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:6px;
}
.user-menu[hidden]{display:none;}
.user-menu-header{margin:4px 8px 8px; padding-bottom:8px; border-bottom:1px solid var(--border-soft);}
.user-menu-name{margin:0; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);}
.user-menu-email{margin:2px 0 0; font-size:var(--fs-sm); color:var(--text-3); word-break:break-all;}
.user-menu-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:transparent; border:none; padding:9px; border-radius:var(--radius-sm);
  font-size:var(--fs-base); color:var(--text); font-weight:500;
}
.user-menu-item:hover{background:var(--danger-soft); color:var(--danger);}
.user-menu-item svg{width:15px; height:15px; color:var(--text-3); flex-shrink:0;}
.user-menu-item:hover svg{color:var(--danger);}


/* ==========================================================================
   Área principal
   ========================================================================== */

/* Bloco de conteúdo: é o ÚNICO elemento com borda arredondada em volta.
   Fica recuado das laterais para os cantos aparecerem, e o scroll da lista
   de notas acontece aqui dentro (menu e topbar seguem sempre visíveis). */
.portal-main{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  /* fundo escuro/profundo do app, sem a moldura arredondada que havia antes
     (border + border-radius + margem foram removidos de propósito). Os cards
     e a tabela usam --card, um tom mais claro, e "flutuam" sobre este fundo. */
  background:var(--bg);
  padding:0 24px 32px;
}
.portal-main > *{max-width:1440px; margin-left:auto; margin-right:auto;}

.portal-header{padding-top:26px; margin-bottom:22px;}
.portal-date{
  font-size:var(--fs-md); color:var(--text-2); margin:0 0 6px;
  animation:fadeIn .4s ease both;
}
.portal-header h1{
  font-size:var(--fs-display); font-weight:700; letter-spacing:-.03em; margin:0 0 6px; color:var(--text-strong);
}
.portal-sub{font-size:var(--fs-md); color:var(--text-2); margin:0;}
.portal-updated{
  display:inline-flex; align-items:center; gap:6px; margin:12px 0 0;
  font-size:var(--fs-sm); color:var(--text-3);
}
.portal-updated svg{width:13px; height:13px;}
.portal-updated:empty{display:none;}

/* resumo pessoal logo abaixo da saudação ("Você tem X notas...") */
.portal-resumo{
  font-size:var(--fs-base); color:var(--text-2); margin:8px 0 0;
  animation:fadeSlideUp .45s cubic-bezier(.22,.68,.36,1) .1s both;
}
.portal-resumo:empty{display:none;}
.portal-resumo b{color:var(--danger); font-weight:700;}

/* saudação (e, no Início, o card "Seu dia") na mesma linha. Alinhado ao topo:
   nas listas o cabeçalho é só texto, e centralizar deixava um vão quando havia
   um elemento mais alto ao lado. No Início o modo-inicio reposiciona o texto
   com align-self:center contra o card "Seu dia" (ver body.modo-inicio). */
.portal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
}
.portal-header-texto{flex:1; min-width:0;}

@media (max-width:900px){
  .portal-header{flex-direction:column; align-items:stretch; gap:18px;}
}


/* ---------- KPIs ---------- */
.portal-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px; margin-bottom:20px;
}
.portal-stat{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  padding:20px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* sem "levantar" o card no hover: num sistema de trabalho o movimento distrai.
   Só a borda e a sombra mudam, e só nos cards clicáveis */
.portal-stat.is-clicavel:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card-hover);
}
.portal-stat-head{display:flex; align-items:center; gap:13px;}
.portal-stat-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.portal-stat-icon svg{width:19px; height:19px;}
.portal-stat-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
.portal-stat-label{font-size:var(--fs-base); color:var(--text-2); font-weight:500; letter-spacing:-.005em;}
.portal-stat-value{
  font-size:var(--fs-display); font-weight:700; letter-spacing:-.03em; line-height:1.12;
  font-variant-numeric:tabular-nums; color:var(--text-strong);
}
.portal-stat-sub{
  font-size:var(--fs-sm); color:var(--text-3);
  padding-top:12px; border-top:1px solid var(--border-soft);
}

.portal-stat.is-primary .portal-stat-icon{background:var(--neutral-icon-soft); color:var(--neutral-icon);}
.portal-stat.is-danger .portal-stat-icon{background:var(--danger-soft); color:var(--danger-accent);}
.portal-stat.is-success .portal-stat-icon{background:var(--success-soft); color:var(--success-accent);}
.portal-stat.is-neutral .portal-stat-icon{background:var(--warning-soft); color:var(--warning-accent);}
.portal-stat.is-danger .portal-stat-value{color:var(--danger);}


/* ---------- card da tabela ---------- */
/* Sem recorte de propósito. Já foi "hidden" (para os cantos) e depois "clip"
   (para não quebrar o cabeçalho fixo), mas os dois cortavam o menu de filtros
   quando a tabela tinha poucas linhas e o card ficava mais baixo que o menu.
   Como só a paginação tem fundo próprio na base, é ela que arredonda o canto. */
.portal-table-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.portal-table-heading{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap;
}
.portal-table-heading h2{margin:0 0 3px; font-size:var(--fs-lg); font-weight:600; color:var(--text-strong); letter-spacing:-.01em;}
.portal-table-sub{margin:0; font-size:var(--fs-base); color:var(--text-2);}

.table-heading-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

/* ---------- botão e painel de filtros (ao lado da busca) ---------- */
.filtros{position:relative; flex-shrink:0;}
.filtros-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 12px;
  font-size:var(--fs-base); font-weight:500; color:var(--text-2); white-space:nowrap;
}
.filtros-btn svg{width:15px; height:15px; color:var(--text-3);}
.filtros-btn:hover{border-color:var(--border-strong); color:var(--text-strong);}
.filtros-btn:hover svg{color:var(--text-2);}
.filtros-btn[aria-expanded="true"]{
  border-color:var(--primary); color:var(--text-strong);
  box-shadow:0 0 0 3px var(--primary-ring);
}
/* com filtro ativo o botão assume a cor da marca, para não passar batido */
.filtros-btn.tem-filtro{
  background:var(--primary-soft); border-color:var(--border-strong); color:var(--primary-dark);
}
.filtros-btn.tem-filtro svg{color:var(--primary);}
.filtros-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill);
  background:var(--primary); color:var(--on-primary); font-size:var(--fs-xs); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.filtros-count[hidden]{display:none;}

.filtros-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:262px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:14px;
}
.filtros-menu[hidden]{display:none;}
.filtros-grupo{margin-bottom:14px;}
.filtros-grupo[hidden]{display:none;}
.filtros-titulo{
  margin:0 0 8px; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3);
}
.filtros-pills{display:flex; flex-wrap:wrap; gap:6px;}
.filtros-aviso{
  margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--text-3);
  background:var(--surface-3); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:9px 11px;
}
.filtros-rodape{padding-top:12px; border-top:1px solid var(--border-soft);}
.filtros-limpar{
  width:100%; font-size:var(--fs-base); padding:8px 12px; border-radius:var(--radius-sm);
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-2);
}
.filtros-limpar:hover:not(:disabled){background:var(--card); color:var(--text-strong); border-color:var(--border-strong);}
.filtros-limpar:disabled{opacity:.45; cursor:not-allowed;}

.faixa-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-sm); font-weight:500; padding:7px 12px;
  border-radius:var(--radius-pill); cursor:pointer;
  background:var(--card); border:1px solid var(--border); color:var(--text-2);
}
.faixa-pill::before{content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.faixa-pill b{font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-strong);}
.faixa-critica::before{background:var(--urg-critica);}
.faixa-alta::before{background:var(--urg-alta);}
.faixa-hoje::before{background:var(--urg-hoje);}
.faixa-ok::before{background:var(--text-3);}
/* âmbar fechado, o mesmo tom do "não informado" da coluna de vencimento -
   e diferente do âmbar claro de "vence hoje", para não confundir as duas */
.faixa-cobranca::before{background:var(--warning);}
.faixa-pill:hover:not(:disabled){border-color:var(--border-strong); color:var(--text-strong);}
.faixa-pill:disabled{opacity:.45; cursor:not-allowed;}
.faixa-pill.is-active{
  background:var(--primary); border-color:var(--primary); color:var(--on-primary);
}
.faixa-pill.is-active b{color:var(--on-primary);}

.search-wrap{position:relative; width:262px;}
.search-wrap svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--text-3); pointer-events:none;
}
.search-wrap input{width:100%; padding-left:34px; background:var(--surface-3);}
.search-wrap input:focus{background:var(--card);}

.export-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; padding:0; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card); color:var(--text-2);
}
.export-btn svg{width:16px; height:16px;}
/* o ícone do Excel tem cor própria, então cresce um pouco para ler bem */
.export-btn .icone-excel{width:18px; height:18px;}
.export-btn:hover{background:#eaf6ef; border-color:#bfe3d0;}
/* enquanto a biblioteca do Excel é baixada no primeiro clique */
.export-btn:disabled{opacity:.6; cursor:progress;}

/* A tabela tem rolagem horizontal própria, e isso cria um contexto de scroll
   que impediria o cabeçalho fixo. Então só trocamos a rolagem pelo cabeçalho
   fixo quando a tabela realmente couber inteira - quem decide é o JS
   (ajustarCabecalhoFixo), medindo a largura de verdade em vez de chutar um
   breakpoint, já que a largura necessária varia com o conteúdo. */
.table-scroll{overflow-x:auto;}

@media (min-width:1025px){
  .table-scroll.pode-fixar{overflow-x:visible;}
  .table-scroll.pode-fixar thead th{
    position:sticky; top:0; z-index:5;
    /* com border-collapse a borda do th desaparece quando ele fica sticky -
       o inset shadow garante a linha em qualquer navegador */
    border-bottom:none; box-shadow:inset 0 -1px 0 var(--border);
  }
}
table{width:100%; border-collapse:collapse; font-size:var(--fs-base); min-width:960px; font-variant-numeric:tabular-nums;}
th{
  text-align:left; padding:11px 14px; background:var(--surface-3);
  color:var(--text-2); font-weight:600; font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  /* alinha pela base: o cabeçalho "Vencimento do título" (2 linhas) fica na
     mesma linha de base dos cabeçalhos de 1 linha */
  vertical-align:bottom;
  border-bottom:1px solid var(--border);
}
th:first-child, td:first-child{padding-left:20px;}
th:last-child, td:last-child{padding-right:20px;}
td{padding:13px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; color:var(--text);}
td:nth-child(4), td:nth-child(5), td:nth-child(6){white-space:nowrap;}
/* "Vencimento do título" é o único cabeçalho longo: deixá-lo quebrar em duas
   linhas evita que o nowrap empurre a largura da tabela (e aumente a faixa de
   rolagem lateral). As datas da coluna continuam sem quebrar. */
th[data-sort="vencimento"]{white-space:normal; line-height:1.2; min-width:92px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .14s ease;}
tbody tr:hover td{background:var(--surface-3);}

.cell-nf{font-weight:600; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.cell-fornecedor{color:var(--text); max-width:240px;}
.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-strong);}
.center{text-align:center;}
.empty{text-align:center; color:var(--text-3); padding:44px 20px;}
/* botão "Tentar novamente" do estado de falha na carga das notas */
.btn-recarregar{
  display:inline-block; margin-left:10px; padding:6px 14px;
  font-size:var(--fs-base); font-weight:600;
  background:var(--primary-soft); border:1px solid var(--border-strong); color:var(--primary-dark);
  border-radius:var(--radius-sm);
}
.btn-recarregar:hover{background:var(--primary); border-color:var(--primary); color:var(--on-primary);}

.prazo-cell{display:flex; flex-direction:column; gap:2px;}
.prazo-cell > span:first-child{font-variant-numeric:tabular-nums;}
.prazo-atraso{font-size:var(--fs-sm); color:var(--danger); font-weight:600;}
.prazo-ok{font-size:var(--fs-sm); color:var(--text-3);}
/* ainda no prazo, mas vence hoje/amanhã/em 2 dias: âmbar de atenção, para a
   pessoa se antecipar antes de virar atraso */
.prazo-urgente{font-size:var(--fs-sm); color:var(--warning); font-weight:600;}

/* coluna de vencimento sem data - dois motivos, dois tratamentos.
   Serviço fica bem apagado (é esperado); material sem a data ganha um tom
   âmbar discreto, porque aí sim é uma lacuna que alguém pode cobrar. */
.venc-na{font-size:var(--fs-sm); color:var(--text-3); cursor:help;}
.venc-falta{font-size:var(--fs-sm); color:var(--warning); cursor:help;}
/* nota com várias parcelas: a primeira data + um marcador "+N" (as datas de
   todas as parcelas ficam na dica ao passar o mouse) */
.venc-parcelas{cursor:help; white-space:nowrap;}
.venc-mais{
  display:inline-block; margin-left:4px; padding:0 6px; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--brand-cyan-soft); color:var(--brand-cyan-text);
}

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-sm); font-weight:600; padding:4px 10px;
  border-radius:var(--radius-pill); white-space:nowrap; line-height:1.4;
}
.badge-dot::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex-shrink:0;
}
.badge-danger{background:var(--danger-soft); color:var(--danger);}
.badge-success{background:var(--success-soft); color:var(--success);}
.badge-neutral{background:var(--surface-2); color:var(--text-2);}
.badge-ambar{background:#fff4e3; color:#96610f;}

/* ---------- gradiente de urgência na lateral da linha ----------
   O vermelho fica reservado para urgência: a tabela "acende" onde é crítico.
   Só vale para notas pendentes - recebidas não recebem marcação. */
tbody tr td:first-child{position:relative;}
tbody tr.urg-critica td:first-child::before,
tbody tr.urg-alta td:first-child::before,
tbody tr.urg-hoje td:first-child::before,
tbody tr.urg-proxima td:first-child::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
}
tbody tr.urg-critica td:first-child::before{background:var(--urg-critica);}
tbody tr.urg-alta    td:first-child::before{background:var(--urg-alta);}
tbody tr.urg-hoje    td:first-child::before{background:var(--urg-hoje);}
tbody tr.urg-proxima td:first-child::before{background:var(--urg-proxima);}
.badge-cyan{background:var(--brand-cyan-soft); color:var(--brand-cyan-text);}
.badge-graphite{background:var(--brand-graphite-soft); color:var(--brand-graphite);}

th.sortable{cursor:pointer; user-select:none; transition:color .14s ease;}
th.sortable:hover{color:var(--primary);}
.sort-arrow{display:inline-block; margin-left:4px; font-size:9px; color:var(--primary);}

/* ações da linha */
.portal-acoes{display:flex; align-items:center; justify-content:center; gap:4px;}
.btn-acao{
  display:inline-flex; align-items:center; justify-content:center;
  width:31px; height:31px; padding:0; border:1px solid transparent; border-radius:var(--radius-sm);
  background:transparent; color:var(--text-3);
}
.btn-acao svg{width:15px; height:15px;}
.btn-acao-ver:hover{background:var(--primary-soft); color:var(--primary); border-color:var(--border-strong);}
.btn-acao-baixar:hover{background:var(--success-soft); color:var(--success); border-color:#c3f0dc;}

/* paginação */
.pagination{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-top:1px solid var(--border-soft); background:var(--surface-3);
  /* último elemento com fundo próprio: acompanha o canto do card, já que o
     card não recorta mais (senão o menu de filtros seria cortado) */
  border-radius:0 0 var(--radius-card) var(--radius-card);
}
.pagination:empty{display:none;}
.pagination-info{font-size:var(--fs-base); color:var(--text-2);}
.pagination-btns{display:flex; gap:8px;}
.pagination-btns button{font-size:var(--fs-base); padding:7px 14px; font-weight:500;}
.pagination-btns button:not(:disabled):hover{
  background:var(--primary-soft); color:var(--primary); border-color:var(--border-strong);
}
.pagination-btns button:disabled{opacity:.45; cursor:not-allowed;}


/* ==========================================================================
   Início (página de boas-vindas)
   body.modo-inicio troca a tabela pelo resumo + atalhos. As cores vêm todas
   das variáveis do design system, então claro e escuro funcionam juntos.
   ========================================================================== */

.inicio{display:none;}
body.modo-inicio .inicio{display:grid;}
body.modo-inicio .portal-table-card{display:none;}

/* frase de resumo abaixo da saudação */
.portal-sub b{font-weight:700; color:var(--text-strong);}
.portal-sub b.txt-ok{color:var(--success);}
.portal-sub b.txt-atraso{color:var(--danger);}
/* "vence hoje" é atenção (âmbar), não atraso (vermelho), em todo o site */
.portal-sub b.txt-hoje{color:var(--warning);}

/* ---------- KPIs clicáveis + anel de porcentagem ---------- */
.portal-stat.is-clicavel{cursor:pointer;}
.portal-stat.is-clicavel:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.stat-anel{
  --anel:var(--neutral-icon);
  margin-left:auto; flex-shrink:0; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--anel) calc(var(--p) * 1%), var(--surface-2) 0);
}
.stat-anel span{
  width:38px; height:38px; border-radius:50%; background:var(--card);
  display:grid; place-items:center;
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums;
}
.portal-stat.is-danger .stat-anel{--anel:var(--danger-accent);}
.portal-stat.is-success .stat-anel{--anel:var(--success-accent);}

/* ---------- grade: coluna larga à esquerda, movimentação à direita ---------- */
.inicio{
  grid-template-columns:minmax(0,1fr);
  gap:16px; align-items:start;
}
.inicio-col{display:flex; flex-direction:column; gap:16px; min-width:0;}
.inicio-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:20px 22px; min-width:0;
  animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) .22s both;
}
.inicio-mov{align-self:stretch;}
.inicio-card-head{margin-bottom:16px;}
.inicio-card-head h2{margin:0 0 3px; font-size:var(--fs-lg); font-weight:600; color:var(--text-strong); letter-spacing:-.01em;}
.inicio-card-sub{margin:0; font-size:var(--fs-base); color:var(--text-2);}

/* ---------- prazos de hoje e amanhã (2 cards lado a lado) ---------- */
.inicio-prazos-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.prazo-blocos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}

.prazo-bloco{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-items:center;
  padding:14px; border-radius:var(--radius);
  background:var(--surface-3); border:1px solid var(--border-soft);
}
.prazo-bloco[role="button"]{cursor:pointer;}
.prazo-bloco[role="button"]:hover{
  background:var(--card); border-color:var(--border);
  border-color:var(--border-strong); box-shadow:var(--shadow-sm);
}
.prazo-bloco[role="button"]:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.prazo-bloco-icone{
  grid-row:1 / 3; width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
}
.prazo-bloco-icone svg{width:19px; height:19px;}
.prazo-bloco-num{
  font-size:var(--fs-display); font-weight:700; letter-spacing:-.03em; line-height:1;
  color:var(--text-strong); font-variant-numeric:tabular-nums; align-self:end;
}
.prazo-bloco-titulo{font-size:var(--fs-base); font-weight:600; color:var(--text-strong); align-self:start;}
.prazo-bloco-desc{
  grid-column:1 / -1; margin-top:8px;
  font-size:var(--fs-sm); color:var(--text-3); line-height:1.4;
}
/* cores por natureza: entrega (hoje = âmbar, amanhã = âmbar claro),
   vencimento do título (azul da marca, para não confundir com a entrega) */
.prazo-hoje .prazo-bloco-icone{background:var(--warning-soft); color:var(--warning-accent);}
.prazo-hoje .prazo-bloco-num{color:var(--warning);}
.prazo-amanha .prazo-bloco-icone{background:var(--warning-soft); color:var(--warning-accent);}
.prazo-titulo .prazo-bloco-icone{background:var(--brand-cyan-soft); color:var(--brand-cyan-text);}
.prazo-titulo .prazo-bloco-num{color:var(--brand-cyan-text);}

/* ---------- acesso rápido ---------- */
.atalhos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.atalho{
  display:flex; flex-direction:column; align-items:stretch; gap:3px; text-align:left;
  padding:14px; border-radius:var(--radius);
  background:var(--surface-3); border:1px solid var(--border-soft); color:var(--text);
}
.atalho:hover{
  background:var(--card); border-color:var(--border);
  border-color:var(--border-strong); box-shadow:var(--shadow-sm);
}
.atalho-topo{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.atalho-icone{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
}
.atalho-icone svg{width:17px; height:17px;}
.atalho.is-neutro .atalho-icone{background:var(--neutral-icon-soft); color:var(--neutral-icon);}
.atalho.is-ambar .atalho-icone{background:var(--warning-soft); color:var(--warning-accent);}
.atalho.is-verde .atalho-icone{background:var(--success-soft); color:var(--success-accent);}
.atalho-qtd{font-size:var(--fs-num); font-weight:700; letter-spacing:-.02em; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.atalho-titulo{font-size:var(--fs-base); font-weight:600; color:var(--text-strong);}
.atalho-desc{font-size:var(--fs-sm); color:var(--text-3); line-height:1.4;}
.atalho-abrir{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:var(--fs-sm); font-weight:600; color:var(--primary);
}
.atalho-abrir svg{width:13px; height:13px; transition:transform .15s ease;}
.atalho:hover .atalho-abrir svg{transform:translateX(3px);}

.atalhos-titulo{
  margin:20px 0 10px; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3);
}
.atalhos-conhecimento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.atalho-link{
  display:flex; align-items:center; gap:9px; padding:9px 12px; min-width:0;
  border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  color:var(--text); font-size:var(--fs-base); font-weight:500; text-decoration:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.atalho-link svg{width:16px; height:16px; flex-shrink:0; color:var(--text-3); transition:color .15s ease;}
.atalho-link:hover{background:var(--surface-3); border-color:var(--border); color:var(--text-strong);}
.atalho-link:hover svg{color:var(--primary);}

/* ---------- movimentação recente (linhas coloridas suaves) ---------- */
.mov-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.mov-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.mov-item:hover{border-color:var(--border); transform:translateX(2px);}
.mov-item:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.mov-ciencia{background:var(--warning-soft);}
.mov-recebida{background:var(--success-soft);}
.mov-icone{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--card);
}
.mov-icone svg{width:17px; height:17px;}
.mov-ciencia .mov-icone{color:var(--warning-accent);}
.mov-recebida .mov-icone{color:var(--success-accent);}
.mov-texto{flex:1; min-width:0;}
.mov-titulo{
  margin:0; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mov-titulo span{font-weight:400; color:var(--text-2);}
.mov-sub{margin:2px 0 0; font-size:var(--fs-sm); color:var(--text-2);}
.mov-seta{width:16px; height:16px; flex-shrink:0; color:var(--text-3);}
.mov-vazio{
  font-size:var(--fs-base); color:var(--text-3); line-height:1.5; text-align:center;
  padding:22px 18px; background:var(--surface-3); border-radius:var(--radius-sm);
}

/* ==========================================================================
   Novo Início: faixa de alerta, situação, prazos, "precisam de atenção"
   e recebidas recentes. Só usa variáveis do design system (claro e escuro).
   ========================================================================== */

/* os quatro KPIs com anel ficam só nas listas; no Início a barra de situação
   já mostra esses números */
body.modo-inicio .portal-stats{display:none;}
/* frase de situação ainda não carregada: não deixa um espaço vazio */
.portal-sub:empty{display:none;}

.inicio-card-head-linha{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.inicio-link{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  background:none; border:0; padding:4px 0; cursor:pointer;
  font:inherit; font-size:var(--fs-base); font-weight:600; color:var(--primary);
}
.inicio-link svg{width:13px; height:13px; transition:transform .15s ease;}
.inicio-link:hover svg{transform:translateX(3px);}
.inicio-link:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.inicio-vazio{
  margin:0; font-size:var(--fs-base); color:var(--text-3); line-height:1.5; text-align:center;
  padding:22px 18px; background:var(--surface-3); border-radius:var(--radius-sm);
}

/* ---------- faixa de alerta: título vencendo hoje/amanhã ----------
   Card neutro (igual aos demais) com uma barra âmbar fina na lateral e o ícone
   âmbar: a cor aparece só onde carrega significado, sem pintar o bloco todo. */
.inicio-faixa{
  display:flex; align-items:center; gap:14px; padding:14px 18px 14px 22px; min-width:0;
  background:var(--card); color:var(--text);
  border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card), inset 4px 0 0 var(--warning-accent);
}
.inicio-faixa[hidden]{display:none;}
.faixa-icone{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--warning-soft); color:var(--warning-accent);
}
.faixa-icone svg{width:19px; height:19px;}
.faixa-texto{flex:1; min-width:0;}
.faixa-titulo{margin:0; font-size:var(--fs-md); font-weight:600; color:var(--text-strong);}
.faixa-sub{margin:2px 0 0; font-size:var(--fs-base); color:var(--text-2);}
.faixa-acao{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0; cursor:pointer;
  font:inherit; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);
  background:var(--surface-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 12px; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.faixa-acao svg{width:14px; height:14px; transition:transform .15s ease;}
.faixa-acao:hover{background:var(--primary-soft); border-color:var(--border-strong); color:var(--primary-dark);}
.faixa-acao:hover svg{transform:translateX(3px);}
.faixa-acao:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
:root[data-theme="dark"] .faixa-acao:hover{border-color:var(--border-strong); color:var(--text-strong);}

/* ---------- grade do Início: lista de ação à esquerda, resumo à direita ---------- */
.inicio-grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px;
  align-items:start; min-width:0;
}
.inicio-col-lateral .inicio-card-head{margin-bottom:14px;}

/* selo "N atrasadas" ao lado do título da lista */
.atencao-badge{
  display:inline-block; margin-left:8px; padding:2px 9px; vertical-align:1px;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0; line-height:1.4;
  background:var(--danger-soft); color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger-accent) 30%, transparent);
  border-radius:var(--radius-pill);
}
.atencao-badge[hidden]{display:none;}

/* ---------- situação: total + barra segmentada + legenda ---------- */
.sit-topo{display:flex; align-items:baseline; gap:10px; margin-bottom:14px;}
.sit-total{
  font-size:var(--fs-display); font-weight:700; letter-spacing:-.03em; line-height:1;
  color:var(--text-strong); font-variant-numeric:tabular-nums;
}
.sit-total-rotulo{font-size:var(--fs-base); color:var(--text-2);}
.sit-barra{display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; margin-bottom:16px;}
.sit-seg{flex-basis:0; min-width:4px;}
.sit-atraso{background:var(--danger-accent);}
.sit-hoje{background:var(--warning-accent);}
.sit-prazo{background:var(--success-accent);}
.sit-legenda{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.sit-linha{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:6px; row-gap:3px; align-items:center;
  width:100%; cursor:pointer; text-align:left; min-width:0;
  background:var(--surface-3); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:9px 10px; font:inherit; font-size:var(--fs-sm); color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.sit-linha:hover{background:var(--card); border-color:var(--border);}
.sit-linha:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.sit-linha-atraso{background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger-accent) 25%, transparent);}
.sit-linha-atraso:hover{background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger-accent) 50%, transparent);}
.sit-ponto{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.sit-rotulo{color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sit-qtd{
  grid-column:1 / -1; font-size:var(--fs-num); font-weight:700; letter-spacing:-.02em; line-height:1.1;
  color:var(--text-strong); font-variant-numeric:tabular-nums;
}

/* ---------- gráfico dos prazos ---------- */
.graf{display:flex; gap:6px; align-items:stretch; height:170px;}
.graf-col{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;}
.graf-num{font-size:var(--fs-base); font-weight:600; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.graf-area{flex:1; width:100%; display:flex; align-items:flex-end;}
.graf-barra{
  width:100%; height:calc(var(--h) * 1%); min-height:4px;
  background:var(--text-3); opacity:.5; border-radius:5px 5px 2px 2px;
}
.graf-barra.is-zero{height:2px; min-height:2px; border-radius:2px;}
.graf-col.is-hoje .graf-barra{background:var(--warning-accent); opacity:1;}
.graf-dia{font-size:var(--fs-sm); color:var(--text-2);}
.graf-data{font-size:var(--fs-xs); color:var(--text-3); font-variant-numeric:tabular-nums; margin-top:-3px;}
.graf-col.is-hoje .graf-dia{font-weight:600; color:var(--text-strong);}

/* ---------- lista "precisam de atenção" ---------- */
.atencao-lista{list-style:none; margin:0; padding:0;}
.atencao-item{
  display:flex; align-items:center; gap:12px; padding:11px 8px; margin:0 -8px;
  border-top:1px solid var(--border-soft); border-radius:var(--radius-sm); cursor:pointer;
  transition:background .15s ease;
}
.atencao-item:first-child{border-top:0;}
.atencao-item:hover{background:var(--surface-3);}
.atencao-item:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.atencao-icone{width:20px; height:20px; flex-shrink:0; display:grid; place-items:center;}
.atencao-icone svg{width:18px; height:18px;}
.atencao-item.is-atraso .atencao-icone{color:var(--danger-accent);}
.atencao-item.is-hoje .atencao-icone{color:var(--warning-accent);}
.atencao-texto{flex:1; min-width:0;}
.atencao-titulo{
  margin:0; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atencao-titulo span{font-weight:400; color:var(--text-2);}
.atencao-sub{margin:2px 0 0; font-size:var(--fs-sm); color:var(--text-2);}
.atencao-tag{
  flex-shrink:0; font-size:var(--fs-sm); font-weight:600; padding:4px 10px;
  border-radius:var(--radius-sm); white-space:nowrap;
}
.atencao-item.is-atraso .atencao-tag{background:var(--danger-soft); color:var(--danger);}
.atencao-item.is-hoje .atencao-tag{background:var(--warning-soft); color:var(--warning);}
.atencao-vazio{
  font-size:var(--fs-base); color:var(--text-3); line-height:1.5; text-align:center;
  padding:22px 18px; background:var(--surface-3); border-radius:var(--radius-sm);
}

/* ---------- recebidas recentemente (faixa discreta) ---------- */
.inicio-recebidas{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:2px 2px 8px;}
.inicio-recebidas:empty{display:none;}
.rec-rotulo{font-size:var(--fs-base); color:var(--text-2); margin-right:2px;}
.rec-vazio{font-size:var(--fs-base); color:var(--text-3);}
.rec-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font:inherit; font-size:var(--fs-base); font-weight:500; padding:5px 11px;
  background:var(--success-soft); color:var(--success);
  border:1px solid transparent; border-radius:var(--radius-pill);
  transition:border-color .15s ease;
}
.rec-chip svg{width:13px; height:13px; color:var(--success-accent);}
.rec-chip:hover{border-color:var(--success-accent);}
.rec-chip:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* no tema escuro o âmbar de texto precisa de mais brilho para manter o contraste */
:root[data-theme="dark"] .atencao-item.is-hoje .atencao-tag{color:var(--warning-accent);}

@media (max-width:1100px){
  .inicio-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .inicio-faixa{flex-wrap:wrap;}
  .faixa-texto{flex-basis:calc(100% - 60px);}
  .faixa-acao{margin-left:52px;}
  .atencao-item{flex-wrap:wrap;}
  .atencao-tag{margin-left:32px;}
  .graf{height:150px; gap:5px;}
}

/* ---------- banner de boas-vindas (só no Início) ----------
   Texto à esquerda e o card "Seu dia" à direita, lado a lado. */
body.modo-inicio .portal-header{
  position:relative; align-items:stretch;
  margin-top:20px; padding:26px 28px 26px 32px;
  background:var(--hero-bg); border:1px solid var(--hero-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
body.modo-inicio .portal-header-texto{position:relative; z-index:1; align-self:center;}
/* o card "Seu dia" não estica junto com o banner: fica com a altura natural do
   conteúdo (sem o expediente, esticar deixava sobra em cima e embaixo) */
body.modo-inicio .seu-dia{align-self:center;}
@media (max-width:900px){
  body.modo-inicio .portal-header{padding:22px 20px;}
}
@media (max-width:1024px){
  body.modo-inicio .portal-header{margin-top:14px;}
}

/* ---------- Início em telas menores ---------- */
@media (max-width:1180px){
  .inicio{grid-template-columns:1fr;}
}
/* os dois cards de prazo empilham antes, para os números não ficarem apertados */
@media (max-width:820px){
  .inicio-prazos-cards{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .prazo-blocos{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .atalhos{grid-template-columns:1fr;}
  .atalhos-conhecimento{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inicio-card{padding:16px;}
}


/* ==========================================================================
   Página "Em breve"
   ========================================================================== */

.em-breve-card{
  max-width:470px; margin:32px auto 0; text-align:center;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  padding:44px 38px; box-shadow:var(--shadow-card);
}
.em-breve-icon{
  width:56px; height:56px; border-radius:50%; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.em-breve-icon svg{width:25px; height:25px;}
.em-breve-card h2{font-size:var(--fs-num); font-weight:700; margin:0 0 8px; letter-spacing:-.02em; color:var(--text-strong);}
.em-breve-card p{font-size:var(--fs-base); color:var(--text-2); line-height:1.6; margin:0 0 24px;}
.btn-voltar{
  display:inline-flex; align-items:center; gap:7px; background:var(--primary); color:var(--on-primary);
  border:none; border-radius:var(--radius-sm); padding:11px 20px;
  font-size:var(--fs-base); font-weight:600; text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:background .15s ease, transform .15s ease;
}
.btn-voltar:hover{background:var(--primary-hover);}


/* ==========================================================================
   Modais
   ========================================================================== */

.modal-overlay-portal{
  position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:80; padding:20px;
}
.modal-overlay-portal[hidden]{display:none;}

.modal-pdf-content{
  width:100%; max-width:920px; height:86vh;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg);
}
.modal-pdf-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border-soft);
}
.modal-pdf-titulo{margin:0; font-size:var(--fs-md); font-weight:600; color:var(--text-strong);}
.modal-pdf-fechar{
  width:32px; height:32px; padding:0; border:none; background:transparent; color:var(--text-3);
  font-size:var(--fs-num); line-height:1; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.modal-pdf-fechar:hover{background:var(--surface-2); color:var(--text-strong);}
.modal-pdf-iframe{flex:1; border:none; width:100%; background:var(--surface-2);}

.modal-download-content{
  width:100%; max-width:430px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px; text-align:center; box-shadow:var(--shadow-lg);
}
.modal-download-icon{
  width:52px; height:52px; border-radius:50%; background:var(--warning-soft); color:var(--warning-accent);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.modal-download-icon svg{width:23px; height:23px;}
.modal-download-titulo{font-size:var(--fs-num); font-weight:700; margin:0 0 8px; color:var(--text-strong); letter-spacing:-.02em;}
.modal-download-sub{font-size:var(--fs-base); color:var(--text-2); margin:0 0 18px;}
.modal-download-aviso{
  font-size:var(--fs-base); color:var(--warning); background:var(--warning-soft);
  border:1px solid color-mix(in srgb, var(--warning-accent) 32%, transparent); border-radius:var(--radius-sm);
  padding:12px 14px; margin:0 0 22px; line-height:1.55; text-align:left;
}
/* no tema escuro o --warning (marrom) fica ilegível sobre o fundo escuro do
   aviso; usamos o tom âmbar mais claro e um fundo/borda com mais contraste */
:root[data-theme="dark"] .modal-download-aviso{
  color:#e4b563;
  background:#33260d;
  border-color:color-mix(in srgb, var(--warning-accent) 42%, transparent);
}
.modal-download-actions{display:flex; gap:8px;}
.btn-portal{
  flex:1; font-family:inherit; font-size:var(--fs-base); font-weight:600; padding:11px 18px;
  border-radius:var(--radius-sm); border:1px solid var(--border); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-portal-ghost{background:var(--card); color:var(--text);}
.btn-portal-ghost:hover{background:var(--surface-2);}
.btn-portal-primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary);}
.btn-portal-primary:hover{background:var(--primary-hover); border-color:var(--primary-hover);}
.btn-portal-primary:disabled{opacity:.6; cursor:progress;}

/* ---------- modal de movimentação / histórico da nota ---------- */
.modal-historico-content{
  width:100%; max-width:460px; max-height:82vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.modal-historico-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--border-soft);
}
.modal-historico-titulo{margin:0; font-size:var(--fs-md); font-weight:600; color:var(--text-strong);}
.modal-historico-body{padding:20px; overflow-y:auto;}

/* timeline vertical dos eventos */
.hist-timeline{list-style:none; margin:0; padding:0;}
.hist-item{position:relative; display:flex; gap:14px; padding-bottom:20px;}
.hist-item:last-child{padding-bottom:0;}
/* linha que conecta os pontos da timeline */
.hist-item:not(:last-child)::before{
  content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--border);
}
.hist-ponto{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
}
.hist-ponto svg{width:15px; height:15px;}
.hist-emissao .hist-ponto{background:var(--neutral-icon-soft); color:var(--neutral-icon);}
.hist-ciencia .hist-ponto{background:var(--warning-soft); color:var(--warning-accent);}
.hist-recebida .hist-ponto{background:var(--success-soft); color:var(--success-accent);}
.hist-conteudo{padding-top:2px; min-width:0;}
.hist-titulo{margin:0 0 2px; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);}
.hist-detalhe{margin:0 0 3px; font-size:var(--fs-base); color:var(--text-2); line-height:1.45;}
.hist-data{margin:0; font-size:var(--fs-sm); color:var(--text-3); font-variant-numeric:tabular-nums;}

/* botão de ação "histórico" na linha da tabela */
.btn-acao-historico:hover{background:var(--surface-2); color:var(--text-strong); border-color:var(--border);}


/* ==========================================================================
   Animações
   ========================================================================== */

@keyframes fadeSlideUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);} }

.portal-header h1{animation:fadeSlideUp .45s cubic-bezier(.22,.68,.36,1) both;}
.portal-sub{animation:fadeSlideUp .45s cubic-bezier(.22,.68,.36,1) .06s both;}
.portal-stat{animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;}
.portal-stats .portal-stat:nth-child(1){animation-delay:.04s;}
.portal-stats .portal-stat:nth-child(2){animation-delay:.09s;}
.portal-stats .portal-stat:nth-child(3){animation-delay:.14s;}
.portal-stats .portal-stat:nth-child(4){animation-delay:.19s;}
.portal-table-card{animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) .22s both;}
.modal-overlay-portal{animation:fadeIn .18s ease both;}
.modal-pdf-content,
.modal-download-content,
.modal-historico-content{animation:scaleIn .22s cubic-bezier(.22,.68,.36,1) both;}
.em-breve-card{animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width:1180px){
  .portal-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* tablet e mobile: o painel único dá lugar ao layout em coluna, com a
   sidebar voltando a ser um drawer sobreposto e a página rolando normalmente */
@media (max-width:1024px){
  body{background:var(--bg);}
  .app-shell{
    display:block; margin:0; height:auto; min-height:100vh;
    background:var(--bg); border-radius:0; box-shadow:none; overflow:visible;
  }

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:40;
    width:var(--sidebar-w); transform:translateX(-104%);
    background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border);
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow:var(--shadow-lg);
  }
  .app-shell.is-open .sidebar{transform:translateX(0);}
  .app-shell.is-open .sidebar-backdrop{opacity:1; pointer-events:auto;}

  /* no drawer o estado "recolhido" do desktop não se aplica */
  .app-shell.is-collapsed .sidebar,
  html.is-collapsed .app-shell .sidebar{width:var(--sidebar-w); padding:18px 12px 14px;}
  .app-shell.is-collapsed .nav-section-label,
  .app-shell.is-collapsed .nav-item span,
  .app-shell.is-collapsed .support-text,
  html.is-collapsed .app-shell .nav-section-label,
  html.is-collapsed .app-shell .nav-item span,
  html.is-collapsed .app-shell .support-text{display:revert;}
  .app-shell.is-collapsed .sidebar-support,
  html.is-collapsed .app-shell .sidebar-support{justify-content:flex-start; padding:10px 12px;}
  .app-shell.is-collapsed .brand-logo,
  html.is-collapsed .app-shell .brand-logo{display:block;}
  .app-shell.is-collapsed .brand-mark,
  html.is-collapsed .app-shell .brand-mark{display:none;}
  .app-shell.is-collapsed .sidebar-brand,
  html.is-collapsed .app-shell .sidebar-brand{padding:8px 8px 22px;}
  .app-shell.is-collapsed .nav-item,
  html.is-collapsed .app-shell .nav-item{justify-content:flex-start; padding:10px 12px;}

  .app-content{display:block; padding:var(--gutter);}

  /* a topbar volta a ser um card flutuante fixo no topo */
  .topbar{
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
    padding:11px 16px; position:sticky; top:var(--gutter); z-index:30;
  }

  .portal-main{
    overflow:visible; background:transparent;
    border:none; border-radius:0; padding:0 0 40px;
  }
}

@media (max-width:720px){
  :root{--gutter:10px;}
  .topbar{padding:10px 12px; gap:8px;}
  /* no celular o botão de usuário vira só o círculo do avatar: sem o nome e
     sem a setinha (que no print ficava cortada na borda da tela) */
  .user-pill-name{display:none;}
  .user-chevron{display:none;}
  .user-avatar-btn{padding:3px; gap:0; border-radius:50%;}
  .user-avatar{width:32px; height:32px;}
  /* no celular o seletor de mês vira só o ícone de calendário: o rótulo
     ("Outubro de 2026") ocupava muito e empurrava o avatar para fora da tela.
     O menu de troca de mês continua igual ao tocar no botão. */
  .periodo-chip{padding:8px; gap:0;}
  #periodo-label, .periodo-chevron{display:none;}
  .periodo-chip svg{width:17px; height:17px;}
  .periodo-menu{width:min(280px, calc(100vw - 28px));}
  .portal-header h1{font-size:var(--fs-display);}
  .portal-sub{font-size:var(--fs-base);}
  .portal-stats{grid-template-columns:1fr; gap:12px;}
  .portal-stat{padding:16px;}
  .portal-stat-value{font-size:var(--fs-display);}
  .portal-table-heading{flex-direction:column; align-items:stretch;}
  .table-heading-tools{justify-content:space-between;}
  .search-wrap{width:100%; flex:1;}
  .pagination{flex-direction:column; align-items:stretch; gap:10px; text-align:center;}
  .pagination-btns{justify-content:center;}
  .modal-download-actions{flex-direction:column-reverse;}
}


/* ==========================================================================
   Início · melhorias da tela de boas-vindas
   Botão de ação + busca rápida no banner, resumo pessoal ("Com você"), abas
   em "Precisam de atenção", aviso de fim de semana no gráfico, progresso do
   período, atalhos de Conhecimento, esqueleto de carregamento e comemoração
   quando está tudo em dia. Só usa variáveis do design system (claro/escuro).
   ========================================================================== */

/* ---------- banner: deixa a busca "vazar" para baixo e reserva espaço da arte ---------- */
body.modo-inicio .portal-header{overflow:visible; z-index:5;}

.hero-acoes, .hero-voce{display:none;}
body.modo-inicio .hero-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px;}
body.modo-inicio .hero-voce{display:block; margin-top:12px;}
body.modo-inicio .hero-voce:empty{display:none;}

.hero-cta{display:flex; flex-wrap:wrap; gap:8px;}
.hero-cta:empty{display:none;}
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  /* padding vertical real + min-height (em vez de altura fixa): o botão não
     "estoura" se o texto quebrar em duas linhas no celular */
  min-height:40px; padding:9px 16px; white-space:nowrap;
  font-size:var(--fs-base); font-weight:600;
}
.hero-btn svg{width:14px; height:14px; transition:transform .15s ease;}
.hero-btn:hover svg{transform:translateX(3px);}
.hero-btn-primario{
  background:var(--primary); border-color:var(--primary); color:var(--on-primary);
  box-shadow:var(--shadow-sm);
}
.hero-btn-primario:hover{background:var(--primary-hover); border-color:var(--primary-hover);}
.hero-btn-secundario{background:var(--card); color:var(--text-strong);}
.hero-btn-secundario:hover{background:var(--surface-2);}

.busca-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 10px; border:0; background:transparent; border-radius:var(--radius-sm);
}
.busca-item:hover, .busca-item:focus-visible{background:var(--surface-2); outline:none;}
.busca-texto{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.busca-titulo{font-size:var(--fs-base); font-weight:600; color:var(--text-strong);}
.busca-sub{font-size:var(--fs-sm); color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.busca-status{
  flex-shrink:0; font-size:var(--fs-sm); font-weight:600; padding:3px 9px;
  border-radius:var(--radius-pill); white-space:nowrap;
}
.busca-status.is-ok{background:var(--success-soft); color:var(--success);}
.busca-status.is-atencao{background:var(--warning-soft); color:var(--warning);}
.busca-status.is-alerta{background:var(--danger-soft); color:var(--danger);}
.busca-status.is-neutro{background:var(--surface-2); color:var(--text-2);}
.busca-todos{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:4px; padding:9px; border:0; border-top:1px solid var(--border-soft);
  border-radius:0 0 var(--radius-sm) var(--radius-sm); background:transparent;
  font-size:var(--fs-base); font-weight:600; color:var(--primary);
}
.busca-todos svg{width:13px; height:13px;}
.busca-todos:hover, .busca-todos:focus-visible{background:var(--surface-3); outline:none;}
.busca-vazio{margin:0; padding:14px 12px; font-size:var(--fs-base); color:var(--text-3); text-align:center;}

/* resumo pessoal */
.voce-chip{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:7px 13px; font-size:var(--fs-base); font-weight:500; line-height:1.35; text-align:left;
  border:1px solid transparent; border-radius:var(--radius-pill);
}
.voce-chip svg{width:15px; height:15px; flex-shrink:0;}
.voce-chip svg:last-child:not(:first-child){width:13px; height:13px; transition:transform .15s ease;}
.voce-chip b{font-weight:700;}
.voce-chip.is-ok{background:var(--success-soft); color:var(--success);}
/* informação pessoal "Com você" no prazo: cinza neutro, para não competir com
   o âmbar e o vermelho da frase acima. Vira âmbar só quando passa de 3 dias. */
.voce-chip.is-info{
  background:var(--surface-2); color:var(--text);
  border-color:var(--border);
}
.voce-chip.is-info b{color:var(--text-strong);}
.voce-chip.is-info svg{color:var(--text-2);}
button.voce-chip.is-info:hover{background:var(--surface-3); border-color:var(--border-strong);}
.voce-chip.is-atencao{
  background:var(--warning-soft); color:var(--warning);
  border-color:color-mix(in srgb, var(--warning-accent) 30%, transparent);
}
.voce-chip.is-alerta{
  background:var(--danger-soft); color:var(--danger);
  border-color:color-mix(in srgb, var(--danger-accent) 30%, transparent);
}
button.voce-chip.is-atencao:hover{background:var(--warning-soft); border-color:var(--warning-accent);}
button.voce-chip.is-alerta:hover{background:var(--danger-soft); border-color:var(--danger-accent);}
button.voce-chip:hover svg:last-child{transform:translateX(3px);}

/* ---------- abas de "Precisam de atenção" ---------- */
.atencao-abas{
  position:relative;
  display:flex; gap:4px; width:fit-content; max-width:100%;
  margin:-4px 0 12px; padding:3px; background:var(--surface-2); border-radius:10px;
}
.atencao-abas[hidden], .atencao-abas:empty{display:none;}
/* pílula branca que desliza para a aba ativa. Fica sob os botões (z-index) e
   só anima quando ganha a classe "desliza" (depois da primeira posição, para
   não deslizar sozinha ao ser recriada). */
.atencao-pilula{
  position:absolute; top:3px; left:0; height:calc(100% - 6px); width:0;
  border-radius:7px; background:var(--card); box-shadow:var(--shadow-sm);
  z-index:0; pointer-events:none;
}
.atencao-pilula.desliza{transition:transform var(--dur-media) var(--ease), width var(--dur-media) var(--ease);}
.atencao-aba{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border:0; border-radius:8px; background:transparent;
  font-size:var(--fs-base); font-weight:500; color:var(--text-2);
}
.atencao-aba b{
  min-width:22px; padding:0 7px; border-radius:var(--radius-pill); line-height:18px; text-align:center;
  font-size:var(--fs-sm); font-weight:600; background:var(--card); color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.atencao-aba:hover:not(:disabled){background:transparent; color:var(--text-strong);}
/* o fundo/sombra do ativo agora é a pílula deslizante (.atencao-pilula) */
.atencao-aba{position:relative; z-index:1;}
.atencao-aba.is-active, .atencao-aba.is-active:hover{
  background:transparent; color:var(--text-strong); font-weight:600;
}
.atencao-aba.is-atraso.is-active b{background:var(--danger-soft); color:var(--danger);}
.atencao-aba.is-hoje.is-active b{background:var(--warning-soft); color:var(--warning);}
.atencao-aba:disabled{opacity:.5; cursor:default;}

/* valor, ações e grupos nas linhas */
.atencao-sub b{font-weight:600; color:var(--text);}
.atencao-qtd{
  display:inline-block; margin-right:6px; padding:0 7px; line-height:17px;
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2);
  background:var(--surface-2); border-radius:var(--radius-pill);
  /* a pílula fica alinhada ao texto e não sobre ele: sem isto, numa linha de
     fornecedor agrupado, ela cobria o começo dos números das NFs */
  vertical-align:middle;
}
/* o subtítulo da linha agrupada pode quebrar para a segunda linha em vez de
   o texto passar por baixo da pílula de quantidade */
.atencao-item-grupo .atencao-sub{white-space:normal; overflow-wrap:anywhere;}
/* largura fixa (2 botões) para as etiquetas ficarem alinhadas em todas as linhas */
.atencao-acoes{display:flex; justify-content:flex-end; gap:2px; flex-shrink:0; width:64px;}
.atencao-chevron{display:grid; place-items:center; width:64px; flex-shrink:0; color:var(--text-3);}
.atencao-chevron svg{width:16px; height:16px; transition:transform .2s ease;}
.atencao-item-grupo.is-aberto .atencao-chevron svg{transform:rotate(180deg);}
.atencao-item.is-filho{
  padding-left:40px; border-top-color:transparent; background:var(--surface-3); margin-top:2px;
}
.atencao-item.is-filho:hover{background:var(--surface-2);}
.atencao-item.is-filho .atencao-icone{display:none;}

/* comemoração quando está tudo em dia */
.atencao-festa{
  position:relative; overflow:hidden; text-align:center;
  padding:30px 18px 26px; background:var(--success-soft); border-radius:var(--radius);
}
.festa-selo{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-items:center; background:var(--success-accent); color:#fff;
  box-shadow:0 10px 22px -10px var(--success-accent);
  animation:festaPop .55s cubic-bezier(.34,1.56,.64,1) .2s both;
}
.festa-selo svg{width:26px; height:26px;}
.festa-titulo{margin:0 0 4px; font-size:var(--fs-lg); font-weight:700; color:var(--success);}
.festa-sub{margin:0; font-size:var(--fs-base); color:var(--text-2);}
.festa-confetes{position:absolute; inset:0; pointer-events:none;}
.confete{
  position:absolute; top:-12px; width:7px; height:11px; border-radius:2px; opacity:0;
  animation:confeteCai 1.7s ease-out forwards;
}
.confete.c0{left:8%;  background:var(--brand-red);      animation-delay:.15s;}
.confete.c1{left:17%; background:var(--warning-accent); animation-delay:.35s;}
.confete.c2{left:26%; background:var(--brand-cyan);     animation-delay:.05s;}
.confete.c3{left:36%; background:var(--success-accent); animation-delay:.45s;}
.confete.c4{left:45%; background:var(--brand-red);      animation-delay:.25s;}
.confete.c5{left:55%; background:var(--brand-cyan);     animation-delay:.4s;}
.confete.c6{left:64%; background:var(--warning-accent); animation-delay:.1s;}
.confete.c7{left:73%; background:var(--success-accent); animation-delay:.3s;}
.confete.c8{left:83%; background:var(--brand-red);      animation-delay:.5s;}
.confete.c9{left:92%; background:var(--brand-cyan);     animation-delay:.2s;}
@keyframes confeteCai{
  0%{opacity:0; transform:translateY(0) rotate(0);}
  12%{opacity:1;}
  100%{opacity:0; transform:translateY(180px) rotate(540deg);}
}
@keyframes festaPop{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);}}

/* ---------- gráfico: fim de semana ---------- */
.graf-col.is-fds .graf-barra{
  background:repeating-linear-gradient(-45deg,
    var(--warning-accent) 0 4px,
    color-mix(in srgb, var(--warning-accent) 45%, transparent) 4px 8px);
  opacity:.6;
}
.graf-col.is-fds .graf-dia{color:var(--warning); font-weight:600;}
.graf-aviso{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:10px 12px;
  background:var(--warning-soft); border:1px solid color-mix(in srgb, var(--warning-accent) 30%, transparent);
  border-radius:var(--radius-sm); font-size:var(--fs-base); line-height:1.45; color:var(--text);
}
.graf-aviso svg{width:17px; height:17px; flex-shrink:0; margin-top:1px; color:var(--warning-accent);}
.graf-aviso p{margin:0;}
.graf-aviso b{color:var(--warning);}

/* ---------- progresso do período ---------- */
@property --p{syntax:"<number>"; inherits:true; initial-value:0;}
.prog{display:flex; align-items:center; gap:22px;}
.prog-anel{
  width:104px; height:104px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:conic-gradient(var(--success-accent) calc(var(--p) * 1%), var(--surface-2) 0);
  animation:anelCresce 1s cubic-bezier(.22,.68,.36,1) .25s both;
}
@keyframes anelCresce{from{--p:0;}}
.prog-anel > span{
  width:82px; height:82px; border-radius:50%; background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15;
}
.prog-anel b{font-size:var(--fs-num); font-weight:700; letter-spacing:-.02em; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.prog-anel small{font-size:var(--fs-xs); color:var(--text-2);}
.prog-etapas{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.prog-etapa{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--surface-3); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  transition:background .15s ease, border-color .15s ease;
}
.prog-etapa.is-clicavel{cursor:pointer;}
.prog-etapa.is-clicavel:hover{background:var(--card); border-color:var(--border);}
.prog-etapa.is-clicavel:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.prog-ponto{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.prog-aguardando .prog-ponto{background:var(--text-3);}
.prog-com .prog-ponto{background:var(--warning-accent);}
.prog-recebidas .prog-ponto{background:var(--success-accent);}
.prog-rotulo{flex:1; min-width:0; display:flex; flex-direction:column; font-size:var(--fs-base); font-weight:500; color:var(--text);}
.prog-rotulo small{font-size:var(--fs-sm); font-weight:400; color:var(--text-3);}
.prog-qtd{font-size:var(--fs-num); font-weight:700; letter-spacing:-.02em; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.prog-recentes{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);
}

/* ---------- atalhos de Conhecimento ---------- */
.inicio-conhecimento{display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px;}
.conhec-intro{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.conhec-intro h2{margin:0 0 2px; font-size:var(--fs-lg); font-weight:600; color:var(--text-strong); letter-spacing:-.01em;}
.conhec-icone{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--primary-soft); color:var(--primary);
}
.conhec-icone svg{width:19px; height:19px;}
.conhec-links{flex:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px;}
.conhec-link{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:var(--fs-base); font-weight:500; color:var(--text); text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.conhec-link svg{width:15px; height:15px; color:var(--text-3); transition:color .15s ease;}
.conhec-link:hover{border-color:var(--primary); color:var(--primary);}
.conhec-link:hover svg{color:var(--primary);}
.conhec-link.is-destaque{
  background:var(--primary-soft); color:var(--primary-dark); font-weight:600;
  border-color:color-mix(in srgb, var(--primary) 25%, transparent);
}
.conhec-link.is-destaque svg{color:var(--primary);}

/* ---------- esqueleto de carregamento ---------- */
.skel{
  display:block; border-radius:6px;
  background:linear-gradient(90deg,
    var(--surface-2) 25%,
    color-mix(in srgb, var(--surface-2), var(--text-3) 14%) 37%,
    var(--surface-2) 63%);
  background-size:400% 100%;
  animation:skelBrilho 1.3s ease-in-out infinite;
}
@keyframes skelBrilho{from{background-position:100% 50%;} to{background-position:0 50%;}}
.skel-circulo{width:20px; height:20px; border-radius:50%; flex-shrink:0;}
.skel-anel{width:104px; height:104px; border-radius:50%; flex-shrink:0;}
.skel-pilha{display:flex; flex-direction:column; gap:12px;}
.skel-trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.atencao-item.is-skel{cursor:default;}
.atencao-item.is-skel:hover{background:transparent;}
.atencao-item.is-skel .atencao-texto{display:flex; flex-direction:column; gap:7px;}

/* ---------- tema escuro: textos âmbar/vermelho escuro precisam de mais brilho ---------- */
:root[data-theme="dark"] .voce-chip.is-atencao,
:root[data-theme="dark"] .busca-status.is-atencao,
:root[data-theme="dark"] .atencao-aba.is-hoje.is-active b,
:root[data-theme="dark"] .graf-col.is-fds .graf-dia,
:root[data-theme="dark"] .graf-aviso b{color:var(--warning-accent);}

:root[data-theme="dark"] .festa-selo{color:#0f1215;}

/* ---------- telas menores ---------- */
@media (max-width:900px){
  .conhec-links{justify-content:flex-start;}
}
@media (max-width:640px){
  .hero-cta{width:100%;}
  .hero-btn{flex:1;}
  /* no celular o texto ocupa a linha toda; etiqueta e botões descem para a de baixo */
  .atencao-item{row-gap:8px;}
  .atencao-texto{flex:1 1 calc(100% - 32px);}
  .atencao-titulo{white-space:normal;}
  .atencao-acoes, .atencao-chevron{margin-left:auto;}
  .atencao-item.is-filho{padding-left:12px;}
  .atencao-item.is-filho .atencao-tag{margin-left:0;}
  .conhec-intro{flex:1 1 100%; min-width:0;}
  .prog{flex-direction:column; align-items:stretch;}
  .prog-anel{align-self:center;}
}


/* ==========================================================================
   Etiquetas padronizadas
   Status da tabela, abas, filtros e resultados da busca seguem o mesmo
   formato: pílula com ícone (ou ponto) + texto + número em negrito.
   ========================================================================== */
.badge, .faixa-pill, .atencao-aba, .busca-status, .atencao-tag{
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:0 10px; border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:600; line-height:1; white-space:nowrap;
}
.badge svg, .atencao-aba svg{width:13px; height:13px; flex-shrink:0;}
.faixa-pill{min-height:30px; padding:0 12px; font-weight:500;}
.atencao-aba{min-height:30px; font-weight:500;}
.atencao-aba svg{opacity:.75;}
.atencao-aba.is-atraso.is-active svg{color:var(--danger-accent); opacity:1;}
.atencao-aba.is-hoje.is-active svg{color:var(--warning-accent); opacity:1;}
.faixa-pill b, .atencao-aba b{font-variant-numeric:tabular-nums;}
/* status são etiquetas retangulares (cantos de 6px), não pílulas: lê como
   dado de sistema. Pílula fica só para o que é clicável (filtros). */
.badge, .busca-status, .atencao-tag{border-radius:6px;}
.atencao-aba{border-radius:7px;}

/* topbar: no claro também ganha a linha fina de separação do conteúdo */
.topbar{border-bottom:1px solid var(--border);}


/* ==========================================================================
   Card "Seu dia" (banner do Início)
   ========================================================================== */
.seu-dia{display:none;}
body.modo-inicio .seu-dia{
  display:flex; flex-direction:column; gap:14px; flex:0 0 330px; min-width:0;
  padding:18px; background:var(--card);
  border:1px solid var(--border-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
body.modo-inicio .seu-dia:empty{display:none;}
.seu-dia-topo{display:flex; align-items:center; justify-content:space-between;}
.seu-dia-rotulo{
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3);
}
.seu-dia-hora{font-size:var(--fs-sm); font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums;}

.seu-dia-corpo{display:flex; align-items:center; gap:14px; border-radius:var(--radius-sm);}
.seu-dia-corpo.is-clicavel{cursor:pointer; margin:-6px; padding:6px; transition:background .15s ease;}
.seu-dia-corpo.is-clicavel:hover{background:var(--surface-3);}
.seu-dia-corpo.is-clicavel:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.seu-dia-anel{
  width:68px; height:68px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:conic-gradient(var(--success-accent) calc(var(--p) * 1%), var(--surface-2) 0);
  animation:anelCresce 1s cubic-bezier(.22,.68,.36,1) .25s both;
}
.seu-dia-anel > span{
  width:54px; height:54px; border-radius:50%; background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1;
}
.seu-dia-anel b{font-size:var(--fs-num); font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.seu-dia-anel small{font-size:var(--fs-xs); color:var(--text-3); font-variant-numeric:tabular-nums;}
.seu-dia-info{min-width:0;}
.seu-dia-titulo{margin:0; font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.seu-dia-sub{margin:2px 0 0; font-size:var(--fs-sm); color:var(--text-2); line-height:1.4;}
.seu-dia-selo{
  width:52px; height:52px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--success-accent); color:#fff;
  box-shadow:0 8px 18px -8px var(--success-accent);
  animation:festaPop .55s cubic-bezier(.34,1.56,.64,1) .2s both;
}
.seu-dia-selo svg{width:24px; height:24px;}
.seu-dia-selo.is-neutro{background:var(--surface-2); color:var(--text-2); box-shadow:none;}
.seu-dia-corpo.is-concluido .seu-dia-titulo{color:var(--success);}


:root[data-theme="dark"] .seu-dia-selo{color:#0f1215;}

.skel-anel-p{width:68px; height:68px; border-radius:50%; flex-shrink:0;}

@media (max-width:900px){
  body.modo-inicio .seu-dia{flex-basis:auto;}
}


/* ==========================================================================
   Topbar: busca global (Ctrl+K) e sino de notificações
   ========================================================================== */
.busca-global-btn{
  display:inline-flex; align-items:center; gap:9px; margin-left:auto;
  width:min(320px, 34vw); height:36px; padding:0 8px 0 12px;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-3);
  font-size:var(--fs-base); font-weight:400; text-align:left;
  border-radius:var(--radius-sm); text-decoration:none; /* também é <a> no Em breve */
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.busca-global-btn svg{width:15px; height:15px; flex-shrink:0;}
.busca-global-texto{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.busca-global-btn:hover{background:var(--card); border-color:var(--border-strong); color:var(--text-2);}
kbd, .busca-global-kbd{
  font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text-3);
  background:var(--card); border:1px solid var(--border); border-bottom-width:2px;
  border-radius:5px; padding:1px 6px; line-height:1.5; white-space:nowrap;
}
.topbar-right{margin-left:12px;}

/* botão de ícone da topbar (mesmo visual do botão de tema) */
.topbar-icone{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; padding:0; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card); color:var(--text-2);
}
.topbar-icone svg{width:17px; height:17px;}
.topbar-icone:hover{background:var(--surface-2); color:var(--text-strong); border-color:var(--border-strong);}
.topbar-icone[aria-expanded="true"]{border-color:var(--primary); color:var(--text-strong); box-shadow:0 0 0 3px var(--primary-ring);}
:root[data-theme="dark"] .topbar .topbar-icone,
:root[data-theme="dark"] .topbar .busca-global-btn{background:var(--surface-2); border-color:var(--border);}
:root[data-theme="dark"] .topbar-icone:hover,
:root[data-theme="dark"] .busca-global-btn:hover{border-color:var(--border-strong);}

.notif{position:relative; flex-shrink:0;}
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); border:2px solid var(--card);
  background:var(--brand-red); color:#fff; font-size:10px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.notif-badge[hidden]{display:none;}
.notif-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:340px; max-width:calc(100vw - 24px);
  max-height:min(460px, 70vh); overflow-y:auto; padding:6px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); animation:scaleIn .15s ease both; transform-origin:top right;
}
.notif-menu[hidden]{display:none;}
.notif-cabeca{
  display:flex; align-items:center; gap:8px; margin:0; padding:8px 10px 10px;
  font-size:var(--fs-md); font-weight:700; color:var(--text-strong);
}
.notif-cabeca span{
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2);
  background:var(--surface-2); border-radius:var(--radius-pill); padding:2px 8px;
}
.notif-item{
  position:relative; display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left;
  padding:10px; border:0; border-radius:var(--radius-sm); background:transparent;
}
.notif-item:hover, .notif-item:focus-visible{background:var(--surface-3); outline:none;}
.notif-icone{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
}
.notif-icone svg{width:16px; height:16px;}
.notif-item.is-alerta .notif-icone{background:var(--danger-soft); color:var(--danger-accent);}
.notif-item.is-atencao .notif-icone{background:var(--warning-soft); color:var(--warning-accent);}
.notif-texto{display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:1px;}
.notif-texto b{font-size:var(--fs-base); font-weight:600; color:var(--text-strong); line-height:1.35;}
.notif-texto small{font-size:var(--fs-sm); color:var(--text-2); line-height:1.4;}
/* bolinha das que ainda não tinham sido vistas */
.notif-item.is-nova::after{
  content:""; position:absolute; top:14px; right:10px; width:7px; height:7px; border-radius:50%;
  background:var(--primary);
}
.notif-item.is-nova .notif-texto{padding-right:14px;}
.notif-vazio{display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 12px 26px; text-align:center;}
.notif-vazio span{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--success-soft); color:var(--success-accent);
}
.notif-vazio svg{width:18px; height:18px;}
.notif-vazio p{margin:0; font-size:var(--fs-base); color:var(--text-2);}

/* ---------- painel da busca global ---------- */
.busca-overlay{
  position:fixed; inset:0; z-index:90; padding:12vh 16px 16px;
  display:flex; justify-content:center; align-items:flex-start;
  background:rgba(15,23,42,.42); backdrop-filter:blur(3px);
  animation:fadeIn .15s ease both;
}
.busca-overlay[hidden]{display:none;}
:root[data-theme="dark"] .busca-overlay{background:rgba(0,0,0,.6);}
.busca-painel{
  width:min(620px, 100%); max-height:76vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:scaleIn .18s cubic-bezier(.22,.68,.36,1) both; transform-origin:top center;
}
.busca-campo{display:flex; align-items:center; gap:10px; padding:6px 14px; border-bottom:1px solid var(--border-soft);}
.busca-campo > svg{width:18px; height:18px; color:var(--text-3); flex-shrink:0;}
.busca-campo input{
  flex:1; min-width:0; height:48px; padding:0; border:0; background:transparent;
  font-size:var(--fs-lg); color:var(--text-strong);
}
.busca-campo input:focus{box-shadow:none; border:0;}
.busca-campo input:focus-visible{outline:none;}
.busca-global-resultados{flex:1; overflow-y:auto; padding:6px;}
.busca-dica{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:0; padding:9px 14px;
  font-size:var(--fs-sm); color:var(--text-2);
  border-top:1px solid var(--border-soft); background:var(--surface-3);
}
.busca-dica kbd{padding:0 5px;}

/* ---------- avisos discretos (substituem o alert) ---------- */
.avisos{
  position:fixed; right:20px; bottom:20px; z-index:100;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;
}
.aviso{
  pointer-events:auto; display:flex; align-items:center; gap:10px;
  max-width:min(380px, calc(100vw - 32px)); padding:10px 8px 10px 12px;
  background:var(--text-strong); color:var(--card);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  font-size:var(--fs-base); font-weight:500; line-height:1.4;
  animation:avisoEntra .25s cubic-bezier(.22,.68,.36,1) both;
}
.aviso.is-saindo{animation:avisoSai .2s ease both;}
.aviso-icone{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff;
}
.aviso-icone svg{width:14px; height:14px;}
.aviso.is-ok .aviso-icone{background:var(--success-accent);}
.aviso.is-erro .aviso-icone{background:var(--danger-accent);}
.aviso.is-info .aviso-icone{background:var(--brand-cyan);}
.aviso-texto{flex:1; min-width:0;}
.aviso-fechar{
  width:26px; height:26px; padding:0; flex-shrink:0; border:0; background:transparent;
  color:inherit; opacity:.6; font-size:var(--fs-num); line-height:1;
  display:grid; place-items:center;
}
.aviso-fechar:hover{opacity:1; background:rgba(127,127,127,.18);}
@keyframes avisoEntra{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}}
@keyframes avisoSai{to{opacity:0; transform:translateY(6px);}}


/* ==========================================================================
   Menu inferior (só no celular)
   ========================================================================== */
.nav-inferior{display:none;}
@media (max-width:720px){
  .nav-inferior{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    display:grid; grid-template-columns:repeat(4, 1fr);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--card); border-top:1px solid var(--border);
    box-shadow:0 -6px 20px -12px rgba(15,23,42,.18);
  }
  .nav-inferior-item{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:50px; padding:4px 2px; border:0; border-radius:var(--radius-sm);
    background:transparent; color:var(--text-3); text-decoration:none;
    font-size:var(--fs-xs); font-weight:600;
  }
  .nav-inferior-item svg{width:21px; height:21px;}
  .nav-inferior-item:hover{background:var(--surface-3); color:var(--text-2);}
  .nav-inferior-item.is-active{color:var(--primary);}
  .nav-inferior-item.is-active::before{
    content:""; position:absolute; top:-6px; left:30%; right:30%; height:3px;
    border-radius:0 0 3px 3px; background:var(--primary);
  }

  .nav-inferior-badge{
    position:absolute; top:4px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-pill); background:var(--brand-red); color:#fff;
    font-size:10px; font-weight:700; line-height:1; border:2px solid var(--card);
  }
  .nav-inferior-badge[hidden]{display:none;}

  /* o menu lateral (drawer) desce até o fim da tela: sem este espaço o item
     Suporte ficava escondido atrás do menu de baixo */
  .sidebar{padding-bottom:calc(76px + env(safe-area-inset-bottom));}

  /* espaço para o conteúdo não ficar atrás do menu */
  .portal-main{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .avisos{right:12px; left:12px; align-items:stretch; bottom:calc(76px + env(safe-area-inset-bottom));}
  .aviso{max-width:none;}

  .topbar-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
  .topbar-title span{display:none;}

  /* a busca e o menu lateral já estão no menu de baixo */
  .busca-global-btn{display:none;}
  .topbar-right{margin-left:auto;}
  .busca-overlay{padding-top:16px;}
}


/* ==========================================================================
   Início organizado em blocos + card "Pagamento vence hoje"
   Bloco 1 "Para resolver hoje" usa a grade .inicio-grid que já existia.
   Bloco 2 "Panorama do período" tem a grade própria abaixo.
   ========================================================================== */

.inicio-bloco + .inicio-bloco{margin-top:12px;}
.inicio-bloco-head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px;
  margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.inicio-bloco-titulo{
  margin:0; font-size:var(--fs-base); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-strong);
}
.inicio-bloco-sub{margin:0; font-size:var(--fs-base); color:var(--text-2);}

/* 2 cards lado a lado, sempre com a mesma largura; empilha no celular */
.inicio-panorama{
  display:grid; gap:16px; align-items:stretch; min-width:0;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

/* ---------- Pagamento vence hoje ----------
   Mesmo card branco do resto do Início (classe inicio-card), com as cores
   vindas das variáveis do tema: muda junto no claro e no escuro. */
.pag-head{display:flex; align-items:flex-start; gap:12px; min-width:0;}
.pag-icone{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--warning-soft); color:var(--warning-accent);
}
.pag-icone.is-ok{background:var(--success-soft); color:var(--success-accent);}
.pag-icone svg{width:18px; height:18px;}
.pag-contador{
  flex-shrink:0; white-space:nowrap; font-size:var(--fs-sm); font-weight:600;
  padding:4px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text-2); font-variant-numeric:tabular-nums;
}

/* no máximo MAX_PAGAMENTOS (portal.js) notas; o resto fica no botão do rodapé */
.pag-lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.pag-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  transition:background .15s ease, border-color .15s ease;
}
.pag-item:hover{background:var(--card); border-color:var(--border);}
.pag-item:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.pag-texto{flex:1; min-width:0;}
.pag-fornecedor{
  margin:0; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pag-sub{margin:2px 0 0; font-size:var(--fs-sm); color:var(--text-2);}
.pag-lado{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0;}
.pag-valor{font-size:var(--fs-base); font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.pag-status{min-height:22px; padding:0 8px; font-size:var(--fs-xs);}
.pag-status svg{width:12px; height:12px;}
.pag-status.is-atencao{background:var(--warning-soft); color:var(--warning);}
.pag-status.is-alerta{background:var(--danger-soft); color:var(--danger);}
.pag-status.is-ok{background:var(--success-soft); color:var(--success);}
:root[data-theme="dark"] .pag-status.is-atencao{color:var(--warning-accent);}
/* ver/baixar PDF: largura fixa (2 botões) para os valores ficarem alinhados
   mesmo quando a nota não tem o botão de baixar */
.pag-acoes{display:flex; justify-content:flex-end; gap:2px; flex-shrink:0; width:64px; margin-right:-6px;}

/* rodapé: "Ver todas as N..." (abre Pendentes filtrada) ou "Mostrar mais" */
.pag-ver-todas{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:10px; padding:9px 12px; border:1px dashed var(--border); background:transparent;
  font-size:var(--fs-base); font-weight:600; color:var(--primary);
}
.pag-ver-todas svg{width:13px; height:13px; transition:transform .15s ease;}
.pag-ver-todas:hover{background:var(--primary-soft); border-color:color-mix(in srgb, var(--primary) 35%, transparent);}
.pag-ver-todas:hover svg:not(.pag-chevron){transform:translateX(3px);}
.pag-ver-todas[aria-expanded="true"] .pag-chevron{transform:rotate(180deg);}

@media (max-width:640px){
  .pag-item{flex-wrap:wrap;}
  .pag-texto{flex-basis:calc(100% - 140px);}
  .pag-acoes{width:auto; margin-left:auto;}
}

@media (max-width:900px){
  .inicio-panorama{grid-template-columns:minmax(0,1fr);}
}


/* ==========================================================================
   Balão de ajuda (ajuda.js): botão "?" na topbar + painel de dúvidas
   ========================================================================== */
.ajuda{position:relative; flex-shrink:0;}
.ajuda-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:55;
  width:400px; max-width:calc(100vw - 24px); max-height:min(600px, calc(100vh - 100px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); animation:scaleIn .15s ease both; transform-origin:top right;
}
.ajuda-menu[hidden]{display:none;}
.ajuda-cabeca{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 14px 10px 16px;}
.ajuda-titulo{margin:0; font-size:var(--fs-lg); font-weight:700; color:var(--text-strong);}
.ajuda-sub{margin:1px 0 0; font-size:var(--fs-sm); color:var(--text-2);}
.ajuda-fechar{
  width:30px; height:30px; padding:0; flex-shrink:0; border:0; background:transparent;
  color:var(--text-3); font-size:var(--fs-num); line-height:1; display:grid; place-items:center;
}
.ajuda-fechar:hover{background:var(--surface-2); color:var(--text-strong);}

.ajuda-busca{position:relative; margin:0 14px 8px;}
.ajuda-busca svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--text-3); pointer-events:none;
}
.ajuda-busca input{width:100%; height:40px; padding-left:34px; background:var(--surface-3);}
.ajuda-busca input:focus{background:var(--card);}

.ajuda-corpo{flex:1; min-height:0; overflow-y:auto; padding:0 8px 8px;}
.ajuda-secao{
  margin:12px 8px 4px; font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-3);
}
.ajuda-item{border-radius:var(--radius-sm);}
.ajuda-item.is-aberto{background:var(--surface-3);}
.ajuda-pergunta{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 8px; border:0; background:transparent; text-align:left;
  font-size:var(--fs-base); font-weight:500; color:var(--text); line-height:1.4;
}
.ajuda-pergunta:hover{background:var(--surface-3);}
.ajuda-item.is-aberto .ajuda-pergunta{font-weight:600; color:var(--text-strong);}
.ajuda-chevron{width:15px; height:15px; flex-shrink:0; color:var(--text-3); transition:transform .2s ease;}
.ajuda-item.is-aberto .ajuda-chevron{transform:rotate(180deg);}
.ajuda-resposta{padding:0 8px 12px; animation:fadeIn .2s ease both;}
.ajuda-resposta p{margin:0; font-size:var(--fs-base); color:var(--text-2); line-height:1.55;}
.ajuda-resposta b{color:var(--text-strong); font-weight:600;}
.ajuda-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:7px 12px;
  background:var(--card); border:1px solid var(--border);
  font-size:var(--fs-sm); font-weight:600; color:var(--primary);
}
.ajuda-link svg{width:13px; height:13px; transition:transform .15s ease;}
.ajuda-link:hover{background:var(--primary-soft); border-color:color-mix(in srgb, var(--primary) 35%, transparent);}
.ajuda-link:hover svg{transform:translateX(3px);}
.ajuda-vazio{padding:18px 10px 10px; text-align:center;}
.ajuda-vazio p{margin:0 0 4px; font-size:var(--fs-base); color:var(--text-2); line-height:1.5;}
.ajuda-vazio b{color:var(--text-strong);}

.ajuda-rodape{padding:10px 14px 12px; border-top:1px solid var(--border-soft); background:var(--surface-3);}
.ajuda-rodape p{margin:0 0 6px; font-size:var(--fs-sm); color:var(--text-2);}
.ajuda-suporte, .ajuda-email{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 4px; border:0; background:transparent;
  font-size:var(--fs-base); font-weight:600; color:var(--primary); text-align:left;
}
.ajuda-suporte svg, .ajuda-email svg{width:15px; height:15px; flex-shrink:0;}
.ajuda-suporte:hover, .ajuda-email:hover{background:transparent; color:var(--primary-hover);}
.ajuda-email span{word-break:break-all;}


/* celular: painel ocupa a largura da tela, entre a topbar e o menu de baixo */
@media (max-width:720px){
  .ajuda-menu{
    position:fixed; top:70px; left:8px; right:8px; bottom:calc(76px + env(safe-area-inset-bottom));
    width:auto; max-width:none; max-height:none;
  }
}

/* ==========================================================================
   Página FAQ (faq.html)
   Título e busca no centro; assuntos à esquerda e perguntas à direita.
   As cores vêm das variáveis do tema (claro e escuro). As letras são um
   pouco maiores que no resto do site: aqui a pessoa está lendo.
   ========================================================================== */
.em-breve-card[hidden], .faq[hidden]{display:none;}

/* cabeçalho centralizado só no FAQ */
body[data-pagina="faq"] .portal-header{justify-content:center; text-align:center; padding-top:34px; margin-bottom:24px;}
body[data-pagina="faq"] .portal-header h1{font-size:calc(var(--fs-display) * 1.2); margin-bottom:8px;}
body[data-pagina="faq"] .portal-sub{max-width:600px; margin:0 auto; font-size:var(--fs-lg);}

.faq{
  max-width:1040px; display:flex; flex-direction:column; gap:22px;
  animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;
}

.faq-busca{position:relative; width:100%; max-width:600px; margin:0 auto;}
.faq-busca svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--text-3); pointer-events:none;
}
.faq-busca input{
  width:100%; height:52px; padding-left:46px; font-size:var(--fs-lg);
  background:var(--card); border-color:var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .faq-busca input{border-color:var(--border);}

.faq-grade{display:grid; grid-template-columns:320px minmax(0,1fr); gap:24px; align-items:start;}

/* ---------- assuntos (esquerda) ---------- */
.faq-assuntos{display:flex; flex-direction:column; gap:10px; position:sticky; top:16px;}
.faq-assunto{
  display:flex; align-items:center; gap:10px; width:100%; min-height:58px; padding:0 14px 0 20px;
  text-align:left; font-size:var(--fs-lg); font-weight:500; color:var(--text-2);
  background:color-mix(in srgb, var(--card) 55%, transparent);
  border:1px solid var(--card-border); border-radius:var(--radius);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
:root[data-theme="dark"] .faq-assunto{border-color:var(--border-soft);}
.faq-assunto span{flex:1; min-width:0;}
.faq-assunto b{
  font-size:var(--fs-sm); font-weight:600; color:var(--text-3);
  background:var(--surface-2); border-radius:var(--radius-pill); padding:2px 9px;
  font-variant-numeric:tabular-nums;
}
.faq-assunto-seta{width:16px; height:16px; flex-shrink:0; color:var(--text-3); transition:transform .15s ease;}
.faq-assunto:hover{background:var(--card); color:var(--text-strong);}
.faq-assunto:hover .faq-assunto-seta{transform:translateX(2px);}
.faq-assunto.is-ativo{
  background:var(--card); color:var(--text-strong); font-weight:600;
  box-shadow:var(--shadow-card);
}
.faq-assunto.is-ativo b{background:var(--primary-soft); color:var(--primary);}
.faq-assunto.is-ativo .faq-assunto-seta{color:var(--primary);}
:root[data-theme="dark"] .faq-assunto.is-ativo{border-color:var(--border);}


/* ---------- perguntas (direita) ---------- */
.faq-perguntas{display:flex; flex-direction:column; gap:10px; min-width:0;}
.faq-item{
  background:color-mix(in srgb, var(--card) 55%, transparent);
  border:1px solid var(--border-soft); border-radius:var(--radius);
  transition:background .15s ease, box-shadow .15s ease;
}
.faq-item:hover{background:var(--card);}
.faq-item.is-aberto{background:var(--card); border-color:var(--card-border); box-shadow:var(--shadow-card);}
:root[data-theme="dark"] .faq-item.is-aberto{border-color:var(--border);}
.faq-pergunta{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:17px 20px; border:0; background:transparent; border-radius:var(--radius); text-align:left;
  font-size:var(--fs-lg); font-weight:500; color:var(--text); line-height:1.45;
}
.faq-pergunta:hover{background:transparent;}
.faq-item.is-aberto .faq-pergunta{font-weight:600; color:var(--text-strong); padding-bottom:6px;}
.faq-sinal{width:18px; height:18px; flex-shrink:0; color:var(--text-2);}
.faq-item.is-aberto .faq-sinal{color:var(--text-strong);}
.faq-resposta{padding:0 20px 18px; animation:fadeIn .2s ease both;}
.faq-resposta p{margin:0; font-size:var(--fs-md); line-height:1.65; color:var(--text-2);}
.faq-resposta b{color:var(--text-strong); font-weight:600;}
.faq-contagem{margin:0 0 2px 4px; font-size:var(--fs-base); font-weight:600; color:var(--text-3);}
.faq-vazio{
  padding:28px 18px; text-align:center; background:var(--card);
  border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow-card);
}
.faq-vazio p{margin:0 0 4px; font-size:var(--fs-md); color:var(--text-2);}
.faq-vazio b{color:var(--text-strong);}

/* ---------- não encontrou? ---------- */
.faq-suporte{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px; padding:20px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .faq-suporte{border-color:var(--border);}
.faq-suporte-icone{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary);
}
.faq-suporte-icone svg{width:18px; height:18px;}
.faq-suporte-titulo{margin:0; font-size:var(--fs-lg); font-weight:700; color:var(--text-strong);}
.faq-suporte-texto{margin:2px 0 2px; font-size:var(--fs-md); color:var(--text-2);}
.faq-suporte .ajuda-email{padding:4px 0; font-size:var(--fs-md);}
.faq-resposta .ajuda-link{font-size:var(--fs-base); padding:8px 14px;}

/* tablet e celular: os assuntos viram uma faixa de botões em cima das perguntas */
@media (max-width:900px){
  .faq-grade{grid-template-columns:minmax(0,1fr); gap:14px;}
  .faq-assuntos{position:static; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px;}
  .faq-assunto{width:auto; min-height:42px; flex-shrink:0; padding:0 14px; font-size:var(--fs-md); border-radius:var(--radius-pill); white-space:nowrap;}
  .faq-assunto-seta{display:none;}
  body[data-pagina="faq"] .portal-header h1{font-size:var(--fs-display);}
  body[data-pagina="faq"] .portal-sub{font-size:var(--fs-md);}
  .faq-pergunta{font-size:var(--fs-md); padding:15px 16px;}
  .faq-suporte{justify-content:flex-start; align-items:flex-start;}
}


/* ==========================================================================
   Página "Comece por aqui" (comece.html) · guia do processo
   Usa as variáveis do tema (claro/escuro). Cabeçalho centralizado como o FAQ.
   ========================================================================== */
.guia[hidden]{display:none;}
body[data-pagina="comece"] .portal-header{justify-content:center; text-align:center; padding-top:34px; margin-bottom:24px;}
body[data-pagina="comece"] .portal-header h1{font-size:calc(var(--fs-display) * 1.2); margin-bottom:8px;}
body[data-pagina="comece"] .portal-sub{max-width:620px; margin:0 auto; font-size:var(--fs-lg);}

.guia{
  max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:26px;
  animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;
}

/* ---- intro ---- */
.guia-intro{text-align:center; max-width:720px; margin:0 auto;}
.guia-intro p{margin:0 0 10px; font-size:var(--fs-md); line-height:1.65; color:var(--text-2);}
.guia-intro p:last-child{margin-bottom:0;}
.guia-intro b{color:var(--text-strong); font-weight:600;}

/* ---- destaque: de quem é a responsabilidade ---- */
.guia-destaque{
  display:flex; align-items:center; gap:18px; padding:22px 24px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .guia-destaque{border-color:var(--border);}
.guia-destaque-icone{
  flex-shrink:0; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary);
}
.guia-destaque-icone svg{width:24px; height:24px;}
.guia-destaque h2{margin:0 0 5px; font-size:var(--fs-lg); font-weight:700; color:var(--text-strong); letter-spacing:-.01em;}
.guia-destaque p{margin:0; font-size:var(--fs-md); line-height:1.6; color:var(--text-2);}

/* ---- blocos (título + conteúdo) ---- */
.guia-bloco-head{margin:0 0 14px 2px;}
.guia-bloco-titulo{margin:0 0 2px; font-size:var(--fs-num); font-weight:700; letter-spacing:-.01em; color:var(--text-strong);}
.guia-bloco-sub{margin:0; font-size:var(--fs-md); color:var(--text-2);}

/* ---- passos (timeline) ---- */
.guia-passos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.guia-passo{
  position:relative; padding:18px 20px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
/* número + ícone + texto lado a lado; o painel (quando aberto) fica embaixo */
.guia-passo-linha{display:flex; align-items:flex-start; gap:16px;}
.guia-passo-texto{flex:1; min-width:0;}
:root[data-theme="dark"] .guia-passo{border-color:var(--border);}
/* linha que liga um passo ao próximo */
.guia-passo:not(:last-child)::after{
  content:""; position:absolute; left:40px; bottom:-12px; width:2px; height:12px; background:var(--border);
}
.guia-passo-num{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary); color:var(--on-primary); font-size:var(--fs-sm); font-weight:700;
}
.guia-passo-icone{
  flex-shrink:0; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-2);
}
.guia-passo-icone svg{width:20px; height:20px;}
.guia-passo-texto h3{margin:0 0 3px; font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.guia-passo-texto p{margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.guia-passo-texto b{color:var(--text-strong); font-weight:600;}
/* passo de conferência em destaque: borda vermelha fina na lateral + número vermelho */
.guia-passo.is-destaque{border-color:color-mix(in srgb, var(--primary) 45%, var(--card-border)); box-shadow:var(--shadow-card), inset 3px 0 0 var(--primary);}
:root[data-theme="dark"] .guia-passo.is-destaque{border-color:color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow:var(--shadow-card), inset 3px 0 0 var(--primary);}
.guia-passo.is-destaque .guia-passo-icone{background:var(--primary-soft); color:var(--primary);}
:root[data-theme="dark"] .guia-passo.is-destaque .guia-passo-icone{color:#ff6b73;}

/* ---- conferência (checklist) ---- */
.guia-conferir{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.guia-conferir-item{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .guia-conferir-item{border-color:var(--border);}
.guia-conferir-icone{
  flex-shrink:0; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--success-soft); color:var(--success-accent);
}
.guia-conferir-icone svg{width:20px; height:20px;}
.guia-conferir-item h3{margin:0 0 3px; font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.guia-conferir-item p{margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.guia-conferir-item b{color:var(--text-strong); font-weight:600;}

/* "Ver os CNPJs da Thermojet": details nativo (abre/fecha sem JS) dentro do
   item de conferência "Emitida para a Thermojet" */
.guia-cnpjs{margin-top:12px;}
.guia-cnpjs summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card);
  font-size:var(--fs-base); font-weight:600; color:var(--text-strong);
  transition:border-color .15s ease, background .15s ease;
}
:root[data-theme="dark"] .guia-cnpjs summary{background:var(--surface-2);}
.guia-cnpjs summary::-webkit-details-marker{display:none;}
.guia-cnpjs summary:hover{border-color:var(--border-strong);}
.guia-cnpjs summary svg{width:16px; height:16px; color:var(--text-2); flex-shrink:0;}
.guia-cnpjs-chevron{margin-left:2px; transition:transform .2s ease;}
.guia-cnpjs[open] .guia-cnpjs-chevron{transform:rotate(180deg);}
.guia-cnpjs-razao{margin:12px 0 8px; font-size:var(--fs-base); color:var(--text-2);}
.guia-cnpjs-razao b{color:var(--text-strong); font-weight:700; letter-spacing:.01em;}
.guia-cnpjs-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.guia-cnpjs-lista li{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
  padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--surface-3); border:1px solid var(--border-soft);
}
:root[data-theme="dark"] .guia-cnpjs-lista li{background:var(--surface-2); border-color:var(--border);}
.guia-cnpjs-num{font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums; letter-spacing:.01em;}
.guia-cnpjs-local{font-size:var(--fs-sm); color:var(--text-2);}

/* ---- aviso "e se algo estiver errado" ---- */
.guia-aviso{
  display:flex; align-items:flex-start; gap:14px; padding:18px 20px;
  background:var(--warning-soft); border:1px solid color-mix(in srgb, var(--warning-accent) 35%, transparent);
  border-radius:var(--radius-card);
}
.guia-aviso-icone{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); color:var(--warning-accent);
}
.guia-aviso-icone svg{width:20px; height:20px;}
.guia-aviso-texto h3{margin:0 0 6px; font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.guia-aviso-texto p{margin:0 0 8px; font-size:var(--fs-base); line-height:1.6; color:var(--text-2);}
.guia-aviso-texto p:last-child{margin-bottom:0;}
.guia-aviso-texto b{color:var(--text-strong); font-weight:600;}

/* ---- como entregar: sede x obra (2 cards) ---- */
.guia-entrega{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-bottom:14px;}
.guia-entrega-card{
  padding:18px 20px; background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .guia-entrega-card{border-color:var(--border);}
.guia-entrega-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.guia-entrega-icone{
  flex-shrink:0; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--primary);
}
:root[data-theme="dark"] .guia-entrega-icone{color:#ff6b73;}
.guia-entrega-icone svg{width:20px; height:20px;}
.guia-entrega-head h3{margin:0; font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.guia-entrega-lista{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px;}
.guia-entrega-lista li{font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.guia-entrega-lista b{color:var(--text-strong); font-weight:600;}
.guia-entrega-lista a{color:var(--primary); font-weight:600; text-decoration:none;}
.guia-entrega-lista a:hover{text-decoration:underline;}
:root[data-theme="dark"] .guia-entrega-lista a{color:#ff6b73;}

/* ---- protocolo + botão de download ---- */
.guia-protocolo{
  display:flex; align-items:flex-start; gap:16px; padding:20px 22px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .guia-protocolo{border-color:var(--border);}
.guia-protocolo-icone{
  flex-shrink:0; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--success-soft); color:var(--success-accent);
}
.guia-protocolo-icone svg{width:22px; height:22px;}
.guia-protocolo-texto{flex:1; min-width:0;}
.guia-protocolo-texto h3{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 6px; font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.guia-protocolo-texto p{margin:0 0 14px; font-size:var(--fs-base); line-height:1.6; color:var(--text-2);}
.guia-protocolo-texto b{color:var(--text-strong); font-weight:600;}
.guia-tag{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--text-2);
}
.guia-protocolo-btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:var(--radius-sm);
  background:var(--primary); color:var(--on-primary); font-size:var(--fs-base); font-weight:700; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.guia-protocolo-btn svg{width:17px; height:17px;}
.guia-protocolo-btn:hover{background:var(--primary-hover);}

@media (max-width:720px){
  .guia-entrega{grid-template-columns:1fr;}
  .guia-protocolo{flex-direction:column;}
}

/* ---- regras de ouro ---- */
.guia-regras{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.guia-regra{
  padding:20px; text-align:center;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .guia-regra{border-color:var(--border);}
.guia-regra-icone{
  width:46px; height:46px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center;
}
.guia-regra-icone svg{width:22px; height:22px;}
.guia-regra-valor{display:block; font-size:var(--fs-num); font-weight:800; letter-spacing:-.02em; color:var(--text-strong);}
.guia-regra-texto{margin:6px 0 0; font-size:var(--fs-base); line-height:1.5; color:var(--text-2);}
/* cada regra com sua cor */
.regra-prazo    .guia-regra-icone{background:var(--danger-soft); color:var(--danger-accent);}
.regra-pagto    .guia-regra-icone{background:var(--warning-soft); color:var(--warning-accent);}
.regra-material .guia-regra-icone{background:var(--success-soft); color:var(--success-accent);}

/* ---- primeiros passos (ações clicáveis) ---- */
.guia-acoes{display:flex; flex-direction:column; gap:10px;}
.guia-acao{
  display:flex; align-items:center; gap:14px; padding:16px 18px; text-decoration:none;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); transition:border-color .15s ease, transform .15s ease;
}
:root[data-theme="dark"] .guia-acao{border-color:var(--border);}
.guia-acao:hover{border-color:var(--border-strong);}
.guia-acao-icone{
  flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--primary);
}
.guia-acao-icone svg{width:20px; height:20px;}
.guia-acao-texto{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.guia-acao-texto b{font-size:var(--fs-md); font-weight:700; color:var(--text-strong);}
.guia-acao-texto small{font-size:var(--fs-base); line-height:1.5; color:var(--text-2);}
.guia-acao > svg:last-child{flex-shrink:0; width:18px; height:18px; color:var(--text-3); transition:transform .15s ease;}
.guia-acao:hover > svg:last-child{transform:translateX(3px); color:var(--primary);}

/* ---- celular ---- */
@media (max-width:720px){
  body[data-pagina="comece"] .portal-header h1{font-size:var(--fs-display);}
  body[data-pagina="comece"] .portal-sub{font-size:var(--fs-md);}
  .guia-regras{grid-template-columns:1fr;}
  .guia-destaque{flex-direction:column; text-align:center; gap:12px;}
}

/* ---- Comece por aqui: interatividade ----
   Seletor da empresa da nota (Thermojet x Aestus/Heat Up) e os botões dos
   passos que abrem os painéis "Como conferir" e "Como entregar". */
.guia-empresa{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 14px 2px;
}
.guia-empresa-rotulo{font-size:var(--fs-md); font-weight:600; color:var(--text-strong);}
.guia-empresa-opcoes{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.guia-empresa-btn{
  padding:8px 16px; border:0; border-radius:999px; background:transparent;
  font-size:var(--fs-base); font-weight:600; color:var(--text-2);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.guia-empresa-btn:hover{color:var(--text-strong);}
.guia-empresa-btn.is-ativo{background:var(--card); color:var(--text-strong); box-shadow:var(--shadow-sm);}
:root[data-theme="dark"] .guia-empresa-btn.is-ativo{background:var(--surface-3); color:#fff;}

/* aviso que aparece quando a nota é da Aestus ou da Heat Up */
.guia-nota-grupo{
  display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:12px 16px;
  background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--radius);
  animation:fadeSlideUp .25s ease both;
}
.guia-nota-grupo > span{
  flex-shrink:0; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--card); color:var(--text-2);
}
.guia-nota-grupo > span svg{width:18px; height:18px;}
.guia-nota-grupo p{margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.guia-nota-grupo b{color:var(--text-strong); font-weight:600;}

/* botão do passo que abre o painel */
.guia-passo-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 14px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card);
  font-size:var(--fs-base); font-weight:600; color:var(--primary);
  transition:background .15s ease, border-color .15s ease;
}
.guia-passo-btn:hover{background:var(--primary-soft); border-color:color-mix(in srgb, var(--primary) 40%, transparent);}
:root[data-theme="dark"] .guia-passo-btn{background:var(--surface-2); color:#ff6b73;}
.guia-passo-btn-seta{width:15px; height:15px; transition:transform .2s ease;}
.guia-passo.is-aberto .guia-passo-btn-seta{transform:rotate(180deg);}

/* painel aberto dentro do passo */
.guia-painel{
  margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--border-soft);
  animation:fadeSlideUp .25s ease both;
}
.guia-painel .guia-conferir-item,
.guia-painel .guia-entrega-card,
.guia-painel .guia-protocolo{
  background:var(--surface-3); border-color:var(--border-soft); box-shadow:none;
}
:root[data-theme="dark"] .guia-painel .guia-conferir-item,
:root[data-theme="dark"] .guia-painel .guia-entrega-card,
:root[data-theme="dark"] .guia-painel .guia-protocolo{background:var(--surface-2); border-color:var(--border);}
.guia-painel .guia-protocolo{margin-top:0;}

@media (max-width:720px){
  .guia-empresa{flex-direction:column; align-items:flex-start;}
  .guia-painel .guia-entrega{grid-template-columns:1fr;}
}

/* ==========================================================================
   Minhas pendências · painel pessoal (no lugar dos cards gerais)
   Os cards também são filtros rápidos da tabela.
   ========================================================================== */
.minhas-painel{display:none;}
body.modo-minhas .portal-stats{display:none;}
body.modo-minhas .minhas-painel{display:flex; flex-direction:column; gap:12px; margin-bottom:20px;}
body.modo-minhas .minhas-painel:empty{display:none;}

.mp-grade{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;}
.mp-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:18px 18px 16px; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); font-family:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;
}
:root[data-theme="dark"] .mp-card{border-color:var(--border);}
.mp-card:hover:not(:disabled){border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); background:var(--card);}
.mp-card:disabled{cursor:default;}
.mp-card.is-skel{cursor:default; gap:10px;}
.mp-icone{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:8px;
  background:var(--surface-2); color:var(--text-2);
}
.mp-icone svg{width:19px; height:19px;}
.mp-rotulo{font-size:var(--fs-base); font-weight:600; color:var(--text-2);}
.mp-valor{font-size:var(--fs-display); font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.mp-sub{font-size:var(--fs-sm); color:var(--text-3); line-height:1.4;}

/* cor de cada card (só quando tem nota; zerado fica neutro e apagado) */
.mp-card.is-hoje:not(.is-zero) .mp-icone{background:var(--warning-soft); color:var(--warning-accent);}
.mp-card.is-hoje:not(.is-zero) .mp-valor{color:var(--warning);}
.mp-card.is-atraso:not(.is-zero) .mp-icone{background:var(--danger-soft); color:var(--danger-accent);}
.mp-card.is-atraso:not(.is-zero) .mp-valor{color:var(--danger);}
.mp-card.is-paradas:not(.is-zero) .mp-icone{background:var(--primary-soft); color:var(--primary);}
:root[data-theme="dark"] .mp-card.is-hoje:not(.is-zero) .mp-valor{color:var(--warning-accent);}
:root[data-theme="dark"] .mp-card.is-paradas:not(.is-zero) .mp-icone{color:#ff6b73;}
.mp-card.is-zero .mp-valor{color:var(--text-3);}

/* card escolhido como filtro */
.mp-card.is-ativo{border-color:var(--text-strong); box-shadow:var(--shadow-card), inset 0 0 0 1px var(--text-strong);}
.mp-card.is-ativo::after{
  content:"Filtrando"; position:absolute; top:14px; right:14px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; background:var(--text-strong); color:var(--card);
}
/* "Com você" ativo = sem filtro: só o contorno, sem a etiqueta */
.mp-card.is-neutro.is-ativo{border-color:var(--card-border); box-shadow:var(--shadow-card);}
.mp-card.is-neutro.is-ativo::after{display:none;}
:root[data-theme="dark"] .mp-card.is-neutro.is-ativo{border-color:var(--border);}

/* faixa com o próximo passo */
.mp-faixa{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:12px 16px;
  background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius);
}
.mp-faixa-icone{
  flex-shrink:0; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--card); color:var(--text-2);
}
.mp-faixa-icone svg{width:17px; height:17px;}
.mp-faixa p{flex:1 1 320px; margin:0; font-size:var(--fs-base); line-height:1.5; color:var(--text-2);}
.mp-faixa p b{color:var(--text-strong); font-weight:600;}
.mp-faixa-link{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:var(--fs-base); font-weight:600; color:var(--primary); text-decoration:none;
}
.mp-faixa-link svg{width:14px; height:14px; transition:transform .15s ease;}
.mp-faixa-link:hover svg{transform:translateX(3px);}
:root[data-theme="dark"] .mp-faixa-link{color:#ff6b73;}
.mp-faixa-ok{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:var(--fs-sm); font-weight:600; padding:5px 10px; border-radius:999px;
  background:var(--success-soft); color:var(--success);
}
.mp-faixa-ok svg{width:14px; height:14px;}

/* nada com a pessoa */
.mp-vazio{
  display:flex; align-items:center; gap:16px; padding:22px 24px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;
}
:root[data-theme="dark"] .mp-vazio{border-color:var(--border);}
.mp-vazio-icone{
  flex-shrink:0; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--success-soft); color:var(--success-accent);
}
.mp-vazio-icone svg{width:24px; height:24px;}
.mp-vazio-texto{flex:1; min-width:0;}
.mp-vazio-texto h2{margin:0 0 4px; font-size:var(--fs-lg); font-weight:700; color:var(--text-strong);}
.mp-vazio-texto p{margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.mp-vazio-texto b{color:var(--text-strong); font-weight:600;}
.mp-vazio-btn{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0; padding:10px 16px;
  font-weight:600; color:var(--text-strong);
}
.mp-vazio-btn svg{width:14px; height:14px;}

@media (max-width:1180px){
  .mp-grade{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:720px){
  .mp-grade{gap:10px;}
  .mp-card{padding:14px;}
  .mp-valor{font-size:var(--fs-num);}
  .mp-vazio{flex-direction:column; align-items:flex-start;}
}

/* ==========================================================================
   Página "Checklist da nota" (checklist.html) · checklist interativo
   ========================================================================== */
body[data-pagina="checklist"] .portal-header{justify-content:center; text-align:center; padding-top:34px; margin-bottom:24px;}
body[data-pagina="checklist"] .portal-header h1{font-size:calc(var(--fs-display) * 1.2); margin-bottom:8px;}
body[data-pagina="checklist"] .portal-sub{max-width:620px; margin:0 auto; font-size:var(--fs-lg);}

.ck{max-width:1080px; margin:0 auto; animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;}
.ck-grade{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start;}
.ck-principal{display:flex; flex-direction:column; gap:16px; min-width:0;}
#ck-grupos{display:flex; flex-direction:column; gap:16px;}

.ck-bloco{
  padding:20px 22px; background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .ck-bloco{border-color:var(--border);}
.ck-bloco-titulo{margin:0 0 2px; font-size:var(--fs-lg); font-weight:700; color:var(--text-strong); letter-spacing:-.01em;}
.ck-bloco-sub{margin:0 0 16px; font-size:var(--fs-base); color:var(--text-2);}

/* ---- perguntas ---- */
.ck-perguntas{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 18px;}
.ck-pergunta{display:flex; flex-direction:column; gap:7px; min-width:0;}
.ck-pergunta-titulo{font-size:var(--fs-base); font-weight:600; color:var(--text-strong);}
.ck-opcoes{
  display:flex; gap:4px; padding:4px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.ck-opcao{
  flex:1; min-width:0; padding:8px 10px; border:0; border-radius:8px; background:transparent;
  font-size:var(--fs-base); font-weight:600; color:var(--text-2); white-space:nowrap;
}
.ck-opcao:hover{background:transparent; color:var(--text-strong);}
.ck-opcao.is-ativo, .ck-opcao.is-ativo:hover{background:var(--card); color:var(--text-strong); box-shadow:var(--shadow-sm);}
:root[data-theme="dark"] .ck-opcao.is-ativo{background:var(--surface-3); color:#fff;}

/* ---- grupos e itens ---- */
.ck-grupo-titulo{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.ck-grupo-icone{
  flex-shrink:0; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-2);
}
.ck-grupo-icone svg{width:17px; height:17px;}
.ck-grupo-conta{
  margin-left:auto; font-size:var(--fs-sm); font-weight:600; color:var(--text-3);
  padding:3px 9px; border-radius:999px; background:var(--surface-2); font-variant-numeric:tabular-nums;
}
.ck-itens{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.ck-item{
  display:flex; align-items:flex-start; gap:12px; width:100%; padding:12px 14px; text-align:left;
  background:var(--surface-3); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  font-size:var(--fs-md); font-weight:400; line-height:1.5; color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.ck-item:hover{background:var(--card); border-color:var(--border);}
:root[data-theme="dark"] .ck-item{background:var(--surface-2);}
:root[data-theme="dark"] .ck-item:hover{background:var(--surface-3);}
.ck-caixa{
  flex-shrink:0; width:22px; height:22px; margin-top:1px; border-radius:7px; display:grid; place-items:center;
  border:2px solid var(--border); background:var(--card); color:transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ck-caixa svg{width:14px; height:14px; stroke-width:3;}
.ck-num{flex-shrink:0; min-width:18px; margin-top:1px; font-size:var(--fs-sm); font-weight:700; color:var(--text-3); font-variant-numeric:tabular-nums;}
.ck-texto{flex:1; min-width:0;}
.ck-texto b{color:var(--text-strong); font-weight:600;}
/* marcado */
.ck-item.is-ok{background:var(--success-soft); border-color:color-mix(in srgb, var(--success-accent) 35%, transparent);}
.ck-item.is-ok .ck-caixa{background:var(--success-accent); border-color:var(--success-accent); color:#fff;}
.ck-item.is-ok .ck-texto{color:var(--text-2);}
:root[data-theme="dark"] .ck-item.is-ok{background:var(--success-soft);}
/* faltando, depois de "Já posso entregar?" */
.ck-item.is-falta{border-color:color-mix(in srgb, var(--danger-accent) 55%, transparent); box-shadow:inset 3px 0 0 var(--danger-accent);}
.ck-item.is-falta .ck-caixa{border-color:var(--danger-accent);}

/* ---- resumo (direita) ---- */
.ck-resumo{position:sticky; top:16px;}
.ck-resumo-card{
  display:flex; flex-direction:column; gap:12px; padding:20px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .ck-resumo-card{border-color:var(--border);}
.ck-resumo-card.is-pronto{border-color:color-mix(in srgb, var(--success-accent) 45%, var(--card-border));}
.ck-resumo-rotulo{margin:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);}
.ck-progresso{display:flex; align-items:baseline; justify-content:space-between;}
.ck-progresso strong{font-size:var(--fs-num); font-weight:800; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.ck-progresso span{font-size:var(--fs-base); font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums;}
.ck-barra{display:block; height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.ck-barra > span{display:block; height:100%; border-radius:inherit; background:var(--success-accent); transition:width .3s ease;}
.ck-dica{margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.ck-dica b{color:var(--text-strong);}

.ck-falta{padding:12px 14px; border-radius:var(--radius-sm); background:var(--danger-soft); border:1px solid color-mix(in srgb, var(--danger-accent) 30%, transparent);}
.ck-falta-titulo{display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:var(--fs-base); font-weight:700; color:var(--danger);}
.ck-falta-titulo svg{width:16px; height:16px; flex-shrink:0;}
.ck-falta ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;}
.ck-falta li{font-size:var(--fs-sm); color:var(--text-2);}
.ck-falta li .ck-ir{display:block;}
.ck-ir{
  padding:0; border:0; background:none; text-align:left; font:inherit; font-size:var(--fs-sm);
  line-height:1.45; color:var(--text); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--danger-accent) 50%, transparent);
  text-underline-offset:2px;
}
.ck-ir:hover{background:none; color:var(--text-strong);}

.ck-pronto{text-align:center; padding:6px 2px 2px;}
.ck-pronto-icone{width:52px; height:52px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center; background:var(--success-soft); color:var(--success-accent); animation:festaPop .55s cubic-bezier(.34,1.56,.64,1) both;}
.ck-pronto-icone svg{width:26px; height:26px;}
.ck-pronto h3{margin:0 0 6px; font-size:var(--fs-lg); font-weight:700; color:var(--success);}
.ck-pronto p{margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.ck-pronto p b{color:var(--text-strong); font-weight:600;}
.ck-acao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; width:100%;
  padding:11px 14px; border-radius:var(--radius-sm); background:var(--primary); color:var(--on-primary);
  font-size:var(--fs-base); font-weight:700; text-decoration:none;
}
.ck-acao svg{width:16px; height:16px;}
.ck-acao:hover{background:var(--primary-hover);}

.ck-verificar{
  width:100%; padding:11px 14px; border:0; border-radius:var(--radius-sm);
  background:var(--primary); color:var(--on-primary); font-size:var(--fs-base); font-weight:700;
}
.ck-verificar:hover{background:var(--primary-hover);}
.ck-link, .ck-recomecar{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:9px 12px; border-radius:var(--radius-sm); font-size:var(--fs-base); font-weight:600;
}
.ck-link{border:1px solid var(--border); background:var(--card); color:var(--text-strong); text-decoration:none;}
.ck-link:hover{background:var(--surface-2);}
.ck-recomecar{border:0; background:transparent; color:var(--text-2);}
.ck-recomecar:hover{background:var(--surface-2); color:var(--text-strong);}
.ck-link svg, .ck-recomecar svg{width:15px; height:15px;}

@media (max-width:900px){
  .ck-grade{grid-template-columns:minmax(0,1fr);}
  .ck-resumo{position:static;}
}
@media (max-width:720px){
  body[data-pagina="checklist"] .portal-header h1{font-size:var(--fs-display);}
  body[data-pagina="checklist"] .portal-sub{font-size:var(--fs-md);}
  .ck-perguntas{grid-template-columns:minmax(0,1fr);}
  .ck-bloco{padding:16px;}
}

/* ==========================================================================
   Página "Fluxograma do processo" (fluxograma.html)
   Cada etapa usa a cor de quem faz (--q): fornecedor, portal, você e
   Financeiro-Fiscal. Funciona nos temas claro e escuro.
   ========================================================================== */
body[data-pagina="fluxograma"] .portal-header{justify-content:center; text-align:center; padding-top:34px; margin-bottom:24px;}
body[data-pagina="fluxograma"] .portal-header h1{font-size:calc(var(--fs-display) * 1.2); margin-bottom:8px;}
body[data-pagina="fluxograma"] .portal-sub{max-width:640px; margin:0 auto; font-size:var(--fs-lg);}

.fx{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:20px; animation:fadeSlideUp .42s cubic-bezier(.22,.68,.36,1) both;}
.fx-q-fornecedor{--q:var(--brand-cyan);}
.fx-q-portal{--q:#7c8794;}
.fx-q-voce{--q:var(--primary);}
.fx-q-fiscal{--q:var(--success-accent);}
:root[data-theme="dark"] .fx-q-voce{--q:#ff6b73;}

.fx-bloco{
  padding:22px 24px; background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .fx-bloco{border-color:var(--border);}
.fx-bloco-head{display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; margin-bottom:16px;}
.fx-titulo{margin:0 0 2px; font-size:var(--fs-num); font-weight:700; letter-spacing:-.01em; color:var(--text-strong);}
.fx-sub{margin:0; font-size:var(--fs-md); color:var(--text-2);}

/* ---- seletor da empresa ---- */
.fx-empresa{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--fs-base); font-weight:600; color:var(--text-strong);}
.fx-opcoes{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border-soft);}
.fx-opcao{padding:7px 14px; border:0; border-radius:999px; background:transparent; font-size:var(--fs-base); font-weight:600; color:var(--text-2);}
.fx-opcao:hover{background:transparent; color:var(--text-strong);}
.fx-opcao.is-ativo, .fx-opcao.is-ativo:hover{background:var(--card); color:var(--text-strong); box-shadow:var(--shadow-sm);}
:root[data-theme="dark"] .fx-opcao.is-ativo{background:var(--surface-3); color:#fff;}

/* ---- legenda ---- */
.fx-legenda{display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--border-soft);}
.fx-leg{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:600; color:var(--text-2);}
.fx-leg i{width:10px; height:10px; border-radius:3px; background:var(--q);}

/* ---- fluxo (esquerda) + detalhe (direita) ---- */
.fx-grade{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start;}

/* quadro liso onde o fluxo é desenhado */
.fx-canvas{
  --fx-fundo:var(--surface-3); --fx-card:var(--card); --fx-linha:#cfd7e0;
  container-type:inline-size;
  padding:28px 24px 30px; border-radius:var(--radius); border:1px solid var(--border-soft);
  background-color:var(--fx-fundo);
}
:root[data-theme="dark"] .fx-canvas{--fx-fundo:#1a1a1a; --fx-card:var(--surface-2); --fx-linha:#3a3836; border-color:var(--border);}
/* trilha: 270px de etapas + espaço à direita para o desvio "Corrigir" */
.fx-palco{width:478px; margin:0 auto;}
.fx-fluxo{
  position:relative; list-style:none; margin:0; padding:0; width:270px;
  display:flex; flex-direction:column; align-items:stretch; gap:24px;
}
/* linha vertical que liga tudo, passa por trás das etapas */
.fx-fluxo::before{content:""; position:absolute; left:50%; top:14px; bottom:14px; width:1.5px; margin-left:-.75px; background:var(--fx-linha);}
.fx-fluxo > li{position:relative;}

/* início e fim */
.fx-ponta{display:flex; justify-content:center;}
.fx-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; border:0;
  font-size:var(--fs-base); font-weight:700; line-height:1.2;
}
.fx-pill.is-inicio{background:var(--text-strong); color:var(--card); box-shadow:var(--shadow-sm);}
.fx-pill.is-inicio svg{width:11px; height:11px;}
.fx-pill.is-fim{background:var(--success-accent); color:#fff; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
.fx-pill.is-fim i{width:9px; height:9px; border-radius:50%; background:#fff;}
.fx-pill.is-fim:hover{background:var(--success-accent); transform:translateY(-1px);}
.fx-pill.is-fim.is-ativo{box-shadow:0 0 0 3px var(--fx-fundo), 0 0 0 5px var(--success-accent);}
:root[data-theme="dark"] .fx-pill.is-fim{color:#05241a;}
:root[data-theme="dark"] .fx-pill.is-fim i{background:#05241a;}

/* etapa */
.fx-etapa{
  position:relative; display:flex; align-items:flex-start; gap:12px; width:100%; padding:14px 16px 14px 14px; text-align:left;
  background:var(--fx-card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
:root[data-theme="dark"] .fx-etapa{border-color:var(--fx-linha); box-shadow:none;}
.fx-etapa:hover{background:var(--fx-card); border-color:color-mix(in srgb, var(--q) 45%, var(--border)); transform:translateY(-1px);}
.fx-etapa.is-ativo, .fx-etapa.is-ativo:hover{
  background:var(--fx-card); border-color:var(--q);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--q) 35%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--q) 55%, transparent);
}
.fx-etapa-num{
  position:absolute; top:-9px; left:-9px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--q); color:#fff; font-size:var(--fs-xs); font-weight:800; box-shadow:0 0 0 3px var(--fx-fundo);
}
:root[data-theme="dark"] .fx-etapa-num{color:#0f1215;}
.fx-etapa-icone{
  flex-shrink:0; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--q) 13%, transparent); color:var(--q);
}
.fx-etapa-icone svg{width:18px; height:18px;}
.fx-etapa-texto{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding-top:1px;}
.fx-etapa-texto b{font-size:var(--fs-md); font-weight:700; line-height:1.35; color:var(--text-strong);}
.fx-etapa-texto small{font-size:var(--fs-sm); color:var(--text-3);}
.fx-prazo{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:3px 9px; border-radius:999px;
  font-size:var(--fs-xs); font-weight:700; white-space:nowrap;
  background:var(--warning-soft); color:var(--warning);
}
:root[data-theme="dark"] .fx-prazo{color:var(--warning-accent);}
.fx-prazo svg{width:12px; height:12px;}

/* ---- decisão "A nota está correta?" ---- */
.fx-decisao{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:-14px;}
.fx-pergunta{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
  border:1.5px solid var(--warning-accent); background:color-mix(in srgb, var(--warning-soft) 92%, var(--fx-fundo));
  font-size:var(--fs-base); font-weight:700; color:var(--warning);
}
:root[data-theme="dark"] .fx-pergunta{color:var(--warning-accent); background:#2a2212;}
.fx-pergunta svg{width:15px; height:15px;}
.fx-pergunta:hover{background:var(--warning-soft); transform:translateY(-1px);}
.fx-pergunta.is-ativo{box-shadow:0 0 0 3px color-mix(in srgb, var(--warning-accent) 25%, transparent);}
.fx-rot{
  position:relative; z-index:1; padding:2px 8px; border-radius:6px; border:1px solid var(--border);
  background:var(--fx-fundo); font-size:var(--fs-xs); font-weight:700; color:var(--text-2);
}
.fx-rot.is-nao{position:absolute; top:-26px; right:-28px; color:var(--danger-accent); cursor:pointer;}
.fx-rot.is-nao:hover{background:var(--danger-soft); border-color:var(--danger-accent);}
/* ligação horizontal até o desvio */
.fx-ligacao{position:absolute; top:19px; left:50%; right:-12px; height:1.5px; background:var(--fx-linha);}
.fx-desvio{
  position:absolute; top:19px; left:calc(100% + 12px); width:206px; transform:translateY(-50%);
  align-items:center;
}
.fx-desvio:hover{transform:translateY(calc(-50% - 1px));}
.fx-desvio .fx-etapa-texto small{color:var(--text-3);}

/* linha de retorno: um "colchete" tracejado na borda direita que liga o desvio
   "Corrigir" de volta ao Início (passo 1). Puramente visual. Fica à direita de
   tudo, abraçando da altura do desvio até o topo, com uma seta apontando para
   o Início. z-index baixo para passar atrás das etapas. */
/* linha de retorno pela DIREITA: sai do topo do card "Corrigir", sobe pela
   borda direita e vira para o passo 1, mostrando que a nota errada recomeça.
   Ancorada no .fx-desvio (o card Corrigir), então acompanha a altura dele. O
   lado direito está livre (só tem o card Corrigir), então a linha não cruza
   nenhuma etapa. */
/* Colchete pela DIREITA, ligando o card "Corrigir" ao passo 1. Ancorado no
   .fx-decisao (centro da trilha). Geometria conhecida: trilha 270px de largura,
   o card Corrigir vai até ~210px à direita da trilha, e há 4 etapas + o Início
   acima da decisão. A linha abre para a esquerda (topo + direita + base), com a
   seta no canto superior esquerdo entrando no passo 1. */
.fx-decisao .fx-retorno{
  position:absolute; z-index:0; pointer-events:none;
  left:50%;                 /* começa no eixo central da trilha (sob o passo 1) */
  right:-224px;             /* vai até a borda direita do card Corrigir */
  top:calc(-4 * (84px + 24px) - 6px);  /* sobe até o topo (altura do passo 1) */
  bottom:calc(50% - 2px);   /* desce até o meio da decisão (topo do card Corrigir) */
  border:2px dashed var(--border-strong);
  border-left:0;            /* topo + direita + base; a esquerda fica aberta */
  border-radius:0 10px 10px 0;
  transition:border-color .15s ease;
}
/* seta no canto superior esquerdo, apontando para cima (entrando no passo 1) */
.fx-decisao .fx-retorno::before{
  content:""; position:absolute; left:-2px; top:-5px;
  width:9px; height:9px; border-top:2px solid var(--border-strong); border-left:2px solid var(--border-strong);
  transform:rotate(45deg); transition:border-color .15s ease;
}
/* rótulo "volta ao passo 1" na horizontal, sobre a linha de cima */
.fx-retorno-rotulo{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:var(--fs-xs); font-weight:600; color:var(--text-3);
  background:var(--fx-fundo); padding:1px 6px;
}
/* quando o desvio "Corrigir" está selecionado, a linha acende em vermelho */
.fx-retorno.is-ativo, .fx-retorno.is-ativo::before{border-color:var(--danger-accent);}
.fx-retorno.is-ativo .fx-retorno-rotulo{color:var(--danger);}

/* trilha estreita (celular ou tela pequena): o desvio desce para baixo da pergunta */
@container (max-width:520px){
  /* a linha de retorno (colchete à direita) não cabe na trilha estreita */
  .fx-retorno{display:none;}
  .fx-palco{width:min(100%, 300px);}
  .fx-fluxo{width:100%;}
  .fx-decisao{margin-bottom:-14px;}
  .fx-ligacao{display:none;}
  .fx-desvio{position:relative; top:auto; left:auto; width:100%; transform:none; order:2; margin:4px 0 2px; border-style:dashed;}
  .fx-desvio:hover{transform:none;}
  .fx-desvio.is-ativo{border-style:solid;}
  .fx-rot.is-nao{position:relative; top:auto; right:auto; order:1; margin-bottom:-14px; align-self:flex-end; margin-right:12px; z-index:2;}
  .fx-rot.is-sim{order:3;}
}

/* ---- quadro de detalhe ---- */
.fx-detalhe{position:sticky; top:16px;}
.fx-det{
  padding:18px 18px 16px; border-radius:var(--radius); background:var(--surface-3);
  border:1px solid var(--border-soft); box-shadow:inset 0 3px 0 var(--q);
  animation:fadeIn .2s ease both;
}
:root[data-theme="dark"] .fx-det{background:var(--surface-2);}
.fx-det-quem{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--q);}
.fx-det-quem i{width:9px; height:9px; border-radius:3px; background:var(--q);}
.fx-det h3{margin:8px 0 10px; font-size:var(--fs-lg); font-weight:700; color:var(--text-strong);}
.fx-det-quando{display:flex; align-items:flex-start; gap:8px; margin:0 0 14px; font-size:var(--fs-base); line-height:1.5; color:var(--text-2);}
.fx-det-quando svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--text-3);}
.fx-det-quando b, .fx-det li b, .fx-det-porque b{color:var(--text-strong); font-weight:600;}
.fx-det-rotulo{margin:0 0 6px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);}
.fx-det ul{margin:0 0 12px; padding-left:18px; display:flex; flex-direction:column; gap:6px;}
.fx-det li{font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.fx-det-porque{margin:0 0 12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--card); font-size:var(--fs-base); line-height:1.55; color:var(--text-2);}
.fx-det-link{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:600; color:var(--primary); text-decoration:none;}
.fx-det-link svg{width:14px; height:14px; transition:transform .15s ease;}
.fx-det-link:hover svg{transform:translateX(3px);}
:root[data-theme="dark"] .fx-det-link{color:#ff6b73;}

@media (max-width:900px){
  .fx-grade{grid-template-columns:minmax(0,1fr);}
  .fx-detalhe{position:static;}
}
@media (max-width:720px){
  body[data-pagina="fluxograma"] .portal-header h1{font-size:var(--fs-display);}
  body[data-pagina="fluxograma"] .portal-sub{font-size:var(--fs-md);}
  .fx-bloco{padding:16px;}
  .fx-canvas{padding:24px 14px;}
}


/* ==========================================================================
   Movimento (motion design)
   Pequenos movimentos de feedback, ligados pelo portal.js (seção "Movimento").
   Para continuar leve em computadores mais antigos: só transform e opacity,
   com uma exceção pequena (a nota saindo da lista encolhe a altura de UM item).
   O prefers-reduced-motion global (seção Animações) zera tudo isto.
   ========================================================================== */

/* ---------- lista em cascata (primeira carga, só os 8 primeiros itens) ---------- */
.cascata{
  animation:cascataSobe var(--dur-lenta) var(--ease) both;
  animation-delay:calc(var(--i, 0) * 40ms);
}
/* linhas de tabela: só o fade. Mover <tr> com transform é instável em alguns
   navegadores, e animar cada <td> seria pesado (9 células por linha). */
tr.cascata{animation-name:cascataFade;}
@keyframes cascataSobe{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes cascataFade{from{opacity:0;} to{opacity:1;}}

/* ---------- troca de tela (Início / Pendentes / Recebidas / Minhas) ---------- */
.portal-main .troca{animation:trocaTela .22s var(--ease) both;}
@keyframes trocaTela{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- sino: balança só quando chega aviso novo ---------- */
.notif-btn svg{transform-origin:50% 8%;}
.notif-btn.toca svg{animation:sinoBalanca .9s ease-in-out;}
.notif-badge.pop{animation:badgePop var(--dur-lenta) var(--ease);}
@keyframes sinoBalanca{
  0%{transform:rotate(0);} 15%{transform:rotate(14deg);} 30%{transform:rotate(-12deg);}
  45%{transform:rotate(8deg);} 60%{transform:rotate(-5deg);} 75%{transform:rotate(2deg);}
  100%{transform:rotate(0);}
}
@keyframes badgePop{0%{transform:scale(.4);} 60%{transform:scale(1.3);} 100%{transform:scale(1);}}

/* ---------- nota saindo da lista ao ser assumida ---------- */
/* tabela: só some */
tr.saindo{opacity:0; transition:opacity .22s ease;}
/* lista do Início: some e encolhe (o JS fixa a altura atual antes) */
li.saindo{
  overflow:hidden; opacity:0;
  height:0 !important; padding-top:0; padding-bottom:0; border-top-color:transparent;
  transition:height .28s var(--ease), padding .28s var(--ease), opacity .2s ease;
}

/* ---------- modais e busca: saída animada (antes fechavam de uma vez) ---------- */
.modal-overlay-portal.fechando,
.busca-overlay.fechando{animation:fundoSai var(--dur-rapida) ease both; pointer-events:none;}
.modal-overlay-portal.fechando > *,
.busca-overlay.fechando .busca-painel{animation:modalSai var(--dur-rapida) ease both;}
@keyframes fundoSai{from{opacity:1;} to{opacity:0;}}
@keyframes modalSai{from{opacity:1; transform:none;} to{opacity:0; transform:scale(.97) translateY(4px);}}

/* ---------- "copiado": o ícone de copiar vira um check verde ---------- */
.is-copiado svg{color:var(--success-accent); animation:copiadoPop var(--dur-media) var(--ease);}
@keyframes copiadoPop{from{opacity:0; transform:scale(.4) rotate(-30deg);} to{opacity:1; transform:none;}}