/* ============================================================================
   portal-candidato.css — o que o portal acrescenta ao design system Alpino.

   O core (alpino-ui.css + alpino-patterns.css) vem do MRIT SEM ALTERAÇÃO.
   Tudo que é específico do Portal do Candidato mora aqui, falando o mesmo
   idioma: mesmos tokens, mesmos raios, mesmos tons.

   Seção 4.9 do PROMPT_PORTAL_CANDIDATO.md.
   ========================================================================== */

/* Casca */
.portal-shell{ max-width:980px; margin:0 auto; padding:14px 14px 40px; }
@media (max-width:575.98px){ .portal-shell{ padding:10px 10px 32px; } }

/* Ícone tonal de cabeçalho (o core usa .ti-ico no HTML mas não o estiliza) */
.ti-ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(9,92,244,.16),rgba(9,92,244,.06));
  color:#095cf4; flex:0 0 34px; }
.ti-ico.tone-green{ background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.06)); color:#15803d; }
.ti-ico.tone-amber{ background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(245,158,11,.07)); color:#b45309; }
.ti-ico.tone-red  { background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(239,68,68,.07));  color:#b91c1c; }
.ti-ico.tone-cyan { background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(14,165,233,.07)); color:#0369a1; }
.ti-ico.tone-purple{background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(168,85,247,.07)); color:#6b21a8; }

