/* ==========================================================
   ARCAPE RH - Identidade visual
   Cores extraidas da logo oficial e da marca d'agua da ARCAPE.
   ========================================================== */
:root{
  --navy:#112E58;
  --navy-wordmark:#203249;
  --navy-claro:#1E5687;
  --navy-escuro:#0B1F3E;
  --azul:#276699;
  --verde:#3E7E42;
  --verde-vivo:#2D945F;
  --lime:#4C8B45;
  --mint:#CFFFEF;
  --cinza:#F4F6F9;
  --borda:#DDE3EC;
  --texto:#1F2937;
  --suave:#6B7280;
  --sucesso:#2D945F;
  --alerta:#E8A33D;
  --erro:#C62828;
  --info:#1E5687;
  --sombra:0 1px 3px rgba(17,46,88,.08), 0 6px 18px rgba(17,46,88,.06);
  --raio:10px;
  --sidebar:246px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--cinza); color:var(--texto); font-size:14px; line-height:1.5;
}
a{color:var(--navy-claro);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar); background:linear-gradient(170deg,var(--navy) 0%,var(--navy-escuro) 100%);
  color:#fff; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column;
  z-index:20;
}
.sidebar .marca{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.sidebar .marca img{width:100%;max-width:170px;background:#fff;border-radius:6px;padding:7px}
.sidebar .marca small{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.6);text-transform:uppercase}
.sidebar nav{flex:1;overflow-y:auto;padding:10px 8px}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 0;border-radius:8px;
  color:rgba(255,255,255,.86);font-size:13.5px;text-decoration:none;transition:.15s
}
.sidebar nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.sidebar nav a.ativo{background:linear-gradient(90deg,var(--verde-vivo),rgba(45,148,95,.25));
  color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--mint)}
.sidebar nav a .ic{width:18px;text-align:center;opacity:.9}
.sidebar .rodape{padding:12px 16px;border-top:1px solid rgba(255,255,255,.10);
  font-size:11px;color:rgba(255,255,255,.55)}

.conteudo{margin-left:var(--sidebar);flex:1;min-width:0}
.topo{
  background:#fff;border-bottom:1px solid var(--borda);padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10
}
.topo h1{font-size:18px;color:var(--navy);font-weight:650}
.topo .sub{font-size:12px;color:var(--suave);margin-top:1px}
.topo .usuario{display:flex;align-items:center;gap:10px;font-size:12.5px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--verde-vivo));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.principal{padding:22px 24px 48px}

/* ---------- Cartoes ---------- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:18px}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:16px;box-shadow:var(--sombra)}
.card .rot{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);font-weight:600}
.card .val{font-size:25px;font-weight:700;color:var(--navy);margin-top:6px;line-height:1.15}
.card .obs{font-size:11.5px;color:var(--suave);margin-top:5px}
.card.destaque{border-left:4px solid var(--verde-vivo)}
.card.alerta{border-left:4px solid var(--alerta)}
.card.erro{border-left:4px solid var(--erro)}
.card.info{border-left:4px solid var(--navy-claro)}

.painel{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);margin-bottom:18px;overflow:hidden}
.painel > header{padding:13px 18px;border-bottom:1px solid var(--borda);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.painel > header h2{font-size:14.5px;color:var(--navy);font-weight:650}
.painel > header .desc{font-size:11.5px;color:var(--suave);margin-top:2px}
.painel .corpo{padding:16px 18px}
.painel .corpo.sem-padding{padding:0}

/* ---------- Tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--cinza);color:var(--navy);text-align:left;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--borda);font-weight:700}
tbody td{padding:9px 12px;border-bottom:1px solid #EEF1F6;vertical-align:middle}
tbody tr:hover{background:#FAFBFD}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{padding:10px 12px;font-weight:700;background:var(--cinza);color:var(--navy)}

/* ---------- Botoes ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borda);
  background:#fff;color:var(--navy);padding:8px 14px;border-radius:8px;font-size:13px;
  font-weight:600;cursor:pointer;transition:.15s;text-decoration:none}
.btn:hover{background:var(--cinza);text-decoration:none}
.btn.primario{background:linear-gradient(135deg,var(--navy),var(--navy-claro));
  color:#fff;border-color:transparent}
.btn.primario:hover{filter:brightness(1.12)}
.btn.verde{background:linear-gradient(135deg,var(--verde),var(--verde-vivo));color:#fff;border-color:transparent}
.btn.verde:hover{filter:brightness(1.1)}
.btn.pequeno{padding:5px 10px;font-size:12px}
.btn.perigo{color:var(--erro);border-color:#F3C9C9}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formularios ---------- */
.grid{display:grid;gap:13px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
label{display:block;font-size:11.5px;font-weight:600;color:var(--suave);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 11px;border:1px solid var(--borda);
  border-radius:7px;font-size:13.5px;font-family:inherit;color:var(--texto);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-claro);
  box-shadow:0 0 0 3px rgba(30,86,135,.12)}
