/* ============================================
   Visual oficial PA GOLD
   Azul corporativo + amarelo + tipografia limpa
   ============================================ */
:root{
  --azul-pa:        #0F4471;
  --azul-pa-escuro: #0a2f4e;
  --azul-pa-claro:  #1e5b94;
  --amarelo-pa:     #F6BE2C;
  --amarelo-escuro: #D9A516;
  --branco:         #ffffff;
  --cinza-1:        #f5f7fa;
  --cinza-2:        #e6ebf2;
  --cinza-3:        #c8d0db;
  --cinza-4:        #6b7380;
  --cinza-5:        #2c3340;
  --ok:             #2e8b57;
  --aviso:          #d68910;
  --erro:           #c0392b;
  --linha:          #e0e6ee;
  --sombra-sm:      0 1px 3px rgba(15,68,113,.08);
  --sombra:         0 4px 14px rgba(15,68,113,.10);
  --sombra-lg:      0 10px 30px rgba(15,68,113,.15);
  --raio:           10px;
  --card-bg:        #ffffff;
  --bg-app:         #f5f7fa;
}

/* ====== DARK MODE ====== */
[data-tema="dark"]{
  --azul-pa:        #2e7cb8;
  --azul-pa-escuro: #1e5b94;
  --azul-pa-claro:  #4a9bd7;
  --amarelo-pa:     #F6BE2C;
  --amarelo-escuro: #D9A516;
  --branco:         #232a38;
  --cinza-1:        #1a1f2b;
  --cinza-2:        #232a38;
  --cinza-3:        #3a4456;
  --cinza-4:        #8a94a8;
  --cinza-5:        #e3e8f0;
  --ok:             #44b07b;
  --aviso:          #f0b54e;
  --erro:           #e57368;
  --linha:          #2e3645;
  --sombra-sm:      0 1px 3px rgba(0,0,0,.30);
  --sombra:         0 4px 14px rgba(0,0,0,.35);
  --sombra-lg:      0 10px 30px rgba(0,0,0,.50);
  --card-bg:        #232a38;
  --bg-app:         #14181f;
}
[data-tema="dark"] body{background:var(--bg-app)}
[data-tema="dark"] .tabela,
[data-tema="dark"] .form-grid,
[data-tema="dark"] .acoes-massa,
[data-tema="dark"] .preview-cracha-painel,
[data-tema="dark"] .timeline-wrap,
[data-tema="dark"] .stat-card,
[data-tema="dark"] .rel-stat,
[data-tema="dark"] .rel-bloco,
[data-tema="dark"] .tl-content,
[data-tema="dark"] .card-info,
[data-tema="dark"] .vazio,
[data-tema="dark"] .flash,
[data-tema="dark"] .toast,
[data-tema="dark"] .login-box,
[data-tema="dark"] .dlg-imprimir,
[data-tema="dark"] .cmdk-panel{background:var(--card-bg); color:var(--cinza-5)}
[data-tema="dark"] .btn{background:var(--cinza-2); color:var(--cinza-5)}
[data-tema="dark"] .btn:hover{background:var(--cinza-3)}
[data-tema="dark"] .btn.primario{background:var(--azul-pa); color:white}
[data-tema="dark"] .btn.destaque{background:var(--amarelo-pa); color:#1a1a1a}
[data-tema="dark"] .form-grid input,
[data-tema="dark"] .form-grid select,
[data-tema="dark"] .form-grid textarea,
[data-tema="dark"] .login-box input{
  background:var(--cinza-1); color:var(--cinza-5); border-color:var(--linha);
}
[data-tema="dark"] .form-grid input::placeholder{color:var(--cinza-4)}
[data-tema="dark"] .tabela tbody tr:hover{background:rgba(255,255,255,.03)}
[data-tema="dark"] .tabela th{background:var(--cinza-1)}
[data-tema="dark"] .sugestoes-dropdown{background:var(--card-bg); border-color:var(--linha)}
[data-tema="dark"] .sug-item:hover, [data-tema="dark"] .sug-item.ativo{background:rgba(255,255,255,.06)}
[data-tema="dark"] .cmdk-item.sel,
[data-tema="dark"] .cmdk-item:hover{background:rgba(255,255,255,.05)}
[data-tema="dark"] .cmdk-foot,
[data-tema="dark"] .dlg-imprimir footer{background:var(--cinza-1)}
[data-tema="dark"] .cmdk-foot kbd{background:var(--cinza-2); color:var(--cinza-5); border-color:var(--cinza-3)}
[data-tema="dark"] .filtro-rapido,
[data-tema="dark"] .filtro-col{background:var(--cinza-1); color:var(--cinza-5); border-color:var(--linha)}
[data-tema="dark"] .preview-cracha-wrap{
  background:repeating-linear-gradient(45deg, var(--cinza-1) 0 10px, var(--bg-app) 10px 20px);
}
[data-tema="dark"] h1, [data-tema="dark"] .tl-head b,
[data-tema="dark"] .rel-stat-num, [data-tema="dark"] .stat-card .stat-num{
  color:var(--cinza-5);
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--cinza-1);
  color:var(--cinza-5);
  font-family:'Inter','Segoe UI',-apple-system,Roboto,sans-serif;
  font-size:14px; line-height:1.55;
  min-height:100vh;
}
a{color:var(--azul-pa-claro); text-decoration:none}
a:hover{color:var(--azul-pa); text-decoration:underline}
h1{font-size:24px; margin:0 0 4px; font-weight:700; color:var(--azul-pa-escuro); letter-spacing:-0.3px}
.hint{color:var(--cinza-4); margin:0; font-size:13px}

