/* ========= Preferências por usuário (data-attrs no <html>) ========= */
html[data-font="pequeno"] { font-size: 14px; }
html[data-font="medio"]   { font-size: 16px; }
html[data-font="grande"]  { font-size: 18px; }
html[data-font="extra"]   { font-size: 21px; }

html[data-density="compacta"]    table th, html[data-density="compacta"]    table td { padding: .3rem .55rem; }
html[data-density="compacta"]    .card-form { padding: .8rem; }
html[data-density="compacta"]    .kpi { padding: .7rem; }
html[data-density="confortavel"] table th, html[data-density="confortavel"] table td { padding: .9rem 1.1rem; }
html[data-density="confortavel"] .card-form { padding: 1.6rem; }
html[data-density="confortavel"] .kpi { padding: 1.4rem; }

html[data-accent="laranja"] { --na-blue: #f7941d; --na-blue-dark: #d97706; --na-blue-light: #fef3e0; }
html[data-accent="verde"]   { --na-blue: #16a34a; --na-blue-dark: #15803d; --na-blue-light: #dcfce7; }

html[data-theme="escuro"] {
  --na-cream: #0f172a; --na-cream-2: #1e293b;
  --ink: #f1f5f9; --ink-soft: #cbd5e1; --line: #334155;
  --warn-light: #422006; --ok-light: #052e16; --na-orange-light: #422006;
  --danger-light: #450a0a; --na-blue-light: #0c4a6e;
}
html[data-theme="escuro"] body { background: var(--na-cream); }
html[data-theme="escuro"] .card,
html[data-theme="escuro"] .card-form,
html[data-theme="escuro"] .kpi,
html[data-theme="escuro"] .chart-box,
html[data-theme="escuro"] .stat,
html[data-theme="escuro"] .subnav,
html[data-theme="escuro"] table { background: #1e293b; color: #f1f5f9; }
html[data-theme="escuro"] table tr:hover { background: #243349; }
html[data-theme="escuro"] table th { color: #fff; }
html[data-theme="escuro"] .card h3, html[data-theme="escuro"] h1, html[data-theme="escuro"] h2 { color: #93c5fd; }
html[data-theme="escuro"] .card-form input,
html[data-theme="escuro"] .card-form select,
html[data-theme="escuro"] .card-form textarea { background: #0f172a; color: #f1f5f9; border-color: #334155; }
html[data-theme="escuro"] .card p, html[data-theme="escuro"] .card-form label,
html[data-theme="escuro"] .hint, html[data-theme="escuro"] .muted { color: #cbd5e1; }

/* === Tema escuro: ajustes de contraste === */
html[data-theme="escuro"] body { color: #f1f5f9; }
html[data-theme="escuro"] h1, html[data-theme="escuro"] h2, html[data-theme="escuro"] h3 { color: #93c5fd; }
html[data-theme="escuro"] h2 { border-bottom-color: var(--na-orange); }

/* Flashes em tema escuro */
html[data-theme="escuro"] .flash.error { background: #450a0a; color: #fecaca; border-left-color: #dc2626; }
html[data-theme="escuro"] .flash.info  { background: #052e16; color: #bbf7d0; border-left-color: #22c55e; }

/* Dropdowns nav (white-bg → dark-bg em modo escuro) */
html[data-theme="escuro"] .nav-drop { background: #1e293b; border-color: #334155; }
html[data-theme="escuro"] .nav-drop a { color: #f1f5f9; }
html[data-theme="escuro"] .nav-drop a:hover { background: #0f172a; color: var(--na-yellow); }

/* Subnav */
html[data-theme="escuro"] .subnav { background: #1e293b; }
html[data-theme="escuro"] .subnav a { color: #cbd5e1; }
html[data-theme="escuro"] .subnav a:hover { background: #0f172a; color: var(--na-yellow); }
html[data-theme="escuro"] .subnav a.active { background: var(--na-blue); color: #fff; }

/* Tabs */
html[data-theme="escuro"] .tab-btn { background: #1e293b; color: #cbd5e1; border-color: #334155; }
html[data-theme="escuro"] .tab-btn:hover { color: var(--na-yellow); }
html[data-theme="escuro"] .tab-btn.active { background: var(--na-blue); color: #fff; }
html[data-theme="escuro"] .tabs { border-bottom-color: var(--na-blue); }

/* Tabelas: cabeçalho mantém gradiente azul; corpo escuro */
html[data-theme="escuro"] table tbody td { color: #f1f5f9; border-bottom-color: #334155; }
html[data-theme="escuro"] table input,
html[data-theme="escuro"] table select { background: #0f172a; color: #f1f5f9; border-color: #334155; }
html[data-theme="escuro"] .empty { color: #64748b; }

/* Badges: preserva legibilidade — tons levemente mais escuros */
html[data-theme="escuro"] .badge-warning, html[data-theme="escuro"] .badge-solicitou,
html[data-theme="escuro"] .badge-cadastrou, html[data-theme="escuro"] .badge-entrada {
  background: #422006; color: #fcd34d;
}
html[data-theme="escuro"] .badge-success, html[data-theme="escuro"] .badge-gerou,
html[data-theme="escuro"] .badge-finalizou, html[data-theme="escuro"] .badge-converteu {
  background: #052e16; color: #86efac;
}
html[data-theme="escuro"] .badge-info, html[data-theme="escuro"] .badge-envio,
html[data-theme="escuro"] .badge-lançamento {
  background: #0c4a6e; color: #bae6fd;
}
html[data-theme="escuro"] .badge-danger, html[data-theme="escuro"] .badge-excluiu {
  background: #450a0a; color: #fecaca;
}
html[data-theme="escuro"] .badge-login, html[data-theme="escuro"] .badge-logout,
html[data-theme="escuro"] .badge-alterou {
  background: #334155; color: #e2e8f0;
}

/* KPIs */
html[data-theme="escuro"] .kpi b { color: #93c5fd; }
html[data-theme="escuro"] .stat { background: #1e293b; color: #cbd5e1; }
html[data-theme="escuro"] .stat-warning { background: #422006; color: #fcd34d; }
html[data-theme="escuro"] .stat-success { background: #052e16; color: #86efac; }
html[data-theme="escuro"] .stat-info    { background: #0c4a6e; color: #bae6fd; }

/* Goal bar */
html[data-theme="escuro"] .goal-bar { background: #0f172a; }
html[data-theme="escuro"] .goal-bar span { color: #f1f5f9; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* Linhas de risco no estoque (modo claro) */
.row-risk-critico { background: #fef2f2 !important; }
.row-risk-baixo   { background: #fff7ed !important; }
.row-risk-atencao { background: #fefce8 !important; }
html[data-theme="escuro"] .row-risk-critico { background: #2a0e10 !important; }
html[data-theme="escuro"] .row-risk-baixo   { background: #2c1810 !important; }
html[data-theme="escuro"] .row-risk-atencao { background: #2a2410 !important; }

/* Inputs em containers escuros do tema escuro */
html[data-theme="escuro"] details summary { color: #93c5fd; }
html[data-theme="escuro"] code, html[data-theme="escuro"] pre { background: #0f172a; color: #fbbf24; }
html[data-theme="escuro"] tfoot tr { background: #243349 !important; }

/* ========= Nova Aliança Embalagens — paleta festiva ========= */
:root {
  --na-blue: #1ba6e0;         /* azul vibrante NA */
  --na-blue-dark: #0d7fb8;
  --na-blue-light: #d6f0fb;
  --na-orange: #f7941d;       /* laranja banner EMBALAGENS */
  --na-orange-dark: #d97706;
  --na-orange-light: #fef3e0;
  --na-yellow: #ffd200;
  --na-yellow-dark: #f5a623;
  --na-pink: #e91e63;
  --na-green: #4caf50;
  --na-purple: #9c27b0;
  --na-red: #ef4444;          /* acento festivo */
  --na-cream: #fffaf2;        /* fundo claro */
  --na-cream-2: #fef3e0;
  --ink: #1f2937;
  --ink-soft: #475569;
  --line: #fde4c4;
  --ok: #16a34a;
  --ok-light: #dcfce7;
  --warn: #f59e0b;
  --warn-light: #fef3c7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
}
* { box-sizing: border-box; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  margin: 0; background: var(--na-cream); color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ========= Tema Mundo Festa (módulo Marketplaces) =========
   Ativado pela classe .tema-festa no <html> quando qualquer tela
   marketplace_* está aberta: topbar amarela, padrão de festa no fundo
   e a logo trocada pela da Mundo Festa (feito no base.html). */
html.tema-festa body{
  background-color:#fff7dc;   /* fundo liso — sem pattern, a pedido */
}
html.tema-festa .topbar{
  background:linear-gradient(135deg,#ffc83d 0%,#f7a81d 100%);
  border-bottom-color:#e8442e;
  box-shadow:0 4px 14px rgba(247,148,29,.35);
}
html.tema-festa .topbar nav > a,
html.tema-festa .nav-trigger{color:#4a2c00;text-shadow:none;}
html.tema-festa .topbar nav > a:hover,
html.tema-festa .nav-trigger:hover{background:rgba(255,255,255,.45);color:#1b1b1b;}
html.tema-festa .topbar nav > a.active,
html.tema-festa .nav-trigger.active{background:#e8442e;color:#fff;}
html.tema-festa .status-pill{background:rgba(255,255,255,.5);
  border-color:rgba(0,0,0,.12);color:#4a2c00;text-shadow:none;}
html.tema-festa .status-pill > span{color:#4a2c00 !important;}
html.tema-festa .status-pill #liveClock{color:#b34700 !important;}
html.tema-festa .subnav{background:#fff3c4;border-color:#f2c94c;}
html.tema-festa .sp-card,
html.tema-festa .ped-card,
html.tema-festa .imp-card{background:#fffdf5;border-color:#f2d98c;}
html.tema-festa .nav-bell{color:#4a2c00;}
/* tema escuro do usuário: mantém a festa só na topbar/pattern, cards escuros */
html.tema-festa[data-theme="escuro"] body{background-color:#181305;}
html.tema-festa[data-theme="escuro"] .sp-card,
html.tema-festa[data-theme="escuro"] .ped-card,
html.tema-festa[data-theme="escuro"] .imp-card{background:#1c1f24;border-color:#3a3520;}

/* ========= Topbar ========= */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.5rem;
  background: linear-gradient(135deg, var(--na-blue) 0%, var(--na-blue-dark) 100%);
  border-bottom: 4px solid var(--na-yellow);
  box-shadow: 0 4px 14px rgba(13,127,184,.25);
  flex-wrap: wrap; gap: 1rem;
  position: sticky; top: 0; z-index: 90;
  backdrop-filter: saturate(140%);
}
.topbar, .topbar .brand img, .status-pill {
  transition: padding .22s ease, height .22s ease, font-size .22s ease, box-shadow .22s ease;
}
/* Quando a página é rolada, a topbar fica levemente mais compacta */
body.scrolled .topbar { padding: .35rem 1.5rem; box-shadow: 0 6px 18px rgba(13,127,184,.35); }
body.scrolled .topbar .brand img { height: 44px; }
body.scrolled .status-pill { padding: .25rem .6rem; font-size: .72rem; }
/* Subnavs (financeiro/produção/etc) também grudam abaixo da topbar */
.subnav {
  position: sticky; top: 76px; z-index: 80;
}
.topbar .brand img {
  height: 56px; display: block;
  background: #fff; padding: .35rem .7rem; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.topbar nav {
  display: flex; align-items: center; gap: .2rem; flex-wrap: wrap;
  justify-content: flex-end; min-width: 0;
}
.topbar nav > a, .nav-trigger {
  color: rgba(255,255,255,.92); text-decoration: none; font-weight: 600;
  padding: .5rem .5rem; border-radius: 6px;
  font-size: .84rem; transition: all .15s; cursor: pointer;
  display: inline-block; white-space: nowrap;
}
.topbar nav > a:hover, .nav-trigger:hover { background: rgba(255,255,255,.15); color: #fff; }
.topbar nav > a.active, .nav-trigger.active { background: var(--na-orange); color: #fff; }
/* margin-left:auto: se a barra quebrar em 2 linhas, o bloco do usuário
   encosta à direita em vez de ficar solto à esquerda */
.topbar .user { display: flex; align-items: center; gap: .7rem;
  margin-left: auto; }
.status-pill {
  display: flex; gap: .55rem; align-items: center; flex-wrap: nowrap;
  background: rgba(255,255,255,.18); padding: .35rem .8rem; border-radius: 999px;
  color: #fff; font-size: .74rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.3);
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.status-pill > span { color: #fff !important; white-space: nowrap; }
.status-pill #liveClock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--na-yellow) !important; }

.nav-group { position: relative; }
.nav-drop {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 50; padding: .35rem;
}
.nav-group:hover .nav-drop { display: block; }
.nav-drop a {
  display: block; padding: .55rem .85rem; text-decoration: none;
  color: var(--ink); border-radius: 6px; font-size: .9rem;
}
.nav-drop a:hover { background: var(--na-cream-2); color: var(--na-blue); }

.topbar .user span { margin-right: .8rem; color: var(--ink-soft); font-weight: 500; }
.btn-logout {
  background: var(--na-orange); color: #fff !important; padding: .5rem 1rem;
  border-radius: 6px; text-decoration: none; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 6px rgba(247,148,29,.4);
}
.btn-logout:hover { background: var(--na-orange-dark); }

/* --- Garantir contraste em qualquer container escuro --- */
.topbar *, .footer * { -webkit-font-smoothing: antialiased; }
.topbar .nav-trigger, .topbar nav > a { text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.topbar .brand { display: inline-block; }

/* Computador: barra em duas linhas organizadas — logo e usuário em cima,
   menu inteiro embaixo numa faixa própria (antes o menu e o bloco do
   usuário disputavam a mesma linha e quebravam bagunçados) */
@media (min-width: 1281px) {
  .topbar {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand user" "nav nav";
    align-items: center; row-gap: .35rem; column-gap: 1rem; padding: .45rem 1.5rem .3rem;
  }
  .topbar .nav-toggle { display: none; }
  .topbar .brand { grid-area: brand; }
  .topbar .brand img { height: 46px; }
  .topbar .user { grid-area: user; justify-self: end; margin-left: 0; }
  .topbar nav {
    grid-area: nav; justify-content: center; gap: .15rem .3rem;
    border-top: 1px solid rgba(255,255,255,.2); padding-top: .3rem;
  }
  body.scrolled .topbar { padding: .3rem 1.5rem .2rem; }
  body.scrolled .topbar .brand img { height: 38px; }
}
/* submenus grudam logo abaixo da barra, qualquer que seja a altura dela */
.subnav { top: var(--topbar-h, 76px); }

/* chave "Avisos" (liga/pausa os avisos na área de trabalho) */
.nt-box { position: relative; display: inline-flex; align-items: center; }
.nt-switch {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff;
  border-radius: 999px 0 0 999px; padding: .28rem .55rem .28rem .4rem; font: inherit; font-size: .78rem; font-weight: 700;
}
.nt-track { width: 1.9rem; height: 1.05rem; border-radius: 999px; background: #22c55e; position: relative;
  transition: background-color .18s ease; flex: none; }
.nt-knob { position: absolute; top: .12rem; left: .97rem; width: .8rem; height: .8rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.nt-switch.nt-off .nt-track { background: #94a3b8; }
.nt-switch.nt-off .nt-knob { transform: translateX(-.85rem); }
.nt-switch.nt-off .nt-txt { opacity: .85; }
.nt-mais {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-left: 0; color: #fff;
  border-radius: 0 999px 999px 0; padding: .28rem .45rem; font-size: .7rem; cursor: pointer; align-self: stretch;
}
.nt-switch:focus-visible, .nt-mais:focus-visible { outline: 2px solid var(--na-yellow); outline-offset: 2px; }
.nt-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: 260px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,.2); padding: .7rem .8rem; font-size: .85rem; text-align: left;
}
.nt-pop p { margin: .3rem 0 .5rem; color: var(--ink-soft); font-size: .8rem; }
.nt-pop label { display: flex; gap: .4rem; align-items: center; cursor: pointer; }
.nt-pop[hidden] { display: none; }
html[data-theme="escuro"] .nt-pop { background: #1e293b; color: #f1f5f9; border-color: #334155; }
html.tema-festa .nt-switch, html.tema-festa .nt-mais { color: #4a2c00; border-color: rgba(0,0,0,.2); }

/* ========= Layout ========= */
main { padding: 1.5rem; max-width: 1300px; margin: 0 auto; flex: 1; width: 100%; }
.footer {
  text-align: center; padding: 1rem;
  background: linear-gradient(135deg, var(--na-blue) 0%, var(--na-blue-dark) 100%);
  color: #fff; font-size: .8rem;
}
.footer small, .footer b { color: #fff !important; }
.footer b { color: var(--na-yellow) !important; }

h1 { color: var(--na-blue-dark); margin-top: 0; }
h2 {
  color: var(--na-blue-dark); margin-top: 1.5rem;
  border-bottom: 3px solid var(--na-orange); padding-bottom: .3rem;
  display: inline-block;
}
h3 { color: var(--na-orange-dark); }

/* ========= Flash ========= */
.flash { padding: .8rem 1.1rem; margin: .6rem 0; border-radius: 8px; font-weight: 500; }
.flash.error { background: var(--danger-light); color: #991b1b; border-left: 4px solid var(--danger); }
.flash.info  { background: var(--ok-light); color: #166534; border-left: 4px solid var(--ok); }

/* ========= Login ========= */
.login-box {
  max-width: 440px; margin: 4rem auto; background: #fff;
  padding: 2.5rem 2rem; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(27,166,224,.2);
  border-top: 6px solid;
  border-image: linear-gradient(90deg, var(--na-blue), var(--na-yellow), var(--na-orange)) 1;
}
.login-box h1 { font-size: 1.5rem; margin: 0 0 .25rem; text-align: center; }
.login-box h1 span { color: var(--na-orange); }
.login-box h2 {
  font-size: .95rem; color: var(--ink-soft); border: none; text-align: center;
  margin: 0 0 1.5rem; display: block;
}
.login-box label { display: block; margin: .8rem 0; }
.login-box input { width: 100%; padding: .75rem; border: 2px solid var(--line); border-radius: 8px; font-size: 1rem; }
.login-box input:focus { outline: none; border-color: var(--na-blue); }
.login-box button {
  width: 100%; padding: .9rem; margin-top: 1rem;
  background: linear-gradient(135deg, var(--na-blue) 0%, var(--na-blue-dark) 100%);
  color: #fff; border: none;
  border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 1rem;
  letter-spacing: .5px; box-shadow: 0 4px 12px rgba(27,166,224,.35);
}
.login-box button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(27,166,224,.45); }
.login-box .hint { font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; text-align: center; }
.login-logo-wrap {
  text-align: center;
  margin: -1rem 0 1.5rem;
  padding: 1rem 0;
  background: radial-gradient(ellipse at center, rgba(27,166,224,.08) 0%, transparent 70%);
  border-radius: 12px;
}
.login-logo {
  max-width: 340px; width: 100%; height: auto;
  filter: drop-shadow(0 6px 14px rgba(27,166,224,.25));
}

/* ========= Hero (home) ========= */
.hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,210,0,.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(247,148,29,.18) 0%, transparent 40%),
    linear-gradient(135deg, var(--na-blue) 0%, var(--na-blue-dark) 100%);
  color: #fff; padding: 2.5rem 2rem; border-radius: 16px;
  margin-bottom: 2rem; text-align: center;
  box-shadow: 0 10px 30px rgba(27,166,224,.3);
  position: relative; overflow: hidden;
}
.hero img { max-width: 360px; width: 100%; height: auto; background: #fff; padding: 1rem 1.5rem; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.hero h1 { color: #fff; margin: 1.2rem 0 .3rem; font-size: 1.8rem; }
.hero h1 span { color: var(--na-yellow); }
.hero p { margin: 0; opacity: .95; font-size: 1rem; }

.home-section { margin-bottom: 2rem; }
.home-section h2 { color: var(--na-orange-dark); }

/* ========= Cards ========= */
.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
}
.card {
  background: #fff; padding: 1.4rem; border-radius: 14px;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-top: 4px solid var(--na-blue);
  transition: transform .15s, box-shadow .15s;
  display: block; position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27,166,224,.22); border-top-color: var(--na-orange); }
.card .card-icon { font-size: 2.2rem; display: block; margin-bottom: .3rem; }
.card h3 { margin: .2rem 0 .4rem; color: var(--na-blue-dark); }
.card p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.card.disabled { opacity: .45; border-top-color: #94a3b8; pointer-events: none; }
/* cards alternados em cores festivas */
.cards .card:nth-child(4n+1) { border-top-color: var(--na-blue); }
.cards .card:nth-child(4n+2) { border-top-color: var(--na-orange); }
.cards .card:nth-child(4n+3) { border-top-color: var(--na-pink); }
.cards .card:nth-child(4n+4) { border-top-color: var(--na-green); }

/* ========= Forms ========= */
.card-form {
  background: #fff; padding: 1.3rem; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 1.5rem;
  border-left: 4px solid var(--na-blue);
}
.card-form h3 { margin-top: 0; }
.card-form .row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: end; }
.card-form label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .82rem; color: var(--ink-soft); font-weight: 600;
  flex: 1; min-width: 140px;
}
.card-form label.grow { flex: 3; }
.card-form input, .card-form select, .card-form textarea {
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px;
  font-size: .95rem; background: #fff; color: var(--ink);
}
.card-form input:focus, .card-form select:focus, .card-form textarea:focus {
  outline: 2px solid var(--na-blue); border-color: transparent;
}
.card-form button {
  padding: .65rem 1.2rem; background: var(--na-blue); color: #fff;
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
  font-size: .92rem;
}
.card-form button:hover { background: var(--na-blue-dark); }
.card-form button.danger { background: var(--danger); }
.card-form fieldset { margin-top: 1rem; border: 1px dashed var(--line); border-radius: 8px; padding: .8rem; }
.card-form fieldset legend { color: var(--na-blue); font-weight: 600; }
.card-form fieldset label { flex-direction: row; align-items: center; gap: .4rem; min-width: auto; margin-right: 1rem; font-weight: 500; }

.btn-primary {
  background: linear-gradient(135deg, var(--na-orange) 0%, var(--na-orange-dark) 100%) !important;
  color: #fff !important; padding: .75rem 1.5rem !important; font-weight: 700;
  box-shadow: 0 4px 10px rgba(247,148,29,.35); font-size: 1rem !important;
  border: none; transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(247,148,29,.5); }

.btn-ok {
  background: var(--ok); color: #fff; border: none;
  padding: .35rem .7rem; border-radius: 4px; cursor: pointer; font-size: .82rem;
}
.btn-ok:hover { background: #15803d; }

/* ========= Tabelas ========= */
table {
  width: 100%; border-collapse: collapse; background: #fff;
  margin-top: 1rem; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
table th, table td { padding: .6rem .85rem; border-bottom: 1px solid #f1ece3; text-align: left; }
table th { background: linear-gradient(135deg, var(--na-blue) 0%, var(--na-blue-dark) 100%); color: #fff; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
table tr:hover { background: var(--na-cream-2); }
table input, table select { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 4px; font-size: .85rem; }
table button, table .btn-ok, table a.btn-ok {
  font-size: .8rem; padding: .35rem .65rem; margin: 0 1px;
  background: var(--na-blue); color: #fff !important; border: none;
  border-radius: 4px; cursor: pointer; font-weight: 600;
  text-decoration: none; display: inline-block;
}
table button:hover, table a.btn-ok:hover { background: var(--na-blue-dark); }
table button.danger { background: var(--danger) !important; color: #fff !important; }
table button.danger:hover { background: #991b1b !important; }
table a.btn-ok { background: var(--ok) !important; }
table a.btn-ok:hover { background: #15803d !important; }
.row-inactive { opacity: .55; }

/* ========= KPIs ========= */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.kpi {
  background: #fff; padding: 1.1rem; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); text-align: center;
  border-top: 3px solid var(--na-blue);
}
.kpis .kpi:nth-child(4n+1) { border-top-color: var(--na-blue); }
.kpis .kpi:nth-child(4n+2) { border-top-color: var(--na-orange); }
.kpis .kpi:nth-child(4n+3) { border-top-color: var(--na-pink); }
.kpis .kpi:nth-child(4n+4) { border-top-color: var(--na-green); }
.kpi span { display: block; color: var(--ink-soft); font-size: .82rem; font-weight: 600; }
.kpi b { display: block; font-size: 1.7rem; color: var(--na-blue-dark); margin-top: .3rem; }

/* ========= Charts ========= */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px,1fr)); gap: 1rem; }
.chart-box {
  background: #fff; padding: 1rem; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-top: 3px solid var(--na-orange);
}
.chart-box h3 { margin-top: 0; color: var(--na-blue-dark); }

/* ========= Cadastros / fornecedores ========= */
.cad-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.cad-grid form { display: flex; flex-wrap: wrap; gap: .5rem; }
.cad-grid form input { flex: 1; min-width: 100px; }
.cad-grid ul { padding-left: 0; list-style: none; }
.cad-grid li { padding: .45rem 0; border-bottom: 1px solid #f1ece3; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cad-grid li button { background: var(--danger); color: #fff; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; }

/* ========= RH (form-grid, tbl, chk-line) ========= */
.form-grid {
  display: grid; gap: .75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-grid label { display: flex; flex-direction: column; font-size: .85rem; color: var(--ink-soft); gap: .25rem; margin: 0; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: .55rem .65rem; border: 1.5px solid var(--line); border-radius: 6px;
  font-size: .95rem; background: #fff;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--na-blue);
}
.chk-line { flex-direction: row !important; align-items: center; gap: .5rem !important; font-size: .92rem !important; color: var(--ink) !important; }
.chk-line input[type=checkbox] { width: auto; }

table.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }

/* ========= Subnav (Produção) ========= */
.subnav {
  display: flex; gap: .3rem; margin-bottom: 1.2rem;
  background: #fff; padding: .4rem; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  flex-wrap: wrap; border-left: 4px solid var(--na-orange);
}
.subnav a {
  padding: .55rem 1rem; text-decoration: none; color: var(--ink-soft);
  border-radius: 6px; font-weight: 600; font-size: .92rem;
}
.subnav a:hover { background: var(--na-blue-light); color: var(--na-blue-dark); }
.subnav a.active { background: var(--na-blue); color: #fff; }

/* ========= Tabs ========= */
.tabs {
  display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--na-blue);
}
.tab-btn {
  background: #fff; border: 1px solid var(--line); border-bottom: none;
  padding: .6rem 1.1rem; cursor: pointer; border-radius: 8px 8px 0 0;
  font-weight: 600; color: var(--ink-soft); font-size: .9rem;
}
.tab-btn:hover { color: var(--na-blue); }
.tab-btn.active { background: var(--na-blue); color: #fff; border-color: var(--na-blue); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ========= Page header / status / badges ========= */
.page-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.page-header h1 { margin: 0; }
.page-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
.stat {
  background: #fff; padding: .45rem 1rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.stat-warning { background: var(--warn-light); color: #92400e; }
.stat-success { background: var(--ok-light); color: #166534; }
.stat-info    { background: var(--na-blue-light); color: var(--na-blue-dark); }

.badge {
  display: inline-block; padding: .22rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; background: #e2e8f0; color: #334155;
  letter-spacing: .3px;
}
.badge-warning, .badge-solicitou, .badge-cadastrou, .badge-entrada { background: var(--warn-light); color: #92400e; }
.badge-success, .badge-gerou, .badge-finalizou, .badge-converteu, .badge-cadastrou_fornecedor { background: var(--ok-light); color: #166534; }
.badge-info, .badge-envio, .badge-lançamento { background: var(--na-blue-light); color: var(--na-blue-dark); }
.badge-danger, .badge-excluiu { background: var(--danger-light); color: #991b1b; }
.badge-login, .badge-logout, .badge-alterou { background: #f1f5f9; color: var(--ink-soft); }

.status-grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.status-section { margin-top: 1.5rem; }
.status-section h2 small { color: var(--ink-soft); font-weight: 400; font-size: .8rem; }
.status-section .empty, table .empty { text-align: center; color: #94a3b8; padding: 1.5rem; }

.user-row h3 { margin: 0 0 .5rem; color: var(--na-blue-dark); }

/* ===== Admin: módulos agrupados ===== */
.mods-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin: 1rem 0; }
.mod-group {
  background: #fafbfc; padding: .9rem 1rem; border-radius: 8px;
  border: 1px solid var(--line); border-left: 5px solid var(--na-blue);
}
.mod-group legend { padding: 0 .5rem; }
.mod-group .mod-actions { font-size: .75rem; margin-bottom: .4rem; color: var(--ink-soft); }
.link-btn { background: none; border: none; color: var(--na-blue); cursor: pointer; padding: 0; font-size: .75rem; }
.link-btn:hover { text-decoration: underline; }
.mod-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .2rem; border-bottom: 1px dashed #e2e8f0;
  font-size: .88rem; font-weight: 500;
}
.mod-item:last-child { border-bottom: none; }
.mod-item input { flex-shrink: 0; }
.mod-item span { flex: 1; }
.mod-item .mod-key {
  background: #f1f5f9; color: var(--ink-soft); font-size: .7rem;
  padding: 1px 6px; border-radius: 3px; font-family: monospace;
}
html[data-theme="escuro"] .mod-group { background: #1e293b; }
html[data-theme="escuro"] .mod-item { border-color: #334155; }
html[data-theme="escuro"] .mod-item .mod-key { background: #0f172a; color: #cbd5e1; }

/* ===== Welcome / Splash ===== */
.welcome-box {
  max-width: 720px; margin: 2rem auto; background: #fff; padding: 2.5rem 2rem;
  border-radius: 16px; text-align: center;
  box-shadow: 0 14px 40px rgba(27,166,224,.18);
  border-top: 6px solid;
  border-image: linear-gradient(90deg, var(--na-blue), var(--na-yellow), var(--na-orange)) 1;
}
.welcome-box h1 { color: var(--na-blue-dark); margin: 1rem 0 .3rem; font-size: 1.8rem; }
.welcome-sub { color: var(--ink-soft); margin-bottom: 1.5rem; }
.welcome-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width:700px) { .welcome-grid { grid-template-columns: 1fr; } }
.welcome-card {
  background: var(--na-blue-light); padding: 1.2rem; border-radius: 12px;
  text-align: left; border-left: 4px solid var(--na-blue);
}
.welcome-card h3 { margin-top: 0; color: var(--na-blue-dark); }
.welcome-card p { margin: .3rem 0; }
.welcome-card-prev { background: var(--na-orange-light); border-left-color: var(--na-orange); }
.welcome-card-prev h3 { color: var(--na-orange-dark); }
.alert-info {
  background: #fff7ed; border-left: 3px solid var(--na-orange);
  padding: .5rem .8rem; margin-top: .5rem; border-radius: 4px; font-size: .9rem;
}
html[data-theme="escuro"] .welcome-box { background: #1e293b; }
html[data-theme="escuro"] .welcome-card { background: #0c4a6e; }
html[data-theme="escuro"] .welcome-card-prev { background: #422006; }
html[data-theme="escuro"] .alert-info { background: #2c1810; color: #fed7aa; }

/* ===== Histórico de versões (timeline) ===== */
.timeline { position: relative; padding-left: 2rem; margin: 1.5rem 0; }
.timeline::before {
  content: ""; position: absolute; left: .55rem; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(180deg, var(--na-blue), var(--na-orange));
  border-radius: 2px;
}
.timeline-item {
  position: relative; background: #fff; padding: 1rem 1.2rem;
  border-radius: 10px; margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  display: grid; grid-template-columns: 100px 1fr; gap: 1rem; align-items: center;
}
.timeline-item::before {
  content: ""; position: absolute; left: -1.7rem; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--na-blue); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--na-blue);
  transform: translateY(-50%);
}
.timeline-current { border-left: 4px solid var(--na-orange); }
.timeline-current::before { background: var(--na-orange); box-shadow: 0 0 0 2px var(--na-orange); }
.timeline-version {
  font-family: monospace; font-size: 1.1rem; font-weight: 700;
  color: var(--na-blue-dark); background: var(--na-blue-light);
  padding: .4rem .6rem; border-radius: 6px; text-align: center;
}
.timeline-current .timeline-version { color: var(--na-orange-dark); background: var(--na-orange-light); }
.timeline-content h3 { margin: 0; color: var(--ink); }
html[data-theme="escuro"] .timeline-item { background: #1e293b; }
html[data-theme="escuro"] .timeline-item::before { border-color: #1e293b; }

/* ===== Documentação ===== */
.doc-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } }
.doc-toc {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  background: #fff; padding: 1.2rem; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); border-left: 4px solid var(--na-orange);
}
.doc-toc h3 { margin-top: 0; color: var(--na-blue-dark); }
.doc-toc ol, .doc-toc ul { padding-left: 1.1rem; margin: .3rem 0; }
.doc-toc li { margin: .2rem 0; font-size: .9rem; }
.doc-toc a { color: var(--ink-soft); text-decoration: none; }
.doc-toc a:hover { color: var(--na-blue); text-decoration: underline; }

.doc-body {
  background: #fff; padding: 1.5rem 2rem; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); line-height: 1.55;
}
.doc-body h2 { color: var(--na-blue-dark); margin-top: 2rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--na-orange); display: block; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { color: var(--na-orange-dark); margin-top: 1.2rem; }
.doc-body small.muted { font-size: .75rem; font-weight: 400; }
.doc-body code { background: var(--na-cream-2); padding: 1px 6px; border-radius: 4px;
  font-family: monospace; font-size: .9em; color: var(--na-blue-dark); }
.doc-body ul, .doc-body ol { padding-left: 1.4rem; }
.doc-body hr { margin: 2rem 0; border: 0; border-top: 2px dashed var(--line); }
.doc-body :target { background: var(--warn-light); padding: .3rem .6rem; border-radius: 6px; }

html[data-theme="escuro"] .doc-toc, html[data-theme="escuro"] .doc-body { background: #1e293b; }
html[data-theme="escuro"] .doc-body code { background: #0f172a; color: var(--na-yellow); }

/* Barra de meta */
.goal-bar {
  position: relative; height: 32px; background: #f1f5f9; border-radius: 999px;
  overflow: hidden; margin: 1.2rem 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--na-orange) 0%, var(--na-yellow) 50%, var(--na-green) 100%);
  transition: width .6s ease;
}
.goal-bar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #1f2937; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.export-form { background: #fff; padding: 1rem; border-radius: 8px; }
.muted { color: var(--ink-soft); font-size: .8rem; }
.hint { color: var(--ink-soft); font-size: .88rem; }

/* ====== Validação global de inputs (validation.js) ====== */
input.input-invalid,
textarea.input-invalid,
select.input-invalid {
  border: 2px solid #dc2626 !important;
  background: #fef2f2 !important;
  color: #7f1d1d !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
  outline: none !important;
}
html[data-theme="escuro"] input.input-invalid,
html[data-theme="escuro"] textarea.input-invalid,
html[data-theme="escuro"] select.input-invalid {
  background: #450a0a !important;
  color: #fecaca !important;
  border-color: #f87171 !important;
}
.input-error-msg {
  display: none;
  color: #b91c1c;
  font-size: .82rem;
  font-weight: 600;
  margin: .25rem 0 .35rem 0;
  padding: .25rem .45rem;
  background: #fee2e2;
  border-left: 3px solid #dc2626;
  border-radius: 4px;
}
html[data-theme="escuro"] .input-error-msg {
  background: #450a0a;
  color: #fecaca;
  border-left-color: #f87171;
}

/* =========================================================== */
/* =============== ANIMAÇÕES & MICROINTERAÇÕES =============== */
/* =========================================================== */

@keyframes na-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes na-pop {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes na-spin { to { transform: rotate(360deg); } }
@keyframes na-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}
@keyframes na-bounce-in {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* Entrada de página, cards, KPIs, flashes e toasts: UMA camada só, em
   motion.css (mo-enter). As regras antigas daqui eram sobrescritas por ela
   e só duplicavam código. */

/* Dropdown da nav: transição suave */
.nav-drop {
  display: block !important;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.nav-drop a { transition: background .15s ease, color .15s ease, padding-left .15s ease; }
.nav-drop a:hover { padding-left: 1.1rem; }

/* Topbar links underline animado */
.topbar nav > a, .nav-trigger { position: relative; }
.topbar nav > a::after, .nav-trigger::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4px;
  height: 2px; background: var(--na-yellow); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.topbar nav > a:hover::after, .nav-trigger:hover::after,
.topbar nav > a.active::after, .nav-trigger.active::after { transform: scaleX(1); }

/* Botões: hover/press com feedback tátil */
.card-form button,
.btn-ok, .btn-primary,
.btn-logout, .topbar nav > a, .nav-trigger {
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.card-form button:hover, .btn-ok:hover { transform: translateY(-1px); }
.card-form button:active, .btn-ok:active, .btn-primary:active { transform: translateY(1px) scale(.98); }

/* Botões small (compras/financeiro) */
.btn-small {
  font-size: .8rem; padding: .35rem .7rem; border: none;
  background: var(--na-blue); color: #fff; border-radius: 4px;
  cursor: pointer; font-weight: 600;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-small:hover { background: var(--na-blue-dark); transform: translateY(-1px); }
.btn-small:active { transform: translateY(1px); }
.btn-small.btn-danger { background: var(--danger); }
.btn-small.btn-danger:hover { background: #991b1b; }

/* Linhas da tabela: hover só na cor (o deslocamento de 2px fazia a linha
   inteira "tremer" ao passar o mouse) */
table tbody tr { transition: background .15s ease; }

/* Inputs: foco com transição */
.card-form input, .card-form select, .card-form textarea,
.form-grid input, .form-grid select, .form-grid textarea,
.login-box input {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.card-form input:focus, .card-form select:focus, .card-form textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  box-shadow: 0 0 0 4px rgba(27,166,224,.15);
}

/* Login: pop-in da caixa + logo flutuando */
.login-box { animation: na-bounce-in .55s cubic-bezier(.34,1.56,.64,1) both; }
.login-logo { animation: na-pop .55s cubic-bezier(.34,1.56,.64,1) both; transition: transform .25s ease; }
.login-logo:hover { transform: scale(1.04) rotate(-1deg); }

/* Hero: logo flutuante */
.hero img { animation: na-bounce-in .6s cubic-bezier(.34,1.56,.64,1) both; }

/* Brand topbar: pulsa levemente quando ativo (badge) */
.topbar .brand img { transition: transform .25s ease, box-shadow .25s ease; }
.topbar .brand:hover img { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* Skeleton (placeholder de carregamento) */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 400px 100%;
  animation: na-shimmer 1.4s infinite linear;
  border-radius: 4px; min-height: 1em;
}
html[data-theme="escuro"] .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
}

/* Notificação flutuante (sino com contador) */
.nav-bell {
  position: relative; display: inline-flex !important; align-items: center;
  justify-content: center;
  padding: .55rem .65rem !important; border-radius: 8px;
  text-decoration: none; transition: background .15s;
  font-size: 1.1rem;
}
.nav-bell::after { display: none !important; } /* sem underline no sino */
.nav-bell:hover { background: rgba(255,255,255,.18); transform: rotate(-10deg); }
.nav-bell-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--danger); color: #fff;
  border-radius: 999px; font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  animation: na-pop .35s ease both;
  line-height: 1;
}
.nav-bell-count[data-count="0"] { display: none; }

/* Detalhes (<details>): seta animada */
details > summary {
  cursor: pointer; list-style: none; user-select: none;
  transition: color .15s ease;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸"; display: inline-block; margin-right: .4rem;
  transition: transform .22s ease; color: var(--na-blue);
}
details[open] > summary::before { transform: rotate(90deg); }

/* Toast (notificação no canto) */
.na-toast {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1050;
  background: #fff; color: var(--ink); padding: .9rem 1.2rem;
  border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.18);
  border-left: 4px solid var(--na-blue);
  max-width: min(420px, 92vw);
}
.na-toast.success { border-left-color: var(--ok); }
.na-toast.warn    { border-left-color: var(--warn); }
.na-toast.error   { border-left-color: var(--danger); }

/* Foco acessível (teclado) */
:focus-visible {
  outline: 3px solid var(--na-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* Respeitar preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================== */
/* ================== RESPONSIVO MOBILE/TABLET =============== */
/* =========================================================== */

/* Botão hamburger (mobile) */
.nav-toggle {
  display: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  width: 42px; height: 42px;
  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.nav-toggle:hover { background: rgba(255,255,255,.25); }
.nav-toggle:active { transform: scale(.95); }

/* Desktop médio: 1025px - 1550px — com o menu completo (Marketplaces etc.)
   a barra não cabe no tamanho cheio; encolhe itens e enxuga o status-pill
   para manter tudo em UMA linha o máximo possível. */
@media (max-width: 1550px) and (min-width: 1281px) {
  .topbar { padding: .4rem .8rem; gap: .3rem .6rem; }
  .topbar .brand img { height: 42px; padding: .22rem .45rem; }
  .topbar nav { gap: 0; }
  .topbar nav > a, .nav-trigger { font-size: .72rem; padding: .38rem .3rem; }
  .status-pill { gap: .5rem; font-size: .7rem; padding: .28rem .65rem; }
  /* relógio, IP e usuário são dispensáveis quando falta espaço
     (o usuário continua visível no rodapé e nos logs) */
  .status-pill .pill-clock, .status-pill .pill-ip,
  .status-pill .pill-user { display: none; }
  .btn-logout { padding: .42rem .75rem; font-size: .78rem; }
  .nav-bell { font-size: 1.05rem; }
  .subnav { top: 62px; }
}

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  main { padding: 1rem; }
  .topbar { padding: .5rem .8rem; gap: .6rem; }
  .topbar .brand img { height: 44px; padding: .25rem .5rem; }
  .charts { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { position: static; max-height: none; }
}

/* Subnav sticky em telas menores: cola logo abaixo da topbar compacta */
@media (max-width: 1280px) { .subnav { top: 60px; } }

/* Drawer (hambúrguer): até 1280px — com o menu completo (Marketplaces etc.)
   a navegação inline não cabe em telas médias, então o drawer que antes era
   só do mobile passa a cobrir também tablets e notebooks menores. */
@media (max-width: 1280px) {
  /* Hamburger aparece e nav vira drawer */
  .nav-toggle { display: inline-flex; }

  .topbar {
    flex-wrap: nowrap;
    align-items: center;
  }

  .topbar nav {
    position: fixed;
    top: 0; left: -100%;
    width: min(82vw, 320px); height: 100vh;
    background: linear-gradient(180deg, var(--na-blue-dark) 0%, var(--na-blue) 100%);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4.5rem 1rem 2rem;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    transition: left .28s cubic-bezier(.4,0,.2,1);
  }
  body.nav-open .topbar nav { left: 0; }
  /* z-index 80 (ABAIXO da topbar, que é 90): o drawer vive dentro da topbar,
     então um overlay acima dela cobria o menu e "engolia" os toques — o menu
     ficava visível mas nada era clicável (bug notado no iPhone). */
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 80;
    background: rgba(0,0,0,.4);
    animation: na-fade-in .2s ease;
  }
  .topbar nav > a, .nav-trigger {
    width: 100%; padding: .85rem 1rem; font-size: 1rem; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
  }
  .topbar nav > a::after, .nav-trigger::after { display: none; }

  /* ---- legibilidade do drawer ---- */
  /* título no topo: diz o que a gaveta é */
  body.nav-open .topbar nav::before {
    content: "📚 Módulos do sistema";
    display: block; font-size: .78rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.6); padding: 0 1rem .6rem;
  }
  /* grupo ABERTO fica claramente destacado (fundo + amarelo) */
  .nav-group.open .nav-trigger {
    background: rgba(255,255,255,.16); color: var(--na-yellow);
  }
  /* grupo da TELA ATUAL: barra laranja à esquerda (além do fundo laranja) */
  .nav-trigger.active { border-left: 4px solid var(--na-yellow); }
  /* links do grupo com respiro e marcador sutil */
  .nav-drop a::before { content: "›"; margin-right: .45rem; opacity: .45; }

  /* Dropdowns viram accordion (sempre visível dentro do drawer) */
  .nav-group { width: 100%; }
  .nav-drop {
    position: static !important; display: block !important;
    opacity: 1 !important; pointer-events: auto !important;
    background: rgba(0,0,0,.18); box-shadow: none;
    border: none; padding: 0 0 0 .8rem; transform: none;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  /* 1400px: Financeiro e Marketplaces têm 10+ links — 600px cortava o fim */
  .nav-group.open .nav-drop { max-height: 1400px; }
  .nav-drop a {
    color: rgba(255,255,255,.92);
    padding: .65rem .8rem;
    font-size: .92rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-drop a:hover { background: rgba(255,255,255,.12); color: var(--na-yellow); }

  .topbar .user {
    margin-left: auto; gap: .4rem;
  }
  .status-pill { display: none; }       /* esconde o pill pesado no drawer */
  .topbar .user .status-pill-mobile {   /* versão enxuta opcional */
    display: inline-flex; font-size: .7rem;
  }
}

/* Mobile: até 768px */
@media (max-width: 768px) {
  body { font-size: 15px; }
  main { padding: .75rem; }
  .subnav { top: 56px; }

  .topbar { padding: .5rem .75rem; }
  .topbar .brand img { height: 38px; padding: .2rem .4rem; }
  .btn-logout { padding: .4rem .7rem; font-size: .75rem; }

  /* Page header em coluna */
  .page-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .page-stats { width: 100%; }

  /* Cards/KPIs em grid mais apertado */
  .cards, .kpis { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .card, .kpi { padding: .9rem; }
  .card .card-icon { font-size: 1.8rem; }
  .kpi b { font-size: 1.3rem; }

  /* Formulários: 1 coluna */
  .form-grid { grid-template-columns: 1fr; }
  .card-form { padding: 1rem; }
  .card-form .row { flex-direction: column; align-items: stretch; }
  .card-form label, .form-grid label { min-width: 0; }

  /* Tabelas: rolagem horizontal + indicação visual */
  .card-form { overflow-x: auto; }
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  table th, table td { padding: .5rem .6rem; font-size: .82rem; }

  /* Subnav rola horizontal */
  .subnav {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .subnav a { white-space: nowrap; padding: .5rem .8rem; }

  /* Login: ocupa quase a tela toda */
  .login-box { margin: 1.5rem .75rem; padding: 1.5rem 1.2rem; }
  .hero { padding: 1.5rem 1rem; }
  .hero img { max-width: 260px; padding: .6rem 1rem; }
  .hero h1 { font-size: 1.4rem; }

  /* Tabs roláveis */
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; }

  /* Timeline em coluna */
  .timeline-item { grid-template-columns: 1fr; gap: .5rem; }
  .timeline-version { text-align: left; max-width: max-content; }

  /* Footer compacto */
  .footer { font-size: .72rem; padding: .7rem; }

  /* Toasts ocupam largura completa */
  .na-toast { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}

/* Mobile pequeno: até 480px */
@media (max-width: 480px) {
  .cards, .kpis { grid-template-columns: 1fr; }
  .topbar .brand img { height: 34px; }
  h1 { font-size: 1.15rem; }
  .nav-toggle { width: 38px; height: 38px; font-size: 1.15rem; }
}

/* Quando JS detecta toque, aumenta alvos clicáveis */
html[data-input="touch"] button,
html[data-input="touch"] .btn-small,
html[data-input="touch"] a.btn-ok,
html[data-input="touch"] .subnav a,
html[data-input="touch"] .nav-drop a {
  min-height: 40px;
}
html[data-input="touch"] table td,
html[data-input="touch"] table th { padding: .7rem .6rem; }

/* Tema escuro: drawer mobile */
html[data-theme="escuro"] .topbar nav {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
/* Tema escuro: a barra do menu também acompanha o tema escolhido em Aparência
   (os Marketplaces mantêm a barra da festa) */
html[data-theme="escuro"]:not(.tema-festa) .topbar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* Bugfix: long words em tabelas/badges não estourar layout */
table td, .card p, .card h3, .badge {
  overflow-wrap: anywhere; word-break: break-word;
}
.badge { white-space: normal; }

/* Bugfix: imagens nunca estouram contêiner */
img { max-width: 100%; height: auto; }

/* Bugfix: <details open> dentro de table sem quebrar layout */
table details { display: inline-block; }

/* Bugfix: textarea pelo menos 60px */
textarea { min-height: 60px; resize: vertical; }

/* Bugfix: scrollbar customizada discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35); border-radius: 5px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); background-clip: padding-box; border: 2px solid transparent; }
html[data-theme="escuro"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); background-clip: padding-box; border: 2px solid transparent; }

/* Print: oculta navegação */
@media print {
  .topbar, .footer, .subnav, .nav-toggle, .na-toast, .na-overlay { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
}

/* Foto do produto (catálogo) nas telas de pedidos — Nova Aliança */
.na-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; background: #eee; flex: none; vertical-align: middle; }