/* ==========================================================================
   Portal de Evidências — folha de estilo única
   Antes tudo isto vivia inline em views/_head.ejs (98 linhas de <style>).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* cor */
  --azul: #1f4e78;
  --azul-claro: #2d6da3;
  --azul-escuro: #163a5a;
  --fundo: #f4f6f9;
  --branco: #fff;
  --ok: #1e7e34;
  --erro: #c0392b;
  --alerta: #b7791f;

  /* texto */
  --txt: #1f2937;
  --txt-2: #4b5563;
  --txt-3: #6b7280;
  --txt-4: #9ca3af;

  /* superfícies e bordas */
  --linha: #e5e7eb;
  --linha-sutil: #f0f1f3;
  --hover: #f8fafc;

  /* estados (fundo / texto) */
  --amb-bg: #fef3c7;  --amb-tx: #92400e;
  --inf-bg: #dbeafe;  --inf-tx: #1e40af;
  --neg-bg: #fee2e2;  --neg-tx: #991b1b;
  --pos-bg: #d1fae5;  --pos-tx: #065f46;
  --neu-bg: #e5e7eb;  --neu-tx: #374151;

  /* espaçamento */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* raio */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 99px;

  /* sombra */
  --s-1: 0 1px 4px rgba(16,24,40,.08);
  --s-2: 0 2px 8px rgba(16,24,40,.14);
  --s-3: 0 8px 28px rgba(16,24,40,.18);

  /* tipografia */
  --f: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px;
  --t-xl: 22px; --t-2xl: 30px;

  --topo: 56px;   /* altura do header */
}

/* ----------------------------------------------------------------- base */
* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--f);
  background: var(--fundo);
  color: var(--txt);
  line-height: 1.5;
}
h1 { font-size: var(--t-xl); margin-bottom: var(--e-5); color: var(--azul); }
h2 { font-size: var(--t-lg); margin: var(--e-5) 0 var(--e-3); color: var(--neu-tx); }
a.link { color: var(--azul-claro); text-decoration: none; font-weight: 600; }
a.link:hover { text-decoration: underline; }

/* foco visível e consistente (antes: nenhum) */
:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- header */
header {
  background: var(--azul); color: var(--branco);
  padding: 0 var(--e-6);
  display: flex; align-items: center; gap: var(--e-6);
  height: var(--topo);
  position: sticky; top: 0; z-index: 50;
}
header .logo { font-weight: 700; font-size: 17px; letter-spacing: .3px; white-space: nowrap; }
header nav { display: flex; gap: var(--e-1); flex: 1; }
header nav a {
  color: #dbe7f3; text-decoration: none;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-sm); font-size: var(--t-md); white-space: nowrap;
}
header nav a:hover { background: var(--azul-claro); color: var(--branco); }
/* página atual (antes não havia indicação nenhuma) */
header nav a[aria-current="page"] {
  background: var(--azul-escuro); color: var(--branco); font-weight: 600;
}
header .user { font-size: var(--t-sm); color: #cfe0ef; white-space: nowrap; }
header .user a { color: var(--branco); margin-left: var(--e-3); }

/* botão do menu no celular */
.menu-btn {
  display: none; background: none; border: 0; color: var(--branco);
  cursor: pointer; padding: var(--e-2); border-radius: var(--r-sm);
}
.menu-btn:hover { background: var(--azul-claro); }

main { max-width: 1100px; margin: var(--e-8) auto; padding: 0 var(--e-5); }

/* ----------------------------------------------------------- componentes */
.card {
  background: var(--branco); border-radius: var(--r-lg);
  box-shadow: var(--s-1); padding: var(--e-5); margin-bottom: var(--e-4);
}
.card-titulo { margin-top: 0; }

/* indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--e-3); margin-bottom: var(--e-5); }
.kpi {
  background: var(--branco); border-radius: var(--r-lg); padding: var(--e-4);
  box-shadow: var(--s-1); text-decoration: none; color: inherit; display: block;
  transition: box-shadow .15s, transform .15s;
}
a.kpi:hover { box-shadow: var(--s-2); transform: translateY(-1px); }
.kpi .n { font-size: var(--t-2xl); font-weight: 700; color: var(--azul); line-height: 1.1; }
.kpi .n.alerta { color: var(--neg-tx); }
.kpi .t { font-size: var(--t-xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .4px; margin-top: var(--e-1); }

/* tabelas */
table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
th {
  text-align: left; color: var(--txt-3); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .4px;
  padding: var(--e-2) var(--e-3); border-bottom: 2px solid var(--linha);
}
td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha-sutil); }
tr:hover td { background: var(--hover); }
.tabela-rola { overflow-x: auto; }