/* Cabeçalho de sub-seção dentro de um .panel */
.section-title{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.section-title .t{ font-weight:700; font-size:.95rem; line-height:1.2; }
.section-title .s{ font-size:.74rem; color:var(--bs-secondary-color); line-height:1.2; }

/* .entity-card usada como link (lista "o que falta") — o core não zera o <a> */
a.entity-card{ text-decoration:none; color:inherit; }
a.entity-card:hover{ color:inherit; }

/* Barra de progresso do candidato */
.prog-wide{ height:10px; border-radius:99px; background:rgba(15,23,42,.10); overflow:hidden; }
body.dark-mode .prog-wide{ background:rgba(255,255,255,.14); }
/* width:0 por padrão de propósito: a largura real chega num <style nonce>
   (a CSP não deixa passar atributo style=). Se um dia ela não chegar, a
   barra aparece vazia — errar para menos é melhor do que anunciar 100%. */
.prog-wide .bar{ display:block; width:0; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#22c55e,#15803d);
  transition:width .35s cubic-bezier(.2,.8,.2,1); }

/* Trilho de etapas (stepper da ficha) */
.stepper{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; margin-bottom:12px; }
.step{ flex:1 1 0; min-width:96px; border-radius:11px; padding:8px 10px; text-decoration:none;
  color:inherit; background:rgba(15,23,42,.03); border:1px solid rgba(15,23,42,.07);
  position:relative; overflow:hidden; }
body.dark-mode .step{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
.step::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--st,#cbd5e1); }
/* Verde/vermelho só depois do "Continuar": o servidor marca o passo como
   conferido e o trilho passa a valer como resumo do que falta. */
.step.is-ok{ --st:#22c55e; background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.28); }
.step.is-erro{ --st:#ef4444; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.30); }
body.dark-mode .step.is-ok{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.32); }
body.dark-mode .step.is-erro{ background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.34); }
.step.is-atual{ --st:#095cf4; box-shadow:0 6px 16px rgba(9,92,244,.16); }
.step.is-ok.is-atual{ box-shadow:0 6px 16px rgba(34,197,94,.20); }
.step.is-erro.is-atual{ box-shadow:0 6px 16px rgba(239,68,68,.20); }
.step .n{ font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bs-secondary-color); display:flex; align-items:center; gap:4px; }
.step .st-ico{ font-size:.8rem; line-height:1; }
.step .st-ico.ok{ color:#16a34a; }
.step .st-ico.erro{ color:#dc2626; }
body.dark-mode .step .st-ico.ok{ color:#4ade80; }
body.dark-mode .step .st-ico.erro{ color:#f87171; }
.step .t{ font-size:.84rem; font-weight:600; margin-top:2px; line-height:1.2; }

/* Cartão de item do checklist — é a peça central do portal */
.doc-item{ position:relative; border-radius:14px; padding:12px 14px; overflow:hidden;
  background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:var(--ti-shadow); }
body.dark-mode .doc-item{ background:var(--ti-dark-2,#1f2430); border-color:rgba(255,255,255,.09); }
.doc-item::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--dt,#cbd5e1); }
.doc-item.is-pendente { --dt:#94a3b8; }
.doc-item.is-analise,
.doc-item.is-em_analise{ --dt:#f59e0b; }
.doc-item.is-aprovado { --dt:#22c55e; }
.doc-item.is-devolvido{ --dt:#ef4444; background:rgba(239,68,68,.05); }
.doc-item.is-opcional { --dt:#e2e8f0; }
.doc-head{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.doc-ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 38px;
  background:rgba(9,92,244,.10); color:#095cf4; font-size:1.05rem; }
.doc-item.is-aprovado  .doc-ico{ background:rgba(34,197,94,.14);  color:#15803d; }
.doc-item.is-devolvido .doc-ico{ background:rgba(239,68,68,.14);  color:#b91c1c; }
.doc-item.is-analise   .doc-ico,
.doc-item.is-em_analise .doc-ico{ background:rgba(245,158,11,.16); color:#b45309; }
.doc-nome{ font-weight:700; font-size:.92rem; line-height:1.2; }
.doc-orient{ font-size:.78rem; color:var(--bs-secondary-color); margin-top:3px; line-height:1.45; }
.doc-motivo{ margin-top:8px; padding:9px 11px; border-radius:10px; font-size:.8rem; line-height:1.5;
  background:rgba(239,68,68,.08); color:#991b1b; }
body.dark-mode .doc-motivo{ background:rgba(239,68,68,.16); color:#fecaca; }

/* Arquivo já enviado dentro do item */
.doc-arq{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px;
  background:rgba(15,23,42,.03); border:1px solid rgba(15,23,42,.06); min-width:0; margin-top:8px; }
body.dark-mode .doc-arq{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.doc-arq .nm{ font-size:.82rem; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.doc-arq .mt{ font-size:.72rem; color:var(--bs-secondary-color); }

/* Área de envio (arrastar no desktop, botões grandes no mobile) */
.up-drop{ margin-top:9px; border:1.5px dashed rgba(15,23,42,.20); border-radius:12px;
  padding:14px; text-align:center; cursor:pointer; background:rgba(15,23,42,.02);
  transition:border-color .15s, background .15s; }
body.dark-mode .up-drop{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); }
.up-drop.is-over{ border-color:#095cf4; background:rgba(9,92,244,.07); }
.up-drop .t{ font-size:.85rem; font-weight:600; }
.up-drop .s{ font-size:.74rem; color:var(--bs-secondary-color); }
.up-acoes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
@media (min-width:768px){ .up-acoes{ display:none; } }   /* desktop = arrastar */
@media (max-width:767.98px){ .up-drop{ display:none; } } /* mobile = botões    */
.up-bar{ height:6px; border-radius:99px; background:rgba(9,92,244,.14); overflow:hidden; margin-top:8px; }
.up-bar .bar{ display:block; width:0; height:100%;
  background:linear-gradient(90deg,#095cf4,#3b82f6);
  transition:width .2s linear; }

/* Pré-visualização antes de enviar */
.up-prev{ display:flex; gap:10px; align-items:center; margin-top:9px; }
.up-prev img{ width:84px; height:84px; object-fit:cover; border-radius:11px; flex:0 0 84px;
  border:1px solid rgba(15,23,42,.10); }
/* Máscara oval só na foto do crachá */
.up-prev.is-cracha img{ border-radius:50% / 42%; }

/* Cartão de login */
.login-wrap{ min-height:100svh; display:grid; place-items:center; padding:20px 14px; }
.login-card{ position:relative; z-index:1; width:min(440px,100%); border-radius:18px; padding:22px; background:#fff;
  border:1px solid rgba(15,23,42,.08); box-shadow:0 20px 44px rgba(3,10,40,.14); }
body.dark-mode .login-card{ background:var(--ti-dark-2,#1f2430); border-color:rgba(255,255,255,.10); }
.login-marca{ display:grid; place-items:center; gap:10px; margin-bottom:16px; }
.login-marca img{ height:38px; }

/* Tabs: no celular, só o ícone (o core apenas rola na horizontal) */
@media (max-width:575.98px){
  .alpino-tabs .nav-link .tab-label{ display:none; }
  .alpino-tabs .nav-link{ padding:.4rem .6rem; }
}

/* Fundo premium da tela de login (mesma assinatura do hero) */
.login-bg{ position:relative; isolation:isolate; background-color:#091430; }
/* Foto da fábrica + véu escuro para o cartão manter contraste */
.login-bg::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(112deg, rgba(11,62,158,.34) 0%, rgba(9,20,48,.58) 55%, rgba(5,7,14,.76) 100%),
    url('../img/fundo_alpino.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat; }
.login-bg::before{ content:''; position:fixed; inset:0; pointer-events:none; opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%, #000, transparent);
          mask-image:radial-gradient(90% 70% at 50% 40%, #000, transparent); }

/* Termo */
.termo-texto{ white-space:pre-wrap; font-size:.82rem; line-height:1.7; max-height:340px;
  overflow:auto; padding:12px 14px; border-radius:11px; background:rgba(15,23,42,.035); }
body.dark-mode .termo-texto{ background:rgba(255,255,255,.05); }


/* ============================================================================
   Complementos — peças que a seção 4.9 não previu, no mesmo idioma.
   ========================================================================== */

/* O candidato está no celular: corpo nunca abaixo de 16px, para o iOS não dar
   zoom sozinho ao focar um campo (e para a pessoa conseguir ler). */
@media (max-width:767.98px){
  body{ font-size:16px; }
  .form-control, .form-select{ font-size:16px; }
}

/* Alvo de toque ≥44px nos botões de ação do mobile. */
@media (max-width:767.98px){
  .up-acoes .btn-alpino-cta, .up-acoes .btn{ min-height:46px; }
  .btn-ic.sm{ min-width:40px; min-height:40px; }
}

/* Barra de progresso do cockpit: reserva largura sem estourar em 344px. */
.prog-holder{ min-width:min(220px,100%); flex:1 1 220px; max-width:360px; }

/* Rodapé */
.portal-rodape{ border-top:1px solid rgba(15,23,42,.08); }
body.dark-mode .portal-rodape{ border-top-color:rgba(255,255,255,.10); }

/* As 3 regras da foto do crachá, logo abaixo da orientação. */
.doc-regras{ margin:6px 0 0; padding-left:1.1rem; font-size:.76rem; line-height:1.55;
  color:var(--bs-secondary-color); }

/* Avisos do upload: nitidez baixa, formato torto, erro da API.
   Erro NUNCA sai em alert() — aparece dentro do próprio item. */
.up-aviso{ margin-top:8px; padding:8px 11px; border-radius:10px; line-height:1.5;
  background:rgba(245,158,11,.12); color:#92400e; }
body.dark-mode .up-aviso{ background:rgba(245,158,11,.18); color:#fde68a; }
.up-erro{ margin-top:8px; padding:8px 11px; border-radius:10px; line-height:1.5;
  background:rgba(239,68,68,.10); color:#991b1b; }
body.dark-mode .up-erro{ background:rgba(239,68,68,.18); color:#fecaca; }

/* Switches da ficha e do dependente, com respiro entre eles.
   Só padding VERTICAL: o .form-check do Bootstrap usa padding-left para abrir
   espaço ao input, que tem margin-left negativa. Zerar esse padding (com um
   atalho `padding:6px 0`) joga o switch 12px para fora do card — invisível no
   desktop e vazando a 344px. */
.campo-switch{ padding-top:6px; padding-bottom:6px; }
.campo-switch + .campo-switch{ border-top:1px solid rgba(15,23,42,.06); }
body.dark-mode .campo-switch + .campo-switch{ border-top-color:rgba(255,255,255,.08); }

/* Campo que depende de outro e está escondido pelo JS. */
[data-depende].is-oculto{ display:none !important; }

/* Item recém-aprovado/enviado: o trilho pisca uma vez ao ser repintado.
   Celebrar o progresso, sem confete (seção 6 do prompt). */
@keyframes doc-pulso{
  0%  { box-shadow:0 0 0 0 rgba(34,197,94,.34); }
  70% { box-shadow:0 0 0 12px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.doc-item.is-novo{ animation:doc-pulso .9s ease-out 1; }

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Foco visível em tudo que recebe teclado (contraste AA sobre claro e escuro). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid #095cf4; outline-offset:2px; border-radius:6px;
}
body.dark-mode :where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline-color:#7aa8ff;
}

/* Nada pode vazar do card no mobile (regra 4.11.4). O html/body do core já tem
   overflow-x:hidden, o que RECORTA o vazamento e o esconde do olho — por isso
   o mínimo aqui é explícito. */
.doc-head, .doc-arq, .entity-card .info, .meta-cell{ min-width:0; }
.meta-cell .v{ overflow-wrap:anywhere; }

/* Alertas do Bootstrap no tema escuro.
   O core do Alpino cobre os componentes próprios (panel, pill, entity-card…),
   mas o `.alert` é do Bootstrap e fica com fundo claro sobre a página escura —
   justamente no aviso mais importante do portal, o de documento devolvido. */
body.dark-mode .alert{ border-width:1px; border-style:solid; }
body.dark-mode .alert-info{
  background:rgba(14,165,233,.14); border-color:rgba(14,165,233,.30); color:#bae6fd; }
body.dark-mode .alert-success{
  background:rgba(34,197,94,.14);  border-color:rgba(34,197,94,.30);  color:#bbf7d0; }
body.dark-mode .alert-warning{
  background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.32); color:#fde68a; }
body.dark-mode .alert-danger{
  background:rgba(239,68,68,.15);  border-color:rgba(239,68,68,.32);  color:#fecaca; }
body.dark-mode .alert a{ color:inherit; }