/* ============================================================
   SecTec — folha de estilo

   Mesma linguagem visual do controle-insumos do 1º BEC: barra
   lateral escura, fundo cinza, cartões brancos arredondados e
   azul como cor de ação. Os valores são os da paleta do Tailwind.
   ============================================================ */

:root{
  --slate-950:#020617; --slate-900:#0f172a; --slate-800:#1e293b;
  --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b;
  --slate-400:#94a3b8; --slate-300:#cbd5e1; --slate-200:#e2e8f0;
  --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-500:#6b7280;
  --gray-700:#374151; --gray-800:#1f2937;
  --blue-100:#dbeafe; --blue-400:#60a5fa; --blue-500:#3b82f6;
  --blue-600:#2563eb; --blue-700:#1d4ed8;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-600:#059669;
  --emerald-700:#047857;
  --red-100:#fee2e2; --red-500:#ef4444; --red-600:#dc2626;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706;
  --amber-700:#b45309;
  --sombra:0 1px 2px 0 rgb(0 0 0 / .05);
  --sombra-lg:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  /* apelidos antigos, para o que ainda usa os nomes de antes */
  --verde:var(--blue-600); --verde-claro:var(--blue-500);
  --verde-bg:var(--blue-100); --amarelo:var(--amber-600);
  --borda:var(--slate-200); --cinza:var(--slate-500);
  --cinza-claro:var(--slate-50); --vermelho:var(--red-600);
  --fundo:var(--gray-100);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--gray-100); color:#171717;
  font-size:14px; line-height:1.5;
}
input,select,textarea{color:var(--slate-800)}
td{color:var(--slate-700)}

/* ── Estrutura ─────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}

.lateral{
  width:224px; background:var(--slate-800); color:#fff;
  display:flex; flex-direction:column; flex-shrink:0;
  position:sticky; top:0; height:100vh; transition:width .2s;
}
.lateral.mini{width:56px}

.lat-topo{display:flex;align-items:center;gap:12px;padding:16px;
  border-bottom:1px solid var(--slate-700)}
.lateral.mini .lat-topo{justify-content:center;padding:12px}
.lat-topo img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.lat-topo .quem{min-width:0;flex:1}

/* Botão de recolher, dentro do próprio menu */
.lat-recolher{background:none;border:1px solid var(--slate-700);border-radius:6px;
  color:var(--slate-300);cursor:pointer;font-size:12px;line-height:1;
  padding:5px 7px;flex-shrink:0;font-family:inherit;
  transition:background-color .15s,color .15s,border-color .15s}
.lat-recolher:hover{background:var(--slate-700);color:#fff;
  border-color:var(--slate-600)}
/* Recolhido, o menu vira uma coluna estreita: o brasão sai de cena e
   o botão fica sozinho, apontando para o outro lado. */
.lateral.mini .lat-topo{justify-content:center;padding:12px 0;flex-direction:column}
.lateral.mini .lat-topo .quem,
.lateral.mini .lat-topo img{display:none}
.lateral.mini .lat-recolher{padding:7px 9px}
.lat-recolher .seta-abre{display:none}
.lateral.mini .lat-recolher .seta-fecha{display:none}
.lateral.mini .lat-recolher .seta-abre{display:inline}
.lat-topo .quem small{font-size:12px;color:var(--slate-400);display:block}
.lat-topo .quem strong{font-size:14px;font-weight:600;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lat-nav{flex:1;padding:8px 0;overflow-y:auto}
.lat-nav::-webkit-scrollbar{width:6px}
.lat-nav::-webkit-scrollbar-thumb{background:var(--slate-700);border-radius:3px}
.lat-secao{padding:8px 16px;font-size:12px;font-weight:700;
  color:var(--slate-400);text-transform:uppercase;letter-spacing:.1em}
.lateral.mini .lat-secao{display:none}

.lat-solo{width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 16px;font-size:14px;color:#fff;text-decoration:none;
  transition:background-color .15s}
.lat-solo:hover{background:var(--slate-700)}
.lat-solo.ativo{background:var(--slate-800);color:var(--blue-400);
  border-right:2px solid var(--blue-400)}
.lateral.mini .lat-solo{justify-content:center;padding:10px 0}
.lateral.mini .lat-solo span:not(.ic){display:none}

.grupo>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;font-size:14px;color:#fff;background:none;border:none;
  cursor:pointer;font-family:inherit;text-align:left;
  transition:background-color .15s;
}
.grupo>button:hover{background:var(--slate-700)}
.grupo>button .esq{display:flex;align-items:center;gap:12px}
.grupo>button .seta{font-size:10px;opacity:.85;transition:transform .15s}
.grupo.aberto>button .seta{transform:rotate(90deg)}
.lateral.mini .grupo>button{justify-content:center;padding:10px 0}
.lateral.mini .grupo>button span:not(.ic),
.lateral.mini .grupo>button .seta{display:none}
.ic{width:18px;text-align:center;flex-shrink:0;font-size:15px;line-height:1}