input[readonly]{background:var(--cinza);color:var(--suave)}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}
.check label{margin:0;text-transform:none;font-size:13px;color:var(--texto);font-weight:500}

/* ---------- Etiquetas ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.03em}
.tag.sucesso{background:#E6F4EC;color:var(--sucesso)}
.tag.alerta{background:#FDF3E3;color:#9A6614}
.tag.erro{background:#FBEAEA;color:var(--erro)}
.tag.info{background:#E8F0F8;color:var(--info)}
.tag.neutro{background:var(--cinza);color:var(--suave)}

/* ---------- Barras de progresso ---------- */
.barra{height:8px;background:#E9EDF3;border-radius:20px;overflow:hidden}
.barra > span{display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--navy-claro),var(--verde-vivo))}
.barra.fina{height:6px}

/* ---------- Avisos ---------- */
.aviso{padding:11px 15px;border-radius:8px;font-size:13px;margin-bottom:14px;
  display:flex;gap:10px;align-items:flex-start}
/* O 'min-width:0' aqui nao e detalhe de estilo: sem ele o filho de um
   flex nao encolhe abaixo do proprio conteudo (min-width:auto e o
   padrao), o texto do aviso deixa de quebrar linha e empurra a PAGINA
   INTEIRA para o lado. No celular isso aparecia como uma barra de
   rolagem horizontal que nao tinha explicacao na tela. */
