/* ============================================================
   CheckQuali — Auditoria Interna
   Identidade "manômetro": zonas verde / âmbar / vermelho,
   tipografia Space Grotesk (títulos) + Inter (texto) + IBM Plex Mono (dados)
   ============================================================ */

:root {
  --cor-primaria: #0d5c63;
  --cor-primaria-escura: #073b40;
  --cor-primaria-clara: #e6f2f2;
  --cor-fundo: #f6f8f8;
  --cor-texto: #1f2a2b;
  --cor-texto-suave: #5b6b6c;
  --cor-borda: #dbe4e4;
  --cor-branco: #ffffff;

  --cor-s: #2f9e57;      /* atende — zona verde do manômetro */
  --cor-s-fundo: #e7f6ec;
  --cor-p: #d98c1f;      /* atende parcial — zona âmbar */
  --cor-p-fundo: #fdf1de;
  --cor-n: #c9432f;      /* não atende — zona vermelha */
  --cor-n-fundo: #fbe9e6;
  --cor-na: #8a9798;     /* não se aplica — cinza neutro */
  --cor-na-fundo: #eef1f1;

  --fonte-titulo: 'Space Grotesk', sans-serif;
  --fonte-texto: 'Inter', sans-serif;
  --fonte-mono: 'IBM Plex Mono', monospace;

  --raio: 10px;
  --sombra: 0 1px 3px rgba(7, 59, 64, 0.08), 0 1px 2px rgba(7, 59, 64, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.5;
}

h1 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-primaria-escura);
  margin: 0 0 .5rem;
}
h2, h3, h4 {
  font-family: var(--fonte-texto);
  font-weight: 700;
  color: var(--cor-primaria-escura);
  margin: 0 0 .5rem;
}

.icone { flex-shrink: 0; vertical-align: -3px; }
.icone-badge { margin-right: .3rem; vertical-align: -3px; }

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- topo / navegação ---------- */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cor-primaria-escura);
  color: #fff;
  padding: .75rem 1.5rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.topo-marca { display: flex; align-items: center; gap: .6rem; }