/* ============ TOPBAR ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  background:var(--azul-pa);
  background:linear-gradient(135deg, var(--azul-pa-escuro) 0%, var(--azul-pa) 70%, var(--azul-pa-claro) 100%);
  border-bottom:4px solid var(--amarelo-pa);
  box-shadow:var(--sombra);
  position:sticky; top:0; z-index:50;
  height:74px;
}
.brand{
  display:flex; align-items:center; gap:14px;
  font-weight:700; font-size:18px; color:white;
  letter-spacing:0.2px;
}
.brand img{height:46px; width:auto; border-radius:6px}
.brand .titulo-app{display:flex; flex-direction:column; line-height:1.2}
.brand .titulo-app small{font-size:11px; font-weight:400; color:rgba(255,255,255,.75); letter-spacing:1px; text-transform:uppercase}

nav{display:flex; gap:4px; align-items:center}
nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px;
  color:rgba(255,255,255,.85); font-weight:500; font-size:14px;
  transition:.15s;
}
nav a:hover{background:rgba(255,255,255,.12); color:white; text-decoration:none}
nav a.ativo{background:var(--amarelo-pa); color:var(--azul-pa-escuro); font-weight:600}
nav a.ativo:hover{background:var(--amarelo-escuro)}
nav a.logout{color:rgba(255,255,255,.7); margin-left:8px; border-left:1px solid rgba(255,255,255,.18); padding-left:18px}
nav a.logout:hover{color:white; background:rgba(192,57,43,.25)}

main{max-width:1400px; margin:0 auto; padding:28px}

/* ============ FLASHES ============ */
.flashes{margin-bottom:18px; display:flex; flex-direction:column; gap:8px}
.flash{
  padding:13px 18px; border-radius:var(--raio);
  background:white; border-left:4px solid var(--cinza-3);
  box-shadow:var(--sombra-sm); font-weight:500;
}
.flash.ok{border-left-color:var(--ok); color:#1a5036; background:#f0faf4}
.flash.erro{border-left-color:var(--erro); color:#80251b; background:#fdf2f0}

/* ============ PAGE HEAD ============ */
.page-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.page-head .acoes{display:flex; gap:8px; flex-wrap:wrap}

/* ============ BOTÕES ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border:1px solid var(--cinza-3); background:white;
  color:var(--cinza-5); border-radius:8px; cursor:pointer;
  font-size:14px; font-weight:500; font-family:inherit;
  transition:.15s; box-shadow:var(--sombra-sm);
}
.btn:hover{border-color:var(--azul-pa-claro); color:var(--azul-pa); transform:translateY(-1px); box-shadow:var(--sombra)}
.btn.primario{background:var(--azul-pa); border-color:var(--azul-pa); color:white}
.btn.primario:hover{background:var(--azul-pa-claro); border-color:var(--azul-pa-claro); color:white}
.btn.destaque{background:var(--amarelo-pa); border-color:var(--amarelo-pa); color:var(--azul-pa-escuro); font-weight:600}
.btn.destaque:hover{background:var(--amarelo-escuro); border-color:var(--amarelo-escuro); color:var(--azul-pa-escuro)}
.btn.ghost{background:transparent}
.btn.destrutivo:hover{border-color:var(--erro); color:var(--erro); background:#fdf2f0}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn:disabled:hover{background:white; border-color:var(--cinza-3); color:var(--cinza-5); box-shadow:var(--sombra-sm); transform:none}

button.icon{
  background:transparent; border:1px solid transparent; color:var(--cinza-4); cursor:pointer;
  padding:6px 8px; border-radius:6px; transition:.15s;
}
button.icon:hover, a.icon:hover{color:var(--erro); background:#fdf2f0; border-color:#f5c8c1; text-decoration:none}
a.icon{color:var(--cinza-4); padding:6px 8px; border-radius:6px; display:inline-flex; align-items:center; border:1px solid transparent; transition:.15s}
a.icon:hover{color:var(--azul-pa-claro); background:#eaf3ff; border-color:#bcdaf2}

/* ============ TABELA ============ */
.tabela{
  width:100%; border-collapse:collapse;
  background:white; border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra);
}
.tabela th, .tabela td{padding:9px 14px; text-align:left; border-bottom:1px solid var(--linha)}
.tabela th{
  background:var(--cinza-1); font-weight:600; color:var(--azul-pa-escuro);
  font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  border-bottom:2px solid var(--azul-pa);
}
.tabela tbody tr{transition:.1s}
.tabela tbody tr:hover{background:#fafcff}
.tabela tbody tr:last-child td{border-bottom:none}
.tabela td.foto{width:52px}
.tabela td.foto img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--azul-pa); box-shadow:var(--sombra-sm);
}
.sem-foto{
  display:inline-flex; width:38px; height:38px; border-radius:50%;
  background:var(--cinza-2); align-items:center; justify-content:center;
  color:var(--cinza-4); border:2px dashed var(--cinza-3);
}
/* nome numa linha so (evita quebrar em 3 linhas e inflar a altura da linha) */
/* table-layout FIXED: controla larguras e faz o text-overflow:ellipsis funcionar
   (max-width em <td> e ignorado em layout auto). Colunas curtas em px, colunas
   de texto em % — responsivo e sem estourar a largura. */
.tabela-colabs{table-layout:fixed; width:100%}
.tabela-colabs thead th{position:sticky; top:0; z-index:6}   /* cabecalho fixo ao rolar */
.tabela-colabs .col-check{width:42px}
.tabela-colabs .col-foto{width:54px}
.tabela-colabs .col-chapa{width:74px}
.tabela-colabs th[data-col="nome_verso"]{width:22%}
.tabela-colabs .col-setor{width:16%}
.tabela-colabs .col-ger{width:14%}
.tabela-colabs .col-status{width:100px}
.tabela-colabs .col-origem{width:11%}
.tabela-colabs .col-impressao{width:104px}
.tabela-colabs .col-acoes{width:120px}
/* trunca com reticencias (texto completo fica no title/hover) */
.tabela-colabs td.cel-trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabela-colabs .col-chapa, .tabela-colabs .col-status, .tabela-colabs .col-impressao{white-space:nowrap}
.tabela-colabs .col-acoes{text-align:right}
/* Nome: 1 linha + reticencias; chip de tempo embaixo */
.tabela-colabs .nome-cell{display:flex; flex-direction:column; gap:1px; min-width:0}
.tabela-colabs .nome-completo{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; display:block}
.tabela-colabs .nome-cell small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
/* ===== AutoFilter estilo Excel ===== */
.th-filtravel{position:relative; white-space:nowrap}
.th-filtro{
  background:none; border:none; cursor:pointer; color:var(--azul-pa);
  padding:1px 3px; margin-left:5px; border-radius:4px; opacity:.5;
  vertical-align:middle; line-height:1; transition:.12s;
}
.th-filtro .ti{font-size:14px}
.th-filtro:hover{background:rgba(15,68,113,.14); opacity:1}
.tabela th.col-filtrada{background:#fff6de}
.tabela th.col-filtrada .th-filtro{opacity:1; color:#c8940f}
.tabela th.col-asc .th-filtro::after{content:'▲'; font-size:8px; margin-left:3px}
.tabela th.col-desc .th-filtro::after{content:'▼'; font-size:8px; margin-left:3px}

.excel-pop{
  position:absolute; z-index:200; width:270px;
  background:#fff; border:1px solid var(--cinza-3); border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.18); padding:10px;
  display:flex; flex-direction:column; gap:8px; font-size:13px;
  text-transform:none; letter-spacing:normal;
}
.xp-ordena{display:flex; gap:6px}
.xp-ordena button{
  flex:1; padding:6px; border:1px solid var(--cinza-3); background:var(--cinza-1);
  border-radius:6px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600;
  color:var(--azul-pa-escuro); display:flex; align-items:center; justify-content:center; gap:4px;
}
.xp-ordena button:hover{background:var(--azul-pa); color:#fff; border-color:var(--azul-pa)}
.xp-busca{display:flex; align-items:center; gap:6px; border:1px solid var(--cinza-3); border-radius:6px; padding:5px 8px; color:var(--cinza-4)}
.xp-busca input{border:none; outline:none; flex:1; font-family:inherit; font-size:13px; background:none; color:inherit}
.xp-todos{display:flex; align-items:center; gap:8px; padding:4px 2px; border-bottom:1px solid var(--linha); cursor:pointer}
.xp-lista{max-height:240px; overflow-y:auto; display:flex; flex-direction:column}
.xp-item{display:flex; align-items:center; gap:8px; padding:5px 4px; border-radius:5px; cursor:pointer}
.xp-item:hover{background:var(--cinza-1)}
.xp-item span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xp-item input, .xp-todos input{accent-color:var(--azul-pa); width:15px; height:15px; flex:none}
.xp-foot{display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--linha); padding-top:8px}
.xp-foot .btn{padding:6px 16px; font-size:13px}
.filtro-hint{display:inline-flex; align-items:center; gap:5px; color:var(--cinza-4)}
.filtro-hint .ti{font-size:15px}
[data-tema="dark"] .excel-pop{background:var(--cinza-1); border-color:var(--cinza-3); color:var(--texto)}
[data-tema="dark"] .tabela th.col-filtrada{background:rgba(200,148,15,.18)}

.acoes-linha{display:flex; gap:3px; flex-wrap:nowrap; justify-content:flex-end; align-items:center}
.btn-kebab{
  background:none; border:none; cursor:pointer; color:var(--cinza-5);
  width:30px; height:30px; border-radius:7px; display:inline-flex;
  align-items:center; justify-content:center; font-size:18px; transition:.12s;
}
.btn-kebab:hover{background:var(--cinza-2); color:var(--azul-pa)}
/* menu dropdown de acoes (portal no body) */
.row-menu{
  position:absolute; z-index:210; min-width:184px;
  background:#fff; border:1px solid var(--cinza-3); border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.18); padding:6px; display:flex; flex-direction:column;
}
.row-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; padding:9px 11px; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:13.5px; color:var(--texto); transition:.1s;
}
.row-menu button:hover{background:var(--cinza-1)}
.row-menu button .ti{font-size:17px; color:var(--cinza-5)}
.row-menu .rm-sep{height:1px; background:var(--linha); margin:5px 4px}
.row-menu .rm-del{color:var(--erro)}
.row-menu .rm-del .ti{color:var(--erro)}
.row-menu .rm-del:hover{background:rgba(192,57,43,.10)}
[data-tema="dark"] .row-menu{background:var(--cinza-1); border-color:var(--cinza-3)}
.acoes-linha form{display:inline; margin:0}
.imprimir-api{color:var(--amarelo-pa) !important; border:1px solid var(--amarelo-pa) !important}
.imprimir-api:hover{background:var(--amarelo-pa) !important; color:var(--azul-pa-escuro) !important; border-color:var(--amarelo-pa) !important}

/* ============ BADGES ============ */
.badge{
  display:inline-block; padding:4px 11px; border-radius:99px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
.badge.ok{background:#e2f4eb; color:var(--ok)}
.badge.aviso{background:#fdf3e0; color:var(--aviso)}
.badge.erro{background:#fdecea; color:var(--erro)}

/* ============ ESTADO VAZIO ============ */
.vazio{
  text-align:center; padding:70px 20px; color:var(--cinza-4);
  background:white; border-radius:var(--raio); border:2px dashed var(--cinza-3);
}
.vazio .ti{font-size:52px; color:var(--cinza-3); display:block; margin-bottom:14px}
.vazio p{font-size:15px}

/* ============ FORMULÁRIOS ============ */
.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:white; padding:28px; border-radius:var(--raio);
  box-shadow:var(--sombra); border-top:4px solid var(--azul-pa);
}
.form-grid label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--azul-pa-escuro); font-weight:600;
}
.form-grid input, .form-grid select, .form-grid textarea{
  padding:11px 13px; background:var(--cinza-1); border:1px solid var(--linha);
  border-radius:8px; color:var(--cinza-5); font-size:14px; font-family:inherit;
  transition:.15s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  outline:none; border-color:var(--azul-pa); background:white;
  box-shadow:0 0 0 3px rgba(15,68,113,.12);
}
.form-grid input::placeholder{color:var(--cinza-3); font-style:italic}
.form-grid input:disabled{background:var(--cinza-2); color:var(--cinza-4); cursor:not-allowed}
.form-grid .full{grid-column:1/-1}

.preview{
  display:flex; align-items:center; gap:16px;
  padding:14px; background:var(--cinza-1); border-radius:var(--raio);
  border:1px solid var(--linha);
}
.preview img{max-width:120px; max-height:160px; border-radius:8px; border:3px solid var(--azul-pa)}
.preview small{color:var(--cinza-4)}

/* ============ LOGIN ============ */
.login-box{
  max-width:420px; margin:90px auto; padding:38px 34px 32px;
  background:white; border-radius:var(--raio);
  box-shadow:var(--sombra-lg); border-top:5px solid var(--amarelo-pa);
}
.login-box h1{text-align:center; margin-bottom:6px; color:var(--azul-pa-escuro)}
.login-box .hint{text-align:center; margin-bottom:26px}
.login-box form{display:flex; flex-direction:column; gap:14px}
.login-box label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--azul-pa-escuro); font-weight:600}
.login-box input{
  padding:13px 16px; background:var(--cinza-1); border:1px solid var(--linha);
  border-radius:8px; color:var(--cinza-5); font-size:15px;
}
.login-box input:focus{outline:none; border-color:var(--azul-pa); background:white; box-shadow:0 0 0 3px rgba(15,68,113,.12)}
.login-box button{
  padding:13px; background:var(--azul-pa); border:none; border-radius:8px;
  color:white; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-family:inherit; transition:.15s;
  margin-top:6px;
}
.login-box button:hover{background:var(--azul-pa-escuro)}