.aviso>*{min-width:0}
.aviso{flex-wrap:wrap}
.aviso.ok{background:#E6F4EC;color:#1B5E36;border:1px solid #BFE3CE}
.aviso.erro{background:#FBEAEA;color:#8C1D1D;border:1px solid #F0C6C6}
.aviso.info{background:#E8F0F8;color:#12456F;border:1px solid #C7DBEC}
.aviso.dica{background:#FFF9EC;color:#7A5410;border:1px solid #F3E0B6}

/* ---------- Abas ---------- */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:16px;flex-wrap:wrap}
.abas a,.abas button{padding:9px 15px;font-size:13px;font-weight:600;color:var(--suave);
  border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;text-decoration:none}
.abas a.ativo,.abas button.ativo{color:var(--navy);border-bottom-color:var(--verde-vivo)}

/* ---------- Blocos "recebe x custo" ---------- */
.dois-blocos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:800px){.dois-blocos{grid-template-columns:1fr}}
.bloco-recebe,.bloco-custo{border-radius:var(--raio);padding:18px}
.bloco-recebe{background:linear-gradient(135deg,#EAF6EF,#F5FBF8);border:1px solid #BFE3CE}
.bloco-custo{background:linear-gradient(135deg,#EDF2F9,#F7FAFD);border:1px solid #C7DBEC}
.bloco-recebe .rot{color:var(--verde);font-size:11.5px;font-weight:800;letter-spacing:.07em}
.bloco-custo .rot{color:var(--navy);font-size:11.5px;font-weight:800;letter-spacing:.07em}
.bloco-recebe .valor,.bloco-custo .valor{font-size:30px;font-weight:750;color:var(--navy);margin:8px 0 4px}
.bloco-recebe .det,.bloco-custo .det{font-size:12px;color:var(--suave)}

/* ---------- eSocial ---------- */
.evento{border:1px solid var(--borda);border-radius:var(--raio);padding:14px;background:#fff}
.evento.PRONTO{border-left:4px solid var(--sucesso)}
.evento.INCOMPLETO{border-left:4px solid var(--alerta)}
.evento.ERRO{border-left:4px solid var(--erro)}
.evento.SEM_MOVIMENTO{border-left:4px solid var(--borda);opacity:.82}
.evento h3{font-size:13.5px;color:var(--navy)}
.evento .cod{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--suave)}
.pendencia{background:#FFF9EC;border:1px solid #F3E0B6;border-radius:8px;padding:10px 12px;margin-top:8px}
.pendencia b{display:block;font-size:10.5px;letter-spacing:.06em;color:#9A6614;text-transform:uppercase}
.pendencia p{font-size:12.5px;margin:2px 0 7px}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
@media(max-width:900px){.login{grid-template-columns:1fr}.login .arte{display:none}}
.login .arte{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-escuro) 55%,#0A2E22 100%);
  color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px;position:relative;overflow:hidden}
.login .arte::after{content:"";position:absolute;right:-90px;bottom:-90px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(45,148,95,.35),transparent 70%)}
.login .arte img{width:220px;background:#fff;border-radius:10px;padding:12px;margin-bottom:26px}
.login .arte h2{font-size:26px;font-weight:650;margin-bottom:10px}
.login .arte p{color:rgba(255,255,255,.72);font-size:14px;max-width:420px}
.login .arte ul{margin-top:22px;list-style:none;font-size:13.5px;color:rgba(255,255,255,.85)}
.login .arte ul li{padding:5px 0 5px 22px;position:relative}
.login .arte ul li::before{content:"\2713";position:absolute;left:0;color:var(--mint);font-weight:700}
.login .forma{display:flex;align-items:center;justify-content:center;padding:40px;background:#fff}
.login .forma .caixa{width:100%;max-width:390px}
.login .forma h1{font-size:22px;color:var(--navy);margin-bottom:6px}
.login .forma .sub{color:var(--suave);font-size:13px;margin-bottom:24px}
.btn-microsoft{width:100%;justify-content:center;background:#fff;border:1px solid #8C8C8C;
  color:#5E5E5E;font-weight:600;padding:11px}
.btn-microsoft:hover{background:#F3F3F3}
.divisor{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--suave);font-size:11.5px}
.divisor::before,.divisor::after{content:"";flex:1;height:1px;background:var(--borda)}

/* ---------- Indice de integridade ---------- */
.medidor{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rosca{width:132px;height:132px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;position:relative}
.rosca .interno{width:100px;height:100px;background:#fff;border-radius:50%;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.rosca .interno strong{font-size:27px;color:var(--navy);line-height:1}
.rosca .interno small{font-size:10px;color:var(--suave);letter-spacing:.08em}

.mono{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12px}
.pequeno{font-size:11.5px;color:var(--suave)}
.direita{text-align:right}
.centro{text-align:center}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.espaco{flex:1}
.oculto{display:none}
textarea.codigo{font-family:ui-monospace,Consolas,monospace;font-size:12px;min-height:340px;
  background:#0F2C55;color:#E8EEF7;border-color:#0B1F3E}
.passo{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--borda);
  border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:var(--navy)}
.passo .n{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.seta{color:var(--suave);font-size:16px;text-align:center}

/* ---------- Contador de duvidas no menu ---------- */
.badge{margin-left:auto;background:var(--alerta);color:#3D2A05;font-size:10.5px;
  font-weight:800;min-width:19px;height:19px;border-radius:20px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 6px}
.sidebar nav a.ativo .badge{background:#fff;color:var(--navy)}

/* ==================================================================
   CENTRAL DE AVISOS - tag flutuante e painel de acoes pendentes
   ================================================================== */
.avisos-flutuante{position:fixed;right:22px;bottom:22px;z-index:900;
  display:flex;align-items:center;gap:9px;padding:11px 17px;border-radius:30px;
  border:none;cursor:pointer;font-size:13.5px;font-weight:600;color:#fff;
  background:var(--navy);box-shadow:0 6px 20px rgba(15,44,85,.28);
  transition:transform .15s ease, box-shadow .15s ease}
.avisos-flutuante:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(15,44,85,.34)}
.avisos-flutuante.urgente{background:#8C1D1D;box-shadow:0 6px 20px rgba(140,29,29,.32)}
.avisos-flutuante.urgente:hover{box-shadow:0 9px 26px rgba(140,29,29,.4)}
.avisos-flutuante .contador{background:rgba(255,255,255,.22);border-radius:20px;
  padding:1px 9px;font-size:12px}
.avisos-flutuante.limpo{background:var(--sucesso);box-shadow:0 6px 20px rgba(27,94,54,.25)}

.avisos-painel{position:fixed;right:22px;bottom:78px;z-index:901;width:430px;
  max-width:calc(100vw - 44px);max-height:72vh;overflow:auto;background:#fff;
  border:1px solid #DCE3EC;border-radius:14px;box-shadow:0 18px 50px rgba(15,44,85,.22);
  display:none}
.avisos-painel.aberto{display:block}
.avisos-painel .cabeca{position:sticky;top:0;background:#fff;padding:15px 18px 11px;
  border-bottom:1px solid #EDF1F6}
.avisos-painel .cabeca h3{margin:0 0 3px;font-size:15px;color:var(--navy)}
.avisos-painel .cabeca .pequeno{color:var(--suave)}
.avisos-painel .lista{padding:6px 0 10px}
.aviso-item{display:block;padding:12px 18px;border-bottom:1px solid #F2F5F9;
  text-decoration:none;color:inherit}
.aviso-item:hover{background:#F7FAFD}
.aviso-item:last-child{border-bottom:none}
.aviso-item .linha1{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.aviso-item .titulo{font-weight:600;font-size:13px;color:var(--navy);flex:1}
.aviso-item .texto{font-size:12.3px;color:#4A5566;line-height:1.45}
.aviso-item .rodape{margin-top:6px;display:flex;gap:10px;align-items:center;
  font-size:11.5px;color:var(--suave)}
.aviso-item .rodape .ir{margin-left:auto;color:var(--info);font-weight:600}
.pino{width:7px;height:7px;border-radius:50%;flex:none}
.pino.CRITICO{background:var(--erro)}
.pino.ALERTA{background:var(--alerta)}
.pino.INFO{background:var(--info)}
.avisos-painel .vazio{padding:26px 18px;text-align:center;color:var(--suave);font-size:13px}
.avisos-painel .rodape-painel{position:sticky;bottom:0;background:#fff;
  border-top:1px solid #EDF1F6;padding:10px 18px;text-align:center}

/* tags de pendencia embutidas nas telas */
.tag-pendencia{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;
  border-radius:20px;font-size:11px;font-weight:600;vertical-align:middle}
.tag-pendencia.CRITICO{background:#FBEAEA;color:#8C1D1D}
.tag-pendencia.ALERTA{background:#FDF3E3;color:#9A6614}
.tag-pendencia.INFO{background:#E8F0F8;color:#12456F}

/* ==================================================================
   CELULAR E TABLET
   ==================================================================
   Escrito depois de o sistema sair para a internet: a Diretoria e o
   Financeiro passaram a APROVAR PELO CELULAR, e o menu lateral fixo de
   246px comia metade da tela sem ter como sumir.

   Regras que valeram a pena e nao sao obvias:

   * Campo de formulario com fonte menor que 16px faz o Safari do iPhone
     DAR ZOOM sozinho ao tocar. A pessoa toca no campo, a tela pula, e
     ela perde o lugar. 16px resolve sem parecer grande.

   * Tabela larga nao pode empurrar a pagina inteira: ela vira um bloco
     que rola sozinho na horizontal. Assim a folha com dez colunas
     continua legivel sem quebrar o resto.

   * Alvo de toque de 44px. Abaixo disso o dedo erra, e errar num
     sistema que aprova pagamento e caro.
   ================================================================== */

/* ---------- Botao do menu: so existe no celular ---------- */
.abrir-menu{
  display:none; align-items:center; justify-content:center;
  width:42px;height:42px;flex:none;margin-right:12px;
  background:transparent;border:1px solid var(--borda);border-radius:9px;
  color:var(--navy);font-size:19px;line-height:1;cursor:pointer
}
.abrir-menu:active{background:var(--cinza)}
.fechar-menu{display:none}
.veu{
  position:fixed;inset:0;background:rgba(11,31,62,.45);z-index:19;
  opacity:0;pointer-events:none;transition:opacity .18s ease
}

@media(max-width:900px){
  /* --- menu vira gaveta --- */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .22s ease;
    width:min(280px,84vw);
    box-shadow:0 0 40px rgba(11,31,62,.35)
  }
  body.menu-aberto .sidebar{transform:translateX(0)}
  body.menu-aberto .veu{opacity:1;pointer-events:auto}
  body.menu-aberto{overflow:hidden}          /* nao rola o fundo */
  .conteudo{margin-left:0}
  .abrir-menu{display:flex}

  .fechar-menu{
    display:block;position:absolute;top:12px;right:12px;
    width:36px;height:36px;border-radius:9px;border:0;
    background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer
  }
  .sidebar .marca{padding-right:58px}
  .sidebar nav a{padding:12px;font-size:14.5px}   /* alvo de toque */

  /* --- topo enxuto: sobra espaco para o titulo --- */
  .topo{padding:10px 14px;gap:10px}
  .topo h1{font-size:16px}
  .topo .sub{display:none}
  .topo .usuario .direita{display:none}           /* nome e perfil */
  .topo .usuario .tag{display:none}
  .principal{padding:16px 14px 92px}              /* espaco p/ a faixa */

  /* --- tabela rola sozinha em vez de arrebentar a pagina --- */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
        white-space:nowrap;font-size:12.5px}

  /* --- formulario que nao faz o iPhone dar zoom --- */
  input,select,textarea{font-size:16px;padding:11px 12px}
  label{display:block;margin-bottom:10px}
  .btn,button,.botao{min-height:44px;font-size:14.5px}
  .flex{gap:8px}
  form .linha{flex-direction:column;align-items:stretch}

  /* --- cartoes e paineis --- */
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card .val,.cartao .valor{font-size:20px}
  .painel{border-radius:10px}
  .painel .corpo,.painel header{padding:13px}
  .medidor{gap:14px}
  .rosca{width:110px;height:110px}
  .rosca .interno{width:84px;height:84px}

  /* --- avisos: painel ocupa a tela, botao sobe da faixa --- */
  .avisos-flutuante{right:12px;bottom:12px;padding:12px 16px;font-size:13px}
  .avisos-painel{right:8px;left:8px;width:auto;bottom:68px;max-height:64vh}
}

/* A faixa do mes de avaliacao fica no rodape. Sem isto o botao de
   avisos cai em cima dela e um cobre o outro. */
body.tem-faixa .avisos-flutuante{bottom:64px}
@media(max-width:900px){
  body.tem-faixa .avisos-flutuante{bottom:88px}
  body.tem-faixa .avisos-painel{bottom:142px}
}

@media(max-width:420px){
  .cards{grid-template-columns:1fr}
  .topo .btn.pequeno{padding:8px 10px}
}

/* Impressao: menu e botoes nao vao para o papel. O holerite e o
   espelho de ponto sao impressos de verdade. */
@media print{
  .sidebar,.topo .usuario,.abrir-menu,.avisos-flutuante,.avisos-painel,
  .faixa-avaliacao,.caixa-achado,.veu{display:none !important}
  .conteudo{margin-left:0}
  .principal{padding:0}
  .painel{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
}