/* ==========================================================================
   NC MACTRON — folha de estilo unica (portal do colaborador + painel)
   Tema claro/escuro por tokens. Mobile-first. Sem dependencias externas.
   ========================================================================== */

:root{
  /* Azul institucional MACTRON — 50% da paleta */
  --azul-900:#0f2440; --azul-800:#16304f; --azul-700:#1e3a5f; --azul-600:#27507f;
  --azul-500:#3268a3; --azul-400:#4f8bc9; --azul-300:#8fb8e0; --azul-100:#e3edf8;
  /* Acentos — 10% cada */
  --laranja:#ea580c; --laranja-suave:#fff1e7;
  --verde:#16a34a;   --verde-suave:#e8f7ee;
  --vermelho:#dc2626;--vermelho-suave:#fdeaea;
  --amarelo:#ca8a04; --amarelo-suave:#fdf6e3;
  --roxo:#7c3aed;    --ciano:#0891b2;

  /* Superficies claras */
  --bg:#f4f7fb; --bg2:#eaf0f7; --surface:#ffffff; --surface2:#f8fafc;
  --linha:#dbe4ef; --linha-forte:#c3d2e4;
  --card-topo:#eef4fb; --card-topo-hover:#e3edf8; --destaque-amarelo:#fff8dd; --destaque-amarelo-linha:#e6c200;
  --texto:#0f2440; --texto2:#3d5271; --texto3:#5b6f8c; --on-color:#ffffff;

  --raio:14px; --raio-sm:9px; --raio-lg:22px;
  --sombra-1:0 1px 2px rgba(15,36,64,.06), 0 2px 8px rgba(15,36,64,.05);
  --sombra-2:0 4px 12px rgba(15,36,64,.09), 0 12px 32px rgba(15,36,64,.07);
  --sombra-3:0 12px 32px rgba(15,36,64,.14), 0 28px 64px rgba(15,36,64,.10);
  --glow:0 0 0 4px rgba(50,104,163,.14);
  --trans:.22s cubic-bezier(.4,0,.2,1);
  --fonte:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}

:root[data-tema="escuro"]{
  --azul-100:#1b3454; --azul-300:#7aa6d6; --azul-400:#8fbbe4;
  --bg:#0b1626; --bg2:#0f1e33; --surface:#13243c; --surface2:#182d49;
  --linha:#24405f; --linha-forte:#325779;
  --card-topo:#0f1f36; --card-topo-hover:#162943; --destaque-amarelo:#3a3316; --destaque-amarelo-linha:#facc15;
  --texto:#e8f0fa; --texto2:#c3d4e8; --texto3:#9fb5cf; --on-color:#ffffff;
  --laranja:#fb923c; --verde:#4ade80; --vermelho:#f87171; --amarelo:#facc15;
  --roxo:#a78bfa; --ciano:#22d3ee;
  --laranja-suave:#3a2213; --verde-suave:#12331f; --vermelho-suave:#3a1a1a; --amarelo-suave:#332b12;
  --sombra-1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --sombra-2:0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.3);
  --sombra-3:0 12px 32px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.4);
  --glow:0 0 0 4px rgba(143,187,228,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* Conteudo largo (tabela, kanban) rola dentro do proprio container;
   a pagina em si nunca rola na horizontal.

   ATENCAO — aqui mora uma armadilha classica: `overflow-x:hidden` faz o
   navegador computar `overflow-y:auto` no mesmo elemento. Isso cria um
   contexto de rolagem e MATA todo `position:sticky` da pagina (a barra de
   titulo subia junto com o scroll). `overflow-x:clip` corta igual, mas NAO
   cria contexto de rolagem — o sticky continua ancorado na viewport. */
html,body{overflow-x:clip; max-width:100%}
/* Navegador sem suporte a `clip` (anterior a Chrome 90 / Safari 16) volta ao
   comportamento antigo: melhor a barra rolar do que o layout vazar. */
@supports not (overflow-x: clip) {
  html,body{overflow-x:hidden}
}
body{
  margin:0; font-family:var(--fonte); background:var(--bg); color:var(--texto);
  line-height:1.6; font-size:16px; transition:background var(--trans), color var(--trans);
  min-height:100vh;
}
/* Iluminacao radial de fundo — assinatura visual PINEAL */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(50,104,163,.16), transparent 62%),
    radial-gradient(700px 420px at 96% 4%, rgba(234,88,12,.10), transparent 58%),
    radial-gradient(760px 480px at 50% 108%, rgba(22,163,74,.09), transparent 60%);
}
:root[data-tema="escuro"] body::before{
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(79,139,201,.20), transparent 62%),
    radial-gradient(700px 420px at 96% 4%, rgba(234,88,12,.13), transparent 58%),
    radial-gradient(760px 480px at 50% 108%, rgba(22,163,74,.11), transparent 60%);
}
main,header,footer,.wrap{position:relative; z-index:1}
img{max-width:100%; height:auto; display:block}
a{color:var(--azul-500); text-decoration:none; transition:color var(--trans)}
:root[data-tema="escuro"] a{color:var(--azul-400)}
a:hover{color:var(--azul-400)}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(1.6rem,4.5vw,2.4rem)} h2{font-size:clamp(1.3rem,3.4vw,1.75rem)}
h3{font-size:1.12rem} p{margin:0 0 1em}
.wrap{width:min(1280px,94vw); margin-inline:auto}
.wrap-sm{width:min(880px,94vw); margin-inline:auto}