/* ============ AÇÕES EM MASSA + FILTROS ============ */
.acoes-massa{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:white; padding:12px 16px; border-radius:var(--raio);
  margin-bottom:16px; box-shadow:var(--sombra-sm);
  border-left:4px solid var(--azul-pa);
}
.busca-global{
  display:flex; align-items:center; gap:8px; flex:1; min-width:260px;
  background:var(--cinza-1); padding:8px 14px; border-radius:8px;
  border:1px solid var(--linha); transition:.15s;
}
.busca-global:focus-within{border-color:var(--azul-pa); background:white; box-shadow:0 0 0 3px rgba(15,68,113,.10)}
.busca-global .ti{color:var(--cinza-4)}
.busca-global input{flex:1; background:transparent; border:none; color:var(--cinza-5); font-size:14px; outline:none}
.separador-acoes{width:1px; height:26px; background:var(--linha); margin:0 4px}

.tabela-fila .col-check{width:36px; text-align:center}
.tabela-fila .col-foto{width:60px}
.tabela-fila input[type=checkbox]{width:16px; height:16px; cursor:pointer; accent-color:var(--azul-pa)}

.linha-filtros th{padding:7px 10px !important; background:var(--cinza-1) !important; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.filtro-col{
  width:100%; padding:6px 10px; background:white; border:1px solid var(--linha);
  border-radius:6px; color:var(--cinza-5); font-size:12px; outline:none; transition:.15s;
}
.filtro-col:focus{border-color:var(--azul-pa); box-shadow:0 0 0 2px rgba(15,68,113,.10)}
.filtro-col::placeholder{color:var(--cinza-3); font-style:italic}

/* ============ CARD-INFO ============ */
.card-info{
  background:white; border-radius:var(--raio); padding:20px 24px;
  margin-bottom:18px; box-shadow:var(--sombra-sm);
  border-left:4px solid var(--amarelo-pa);
}
.card-info h3{
  margin:0 0 10px; font-size:16px; display:flex; align-items:center; gap:10px;
  color:var(--azul-pa-escuro);
}
.card-info h3 .ti{color:var(--azul-pa)}
.card-info p{margin:6px 0; color:var(--cinza-5)}
.card-info ol{margin:8px 0 0 22px; color:var(--cinza-5); line-height:1.8}
.card-info code{background:var(--cinza-1); padding:2px 8px; border-radius:4px; font-size:12px; color:var(--azul-pa)}
.mono{font-family:'Consolas','Monaco',monospace; font-size:12px; color:var(--azul-pa)}

/* ============ SIDEBAR (layout principal autenticado) ============ */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:230px;
  background:linear-gradient(180deg, var(--azul-pa-escuro) 0%, var(--azul-pa) 100%);
  color:white; display:flex; flex-direction:column;
  z-index:50; box-shadow:var(--sombra);
}
.sb-brand{padding:18px 16px; border-bottom:3px solid var(--amarelo-pa); background:rgba(0,0,0,.15)}
.sb-brand img{width:100%; max-width:180px; display:block; border-radius:6px}
.sb-nav{flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:3px}
.sb-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:8px;
  color:rgba(255,255,255,.85); text-decoration:none;
  font-weight:500; font-size:14px; transition:.15s;
}
.sb-nav a:hover{background:rgba(255,255,255,.12); color:white; text-decoration:none}
.sb-nav a.ativo{background:var(--amarelo-pa); color:var(--azul-pa-escuro); font-weight:700}
.sb-nav a.ativo:hover{background:var(--amarelo-escuro)}
.sb-nav .ti{font-size:18px}
.sb-bottom{padding:14px 10px; border-top:1px solid rgba(255,255,255,.10)}
.sb-tema{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; margin-bottom:6px;
  background:transparent; border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.75); font-size:13px;
  border-radius:8px; cursor:pointer; font-family:inherit;
  transition:.15s;
}
.sb-tema:hover{background:rgba(255,255,255,.10); color:white}
.sb-tema span{flex:1; text-align:left}
.sb-tema .ti{font-size:16px}
.sb-tema .sb-tema-lua{display:none}
[data-tema="dark"] .sb-tema .sb-tema-sol{display:none}
[data-tema="dark"] .sb-tema .sb-tema-lua{display:inline-block}

