/* =====================================================================
   Portal de Assinatura Eletrônica — Empresarial Consultoria
   Veste-se com a marca compartilhada por Intranet e Quimera:
   teal/petróleo (#005a5f) + laranja (#ff6201), fonte Inter.
   Tokens espelhados de intranet/public/css/intranet.css.
   ===================================================================== */
:root{
  --azul-900:#00383b; --azul-800:#004247; --azul-700:#005a5f; /* TEAL núcleo */
  --azul-600:#14676b; --azul-500:#287478; --azul-400:#579295;
  --accent:#ff6201; --accent-700:#d35400;

  --bg:#eef4f4; --surface:#fff; --surface-2:#f4f8f8;
  --text:#15211f; --muted:#5f6b6b; --border:#dbe7e6; --border-2:#e8f0ef;

  --ok:#15924f; --ok-bg:#e7f6ee;
  --erro:#c0392b; --erro-bg:#fdecea;

  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(0,56,59,.06),0 8px 24px rgba(0,56,59,.07);
  --shadow-sm:0 1px 2px rgba(0,56,59,.08);
  --maxw:760px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* Garante que o atributo `hidden` sempre esconda — regras de display de classe
   (ex.: .tela-login{display:grid}) senão o sobrescreveriam e a view não some. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{font-size:15px}
body{
  font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:14px; line-height:1.55; min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{color:var(--azul-900); line-height:1.25; margin:0 0 .4em; font-weight:700}
img,svg{max-width:100%; height:auto}

/* ---------- Topbar ---------- */
.topbar{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40}
.topbar-inner{max-width:var(--maxw); margin:0 auto; padding:0 1.2rem; height:64px; display:flex; align-items:center; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand-logo{height:26px; width:auto; display:block}
.brand-sub{font-weight:700; color:var(--azul-900); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding-left:.55rem; border-left:1px solid var(--border); white-space:nowrap}
.link-sair{margin-left:auto}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:.92rem; padding:.62rem 1.1rem;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:.15s ease; background:var(--surface-2); color:var(--text); text-decoration:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}
.btn-primary{background:var(--azul-600); color:#fff; box-shadow:0 2px 8px rgba(0,56,59,.18)}
.btn-primary:hover{background:var(--azul-700); color:#fff}
.btn-outline{background:#fff; border-color:var(--border); color:var(--azul-700)}
.btn-outline:hover{border-color:var(--azul-400)}
.btn-danger{background:#fff; border-color:#f3c6c0; color:var(--erro)}
.btn-danger:hover{background:var(--erro-bg)}
.btn-sm{padding:.4rem .7rem; font-size:.82rem}
.btn-bloco{width:100%}
.btn-link{width:100%; margin-top:.6rem; background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:.88rem; text-decoration:underline}
.btn-link.back{width:auto; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color:var(--azul-700); font-weight:600; margin:0 0 1rem; padding:0}
.btn-link.back:hover{color:var(--azul-900)}

/* ---------- App shell ---------- */
#app{flex:1; width:100%}

/* Cards genéricos (login, sucesso) */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem}

/* ---------- Landing / Login split-screen (padrão da Intranet) ---------- */
.tela-login{min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr}
.login-arte{
  position:relative; color:#fff; padding:3.5rem; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(255,98,1,.22), transparent 60%),
             linear-gradient(135deg, var(--azul-900), var(--azul-700));
}
.login-arte::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  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:40px 40px;
}
.login-arte > *{position:relative; z-index:1}
.arte-marca{font-weight:700; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.92)}
.arte-marca::before{content:""; display:inline-block; width:26px; height:3px; border-radius:3px; background:var(--accent); vertical-align:middle; margin-right:.7rem}
.login-arte h1{color:#fff; font-size:2.1rem; font-weight:800; letter-spacing:-.02em; max-width:16ch; margin:0 0 .6rem}
.login-arte p{color:rgba(255,255,255,.82); max-width:42ch; margin:0}
.login-arte .selo{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:rgba(255,255,255,.78)}
.login-arte .selo i{color:rgba(255,255,255,.85)}

.login-form-wrap{display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--surface)}
.login-card{width:100%; max-width:380px}
.login-card .login-logo{margin-bottom:1.6rem}
.login-card .login-logo img{height:42px; width:auto; display:block}
.login-card h2{font-size:1.5rem; margin:0 0 .3rem}
.sub{color:var(--muted); margin:0 0 1.4rem; font-size:.95rem; line-height:1.5}

/* Atalho de verificação por código na landing */
.home-verif{margin-top:1.4rem}
.home-verif-sep{display:flex; align-items:center; gap:.8rem; margin:1.4rem 0 1rem; color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em}
.home-verif-sep::before,.home-verif-sep::after{content:""; flex:1; height:1px; background:var(--border)}
.dropzone-sm{min-height:118px; padding:1rem}
.dropzone-sm .dz-ic{font-size:1.5rem}
.dropzone-sm .dz-txt{font-size:.85rem}

/* ---------- Campos ---------- */
.campo{margin-bottom:1.05rem}
.campo label{display:block; font-size:.82rem; font-weight:600; color:var(--azul-800); margin-bottom:.35rem}
.input-icon{position:relative}
.input-icon i{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted)}
.input-icon input{padding-left:2.4rem}
input[type=text],input[type=password],input[type=email],input[type=number]{
  width:100%; font:inherit; font-size:.95rem; color:var(--text);
  padding:.68rem .85rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; transition:.15s; outline:none;
}
input:focus{border-color:var(--azul-400); box-shadow:0 0 0 3px rgba(20,103,107,.16)}
#codigo,#codigo-assina{letter-spacing:8px; text-align:center; font-size:1.4rem; font-weight:700}

/* ---------- Conteúdo (lista, doc, sucesso) ---------- */
.conteudo{max-width:var(--maxw); margin:0 auto; padding:1.8rem 1.2rem 3rem; width:100%}

/* Hero saudação */
.hero{
  border-radius:var(--radius); color:#fff; padding:1.15rem 1.8rem; margin-bottom:1.6rem;
  background:radial-gradient(900px 400px at 90% -40%, rgba(255,98,1,.22), transparent 55%),
             linear-gradient(120deg, var(--azul-900), var(--azul-600));
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.hero-txt{min-width:0}
.hero h1{color:#fff; font-size:1.5rem; margin-bottom:.2rem}
.hero p{color:rgba(255,255,255,.85); margin:0}
.hero-ic{font-size:2.2rem; color:rgba(255,255,255,.7); flex:none}

/* Bloco (container padrão do sistema) */
.bloco{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.bloco-head{padding:1rem 1.3rem; border-bottom:1px solid var(--border-2)}
.bloco-head h2{font-size:1.1rem; margin:0}
.bloco-body{padding:1.2rem 1.3rem 1.3rem}

/* Lista de documentos */
.lista{display:flex; flex-direction:column; gap:.7rem}
.doc-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:.9rem 1.1rem; cursor:pointer;
  transition:border .15s, background .15s, transform .12s;
}
.doc-item:hover{border-color:var(--azul-400); background:var(--surface-2); transform:translateY(-1px)}
.doc-item .info{min-width:0}
.doc-item .nome{font-weight:600; color:var(--azul-900); margin:0 0 .2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-item .tags{font-size:.82rem; color:var(--muted)}
.doc-item .seta{color:var(--azul-600); font-size:1.4rem; flex-shrink:0; line-height:1}
.badge{display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.14rem .5rem; border-radius:6px; background:rgba(20,103,107,.12); color:var(--azul-700); margin-right:.5rem}
.vazio{text-align:center; color:var(--muted); padding:2rem 1rem}
.vazio i{color:var(--ok); font-size:1.6rem; display:block; margin-bottom:.5rem}

/* Visualizador de PDF */
.pdf-wrap{border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); margin-bottom:1.2rem}
#doc-pdf{width:100%; height:min(60vh,520px); border:0; display:block}
.acoes{display:flex; flex-direction:column; gap:.6rem}
.otp-box{margin-top:1.2rem; border-top:1px solid var(--border-2); padding-top:1.2rem}
.otp-box form{display:flex; gap:.7rem; flex-wrap:wrap}
.otp-box input{flex:1; min-width:140px}
.otp-box .btn{flex:1; min-width:180px}

/* Sucesso */
.card.ok{text-align:center; max-width:460px; margin:0 auto}
.ok-icon{width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:var(--ok-bg); color:var(--ok); font-size:1.6rem; display:grid; place-items:center}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--azul-900); color:#fff; padding:.8rem 1.15rem; border-radius:var(--radius-sm); font-size:.9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:90%; z-index:50;
}
.toast.erro{background:var(--erro)}
.rodape{text-align:center; color:var(--muted); font-size:.78rem; padding:1.2rem}

/* ---------- Verificação de autenticidade ---------- */
.bloco-head h2 i{color:var(--azul-600); margin-right:.4rem}
.verificar-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.verificar-grid .bloco{margin:0}

/* Área para soltar/selecionar o PDF */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  min-height:150px; padding:1.4rem; border:2px dashed var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--muted); cursor:pointer; transition:.15s;
}
.dropzone:hover,.dropzone:focus{border-color:var(--azul-400); background:#fff; outline:none}
.dropzone.arrastando{border-color:var(--azul-600); background:rgba(20,103,107,.06)}
.dropzone.carregando{opacity:.6; pointer-events:none}
.dropzone .dz-ic{font-size:1.8rem; color:var(--azul-600)}
.dropzone.carregando .dz-ic{animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.35}}
.dropzone .dz-txt{font-size:.9rem}
.dropzone .dz-txt u{color:var(--azul-700)}
.dropzone .dz-nome{color:var(--azul-800); font-weight:600; word-break:break-all}

