/* SIG - Sistema Integrado GTI - estilos */
:root {
  --azul: #0066FF; --azul-esc: #0050CC; --azul-suave: #E2EAFF;
  --marinho: #0B1C33; --marinho2: #10284A;
  --atencao: #B7791F; --atencao-fundo: #FFF4DB; --critico: #C62828; --critico-fundo: #FDE8E8;
  --ideal: #0066FF; --ideal-fundo: #E2EAFF; --neutro: #6B7A90;
  --raio: 8px; --sombra: 0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.11);
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
/* 5 níveis de cor: 1 mais claro … 5 mais escuro */
html[data-tema="1"] { --fundo:#FFFFFF; --sup:#FFFFFF; --sup2:#F7F9FC; --texto:#0D1A2B; --suave:#55667C; --linha:#E6EAF0; --menu:#10284A; --menu2:#16335C; --menu-txt:#D4DEEC; --campo:#FFFFFF; }
html[data-tema="2"] { --fundo:#F3F6FA; --sup:#FFFFFF; --sup2:#F7F9FC; --texto:#0D1A2B; --suave:#55667C; --linha:#E1E6ED; --menu:#0B1C33; --menu2:#10284A; --menu-txt:#C9D6EA; --campo:#FFFFFF; }
html[data-tema="3"] { --fundo:#E3E9F1; --sup:#F3F6FA; --sup2:#E9EEF5; --texto:#0D1A2B; --suave:#4A5A70; --linha:#CCD5E1; --menu:#0B1C33; --menu2:#10284A; --menu-txt:#C9D6EA; --campo:#FFFFFF; }
html[data-tema="4"] { --fundo:#17243A; --sup:#1F2F48; --sup2:#263954; --texto:#E5ECF5; --suave:#A6B4C8; --linha:#33476A; --menu:#0E1A2C; --menu2:#16263F; --menu-txt:#C9D6EA; --campo:#17243A; --azul-suave:#1E3A6B; --ideal:#5B9BFF; --ideal-fundo:#1E3A6B; --atencao:#F5C25B; --atencao-fundo:#4A3A15; --critico:#FF7A7A; --critico-fundo:#4A1F1F; }
html[data-tema="5"] { --fundo:#070F1C; --sup:#0E1A2C; --sup2:#13223A; --texto:#E5ECF5; --suave:#93A5BC; --linha:#22334F; --menu:#050B15; --menu2:#0E1A2C; --menu-txt:#B7C6DB; --campo:#0A1424; --azul-suave:#16305A; --ideal:#5B9BFF; --ideal-fundo:#16305A; --atencao:#F5C25B; --atencao-fundo:#3D3010; --critico:#FF7A7A; --critico-fundo:#3D1818; }

* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:var(--fonte); font-size:14px; color:var(--texto); background:var(--fundo); }
a { color:var(--azul); }
html[data-tema="4"] a, html[data-tema="5"] a { color:#7DB0FF; }
h1,h2 { margin:0 0 12px; color:var(--texto); }
h2 { font-size:16px; }
.mt { margin-top:24px; }
.ic { width:20px; height:20px; flex:0 0 20px; }

/* Botões estilo Office */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; background:var(--sup); color:var(--texto) !important; border:1px solid #C7CDD6; border-radius:4px; font:600 13px var(--fonte); text-decoration:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.btn:hover { border-color:var(--azul); }
.btn.primario { background:var(--azul); border-color:var(--azul); color:#FFF !important; }
.btn.primario:hover { background:var(--azul-esc); }
.btn.pequeno { padding:4px 10px; font-size:12px; }
.btn.largo { width:100%; justify-content:center; padding:10px; font-size:15px; }
.btn-icone { background:none; border:0; color:inherit; cursor:pointer; padding:6px; border-radius:6px; font-size:20px; display:inline-flex; }
.btn-icone:hover { background:rgba(255,255,255,.12); }

/* Formulários */
label { display:block; margin-bottom:12px; font-weight:600; font-size:13px; color:var(--suave); }
input, select, textarea { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--linha); border-radius:6px; background:var(--campo); color:var(--texto); font:14px var(--fonte); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--azul); outline-offset:0; border-color:var(--azul); }
input:disabled { opacity:.7; }
label.check { display:flex; gap:8px; align-items:center; font-weight:500; color:var(--texto); }
label.check input { width:auto; margin:0; }
fieldset { border:1px solid var(--linha); border-radius:var(--raio); padding:12px 14px 2px; margin:0 0 14px; }
legend { font-weight:700; padding:0 6px; }
.grade2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.dica { font-size:12px; color:var(--suave); margin:-4px 0 12px; }
.acoes { display:flex; gap:8px; margin-top:6px; }
code { background:var(--sup2); padding:2px 6px; border-radius:4px; }

/* Avisos e status (sempre com símbolo, além da cor) */
.aviso { padding:10px 14px; border-radius:6px; margin-bottom:14px; border-left:4px solid var(--ideal); background:var(--ideal-fundo); }
.aviso.erro { border-color:var(--critico); background:var(--critico-fundo); }
.status { font-weight:600; font-size:12px; white-space:nowrap; }
.status.ideal { color:var(--ideal); } .status.atencao { color:var(--atencao); } .status.critico { color:var(--critico); } .status.neutro { color:var(--neutro); }
.etiqueta { background:var(--sup2); border:1px solid var(--linha); border-radius:10px; padding:1px 8px; font-size:12px; }

/* Tela de login */
.tela-login { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; background:linear-gradient(160deg,#F3F6FA 0%,#E2EAFF 100%); }
.cartao-login { background:#FFF; color:#0D1A2B; width:100%; max-width:400px; padding:28px; border:1px solid #E1E6ED; border-radius:14px; box-shadow:0 10px 30px rgba(11,28,51,.12); }
.cartao-login.largo { max-width:640px; }
.cartao-login h1 { font-size:22px; color:#0B1C33; }
.cartao-login .sub { color:#55667C; margin:-6px 0 18px; }
.cartao-login label { color:#55667C; } .cartao-login input { background:#FFF; color:#0D1A2B; border-color:#C9D3E0; }
.logo-login { height:56px; display:block; margin:0 auto 14px; }
.rodape-login { color:#93A5BC; font-size:12px; }
.qr { display:flex; justify-content:center; margin:6px 0 12px; }
.passos-2fa { padding-left:18px; color:#55667C; } .passos-2fa li { margin-bottom:4px; }
input.codigo { font-size:22px; letter-spacing:6px; text-align:center; }

/* Estrutura do sistema */
.app { min-height:100vh; }
.topo { position:fixed; inset:0 0 auto 0; height:56px; z-index:30; display:flex; align-items:center; gap:12px; padding:0 12px; background:var(--menu); color:#FFF; }
.marca { display:flex; align-items:center; gap:8px; color:#FFF !important; text-decoration:none; font-weight:700; font-size:16px; }
.marca img { height:28px; background:#FFF; border-radius:4px; padding:2px 4px; }
.operadora { color:var(--menu-txt); padding-left:12px; border-left:1px solid rgba(255,255,255,.2); }
.espaco { flex:1; }
.usuario-topo { display:flex; align-items:center; gap:6px; color:#FFF !important; text-decoration:none; }
.temas { display:flex; align-items:center; gap:3px; color:var(--menu-txt); }
.nivel { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.35); font-size:10px; font-weight:700; cursor:pointer; color:transparent; }
.nivel.n1 { background:#FFFFFF; } .nivel.n2 { background:#F3F6FA; } .nivel.n3 { background:#C9D3E0; } .nivel.n4 { background:#22324A; } .nivel.n5 { background:#070F1C; }
.nivel.sel { border-color:#4D94FF; box-shadow:0 0 0 2px #4D94FF; }

.lateral { position:fixed; top:56px; bottom:0; width:220px; z-index:20; background:var(--menu); color:var(--menu-txt); padding:12px 8px; display:flex; flex-direction:column; overflow-y:auto; }
.lateral.esquerda { left:0; }
.lateral.direita { right:0; background:var(--menu2); border-left:1px solid rgba(255,255,255,.08); }
.titulo-menu { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.7; padding:10px 10px 6px; }
.item { display:flex; align-items:center; gap:10px; padding:9px 10px; margin:2px 0; border-radius:8px; color:var(--menu-txt) !important; text-decoration:none; }
.item:hover { background:rgba(255,255,255,.08); color:#FFF !important; }
.item.ativo { background:var(--azul); color:#FFF !important; }
.item.breve { opacity:.5; cursor:not-allowed; }
.item small { margin-left:auto; font-size:10px; opacity:.8; }
.rodape-menu { margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:6px; }
.conteudo { padding:76px 24px 24px 244px; min-height:calc(100vh - 32px); }
.com-admin .conteudo { padding-right:244px; }
body.admin-oculto .lateral.direita { display:none; }
body.admin-oculto .conteudo { padding-right:24px; }
.rodape { padding:8px 24px 8px 244px; color:var(--suave); font-size:12px; }
.titulo-pagina { font-size:22px; margin-bottom:16px; }
.saudacao { color:var(--suave); margin-top:-8px; }
.veu { display:none; }

/* Blocos, cartões e tabelas */
.bloco { background:var(--sup); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra); padding:18px; margin-bottom:18px; }
.bloco.estreito { max-width:640px; }
.bloco-topo { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.grade-blocos { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; align-items:start; }
.cartoes { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:18px; }
.cartao-ind { background:var(--sup); border:1px solid var(--linha); border-top:3px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra); padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.cartao-ind.ideal { border-top-color:var(--ideal); }
.cartao-ind .rot { color:var(--suave); font-size:12px; font-weight:600; }
.cartao-ind b { font-size:28px; }
.cartao-ind small { color:var(--suave); }
.tabela { width:100%; border-collapse:collapse; }
.tabela th { text-align:left; font-size:12px; color:var(--suave); padding:8px; border-bottom:2px solid var(--linha); }
.tabela td { padding:9px 8px; border-bottom:1px solid var(--linha); vertical-align:middle; }
.tabela tr:hover td { background:var(--sup2); }
.tabela .vazio { text-align:center; color:var(--suave); padding:24px; }
.acoes-linha { white-space:nowrap; text-align:right; }
.barra-acoes { margin-bottom:14px; }
.filtros { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px; }
.filtros label { margin:0; } .filtros .cresce { flex:1; min-width:200px; }
.paginacao { display:flex; flex-wrap:wrap; gap:4px; margin-top:12px; }
.escolha-tema { display:flex; gap:8px; flex-wrap:wrap; }
.amostra { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; cursor:pointer; }
.amostra input { display:none; }
.amostra span { width:46px; height:46px; border-radius:10px; border:2px solid var(--linha); display:flex; align-items:center; justify-content:center; font-weight:700; }
.amostra.t1 span { background:#FFF; color:#0D1A2B; } .amostra.t2 span { background:#F3F6FA; color:#0D1A2B; } .amostra.t3 span { background:#C9D3E0; color:#0D1A2B; } .amostra.t4 span { background:#22324A; color:#FFF; } .amostra.t5 span { background:#070F1C; color:#FFF; }
.amostra input:checked + span { border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-suave); }
.amostra small { font-size:11px; font-weight:500; }
.so-celular { display:none; }

@media (max-width: 900px) {
  .so-celular { display:inline-flex; }
  .operadora, .temas, .usuario-topo span { display:none; }
  .lateral { transform:translateX(-100%); transition:transform .2s; width:260px; }
  .lateral.direita { transform:translateX(100%); display:flex !important; }
  .lateral.aberto { transform:none; }
  .conteudo, .com-admin .conteudo, body.admin-oculto .conteudo { padding:72px 16px 16px; }
  .rodape { padding:8px 16px; }
  .veu.aberto { display:block; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.4); z-index:15; }
  .grade2 { grid-template-columns:1fr; }
  .tabela { display:block; overflow-x:auto; }
}