.topo-logo { display: flex; color: #7fd8c7; }
.topo-logo-img { height: 34px; max-width: 130px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; }
.topo-marca strong { font-family: var(--fonte-titulo); display: block; font-size: 1.05rem; }
.topo-marca small { color: #b9d6d4; font-size: .78rem; }
.topo-nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.topo-nav a { display: inline-flex; align-items: center; gap: .4rem; color: #d7ecea; font-weight: 500; font-size: .92rem; padding: .3rem .2rem; border-bottom: 2px solid transparent; }
.topo-nav a:hover { text-decoration: none; color: #fff; }
.topo-nav a.ativo { color: #fff; border-bottom-color: #7fd8c7; }
.topo-usuario { display: flex; align-items: center; gap: .9rem; font-size: .88rem; color: #d7ecea; }
.topo-usuario a { display: inline-flex; align-items: center; gap: .3rem; color: #d7ecea; }
.topo-usuario a[href$="logout.php"] { color: #ffb3a6; }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.5rem 4rem; }

/* ---------- cartões / caixas ---------- */
.card {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.1rem;
}
.grid-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }

/* ---------- gauge / medidor de % ---------- */
.gauge { display: flex; align-items: center; gap: .9rem; }
.gauge-num { font-family: var(--fonte-mono); font-size: 1.7rem; font-weight: 600; }
.gauge-barra { flex: 1; height: 10px; background: #e7edec; border-radius: 6px; overflow: hidden; }
.gauge-barra > span { display: block; height: 100%; border-radius: 6px; }
.zona-boa { background: var(--cor-s); }
.zona-media { background: var(--cor-p); }
.zona-ruim { background: var(--cor-n); }

/* ---------- dashboard executivo ---------- */
.grid-executivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-top: .8rem; }
.card-executivo { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: .8rem .9rem; text-align: center; background: #fafcfc; }
.card-executivo.destaque { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); }
.card-executivo.destaque .ce-nome, .card-executivo.destaque .ce-pct { color: #fff; }
.ce-nome { font-size: .82rem; font-weight: 600; color: var(--cor-texto-suave); margin-bottom: .3rem; }
.ce-pct { font-family: var(--fonte-mono); font-size: 1.3rem; font-weight: 600; }

/* ---------- tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
th { font-family: var(--fonte-titulo); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cor-texto-suave); background: #f0f4f4; }
tr:hover td { background: #fafcfc; }

/* ---------- badges de resposta ---------- */
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge-s  { background: var(--cor-s-fundo);  color: var(--cor-s); }
.badge-p  { background: var(--cor-p-fundo);  color: var(--cor-p); }
.badge-n  { background: var(--cor-n-fundo);  color: var(--cor-n); }
.badge-na { background: var(--cor-na-fundo); color: var(--cor-na); }
.badge-vazio { background: #eee; color: #999; }
.badge-core { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); border: 1px solid #bfe0de; }

/* ---------- formulários ---------- */
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: var(--cor-texto-suave); }
input[type=text], input[type=date], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--cor-borda); border-radius: 8px;
  font-family: var(--fonte-texto); font-size: .93rem; background: #fff; color: var(--cor-texto);
}
textarea { min-height: 70px; resize: vertical; }
.campo { margin-bottom: 1rem; }

.btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 8px; border: none;
  font-family: var(--fonte-texto); font-weight: 600; font-size: .9rem; cursor: pointer;
  background: var(--cor-primaria); color: #fff;
}
.btn:hover { background: var(--cor-primaria-escura); text-decoration: none; }
.btn-secundario { background: #fff; color: var(--cor-primaria); border: 1px solid var(--cor-primaria); }
.btn-perigo { background: var(--cor-n); }
.btn-pequeno { padding: .3rem .7rem; font-size: .8rem; }

/* ---------- respostas tipo rádio em pílula (S / P / N / NA) ---------- */
.resposta-opcoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.resposta-opcoes label {
  display: flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--cor-borda); font-size: .82rem; font-weight: 600; cursor: pointer; margin: 0;
  color: var(--cor-texto-suave);
}
.resposta-opcoes input { margin: 0; }
.resposta-opcoes label:has(input:checked).op-s  { background: var(--cor-s-fundo);  border-color: var(--cor-s);  color: var(--cor-s); }
.resposta-opcoes label:has(input:checked).op-p  { background: var(--cor-p-fundo);  border-color: var(--cor-p);  color: var(--cor-p); }
.resposta-opcoes label:has(input:checked).op-n  { background: var(--cor-n-fundo);  border-color: var(--cor-n);  color: var(--cor-n); }
.resposta-opcoes label:has(input:checked).op-na { background: var(--cor-na-fundo); border-color: var(--cor-na); color: var(--cor-na); }

/* ---------- linha de requisito no formulário de auditoria ---------- */
.item-requisito { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: .8rem; background: #fff; }
.item-requisito.item-sem-resposta { border-color: var(--cor-n); border-width: 2px; background: var(--cor-n-fundo); }
.item-requisito.cabecalho { background: var(--cor-primaria-clara); border: none; padding: .6rem 1rem; font-family: var(--fonte-titulo); font-weight: 700; color: var(--cor-primaria-escura); }
.item-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .6rem; }
.item-texto { flex: 1; font-size: .95rem; }
.item-meta { font-size: .75rem; color: var(--cor-texto-suave); font-family: var(--fonte-mono); }
.item-comprovacao { font-family: var(--fonte-mono); font-size: .75rem; color: var(--cor-texto-suave); }

/* ---------- assinatura ---------- */
.assinatura-caixa { border: 1px dashed var(--cor-borda); border-radius: var(--raio); padding: 1rem; background: #fafcfc; }
canvas.assinatura-canvas { border: 1px solid var(--cor-borda); border-radius: 8px; background: #fff; touch-action: none; width: 100%; max-width: 420px; height: 160px; }
.assinatura-linha { display: flex; gap: .5rem; margin-top: .5rem; }

/* ---------- diffs de comparação entre auditorias ---------- */
.diff-melhorou { background: var(--cor-s-fundo); }
.diff-piorou { background: var(--cor-n-fundo); }
.diff-igual { }

.rodape-nota { color: var(--cor-texto-suave); font-size: .8rem; margin-top: 2rem; }

/* ---------- indicador de salvamento automático ---------- */
.indicador-autosave {
  position: fixed; top: 78px; right: 1.2rem; z-index: 40;
  padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: #fff; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave);
  box-shadow: var(--sombra);
}

@media (max-width: 720px) {
  .topo { flex-direction: column; align-items: flex-start; }
  .item-topo { flex-direction: column; }
  .indicador-autosave { position: static; display: inline-block; margin: .6rem 0; }
}

/* ---------- impressão ---------- */
@media print {
  .topo, .tela-nao-imprimir, .btn, form .resposta-opcoes input, .assinatura-caixa canvas + .assinatura-linha { display: none !important; }
  body { background: #fff; }
  .conteudo { padding: 0; max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  table { font-size: 11px; }
  th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { border: 1px solid currentColor; }
  a[href]:after { content: none !important; }
}

/* ============================================================
   Layout gerencial com navegação lateral
   ============================================================ */
:root { --sidebar-largura: 248px; --sidebar-recolhida: 76px; }

body.com-sidebar { padding-left: var(--sidebar-largura); transition: padding-left .22s ease; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 100; width: var(--sidebar-largura);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cor-primaria-escura); color: #fff;
  box-shadow: 3px 0 14px rgba(7,59,64,.12); transition: width .22s ease, transform .22s ease;
}
.sidebar .topo-marca { min-height: 74px; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar .topo-marca > div { min-width: 0; }
.sidebar .topo-marca strong, .sidebar .topo-marca small { white-space: nowrap; }
.sidebar .topo-logo-img { width: 38px; max-width: 38px; height: 38px; flex: 0 0 38px; }
.sidebar-recolher {
  position: absolute; top: 22px; right: 8px; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center; color: #d7ecea; background: rgba(255,255,255,.08);
  border: 0; border-radius: 8px; cursor: pointer;
}
.sidebar-recolher:hover { background: rgba(255,255,255,.17); color: #fff; }
.topo-nav {
  display: flex; flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap;
  align-content: stretch; min-height: 0; width: 100%; gap: .25rem; padding: .8rem;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #4b7d7e transparent;
}
.topo-nav::-webkit-scrollbar { width: 7px; }
.topo-nav::-webkit-scrollbar-track { background: transparent; }
.topo-nav::-webkit-scrollbar-thumb { background: #4b7d7e; border-radius: 8px; }
.topo-nav::-webkit-scrollbar-thumb:hover { background: #6b9b9b; }
.topo-nav .menu-grupo {
  padding: .85rem .65rem .25rem; color: #7fa9a7; font-size: .67rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.topo-nav a {
  display: flex; align-items: center; gap: .75rem; min-height: 42px; padding: .65rem .75rem;
  flex: 0 0 auto; width: 100%; border: 0; border-radius: 9px; color: #d7ecea; font-size: .88rem; white-space: nowrap;
}
.topo-nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.topo-nav a.ativo { background: #fff; color: var(--cor-primaria-escura); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.topo-nav a.ativo::before { content: ''; position: absolute; left: 0; width: 4px; height: 25px; border-radius: 0 4px 4px 0; background: #7fd8c7; }
.topo-usuario { display: grid; gap: .25rem; padding: .8rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .83rem; }
.topo-usuario strong, .topo-usuario a { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; color: #d7ecea; white-space: nowrap; }
.topo-usuario a:hover { background: rgba(255,255,255,.08); color: #fff; border-radius: 8px; text-decoration: none; }
.conteudo { max-width: 1480px; padding: 1.8rem 2rem 4rem; }
.cabecalho-mobile, .menu-overlay { display: none; }

body.com-sidebar.sidebar-fechada { padding-left: var(--sidebar-recolhida); }
body.sidebar-fechada .sidebar { width: var(--sidebar-recolhida); }
body.sidebar-fechada .sidebar .topo-marca { justify-content: center; padding-inline: .5rem; }
body.sidebar-fechada .sidebar .topo-marca > div,
body.sidebar-fechada .topo-nav span,
body.sidebar-fechada .topo-usuario span,
body.sidebar-fechada .menu-grupo { display: none; }
body.sidebar-fechada .sidebar-recolher { top: 62px; right: 24px; transform: rotate(180deg); }
body.sidebar-fechada .topo-nav { padding-top: 2.4rem; }
body.sidebar-fechada .topo-nav a,
body.sidebar-fechada .topo-usuario a { justify-content: center; padding-inline: .5rem; }
body.sidebar-fechada .topo-usuario strong { display: none; }

@media (max-width: 900px) {
  body.com-sidebar, body.com-sidebar.sidebar-fechada { padding-left: 0; padding-top: 64px; }
  .sidebar, body.sidebar-fechada .sidebar { width: min(86vw, 290px); transform: translateX(-105%); }
  body.menu-aberto .sidebar { transform: translateX(0); }
  .sidebar-recolher { display: none; }
  body.sidebar-fechada .sidebar .topo-marca > div,
  body.sidebar-fechada .topo-nav span,
  body.sidebar-fechada .topo-usuario span,
  body.sidebar-fechada .menu-grupo { display: initial; }
  body.sidebar-fechada .topo-nav a, body.sidebar-fechada .topo-usuario a { justify-content: flex-start; padding-inline: .75rem; }
  body.sidebar-fechada .topo-usuario strong { display: flex; }
  .cabecalho-mobile {
    position: fixed; inset: 0 0 auto 0; z-index: 80; height: 64px; padding: .7rem 1rem;
    display: flex; align-items: center; gap: .8rem; background: #fff; border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra);
  }
  .cabecalho-mobile strong, .cabecalho-mobile small { display: block; }
  .cabecalho-mobile strong { color: var(--cor-primaria-escura); }
  .cabecalho-mobile small { color: var(--cor-texto-suave); font-size: .72rem; }
  .menu-mobile-botao { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cor-borda); border-radius: 9px; color: var(--cor-primaria); background: #fff; }
  .menu-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(7,32,35,.52); }
  body.menu-aberto .menu-overlay { display: block; }
  body.menu-aberto { overflow: hidden; }
  .conteudo { width: 100%; padding: 1.25rem 1rem 3rem; overflow-x: hidden; }
  .card { overflow-x: auto; }
}

@media print {
  body.com-sidebar, body.com-sidebar.sidebar-fechada { padding: 0; }
  .sidebar, .cabecalho-mobile, .menu-overlay { display: none !important; }
}