th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
th.ord:hover { color: var(--azul-claro); }
th.ord::after { content: ' ⇅'; opacity: .35; font-size: 11px; }
th.ord.asc::after  { content: ' ▲'; opacity: 1; }
th.ord.desc::after { content: ' ▼'; opacity: 1; }

/* linha expansível: detalhes secundários saem da tabela principal */
tr.linha-mestra { cursor: pointer; }
tr.linha-mestra .expandir { color: var(--txt-4); transition: transform .15s; display: inline-block; }
tr.linha-mestra.aberta .expandir { transform: rotate(90deg); }
tr.linha-detalhe { display: none; }
tr.linha-detalhe.visivel { display: table-row; }
tr.linha-detalhe > td { background: var(--hover); padding: var(--e-4) var(--e-5); }
.detalhe-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: var(--e-3) var(--e-5); font-size: var(--t-sm);
}
.detalhe-grade dt { color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .3px; }
.detalhe-grade dd { margin: 2px 0 0; color: var(--txt); }

/* selos de status */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.b-AGUARDANDO_EVENTO { background: var(--amb-bg); color: var(--amb-tx); }
.b-VINCULADA        { background: var(--inf-bg); color: var(--inf-tx); }
.b-DIVERGENTE       { background: var(--neg-bg); color: var(--neg-tx); }
.b-CANCELADA        { background: #e9ecef; color: #6c757d; text-decoration: line-through; }
.b-APROVADA         { background: var(--pos-bg); color: var(--pos-tx); }
.b-ENVIADA          { background: var(--neu-bg); color: var(--neu-tx); }
.b-EXCLUIDA         { background: var(--neu-bg); color: var(--txt-3); text-decoration: line-through; }
.badge-perfil       { background: var(--inf-bg); color: var(--inf-tx); }
.badge-tipo         { background: var(--neu-bg); color: var(--neu-tx); }

.res-Aprovada { color: var(--pos-tx); font-weight: 700; }
.res-Negada   { color: var(--neg-tx); font-weight: 700; }
.res-Pendente { color: var(--amb-tx); }

/* contador no menu */
.pill {
  display: inline-block; background: #dc2626; color: var(--branco);
  border-radius: var(--r-full); padding: 1px 7px;
  font-size: 11px; font-weight: 700; margin-left: 5px;
}
.pill-azul { background: #2563eb; }

/* formulários */
label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--neu-tx); margin: var(--e-3) 0 var(--e-1); }
input[type=text], input[type=date], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 9px var(--e-3); border: 1px solid #d1d5db;
  border-radius: var(--r-md); font-size: var(--t-md); font-family: inherit; color: var(--txt);
}
input:focus, select:focus, textarea:focus { border-color: var(--azul-claro); }
textarea { min-height: 80px; resize: vertical; }
input[type=file] { font-size: var(--t-sm); margin-top: var(--e-1); }
form.inline { display: inline; }

/* botões */
.btn {
  display: inline-flex; align-items: center; gap: var(--e-2);
  border: 0; border-radius: var(--r-md); padding: 10px var(--e-5);
  font-size: var(--t-md); font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: inherit; transition: filter .15s, opacity .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-azul  { background: var(--azul-claro); color: var(--branco); }
.btn-ok    { background: var(--ok);   color: var(--branco); font-size: var(--t-lg); padding: var(--e-3) var(--e-8); }
.btn-div   { background: var(--erro); color: var(--branco); font-size: var(--t-lg); padding: var(--e-3) var(--e-8); }
.btn-cinza { background: var(--neu-bg); color: var(--neu-tx); }
.btn-mini  { padding: var(--e-1) 10px; font-size: var(--t-xs); }

/* avisos */
.msg-erro { background: var(--neg-bg); color: var(--neg-tx); border-radius: var(--r-md); padding: 10px var(--e-4); margin-bottom: var(--e-3); font-size: var(--t-md); }
.aviso    { background: var(--amb-bg); color: var(--amb-tx); border-radius: var(--r-md); padding: 10px var(--e-4); margin-bottom: var(--e-3); font-size: var(--t-sm); }
.aviso-ok { background: var(--pos-bg); color: var(--pos-tx); }
.aviso-info { background: var(--inf-bg); color: var(--inf-tx); }

/* caixa de feedback dos formulários (RE / evento) */
.feedback { display: none; border-radius: var(--r-md); padding: 9px var(--e-3); margin-top: var(--e-2); font-size: var(--t-md); line-height: 1.45; }
.feedback.visivel { display: block; }
.feedback.f-ok   { background: var(--pos-bg); color: var(--pos-tx); }
.feedback.f-erro { background: var(--neg-bg); color: var(--neg-tx); }
.feedback.f-aviso{ background: var(--amb-bg); color: var(--amb-tx); }
.feedback.f-info { background: var(--inf-bg); color: var(--inf-tx); }

/* grades */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }

/* foto */
.foto-frame { text-align: center; background: #111827; border-radius: var(--r-lg); padding: var(--e-2); }
.foto-frame img { max-width: 100%; max-height: 640px; border-radius: var(--r-sm); display: block; margin: 0 auto; }
.foto-btn { display: block; width: 100%; background: none; border: 0; padding: 0; cursor: zoom-in; }
.foto-legenda { text-align: center; font-size: var(--t-xs); color: var(--txt-4); margin-top: var(--e-1); }
.foto-ausente {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 160px; color: var(--txt-4); font-size: var(--t-sm);
}

/* histórico */
.hist { font-size: var(--t-sm); color: var(--txt-2); list-style: none; padding: 0; }
.hist li { margin-bottom: var(--e-1); }

/* estado vazio */
.vazio { text-align: center; padding: var(--e-10) var(--e-5); color: var(--txt-4); }
.vazio .icone { opacity: .4; margin-bottom: var(--e-3); }
.vazio .titulo { font-size: var(--t-lg); color: var(--txt-3); margin-bottom: var(--e-1); }
.vazio .dica { font-size: var(--t-sm); }

/* arrastar-e-soltar */
.dropzone {
  border: 2px dashed #9db4c9; border-radius: var(--r-lg); padding: 26px var(--e-4);
  text-align: center; cursor: pointer; background: var(--hover); transition: all .15s;
}
.dropzone:hover, .dropzone.arrastando { border-color: var(--azul-claro); background: #eef5fb; }
/* destaque quando o usuario tenta salvar sem anexar a foto */
.dropzone.dz-faltando { border-color: var(--erro); background: #fef2f2; }
.dropzone.dz-faltando .dz-texto { color: var(--erro); }
.dropzone .dz-icone { color: var(--txt-4); }
.dropzone .dz-texto { color: var(--txt-2); font-size: var(--t-md); margin-top: var(--e-2); }
.dropzone .dz-dica  { color: var(--txt-4); font-size: var(--t-xs); margin-top: 2px; }
.dz-preview { display: none; margin-top: var(--e-3); }
.dz-preview.visivel { display: block; }
.dz-preview img { max-width: 100%; max-height: 420px; border-radius: var(--r-md); box-shadow: var(--s-2); }
.dz-info { font-size: var(--t-sm); color: var(--txt-2); margin-top: var(--e-2); display: flex; align-items: center; justify-content: center; gap: var(--e-3); }
.dz-trocar { color: var(--erro); background: none; border: 0; cursor: pointer; font-size: var(--t-sm); font-weight: 600; text-decoration: underline; font-family: inherit; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(3,7,18,.93);
  display: none; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out;
}
.lightbox.aberto { display: flex; }
.lightbox img { max-width: 96vw; max-height: 94vh; border-radius: var(--r-sm); box-shadow: var(--s-3); }
.lightbox .lb-fechar { position: fixed; top: var(--e-3); right: var(--e-5); color: var(--branco); font-size: 34px; background: none; border: 0; cursor: pointer; line-height: 1; }
.lightbox .lb-dica { position: fixed; bottom: var(--e-3); left: 0; right: 0; text-align: center; color: var(--txt-4); font-size: var(--t-sm); }
.img-zoom { cursor: zoom-in; }

/* toast de confirmação */
.toasts { position: fixed; top: calc(var(--topo) + var(--e-3)); right: var(--e-4); z-index: 900; display: flex; flex-direction: column; gap: var(--e-2); }
.toast {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  box-shadow: var(--s-2); font-size: var(--t-md); font-weight: 600;
  animation: entra .2s ease-out;
  max-width: 380px;
}
.toast.t-ok   { background: var(--pos-bg); color: var(--pos-tx); }
.toast.t-erro { background: var(--neg-bg); color: var(--neg-tx); }
.toast.t-info { background: var(--inf-bg); color: var(--inf-tx); }
.toast.saindo { animation: sai .25s ease-in forwards; }
@keyframes entra { from { opacity: 0; transform: translateX(16px); } }
@keyframes sai   { to   { opacity: 0; transform: translateX(16px); } }

/* modal de confirmação */
dialog.modal {
  border: 0; border-radius: var(--r-lg); padding: 0;
  box-shadow: var(--s-3); max-width: 440px; width: calc(100% - 32px);
}
dialog.modal::backdrop { background: rgba(3,7,18,.5); }
dialog.modal .m-corpo { padding: var(--e-5); }
dialog.modal h3 { font-size: var(--t-lg); color: var(--azul); margin-bottom: var(--e-2); }
dialog.modal p  { font-size: var(--t-md); color: var(--txt-2); margin-bottom: var(--e-3); }
dialog.modal .m-acoes { display: flex; gap: var(--e-2); justify-content: flex-end; margin-top: var(--e-4); }

/* paginação */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-4); flex-wrap: wrap; }
.paginacao .contagem { font-size: var(--t-sm); color: var(--txt-3); }
.paginacao .paginas { display: flex; gap: var(--e-1); }
.paginacao a, .paginacao span.atual {
  display: inline-block; padding: var(--e-1) 10px; border-radius: var(--r-sm);
  font-size: var(--t-sm); text-decoration: none; color: var(--azul-claro); border: 1px solid var(--linha);
}
.paginacao span.atual { background: var(--azul-claro); color: var(--branco); border-color: var(--azul-claro); font-weight: 700; }
.paginacao a:hover { background: var(--hover); }

/* barra de filtros */
.filtros { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--e-3); }
.filtros input[type=search] { max-width: 260px; }
.filtros select { width: auto; }
.filtros .dica { color: var(--txt-4); font-size: var(--t-sm); }

