/*
 * DesbravaProvas 20.16 — camada visual global
 *
 * Objetivo: unificar navegação, superfícies, formulários, ações e experiência
 * responsiva sem alterar regras de negócio. Este arquivo é deliberadamente
 * composto por overrides: os módulos antigos continuam funcionando e esta
 * camada fornece a linguagem visual comum.
 */
:root{
  --dp-navy:#102f68;
  --dp-blue:#1d4f91;
  --dp-yellow:#ffc900;
  --dp-ink:#102447;
  --dp-muted:#64748b;
  --dp-line:#dbe4ef;
  --dp-surface:#ffffff;
  --dp-soft:#f5f8fc;
  --dp-radius:18px;
  --dp-shadow:0 12px 32px rgba(16,47,104,.09);
}
html{background:#f3f7fc}
body{background:linear-gradient(180deg,#eef4fb 0,#f7f9fc 260px,#f6f8fb 100%);color:var(--dp-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button,.btn,a{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease}
.card,.hero,.form-card,.setup,.result,.auth{border-color:var(--dp-line);border-radius:var(--dp-radius);box-shadow:var(--dp-shadow)}
.card{background:var(--dp-surface)}
.card:hover{box-shadow:0 16px 38px rgba(16,47,104,.11)}
.hero{border:1px solid var(--dp-line);background:linear-gradient(135deg,#fff,#f6f9fe);padding:clamp(20px,3vw,30px)}
.hero h1{color:var(--dp-ink);letter-spacing:-.025em}
.hero p,.card>p,.section-heading p{color:var(--dp-muted)}
.btn{border-radius:11px;font-weight:800;min-height:40px}
.btn.primary{background:var(--dp-navy);box-shadow:0 7px 16px rgba(16,47,104,.18)}
.btn.primary:hover{background:#0b285b;transform:translateY(-1px);box-shadow:0 10px 20px rgba(16,47,104,.22)}
.btn.secondary{background:#fff;border:1px solid #cbd7e7;color:var(--dp-navy)}
.btn.secondary:hover{background:#f1f6fd;border-color:#9fb3cf;transform:translateY(-1px)}
.btn.link{font-weight:750}
.field>span{font-weight:800;color:#243b63}
.field input,.field select,.field textarea,.inline-form select{border-color:#c9d6e7;border-radius:11px;min-height:44px;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--dp-blue);box-shadow:0 0 0 4px rgba(29,79,145,.10);outline:0}
.field small,.help,.hint{color:var(--dp-muted)}
.tabs,.journey-tabs,.management-tabs{border-bottom-color:var(--dp-line)}
.tabs button,.journey-tabs button,.management-tabs button{font-weight:800}
.metrics article{border:1px solid var(--dp-line);border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(16,47,104,.06)}
.status,.status-pill,.tag{border-radius:999px}
/* Navegação 20.16: grupos curtos e legíveis no desktop. */
.top{background:linear-gradient(135deg,#0e2c62,#1d4f91);box-shadow:0 10px 28px rgba(7,26,56,.20)}
.top-inner{min-height:78px}
.topnav{background:rgba(7,31,73,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.10)}
.nav-main{gap:7px}
.nav-item{min-height:42px;padding:9px 12px;border:1px solid transparent;border-radius:11px}
.nav-item:hover{background:rgba(255,255,255,.11);transform:none}
.nav-item.active{background:var(--dp-yellow);box-shadow:0 6px 15px rgba(0,0,0,.14)}
.nav-group-toggle.active{background:rgba(255,255,255,.14);color:#fff}
.nav-group.open>.nav-group-toggle{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.16)}
.nav-submenu{width:250px;padding:8px;border-radius:15px;box-shadow:0 20px 48px rgba(7,26,56,.22)}
.nav-submenu .nav-item{color:var(--dp-navy);min-height:42px}
.nav-submenu .nav-item:hover{background:#edf4fd;color:#102f68}
.nav-submenu .nav-item.active{background:#fff3b8;color:#102f68}
/* Corrige o corte dos submenus no celular: o menu inteiro rola; o submenu não tem teto artificial. */
@media(max-width:960px){
  .topnav{width:min(360px,90vw);height:100dvh;padding:82px 16px 28px;overflow-y:auto;overscroll-behavior:contain}
  .nav-main{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%}
  .nav-main>.nav-item,.nav-group>.nav-group-toggle{width:100%;min-height:48px}
  .nav-submenu{width:auto;max-height:none!important;overflow:visible;padding:5px 0 2px 12px}
  .nav-group.open>.nav-submenu{max-height:none!important}
  .nav-submenu .nav-item{width:100%;min-height:44px;margin-top:4px;background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}
  .nav-submenu .nav-item.active{background:var(--dp-yellow)!important;color:var(--dp-navy)!important}
  .nav-group-toggle .submenu-arrow{margin-left:auto}
}
@media(max-width:520px){
  .top-inner{min-height:70px;padding:10px 13px}
  .user-class{display:none}
  .brand img{width:43px;height:43px}
  .brand strong{font-size:1rem}
  .brand small{font-size:.68rem}
  .topnav{width:92vw;padding-left:13px;padding-right:13px}
  .wrap{padding-left:13px;padding-right:13px}
  .card,.hero{border-radius:15px}
}
/* Ações e grades: melhor aproveitamento em telas estreitas. */
.button-row{gap:9px}
@media(max-width:650px){
  .button-row{display:grid;grid-template-columns:1fr}
  .button-row .btn{width:100%}
  .metrics{grid-template-columns:1fr 1fr!important}
  .hero{padding:19px}
}
@media(max-width:390px){.metrics{grid-template-columns:1fr!important}}
/* Microinterações discretas para dar sensação de aplicativo sem prejudicar acessibilidade. */
@media(prefers-reduced-motion:no-preference){
  .card,.hero{animation:dp-surface-in .18s ease-out both}
  @keyframes dp-surface-in{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}
}