.sb-cmdk{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; margin-bottom:6px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.80); font-size:13px;
  border-radius:8px; cursor:pointer; font-family:inherit;
  transition:.15s;
}
.sb-cmdk:hover{background:rgba(255,255,255,.14); color:white; border-color:rgba(255,255,255,.20)}
.sb-cmdk .ti{font-size:16px}
.sb-cmdk span{flex:1; text-align:left}
.sb-cmdk kbd{
  font-family:'Consolas','Monaco',monospace; font-size:10px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15);
  border-radius:4px; padding:1px 6px;
  color:rgba(255,255,255,.85);
}
.sb-logout{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:8px; text-decoration:none;
  color:rgba(255,255,255,.65); font-size:14px; transition:.15s;
}
.sb-logout:hover{background:rgba(192,57,43,.30); color:white; text-decoration:none}
.layout-com-sidebar{margin-left:230px; min-height:100vh}
/* App shell usa a largura TODA (sem cap/centralizacao) — tabela densa aproveita o espaco.
   Paginas que precisam de largura menor (formularios) usam .conteudo-estreito. */
.layout-com-sidebar main{max-width:none; margin:0; padding:26px 34px}
.conteudo-estreito{max-width:1080px}

/* ============ SUGESTOES DROPDOWN (autocomplete chapa) ============ */
.campo-chapa-wrap{position:relative}
.sugestoes-dropdown{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:white; border:1px solid var(--cinza-3); border-radius:10px;
  box-shadow:var(--sombra-lg); margin-top:6px; max-height:380px; overflow-y:auto;
}
.sug-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  cursor:pointer; border-bottom:1px solid var(--linha); transition:.1s;
}
.sug-item:last-child{border-bottom:none}
.sug-item:hover, .sug-item.ativo, .sug-item:focus{background:#eaf3ff; outline:none}
.sug-icone{font-size:22px; line-height:1; min-width:24px; text-align:center}
.sug-info{flex:1; min-width:0}
.sug-linha1{font-size:14px; color:var(--cinza-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sug-linha1 b{color:var(--azul-pa); font-family:'Consolas','Monaco',monospace; font-weight:700}
.sug-linha2{font-size:12px; color:var(--cinza-4); margin-top:2px}

.badge-origem{
  display:inline-block; padding:1px 8px; border-radius:99px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  margin-left:6px; vertical-align:middle;
}
.badge-origem.cad { background:#e2f4eb; color:#1a5036 }
.badge-origem.pla { background:#eaf3ff; color:#0a3960 }
.badge-origem.foto{ background:#fdf3e0; color:#80520a }

/* ============ STATUS PILLS ============ */
.status-pill{
  display:inline-block; padding:3px 11px; border-radius:99px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  margin:0 2px;
}
.status-pill.ativo    { background:#e2f4eb; color:#1a5036 }
.status-pill.pendente { background:#fdf3e0; color:#80520a }
.status-pill.inativo  { background:#eaeef4; color:#3d4a5c }
.status-pill.desligado{ background:#fdecea; color:#80251b }

/* ============ FORM COLABORADOR ============ */
.form-colab textarea{
  padding:11px 13px; background:var(--cinza-1); border:1px solid var(--linha);
  border-radius:8px; color:var(--cinza-5); font-size:14px; font-family:inherit;
  resize:vertical; transition:.15s;
}
.form-colab textarea:focus{outline:none; border-color:var(--azul-pa); background:white; box-shadow:0 0 0 3px rgba(15,68,113,.12)}
.bloco-titulo{
  margin:8px 0 14px; padding-bottom:8px;
  font-size:14px; color:var(--azul-pa-escuro); text-transform:uppercase; letter-spacing:.4px;
  border-bottom:2px solid var(--linha);
  display:flex; align-items:center; gap:8px;
}
.foto-area{display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:flex-start}
.foto-preview-box{
  border:2px dashed var(--cinza-3); border-radius:var(--raio);
  padding:14px; text-align:center; background:var(--cinza-1);
}
#preview-foto-atual img{max-width:160px; max-height:200px; border-radius:8px; border:3px solid var(--azul-pa); margin-bottom:6px}
.sem-foto-grande{
  width:160px; height:200px; display:flex; align-items:center; justify-content:center;
  background:white; border-radius:8px; color:var(--cinza-3); margin:0 auto 6px;
}
.sem-foto-grande .ti{font-size:64px}
.foto-acoes{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.foto-acoes .btn{justify-content:flex-start; min-width:220px}
.btn-upload{cursor:pointer}

/* ============ HOME / DASHBOARD ============ */
.home-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.home-head h1{
  font-size:26px; color:var(--azul-pa-escuro);
  display:flex; align-items:center; gap:12px;
}
.home-head h1 .ti{color:var(--azul-pa); font-size:28px}

/* ====== STATUS IMPRESSORA CARD ====== */
.home-impressora{
  background:white; border-radius:var(--raio);
  padding:20px 24px; box-shadow:var(--sombra-sm);
  margin-bottom:22px;
  border-left:5px solid var(--cinza-3);
  display:flex; align-items:center; gap:20px;
  min-height:120px;
}
.home-impressora.imp-ok{border-left-color:var(--ok); background:linear-gradient(90deg, #f0faf4 0%, #ffffff 60%)}
.home-impressora.imp-info{border-left-color:var(--azul-pa); background:linear-gradient(90deg, #eaf3ff 0%, #ffffff 60%)}
.home-impressora.imp-aviso{border-left-color:var(--aviso); background:linear-gradient(90deg, #fdf3e0 0%, #ffffff 60%)}
.home-impressora.imp-erro{border-left-color:var(--erro); background:linear-gradient(90deg, #fdecea 0%, #ffffff 60%)}

.imp-info{flex:1; min-width:0}
.imp-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.imp-head .ti{font-size:24px; color:var(--azul-pa)}
.imp-head b{font-size:16px; color:var(--azul-pa-escuro)}

.imp-status-pill{
  padding:3px 11px; border-radius:99px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
.imp-status-ok    {background:#e2f4eb; color:var(--ok)}
.imp-status-info  {background:#eaf3ff; color:var(--azul-pa)}
.imp-status-aviso {background:#fdf3e0; color:var(--aviso)}
.imp-status-erro  {background:#fdecea; color:var(--erro)}

.imp-meta{
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:12px; color:var(--cinza-4); margin-bottom:12px;
}
.imp-meta .ti{font-size:14px; margin-right:3px; vertical-align:middle}
.imp-meta code{
  background:var(--cinza-1); padding:1px 6px; border-radius:4px;
  font-size:11px;
}

.imp-bars{display:flex; gap:24px; flex-wrap:wrap}
.imp-bar-item{flex:1; min-width:200px}
.imp-bar-lbl{font-size:11px; color:var(--cinza-4); text-transform:uppercase; letter-spacing:.3px}
.imp-bar-track{
  background:var(--cinza-1); border-radius:99px; height:8px;
  overflow:hidden; margin:5px 0 3px; position:relative;
}
.imp-bar-fill{height:100%; border-radius:99px; transition:width .35s ease-out}
.imp-bar-fill.bar-ok    {background:linear-gradient(90deg, #44b07b, var(--ok))}
.imp-bar-fill.bar-aviso {background:linear-gradient(90deg, #f0b54e, var(--aviso))}
.imp-bar-fill.bar-erro  {background:linear-gradient(90deg, #e57368, var(--erro))}
.imp-bar-val{font-size:13px; font-weight:700; color:var(--azul-pa-escuro)}

.imp-avisos{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.imp-aviso-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:#fdf3e0; color:#80520a;
  padding:4px 10px; border-radius:99px;
  font-size:12px; font-weight:600;
}

.imp-detalhes{flex-shrink:0}
.imp-loader{color:var(--cinza-4); display:flex; align-items:center; gap:8px}
.imp-erro-msg{color:var(--erro); font-size:13px; margin-top:6px}

/* ====== STATS DA HOME ====== */
.home-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; margin-bottom:22px;
}
.home-stat-card{
  background:white; border-radius:var(--raio);
  padding:16px 18px;
  box-shadow:var(--sombra-sm);
  border-left:4px solid var(--cinza-3);
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--cinza-5);
  transition:.15s;
}
.home-stat-card:hover{
  box-shadow:var(--sombra); transform:translateY(-2px);
  text-decoration:none;
}
.home-stat-icone{
  width:42px; height:42px; border-radius:10px;
  background:var(--cinza-1); color:var(--cinza-4);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.home-stat-info{flex:1; min-width:0}
.home-stat-num{
  font-size:24px; font-weight:700; color:var(--azul-pa-escuro);
  line-height:1.1;
}
.home-stat-lbl{
  font-size:11px; color:var(--cinza-4);
  text-transform:uppercase; letter-spacing:.4px;
  margin-top:3px;
}
.home-stat-card.home-stat-ok{border-left-color:var(--ok)}
.home-stat-card.home-stat-ok .home-stat-icone{background:#e2f4eb; color:var(--ok)}
.home-stat-card.home-stat-aviso{border-left-color:var(--aviso)}
.home-stat-card.home-stat-aviso .home-stat-icone{background:#fdf3e0; color:var(--aviso)}
.home-stat-card.home-stat-info{border-left-color:var(--azul-pa)}
.home-stat-card.home-stat-info .home-stat-icone{background:#eaf3ff; color:var(--azul-pa)}
.home-stat-card.home-stat-erro{border-left-color:var(--erro)}
.home-stat-card.home-stat-erro .home-stat-icone{background:#fdecea; color:var(--erro)}

/* ====== ACOES RAPIDAS ====== */
.home-bloco{
  background:white; border-radius:var(--raio);
  padding:18px 22px; box-shadow:var(--sombra-sm);
  margin-bottom:16px;
}
.home-bloco h3{
  margin:0 0 14px; font-size:13px;
  color:var(--azul-pa-escuro);
  text-transform:uppercase; letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
  padding-bottom:10px; border-bottom:1px solid var(--linha);
}
.home-bloco h3 .ti{color:var(--azul-pa); font-size:18px}
.home-bloco-aviso h3 .ti{color:var(--aviso)}

.acoes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}
.acao-card{
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:18px 12px;
  background:var(--cinza-1); border:1px solid var(--linha);
  border-radius:10px;
  text-decoration:none; color:var(--cinza-5);
  font-size:13px; font-weight:600;
  transition:.15s;
}
.acao-card:hover{
  background:white; border-color:var(--azul-pa);
  color:var(--azul-pa); transform:translateY(-2px);
  box-shadow:var(--sombra-sm); text-decoration:none;
}
.acao-card .ti{font-size:26px; color:var(--azul-pa)}

/* ====== GRID DE BLOCOS DA HOME ====== */
.home-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:16px;
}

/* ====== LISTAS SIMPLES (ultimas/recentes/atencao) ====== */
.lista-simples{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.lista-simples li{
  display:flex; align-items:center; gap:12px;
  padding:10px 4px; border-bottom:1px solid var(--linha);
}
.lista-simples li:last-child{border-bottom:none}
.li-foto{
  width:40px; height:40px; border-radius:50%;
  object-fit:cover; border:2px solid var(--azul-pa);
  flex-shrink:0;
}
.li-foto-fake{
  width:40px; height:40px; border-radius:50%;
  background:var(--cinza-2); color:var(--cinza-4);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; border:2px dashed var(--cinza-3);
}
.li-foto-fake.li-foto-aviso{background:#fdf3e0; color:var(--aviso); border-color:#f0d68a}
.li-info{flex:1; min-width:0; font-size:13px}
.li-info b{color:var(--azul-pa); font-family:'Consolas','Monaco',monospace}
.li-info small{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px}

/* ============ PWA BANNER ============ */
.pwa-banner{
  position:fixed; bottom:20px; left:20px; right:20px;
  max-width:520px; margin:0 auto;
  background:white; border-radius:12px;
  padding:14px 18px; display:flex; align-items:center; gap:14px;
  box-shadow:0 12px 32px rgba(15,68,113,.25), 0 4px 12px rgba(0,0,0,.10);
  border-left:4px solid var(--amarelo-pa);
  z-index:1500;
  animation:pwa-slide-up .3s ease-out;
}
@keyframes pwa-slide-up{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}
.pwa-banner > .ti{font-size:28px; color:var(--azul-pa); flex-shrink:0}
.pwa-banner-msg{flex:1; min-width:0; line-height:1.4}
.pwa-banner-msg b{display:block; color:var(--azul-pa-escuro); font-size:14px}
.pwa-banner-msg small{color:var(--cinza-4); font-size:12px}
.pwa-banner-close{
  background:transparent; border:none; color:var(--cinza-4);
  cursor:pointer; padding:4px 6px; border-radius:4px;
  display:flex; align-items:center; transition:.15s;
}
.pwa-banner-close:hover{background:var(--cinza-1); color:var(--cinza-5)}

[data-tema="dark"] .pwa-banner{background:var(--card-bg); color:var(--cinza-5)}

/* ============ TOASTS (notificacoes flutuantes) ============ */
.toasts-container{
  position:fixed; top:20px; right:20px; z-index:2000;
  display:flex; flex-direction:column; gap:10px;
  max-width:380px; pointer-events:none;
}
.toast{
  background:white; border-radius:10px;
  box-shadow:0 12px 32px rgba(15,68,113,.20), 0 4px 12px rgba(0,0,0,.10);
  padding:14px 16px;
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--cinza-5);
  border-left:4px solid var(--cinza-3);
  pointer-events:auto;
  animation:toast-in .25s cubic-bezier(.2, .9, .3, 1.2) forwards;
  opacity:0;
}
@keyframes toast-in{
  from{opacity:0; transform:translateX(380px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes toast-out{
  from{opacity:1; transform:translateX(0); max-height:200px; margin-bottom:10px}
  to{opacity:0; transform:translateX(380px); max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0}
}
.toast.out{animation:toast-out .25s ease-in forwards}
.toast .toast-icone{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:14px;
}
.toast .toast-msg{flex:1; line-height:1.45; padding-top:2px}
.toast .toast-fechar{
  background:transparent; border:none; cursor:pointer;
  color:var(--cinza-4); padding:0; margin-left:4px;
  display:flex; align-items:center; font-size:16px;
  opacity:.7; transition:.15s;
}
.toast .toast-fechar:hover{opacity:1; color:var(--cinza-5)}

.toast.toast-ok{border-left-color:var(--ok)}
.toast.toast-ok .toast-icone{background:#e2f4eb; color:var(--ok)}

.toast.toast-erro{border-left-color:var(--erro)}
.toast.toast-erro .toast-icone{background:#fdecea; color:var(--erro)}

.toast.toast-info{border-left-color:var(--azul-pa)}
.toast.toast-info .toast-icone{background:#eaf3ff; color:var(--azul-pa)}

/* progress bar (timer visual) */
.toast::after{
  content:''; position:absolute; bottom:0; left:0; height:3px;
  background:var(--azul-pa-claro); border-radius:0 0 8px 8px;
  animation:toast-progress 4s linear forwards;
  width:100%;
}
.toast{position:relative; overflow:hidden}
.toast.toast-ok::after{background:var(--ok)}
.toast.toast-erro::after{background:var(--erro)}
@keyframes toast-progress{from{width:100%} to{width:0%}}

/* ============ RELATORIOS ============ */
.rel-stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px; margin-bottom:22px;
}
.rel-stat{
  background:white; border-radius:10px;
  padding:16px 18px;
  box-shadow:var(--sombra-sm);
  border-left:4px solid var(--cinza-3);
}
.rel-stat-num{
  font-size:28px; font-weight:700;
  color:var(--azul-pa-escuro); line-height:1.1;
}
.rel-stat-lbl{
  font-size:11px; color:var(--cinza-4);
  text-transform:uppercase; letter-spacing:.4px;
  margin-top:4px;
}
.rel-stat-ok{border-left-color:var(--ok)}
.rel-stat-ok .rel-stat-num{color:var(--ok)}
.rel-stat-aviso{border-left-color:var(--aviso)}
.rel-stat-aviso .rel-stat-num{color:var(--aviso)}
.rel-stat-erro{border-left-color:var(--erro)}
.rel-stat-erro .rel-stat-num{color:var(--erro)}
.rel-stat-info{border-left-color:var(--azul-pa)}
.rel-stat-info .rel-stat-num{color:var(--azul-pa)}

.rel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  gap:16px;
}
.rel-bloco{
  background:white; border-radius:var(--raio);
  padding:18px 22px; box-shadow:var(--sombra-sm);
  border-top:3px solid var(--azul-pa);
}
.rel-bloco.rel-largo{grid-column:1/-1}
.rel-bloco h3{
  margin:0 0 16px; font-size:13px;
  color:var(--azul-pa-escuro);
  text-transform:uppercase; letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
  padding-bottom:10px; border-bottom:1px solid var(--linha);
}
.rel-bloco h3 .ti{color:var(--azul-pa); font-size:18px}

.rel-vazio{
  text-align:center; color:var(--cinza-4); font-size:13px;
  padding:18px 0;
}

/* Barras horizontais */
.rel-bars-horiz{display:flex; flex-direction:column; gap:8px}
.rel-bar-row{
  display:grid; grid-template-columns:120px 1fr;
  gap:10px; align-items:center;
}
.rel-bar-lbl-h{
  font-size:12px; color:var(--cinza-5);
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.rel-bar-track{
  background:var(--cinza-1); border-radius:6px;
  height:24px; position:relative; overflow:hidden;
}
.rel-bar-fill{
  height:100%; background:linear-gradient(90deg, var(--azul-pa-claro), var(--azul-pa));
  border-radius:6px;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 8px; min-width:30px;
  transition:width .3s ease-out;
}
.rel-bar-fill span{
  color:white; font-size:11px; font-weight:700;
}
.rel-bar-fill.rel-bar-amarela{
  background:linear-gradient(90deg, var(--amarelo-escuro), var(--amarelo-pa));
}
.rel-bar-fill.rel-bar-amarela span{color:var(--azul-pa-escuro)}

/* Barras verticais (por mes) */
.rel-bars-vert{
  display:flex; align-items:flex-end; gap:10px;
  height:200px; padding:10px 0 28px;
  overflow-x:auto;
}
.rel-bar-vert{
  display:flex; flex-direction:column; align-items:center;
  flex:1; min-width:50px; height:100%;
  position:relative;
}
.rel-bar-num{
  font-size:11px; color:var(--cinza-5); font-weight:700;
  margin-bottom:4px;
}
.rel-bar-col{
  width:100%; max-width:40px;
  background:linear-gradient(180deg, var(--azul-pa-claro), var(--azul-pa));
  border-radius:6px 6px 0 0;
  flex:0 0 auto; min-height:2px;
  transition:height .3s ease-out;
}
.rel-bar-lbl{
  font-size:10px; color:var(--cinza-4);
  margin-top:4px; white-space:nowrap;
}

/* Tabelas mini */
.rel-tabela{
  width:100%; border-collapse:collapse; font-size:13px;
}
.rel-tabela th{
  text-align:left; padding:8px 10px;
  font-size:11px; color:var(--cinza-4);
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--linha);
}
.rel-tabela td{
  padding:8px 10px;
  border-bottom:1px solid var(--linha);
  color:var(--cinza-5);
}
.rel-tabela tr:last-child td{border-bottom:none}
.rel-tabela a{color:var(--azul-pa); font-weight:600}

/* Pie (barra de proporcao) */
.rel-pie-bar{
  display:flex; height:36px; border-radius:18px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}
.rel-pie-seg{
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700; font-size:13px;
  min-width:1px;
}
.seg-api{background:linear-gradient(135deg, var(--azul-pa-claro), var(--azul-pa))}
.seg-csv{background:linear-gradient(135deg, var(--amarelo-pa), var(--amarelo-escuro)); color:var(--azul-pa-escuro)}
.rel-pie-leg{
  display:flex; flex-direction:column; gap:6px;
  margin-top:14px; font-size:12px; color:var(--cinza-5);
}
.rel-pie-leg .dot{
  display:inline-block; width:12px; height:12px;
  border-radius:50%; vertical-align:middle; margin-right:6px;
}
.dot-api{background:var(--azul-pa)}
.dot-csv{background:var(--amarelo-pa)}

/* ============ BANNER DUPLICIDADE (aviso, nao bloqueio) ============ */
.banner-dup{
  background:#fff8e6; border:1px solid #f0d68a;
  border-left:5px solid var(--aviso);
  border-radius:10px;
  padding:14px 18px; margin-bottom:16px;
  box-shadow:var(--sombra-sm);
  animation:banner-slide-down .25s ease-out;
}
@keyframes banner-slide-down{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}
.banner-dup-head{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:#80520a;
}
.banner-dup-head > .ti{font-size:20px; color:var(--aviso)}
.banner-dup-head b{flex:1}
.banner-dup-close{
  background:transparent; border:none; color:#80520a;
  cursor:pointer; padding:2px 6px; border-radius:4px;
  display:inline-flex; align-items:center; transition:.15s;
}
.banner-dup-close:hover{background:rgba(128,82,10,.12)}
.banner-dup-body{margin:10px 0; display:flex; flex-direction:column; gap:8px}
.dup-match{
  display:flex; align-items:center; gap:12px;
  background:white; padding:10px 14px;
  border:1px solid #f0d68a; border-radius:8px;
  font-size:13px;
}
.dup-match-icone{
  width:36px; height:36px; border-radius:50%;
  background:#fdf3e0; color:var(--aviso);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:18px;
}
.dup-match-info{flex:1; min-width:0; line-height:1.5}
.dup-match-info b{color:var(--azul-pa-escuro); font-family:'Consolas','Monaco',monospace}
.dup-match-info .hint{color:var(--cinza-4); font-size:11px}
.dup-match-acao{flex-shrink:0}
.dup-match-acao a{
  font-size:12px; padding:5px 11px; border-radius:6px;
  background:var(--azul-pa); color:white; border:none;
  display:inline-flex; align-items:center; gap:5px;
  text-decoration:none; transition:.15s;
}
.dup-match-acao a:hover{background:var(--azul-pa-claro); color:white; text-decoration:none}
.banner-dup-hint{
  font-size:12px; color:#80520a; opacity:.85;
  display:flex; align-items:center; gap:6px;
  margin-top:6px; padding-top:8px;
  border-top:1px dashed #f0d68a;
}

/* ============ COMMAND PALETTE (Ctrl+K) ============ */
.cmdk-overlay[hidden]{display:none !important}
.cmdk-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(15, 32, 52, 0.55);
  backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px;
  animation:cmdk-fade .15s ease-out;
}
@keyframes cmdk-fade{from{opacity:0} to{opacity:1}}
@keyframes cmdk-slide{from{transform:translateY(-12px); opacity:0} to{transform:translateY(0); opacity:1}}

.cmdk-panel{
  background:white; border-radius:14px;
  width:100%; max-width:620px;
  box-shadow:0 30px 80px rgba(15,68,113,.30), 0 8px 24px rgba(0,0,0,.20);
  overflow:hidden;
  animation:cmdk-slide .18s ease-out;
  display:flex; flex-direction:column;
  max-height:74vh;
}

.cmdk-input-wrap{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--linha);
}
.cmdk-input-wrap > .ti{color:var(--cinza-4); font-size:20px; flex-shrink:0}
.cmdk-input-wrap input{
  flex:1; border:none; background:transparent; outline:none;
  font-size:16px; color:var(--cinza-5); font-family:inherit;
  padding:4px 0;
}
.cmdk-input-wrap input::placeholder{color:var(--cinza-3)}
.cmdk-kbd{
  font-family:'Consolas','Monaco',monospace;
  background:var(--cinza-1); border:1px solid var(--linha);
  border-radius:5px; padding:2px 7px;
  font-size:11px; color:var(--cinza-4);
}
.cmdk-fechar{
  background:transparent; border:1px solid var(--linha);
  color:var(--cinza-4); cursor:pointer;
  width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; transition:.15s;
  flex-shrink:0;
}
.cmdk-fechar:hover{background:#fdecea; border-color:#f5c8c1; color:var(--erro)}

.cmdk-results{
  flex:1; overflow-y:auto;
  padding:6px;
  scrollbar-width:thin;
}
.cmdk-item{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:10px 14px;
  background:transparent; border:none; cursor:pointer;
  border-radius:8px; transition:.1s;
  font-family:inherit; text-align:left;
  color:var(--cinza-5);
}
.cmdk-item.sel{background:var(--cinza-1)}
.cmdk-item > .ti{
  font-size:18px; color:var(--azul-pa);
  width:24px; text-align:center; flex-shrink:0;
}
.cmdk-meio{flex:1; min-width:0}
.cmdk-label{
  font-size:14px; color:var(--cinza-5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmdk-label b{color:var(--azul-pa); font-family:'Consolas','Monaco',monospace; font-weight:700}
.cmdk-hint{
  font-size:12px; color:var(--cinza-4); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmdk-tag{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:2px 8px; border-radius:99px;
  background:var(--cinza-2); color:var(--cinza-4);
  flex-shrink:0;
}
.cmdk-tag.tag-ok{background:#e2f4eb; color:#1a5036}
.cmdk-tag.tag-aviso{background:#fdf3e0; color:#80520a}

.cmdk-empty{
  padding:40px 20px; text-align:center; color:var(--cinza-4);
  font-size:14px;
}
.cmdk-empty .ti{font-size:32px; display:block; margin-bottom:8px; color:var(--cinza-3)}

.cmdk-foot{
  display:flex; gap:18px; padding:10px 18px;
  border-top:1px solid var(--linha);
  font-size:11px; color:var(--cinza-4);
  background:var(--cinza-1);
}
.cmdk-foot kbd{
  background:white; border:1px solid var(--cinza-3);
  border-radius:4px; padding:1px 6px;
  font-family:'Consolas','Monaco',monospace;
  font-size:10px; color:var(--cinza-5);
  margin-right:4px;
  box-shadow:0 1px 0 var(--cinza-3);
}

/* ============ HISTORICO COLABORADOR (timeline) ============ */
.historico-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px; margin-bottom:24px;
}
.stat-card{
  background:white; border-radius:var(--raio);
  padding:18px 20px; box-shadow:var(--sombra-sm);
  display:flex; align-items:center; gap:16px;
  border-left:4px solid var(--cinza-3);
}
.stat-card > .ti{
  font-size:32px; color:var(--cinza-3);
  flex-shrink:0;
}
.stat-card .stat-num{
  font-size:26px; font-weight:700; color:var(--azul-pa-escuro);
  line-height:1.1;
}
.stat-card .stat-lbl{
  font-size:12px; color:var(--cinza-4);
  text-transform:uppercase; letter-spacing:.4px; margin-top:2px;
}
.stat-card.stat-ok{border-left-color:var(--ok)}
.stat-card.stat-ok > .ti{color:var(--ok)}
.stat-card.stat-aviso{border-left-color:var(--aviso)}
.stat-card.stat-aviso > .ti{color:var(--aviso)}
.stat-card.stat-info{border-left-color:var(--azul-pa)}
.stat-card.stat-info > .ti{color:var(--azul-pa)}
.stat-card.stat-tempo{border-left-color:var(--amarelo-pa)}
.stat-card.stat-tempo > .ti{color:var(--amarelo-escuro)}
.stat-num-pequeno{font-size:18px !important; line-height:1.2 !important}

.timeline-wrap{
  background:white; border-radius:var(--raio);
  padding:24px 28px; box-shadow:var(--sombra-sm);
}
.timeline-titulo{
  margin:0 0 22px; font-size:15px; color:var(--azul-pa-escuro);
  text-transform:uppercase; letter-spacing:.5px;
  display:flex; align-items:center; gap:10px;
  padding-bottom:12px; border-bottom:2px solid var(--linha);
}
.timeline-titulo .ti{color:var(--azul-pa); font-size:18px}

.timeline{
  list-style:none; padding:0 0 0 14px; margin:0;
  position:relative;
}
.timeline::before{
  content:''; position:absolute; left:32px; top:6px; bottom:6px;
  width:2px; background:linear-gradient(180deg, var(--azul-pa) 0%, var(--linha) 100%);
}
.tl-item{
  position:relative; padding:0 0 22px 64px;
  min-height:46px;
}
.tl-item:last-child{padding-bottom:0}
.tl-marker{
  position:absolute; left:14px; top:0;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:white; border:3px solid var(--cinza-3);
  color:var(--cinza-4); font-size:16px;
  box-shadow:0 0 0 4px white;
}
.tl-ok .tl-marker{border-color:var(--ok); color:var(--ok); background:#f0faf4}
.tl-aviso .tl-marker{border-color:var(--aviso); color:var(--aviso); background:#fdf3e0}
.tl-neutro .tl-marker{border-color:var(--azul-pa-claro); color:var(--azul-pa-claro); background:#eaf3ff}
.tl-content{
  background:var(--cinza-1); border-radius:8px; padding:12px 16px;
  border:1px solid var(--linha);
}
.tl-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:6px; font-size:14px;
}
.tl-head b{color:var(--azul-pa-escuro); font-size:14px}
.tl-meta{
  font-size:12px; color:var(--cinza-4);
  display:flex; align-items:center; gap:6px;
  margin-top:3px;
}
.tl-meta code{
  background:white; padding:1px 8px; border-radius:4px;
  font-size:11px; color:var(--azul-pa);
  border:1px solid var(--linha);
}
.tl-meta .ti{font-size:14px}
.tl-obs{
  margin-top:8px; padding:8px 12px;
  background:white; border-radius:6px;
  font-size:12px; color:var(--cinza-5);
  border-left:3px solid var(--azul-pa-claro);
  display:flex; align-items:flex-start; gap:6px;
}
.tl-obs .ti{color:var(--azul-pa-claro); margin-top:1px}

@media (max-width:900px){
  .historico-stats{grid-template-columns:1fr}
}

/* ============ MODAL IMPRIMIR VIA API ============ */
.dlg-imprimir{
  border:none; padding:0; border-radius:14px;
  box-shadow:0 30px 80px rgba(15,68,113,.30), 0 8px 24px rgba(0,0,0,.15);
  max-width:480px; width:92vw;
  background:white; color:var(--cinza-5);
}
.dlg-imprimir::backdrop{
  background:rgba(15,32,52,.55);
  backdrop-filter:blur(3px);
}
.dlg-imprimir form{display:flex; flex-direction:column; gap:0; margin:0}
.dlg-imprimir header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--linha);
  background:linear-gradient(135deg, var(--azul-pa-escuro) 0%, var(--azul-pa) 100%);
  color:white; border-radius:14px 14px 0 0;
}
.dlg-imprimir header h3{
  margin:0; font-size:16px; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.dlg-imprimir header .ti{font-size:20px; color:var(--amarelo-pa)}
.dlg-close{
  background:transparent; border:none; color:rgba(255,255,255,.7);
  cursor:pointer; padding:4px 6px; border-radius:6px;
  display:inline-flex; align-items:center;
  font-size:18px; transition:.15s;
}
.dlg-close:hover{background:rgba(255,255,255,.15); color:white}
.dlg-body{padding:22px}
.dlg-body p{margin:0 0 14px; font-size:15px}
.dlg-body p b{color:var(--azul-pa-escuro)}

.dlg-via-info{
  background:#fdf3e0; color:#80520a;
  border-left:4px solid var(--aviso);
  padding:11px 14px; border-radius:8px;
  font-size:13px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:8px;
}
.dlg-via-info .ti{color:var(--aviso); font-size:18px; margin-top:1px}
.dlg-via-info b{color:#5a3a06}

.dlg-checkbox{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; background:var(--cinza-1);
  border:1px solid var(--linha); border-radius:10px;
  cursor:pointer; transition:.15s;
}
.dlg-checkbox:hover{border-color:var(--azul-pa-claro); background:#f5faff}
.dlg-checkbox input[type=checkbox]{
  width:18px; height:18px; cursor:pointer;
  accent-color:var(--azul-pa); margin-top:2px; flex-shrink:0;
}
.dlg-checkbox span{font-size:14px; line-height:1.45}
.dlg-checkbox b{color:var(--azul-pa-escuro)}

.dlg-imprimir footer{
  display:flex; justify-content:flex-end; gap:8px;
  padding:14px 22px;
  background:var(--cinza-1);
  border-top:1px solid var(--linha);
  border-radius:0 0 14px 14px;
}

/* ============ PREVIEW CRACHA AO VIVO ============ */
.form-com-preview{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 380px;
  gap:22px;
  align-items:flex-start;
}
.form-com-preview .form-grid{margin:0}

.preview-cracha-painel{
  position:sticky; top:18px;
  background:white;
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  border-top:4px solid var(--amarelo-pa);
  padding:18px;
  display:flex; flex-direction:column; gap:14px;
}
.preview-head{display:flex; flex-direction:column; gap:12px}
.preview-head h3{
  margin:0; font-size:14px; color:var(--azul-pa-escuro);
  text-transform:uppercase; letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
}
.preview-head h3 .ti{color:var(--azul-pa); font-size:18px}

.preview-tabs{
  display:flex; gap:4px; background:var(--cinza-1);
  padding:4px; border-radius:8px; border:1px solid var(--linha);
}
.preview-tab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 10px; border:none; background:transparent;
  color:var(--cinza-4); font-size:13px; font-weight:600; font-family:inherit;
  border-radius:6px; cursor:pointer; transition:.15s;
}
.preview-tab:hover{color:var(--azul-pa)}
.preview-tab.ativo{background:white; color:var(--azul-pa-escuro); box-shadow:var(--sombra-sm)}
.preview-tab .ti{font-size:16px}

.preview-cracha-wrap{
  position:relative;
  background:
    repeating-linear-gradient(
      45deg,
      var(--cinza-1) 0 10px,
      #eef2f7 10px 20px
    );
  border-radius:10px;
  padding:18px;
  display:flex; align-items:center; justify-content:center;
  min-height:380px;
  border:1px solid var(--linha);
  overflow:hidden;
}
#preview-cracha-img{
  max-width:100%; height:auto;
  border-radius:8px;
  box-shadow:0 8px 30px rgba(15,68,113,.18), 0 2px 8px rgba(0,0,0,.08);
  background:white;
}
.preview-cracha-wrap.atualizando::after{
  content:''; position:absolute; top:10px; right:10px;
  width:10px; height:10px; border-radius:50%;
  background:var(--azul-pa-claro);
  box-shadow:0 0 0 0 rgba(30,91,148,.7);
  animation:pulse-dot 1s ease-in-out infinite;
  z-index:3;
}
@keyframes pulse-dot{
  0%{transform:scale(.8); box-shadow:0 0 0 0 rgba(30,91,148,.5)}
  70%{transform:scale(1.1); box-shadow:0 0 0 8px rgba(30,91,148,0)}
  100%{transform:scale(.8); box-shadow:0 0 0 0 rgba(30,91,148,0)}
}
.preview-cracha-skeleton{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,.92); color:var(--cinza-4);
  font-size:12px;
  z-index:2; border-radius:10px;
}
.preview-cracha-skeleton .ti{font-size:32px; color:var(--azul-pa)}
.spin{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.preview-hint{
  display:flex; align-items:center; gap:6px;
  color:var(--cinza-4); font-size:12px;
}
.preview-hint .ti{color:var(--azul-pa-claro)}

@media (max-width:1180px){
  .form-com-preview{grid-template-columns:1fr}
  .preview-cracha-painel{position:relative; top:0; max-width:420px; margin:0 auto}
}

/* ============ TABELA COLABS ============ */
.tabela-colabs .filtro-rapido{
  padding:8px 12px; border:1px solid var(--linha); border-radius:8px;
  background:white; color:var(--cinza-5); font-size:13px; cursor:pointer;
  font-family:inherit;
}
.tabela-colabs .filtro-rapido:focus{outline:none; border-color:var(--azul-pa); box-shadow:0 0 0 2px rgba(15,68,113,.10)}
.acoes-massa .filtro-rapido{padding:8px 14px}
.nome-cell{display:flex; flex-direction:column}
.nome-completo{font-weight:500}
.nome-frente{color:var(--cinza-4); font-size:11px; margin-top:2px}
.sync-linha{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap}
.sync-toggle{flex:1; min-width:260px}
.sync-intervalo{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--cinza-5); white-space:nowrap}
.sync-intervalo input{width:64px; padding:7px 10px; border:1px solid var(--cinza-3); border-radius:8px; font-family:inherit; font-size:14px; text-align:center}
.sync-intervalo input:focus{outline:none; border-color:var(--azul-pa); box-shadow:0 0 0 2px rgba(15,68,113,.10)}
.tempo-empresa{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:3px; font-size:11px; color:var(--azul-pa-claro);
  font-weight:500;
}
.tempo-empresa .ti{font-size:12px}

/* ============ CONFIG ============ */
.form-config textarea.mono{
  font-family:'Consolas','Monaco',monospace; font-size:13px;
}
.lista-pastas{list-style:none; padding:0; margin:0}
.lista-pastas li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--cinza-1); border-radius:8px;
  margin-bottom:6px; border-left:3px solid var(--linha);
}
.opcoes-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:14px}
.opcoes-grid h4{margin:0 0 10px; color:var(--azul-pa-escuro); font-size:13px; text-transform:uppercase; letter-spacing:.4px}
.lista-opcoes{list-style:none; padding:0; margin:0; max-height:300px; overflow-y:auto}
.lista-opcoes li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 12px; background:var(--cinza-1); border-radius:6px;
  margin-bottom:4px; font-size:13px;
}

/* ============ RESPONSIVO ============ */
@media (max-width:900px){
  .sidebar{position:relative; width:100%; height:auto; flex-direction:column}
  .sb-brand{padding:10px 16px}
  .sb-brand img{max-width:120px}
  .sb-nav{flex-direction:row; flex-wrap:wrap; padding:8px}
  .sb-nav a{padding:8px 12px}
  .sb-bottom{padding:8px 10px; border-top:none; border-left:1px solid rgba(255,255,255,.10)}
  .layout-com-sidebar{margin-left:0}
  .layout-com-sidebar main{padding:16px}
  .form-grid{grid-template-columns:1fr}
  .foto-area{grid-template-columns:1fr}
  .opcoes-grid{grid-template-columns:1fr}
  .page-head{flex-direction:column; align-items:stretch}
  .topbar{height:auto; flex-direction:column; gap:10px; padding:10px 16px}
}