/* ícones */
.i { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex: none; }
.i-lg { width: 1.4em; height: 1.4em; }
.i-xl { width: 34px; height: 34px; }

/* utilitários (substituem os style="" inline das views) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--e-2); }
.mt-2 { margin-top: var(--e-4); }
.mb-1 { margin-bottom: var(--e-2); }
.mb-2 { margin-bottom: var(--e-4); }
.txt-p { color: var(--txt-3); }
.txt-neg { color: var(--neg-tx); }
.txt-peq { font-size: var(--t-sm); }
.txt-mini { font-size: var(--t-xs); }
.forte { font-weight: 700; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.limite-sm { max-width: 420px; }
.limite-md { max-width: 640px; }
.borda-alerta { border-left: 4px solid #dc2626; }

/* ======================================================================
   RESPONSIVO — antes o projeto não tinha uma única media query
   ====================================================================== */

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  main { margin: var(--e-5) auto; }
}

@media (max-width: 768px) {
  /* continua grudado no topo tambem aqui: so `height` vira `min-height` para
     o header poder crescer quando a gaveta do menu abre. (Antes estava
     `position: relative` e a barra rolava junto com a pagina.) */
  header {
    padding: 0 var(--e-4); gap: var(--e-3); flex-wrap: wrap;
    height: auto; min-height: var(--topo);
  }
  .menu-btn { display: inline-flex; order: -1; }
  header .logo { font-size: 15px; flex: 1; }
  header .user { font-size: var(--t-xs); }
  header .user .nome-completo { display: none; }

  /* nav vira gaveta que desce do header */
  header nav {
    display: none; order: 3;
    flex-basis: 100%; flex-direction: column; gap: 0;
    background: var(--azul-escuro);
    margin: 0 calc(var(--e-4) * -1); padding: var(--e-2) var(--e-4);
  }
  header nav.aberto { display: flex; }
  header nav a { padding: var(--e-3) var(--e-2); border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.08); }

  main { padding: 0 var(--e-3); }
  h1 { font-size: 19px; }
  .card { padding: var(--e-4); }

  /* cada linha da tabela vira um cartão */
  table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
  table.responsiva thead { display: none; }
  table.responsiva tr {
    background: var(--branco); border: 1px solid var(--linha);
    border-radius: var(--r-md); margin-bottom: var(--e-3); padding: var(--e-2);
  }
  table.responsiva td {
    border: 0; padding: var(--e-1) var(--e-2);
    display: flex; justify-content: space-between; gap: var(--e-3); align-items: baseline;
  }
  table.responsiva td::before {
    content: attr(data-rotulo);
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .3px;
    color: var(--txt-3); font-weight: 600; flex: none;
  }
  table.responsiva td:empty { display: none; }
  table.responsiva tr:hover td { background: transparent; }
  .tabela-rola { overflow-x: visible; }

  /* validação: foto acima dos dados */
  .val-item { grid-template-columns: 1fr !important; }

  .btn-ok, .btn-div { width: 100%; justify-content: center; }
  .toasts { left: var(--e-3); right: var(--e-3); }
  .toast { max-width: none; }
  .foto-frame img { max-height: 60vh; }
}

@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .filtros input[type=search] { max-width: none; flex: 1 1 100%; }
}

/* impressão: sem cromo de navegação */
/* ---- botoes de exportacao na barra de filtros -------------------------- */
/* Empurrados para a direita para nao se misturarem com Filtrar/Limpar, que
   sao acoes de outra natureza. */
.filtros .exportar { display: inline-flex; gap: var(--e-2); margin-left: auto; }
@media (max-width: 768px) {
  .filtros .exportar { margin-left: 0; }
}

/* ---- funil / barras do painel de retorno da Nimer ---------------------- */
/* Barras em CSS puro, sem biblioteca de grafico: sao poucas series e o
   portal nao carrega JS externo (a CSP e restritiva e a VPS fica offline
   para CDNs). */
.txt-ok { color: var(--ok); }

.funil { display: flex; flex-direction: column; gap: var(--e-3); }
.funil-linha {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr minmax(110px, auto);
  align-items: center;
  gap: var(--e-3);
}
.funil-rot { font-size: var(--t-sm); color: var(--txt-2); }
.funil-trilho {
  position: relative;
  height: 22px;
  background: var(--neu-bg, #eef1f4);
  border-radius: var(--r-sm, 4px);
  overflow: hidden;
}
.funil-barra {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--azul-claro);
  border-radius: var(--r-sm, 4px);
  min-width: 2px;
}
/* segunda barra sobreposta: retorno dentro do total do mes */
.funil-barra.sobre { background: var(--ok); opacity: .95; }
.funil-val { font-size: var(--t-sm); text-align: right; white-space: nowrap; }

/* matriz Tipo x Categoria (retorno da Nimer): rola na horizontal em qualquer
   largura -- empilhar as celulas, como a .responsiva faz, destruiria a grade */
.matriz-rola { overflow-x: auto; }
.matriz { width: auto; min-width: 100%; }
.matriz th, .matriz td { text-align: center; white-space: nowrap; }
.matriz th { white-space: normal; max-width: 120px; line-height: 1.25; vertical-align: bottom; }
.matriz td { padding: var(--e-2); }
.matriz th:first-child, .matriz td:first-child { text-align: left; font-weight: 600; }
.matriz td .n { font-weight: 700; font-size: var(--t-lg); }
.matriz td .c { display: block; font-size: var(--t-xs); color: var(--ok); }
.matriz td.zero .n { color: var(--txt-4); font-weight: 400; }
.matriz tr.total td, .matriz td.total { background: var(--hover); font-weight: 700; }
.matriz tr.total td .c, .matriz td.total .c { font-weight: 400; }
.funil-val .dica { display: block; font-size: var(--t-xs); }

@media (max-width: 640px) {
  .funil-linha { grid-template-columns: 1fr auto; }
  .funil-trilho { grid-column: 1 / -1; order: 3; }
}

@media print {
  header, .toasts, .filtros, .paginacao, .btn { display: none !important; }
  main { max-width: none; margin: 0; }
  .card { box-shadow: none; border: 1px solid var(--linha); }
}