/* =============================================================================
   PAINEL ADMINISTRATIVO — complementa app.css
   ============================================================================= */

body.admin { background: var(--azul-50); }

.admin-shell { display: grid; grid-template-columns: 258px 1fr; min-height: 100vh; }

/* --------------------------------------------------------------- lateral */
.admin-lateral {
  background: linear-gradient(180deg, var(--azul-900), var(--azul-950));
  color: rgba(255,255,255,.72);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-marca {
  padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 11px;
}
.admin-marca img { height: 34px; filter: brightness(0) invert(1); }
.admin-marca div { line-height: 1.2; }
.admin-marca strong { color: #fff; font-size: .95rem; display: block; }
.admin-marca span { font-size: .7rem; color: var(--ouro-400); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }

.admin-menu { padding: 14px 12px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.admin-menu-titulo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800;
  color: rgba(255,255,255,.34); padding: 16px 12px 7px;
}
.admin-menu a {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--raio-sm);
  color: rgba(255,255,255,.76); font-size: .92rem; font-weight: 600;
  transition: background var(--transicao), color var(--transicao);
}
.admin-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-menu a.ativo { background: var(--ouro-500); color: var(--azul-950); }
.admin-menu a.ativo .ic { color: var(--azul-950); }
.admin-menu .ic { width: 18px; height: 18px; color: var(--ouro-400); }

.admin-usuario {
  padding: 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: .84rem;
}
.admin-usuario strong { color: #fff; display: block; }
.admin-usuario span { color: rgba(255,255,255,.45); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }

/* -------------------------------------------------------------- conteudo */
.admin-conteudo { min-width: 0; display: flex; flex-direction: column; }
.admin-topo {
  background: var(--branco); border-bottom: 1px solid var(--linha);
  padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; position: sticky; top: 0; z-index: 40;
}
.admin-topo h1 { margin: 0; font-size: 1.32rem; }
.admin-corpo { padding: 26px 28px 60px; flex: 1; }

.admin-abrir-menu { display: none; }

@media (max-width: 1000px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-lateral {
    position: fixed; inset: 0 auto 0 0; width: 262px; z-index: 200;
    transform: translateX(-100%); transition: transform var(--transicao);
    box-shadow: var(--sombra-lg);
  }
  .admin-lateral.aberta { transform: translateX(0); }
  .admin-abrir-menu { display: inline-flex; }
  .admin-corpo { padding: 20px 16px 50px; }
  .admin-topo { padding: 14px 16px; }
}

/* ------------------------------------------------------------ utilitarios */
.barra-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.barra-filtros {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; margin-bottom: 20px;
}
.barra-filtros .campo { margin: 0; min-width: 160px; flex: 1 1 160px; }

.paginacao { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.paginacao a, .paginacao span {
  padding: 8px 14px; border-radius: var(--raio-sm); border: 1px solid var(--linha);
  background: var(--branco); font-weight: 700; font-size: .9rem; color: var(--azul-800);
}
.paginacao .atual { background: var(--azul-800); color: #fff; border-color: var(--azul-800); }

.tabela-acoes { display: flex; gap: 6px; justify-content: flex-end; }

.etapa-apuracao {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco);
  margin-bottom: 18px; overflow: hidden;
}
.etapa-apuracao.ativa { border-color: var(--ouro-500); box-shadow: 0 0 0 3px rgba(216,30,43,.15); }
.etapa-apuracao.concluida { border-color: #B9E3CB; }
.etapa-cabecalho {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--linha-2);
}
.etapa-cabecalho .passo-num { flex: 0 0 38px; height: 38px; font-size: .98rem; }
.etapa-cabecalho h3 { margin: 0; font-size: 1.04rem; }
.etapa-cabecalho p { margin: 0; font-size: .85rem; color: var(--tinta-50); }
.etapa-corpo { padding: 20px; }
.etapa-bloqueada { opacity: .55; pointer-events: none; }

.codigo-2fa {
  font-family: var(--fonte-num); font-size: 1.4rem; letter-spacing: .3em;
  text-align: center; font-weight: 800; padding: 16px;
}
.segredo-2fa {
  font-family: var(--fonte-num); font-size: 1.1rem; letter-spacing: .18em; font-weight: 700;
  background: var(--azul-50); border: 1px dashed var(--azul-100); border-radius: var(--raio-sm);
  padding: 16px; text-align: center; color: var(--azul-800); word-break: break-all;
}

.login-tela {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 20px;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(216,30,43,.20), transparent 60%),
    linear-gradient(160deg, var(--azul-900), var(--azul-950));
}
.login-caixa { width: 100%; max-width: 420px; }
.login-marca { text-align: center; margin-bottom: 24px; }
.login-marca img { height: 62px; margin: 0 auto 10px; filter: brightness(0) invert(1); }
.login-marca p { color: rgba(255,255,255,.55); font-size: .84rem; margin: 0; letter-spacing: .1em; text-transform: uppercase; }