/* ==========================================================================
   Canal Fale com o RH — CTC
   Identidade visual do "Painel Suprimentos CTC" / "Painel de Horas" (RDC).
   Tema único (claro), pintado explicitamente — é a marca do CTC.

   Cor tem um trabalho só por elemento:
   - azul da marca = magnitude (barras, colunas) e ação primária;
   - verde / laranja / vermelho = ESTADO (prazo, status, prioridade), sempre com
     rótulo de texto ao lado — nunca para distinguir categorias.
   As categorias são identificadas pelo nome, não por cor: a paleta da marca não
   tem quatro tons que passem no teste de daltonismo sem reaproveitar as cores de
   estado (validado com o dataviz/validate_palette).
   ========================================================================== */
:root{
  --azul:#0E6E87; --azul2:#1B8FA8; --azul-fraco:#e3eef1;
  --cinza:#eef4f6; --linha:#dbe6ea; --ground:#eaf1f3; --surface:#ffffff;
  --verde:#2e9e5b; --laranja:#e8920c; --vermelho:#d1495b; --neutro:#64748b;
  --txt:#15323a; --txt2:#5b7480; --txt3:#8ca0a9;
  --raio:10px;
  --sombra:0 1px 2px rgba(21,50,58,.05);
  --fonte:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--txt);
  font-family:var(--fonte); font-size:14px; line-height:1.45;
}
:focus-visible{outline:2px solid var(--azul2); outline-offset:2px; border-radius:4px;}
[hidden]{display:none !important;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- cabeçalho ---------- */
header.topo{
  background:var(--azul); color:#fff; padding:13px 22px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
header.topo .logo{height:44px; width:auto; flex:none;}
header.topo h1{margin:0; font-size:19px; font-weight:600; letter-spacing:.2px;}
header.topo .sub{font-size:12px; opacity:.88; margin-top:2px;}
header.topo .userbox{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.12); padding:6px 10px 6px 6px; border-radius:22px;
}
header.topo .avatar{
  width:30px; height:30px; border-radius:50%; background:#fff; color:var(--azul);
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none;
}
header.topo .userbox .nm{font-size:12.5px; line-height:1.2;}
header.topo .userbox .pf{font-size:10.5px; opacity:.85; text-transform:uppercase; letter-spacing:.5px;}
header.topo .sair{
  color:#fff; opacity:.8; text-decoration:none; font-size:11.5px;
  border-left:1px solid rgba(255,255,255,.3); padding-left:10px; margin-left:2px;
}
header.topo .sair:hover{opacity:1;}

/* ---------- navegação do painel ---------- */
nav.abas{
  background:var(--surface); border-bottom:1px solid var(--linha);
  display:flex; gap:4px; padding:0 22px; overflow-x:auto;
}
nav.abas a{
  color:var(--txt2); text-decoration:none; font-weight:600; font-size:13px;
  padding:12px 14px 10px; border-bottom:3px solid transparent; white-space:nowrap;
}
nav.abas a:hover{color:var(--azul);}
nav.abas a[aria-current="page"]{color:var(--azul); border-bottom-color:var(--azul);}

.wrap{padding:16px 22px 40px; max-width:1680px; margin:0 auto;}

/* ---------- filtros ---------- */
.filtros{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:12px 14px; margin-bottom:14px;
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end;
}
.f{display:flex; flex-direction:column; gap:3px;}
.f label, .rot{font-size:10.5px; color:var(--txt2); text-transform:uppercase; letter-spacing:.5px; font-weight:600;}
.f select, .f input{
  font-family:inherit; font-size:13px; color:var(--txt);
  padding:7px 9px; border:1px solid #c3d4da; border-radius:7px; background:var(--surface);
  min-width:140px; max-width:210px; height:34px;
}
.f input.busca{min-width:210px;}
.f select:hover, .f input:hover{border-color:var(--azul2);}
.acoes{display:flex; gap:8px; margin-left:auto; align-items:flex-end; flex-wrap:wrap;}
.btn{
  font-family:inherit; font-size:13px; font-weight:600; height:34px; padding:0 14px;
  border-radius:7px; border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
}
.btn.pri{background:var(--azul); color:#fff;}
.btn.pri:hover{background:var(--azul2);}
.btn.sec{background:var(--surface); color:var(--azul); border-color:#b7cdd4;}
.btn.sec:hover{background:var(--azul-fraco);}
.btn[disabled]{opacity:.55; cursor:not-allowed;}
.btn svg{width:15px; height:15px; flex:none;}

/* Alternador lista/kanban */
.alternador{display:inline-flex; border:1px solid #b7cdd4; border-radius:7px; overflow:hidden;}
.alternador button{
  font-family:inherit; font-size:12.5px; font-weight:600; border:none; background:var(--surface);
  color:var(--azul); padding:0 12px; height:32px; cursor:pointer;
}
.alternador button[aria-pressed="true"]{background:var(--azul); color:#fff;}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:14px;}
.kpi{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:12px 14px 13px; position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--azul);}
.kpi.at::before{background:var(--laranja);}
.kpi.ok::before{background:var(--verde);}
.kpi.cr::before{background:var(--vermelho);}
.kpi .t{font-size:10.5px; color:var(--txt2); text-transform:uppercase; letter-spacing:.55px; font-weight:600;}
.kpi .v{font-size:26px; font-weight:700; color:var(--azul); margin-top:5px; line-height:1.1; font-variant-numeric:tabular-nums;}
.kpi.at .v{color:#b56f00;} .kpi.ok .v{color:#1f7a45;} .kpi.cr .v{color:#b23347;}
.kpi .u{font-size:14px; font-weight:600; color:var(--txt3); margin-left:2px;}
.kpi .s{font-size:11.5px; color:var(--txt2); margin-top:4px; font-variant-numeric:tabular-nums;}
.kpi a{color:inherit;}
.contexto{margin:0 0 10px; font-size:12.5px; color:var(--txt2); font-variant-numeric:tabular-nums;}
.contexto b{color:var(--txt);}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-bottom:14px; align-items:start;}
.card{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:15px 16px 16px; min-width:0;
}
.card > h3, .card > header h3{margin:0 0 3px; font-size:13px; font-weight:700; color:var(--azul); letter-spacing:.1px;}
.card .hint{margin:0 0 14px; font-size:11.5px; color:var(--txt3);}
.c12{grid-column:span 12;} .c8{grid-column:span 8;} .c6{grid-column:span 6;} .c4{grid-column:span 4;}

/* colunas (volume por mês) */
.cols{display:flex; align-items:flex-end; gap:8px; height:196px; padding-top:20px;}
.col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-width:0; height:100%; cursor:default;}
.col .barra{width:100%; max-width:46px; background:var(--azul); border-radius:4px 4px 0 0; position:relative; min-height:2px;}
.col:hover .barra{background:var(--azul2);}
.col .tot{
  position:absolute; left:-8px; right:-8px; top:-19px; text-align:center;
  font-size:10.5px; font-weight:600; color:var(--txt2); font-variant-numeric:tabular-nums;
}
.col .xl{font-size:10.5px; color:var(--txt2); white-space:nowrap;}

/* barras horizontais */
.bars{display:flex; flex-direction:column; gap:9px;}
.bar{display:flex; align-items:center; gap:9px; font-size:12.5px;}
.bar .lbl{width:190px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt);}
.bar .track{flex:1; background:var(--cinza); border-radius:4px; height:16px; min-width:20px; overflow:hidden;}
.bar .fill{display:block; height:100%; border-radius:0 4px 4px 0; background:var(--azul); min-width:2px;}
.bar .fill.cr{background:var(--vermelho);}
.bar .val{width:70px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600;}
.bar .pct{width:52px; text-align:right; font-variant-numeric:tabular-nums; color:var(--txt3);}
.bar .tag{font-size:10.5px; color:#a3253a; font-weight:600; white-space:nowrap;}
.legenda-nota{margin:12px 0 0; font-size:11.5px; color:var(--txt3);}

/* ---------- tabela ---------- */
.tabbar{display:flex; align-items:center; gap:12px; margin:0 2px 8px; flex-wrap:wrap;}
.tabbar h3{margin:0; font-size:13px; color:var(--azul);}
.tabbar .cnt{font-size:12.5px; color:var(--txt2);}
.tabbar .cnt b{color:var(--txt); font-variant-numeric:tabular-nums;}
.tabbar .dir{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.tabbar .dir select{width:auto; height:32px; padding:4px 8px;}
.tablewrap{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); overflow:auto; max-height:68vh;
}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px;}
th,td{padding:8px 10px; border-bottom:1px solid var(--linha); text-align:left; white-space:nowrap;}
thead th{
  position:sticky; top:0; z-index:2; background:var(--azul); color:#fff; cursor:pointer;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; user-select:none;
}
thead th:hover{background:var(--azul2);}
thead th .ar{opacity:.55; margin-left:3px;}
thead th.asc .ar::after{content:"▲";} thead th.desc .ar::after{content:"▼";}
#tbl thead th{cursor:default;}   /* a ordenação da caixa é pelo seletor, no servidor */
#tbl thead th:hover{background:var(--azul);}
tbody tr:nth-child(even){background:#f7fafb;}
tbody tr:hover{background:var(--azul-fraco);}
tbody tr.clicavel{cursor:pointer;}
td.num{text-align:right; font-variant-numeric:tabular-nums;}
td.trecho{white-space:normal; min-width:260px; max-width:420px; color:var(--txt2);}
td a.prot{color:var(--azul); font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums;}
td a.prot:hover{text-decoration:underline;}
.vazio{padding:38px 16px; text-align:center; color:var(--txt3); font-size:13px;}
.paginacao{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; font-size:12.5px; color:var(--txt2);}

/* ---------- selos: status, prioridade, prazo ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85;}
.st-novo{background:#e4f3f7; color:#0f6378; border-color:#bfe0e9;}
.st-em_analise{background:var(--azul-fraco); color:var(--azul); border-color:#c5dde4;}
.st-direcionado{background:#eef0f5; color:#475569; border-color:#d5dae3;}
.st-aguardando_retorno{background:#fff5e6; color:#8a5a12; border-color:#f0dcb4;}
.st-concluido{background:#eaf7ef; color:#1f7a45; border-color:#bfe4cd;}
.st-arquivado{background:#f1f3f5; color:#64748b; border-color:#dde2e7;}
.pr-urgente{background:#fdeef0; color:#a3253a; border-color:#f0c2c9;}
.pr-alta{background:#fff5e6; color:#8a5a12; border-color:#f0dcb4;}
.pr-media{background:var(--cinza); color:var(--txt2);}
.pr-baixa{background:#f6f8f9; color:var(--txt3);}
.pr-media::before, .pr-baixa::before{display:none;}
.sla-atrasada{background:#fdeef0; color:#a3253a; border-color:#f0c2c9;}
.sla-vence_logo{background:#fff5e6; color:#8a5a12; border-color:#f0dcb4;}
.sla-no_prazo, .sla-respondida{background:#eaf7ef; color:#1f7a45; border-color:#bfe4cd;}
.sla-respondida_fora{background:#fff5e6; color:#8a5a12; border-color:#f0dcb4;}
.sla-sem_resposta{background:#f1f3f5; color:#64748b; border-color:#dde2e7;}
.tipo{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--txt2);}
.tipo svg{width:13px; height:13px;}

/* ---------- Kanban ---------- */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; align-items:start;}
/* Coluna com rolagem própria: 30 cartões numa coluna só empurrariam a página
   para 4.000 px e o RH perderia de vista as outras colunas. */
.coluna{background:#e2ecef; border-radius:var(--raio); padding:10px; min-height:200px;
  max-height:calc(100vh - 230px); overflow-y:auto;}
.coluna > h4{position:sticky; top:-10px; background:#e2ecef; padding:8px 0 6px; margin-top:-8px; z-index:1;}
.coluna.alvo{outline:2px dashed var(--azul2); outline-offset:-2px; background:#d6e6eb;}
.coluna > h4{margin:2px 4px 10px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--txt2); display:flex; justify-content:space-between;}
.coluna > h4 b{color:var(--txt); font-variant-numeric:tabular-nums;}
.cartao{
  display:block; background:var(--surface); border:1px solid var(--linha); border-radius:8px;
  padding:10px 11px; margin-bottom:8px; box-shadow:var(--sombra); text-decoration:none; color:var(--txt);
  cursor:grab;
}
.cartao:hover{border-color:#b7cdd4;}
.cartao.arrastando{opacity:.5;}
.cartao .l1{display:flex; justify-content:space-between; gap:6px; align-items:center; margin-bottom:5px;}
.cartao .prot{font-weight:700; color:var(--azul); font-size:12.5px; font-variant-numeric:tabular-nums;}
.cartao .cat{font-size:12px; font-weight:600;}
.cartao .tr{font-size:12px; color:var(--txt2); margin:4px 0 7px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.cartao .l3{display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:11px; color:var(--txt3);}

/* ---------- detalhe da manifestação ---------- */
.migalha{font-size:12.5px; margin-bottom:10px;}
.migalha a{color:var(--azul); text-decoration:none;}
.detalhe{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start;}
.cab-ticket{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:12px;}
.cab-ticket h2{margin:0; font-size:20px; color:var(--azul); font-variant-numeric:tabular-nums;}
.meta{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 16px; margin:12px 0 4px;}
.meta div{font-size:13px;}
.meta .rot{display:block; margin-bottom:2px;}
.relato{white-space:pre-wrap; word-wrap:break-word; font-size:14px; line-height:1.6; margin:0; background:#f7fafb; border:1px solid var(--linha); border-radius:8px; padding:12px 14px;}
.anexos{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.anexo{display:flex; flex-direction:column; gap:4px; width:150px; font-size:11.5px; color:var(--txt2); text-decoration:none;}
.anexo img{width:150px; height:110px; object-fit:cover; border-radius:6px; border:1px solid var(--linha); background:var(--cinza);}
.anexo .doc{width:150px; height:110px; border-radius:6px; border:1px solid var(--linha); background:var(--cinza); display:grid; place-items:center; color:var(--azul); font-weight:700;}
.ident{border-left:3px solid var(--azul2); padding:2px 0 2px 12px; font-size:13px;}
.ident dt{font-size:10.5px; color:var(--txt2); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-top:6px;}
.ident dd{margin:0;}

.timeline{list-style:none; margin:0; padding:0; position:relative;}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--linha);}
.timeline li{position:relative; padding:0 0 14px 26px;}
.timeline li::before{content:""; position:absolute; left:2px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--azul2);}
.timeline li.ev-resposta::before{background:var(--azul); border-color:var(--azul);}
.timeline li.ev-nota::before{background:#fff5e6; border-color:var(--laranja);}
.timeline li.ev-complemento::before, .timeline li.ev-abertura::before{background:var(--azul-fraco);}
.timeline .tt{font-weight:600; font-size:13px;}
.timeline .qd{font-size:11.5px; color:var(--txt3); font-variant-numeric:tabular-nums;}
.timeline .tx{white-space:pre-wrap; word-wrap:break-word; margin-top:6px; padding:9px 11px; border-radius:7px; background:#f7fafb; border:1px solid var(--linha); font-size:13px; line-height:1.55;}
.timeline .ev-nota .tx{background:#fffaf2; border-color:#f0dcb4;}
.timeline .ev-resposta .tx{background:var(--azul-fraco); border-color:#c5dde4;}
.selo-int{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#8a5a12; background:#fff5e6; border:1px solid #f0dcb4; border-radius:4px; padding:1px 6px; margin-left:6px;}
.selo-pub{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--azul); background:var(--azul-fraco); border:1px solid #c5dde4; border-radius:4px; padding:1px 6px; margin-left:6px;}

.acoes-ticket .card{margin-bottom:12px;}
.acoes-ticket form{display:flex; flex-direction:column; gap:8px;}
.acoes-ticket select, .acoes-ticket textarea, .campo-txt{
  font-family:inherit; font-size:13px; color:var(--txt); width:100%;
  padding:8px 10px; border:1px solid #c3d4da; border-radius:7px; background:var(--surface);
}
.acoes-ticket textarea{min-height:96px; resize:vertical; line-height:1.5;}
.acoes-ticket .linha{display:flex; gap:8px; align-items:center;}
.acoes-ticket .linha select{flex:1;}
.acoes-ticket .ajuda{font-size:11.5px; color:var(--txt3); margin:0;}
.acoes-ticket label.opc{display:flex; gap:7px; align-items:center; font-size:12.5px; color:var(--txt2);}
.aviso-leitura{font-size:12.5px; color:var(--txt2);}

/* ---------- avisos, tooltip, toast ---------- */
.nota{
  background:#fff8ea; border:1px solid #f0dcb4; border-left:3px solid var(--laranja);
  border-radius:var(--raio); padding:12px 15px; margin-bottom:14px; font-size:12.5px; color:#5c4a2a;
}
.nota b{color:#8a5a12;}
.nota.info{background:var(--azul-fraco); border-color:#c5dde4; border-left-color:var(--azul); color:#21414b;}
.nota.info b{color:var(--azul);}
.nota.erro{background:#fdeef0; border-color:#f0c2c9; border-left-color:var(--vermelho); color:#7a2a36;}
.nota.erro b{color:var(--vermelho);}
.nota a{color:inherit; font-weight:600;}
#tip{
  position:fixed; z-index:50; pointer-events:none; background:#12333d; color:#fff;
  font-size:12px; padding:7px 10px; border-radius:7px; box-shadow:0 4px 14px rgba(0,0,0,.22);
  opacity:0; transition:opacity .12s; max-width:280px; line-height:1.5;
}
#tip.on{opacity:1;}
#tip b{color:#8fd6e6;}
#tip .tipt{display:block; color:#b9d4dc; margin:2px 0 5px;}
#tip .tipl{display:flex; justify-content:space-between; gap:14px; white-space:nowrap;}
#toast{
  position:fixed; right:22px; bottom:22px; z-index:60; background:#12333d; color:#fff;
  padding:12px 16px; border-radius:9px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.25);
  transform:translateY(14px); opacity:0; transition:.2s; pointer-events:none; max-width:380px;
}
#toast.on{transform:none; opacity:1;}
#toast.erro{background:#7a2a36;}
.carregando{opacity:.45; transition:opacity .15s;}
.rodape{margin-top:18px; font-size:11.5px; color:var(--txt3); text-align:center; line-height:1.7;}
.rodape a{color:var(--txt2);}

/* ---------- login e erro ---------- */
.centro{min-height:100vh; display:grid; place-items:center; padding:24px;}
.painel-msg{
  background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:0 4px 18px rgba(21,50,58,.09); max-width:460px; width:100%; text-align:center; overflow:hidden;
}
/* O logo do CTC é branco: só aparece sobre a faixa azul. */
.painel-msg .faixa{background:var(--azul); padding:18px; }
.painel-msg .faixa img{height:46px; display:block; margin:0 auto;}
.painel-msg .corpo{padding:26px 30px 30px;}
.painel-msg h1{font-size:20px; color:var(--azul); margin:0 0 10px;}
.painel-msg p{color:var(--txt2); margin:0 0 20px; font-size:13.5px; line-height:1.6;}
.painel-msg .btn{justify-content:center;}
.login-local{display:flex; flex-direction:column; gap:10px; text-align:left; margin-top:6px;}
.login-local input{font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid #c3d4da; border-radius:7px; width:100%;}
.login-local .btn{height:40px; width:100%;}
.separador{display:flex; align-items:center; gap:10px; color:var(--txt3); font-size:11.5px; margin:18px 0 12px;}
.separador::before, .separador::after{content:""; flex:1; height:1px; background:var(--linha);}
.aviso-dev{font-size:11.5px; color:#8a5a12; background:#fff5e6; border:1px solid #f0dcb4; border-radius:6px; padding:6px 9px; margin:0 0 12px;}

/* ---------- cartaz do QR Code ---------- */
.cartaz-acoes{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.cartaz{
  background:#fff; width:100%; max-width:640px; margin:0 auto; border-radius:var(--raio);
  border:1px solid var(--linha); overflow:hidden; text-align:center; box-shadow:var(--sombra);
}
.cartaz .faixa{background:var(--azul); color:#fff; padding:26px 24px 22px;}
.cartaz .faixa img{height:58px;}
.cartaz .faixa h2{margin:12px 0 4px; font-size:34px; letter-spacing:.3px;}
.cartaz .faixa p{margin:0; font-size:15px; opacity:.92;}
.cartaz .miolo{padding:22px 28px 26px;}
.cartaz .cats{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.cartaz .cats span{border:1.5px solid var(--azul); color:var(--azul); border-radius:20px; padding:4px 13px; font-weight:700; font-size:14px;}
.cartaz .qr{width:300px; height:300px; display:block; margin:0 auto;}
.cartaz .url{font-size:17px; font-weight:700; color:var(--txt); margin:10px 0 16px; word-break:break-all;}
.cartaz .garantias{list-style:none; padding:0; margin:0 auto; max-width:460px; text-align:left; font-size:14px; color:var(--txt2);}
.cartaz .garantias li{padding:5px 0 5px 26px; position:relative;}
.cartaz .garantias li::before{content:"✓"; position:absolute; left:4px; color:var(--verde); font-weight:700;}

@media print{
  @page{size:A4 portrait; margin:12mm;}
  body{background:#fff;}
  header.topo, nav.abas, .cartaz-acoes, .rodape, .nao-imprimir{display:none !important;}
  .wrap{padding:0;}
  .cartaz{border:none; box-shadow:none; max-width:none;}
  .cartaz .qr{width:110mm; height:110mm;}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}

/* ---------- responsivo ---------- */
@media (max-width:1400px){ .kpis{grid-template-columns:repeat(3,1fr);} .c4{grid-column:span 6;} .c8{grid-column:span 12;} }
@media (max-width:1050px){ .detalhe{grid-template-columns:1fr;} }
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .c6,.c4,.c8{grid-column:span 12;}
  .acoes{margin-left:0; width:100%;}
  .bar .lbl{width:120px;}
}
@media (max-width:640px){
  header.topo{padding:10px 14px; gap:10px; flex-wrap:nowrap;}
  header.topo .logo{height:30px;}
  header.topo h1{font-size:15px; line-height:1.2;}
  header.topo .sub{font-size:10.5px;}
  header.topo .so-largo{display:none;}
  header.topo .titulo{min-width:0; flex:1;}
  header.topo .userbox{margin-left:0; padding:0; background:none; gap:8px; flex:none;}
  header.topo .quem-sou{display:none;}
  header.topo .sair{border-left:none; padding-left:0; margin-left:0;}
  nav.abas{padding:0 8px;}
  .wrap{padding:12px 14px 32px;}
  .f, .f select, .f input, .f input.busca{width:100%; max-width:none; min-width:0; height:40px;}
  .acoes .btn{flex:1; justify-content:center; height:40px;}
  .kpis{grid-template-columns:1fr; gap:8px;}
  .kpi{display:grid; grid-template-columns:1fr auto; align-items:center; padding:11px 13px;}
  .kpi .v{grid-column:2; grid-row:1; margin:0; font-size:23px;}
  .kpi .s{grid-column:1 / -1; margin-top:3px;}
  .col .xl{font-size:9px; transform:rotate(-60deg); height:26px;}
  .col .tot{display:none;}
  .bar{flex-wrap:wrap; gap:4px 8px;}
  .bar .lbl{width:100%; font-weight:600;}
  /* Tabela vira lista de cartões, como no Painel de Horas. */
  .tablewrap{max-height:none; border:none; background:none; box-shadow:none; overflow:visible;}
  #tbl, #tbl tbody, #tbl tr, #tbl td{display:block; width:100%;}
  #tbl thead{display:none;}
  #tbl tr{background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio); margin-bottom:8px; padding:4px 0;}
  #tbl tbody tr:nth-child(even){background:var(--surface);}
  #tbl td{display:flex; justify-content:space-between; gap:14px; border:none; padding:5px 13px; white-space:normal; text-align:right;}
  #tbl td::before{content:attr(data-rot); flex:none; text-align:left; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--txt3);}
  #tbl td.trecho{min-width:0; max-width:none; text-align:left; display:block;}
  #tbl td.trecho::before{display:block;}
  #toast{left:14px; right:14px; bottom:14px; max-width:none;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }