:root{
  --azul-profundo:#0D1B2A;
  --azul-institucional:#1B263B;
  --azul-inteligente:#2563EB;
  --verde-agua:#00B4A6;
  --verde-sucesso:#22C55E;
  --amarelo-atencao:#F59E0B;
  --vermelho-critico:#EF4444;
  --cinza-claro:#F1F5F9;
  --cinza-medio:#64748B;
  --cinza-escuro:#334155;
  --branco:#FFFFFF;
  --radius:14px;
  --shadow: 0 1px 3px rgba(13,27,42,.06), 0 8px 24px rgba(13,27,42,.06);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',sans-serif;background:var(--cinza-claro);color:var(--azul-profundo);}
h1,h2,h3,h4{font-weight:700;margin:0;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;}
a{text-decoration:none;color:inherit;}

.btn{padding:11px 22px;border-radius:10px;font-weight:600;font-size:14px;transition:.15s;display:inline-flex;align-items:center;gap:8px;}
.btn-primary{background:var(--azul-inteligente);color:#fff;}
.btn-primary:hover{background:#1d4fd1;}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);}
.btn-ghost:hover{background:rgba(255,255,255,.16);}
.btn-block{width:100%;justify-content:center;padding:12px;}

/* ---------- LANDING ---------- */
.hero{
  background:radial-gradient(1200px 500px at 80% -10%, rgba(37,99,235,.35), transparent),
             linear-gradient(180deg,var(--azul-profundo),var(--azul-institucional));
  color:#fff;min-height:100vh;padding:80px 24px;
}
.nav-top{max-width:1200px;margin:0 auto 60px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-text{font-size:19px;font-weight:800;}
.hero-inner{max-width:900px;margin:0 auto;text-align:center;padding-top:60px;}
.eyebrow{color:var(--verde-agua);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
.hero h1{font-size:40px;line-height:1.2;margin-bottom:20px;}
.hero p.lead{font-size:16px;color:#C9D3E0;line-height:1.6;margin:0 auto 32px;max-width:560px;}

/* ---------- LOGIN ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--azul-profundo),var(--azul-institucional));padding:24px;}
.login-card{background:#fff;border-radius:18px;padding:44px;width:100%;max-width:400px;box-shadow:0 30px 70px rgba(0,0,0,.35);}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center;}
.login-card h2{text-align:center;font-size:20px;margin-bottom:6px;}
.login-card p.sub{text-align:center;color:var(--cinza-medio);font-size:13.5px;margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--cinza-escuro);margin-bottom:6px;}
.field input{width:100%;padding:11px 13px;border:1.5px solid #E2E8F0;border-radius:10px;font-family:inherit;font-size:14px;color:var(--azul-profundo);}
.field input:focus{outline:none;border-color:var(--azul-inteligente);}
.login-foot{text-align:center;margin-top:18px;font-size:12.5px;color:var(--cinza-medio);}
.error-box{background:#FEE2E2;color:#B91C1C;font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:8px;margin-bottom:16px;display:none;}
.error-box.active{display:block;}
.back-link{position:fixed;top:20px;left:20px;background:rgba(255,255,255,.12);color:#fff;padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;z-index:50;}

/* ---------- APP SHELL ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:230px;background:var(--azul-profundo);color:#fff;padding:20px 14px;display:flex;flex-direction:column;flex-shrink:0;position:relative;}
.sidebar .brand{margin-bottom:26px;padding:0 8px;}
.side-role{background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;margin-bottom:18px;font-size:12px;}
.side-role .name{font-weight:700;font-size:13px;}
.side-role .tag-role{display:inline-block;margin-top:4px;font-size:10.5px;background:var(--azul-inteligente);padding:2px 8px;border-radius:20px;font-weight:600;}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1;}
.side-nav-grupo{display:flex;flex-direction:column;}
.side-nav-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;color:#B9C4D6;background:transparent;font-size:13.5px;font-weight:500;text-align:left;width:100%;}
.side-nav-toggle:hover{background:rgba(255,255,255,.06);color:#fff;}
.side-nav-toggle .chev{transition:transform .2s;font-size:11px;}
.side-nav-toggle.aberto .chev{transform:rotate(180deg);}
.side-nav-sub{display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .25s ease;padding-left:14px;}
.side-nav-sub.aberto{max-height:120px;}
.side-nav-sub a{padding:8px 12px;font-size:12.5px;color:#8FA0B8;border-left:2px solid rgba(255,255,255,.1);}
.side-nav-sub a:hover{color:#fff;border-left-color:var(--verde-agua);}
.side-nav-sub a.ativo{color:#fff;border-left-color:var(--verde-agua);font-weight:600;}

/* Linha de detalhe (rótulo à esquerda, valor à direita) — usada em várias
   telas (Perfil, Configurações, Relatórios). Centralizada aqui pra nunca
   mais faltar numa página nova por esquecimento de CSS duplicado. */
.detalhe-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #F1F5F9;font-size:13px;}
.detalhe-row:last-child{border-bottom:none;}
.side-nav button, .side-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:#B9C4D6;background:transparent;font-size:13.5px;font-weight:500;text-align:left;width:100%;}
.side-nav button:hover, .side-nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.side-nav button.active, .side-nav a.active{background:var(--azul-inteligente);color:#fff;}
.side-foot button.active, .side-foot a.active{background:var(--azul-inteligente);color:#fff;}
.side-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:10px;}
.side-foot button, .side-foot a{color:#B9C4D6;font-size:12.5px;display:flex;align-items:center;gap:8px;padding:8px 12px;width:100%;border-radius:8px;background:transparent;}
.side-foot button:hover, .side-foot a:hover{background:rgba(255,255,255,.06);color:#fff;}
.main{flex:1;min-width:0;}
.topbar{background:#fff;border-bottom:1px solid #E7ECF3;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;}
.topbar-left{display:flex;align-items:center;}
.topbar h2{font-size:19px;}
.topbar .sub{font-size:12.5px;color:var(--cinza-medio);margin-top:2px;}
.content{padding:26px 28px 60px;}
.empty-state{background:#fff;border-radius:14px;padding:60px 30px;text-align:center;box-shadow:var(--shadow);border:1px solid #EEF2F7;}
.empty-state .icon{width:56px;height:56px;border-radius:50%;background:var(--cinza-claro);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--cinza-medio);}
.empty-state h3{font-size:16px;margin-bottom:8px;}
.empty-state p{font-size:13.5px;color:var(--cinza-medio);max-width:380px;margin:0 auto;}

.sigesc-footer{text-align:center;padding:16px 20px;font-size:11.5px;color:var(--cinza-medio);border-top:1px solid #E7ECF3;margin-top:30px;}
.sigesc-footer.dark{color:#8FA0B8;border-top:1px solid rgba(255,255,255,.1);}

/* ---------- TABELAS ---------- */
.table-wrap{background:#fff;border-radius:14px;box-shadow:var(--shadow);border:1px solid #EEF2F7;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cinza-medio);font-weight:700;padding:14px 18px;
  background:#FAFBFC;border-bottom:1px solid #EEF2F7;white-space:nowrap;
}
tbody td{padding:15px 18px;font-size:13.5px;color:var(--azul-profundo);border-bottom:1px solid #F4F6F9;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s ease;}
tbody tr:hover{background:#FAFBFD;}
td.col-titulo{font-weight:600;}
td.col-empresa, td.col-ciclo{color:var(--cinza-medio);}
td.col-num{text-align:center;width:1%;white-space:nowrap;}

.status-pill{font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:20px;letter-spacing:.02em;display:inline-block;}
.status-ativa{background:#DCFCE7;color:#15803D;}
.status-rascunho{background:#F1F5F9;color:var(--cinza-medio);}
.status-encerrada{background:#E2E8F0;color:var(--cinza-escuro);}
.status-inativa{background:#FEF3C7;color:#B45309;}

.row-actions{display:flex;gap:6px;justify-content:flex-end;}
.row-actions button{
  font-size:11.5px;padding:7px 12px;border-radius:7px;background:var(--cinza-claro);
  color:var(--cinza-escuro);font-weight:600;white-space:nowrap;transition:.12s;
}
.row-actions button:hover{background:#E2E8F0;color:var(--azul-profundo);}

.table-empty{text-align:center;color:var(--cinza-medio);padding:50px 20px;font-size:13.5px;}

.pagination{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:12px;color:var(--cinza-medio);border-top:1px solid #F4F6F9;}
.page-btns{display:flex;gap:4px;}
.page-btns button{width:28px;height:28px;border-radius:7px;background:var(--cinza-claro);font-size:12px;font-weight:600;color:var(--cinza-escuro);}
.page-btns button.active{background:var(--azul-inteligente);color:#fff;}

/* Mobile-first: abaixo de 700px, cada linha da tabela vira um card empilhado —
   nada de espremer 6 colunas numa tela estreita. */
@media(max-width:700px){
  thead{display:none;}
  table, tbody, tr, td{display:block;width:100%;}
  tbody tr{
    padding:14px 16px;border-bottom:1px solid #F4F6F9;
  }
  tbody tr:hover{background:transparent;}
  tbody td{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:7px 0;border-bottom:none;font-size:13px;text-align:right;
  }
  tbody td.col-titulo{
    padding-bottom:10px;font-size:14.5px;justify-content:flex-start;
  }
  tbody td[data-label]::before{
    content:attr(data-label);font-size:11px;font-weight:700;color:var(--cinza-medio);
    text-transform:uppercase;letter-spacing:.04em;text-align:left;flex-shrink:0;
  }
  tbody td.col-titulo::before{display:none;}
  tbody td.col-num{width:auto;text-align:right;}
  .row-actions{justify-content:flex-start;padding-top:8px;}
}


@media(max-width:900px){
  .sidebar{position:fixed;left:-260px;top:0;bottom:0;z-index:60;transition:left .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.25);}
  .sidebar.open{left:0;}
  .menu-toggle{display:flex !important;}
}

/* ---------- Menu sanduíche (botão, backdrop, fechar) ---------- */
.menu-toggle{
  display:none; /* só aparece no mobile via media query acima */
  align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;background:var(--cinza-claro);color:var(--azul-profundo);
  margin-right:12px;flex-shrink:0;
}
.sidebar-close{
  display:none;
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.08);color:#fff;font-size:15px;align-items:center;justify-content:center;
}
.sidebar-backdrop{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(13,27,42,.55);z-index:55;
  opacity:0;transition:opacity .25s ease;
}
.sidebar-backdrop.open{display:block;opacity:1;}

@media(max-width:900px){
  .sidebar-close{display:flex;}
}


/* ---------- PWA: botão de instalar (Android) e aviso (iOS) ---------- */
.pwa-install-btn{
  position:fixed;bottom:20px;right:20px;z-index:80;
  background:var(--azul-inteligente);color:#fff;font-weight:600;font-size:13.5px;
  padding:12px 18px;border-radius:30px;box-shadow:0 8px 24px rgba(37,99,235,.4);
}
.pwa-ios-hint{
  position:fixed;bottom:0;left:0;right:0;z-index:80;
  background:var(--azul-profundo);color:#fff;font-size:13px;line-height:1.5;
  padding:14px 40px 14px 18px;box-shadow:0 -4px 16px rgba(0,0,0,.2);
}
.pwa-ios-hint button{
  position:absolute;top:10px;right:12px;background:transparent;color:#B9C4D6;font-size:16px;
}