/* ─────────── Cabecalho + menu hamburguer ─────────── */
.topo{
  position:sticky; top:0; z-index:60;
  background:var(--surface); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--linha); box-shadow:var(--sombra-1);
}
.topo-in{display:flex; align-items:center; gap:14px; padding:10px 0; min-height:62px}
.marca{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--texto); letter-spacing:-.02em}
.marca-img{height:38px; width:auto; display:block}
.marca-dupla{display:flex; align-items:center; gap:10px}
.marca-dupla .chip-logo{
  background:#fff; border-radius:9px; padding:4px 8px; display:inline-flex;
  align-items:center; box-shadow:var(--sombra-1); border:1px solid var(--linha);
  transition:all var(--trans);
}
.marca:hover .chip-logo{box-shadow:var(--sombra-2); border-color:var(--azul-300)}
.marca-dupla .chip-logo img{height:36px; width:auto; display:block}
.marca-logo{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--azul-700),var(--azul-500)); color:#fff;
  font-size:1.05rem; font-weight:800; box-shadow:var(--sombra-2); flex:none;
}
.marca-txt{display:flex; flex-direction:column; line-height:1.15}
.marca-txt b{font-size:1.02rem}
.marca-txt span{font-size:.7rem; color:var(--texto3); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
/* No celular o cabecalho tem de caber numa linha: ficam os dois logotipos,
   o texto da marca sai. Precisa vir DEPOIS das regras acima — media query nao
   aumenta especificidade, entao com peso empatado vence a ultima declarada. */
@media (max-width:600px){
  .marca-dupla{gap:6px}
  .marca-dupla .chip-logo{padding:3px 6px}
  .marca-dupla .chip-logo img{height:26px}
  .marca-txt{display:none}
  .topo-in{gap:8px; min-height:54px; padding:8px 0}
  .tema-btn{width:38px; height:38px}
}
.topo-espaco{flex:1}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  padding:9px 13px; border-radius:var(--raio-sm); color:var(--texto2); font-weight:600;
  font-size:.92rem; transition:all var(--trans); white-space:nowrap;
}
.nav a:hover{background:var(--azul-100); color:var(--azul-600)}
:root[data-tema="escuro"] .nav a:hover{color:var(--texto)}
.nav a.ativo{background:var(--azul-700); color:#fff; box-shadow:var(--sombra-1)}
:root[data-tema="escuro"] .nav a.ativo{background:var(--azul-500)}
/* Botao dentro do menu: ".nav a" tem especificidade maior que ".btn" e
   sobrescreveria a cor do texto, deixando-o ilegivel sobre o fundo azul. */
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff; background:none}
.nav a.btn-primario:hover{background:linear-gradient(135deg,var(--azul-700),var(--azul-500))}
.nav a.btn-neutro{color:var(--texto2)}