/* Painel de resultado */
.verif-resultado{margin-top:1.4rem; display:flex; flex-direction:column; gap:1rem}
.verif-banner{display:flex; align-items:flex-start; gap:.8rem; padding:1rem 1.2rem; border-radius:var(--radius); border:1px solid transparent}
.verif-banner i{font-size:1.4rem; margin-top:.1rem; flex:none}
.verif-banner strong{display:block; font-size:1.02rem}
.verif-banner p{margin:.2rem 0 0; font-size:.9rem; line-height:1.45}
.verif-banner.ok{background:var(--ok-bg); border-color:#bfe6cf; color:var(--ok)}
.verif-banner.erro{background:var(--erro-bg); border-color:#f5c6c0; color:var(--erro)}
.verif-banner.ok strong,.verif-banner.erro strong{color:inherit}
.verif-banner p{color:var(--text)}

.verif-doc-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.verif-doc-cab h3{margin:0 0 .2rem; font-size:1.1rem}
.status-badge{display:inline-block; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; white-space:nowrap}
.status-badge.on{background:var(--ok-bg); color:var(--ok)}
.status-badge.warn{background:#fef3d6; color:#8a6d00}
.status-badge.off{background:var(--erro-bg); color:var(--erro)}

.verif-dl{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.45rem .9rem; margin:0; font-size:.9rem}
.verif-dl dt{color:var(--muted)}
.verif-dl dd{margin:0; color:var(--text); word-break:break-word}
.verif-dl dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; color:var(--azul-800)}
.verif-dl dd.cod-doc{font-size:1rem; font-weight:700; letter-spacing:.06em; color:var(--azul-700)}

.verif-sub{margin:1.3rem 0 .6rem; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.verif-sigs{display:flex; flex-direction:column; gap:.5rem}
.verif-sig{display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border:1px solid var(--border-2); border-radius:var(--radius-sm)}
.verif-sig .sig-ava{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; background:linear-gradient(135deg,var(--azul-600),var(--accent))}
.verif-sig .sig-info{min-width:0; flex:1}
.verif-sig .sig-info strong{display:block; color:var(--azul-900); font-size:.92rem}
.verif-sig .sig-info small{color:var(--muted); font-size:.8rem}

/* Etiqueta de assinatura na validação (mesmo padrão do documento: caixa branca/neutra, texto verde) */
.verif-etq{border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:.7rem .9rem; background:#fff}
.etq-papel{font-size:.72rem; font-weight:700; color:var(--azul-700); margin-bottom:.15rem}
.etq-cab{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.etq-nome{color:#1e7a3d; font-size:.95rem; font-weight:700; min-width:0}
.etq-meta{color:#1e7a3d; font-size:.8rem; margin-top:.15rem}
.etq-aut{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.68rem; color:var(--hash,#334); margin-top:.25rem; word-break:break-all}

/* Ver documento assinado */
.verif-acoes{margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--border-2)}
.verif-acoes .btn{width:100%}
.verif-acesso-lbl{display:block; font-size:.85rem; font-weight:600; color:var(--azul-800); margin-bottom:.5rem}
.verif-acesso-row{display:flex; gap:.6rem; flex-wrap:wrap}
.verif-acesso-row input{flex:1; min-width:150px; font:inherit; font-size:.95rem; padding:.6rem .85rem; border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; text-transform:uppercase; letter-spacing:.08em}
.verif-acesso-row input:focus{border-color:var(--azul-400); box-shadow:0 0 0 3px rgba(20,103,107,.16)}
.verif-acesso-row .btn{width:auto; flex:0 0 auto}

/* Login split-screen colapsa em coluna única no mobile (arte some) */
@media (max-width:900px){
  .tela-login{grid-template-columns:1fr; min-height:100vh}
  .login-arte{display:none}
  .login-form-wrap{padding:1.5rem; align-items:flex-start; padding-top:3rem}
  .login-card{max-width:420px; margin:0 auto}
}
@media (max-width:640px){
  .verificar-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .topbar-inner{padding:0 1rem}
  .brand-sub{display:none}
  .conteudo{padding:1.2rem .9rem 2.5rem}
  .card{padding:1.5rem}
  .hero{padding:1rem 1.3rem}
  .hero h1{font-size:1.3rem}
  .verif-dl{grid-template-columns:1fr}
  .verif-dl dt{margin-top:.3rem}
}