.filhos{display:none;background:var(--slate-900)}
.grupo.aberto .filhos{display:block}
.lateral.mini .filhos{display:none !important}
.filhos a{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 40px;
  font-size:14px;color:var(--slate-300);text-decoration:none;
  transition:background-color .15s,color .15s}
.filhos a::before{content:"";width:6px;height:6px;border-radius:9999px;
  background:currentColor;opacity:.6;flex-shrink:0}
.filhos a:hover{background:var(--slate-700);color:#fff}
.filhos a.ativo{color:var(--blue-400);background:var(--slate-800);
  border-right:2px solid var(--blue-400)}

.lat-pe{border-top:1px solid var(--slate-700);padding:8px}
.lat-pe a{display:flex;align-items:center;gap:12px;padding:10px 16px;
  color:var(--slate-300);text-decoration:none;font-size:14px;border-radius:4px;
  transition:background-color .15s,color .15s}
.lat-pe a:hover{background:var(--slate-700);color:#fff}
.lateral.mini .lat-pe a{justify-content:center;padding:10px 0}
.lateral.mini .lat-pe a span:not(.ic){display:none}

.corpo{flex:1;display:flex;flex-direction:column;min-width:0}
.topo{
  height:56px;background:#fff;border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;position:sticky;top:0;z-index:20;flex-shrink:0;
}
.topo .usuario{display:flex;align-items:center;gap:8px;font-size:14px;
  color:var(--gray-700)}
.topo .avatar{width:32px;height:32px;border-radius:9999px;
  background:var(--blue-500);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.topo .papel{font-size:12px;color:var(--slate-400)}

main{flex:1;padding:24px;overflow-x:hidden}
footer{display:none}

/* ── Cabeçalho de página ───────────────────────────────────── */
.pag{margin-bottom:24px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.pag h1{font-size:24px;font-weight:700;color:var(--slate-700);line-height:1.2}
.pag p{font-size:14px;color:var(--slate-400);margin-top:4px}
.pag .acoes{display:flex;gap:8px;flex-wrap:wrap}

/* ── Cartões ───────────────────────────────────────────────── */
.card{
  background:#fff;border:1px solid var(--slate-100);border-radius:12px;
  box-shadow:var(--sombra);padding:24px;margin-bottom:20px;
}
.card-tit{
  font-size:14px;font-weight:600;color:var(--slate-600);
  text-transform:uppercase;letter-spacing:.025em;
  margin:-24px -24px 20px;padding:16px 24px;
  border-bottom:1px solid var(--slate-100);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.card-tit .acoes{margin-left:auto;display:flex;gap:8px;align-items:center}
h2.sec{font-size:16px;font-weight:700;color:var(--slate-700);
  margin:26px 0 12px;letter-spacing:.01em}

/* ── Formulários ───────────────────────────────────────────── */
label{display:block;font-size:12px;font-weight:500;color:var(--slate-600);
  margin-bottom:4px;text-transform:none;letter-spacing:normal}
input[type=text],input[type=password],input[type=date],input[type=number],
input[type=search],input[type=time],input[type=email],select,textarea{
  width:100%;padding:8px 12px;border:1px solid var(--slate-200);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;
  transition:box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;
  box-shadow:0 0 0 2px var(--blue-400)}
input[readonly],input:disabled,select:disabled{
  background:var(--slate-50);border-color:var(--slate-100);
  color:var(--slate-400);cursor:not-allowed}
input[readonly]:focus{box-shadow:none}
textarea{resize:vertical;min-height:76px}
input[type=checkbox]{width:auto;margin:0;accent-color:var(--blue-600)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.span4{grid-column:span 4}
@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .span3,.span4{grid-column:span 2}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .span2,.span3,.span4{grid-column:span 1}
}
.marca{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;
  color:var(--slate-600);cursor:pointer;margin:0}

/* ── Botões ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border:1px solid var(--slate-200);border-radius:8px;background:#fff;
  color:var(--slate-600);font-size:14px;font-weight:500;cursor:pointer;
  text-decoration:none;font-family:inherit;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--slate-50);color:var(--slate-800)}
.btn-p{background:var(--blue-600);color:#fff;border-color:var(--blue-600);
  padding:8px 20px}
.btn-p:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.btn-a{background:var(--amber-600);color:#fff;border-color:var(--amber-600)}
.btn-a:hover{background:var(--amber-700);border-color:var(--amber-700);color:#fff}
.btn-x{background:#fff;color:var(--slate-400);border-color:var(--slate-200)}
.btn-x:hover{background:var(--red-100);color:var(--red-600);
  border-color:var(--red-100)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-p.btn-sm{padding:6px 14px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:8px}
.barra .dir{margin-left:auto;display:flex;gap:8px}

/* ── Tabelas ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--slate-50);padding:12px 16px;text-align:left;font-size:12px;
  font-weight:500;color:var(--slate-500);text-transform:uppercase;
  letter-spacing:.025em;white-space:nowrap;border-bottom:none}
td{padding:12px 16px;border-top:1px solid var(--slate-50);
  border-bottom:none;vertical-align:middle}
tbody tr:first-child td{border-top:none}
tbody tr:nth-child(even){background:transparent}
tbody tr:hover{background:var(--slate-50)}
td input,td select{padding:6px 10px;font-size:13px}
/*
  A tabela alinha com o resto do cartão.
  ------------------------------------------------------------------
  Ela era puxada para fora com margem negativa, para encostar nas bordas.
  O resultado é que sobrava dos dois lados em relação ao título e ao
  texto de ajuda, que ficam recuados — a tabela começava antes e acabava
  depois de tudo o mais, e nada na tela alinhava com nada. Recuada junto
  com o resto, o cartão tem uma coluna só, e é isso que faz parecer
  organizado. De quebra, a barra de rolagem deixa de passar por cima do
  botão que vem embaixo.
*/
.tab-wrap{overflow-x:auto;margin:0;padding:0}
.tab-wrap table{border-radius:8px;border:1px solid var(--slate-200);
  overflow:hidden}
.dir{text-align:right}

/* ── Paginação ─────────────────────────────────────────────── */
.paginacao{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:14px 0 0;margin-top:4px;
  border-top:1px solid var(--slate-100);font-size:13px;
  color:var(--slate-500)}
.pag-nav,.pag-por{display:flex;align-items:center;gap:4px}
.pag-lnk{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;border-radius:6px;
  border:1px solid var(--slate-200);background:#fff;color:var(--slate-600);
  text-decoration:none;font-size:13px;transition:background-color .15s}
.pag-lnk:hover{background:var(--slate-50);color:var(--slate-800)}
.pag-lnk.atual{background:var(--blue-600);border-color:var(--blue-600);
  color:#fff;font-weight:600}
.pag-lnk.desligado{opacity:.4;pointer-events:none;border-color:transparent}

/* Primeira coluna clicável: é ela que abre o registro, no lugar de um
   botão "Abrir" repetido em toda linha. */
.lnk{color:var(--slate-800);font-weight:700;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.lnk:hover{color:var(--blue-600);border-bottom-color:var(--blue-400)}
tbody tr:hover .lnk{color:var(--blue-600)}

/* ── Etiquetas ─────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 10px;border-radius:9999px;
  font-size:11px;font-weight:600;text-transform:none;letter-spacing:normal;
  white-space:nowrap}
.b-verde{background:var(--emerald-100);color:var(--emerald-700)}
.b-amarelo{background:var(--amber-100);color:var(--amber-700)}
.b-cinza{background:var(--slate-100);color:var(--slate-500)}
.b-vermelho{background:var(--red-100);color:var(--red-600)}
.b-azul{background:var(--blue-100);color:var(--blue-700)}

/* ── Avisos ────────────────────────────────────────────────── */
.msg{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.msg-ok{background:var(--emerald-50);border:1px solid var(--emerald-100);
  color:var(--emerald-700)}
.msg-erro{background:#fef2f2;border:1px solid var(--red-100);
  color:var(--red-600)}
.msg-aviso{background:var(--amber-50);border:1px solid #fde68a;
  color:var(--amber-700)}
.vazio{text-align:center;padding:48px 20px;color:var(--slate-400);font-size:14px}
.vazio .ic{font-size:36px;display:block;margin-bottom:12px;opacity:.45}
.ajuda{font-size:13px;color:var(--slate-400);margin-bottom:12px;line-height:1.6}

/* ── Abas ──────────────────────────────────────────────────── */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--slate-200);
  margin-bottom:20px;overflow-x:auto}
.aba{padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--slate-500);border:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;background:none;font-family:inherit;
  text-transform:none;letter-spacing:normal;transition:color .15s}
.aba:hover{color:var(--slate-700)}
.aba.ativo{color:var(--blue-600);border-bottom-color:var(--blue-600)}
.painel{display:none}
.painel.ativo{display:block}

/* ── Recipientes e fotos ───────────────────────────────────── */
.rec{border:1px solid var(--slate-200);border-radius:10px;padding:16px;
  margin-bottom:12px;background:#fff}
.rec-tit{font-size:14px;font-weight:600;color:var(--slate-700);
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--slate-100);
  display:flex;align-items:center;gap:8px}
/* As fotos ficam centradas no cartão, uma ou duas: a caixa tem largura
   máxima, e sem centrar elas se acumulariam à esquerda com um vazio
   grande do lado direito. */
.fotos{display:grid;grid-template-columns:repeat(2, minmax(0, 420px));
  gap:12px;margin-bottom:12px;justify-content:center}
.fotos.uma{grid-template-columns:minmax(0, 420px)}
.foto{border:1px dashed var(--slate-300);border-radius:10px;min-height:140px;
  height:240px;max-width:420px;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:#fff;cursor:pointer;overflow:hidden;
  transition:border-color .15s,background-color .15s}
.foto:hover{border-color:var(--blue-400);background:#eff6ff}
/* Na tela a foto é conferência, não é o documento: a caixa tem tamanho
   fixo e a imagem encolhe inteira dentro dela — `contain`, não `cover`,
   senão uma panorâmica do pátio sai decepada em cima e embaixo. O
   arquivo enviado não é tocado: o PDF e o DOCX usam o original. */
.foto img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;cursor:zoom-in}
.foto .ph{text-align:center;color:var(--slate-400);font-size:13px;padding:12px}
.foto .ph b{display:block;font-size:24px;margin-bottom:6px;opacity:.5}
.foto .rm{position:absolute;top:6px;right:6px;background:var(--red-600);
  color:#fff;border:none;border-radius:6px;padding:4px 8px;font-size:11px;
  cursor:pointer;display:none}
.foto:hover .rm{display:block}
.leg{font-size:12px;color:var(--slate-400);text-align:center;margin-top:4px}

/* ── Resumo e crítica ──────────────────────────────────────── */
.calc{background:var(--blue-100);font-weight:600;color:var(--blue-700)}
.crit-ok{color:var(--emerald-600);font-weight:600}
.crit-fora{color:var(--red-500);font-weight:600}
.linha-fora{background:#fef2f2 !important}
.analise-bloco{border:1px solid var(--slate-200);border-radius:10px;
  padding:14px;margin-bottom:12px;background:#fff}
.analise-bloco .cab{display:flex;align-items:center;gap:10px;
  margin-bottom:10px;flex-wrap:wrap}
.analise-bloco .cab strong{font-size:14px;color:var(--slate-700)}

.salvo{position:fixed;bottom:20px;right:20px;background:var(--slate-800);
  color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;opacity:0;
  transition:opacity .25s;pointer-events:none;z-index:900;
  box-shadow:var(--sombra-lg)}
.salvo.ver{opacity:1}

/* ── Cartões de saldo ──────────────────────────────────────── */
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;margin-bottom:8px}
.cartao{background:#fff;border:1px solid var(--slate-100);border-radius:12px;
  padding:16px 18px;box-shadow:var(--sombra);
  transition:box-shadow .15s,border-color .15s}
.cartao:hover{border-color:var(--blue-400);box-shadow:var(--sombra-lg)}
.cartao-nome{font-size:12px;font-weight:600;color:var(--slate-500);
  text-transform:uppercase;letter-spacing:.025em;line-height:1.35;
  min-height:32px}
.cartao-saldo{font-size:26px;font-weight:700;margin:6px 0 2px;
  font-variant-numeric:tabular-nums;line-height:1.1;color:var(--slate-700)}
.cartao-saldo .un{font-size:12px;font-weight:500;color:var(--slate-400);
  margin-left:4px}
.cartao-saldo.pos{color:var(--emerald-600)}
.cartao-saldo.neg{color:var(--red-500)}
.cartao-saldo.zero{color:var(--slate-400)}
.cartao-pe{display:flex;gap:16px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--slate-100);font-size:13px;
  font-variant-numeric:tabular-nums}
.cartao-pe span{display:flex;flex-direction:column;line-height:1.3}
.cartao-pe b{font-size:10px;font-weight:500;color:var(--slate-400);
  text-transform:none}

/* ── Plano de Trabalho (clean, no formato do orçamento) ───── */
table.ptrab{font-size:13.5px}
table.ptrab td{padding:14px 16px;vertical-align:middle;
  border-top:1px solid var(--slate-100)}
table.ptrab th{padding:14px 16px;background:#fff;
  border-bottom:1px solid var(--slate-200);color:var(--slate-500)}
table.ptrab .dir{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
table.ptrab tbody tr:hover{background:var(--slate-50)}
table.ptrab .und{display:inline-block;background:var(--slate-100);
  color:var(--slate-500);font-size:11px;font-weight:500;padding:2px 9px;
  border-radius:6px;text-transform:uppercase}
tr.ptrab-grupo td{background:var(--slate-50) !important;font-weight:700;
  color:var(--slate-700);text-transform:uppercase;letter-spacing:.03em;
  font-size:12px;padding-top:12px;padding-bottom:12px}
tr.ptrab-grupo:hover td{background:var(--slate-50) !important}
tr.ptrab-sub td{color:var(--slate-500);font-weight:600;font-size:12.5px;
  padding-top:10px;padding-bottom:10px}

/* ── Login ─────────────────────────────────────────────────── */
.login-wrap{
  max-width:390px;margin:0 auto;background:#fff;border-radius:16px;
  padding:36px 32px;box-shadow:0 20px 50px rgb(0 0 0 / .3);
}
.login-fundo{min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:linear-gradient(150deg,var(--slate-800),var(--slate-950))}
.login-wrap img{width:64px;display:block;margin:0 auto 16px}
.login-wrap .org{text-align:center;font-size:11px;color:var(--slate-400);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.7}
.login-wrap h1{font-size:19px;font-weight:700;color:var(--slate-700);
  text-align:center;margin:10px 0 24px}
.login-wrap .campo{margin-bottom:16px}
.login-wrap button{width:100%;justify-content:center;padding:11px;margin-top:6px}

/* ── Impressão ─────────────────────────────────────────────── */
@page{margin:1.5cm;size:A4}
@media print{
  .lateral,.topo,.pag .acoes,.nao-imprime{display:none !important}
  body{background:#fff !important;font-size:11px}
  .app{display:block}
  main{padding:0}
  .card{border:none;box-shadow:none;margin:0 0 12px;padding:0}
  .card-tit{margin:0 0 8px;padding:0 0 6px}
}

/* ── Dashboard (a entrada do sistema) ──────────────────────── */
.hub-topo{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:24px}
.hub-topo h1{font-size:26px;font-weight:700;color:var(--slate-800);
  line-height:1.25;max-width:640px}
.hub-topo p{font-size:14px;color:var(--slate-400);margin-top:6px}
.hub-nums{display:flex;gap:28px}
.hub-nums div{display:flex;flex-direction:column;align-items:flex-end}
.hub-nums .n{font-size:26px;font-weight:700;color:var(--slate-800);
  line-height:1.1;font-variant-numeric:tabular-nums}
.hub-nums .n.alerta{color:var(--red-600)}
.hub-nums .r{font-size:12px;color:var(--slate-400);margin-top:2px}

.hub-alerta{display:flex;align-items:center;gap:12px;background:var(--amber-50);
  border:1px solid #fde68a;border-radius:12px;padding:14px 18px;
  margin-bottom:24px;font-size:14px;color:var(--amber-700)}
.hub-alerta.urgente{background:#fef2f2;border-color:var(--red-100);
  color:var(--red-600)}
.hub-alerta .ic{font-size:17px;line-height:1}
.hub-alerta .txt{flex:1}
.hub-alerta .mais{opacity:.7;font-size:13px}

.dash-barra{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 4px}
.dash-barra h2{font-size:17px;font-weight:700;color:var(--slate-800)}
.dash-barra p{font-size:13px;color:var(--slate-400);margin-top:3px}
.dash-acoes{display:flex;gap:8px;flex-wrap:wrap}
.txt-erro{color:var(--red-500)}

/* Entrada em verde, saída em vermelho — o pé de cada cartão */
.cartao-pe .ent{color:var(--emerald-600)}
.cartao-pe .sai{color:var(--red-500)}
.cartao-pe .ent b,.cartao-pe .sai b{color:var(--slate-400)}

/* Nome de função e de equipamento: o rótulo é o próprio nome, então
   fica no tamanho miúdo, do jeito que foi cadastrado. */
label.min{font-size:10.5px}

/* Memória de cálculo da produção — mostra a conta antes de gravar */
.conta{background:var(--blue-100);border:1px solid var(--blue-400);
  border-radius:8px;padding:10px 14px;font-size:13px;color:var(--blue-700);
  font-variant-numeric:tabular-nums}
.conta b{font-weight:700}
.un-svc{color:var(--blue-600);font-weight:600}

/* Número grande dos cartões de resumo */
.num-g{font-size:26px;font-weight:700;color:var(--slate-800);line-height:1.15;
  margin-top:4px;font-variant-numeric:tabular-nums}
.num-g.verde{color:var(--emerald-600)}
tfoot tr.tot td{background:var(--slate-50);font-weight:700;
  color:var(--slate-800);border-top:2px solid var(--slate-200)}

/* Relatório por período: entrada esverdeada, saída avermelhada */
.txt-ent{color:var(--emerald-600)}
.num-g.vermelho{color:var(--red-500)}
.card-tit.tit-ent{background:var(--emerald-50);color:var(--emerald-700);
  border-bottom-color:var(--emerald-100)}
.card-tit.tit-sai{background:#fef2f2;color:var(--red-600);
  border-bottom-color:var(--red-100)}
table .und{display:inline-block;background:var(--slate-100);
  color:var(--slate-500);font-size:11px;font-weight:500;padding:2px 9px;
  border-radius:6px;text-transform:uppercase}

/* ── Cadastro em coluna estreita (frota) ───────────────────── */
/* Formulário de uma coluna: centrado, senão fica um cartão
   estreito colado à esquerda e meia tela vazia à direita. */
.form-estreito{max-width:520px;margin-left:auto;margin-right:auto}
.ic-redondo{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--blue-100);
  font-size:13px;margin-right:8px;vertical-align:middle}
.secao-form{font-size:11px;font-weight:700;color:var(--slate-400);
  text-transform:uppercase;letter-spacing:.07em;margin:24px 0 14px;
  padding-top:16px;border-top:1px solid var(--slate-100)}
.arquivo{display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px dashed var(--slate-300);border-radius:8px;padding:14px;
  font-size:13px;color:var(--slate-500);cursor:pointer;text-transform:none;
  font-weight:400;letter-spacing:normal;
  transition:border-color .15s,background-color .15s,color .15s}
.arquivo:hover{border-color:var(--blue-400);background:var(--slate-50);
  color:var(--blue-600)}
.lnk .mais{color:var(--slate-300);font-weight:400}
.lnk:hover .mais{color:var(--blue-400)}

/* ── Visualizador de PDF ───────────────────────────────────── */
.visor{position:fixed;inset:0;background:rgb(15 23 42 / .72);z-index:60;
  display:none;align-items:center;justify-content:center;padding:24px}
.visor.aberto{display:flex}
.visor-cx{background:#fff;border-radius:12px;width:min(1080px,100%);
  height:100%;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgb(0 0 0 / .35)}
.visor-topo{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 16px;border-bottom:1px solid var(--slate-200);
  background:var(--slate-50)}
.visor-topo strong{font-size:14px;color:var(--slate-700);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor iframe{flex:1;width:100%;border:none;background:var(--slate-100)}
@media print{.visor{display:none !important}}

/* ── Perfis de acesso ──────────────────────────────────────── */
.perfis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;margin-top:16px}
.perfil-cx{border:1px solid var(--slate-200);border-radius:10px;
  padding:12px 14px;background:var(--slate-50)}
.perfil-nome{font-size:13px;font-weight:700;color:var(--slate-700);
  margin-bottom:4px}
.perfil-desc{font-size:12px;color:var(--slate-500);line-height:1.5}
/* Com perfil pronto, os campos ficam à vista mas não se editam */
.modulos.travado{opacity:.6}
.modulos.travado select{pointer-events:none;background:var(--slate-50);
  border-color:var(--slate-100);color:var(--slate-500)}

/* ── Ensaios de laboratório ────────────────────────────────── */
/*
  As folhas de ensaio têm dez, doze colunas — mais do que cabe na tela.
  Elas precisam rolar **dentro** do cartão, e não vazar por baixo dele:
  daí o contain e a largura máxima. E a primeira coluna fica presa, para
  não se perder de que linha é a célula ao rolar para o lado.
*/
.tab-wrap{max-width:100%;contain:paint}
table.pontos{font-size:13px;width:max-content;min-width:100%}
table.pontos td,table.pontos th{padding:4px 6px;text-align:center;
  white-space:nowrap;border-right:1px solid var(--slate-100)}
table.pontos td:last-child,table.pontos th:last-child{border-right:0}
/*
  A primeira coluna fica presa ao rolar, mas o alinhamento dela depende
  do que ela guarda — e é aqui que eu tinha errado. Havia uma regra só,
  alinhando tudo à esquerda: nas folhas transpostas ela acerta, porque a
  coluna traz rótulos ("Peso do molde"); nas folhas por linha ela deixava
  o cabeçalho ("PROVETA", "CP") à esquerda enquanto os números embaixo
  ficavam centralizados. Cabeçalho e coluna discordando é o que salta aos
  olhos.

  Agora o padrão é centralizado, como o resto da tabela, e as folhas
  transpostas pedem o alinhamento à esquerda pela classe `rotulos`.
*/
table.pontos td:first-child,table.pontos th:first-child{
  background:var(--slate-50);font-weight:500;
  color:var(--slate-600);position:sticky;left:0;z-index:2;
  box-shadow:1px 0 0 var(--slate-200)}
table.pontos.rotulos td:first-child,
table.pontos.rotulos th:first-child{text-align:left}
table.pontos thead th{position:sticky;top:0;z-index:1;
  background:var(--slate-50)}
table.pontos thead th:first-child{z-index:3}
/*
  O campo ocupa a célula inteira.
  ------------------------------------------------------------------
  Antes eu limitava a largura do campo para caber mais coluna na tela.
  O efeito foi o contrário do pretendido: nas tabelas de poucas colunas
  a célula estica e o campo fica boiando no meio dela, com um vão de
  cada lado. Deixando o campo preencher a célula, a linha vira uma
  grade sólida — e quem controla a largura passa a ser a coluna, que
  cada folha já declara conforme o que se digita nela.
*/
table.pontos input,table.pontos select{
  padding:5px 6px;font-size:13px;text-align:center;
  min-width:0;width:100%;display:block}
/*
  Todas as linhas com a mesma altura. A célula de digitar tem o campo
  dentro, que já traz a sua própria altura; a calculada tem só texto. Sem
  acertar os dois lados, a tabela ficava com o passo irregular — três
  linhas apertadas, três folgadas — e é isso que dava o aspecto
  desalinhado.
*/
table.pontos td:has(input),table.pontos td:has(select){padding:5px 6px}
table.pontos td.calc,table.pontos tr.derivado td{padding:10px 6px}
table.pontos tr:hover td{background:var(--slate-50)}
table.pontos tr:hover td.calc{background:var(--slate-100)}
table.pontos input.cc{font-variant-numeric:tabular-nums}
/* Linha que o sistema calcula: não se digita nela */
table.pontos tr.derivado td{background:var(--slate-50);
  font-variant-numeric:tabular-nums;color:var(--slate-600)}
table.pontos tr.derivado td:first-child{font-size:12px;font-style:italic}
table.pontos tr.destaque td{background:var(--blue-100);
  color:var(--blue-700);font-size:14px}
.ok-gc{color:var(--emerald-600) !important;font-weight:700}
.ruim-gc{color:var(--red-500) !important;font-weight:700}
table.pontos td.calc{background:var(--slate-50);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--slate-600)}
table.pontos td.num{background:var(--slate-50);color:var(--slate-400);
  text-align:center;font-size:11px}
ul.lista{margin:0;padding-left:18px;font-size:13px;color:var(--slate-600);
  line-height:1.9}
ul.lista li::marker{color:var(--blue-400)}

/* Miniatura da frota na listagem — reconhecer a máquina pela cara */
td.miniatura{padding:4px 6px}
td.miniatura img{width:44px;height:44px;object-fit:cover;border-radius:6px;
  border:1px solid var(--slate-200);display:block;cursor:zoom-in;
  transition:transform .12s,border-color .12s}
td.miniatura img:hover{transform:scale(1.08);border-color:var(--blue-500)}
td.miniatura .sem-foto{color:var(--slate-300);display:block;text-align:center}

/* ── Barra de salvar, para edição direto na lista ───────────── */
.barra-salvar{position:sticky;top:56px;z-index:15;display:flex;
  align-items:center;justify-content:space-between;gap:16px;
  background:var(--blue-100);border:1px solid var(--blue-400);
  border-radius:10px;padding:12px 16px;margin-bottom:16px;
  font-size:13px;color:var(--blue-700)}
/*
  A situação se lê pela cor antes de se ler pela palavra — é o que
  interessa numa lista de 132 linhas. O destaque de "alterado" é um anel
  em volta, e não outro fundo, para não brigar com o verde e o vermelho.
*/
select.sit{font-size:12.5px;padding:5px 8px;width:100%;font-weight:600;
  border-width:1px}
select.sit.sit-ok{color:var(--emerald-700);border-color:var(--emerald-600);
  background:var(--emerald-50)}
select.sit.sit-nao{color:var(--red-600);border-color:var(--red-500);
  background:var(--red-100)}
select.sit.mudou{outline:2px solid var(--blue-500);outline-offset:1px}

/* Visualizador de foto — a imagem no tamanho que ela tem */
.visor-foto .visor-cx{width:min(900px,100%);height:auto;max-height:92vh}
.visor-foto-cx{background:var(--slate-900);display:flex;align-items:center;
  justify-content:center;padding:12px;min-height:200px}
.visor-foto-cx img{max-width:100%;max-height:78vh;object-fit:contain;
  border-radius:6px;display:block}