.btn-menu{
  display:none; width:44px; height:44px; border:1px solid var(--linha); background:var(--surface);
  border-radius:var(--raio-sm); cursor:pointer; padding:0; place-items:center; flex:none;
}
.btn-menu span{display:block; width:20px; height:2px; background:var(--texto); border-radius:2px; position:relative; transition:all var(--trans)}
.btn-menu span::before,.btn-menu span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--texto); border-radius:2px; transition:all var(--trans)}
.btn-menu span::before{top:-6px} .btn-menu span::after{top:6px}
.btn-menu[aria-expanded="true"] span{background:transparent}
.btn-menu[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.btn-menu[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

.tema-btn{
  width:44px; height:44px; border-radius:var(--raio-sm); border:1px solid var(--linha);
  background:var(--surface); cursor:pointer; font-size:1.1rem; display:grid; place-items:center;
  transition:all var(--trans); flex:none; color:var(--texto);
}
.tema-btn:hover{border-color:var(--azul-400); box-shadow:var(--glow); transform:translateY(-1px)}

@media (max-width:980px){
  .btn-menu{display:grid}
  /* O painel do menu e ABSOLUTO dentro do .topo (que e sticky, logo e um
     ancestral posicionado). Assim ele gruda embaixo do cabecalho seja qual
     for a altura dele — nada de `top:62px` chutado, que descola quando a
     marca ocupa duas linhas. */
  .nav{
    position:absolute; top:100%; left:0; right:0; z-index:70;
    flex-direction:column; align-items:stretch; gap:3px;
    background:var(--surface); border-bottom:1px solid var(--linha); box-shadow:var(--sombra-3);
    padding:10px 5vw 18px; transform:translateY(-118%); opacity:0; visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease, visibility .28s;
    max-height:calc(100dvh - 100%); overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.aberto{transform:translateY(0); opacity:1; visibility:visible}
  .nav a{padding:14px 16px; font-size:1rem; border-radius:var(--raio)}

  /* Cabecalho do menu aberto, com o X de fechar */
  .nav-cab{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:4px 4px 10px; margin-bottom:6px; border-bottom:1px solid var(--linha);
  }
  .nav-cab span{
    font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
    font-weight:800; color:var(--texto3);
  }
  .btn-fechar-menu{
    width:40px; height:40px; flex:none; display:grid; place-items:center;
    border:1px solid var(--linha-forte); background:var(--surface); color:var(--texto2);
    border-radius:10px; cursor:pointer; font-size:1.15rem; line-height:1;
    font-family:inherit; transition:all var(--trans);
  }
  .btn-fechar-menu:hover{border-color:var(--vermelho); color:var(--vermelho); box-shadow:var(--sombra-1)}
  .btn-fechar-menu:focus-visible{outline:2px solid var(--azul-400); outline-offset:2px}

  /* Veu: escurece a pagina e fecha o menu ao tocar fora.
     Fica ENTRE o conteudo (z-index 1) e o cabecalho (z-index 60) — e mora
     fora do <header>, senao o backdrop-filter dele prende este `fixed`
     dentro da altura da barra e o veu para de cobrir a tela. */
  .veu-menu{
    position:fixed; inset:0; z-index:55; background:rgba(9,20,36,.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--trans), visibility var(--trans);
    border:none; padding:0; margin:0;
  }
  .veu-menu.aberto{opacity:1; visibility:visible; pointer-events:auto}
}
/* Fora do celular o menu e uma barra normal: nada de X nem de veu. */
.nav-cab,.veu-menu{display:none}
@media (max-width:980px){ .nav-cab{display:flex} .veu-menu{display:block} }

/* ─────────── Botoes ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--raio-sm); border:1px solid transparent;
  font-weight:700; font-size:.95rem; font-family:inherit; cursor:pointer;
  transition:all var(--trans); text-decoration:none; line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:linear-gradient(135deg,var(--azul-700),var(--azul-500)); color:#fff; box-shadow:var(--sombra-2)}
.btn-primario:hover{box-shadow:var(--sombra-3), 0 0 22px rgba(50,104,163,.4); color:#fff}
/* Botao de registrar NC: laranja solido, texto sempre branco — inclusive
   dentro do menu (.nav a) e no tema escuro, onde outras regras tentam
   recolorir o link. O !important aqui e deliberado: e uma regra de marca. */
.btn-laranja,
.nav a.btn-laranja,
:root[data-tema="escuro"] .btn-laranja{
  background:linear-gradient(135deg,#c2410c,#ea580c);
  color:#fff !important; box-shadow:var(--sombra-2); border-color:transparent;
}
.btn-laranja:hover,.btn-laranja:focus,.btn-laranja:active,
.nav a.btn-laranja:hover,
:root[data-tema="escuro"] .btn-laranja:hover{
  background:linear-gradient(135deg,#9a3412,#c2410c);
  color:#fff !important; box-shadow:var(--sombra-3), 0 0 26px rgba(234,88,12,.5);
}
.btn-laranja:visited{color:#fff !important}
.btn-verde{background:linear-gradient(135deg,#15803d,#16a34a); color:#fff; box-shadow:var(--sombra-2)}
.btn-verde:hover{box-shadow:var(--sombra-3), 0 0 22px rgba(22,163,74,.4); color:#fff}
.btn-neutro{background:var(--surface); color:var(--texto2); border-color:var(--linha-forte); box-shadow:var(--sombra-1)}
.btn-neutro:hover{border-color:var(--azul-400); color:var(--azul-500); box-shadow:var(--glow)}
.btn-perigo{background:#dc2626; color:#fff}
.btn-perigo:hover{box-shadow:0 0 20px rgba(220,38,38,.42); color:#fff}
.btn-sm{padding:7px 13px; font-size:.83rem; border-radius:7px}
.btn-lg{padding:16px 30px; font-size:1.05rem}
.btn-bloco{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ─────────── Cartoes ─────────── */
.card{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  padding:22px; box-shadow:var(--sombra-1); transition:all var(--trans); position:relative;
}
.card{
  background:linear-gradient(160deg, var(--surface) 0%, var(--card-topo) 100%);
  position:relative;
}
/* Fio de luz no topo do cartao — some ate o mouse chegar. */
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--raio) var(--raio) 0 0;
  background:linear-gradient(90deg, var(--azul-500), var(--laranja));
  opacity:0; transition:opacity var(--trans);
}
.card:hover{
  box-shadow:var(--sombra-3); border-color:var(--azul-400);
  transform:translateY(-3px); background:linear-gradient(160deg, var(--surface) 0%, var(--card-topo-hover) 100%);
}
.card:hover::before{opacity:1}
.card.sem-realce::before{display:none}
.card.sem-realce:hover{transform:none; box-shadow:var(--sombra-2); border-color:var(--linha-forte)}
.card-tit{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.card-tit h2,.card-tit h3{margin:0}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}

/* KPI */
.kpi{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px; box-shadow:var(--sombra-1); position:relative; overflow:hidden; transition:all var(--trans);
}
.kpi::after{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--azul-500)}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--sombra-2)}
.kpi.k-laranja::after{background:var(--laranja)} .kpi.k-verde::after{background:var(--verde)}
.kpi.k-vermelho::after{background:var(--vermelho)} .kpi.k-amarelo::after{background:var(--amarelo)}
.kpi.k-roxo::after{background:var(--roxo)} .kpi.k-ciano::after{background:var(--ciano)}
.kpi-rot{font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--texto3); font-weight:700}
.kpi-num{font-size:2.1rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:4px 0 2px}
.kpi-sub{font-size:.8rem; color:var(--texto3)}

/* ─────────── Selos ─────────── */
.selo{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; line-height:1.5;
}
.selo-azul{background:var(--azul-100); color:var(--azul-600)}
:root[data-tema="escuro"] .selo-azul{color:var(--azul-400)}
.selo-laranja{background:var(--laranja-suave); color:var(--laranja)}
.selo-verde{background:var(--verde-suave); color:var(--verde)}
.selo-vermelho{background:var(--vermelho-suave); color:var(--vermelho)}
.selo-amarelo{background:var(--amarelo-suave); color:var(--amarelo)}
.selo-cinza{background:var(--bg2); color:var(--texto3)}
.selo-solido{color:#fff}

/* ─────────── Formularios ─────────── */
.campo{margin-bottom:18px}
.campo > label,.rot{display:block; font-weight:700; font-size:.87rem; margin-bottom:7px; color:var(--texto2)}
.campo .ajuda{font-size:.79rem; color:var(--texto3); margin:-2px 0 7px; font-weight:400; line-height:1.45}
.obrig{color:var(--vermelho); font-weight:800}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],
input[type=number],input[type=tel],input[type=search],select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--linha-forte); border-radius:var(--raio-sm);
  background:var(--surface); color:var(--texto); font-family:inherit; font-size:1rem;
  transition:all var(--trans); -webkit-appearance:none; appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--texto3) 50%),linear-gradient(135deg,var(--texto3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px}
textarea{min-height:110px; resize:vertical; line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azul-500); box-shadow:var(--glow)}
input::placeholder,textarea::placeholder{color:var(--texto3); opacity:.85}
input[type=file]{width:100%; padding:11px; border:1.5px dashed var(--linha-forte); border-radius:var(--raio-sm); background:var(--surface2); color:var(--texto2); font-size:.9rem}
.linha{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
fieldset{border:1px solid var(--linha); border-radius:var(--raio); padding:18px; margin:0 0 20px; background:var(--surface)}
legend{font-weight:800; padding:0 10px; color:var(--azul-600); font-size:.95rem}
:root[data-tema="escuro"] legend{color:var(--azul-400)}
.check{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.94rem; color:var(--texto2); line-height:1.5}
.check input{width:20px; height:20px; flex:none; margin-top:1px; accent-color:#3268a3}

/* Opcoes em cartao (GUT, sim/nao) */
.opcoes{display:grid; gap:10px}
.opcoes.col3{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.opcoes.col2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opcao{
  position:relative; display:block; border:1.5px solid var(--linha-forte); border-radius:var(--raio-sm);
  padding:13px 15px; cursor:pointer; background:var(--surface); transition:all var(--trans);
}
.opcao:hover{border-color:var(--azul-400); box-shadow:var(--sombra-1); transform:translateY(-1px)}
.opcao input{position:absolute; opacity:0; pointer-events:none}
.opcao b{display:block; font-size:.9rem; margin-bottom:2px}
.opcao small{color:var(--texto3); font-size:.79rem; line-height:1.4; display:block}
.opcao.sel{border-color:var(--azul-500); background:var(--azul-100); box-shadow:var(--glow)}
.opcao.sel b{color:var(--azul-600)}
:root[data-tema="escuro"] .opcao.sel b{color:var(--texto)}
.opcao.sel::after{content:"OK"; position:absolute; top:8px; right:10px; font-size:.62rem; font-weight:800; color:#fff; background:var(--azul-500); padding:2px 6px; border-radius:5px}

/* ─────────── Alertas ─────────── */
.alerta{
  padding:14px 17px; border-radius:var(--raio-sm); margin-bottom:18px; font-size:.93rem;
  border-left:4px solid; display:flex; gap:11px; align-items:flex-start; line-height:1.5;
}
.alerta b{font-weight:700}
.al-ok{background:var(--verde-suave); border-color:var(--verde); color:var(--verde)}
.al-erro{background:var(--vermelho-suave); border-color:var(--vermelho); color:var(--vermelho)}
.al-aviso{background:var(--amarelo-suave); border-color:var(--amarelo); color:var(--amarelo)}
.al-info{background:var(--azul-100); border-color:var(--azul-500); color:var(--azul-600)}
:root[data-tema="escuro"] .al-info{color:var(--azul-400)}

/* ─────────── Tabelas ─────────── */
.tabela-rol{overflow-x:auto; border:1px solid var(--linha); border-radius:var(--raio); background:var(--surface); box-shadow:var(--sombra-1)}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px}
thead th{
  background:var(--surface2); padding:12px 14px; text-align:left; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--texto3); border-bottom:1px solid var(--linha); white-space:nowrap;
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--linha); vertical-align:middle}
tbody tr{transition:background var(--trans)}
tbody tr:hover{background:var(--surface2)}
tbody tr:last-child td{border-bottom:none}
.t-num{font-variant-numeric:tabular-nums; text-align:right}
.mono{font-family:var(--mono); font-size:.86em}

/* ─────────── Kanban ─────────── */
/* As 6 etapas do fluxo cabem juntas na largura util: nada de rolagem lateral.
   Abaixo de 1250px a grade quebra em 3, depois 2, depois 1 coluna — o Kanban
   passa a ser lido de cima para baixo, que e como se le no celular. */
.kanban{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; padding:4px 0 18px; align-items:start}
.kb-col{
  min-width:0; background:var(--bg2); border:1px solid var(--linha); border-radius:var(--raio);
  display:flex; flex-direction:column; max-height:calc(100vh - 265px);
}
@media (max-width:1450px){ .kanban{gap:8px} .kb-col{max-height:calc(100vh - 250px)} }
@media (max-width:1250px){ .kanban{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} .kb-col{max-height:none} }
@media (max-width:820px) { .kanban{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px) { .kanban{grid-template-columns:1fr} }
.kb-cab{padding:11px 12px; border-bottom:1px solid var(--linha); display:flex; align-items:center; gap:9px; background:var(--bg2); border-radius:var(--raio) var(--raio) 0 0}
.kb-ponto{width:10px; height:10px; border-radius:50%; flex:none}
.kb-cab b{flex:1; font-size:.82rem; line-height:1.2; min-width:0}
.kb-qtd{background:var(--surface); border:1px solid var(--linha); border-radius:999px; padding:1px 9px; font-size:.76rem; font-weight:700; color:var(--texto3)}
.kb-lista{padding:9px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; min-height:110px}
.kb-lista.sobre{background:var(--azul-100); outline:2px dashed var(--azul-400); outline-offset:-6px}
.kb-card{
  background:var(--surface); border:1px solid var(--linha); border-left:4px solid var(--azul-500);
  border-radius:var(--raio-sm); padding:10px 11px; cursor:grab; box-shadow:var(--sombra-1);
  transition:all var(--trans); overflow-wrap:anywhere;
}
.kb-card:hover{box-shadow:var(--sombra-3); transform:translateY(-3px); border-color:var(--azul-400)}
.kb-card:active{cursor:grabbing}
.kb-card.arrastando{opacity:.45}
.kb-card .kb-prot{font-family:var(--mono); font-size:.74rem; color:var(--texto3); font-weight:700}
.kb-card .kb-tit{font-weight:700; font-size:.85rem; margin:4px 0 7px; line-height:1.35; color:var(--texto)}
.kb-meta{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.kb-vazio{text-align:center; color:var(--texto3); font-size:.83rem; padding:22px 10px; font-style:italic}

/* ─────────── Graficos (SVG/CSS puro) ─────────── */
.barras{display:flex; flex-direction:column; gap:11px}
.barra-item{display:grid; grid-template-columns:minmax(96px,32%) 1fr auto; gap:11px; align-items:center; font-size:.86rem}
.barra-nome{color:var(--texto2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barra-trilha{background:var(--bg2); border-radius:999px; height:11px; overflow:hidden}
.barra-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--azul-600),var(--azul-400)); transition:width .8s cubic-bezier(.4,0,.2,1)}
.barra-val{font-weight:800; color:var(--texto); font-variant-numeric:tabular-nums; min-width:34px; text-align:right}

.heat{display:grid; grid-template-columns:auto repeat(3,1fr); gap:5px; font-size:.8rem}
.heat-cel{padding:13px 6px; border-radius:8px; text-align:center; font-weight:800; color:#fff; transition:all var(--trans)}
.heat-cel:hover{transform:scale(1.06); box-shadow:var(--sombra-2)}
.heat-rot{padding:11px 6px; color:var(--texto3); font-weight:700; font-size:.74rem; display:grid; place-items:center; text-align:center}

.spark{display:flex; align-items:flex-end; gap:4px; height:86px}
.spark-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:2px}
.spark-b{background:linear-gradient(180deg,var(--azul-400),var(--azul-600)); border-radius:3px 3px 0 0; min-height:3px; transition:all var(--trans)}
.spark-b:hover{filter:brightness(1.25)}
.spark-b.b2{background:linear-gradient(180deg,#4ade80,#16a34a); border-radius:0 0 3px 3px}
.spark-rot{display:flex; gap:4px; margin-top:6px}
.spark-rot span{flex:1; text-align:center; font-size:.66rem; color:var(--texto3); font-weight:700}
.donut{display:grid; place-items:center; position:relative}
.donut svg{transform:rotate(-90deg)}
.donut-centro{position:absolute; text-align:center}
.donut-centro b{font-size:1.5rem; font-weight:800; display:block; line-height:1.1}
.donut-centro span{font-size:.72rem; color:var(--texto3)}
.legenda{display:flex; flex-wrap:wrap; gap:9px 15px; margin-top:14px; font-size:.8rem; color:var(--texto2)}
.legenda i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px}

/* ─────────── Linha do tempo ─────────── */
.timeline{position:relative; padding-left:26px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--linha)}
.tl-item{position:relative; padding-bottom:18px}
.tl-item::before{content:""; position:absolute; left:-24px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--azul-500); border:2px solid var(--surface); box-shadow:0 0 0 2px var(--linha)}
.tl-item.tl-verde::before{background:var(--verde)} .tl-item.tl-laranja::before{background:var(--laranja)}
.tl-item.tl-vermelho::before{background:var(--vermelho)} .tl-item.tl-roxo::before{background:var(--roxo)}
.tl-quando{font-size:.76rem; color:var(--texto3); font-weight:600}
.tl-txt{font-size:.92rem; margin-top:2px}

/* ─────────── Painel: layout com barra lateral ─────────── */
.painel{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
/* A lateral e uma coluna de altura fixa: a MARCA nao rola, so a lista de
   itens rola por dentro. Antes a coluna inteira rolava e o cabecalho
   (logotipo + "Painel da Qualidade") sumia junto com o menu. */
.lateral{
  background:var(--azul-900); color:#cddcee; position:sticky; top:0;
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; padding:0;
}
:root[data-tema="escuro"] .lateral{background:#08111e}
.lateral-marca{
  padding:18px; border-bottom:1px solid rgba(255,255,255,.09);
  display:flex; gap:11px; align-items:center;
  flex:none;                       /* fica parado no topo enquanto o menu rola */
  background:var(--azul-900); z-index:2;
}
:root[data-tema="escuro"] .lateral-marca{background:#08111e}
/* Só a lista de itens rola. min-height:0 é o que permite o filho de um flex
   encolher abaixo do conteúdo — sem isso o nav não rola, ele estoura. */
.lateral > nav{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:22px}
.lateral-marca .chip-logo{flex:none}   /* o logo nao pode ser espremido pelo texto */
.lateral-marca > span:not(.chip-logo){min-width:0}
.lateral-marca .marca-img{height:34px; width:auto; display:block}
/* O X so existe no celular: no desktop a lateral esta sempre aberta. */
.btn-fechar-lateral{display:none}
@media (max-width:980px){
  .btn-fechar-lateral{
    display:grid; place-items:center; margin-left:auto; flex:none;
    width:38px; height:38px; border-radius:10px; cursor:pointer;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
    color:#cddcee; font-size:1.1rem; line-height:1; font-family:inherit;
    transition:all var(--trans);
  }
  .btn-fechar-lateral:hover{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4)}
  .btn-fechar-lateral:focus-visible{outline:2px solid var(--azul-400); outline-offset:2px}
}
.lateral-marca .chip-logo{background:#fff; border-radius:8px; padding:5px 8px; border:none}
.lateral-marca .marca-logo{box-shadow:none}
.lateral-marca b{color:#fff; font-size:.98rem; display:block}
.lateral-marca span{font-size:.68rem; color:#9fbcda; text-transform:uppercase; letter-spacing:.07em; font-weight:700}
.lat-sec{padding:15px 18px 5px; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:#8aa8c8; font-weight:800}
.lateral a{
  display:flex; align-items:center; gap:11px; padding:11px 18px; color:#cddcee; font-size:.91rem;
  font-weight:600; border-left:3px solid transparent; transition:all var(--trans);
}
.lateral a:hover{background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--azul-400)}
.lateral a.ativo{background:rgba(79,139,201,.26); color:#fff; border-left-color:#ea580c}
.lateral a .ic{width:20px; text-align:center; font-size:1rem; flex:none}
.conteudo{padding:0 0 40px; min-width:0; background:var(--bg)}
.barra-topo{
  display:flex; align-items:center; gap:12px; padding:13px 26px; background:var(--surface);
  border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:50; box-shadow:var(--sombra-1); flex-wrap:wrap;
}
.barra-topo h1{margin:0; font-size:1.2rem}
.usr{display:flex; align-items:center; gap:10px; font-size:.86rem}
.usr-av{
  width:37px; height:37px; border-radius:50%; background:linear-gradient(135deg,var(--azul-600),var(--azul-400));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none;
}
.usr b{display:block; line-height:1.2} .usr span{color:var(--texto3); font-size:.75rem}
.pag{padding:24px 26px}
.veu{display:none}
@media (max-width:980px){
  .painel{grid-template-columns:1fr}
  .lateral{
    position:fixed; inset:0 auto 0 0; width:270px; z-index:90; transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:var(--sombra-3);
  }
  .lateral.aberta{transform:translateX(0)}
  .veu{display:block; position:fixed; inset:0; background:rgba(9,20,36,.55); z-index:80; opacity:0; visibility:hidden; transition:all var(--trans)}
  .veu.aberto{opacity:1; visibility:visible}
  .pag{padding:16px 5vw} .barra-topo{padding:11px 5vw}
}

/* ─────────── Diversos ─────────── */
.abas{display:flex; gap:4px; border-bottom:1px solid var(--linha); margin-bottom:20px; overflow-x:auto}
.aba{padding:11px 17px; border:none; background:none; color:var(--texto3); font-weight:700; font-size:.9rem; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; font-family:inherit; transition:all var(--trans)}
.aba:hover{color:var(--azul-500)} .aba.ativa{color:var(--azul-600); border-bottom-color:var(--azul-600)}
:root[data-tema="escuro"] .aba.ativa{color:var(--azul-400); border-bottom-color:var(--azul-400)}
.painel-aba{display:none} .painel-aba.ativa{display:block; animation:sobe .3s ease}
@keyframes sobe{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.rev{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.rev.vis{opacity:1; transform:none}
.sep{height:1px; background:var(--linha); margin:22px 0; border:none}
.centro{text-align:center} .dir{text-align:right}
.mt0{margin-top:0} .mb0{margin-bottom:0} .mt16{margin-top:16px} .mt24{margin-top:24px}
.flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.flex-fim{margin-left:auto}
.pequeno{font-size:.83rem; color:var(--texto3)}
.oculto{display:none !important}
.rodape{
  border-top:1px solid var(--linha); padding:26px 0; margin-top:40px;
  text-align:center; color:var(--texto3); font-size:.84rem; background:var(--surface);
}
.rodape b{color:var(--texto2)}
.pill-fluxo{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.78rem; color:var(--texto3)}
.pill-fluxo .p{padding:4px 11px; border-radius:999px; background:var(--bg2); font-weight:700}
.pill-fluxo .p.at{background:var(--azul-700); color:#fff}
.pill-fluxo .p.ok{background:var(--verde-suave); color:var(--verde)}
.passo{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
.passo-n{width:30px; height:30px; border-radius:50%; background:var(--azul-700); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none}

/* ══════════════════════════════════════════════════════════════════════════
   rev01 — ajustes pedidos pela Qualidade (01/09/2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Rolagem horizontal SEMPRE visivel onde ela e inevitavel ───
   Navegador esconde a barra ate o mouse chegar perto; numa tabela larga isso
   faz o usuario nem descobrir que ha mais coluna a direita. Aqui ela fica
   pintada e permanente, com uma dica textual acima. */
.tabela-rol{scrollbar-width:auto; scrollbar-color:var(--azul-400) var(--bg2); padding-bottom:2px}
.tabela-rol::-webkit-scrollbar{height:12px; background:var(--bg2)}
.tabela-rol::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--azul-500),var(--azul-400));
  border-radius:99px; border:2px solid var(--bg2);
}
.tabela-rol::-webkit-scrollbar-thumb:hover{background:var(--azul-600)}
.tabela-rol::-webkit-scrollbar-track{background:var(--bg2); border-radius:99px}
.dica-rolagem{
  display:none; align-items:center; gap:7px; font-size:.78rem; color:var(--texto3);
  font-weight:700; margin-bottom:7px;
}
.dica-rolagem.ativa{display:flex}
.dica-rolagem::before{content:"↔"; font-size:1rem; color:var(--azul-500)}

/* ─── Lista de NCs: tabela compacta que cabe; vira cartao em tela estreita ─── */
/* Larguras em porcentagem e layout automatico: o assunto fica com a folga,
   as colunas de selo nunca quebram no meio da palavra. */
.tab-ncs{min-width:0; width:100%; font-size:.85rem}
.tab-ncs thead th{padding:10px 8px; font-size:.68rem; letter-spacing:.03em}
.tab-ncs tbody td{padding:11px 8px; vertical-align:top}
.tab-ncs .c-prot{width:13%; white-space:nowrap}
.tab-ncs .c-assunto{width:33%; overflow-wrap:anywhere}
.tab-ncs .c-prio{width:11%; white-space:nowrap}
.tab-ncs .c-sit{width:13%}
.tab-ncs .c-resp{width:14%; overflow-wrap:anywhere}
.tab-ncs .c-prazo{width:11%; white-space:nowrap}
.tab-ncs .c-acao{width:5%; white-space:nowrap; text-align:right}
.tab-ncs .c-prot .pequeno{white-space:nowrap}
.tab-ncs .rot-cel{display:none}
@media (max-width:1340px){
  .tab-ncs{font-size:.8rem}
  .tab-ncs thead th,.tab-ncs tbody td{padding:9px 6px}
}

@media (max-width:1080px){
  .tabela-rol.rol-cartoes{overflow:visible; border:none; background:none; box-shadow:none}
  .rol-cartoes .tab-ncs,.rol-cartoes .tab-ncs tbody,.rol-cartoes .tab-ncs tr,.rol-cartoes .tab-ncs td{display:block; width:auto}
  .rol-cartoes .tab-ncs thead{display:none}
  .rol-cartoes .tab-ncs tr{
    background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
    box-shadow:var(--sombra-1); padding:12px 14px; margin-bottom:11px;
  }
  .rol-cartoes .tab-ncs tr:hover{box-shadow:var(--sombra-2); border-color:var(--azul-400)}
  .rol-cartoes .tab-ncs td{border:none; padding:4px 0; display:flex; gap:9px; align-items:baseline}
  .rol-cartoes .tab-ncs td .rot-cel{
    display:block; flex:0 0 7rem; font-size:.66rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--texto3); font-weight:800; padding-top:2px;
  }
  .rol-cartoes .tab-ncs .c-acao{justify-content:flex-end; margin-top:8px}
  .rol-cartoes .tab-ncs .c-acao .rot-cel{display:none}
  .rol-cartoes .tab-ncs .c-assunto{display:block}
  .rol-cartoes .tab-ncs .c-assunto .rot-cel{display:none}
  .rol-cartoes .tab-ncs .c-assunto b{font-size:.95rem; line-height:1.35}
}
/* Celular estreito: rotulo em cima do valor, para o texto ter a largura toda */
@media (max-width:430px){
  .rol-cartoes .tab-ncs td{display:block}
  .rol-cartoes .tab-ncs td .rot-cel{flex:none; margin-bottom:1px}
  .rol-cartoes .tab-ncs tr{padding:13px 15px}
}

/* ─── Destaque amarelo do abre-fecha de obra/projeto ─── */
.abre-destaque > summary{
  cursor:pointer; font-weight:800; padding:11px 14px; border-radius:var(--raio-sm);
  background:var(--destaque-amarelo); border:1px solid var(--destaque-amarelo-linha);
  border-left:5px solid var(--destaque-amarelo-linha); color:var(--texto);
  list-style:none; transition:all var(--trans);
}
.abre-destaque > summary::-webkit-details-marker{display:none}
.abre-destaque > summary::before{content:"➕ "; font-weight:800}
.abre-destaque[open] > summary::before{content:"➖ "}
.abre-destaque > summary:hover{box-shadow:var(--sombra-2); filter:brightness(1.03)}
.abre-destaque[open] > summary{border-radius:var(--raio-sm) var(--raio-sm) 0 0}

/* ─── Campo de senha com olho ─── */
.campo-senha{position:relative; display:block}
.campo-senha input{padding-right:46px; width:100%}
.olho-senha{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; background:none; cursor:pointer;
  border-radius:8px; display:grid; place-items:center; font-size:1.05rem; line-height:1;
  color:var(--texto3); transition:all var(--trans);
}
.olho-senha:hover{background:var(--bg2); color:var(--azul-500)}
.olho-senha:focus-visible{outline:2px solid var(--azul-400); outline-offset:1px}

/* ─── Figuras de fluxo (BPMN) ─── */
.figura-fluxo{margin:0 0 18px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--surface); overflow:hidden; box-shadow:var(--sombra-1); transition:all var(--trans)}
.figura-fluxo:hover{box-shadow:var(--sombra-3); border-color:var(--azul-400)}
.figura-fluxo .moldura{overflow-x:auto; background:var(--surface2);
  scrollbar-width:auto; scrollbar-color:var(--azul-400) var(--bg2)}
.figura-fluxo .moldura::-webkit-scrollbar{height:11px; background:var(--bg2)}
.figura-fluxo .moldura::-webkit-scrollbar-thumb{background:var(--azul-400); border-radius:99px}
.figura-fluxo img{min-width:720px; width:100%; display:block}
.figura-fluxo figcaption{padding:11px 15px; font-size:.83rem; color:var(--texto3);
  border-top:1px solid var(--linha); display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.figura-fluxo figcaption b{color:var(--texto2)}

/* ─── Relatorio fotografico (ficha impressa da NC) ─── */
.foto-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; padding:12px}
.foto-item{border:1px solid #dbe4ef; border-radius:8px; overflow:hidden; background:#fff; break-inside:avoid}
.foto-item img{width:100%; height:190px; object-fit:cover; display:block; background:#f0f4f9}
.foto-cap{padding:8px 10px; font-size:.7rem; color:#5b6f8c; line-height:1.5; border-top:1px solid #dbe4ef}
.foto-cap b{display:block; color:#1e3a5f; font-size:.76rem; margin-bottom:2px; overflow-wrap:anywhere}
.foto-cap .meta{font-family:var(--mono); font-size:.62rem; overflow-wrap:anywhere; color:#7b8ba3}

/* ─── Caixa de incentivo a identificacao ─── */
.caixa-incentivo{
  border:1px solid var(--verde); border-left:5px solid var(--verde);
  background:var(--verde-suave); border-radius:var(--raio); padding:16px 18px; margin-bottom:18px;
}
.caixa-incentivo h4{margin:0 0 6px; color:var(--verde); font-size:.98rem}
.caixa-incentivo p{margin:0; font-size:.89rem; color:var(--texto2); line-height:1.6}
.caixa-incentivo p + p{margin-top:8px}

/* ─── Barra superior do painel: congelada tambem no celular ─── */
.barra-topo{position:sticky; top:0; z-index:70; backdrop-filter:saturate(180%) blur(10px)}

/* ─── Colunas anuais do grafico de evolucao ─── */
.ano-par{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-top:16px}
.ano-cel{
  border:1px solid var(--linha); border-radius:var(--raio-sm); padding:12px 14px;
  background:var(--surface2); transition:all var(--trans);
}
.ano-cel:hover{border-color:var(--azul-400); box-shadow:var(--sombra-1); transform:translateY(-2px)}
.ano-cel .rot{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--texto3); font-weight:800; margin:0}
.ano-cel .num{font-size:1.7rem; font-weight:800; line-height:1.15; letter-spacing:-.02em}
.ano-cel .sub{font-size:.74rem; color:var(--texto3)}
.ano-cel.a-abertas .num{color:var(--azul-500)}
.ano-cel.a-encerradas .num{color:var(--verde)}
.ano-cel.a-saldo .num{color:var(--laranja)}


/* ─────────── Pagina "O que e NC" (conscientizacao) ───────────
   Publico: da obra ao escritorio. O titulo de cada bloco precisa saltar aos
   olhos de quem so vai passar o olho, entao ele ganha numero grande, faixa
   colorida e respiro generoso. */
.bloco-nc{padding:34px 0 8px; scroll-margin-top:80px}
.bloco-cab{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:3px solid var(--azul-500);
}
.bloco-n{
  width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--azul-700),var(--azul-500)); color:#fff;
  font-weight:800; font-size:1.4rem; box-shadow:var(--sombra-2);
}
.bloco-cab h2{margin:0; font-size:clamp(1.25rem,3.2vw,1.7rem); line-height:1.2}

.frase-forte{
  font-size:1.14rem; line-height:1.55; color:var(--texto);
  border-left:4px solid var(--laranja); padding-left:15px; margin:0 0 16px;
}

.mini-card{
  border:1px solid var(--linha); border-radius:var(--raio-sm); padding:14px;
  background:var(--surface2); display:flex; flex-direction:column; gap:3px;
  transition:all var(--trans);
}
.mini-card:hover{border-color:var(--azul-400); box-shadow:var(--sombra-1); transform:translateY(-2px)}
.mini-ic{font-size:1.5rem; line-height:1}
.mini-card b{font-size:.95rem}
.mini-card span:not(.mini-ic){font-size:.82rem; color:var(--texto3); line-height:1.45}

.exemplo-card{border-top:4px solid var(--azul-400); padding-top:16px}
.ex-tag{
  display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--azul-600); background:var(--azul-100);
  padding:3px 10px; border-radius:99px; margin-bottom:9px;
}
:root[data-tema="escuro"] .ex-tag{color:var(--azul-400)}

/* Escada de custo: o mesmo problema, tres momentos, tres precos */
.escada{display:grid; gap:12px}
.degrau{
  display:grid; grid-template-columns:minmax(150px,1fr) minmax(120px,auto) minmax(0,2fr);
  gap:14px; align-items:center; padding:16px 18px; border-radius:var(--raio);
  border:1px solid var(--linha); border-left-width:6px; background:var(--surface);
  box-shadow:var(--sombra-1); transition:all var(--trans);
}
.degrau:hover{box-shadow:var(--sombra-2); transform:translateX(3px)}
.degrau.d-verde{border-left-color:var(--verde)}
.degrau.d-amarelo{border-left-color:var(--amarelo)}
.degrau.d-vermelho{border-left-color:var(--vermelho)}
.deg-quando{font-size:.79rem; text-transform:uppercase; letter-spacing:.05em; color:var(--texto3); font-weight:800}
.deg-custo{font-size:1.12rem; font-weight:800; letter-spacing:-.01em}
.d-verde .deg-custo{color:var(--verde)}
.d-amarelo .deg-custo{color:var(--amarelo)}
.d-vermelho .deg-custo{color:var(--vermelho)}
.deg-txt{font-size:.9rem; color:var(--texto2); line-height:1.5}
@media (max-width:700px){
  .degrau{grid-template-columns:1fr; gap:5px; padding:14px 16px}
  .deg-custo{font-size:1.25rem}
}

.razao{border-top:4px solid var(--azul-500)}
.razao h3{margin-top:0; font-size:1.02rem}
.razao p{font-size:.92rem; color:var(--texto2); line-height:1.6}

.ganha{border-top:5px solid var(--azul-500)}
.ganha h3{margin-top:0; font-size:1.06rem}
.ganha ul{margin:0; padding-left:20px; color:var(--texto2); line-height:1.85; font-size:.92rem}
.ganha.g-azul{border-top-color:var(--azul-500)}
.ganha.g-verde{border-top-color:var(--verde)}
.ganha.g-laranja{border-top-color:var(--laranja)}
.ganha.g-roxo{border-top-color:var(--roxo)}

.resultado{border-top:5px solid var(--linha-forte)}
.resultado h3{margin-top:0; font-size:1.04rem}
.resultado ul{margin:0; padding-left:20px; color:var(--texto2); line-height:1.85; font-size:.92rem}
.resultado.r-empresa{border-top-color:var(--laranja)}
.resultado.r-empresa h3{color:var(--laranja)}
.resultado.r-pessoa{border-top-color:var(--verde)}
.resultado.r-pessoa h3{color:var(--verde)}

/* Quadro "medo x realidade": duas colunas no computador. No celular a coluna
   do medo ficaria com 5 palavras empilhadas uma embaixo da outra, entao vira
   bloco: a frase do medo em cima, a resposta logo abaixo. */
.tab-medo{background:transparent}
.tab-medo .c-medo{width:38%; color:var(--vermelho)}
@media (max-width:760px){
  .tab-medo-cx{border:none; background:none; box-shadow:none; overflow:visible}
  .tab-medo,.tab-medo tbody,.tab-medo tr,.tab-medo td{display:block; width:auto}
  .tab-medo thead{display:none}
  .tab-medo tr{
    background:var(--surface); border:1px solid var(--linha); border-left:4px solid var(--vermelho);
    border-radius:var(--raio-sm); padding:13px 15px; margin-bottom:10px; box-shadow:var(--sombra-1);
  }
  .tab-medo td{border:none; padding:0}
  .tab-medo .c-medo{width:auto; font-size:1rem; margin-bottom:6px}
  .tab-medo .c-medo + td{
    font-size:.9rem; color:var(--texto2); line-height:1.55;
    padding-top:8px; border-top:1px dashed var(--linha-forte);
  }
  .tab-medo .c-medo + td::before{content:"→ "; color:var(--verde); font-weight:800}
}

@media print{
  .topo,.lateral,.barra-topo,.btn,.nav,.tema-btn,.no-print,.veu,.dica-rolagem{display:none !important}
  body{background:#fff} body::before{display:none} .painel{grid-template-columns:1fr}
  .card{break-inside:avoid; box-shadow:none; border:1px solid #ccc; background:#fff !important}
  .card::before{display:none !important}
  /* O relatorio fotografico e o motivo de imprimir: nunca corta uma foto ao meio */
  .foto-grade{grid-template-columns:repeat(2,1fr); gap:10px}
  .foto-item{break-inside:avoid; page-break-inside:avoid}
  .foto-item img{height:auto; max-height:78mm; object-fit:contain}
  .figura-fluxo{break-inside:avoid; box-shadow:none}
  .figura-fluxo .moldura{overflow:visible}
  .figura-fluxo img{min-width:0; width:100%}
  .tabela-rol{overflow:visible !important; border:none; box-shadow:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ==========================================================================
   rev02 — miniaturas de evidência, prévia do upload, foto em tela cheia,
   desafio anti-robô e envio ao responsável sem login
   ========================================================================== */

/* Miniaturas: cartão de tamanho FIXO — a foto não estica com a coluna.
   auto-fill + largura máxima = 2 a 6 por linha conforme a tela, nunca uma
   foto gigante sozinha numa linha inteira. */
.anexo-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.anexo-card{
  margin:0; max-width:210px; min-width:0; background:var(--surface); border:1px solid var(--linha);
  border-radius:var(--raio-sm); overflow:hidden; box-shadow:var(--sombra-1);
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.anexo-card:hover{transform:translateY(-2px); box-shadow:var(--sombra-2); border-color:var(--azul-300)}
.anexo-foto{
  display:grid; place-items:center; aspect-ratio:1/1; background:var(--bg2); overflow:hidden;
  cursor:zoom-in; position:relative;
}
.anexo-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--trans)}
.anexo-foto:hover img{transform:scale(1.06)}
.anexo-foto:focus-visible{outline:3px solid var(--azul-400); outline-offset:-3px}
.anexo-foto::after{
  content:"🔍"; position:absolute; right:6px; bottom:6px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:rgba(15,36,64,.62); font-size:.78rem; opacity:0; transition:opacity var(--trans);
}
.anexo-foto:hover::after,.anexo-foto:focus-visible::after{opacity:1}
.anexo-icone{font-size:2.4rem; cursor:pointer; text-decoration:none}
.anexo-icone::after{display:none}
.anexo-card figcaption{padding:8px 9px 10px; display:grid; gap:2px; font-size:.74rem; color:var(--texto3); min-width:0}
.anexo-card figcaption b{color:var(--texto); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.anexo-card figcaption .btn{margin-top:6px}
.anexo-hash{font-size:.64rem; overflow-wrap:anywhere}

/* Prévia antes do envio */
.previa-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
.previa-item{
  margin:0; position:relative; max-width:150px; min-width:0; background:var(--surface);
  border:1px solid var(--linha); border-left:4px solid var(--verde); border-radius:var(--raio-sm);
  overflow:hidden; box-shadow:var(--sombra-1); transition:box-shadow var(--trans), transform var(--trans);
}
.previa-item:hover{box-shadow:var(--sombra-2); transform:translateY(-1px)}
.previa-erro{border-left-color:var(--vermelho)}
.previa-img{
  display:grid; place-items:center; width:100%; aspect-ratio:1/1; padding:0; border:0;
  background:var(--bg2); overflow:hidden; cursor:zoom-in; font-size:2rem; color:var(--texto2);
}
.previa-img img{width:100%; height:100%; object-fit:cover; display:block}
.previa-img:focus-visible{outline:3px solid var(--azul-400); outline-offset:-3px}
.previa-icone{cursor:default}
.previa-item figcaption{padding:6px 8px 8px; display:grid; gap:1px; font-size:.7rem; color:var(--texto3); min-width:0}
.previa-item figcaption b{color:var(--texto); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.previa-remover{
  position:absolute; top:5px; right:5px; width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(15,36,64,.72); color:#fff; font-size:.85rem; font-weight:800; line-height:1;
  display:grid; place-items:center; transition:background var(--trans), transform var(--trans);
}
.previa-remover:hover,.previa-remover:focus-visible{background:var(--vermelho); transform:scale(1.08); outline:none}

/* Foto em tela cheia */
.foto-veu{
  position:fixed; inset:0; z-index:9999; background:rgba(6,14,26,.88); display:grid; place-items:center;
  padding:56px 16px 20px; animation:fotoEntra .18s ease-out; cursor:zoom-out;
}
.foto-veu figure{margin:0; max-width:min(1100px,100%); max-height:100%; display:grid; gap:10px; cursor:default}
.foto-veu img{max-width:100%; max-height:calc(100vh - 130px); object-fit:contain; border-radius:var(--raio-sm);
  box-shadow:0 20px 60px rgba(0,0,0,.5); background:#0b1626; justify-self:center}
.foto-veu figcaption{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; color:#dbe6f3; font-size:.85rem;
  overflow-wrap:anywhere; text-align:center}
.foto-veu figcaption a{color:#8fbbe4; font-weight:700}
.foto-veu figcaption a:hover{color:#fff}
.foto-fechar{
  position:fixed; top:12px; right:14px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; font-size:1.15rem; cursor:pointer; transition:background var(--trans), transform var(--trans);
}
.foto-fechar:hover,.foto-fechar:focus-visible{background:var(--vermelho); transform:rotate(90deg); outline:none}
@keyframes fotoEntra{from{opacity:0}to{opacity:1}}

/* Desafio "não sou robô" */
.desafio-robo{background:var(--amarelo-suave); border-color:var(--destaque-amarelo-linha); border-left:5px solid var(--amarelo)}
:root[data-tema="escuro"] .desafio-robo{background:var(--destaque-amarelo)}
.desafio-robo input{font-size:1.1rem; font-weight:800; text-align:center}

/* Envio ao responsável (painel) */
.resp-envio{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between;
  margin-top:16px; padding:13px 15px; border:1px dashed var(--linha-forte); border-radius:var(--raio-sm);
  background:var(--surface2); transition:border-color var(--trans), box-shadow var(--trans);
}
.resp-envio:hover{border-color:var(--azul-300); box-shadow:var(--glow)}
.resp-envio > div:first-child{display:grid; gap:2px; min-width:0}
.resp-envio .pequeno{overflow-wrap:anywhere}

[hidden]{display:none !important}

@media (max-width:520px){
  .anexo-grade{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px}
  .previa-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .previa-item,.anexo-card{max-width:none}
  .foto-veu{padding:60px 8px 14px}
}
@media print{
  .foto-veu,.previa-remover,.resp-envio{display:none !important}
  .anexo-card{break-inside:avoid; box-shadow:none}
}