/* ================================================================
   PORTAL DE TREINAMENTO — LIDER BPO  ·  v2 (identidade azul)
   Paleta extraída do logo: azul-marinho + ciano
   ================================================================ */
:root {
  --azul-950: #0B2E57;
  --azul-800: #14498B;
  --azul-700: #1B5EA6;   /* azul do logo */
  --azul-500: #2D7DD2;
  --ciano:    #29ABE2;   /* ciano do logo */
  --ciano-100:#E3F3FB;
  --fundo:    #F2F6FB;
  --branco:   #ffffff;
  --grafite:  #1E2A38;
  --cinza:    #64748B;
  --linha:    #DCE6F2;
  --verde-ok: #2E9E5B;
  --verde-100:#E4F4EA;
  --erro:     #C0392B;
  --erro-100: #FBEAE7;
  --sombra:   0 8px 24px rgba(20, 73, 139, .08);
  --fonte-display: "Sora", "Segoe UI", sans-serif;
  --fonte-texto:   "Inter", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--grafite);
  background: var(--fundo);
}

h1, h2, h3 { font-family: var(--fonte-display); line-height: 1.25; }
a { color: var(--azul-700); }

/* ---------- Boas-vindas por perfil ---------- */
.boas-vindas-pagina{min-height:100vh;display:grid;place-items:center;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 30%,#fff 0,#eef5fd 48%,#dceaf8 100%)}
.boas-vindas-pagina::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:boas-luz 2.2s ease-in-out infinite}.boas-card{position:relative;z-index:2;width:min(520px,calc(100% - 32px));text-align:center;padding:38px 36px 32px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 28px 70px rgba(11,46,87,.16);backdrop-filter:blur(12px);animation:boas-entrada .65s cubic-bezier(.2,.8,.2,1)}.boas-logo{height:38px;margin-bottom:22px}.boas-card h1{font-size:28px;color:var(--azul-950);margin:9px 0 8px}.boas-card p{color:var(--cinza);margin:0 auto 22px;max-width:410px}.boas-perfil{display:inline-block;padding:4px 11px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--azul-700);background:var(--ciano-100)}.boas-visual{width:150px;height:150px;margin:0 auto 18px;position:relative;display:grid;place-items:center}.boas-carregando{height:5px;background:#e1eaf4;border-radius:99px;overflow:hidden}.boas-carregando span{display:block;height:100%;width:45%;border-radius:99px;background:linear-gradient(90deg,var(--azul-700),var(--ciano));animation:boas-carga 1.25s ease-in-out infinite}.boas-card>small{display:block;color:#8291a5;margin-top:8px}.boas-particulas i{position:absolute;width:9px;height:9px;border-radius:50%;background:rgba(45,125,210,.22);animation:boas-flutua 5s ease-in-out infinite}.boas-particulas i:nth-child(1){left:12%;top:20%}.boas-particulas i:nth-child(2){left:82%;top:16%;animation-delay:-1s}.boas-particulas i:nth-child(3){left:18%;top:76%;animation-delay:-2s}.boas-particulas i:nth-child(4){left:88%;top:70%;animation-delay:-3s}.boas-particulas i:nth-child(5){left:48%;top:8%;animation-delay:-1.5s}.boas-particulas i:nth-child(6){left:66%;top:88%;animation-delay:-2.5s}
/* Colaborador: três eixos orbitando a pessoa */
.perfil-colaborador .boas-centro{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#1b5ea6,#29abe2);color:#fff;font-family:var(--fonte-display);font-size:22px;box-shadow:0 10px 28px rgba(27,94,166,.3)}.orbita{position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 6px 18px rgba(11,46,87,.14);animation:orbitar 3.4s linear infinite}.orbita.o2{animation-delay:-1.13s}.orbita.o3{animation-delay:-2.26s}
/* Gestor: gráfico de equipe crescendo */
.perfil-gestor{background:radial-gradient(circle at 50% 30%,#fff 0,#f2f7ff 50%,#e4edff 100%)}.gestor-grafico{width:110px;height:92px;border-left:3px solid #b9cae2;border-bottom:3px solid #b9cae2;display:flex;align-items:flex-end;justify-content:space-around;padding:0 9px 0 10px}.gestor-grafico i{width:15px;border-radius:5px 5px 0 0;background:linear-gradient(#2d7dd2,#14498b);animation:barra-sobe 1.2s ease-in-out infinite alternate}.gestor-grafico i:nth-child(1){height:32%;animation-delay:-.6s}.gestor-grafico i:nth-child(2){height:55%;animation-delay:-.3s}.gestor-grafico i:nth-child(3){height:74%;animation-delay:-.8s}.gestor-grafico i:nth-child(4){height:94%}.gestor-check{position:absolute;right:12px;top:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e4f6eb;color:#16834b;font-size:22px;font-weight:800;animation:check-pulsa 1.4s ease infinite}
/* TI: núcleo conectado */
.perfil-ti{background:radial-gradient(circle at 50% 32%,#173e70 0,#0b2341 50%,#07182d 100%)}.perfil-ti .boas-card{background:rgba(10,35,65,.86);border-color:rgba(41,171,226,.25);box-shadow:0 28px 80px rgba(0,0,0,.35)}.perfil-ti .boas-card h1{color:#fff}.perfil-ti .boas-card p,.perfil-ti .boas-card>small{color:#b9cce2}.perfil-ti .boas-perfil{color:#65d3ff;background:rgba(41,171,226,.14)}.ti-nucleo{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#29abe2,#1b5ea6);color:#fff;font-size:30px;box-shadow:0 0 0 0 rgba(41,171,226,.4);animation:ti-pulso 1.5s infinite}.ti-no{position:absolute;width:18px;height:18px;border:4px solid #29abe2;border-radius:50%;background:#0b2341}.ti-no::after{content:'';position:absolute;width:42px;height:2px;background:#29abe2;opacity:.55;transform-origin:left center;left:10px;top:4px}.ti-no.n1{left:5px;top:20px}.ti-no.n1::after{transform:rotate(22deg)}.ti-no.n2{right:5px;top:20px}.ti-no.n2::after{transform:rotate(158deg)}.ti-no.n3{left:7px;bottom:17px}.ti-no.n3::after{transform:rotate(-22deg)}.ti-no.n4{right:7px;bottom:17px}.ti-no.n4::after{transform:rotate(202deg)}
@keyframes boas-entrada{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}@keyframes boas-luz{50%,100%{transform:translateX(100%)}}@keyframes boas-carga{0%{transform:translateX(-110%)}100%{transform:translateX(240%)}}@keyframes boas-flutua{50%{transform:translateY(-24px) scale(1.4);opacity:.5}}@keyframes orbitar{from{transform:rotate(0deg) translateX(63px) rotate(0deg)}to{transform:rotate(360deg) translateX(63px) rotate(-360deg)}}@keyframes barra-sobe{to{height:38%}}@keyframes check-pulsa{50%{transform:scale(1.12)}}@keyframes ti-pulso{70%{box-shadow:0 0 0 24px rgba(41,171,226,0)}}

/* ---------- Barra superior ---------- */
.topo {
  background: linear-gradient(90deg, var(--azul-800), var(--azul-700) 55%, var(--azul-500));
  color: #EAF3FC;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo-esquerda{display:flex;align-items:center;gap:12px}.botao-menu-lateral{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:9px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:19px;display:grid;place-items:center;transition:.2s}.botao-menu-lateral:hover{background:rgba(255,255,255,.23);transform:translateY(-1px)}
.topo .chip-logo {
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
}
.topo .chip-logo img { height: 30px; display: block; }
.topo .usuario { font-size: 14px; display: flex; align-items: center; gap: 14px; }
.topo .usuario .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); font-weight: 700; font-size: 14px;
}
.topo .usuario a { color: #CFE7F8; text-decoration: none; font-size: 13px; }
.topo .usuario a:hover { text-decoration: underline; }

/* ---------- Estrutura app: lateral + conteúdo ---------- */
.app { display: flex; min-height: calc(100vh - 56px); }

.lateral {
  width: 250px;
  flex: 0 0 250px;
  background: var(--branco);
  border-right: 1px solid var(--linha);
  padding: 26px 18px;
  transition:width .25s ease,flex-basis .25s ease,padding .25s ease;
  overflow:hidden;
}
.menu-recolhido .lateral,.menu-pre-recolhido body .lateral{width:76px;flex-basis:76px;padding-left:10px;padding-right:10px}.menu-recolhido .lateral .rotulo,.menu-recolhido .lateral .progresso{opacity:0;height:0;margin:0;overflow:hidden}.menu-recolhido .lateral nav a{font-size:0;justify-content:center;padding-left:8px;padding-right:8px}.menu-recolhido .lateral .pino{font-size:12px;margin:0}.menu-recolhido .botao-menu-lateral span{transform:rotate(180deg)}.botao-menu-lateral span{transition:transform .25s ease}
.lateral .rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cinza);
  margin: 22px 0 10px;
}
.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--grafite);
  font-size: 14.5px;
  margin-bottom: 4px;
}
.lateral nav a:hover { background: var(--ciano-100); }
.lateral nav a.ativo {
  background: var(--azul-700); color: #fff; font-weight: 600;
}
.lateral nav a.feito .pino { background: var(--verde-ok); color: #fff; }
.lateral nav a.bloqueado { color: var(--cinza); pointer-events: none; opacity: .65; }
.lateral .pino {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%;
  background: var(--ciano-100); color: var(--azul-700);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lateral nav a.ativo .pino { background: rgba(255,255,255,.22); color: #fff; }

/* Barra de progresso */
.progresso { margin-bottom: 6px; }
.progresso .cab { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.progresso .trilho { height: 8px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.progresso .barra {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--azul-700), var(--ciano));
  transition: width .6s ease;
}

.conteudo-area {
  flex: 1;
  padding: 34px 38px 70px;
  max-width: 980px;
}

/* ---------- Cartões ---------- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 20px;
  box-shadow: var(--sombra);
}

.etiqueta {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul-700);
  background: var(--ciano-100);
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 12px;
}

/* ---------- Trilha (painel) ---------- */
.trilha { list-style: none; margin: 0; padding: 0; }
.trilha li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 6px;
  border-bottom: 1px solid var(--linha);
  border-radius: 10px;
  transition: background .15s;
}
.trilha li:hover { background: var(--fundo); }
.trilha li:last-child { border-bottom: 0; }
.trilha .num {
  flex: 0 0 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); font-weight: 700; font-size: 16px;
  background: var(--ciano-100); color: var(--azul-700);
}
.trilha li.feito .num { background: var(--verde-ok); color: #fff; }
.trilha .info h3 { margin: 0 0 2px; font-size: 17px; }
.trilha .info p { margin: 0; font-size: 14px; color: var(--cinza); }
.trilha .acao { margin-left: auto; align-self: center; white-space: nowrap; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fonte-display);
  font-weight: 600; font-size: 14px;
  color: #fff;
  background: var(--azul-700);
  border: 0; border-radius: 10px;
  padding: 11px 22px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.botao:hover { background: var(--azul-500); }
.botao:active { transform: translateY(1px); }
.botao.secundario {
  background: transparent; color: var(--azul-700);
  border: 1.5px solid var(--azul-700);
}
.botao.secundario:hover { background: var(--ciano-100); }
.botao[disabled], .botao.desabilitado {
  background: var(--linha); color: var(--cinza);
  pointer-events: none; border: 0;
}

/* ---------- Formulários ---------- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo input[type=text], .campo input[type=password] {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font-size: 15px; font-family: inherit;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.senha-campo { position: relative; }
.senha-campo input { padding-right: 48px !important; }
.senha-olho {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 34px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 17px;
}
.senha-olho:hover, .senha-olho:focus-visible { background: var(--fundo); outline: 2px solid var(--azul-claro); }
.senha-regras {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  margin: -4px 0 16px; padding: 12px 14px; list-style: none;
  border-radius: 10px; background: var(--fundo); color: var(--texto-suave); font-size: 12px;
}
.senha-regras li::before { content: '○'; margin-right: 6px; }
.senha-regras li.ok { color: #16834b; font-weight: 600; }
.senha-regras li.ok::before { content: '✓'; }
.senha-coincide { display: block; min-height: 18px; margin-top: 5px; font-size: 12px; }
.senha-coincide.ok { color: #16834b; }
.senha-coincide.erro { color: #b42318; }
@media (max-width: 420px) { .senha-regras { grid-template-columns: 1fr; } }
.campo input:focus {
  outline: none;
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(41,171,226,.18);
}

.alerta { border-radius: 10px; padding: 13px 15px; font-size: 14px; margin-bottom: 16px; }
.alerta.erro    { background: var(--erro-100); color: var(--erro); }
.alerta.sucesso { background: var(--verde-100); color: #16603A; }

/* ================================================================
   LOGIN (hero em duas colunas)
   ================================================================ */
.login-pagina {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--branco);
}
.login-hero {
  position: relative;
  background: linear-gradient(160deg, var(--azul-950), var(--azul-700) 60%, var(--azul-500));
  color: #EAF3FC;
  padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.login-hero .bolha {
  position: absolute; border-radius: 50%;
  background: rgba(41,171,226,.22);
}
.login-hero .b1 { width: 340px; height: 340px; top: -120px; right: -100px; }
.login-hero .b2 { width: 220px; height: 220px; bottom: -80px; left: -60px; background: rgba(255,255,255,.07); }
.login-hero .b3 { width: 90px; height: 90px; bottom: 120px; right: 80px; background: rgba(255,255,255,.10); }
.login-hero .chip-logo {
  background: #fff; border-radius: 12px; padding: 10px 16px;
  display: inline-flex; width: fit-content; margin-bottom: 46px;
}
.login-hero .chip-logo img { height: 40px; display: block; }
.login-hero h1 {
  font-size: 40px; margin: 0 0 14px; font-weight: 700;
  position: relative;
}
.login-hero h1 span { color: var(--ciano); }
.login-hero p { font-size: 17px; max-width: 420px; opacity: .92; position: relative; }
.login-hero .eixos { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; position: relative; }
.login-hero .eixos span {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 99px; padding: 6px 14px; font-size: 13px;
}
.login-form-lado {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
  background: var(--fundo);
}
.login-caixa { width: 100%; max-width: 420px; }
.login-caixa .cartao { padding: 36px 34px; }
.login-titulo { font-size: 22px; margin: 0 0 4px; color: var(--azul-950); }
.login-sub { font-size: 13.5px; color: var(--cinza); margin: 0 0 24px; }
.login-nota {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--cinza); margin-top: 16px;
}

/* ================================================================
   MODAL — popup central de aviso (login, troca de senha, etc.)
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(11, 46, 87, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-surge .15s ease;
}
@keyframes modal-surge { from { opacity: 0; } to { opacity: 1; } }
.modal-caixa {
  background: #fff; width: 100%; max-width: 380px;
  border-radius: 18px; box-shadow: 0 20px 50px rgba(11, 46, 87, .35);
  padding: 30px 28px 26px; text-align: center;
  animation: modal-entra .25s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.modal-icone {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--erro-100); color: var(--erro);
}
.modal-caixa h2 { margin: 0 0 8px; font-size: 18px; color: var(--azul-950); }
.modal-caixa p { margin: 0 0 22px; font-size: 14px; color: var(--cinza); line-height: 1.5; }
.modal-caixa .botao { width: 100%; justify-content: center; }
.modal-overlay[hidden],.logout-animacao[hidden]{display:none!important}.modal-logout{z-index:1200}.logout-icone{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--ciano-100);color:var(--azul-700);font-size:30px;font-weight:800}.logout-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.logout-acoes .botao{margin:0}.logout-confirmar{background:var(--erro)}
.logout-animacao{position:fixed;inset:0;z-index:1300;background:linear-gradient(145deg,#f8fbff,#e8f2fd);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--azul-950);animation:logout-fundo .25s ease}.logout-marca{position:relative;width:116px;height:116px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 45px rgba(20,73,139,.18);margin-bottom:24px}.logout-marca img{width:72px}.logout-spinner{position:absolute;inset:-7px;border:4px solid rgba(45,125,210,.16);border-top-color:var(--azul-500);border-radius:50%;animation:girar .8s linear infinite}.logout-animacao strong{font-family:var(--fonte-display);font-size:20px}.logout-animacao small{color:var(--cinza);margin-top:5px}.saindo .app,.saindo .topo{animation:logout-pagina .35s ease forwards}@keyframes girar{to{transform:rotate(360deg)}}@keyframes logout-fundo{from{opacity:0}to{opacity:1}}@keyframes logout-pagina{to{opacity:0;transform:scale(.985)}}

/* ================================================================
   MÓDULO — cabeçalho, stepper e passos
   ================================================================ */
.mod-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.mod-icone {
  width: 62px; height: 62px; flex: 0 0 62px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--ciano-100), #fff);
  border: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: center;
}
.mod-icone svg { width: 34px; height: 34px; }

.stepper {
  display: flex; gap: 4px; align-items: flex-start;
  margin: 22px 0 6px;
  padding: 0 4px;
}
.stepper .ponto {
  flex: 1; text-align: center; position: relative;
  font-size: 12px; color: var(--cinza); cursor: default;
}
.stepper .ponto .bola {
  width: 40px; height: 40px; margin: 0 auto 6px;
  border-radius: 50%;
  border: 2px solid var(--linha);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); font-weight: 700; font-size: 15px;
  color: var(--cinza);
  transition: all .2s;
}
.stepper .ponto.atual .bola { border-color: var(--azul-700); color: var(--azul-700); box-shadow: 0 0 0 4px rgba(41,171,226,.18); }
.stepper .ponto.ok .bola { background: var(--verde-ok); border-color: var(--verde-ok); color: #fff; }
.stepper .ponto.atual { color: var(--azul-700); font-weight: 600; }

.passo { display: none; animation: surgir .25s ease; }
.passo.visivel { display: block; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.conteudo h2 { color: var(--azul-950); margin-top: 26px; font-size: 21px; }
.conteudo h2:first-child { margin-top: 0; }
.conteudo ul { padding-left: 22px; }
.destaque {
  border-left: 4px solid var(--ciano);
  background: var(--ciano-100);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin: 20px 0;
  font-size: 15px;
}

.figura {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--ciano-100), #fff);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 22px;
  margin: 4px 0 20px;
}
.figura svg { max-width: 220px; height: auto; }

/* ---------- Mini quiz ---------- */
.mini-q { margin-bottom: 26px; }
.mini-q .enunciado { font-weight: 600; margin: 0 0 10px; }
.mini-q .opcao {
  display: block;
  padding: 11px 14px;
  border: 1.5px solid var(--linha);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s, background .15s;
}
.mini-q .opcao:hover { border-color: var(--ciano); }
.mini-q.respondida .opcao { cursor: default; }
.mini-q .opcao.certa   { border-color: var(--verde-ok); background: var(--verde-100); }
.mini-q .opcao.errada  { border-color: var(--erro); background: var(--erro-100); }
.mini-q .feedback {
  display: none;
  border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 4px;
}
.mini-q .feedback.mostra { display: block; }
.mini-q .feedback.ok  { background: var(--verde-100); color: #16603A; }
.mini-q .feedback.nok { background: var(--erro-100); color: var(--erro); }

/* ---------- Prova ---------- */
.questao { border-bottom: 1px solid var(--linha); padding: 20px 0; }
.questao:last-of-type { border-bottom: 0; }
.questao .enunciado { font-weight: 600; margin: 0 0 10px; }
.questao label {
  display: block;
  padding: 10px 13px;
  border: 1.5px solid var(--linha);
  border-radius: 10px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s, background .15s;
}
.questao label:hover { border-color: var(--ciano); }
.questao label:has(input:checked) { border-color: var(--azul-700); background: var(--ciano-100); }
.questao input { margin-right: 8px; }

.resultado-nota {
  font-family: var(--fonte-display);
  font-size: 52px; font-weight: 700; margin: 4px 0;
}
.aprovado  { color: var(--verde-ok); }
.reprovado { color: var(--erro); }

/* Estatísticas de conclusão */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 0; }
.stats .stat {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}
.stats .stat .valor { font-family: var(--fonte-display); font-weight: 700; font-size: 22px; color: var(--azul-700); }
.stats .stat .desc { font-size: 12.5px; color: var(--cinza); }

.nav-rodape { display: flex; justify-content: space-between; margin-top: 28px; gap: 10px; }

/* ================================================================
   CERTIFICADO
   ================================================================ */
.certificado {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 6px;
  max-width: 960px;
  margin: 0 auto 24px;
  box-shadow: var(--sombra);
}
.cert-borda {
  border: 3px double var(--azul-700);
  margin: 14px;
  padding: 46px 60px 40px;
  text-align: center;
  position: relative;
}
.cert-logos {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}
.cert-logos img { height: 46px; }
.cert-logos .logo-falta {
  height: 46px; padding: 0 16px;
  display: flex; align-items: center;
  border: 1.5px dashed var(--linha); border-radius: 8px;
  font-family: var(--fonte-display); font-weight: 700; color: var(--cinza); font-size: 14px;
}
.cert-titulo {
  font-family: var(--fonte-display);
  font-size: 34px; font-weight: 700;
  color: var(--azul-950);
  letter-spacing: .06em;
  margin: 0 0 26px;
}
.cert-texto { font-size: 16px; max-width: 660px; margin: 0 auto 8px; }
.cert-nome {
  font-family: var(--fonte-display);
  font-size: 28px; font-weight: 600;
  color: var(--grafite);
  margin: 12px 0;
  border-bottom: 1.5px solid var(--linha);
  display: inline-block;
  padding: 0 30px 6px;
}
.cert-eixos { font-family: var(--fonte-display); font-weight: 600; color: var(--azul-700); font-size: 18px; line-height: 1.5; margin: 14px 0 4px; }
.cert-detalhes { font-size: 14px; color: var(--cinza); margin-top: 20px; }
.cert-rodape {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 34px;
}
.cert-selo {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 2.5px solid var(--azul-700);
  color: var(--azul-700);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--fonte-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cert-selo b { font-size: 20px; letter-spacing: 0; }
.cert-qr { text-align: right; }
.cert-qr .qr { display: inline-block; padding: 6px; background: #fff; border: 1px solid var(--linha); border-radius: 8px; }
.cert-codigo {
  font-family: "Courier New", monospace;
  font-size: 12px; color: var(--cinza);
  margin-top: 8px;
}
.cert-acoes { text-align: center; margin: 0 0 40px; }

@media print {
  body { background: #fff; }
  .topo, .lateral, .cert-acoes, .nav-rodape { display: none !important; }
  .app { display: block; }
  .conteudo-area { padding: 0; max-width: none; }
  .certificado { border: 0; margin: 0; max-width: none; box-shadow: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .login-pagina { grid-template-columns: 1fr; }
  .login-hero { padding: 40px 28px; min-height: 280px; }
  .login-hero h1 { font-size: 30px; }
  .app { flex-direction: column; }
  .lateral { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--linha); padding: 16px 18px; }
  .conteudo-area { padding: 22px 16px 56px; }
  .stepper .ponto { font-size: 10.5px; }
  .trilha li { flex-wrap: wrap; }
  .trilha .acao { margin-left: 56px; }
  .cert-borda { padding: 28px 18px; }
  .cert-titulo { font-size: 24px; }
  .cert-nome { font-size: 20px; }
  .cert-rodape { flex-direction: column; gap: 20px; align-items: center; }
  .cert-logos { flex-direction: column; gap: 14px; }
}

/* ================================================================
   v3 — Novas interações de conteúdo
   ================================================================ */

/* ---------- Linha do tempo ---------- */
.conteudo .linha-tempo { list-style: none; margin: 18px 0; padding: 0; position: relative; }
.linha-tempo::before {
  content: ""; position: absolute; left: 75px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--ciano), var(--azul-700));
}
.linha-tempo li { display: flex; gap: 18px; padding: 10px 0; }
.linha-tempo .ano {
  flex: 0 0 46px; text-align: right;
  font-family: var(--fonte-display); font-weight: 700; color: var(--azul-700); font-size: 15px;
}
.linha-tempo .marco { position: relative; padding-left: 24px; }
.linha-tempo .marco::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ciano);
}
.linha-tempo .marco b { color: var(--azul-950); }

/* ---------- Cartões de revelar (clique para virar) ---------- */
.cards-revela {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.card-r {
  border: 1.5px solid var(--linha);
  border-radius: 12px;
  padding: 16px 14px;
  min-height: 120px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.card-r:hover { border-color: var(--ciano); transform: translateY(-2px); box-shadow: var(--sombra); }
.card-r .frente { font-weight: 600; font-size: 15px; color: var(--azul-950); }
.card-r .dica {
  position: absolute; bottom: 10px; left: 14px;
  font-size: 11.5px; color: var(--ciano); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.card-r .verso { display: none; font-size: 14px; }
.card-r.aberto { background: var(--ciano-100); border-color: var(--azul-700); cursor: default; min-height: 0; }
.card-r.aberto .frente { margin-bottom: 6px; }
.card-r.aberto .dica { display: none; }
.card-r.aberto .verso { display: block; animation: surgir .2s ease; }

/* ---------- Mito ou Verdade ---------- */
.mv { border: 1.5px solid var(--linha); border-radius: 12px; padding: 18px; margin: 16px 0; background: #fff; }
.mv .afirmacao { font-weight: 600; margin: 0 0 12px; font-size: 15.5px; }
.mv .afirmacao::before { content: "🤔 "; }
.mv .botoes { display: flex; gap: 10px; }
.mv button {
  flex: 1; padding: 10px;
  border: 1.5px solid var(--linha); border-radius: 10px;
  background: #fff; font-family: var(--fonte-display); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all .15s;
}
.mv button:hover { border-color: var(--ciano); background: var(--ciano-100); }
.mv.respondida button { cursor: default; opacity: .6; }
.mv.respondida button.escolhida.certa { opacity: 1; border-color: var(--verde-ok); background: var(--verde-100); }
.mv.respondida button.escolhida.errada { opacity: 1; border-color: var(--erro); background: var(--erro-100); }
.mv .explica { display: none; margin-top: 12px; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.mv.respondida .explica { display: block; animation: surgir .2s ease; }
.mv .explica.ok  { background: var(--verde-100); color: #16603A; }
.mv .explica.nok { background: var(--erro-100); color: var(--erro); }

/* ---------- Checklist interativa de hábitos ---------- */
.check-habitos { margin: 18px 0; }
.check-habitos label {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border: 1.5px solid var(--linha); border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; font-size: 15px;
  transition: all .15s;
}
.check-habitos label:hover { border-color: var(--ciano); }
.check-habitos label:has(input:checked) { border-color: var(--verde-ok); background: var(--verde-100); }
.check-habitos input { margin-top: 4px; accent-color: var(--verde-ok); }
.check-resultado {
  border-radius: 10px; padding: 13px 16px; margin-top: 10px;
  background: var(--ciano-100); font-size: 14.5px;
}
.check-resultado b { font-family: var(--fonte-display); color: var(--azul-700); }

/* ---------- Saiba mais (acordeão) ---------- */
details.saiba-mais {
  border: 1.5px solid var(--linha); border-radius: 12px;
  margin: 14px 0; background: #fff;
}
details.saiba-mais summary {
  padding: 13px 16px; cursor: pointer;
  font-family: var(--fonte-display); font-weight: 600; font-size: 14.5px; color: var(--azul-700);
  list-style: none;
}
details.saiba-mais summary::before { content: "▸ "; }
details.saiba-mais[open] summary::before { content: "▾ "; }
details.saiba-mais .interno { padding: 0 16px 14px; font-size: 14.5px; }

/* ---------- Tabela didática ---------- */
.tabela-did { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.tabela-did th {
  background: var(--azul-700); color: #fff; text-align: left;
  padding: 10px 12px; font-family: var(--fonte-display); font-size: 13px;
}
.tabela-did td { padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.tabela-did tr:nth-child(even) td { background: var(--fundo); }

/* ---------- Gestão: colaboradores ---------- */
body:has(.gestao-cabecalho) .conteudo-area { max-width: none; min-width: 0; }
.gestao-cabecalho { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.gestao-cabecalho h1 { margin:5px 0 3px; color:var(--azul-950); font-size:30px; }
.gestao-cabecalho p { margin:0; color:var(--cinza); }
.gestao-supra { color:var(--azul-700); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.gestao-cab-acoes { display:flex; gap:10px; flex-wrap:wrap; }
.gestao-metricas { display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.gestao-metrica { background:#fff; border:1px solid var(--linha); border-radius:14px; padding:20px; display:flex; align-items:center; gap:14px; box-shadow:var(--sombra); }
.gestao-metrica strong { display:block; font-family:var(--fonte-display); font-size:28px; color:var(--azul-950); line-height:1.1; }
.gestao-metrica small { display:block; color:var(--cinza); margin-top:5px; }
.metrica-icone { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:700; }
.metrica-icone.azul { color:#1463d4; background:#e5efff; }.metrica-icone.verde{color:#16934f;background:#e4f6eb}.metrica-icone.laranja{color:#e87514;background:#fff0e3}.metrica-icone.roxo{color:#6f2bd4;background:#f0e8ff}
.gestao-lista { padding:20px; }
.gestao-filtros { display:grid; grid-template-columns:1.4fr repeat(4,1fr) auto; gap:12px; align-items:end; margin-bottom:18px; }
.gestao-filtros label { font-size:12px; font-weight:600; color:var(--azul-950); }
.gestao-filtros input,.gestao-filtros select { width:100%; min-height:42px; margin-top:6px; border:1px solid var(--linha); border-radius:9px; padding:9px 11px; background:#fff; font:inherit; color:var(--grafite); }
.tabela-responsiva { overflow-x:auto; }
.tabela-colaboradores { width:100%; border-collapse:collapse; font-size:12px; min-width:1120px; }
.tabela-colaboradores th { padding:11px 10px; background:#f3f7fc; color:var(--azul-950); text-align:left; white-space:nowrap; }
.tabela-colaboradores td { padding:13px 10px; border-bottom:1px solid var(--linha); vertical-align:middle; }
.tabela-colaboradores td>small,.tabela-colaboradores td div>small { display:block; color:var(--cinza); margin-top:3px; }
.colab-identidade { display:flex; gap:9px; align-items:center; min-width:190px; }.colab-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#1463d4;color:#fff;display:grid;place-items:center;font-weight:700}
.status { display:inline-block; border-radius:5px; padding:3px 7px; font-weight:600; }.status-concluido{background:#e4f6eb;color:#16834b}.status-andamento{background:#fff0e3;color:#c65c08}.status-nao_iniciado{background:#eee9ff;color:#6231b5}
.texto-verde{color:#16834b}.texto-erro{color:var(--erro)}.texto-cinza{color:var(--cinza)}
.progresso-mini { width:96px; height:5px; background:#dfe6ef; border-radius:9px; margin-top:5px; overflow:hidden; }.progresso-mini span{display:block;height:100%;background:#159353;border-radius:9px}
.acoes-colaborador { display:flex; gap:7px; }.acoes-colaborador form{margin:0}.acao-icone{width:32px;height:32px;border-radius:7px;background:#fff;cursor:pointer;font-weight:700}.acao-icone.azul{border:1px solid #79aaf1;color:#1463d4}.acao-icone.vermelho{border:1px solid #f4aaa5;color:#d7372d}.acao-icone.verde{border:1px solid #85d4a8;color:#16834b}
.senha-gerada{margin-top:7px;font-family:monospace;font-size:17px}.lista-rodape{padding-top:14px;color:var(--cinza);font-size:12px}.sem-resultados{text-align:center;color:var(--cinza);padding:28px}

/* ---------- Painel de gestão no formato do dashboard de referência ---------- */
body:has(.painel-cabecalho) .conteudo-area { max-width:none; min-width:0; padding:30px 34px 60px; }
.painel-cabecalho { position:relative; margin:0 4px 22px; }
.painel-cabecalho .etiqueta { padding:0; background:transparent; margin-bottom:7px; }
.painel-cabecalho p { padding-right:230px; }
.painel-stats { grid-template-columns:repeat(5,minmax(145px,1fr)) !important; gap:14px; margin:0 0 22px; }
.painel-stats .stat { min-height:104px; background:#fff; padding:18px; display:flex; align-items:center; gap:14px; text-align:left; box-shadow:var(--sombra); }
.painel-stats .stat .valor { font-size:28px; line-height:1; }
.painel-stats .stat .desc { margin-top:7px; }
.painel-stat-icone { width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center; font-size:23px; font-weight:700; }
.painel-stat-icone.azul{background:#e5efff;color:#1463d4}.painel-stat-icone.verde{background:#e4f6eb;color:#16934f}.painel-stat-icone.laranja{background:#fff0e3;color:#f06a17}.painel-stat-icone.roxo{background:#f0e8ff;color:#6730d7}.painel-stat-icone.neutro{background:#f1f5f9;color:#48617e}
.admin-grid-principal { display:grid; grid-template-columns:minmax(430px,.9fr) minmax(620px,1.4fr); gap:18px; align-items:stretch; }
.admin-grid-inferior { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; align-items:start; }
.admin-grid-principal>.cartao,.admin-grid-inferior>.cartao { min-width:0; margin-bottom:20px; padding:22px; overflow:auto; }
#cadastrar-colaborador>h2::before { content:'♙'; color:#1463d4; margin-right:10px; }
#cadastrar-colaborador form>div { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px 12px !important; }
#cadastrar-colaborador .campo { margin-bottom:4px; }
#cadastrar-colaborador .campo label { font-size:11px; }
#cadastrar-colaborador .campo input,#cadastrar-colaborador .campo select { min-width:0; padding:10px 9px; font-size:12px; }
#cadastrar-colaborador input[type=date],#cadastrar-colaborador select { height:43px; border:1px solid #c9d8eb; border-radius:10px; background-color:#fff; color:var(--azul-950); font-weight:600; box-shadow:0 1px 2px rgba(20,73,139,.04); }
#cadastrar-colaborador input[type=date] { padding:9px 12px; color-scheme:light; }
#cadastrar-colaborador input[type=date]::-webkit-calendar-picker-indicator { cursor:pointer; padding:6px; border-radius:6px; background-color:#eaf2ff; }
#cadastrar-colaborador select { appearance:none; padding:9px 38px 9px 12px; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#1b5ea6 50%),linear-gradient(135deg,#1b5ea6 50%,transparent 50%); background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat; }
#cadastrar-colaborador input:focus,#cadastrar-colaborador select:focus { outline:none; border-color:var(--azul-500); box-shadow:0 0 0 3px rgba(45,125,210,.14); }
.modal-senha-caixa { max-width:440px; }
.modal-sucesso-icone { width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#e4f6eb;color:#16834b;font-size:30px;font-weight:800; }
.credencial-provisoria { text-align:left;background:#f4f8fd;border:1px solid var(--linha);border-radius:12px;padding:14px;margin:4px 0 13px; }
.credencial-provisoria>span { display:block;color:var(--cinza);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin:3px 0; }
.credencial-provisoria>strong { display:block;color:var(--azul-950);margin-bottom:10px; }
.senha-copiar-linha { display:flex;align-items:center;gap:8px; }.senha-copiar-linha code{flex:1;background:#fff;border:1px dashed #8baed7;border-radius:8px;padding:10px 12px;font-size:20px;font-weight:800;letter-spacing:2px;color:var(--azul-950);text-align:center}.senha-copiar-linha button{border:1px solid var(--azul-500);border-radius:8px;background:#fff;color:var(--azul-700);padding:10px 12px;cursor:pointer;font-weight:700}.senha-copiar-linha button.copiado{background:var(--verde-100);border-color:var(--verde-ok);color:var(--verde-ok)}
.aviso-primeiro-acesso { color:var(--cinza);font-size:12px;margin:0 0 16px; }
.modal-duplicado{animation:duplicado-fundo .2s ease}.modal-duplicado-caixa{max-width:470px;animation:duplicado-entra .42s cubic-bezier(.2,.85,.28,1.2)}.duplicado-icone{width:62px;height:62px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#fff1e8;box-shadow:0 0 0 8px rgba(240,106,23,.08)}.duplicado-icone span{font-family:var(--fonte-display);font-size:31px;font-weight:800;color:#e55d0c;animation:duplicado-pulso 1.4s ease infinite}.duplicado-etiqueta{display:inline-block;margin:5px 0 10px;padding:3px 10px;border-radius:99px;background:#fff1e8;color:#c54e08;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.modal-duplicado-caixa>p{margin-bottom:16px}.duplicado-pessoa{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:11px;text-align:left;padding:14px;background:#f6f9fd;border:1px solid var(--linha);border-radius:12px}.duplicado-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--azul-700),var(--ciano));color:#fff;font-weight:800}.duplicado-pessoa small,.duplicado-pessoa strong,.duplicado-pessoa div>span{display:block}.duplicado-pessoa small{color:var(--cinza);font-size:10px}.duplicado-pessoa strong{color:var(--azul-950);font-size:13px}.duplicado-pessoa div>span{color:var(--cinza);font-size:11px}.duplicado-status{font-size:11px;border-radius:99px;padding:4px 8px;white-space:nowrap}.duplicado-status.ativa{background:var(--verde-100);color:var(--verde-ok)}.duplicado-status.inativa{background:var(--erro-100);color:var(--erro)}.duplicado-orientacao{margin:12px 0 17px;padding:10px 12px;border-left:3px solid var(--azul-500);background:#f3f7fc;text-align:left;color:#53677d;font-size:11px;border-radius:0 8px 8px 0}@keyframes duplicado-fundo{from{opacity:0}to{opacity:1}}@keyframes duplicado-entra{from{opacity:0;transform:translateY(28px) scale(.9)}to{opacity:1;transform:none}}@keyframes duplicado-pulso{50%{transform:scale(1.18)}}
.modal-edicao-caixa{position:relative;max-width:500px;text-align:left;animation:edicao-entra .34s cubic-bezier(.2,.85,.28,1.15)}.modal-edicao-caixa h2,.modal-edicao-caixa>p{text-align:center}.modal-edicao-icone{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#e7f1fe;color:var(--azul-700);font-size:25px;font-weight:800}.modal-edicao-x{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--cinza);font-size:25px;cursor:pointer}.modal-edicao-caixa form{display:grid;gap:12px}.modal-edicao-caixa label{display:grid;gap:5px;color:var(--azul-950);font-size:12px;font-weight:700}.modal-edicao-caixa input{width:100%;height:42px;border:1px solid var(--linha);border-radius:9px;padding:9px 11px;font:inherit}.modal-edicao-caixa input:focus{outline:none;border-color:var(--azul-500);box-shadow:0 0 0 3px rgba(45,125,210,.13)}.modal-edicao-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:5px}.modal-edicao-acoes .botao{margin:0}.modal-atualizado .modal-caixa{max-width:430px;animation:atualizado-entra .44s cubic-bezier(.2,.9,.25,1.2)}.modal-atualizado .modal-sucesso-icone{animation:atualizado-check .55s ease}.atualizado-etiqueta{display:inline-block;margin-bottom:9px;padding:4px 10px;border-radius:99px;background:var(--verde-100);color:var(--verde-ok);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}@keyframes edicao-entra{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}@keyframes atualizado-entra{from{opacity:0;transform:translateY(26px) scale(.88)}to{opacity:1;transform:none}}@keyframes atualizado-check{0%{transform:scale(.35) rotate(-20deg)}65%{transform:scale(1.15) rotate(4deg)}100%{transform:none}}
.modal-confirmacao-acao{z-index:1250;background:rgba(8,30,58,.68);backdrop-filter:blur(4px);animation:confirmacao-fundo .2s ease}.confirmacao-acao-caixa{max-width:470px;padding:30px;animation:confirmacao-entra .4s cubic-bezier(.2,.88,.28,1.18)}.confirmacao-acao-icone{width:64px;height:64px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;background:#e8f2ff;color:var(--azul-700);box-shadow:0 0 0 9px rgba(45,125,210,.09);font-size:30px;font-weight:800;animation:confirmacao-icone .55s ease}.confirmacao-acao-etiqueta{display:inline-block;margin:4px 0 10px;padding:4px 11px;border-radius:99px;background:#e8f2ff;color:var(--azul-700);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.confirmacao-acao-caixa h2{font-size:22px;margin-bottom:8px}.confirmacao-acao-caixa>p{margin-bottom:14px}.confirmacao-acao-alerta{padding:11px 13px;margin:0 0 19px;border-radius:9px;background:#f3f7fc;border-left:3px solid var(--azul-500);color:#53677d;text-align:left;font-size:12px;line-height:1.45}.confirmacao-acao-botoes{display:grid;grid-template-columns:1fr 1.45fr;gap:10px}.confirmacao-acao-botoes .botao{margin:0}.modal-confirmacao-acao[data-tipo="perigo"] .confirmacao-acao-icone{background:#ffeded;color:var(--erro);box-shadow:0 0 0 9px rgba(217,67,58,.08)}.modal-confirmacao-acao[data-tipo="perigo"] .confirmacao-acao-etiqueta{background:#ffeded;color:var(--erro)}.modal-confirmacao-acao[data-tipo="perigo"] .confirmacao-acao-alerta{border-left-color:var(--erro)}.modal-confirmacao-acao[data-tipo="perigo"] #aceitar-confirmacao-acao{background:var(--erro);border-color:var(--erro)}.modal-confirmacao-acao[data-tipo="reativar"] .confirmacao-acao-icone{background:var(--verde-100);color:var(--verde-ok);box-shadow:0 0 0 9px rgba(22,131,75,.08)}.modal-confirmacao-acao[data-tipo="reativar"] .confirmacao-acao-etiqueta{background:var(--verde-100);color:var(--verde-ok)}@keyframes confirmacao-fundo{from{opacity:0}to{opacity:1}}@keyframes confirmacao-entra{from{opacity:0;transform:translateY(30px) scale(.88)}to{opacity:1;transform:none}}@keyframes confirmacao-icone{0%{transform:scale(.35) rotate(-25deg)}70%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}@media(max-width:520px){.confirmacao-acao-botoes{grid-template-columns:1fr}.confirmacao-acao-caixa{padding:25px 20px}}
.admin-grid-principal .area-impressao .tabela-did,.admin-grid-inferior .tabela-did { font-size:11px; min-width:680px; }
.admin-grid-principal .tabela-did th,.admin-grid-principal .tabela-did td,.admin-grid-inferior .tabela-did th,.admin-grid-inferior .tabela-did td { padding:8px 7px; }
.admin-grid-principal .botao,.admin-grid-inferior .botao { white-space:nowrap; }
.tabela-busca { max-width:310px; margin:0 0 12px; }.tabela-busca label{display:block;font-size:11px;font-weight:700;color:var(--azul-950);margin-bottom:5px}.tabela-busca-campo{position:relative}.tabela-busca-campo span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--azul-700);font-size:18px}.tabela-busca-campo input{width:100%;height:39px;border:1px solid var(--linha);border-radius:9px;padding:8px 11px 8px 34px;font:inherit;font-size:12px}.tabela-busca-campo input:focus{outline:none;border-color:var(--azul-500);box-shadow:0 0 0 3px rgba(45,125,210,.12)}
.tabela-paginacao{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:var(--cinza);font-size:11px}.tabela-paginacao>div{display:flex;gap:5px;align-items:center}.tabela-paginacao #situacao-paginas{display:flex;gap:5px}.tabela-paginacao button{min-width:30px;height:30px;border:1px solid var(--linha);border-radius:7px;background:#fff;color:var(--azul-700);cursor:pointer;font-weight:700}.tabela-paginacao button.ativo{background:var(--azul-700);border-color:var(--azul-700);color:#fff}.tabela-paginacao button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:1350px){.painel-stats{grid-template-columns:repeat(3,1fr)!important}.admin-grid-principal{grid-template-columns:1fr}.admin-grid-inferior{grid-template-columns:1fr}}
@media(max-width:850px){.painel-stats{grid-template-columns:repeat(2,1fr)!important}#cadastrar-colaborador form>div{grid-template-columns:repeat(2,1fr)!important}.painel-cabecalho p{padding-right:0}.painel-cabecalho p::after{position:static;display:block;margin-top:5px}}
@media(max-width:520px){.painel-stats{grid-template-columns:1fr!important}#cadastrar-colaborador form>div{grid-template-columns:1fr!important}}
@media(max-width:1100px){.gestao-metricas{grid-template-columns:repeat(2,1fr)}.gestao-filtros{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.gestao-cabecalho{align-items:flex-start;flex-direction:column}.gestao-metricas{grid-template-columns:1fr}.gestao-filtros{grid-template-columns:1fr}.conteudo-area{padding:24px 16px}.lateral{width:210px;flex-basis:210px}}

/* ================================================================
   v5 — CERTIFICADO redesenhado (diploma)
   ================================================================ */
.cert2 {
  max-width: 980px;
  margin: 0 auto 26px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,46,87,.16);
  position: relative;
}
.cert2-moldura {
  border: 4px solid var(--azul-950);
  padding: 8px;
}
.cert2-filete {
  border: 1.5px solid var(--ambar, #b57f2a);
  padding: 44px 56px 36px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%,   rgba(41,171,226,.06), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(41,171,226,.06), transparent 34%),
    #fff;
}
/* Cantos ornamentados */
.cert2-canto {
  position: absolute; width: 46px; height: 46px;
  border-color: var(--ambar, #b57f2a); border-style: solid;
}
.cert2-canto.c1 { top: 10px; left: 10px;  border-width: 3px 0 0 3px; }
.cert2-canto.c2 { top: 10px; right: 10px; border-width: 3px 3px 0 0; }
.cert2-canto.c3 { bottom: 10px; left: 10px;  border-width: 0 0 3px 3px; }
.cert2-canto.c4 { bottom: 10px; right: 10px; border-width: 0 3px 3px 0; }

/* Marca d'água central */
.cert2-marca {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .045; pointer-events: none;
}
.cert2-marca svg { width: 480px; height: 480px; }

/* Cabeçalho: logos proporcionais + título central */
.cert2-cab {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
  position: relative;
}
.cert2-logo {
  height: 88px; display: flex; align-items: center;
}
.cert2-logo.esq { justify-content: flex-start; }
.cert2-logo.dir { justify-content: flex-end; }
.cert2-logo img { max-height: 88px; max-width: 190px; object-fit: contain; }

.cert2-tit { text-align: center; }
.cert2-programa {
  font-family: var(--fonte-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--azul-700);
  margin: 0 0 6px;
}
.cert2-titulo {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 46px; font-weight: 800;
  color: var(--azul-950);
  letter-spacing: .08em;
  margin: 0;
  line-height: 1.05;
}
.cert2-sub {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 17px; color: var(--ambar, #b57f2a);
  margin: 4px 0 0;
}
.cert2-divisor {
  width: 240px; height: 0; margin: 18px auto 22px;
  border-top: 1.5px solid var(--ambar, #b57f2a);
  position: relative;
}
.cert2-divisor::after {
  content: "◆"; position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%);
  color: var(--ambar, #b57f2a); font-size: 13px; background: #fff; padding: 0 10px;
}

/* Corpo */
.cert2-corpo { text-align: center; position: relative; }
.cert2-texto { font-size: 16px; color: var(--grafite); margin: 0 auto 4px; max-width: 700px; }
.cert2-nome {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 42px; color: var(--azul-800);
  margin: 10px auto 2px;
  line-height: 1.15;
}
.cert2-cpf { font-size: 13.5px; color: var(--cinza); margin: 0 0 14px; }
.cert2-curso {
  font-family: var(--fonte-display);
  font-size: 19px; font-weight: 700; color: var(--azul-950);
  max-width: 720px; margin: 0 auto;
}
.cert2-eixos {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 4px;
}
.cert2-eixos span {
  border: 1.5px solid var(--ciano);
  color: var(--azul-700);
  border-radius: 99px; padding: 5px 16px;
  font-family: var(--fonte-display); font-weight: 600; font-size: 13px;
  background: rgba(41,171,226,.07);
}
.cert2-detalhes { font-size: 14px; color: var(--cinza); margin: 14px 0 0; }

/* Rodapé: assinatura, selo, QR */
.cert2-rodape {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  margin-top: 34px;
  position: relative;
}
.cert2-assina { text-align: center; }
.cert2-assina .linha {
  width: 210px; margin: 0 auto 6px;
  border-bottom: 1.5px solid var(--grafite);
}
.cert2-assina .quem { font-family: var(--fonte-display); font-weight: 700; font-size: 13.5px; color: var(--azul-950); }
.cert2-assina .cargo { font-size: 12px; color: var(--cinza); }

.cert2-selo {
  width: 122px; height: 122px; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #d9a94e, var(--ambar, #b57f2a) 62%, #8f6320);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 16px; box-sizing: border-box;
  text-align: center; line-height: 1.25;
  font-family: var(--fonte-display); font-weight: 700;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(143,99,32,.35);
  position: relative;
}
.cert2-selo::before {
  content: ""; position: absolute; inset: 8px;
  border: 1.5px dashed rgba(255,255,255,.75); border-radius: 50%;
}
.cert2-selo b { font-size: 24px; letter-spacing: 0; line-height: 1; margin-bottom: 2px; }
.cert2-selo small { font-size: 8.5px; letter-spacing: .08em; opacity: .95; white-space: nowrap; }

.cert2-qr { text-align: center; }
.cert2-qr .qr {
  display: inline-block; padding: 7px; background: #fff;
  border: 1.5px solid var(--linha); border-radius: 10px;
}
.cert2-cod {
  font-family: "Courier New", monospace;
  font-size: 11.5px; color: var(--cinza); margin-top: 6px;
}

@media print {
  .cert2 { box-shadow: none; margin: 0; max-width: none; }
}
@media (max-width: 760px) {
  .cert2-filete { padding: 26px 16px; }
  .cert2-cab, .cert2-rodape { grid-template-columns: 1fr; justify-items: center; }
  .cert2-logo.esq, .cert2-logo.dir { justify-content: center; }
  .cert2-titulo { font-size: 30px; }
  .cert2-nome { font-size: 28px; }
}

/* Gestão: criação de usuários */
.modal-editar[hidden]{display:none}.modal-editar .modal-conteudo{max-width:520px;text-align:left}.modal-editar .modal-check{background:#1768d3;margin-bottom:12px}.modal-editar h2,.modal-editar .modal-conteudo>p{text-align:center}.modal-editar .modal-conteudo>p{color:#61758b;font-size:12px}.editar-campos{display:grid;grid-template-columns:1fr 1.5fr;gap:13px;margin:20px 0}.editar-campos label{font-size:11px;font-weight:700;color:var(--azul-950)}.editar-campos label:last-child{grid-column:1/-1}.editar-campos input{display:block;width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--linha);border-radius:8px;padding:11px;font:inherit}.acao-usuario.editar{border:1px solid #9aafe0;color:#5d65ae}
.modal-cpf-duplicado .modal-check{background:#ee8b18}.modal-cpf-duplicado .modal-conteudo>p{font-size:14px;line-height:1.7;color:#344a62;background:#fff7e9;border:1px solid #f5d49f;border-radius:9px;padding:14px;margin:12px 0 22px}.modal-cpf-duplicado .modal-conteudo>.botao{background:#1768d3;border-color:#1768d3}
.modal-status-sucesso .modal-check{background:#19a45b}.modal-status-sucesso .modal-conteudo>p{font-size:13px;line-height:1.6;color:#53677d;margin:10px 0 22px}.modal-status-sucesso .modal-conteudo>.botao{background:#168f50;border-color:#168f50}
.modal-confirmacao[hidden]{display:none}.modal-confirmacao .modal-check{background:#1768d3}.modal-confirmacao .modal-conteudo{max-width:420px}.modal-confirmacao .modal-conteudo p{font-size:13px;line-height:1.6;color:#53677d;margin:8px 0 22px}.confirmar-acoes{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.confirmar-acoes .botao{margin:0;width:100%}.confirmar-acoes .botao.perigo{background:#d9433a;border-color:#d9433a}
.campo-email{grid-column:1/-1}.modal-senha{animation:usuarios-fundo .22s ease-out}.modal-senha .modal-conteudo{animation:usuarios-popup .38s cubic-bezier(.2,.85,.32,1.25)}.modal-erro .modal-check{background:#d9433a}.modal-erro .modal-conteudo>.botao{background:#d9433a;border-color:#d9433a}@keyframes usuarios-fundo{from{opacity:0}to{opacity:1}}@keyframes usuarios-popup{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.usuarios-lista-cab{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px}.usuarios-lista-cab h2{margin-bottom:4px}.usuarios-lista-cab small{color:var(--cinza)}.usuarios-busca{display:flex;gap:8px;align-items:center}.usuarios-busca input{width:300px;min-height:40px;border:1px solid var(--linha);border-radius:8px;padding:9px 12px;font:inherit}.usuarios-busca .botao{min-height:40px}.usuario-acoes{display:flex;gap:7px}.usuario-acoes form{margin:0}.acao-usuario{width:31px;height:31px;border-radius:7px;background:#fff;cursor:pointer;font-weight:700}.acao-usuario.senha{border:1px solid #86aff0;color:#1463d4}.acao-usuario.inativar{border:1px solid #efaaa5;color:#cf382f}.acao-usuario.reativar{border:1px solid #8bd4a9;color:#16834b}.ativo-tag.inativo{background:#fdebea;color:#c7372e}.usuarios-paginacao{display:flex;justify-content:space-between;align-items:center;padding-top:16px;color:var(--cinza);font-size:11px}.usuarios-paginacao nav{display:flex;gap:5px}.usuarios-paginacao a{display:grid;place-items:center;min-width:31px;height:31px;border:1px solid var(--linha);border-radius:6px;color:#1463d4;text-decoration:none}.usuarios-paginacao a.ativo{background:#1463d4;color:#fff;border-color:#1463d4}.usuarios-vazio{text-align:center;color:var(--cinza);padding:28px!important}@media(max-width:760px){.usuarios-lista-cab{align-items:stretch;flex-direction:column}.usuarios-busca{flex-wrap:wrap}.usuarios-busca input{width:100%}.usuarios-paginacao{gap:12px;align-items:flex-start;flex-direction:column}}
body:has(.usuarios-pagina) .conteudo-area{max-width:none;min-width:0;padding:28px 32px 60px;background:#f8faff}.usuarios-pagina{max-width:1440px;margin:auto}.usuarios-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.usuarios-cab span{font-size:10px;color:#1463d4;font-weight:700}.usuarios-cab h1{font-size:26px;margin:7px 0 4px;color:var(--azul-950)}.usuarios-cab p{margin:0;color:var(--cinza);font-size:13px}.usuarios-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:18px}.usuario-form,.permissoes,.usuarios-recentes{padding:20px;border-radius:10px}.usuario-form h2,.permissoes h2,.usuarios-recentes h2{font-size:14px;color:var(--azul-950);margin:0 0 20px}.usuario-campos{display:grid;grid-template-columns:1fr 2fr;gap:16px 14px}.usuario-campos label,.usuario-form legend{font-size:11px;font-weight:700;color:var(--azul-950)}.usuario-campos input{display:block;width:100%;margin-top:7px;border:1px solid var(--linha);border-radius:7px;padding:11px;box-sizing:border-box;font:inherit}.usuario-form fieldset{border:0;padding:0;margin:20px 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.usuario-form legend{margin-bottom:8px}.perfil-card{display:flex;border:1px solid var(--linha);border-radius:8px;padding:12px;gap:9px;cursor:pointer}.perfil-card:has(input:checked){border-color:#2475df;background:#f4f8ff}.perfil-card span b,.perfil-card span small,.conta-ativa span b,.conta-ativa span small{display:block;font-size:11px}.perfil-card small,.conta-ativa small{font-weight:400;color:var(--cinza);margin-top:3px}.conta-ativa{display:flex;gap:10px;align-items:center;margin:12px 0 22px}.form-acoes{display:flex;gap:12px}.form-acoes .botao:last-child{flex:1}.perm{padding:16px;border-radius:8px;margin-bottom:10px;font-size:11px}.perm p{margin:8px 0 0}.perm.colaborador{background:#f1f6ff;color:#2664b4}.perm.gestor{background:#edfaf2;color:#278657}.info{border-top:1px solid var(--linha);padding-top:18px;margin-top:18px;font-size:11px;color:#53677d}.usuarios-recentes{margin-top:18px}.usuarios-recentes table{width:100%;border-collapse:collapse;font-size:11px}.usuarios-recentes th{background:#f3f7fc;text-align:left;padding:10px}.usuarios-recentes td{padding:10px;border-bottom:1px solid var(--linha)}.mini-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1463d4;color:#fff;margin-right:8px;font-size:9px}.perfil-tag,.ativo-tag{padding:3px 7px;border-radius:4px;background:#e8f1ff;color:#1463d4}.perfil-tag.gestor,.ativo-tag{background:#e7f7ed;color:#16834b}.modal-senha{position:fixed;inset:0;background:rgba(15,31,52,.28);display:grid;place-items:center;z-index:1000;padding:20px}.modal-conteudo{position:relative;width:min(390px,100%);background:#fff;border-radius:12px;padding:28px;text-align:center;box-shadow:0 24px 70px rgba(12,42,82,.25)}.modal-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:22px;color:#6b7d91}.modal-check{display:grid;place-items:center;margin:auto;width:46px;height:46px;border-radius:50%;background:#18ad5a;color:#fff;font-size:25px}.modal-conteudo h2{font-size:15px;color:var(--azul-950);margin:17px 0 7px}.senha-box{background:#f4f8ff;border:1px solid #dbe8fb;border-radius:8px;padding:12px;margin:18px 0;text-align:left;position:relative}.senha-box small{display:block}.senha-box strong{display:block;color:#1463d4;font-size:21px;text-align:center}.senha-box button{position:absolute;right:10px;bottom:12px}.modal-conteudo>.botao{display:block;width:100%;margin-top:20px}@media(max-width:900px){.usuarios-grid{grid-template-columns:1fr}.usuario-campos{grid-template-columns:1fr}.usuarios-cab{align-items:flex-start;gap:15px;flex-direction:column}}