/* ---------------------------------------------------------------------------
   Shell do portal PRADUM — cabeçalho, navegação, login e painel administrativo.
   As cores vêm das mesmas variáveis de precificacao.css; este arquivo cuida só
   do que envolve o módulo, para que precificacao.css continue sendo a UI do
   simulador tal como veio do protótipo.
   --------------------------------------------------------------------------- */

:root {
  --pradum: #0b3b86; --pradum2: #0d47a1; --ouro: #f5811a; --ouro-claro: #fdecd9;
  --pradum-claro: #e7eefb; --verde: #1f7a55; --verde-bg: #e7f4ee;
  --vermelho: #b23b3b; --vermelho-bg: #fbeaea;
  --cinza: #5b6b78; --cinza2: #8896a0; --linha: #e3e9ee;
  --fundo: #f5f7fb; --branco: #fff; --texto: #12233f;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--fundo); color: var(--texto); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- cabeçalho ---------- */
.portal-head { background: linear-gradient(135deg, var(--pradum) 0%, #072e6b 100%); color: #fff; border-bottom: 4px solid var(--ouro) }
.portal-head .in { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px }
.portal-head .marca b { font-size: 30px; letter-spacing: 1.2px; font-weight: 800; display: block; line-height: 1 }
.portal-head .marca b .pra { color: #fff } .portal-head .marca b .dum { color: var(--ouro) }
.portal-head .marca b span { display: inline; font-size: inherit; letter-spacing: inherit; text-transform: none }
.portal-head .marca > span { display: block; font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; color: #bcd0ec }
.portal-head a { color: inherit; text-decoration: none }

.portal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.portal-nav a { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #cfe0f5; transition: .15s }
.portal-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff }
.portal-nav a.on { background: rgba(255, 255, 255, .16); color: #fff }

.portal-user { display: flex; align-items: center; gap: 12px; font-size: 12.5px }
.portal-user .quem { text-align: right; line-height: 1.3 }
.portal-user .quem b { display: block; font-size: 13px }
.portal-user .quem span { font-size: 10.5px; color: #a9c2e2 }
.portal-user button { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer }
.portal-user button:hover { background: rgba(255, 255, 255, .22) }

/* ---------- avisos ---------- */
.aviso { max-width: 1200px; margin: 16px auto 0; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 600 }
.aviso.ok { background: var(--verde-bg); border: 1px solid #bfe3d0; color: var(--verde) }
.aviso.erro { background: var(--vermelho-bg); border: 1px solid #eecaca; color: var(--vermelho) }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, var(--pradum) 0%, #061f4a 100%) }
.login-card { background: #fff; border-radius: 16px; padding: 36px 34px; width: 100%; max-width: 400px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3) }
.login-card .marca { text-align: center; margin-bottom: 6px }
.login-card .marca b { font-size: 38px; letter-spacing: 1.5px; font-weight: 800; line-height: 1 }
.login-card .marca b .pra { color: var(--pradum) } .login-card .marca b .dum { color: var(--ouro) }
.login-card .marca b span { display: inline; font-size: inherit; letter-spacing: inherit; text-transform: none }
.login-card .marca > span { display: block; font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--cinza2); margin-top: 3px }
.login-card h1 { font-size: 15px; color: var(--pradum); text-align: center; margin: 18px 0 22px; font-weight: 700 }
.login-card label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--cinza2); font-weight: 700; margin-bottom: 6px }
.login-card input[type=email], .login-card input[type=password] { width: 100%; padding: 11px 13px; border: 1px solid var(--linha); border-radius: 9px; font-size: 14.5px; margin-bottom: 15px; background: #fbfcfd }
.login-card input:focus { outline: none; border-color: var(--pradum2); box-shadow: 0 0 0 3px rgba(13, 71, 161, .12) }
.login-card button { width: 100%; background: var(--pradum); color: #fff; border: none; padding: 13px; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px }
.login-card button:hover { background: var(--pradum2) }
.login-card .lembrar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cinza) }
.login-card .erros { background: var(--vermelho-bg); border: 1px solid #eecaca; color: var(--vermelho); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; margin-bottom: 16px }
.login-card footer { text-align: center; font-size: 10px; color: var(--cinza2); margin-top: 22px; border-top: 1px solid var(--linha); padding-top: 14px }

/* ---------- painel administrativo ---------- */
.adm { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px }
.adm h1 { font-size: 20px; color: var(--pradum); margin: 26px 0 4px }
.adm .sub { font-size: 12.5px; color: var(--cinza2); margin-bottom: 20px }
.adm .painel { background: #fff; border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 20px; overflow: hidden }
.adm .painel > h2 { font-size: 13px; padding: 14px 20px; border-bottom: 1px solid var(--linha); color: var(--pradum); font-weight: 700 }
.adm .painel > .corpo { padding: 18px 20px }

.adm table { width: 100%; border-collapse: collapse; font-size: 13px }
.adm th { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza2); font-weight: 700; text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--linha) }
.adm td { padding: 9px 12px; border-bottom: 1px solid var(--linha); color: var(--cinza); vertical-align: middle }
.adm td.v { color: var(--texto); font-weight: 600 }
.adm tr:hover td { background: #fafcff }

.adm .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end }
.adm label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--cinza2); font-weight: 700; margin-bottom: 5px }
.adm input[type=text], .adm input[type=email], .adm input[type=password], .adm select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linha); border-radius: 8px; font-size: 13.5px; background: #fbfcfd; font-family: inherit;
}
.adm input:focus, .adm select:focus { outline: none; border-color: var(--pradum2) }
.adm .chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cinza); padding-bottom: 9px }

.adm .btn { background: var(--pradum); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer }
.adm .btn:hover { background: var(--pradum2) }
.adm .btn.mini { padding: 6px 12px; font-size: 12px }
.adm .btn.risco { background: #fff; color: var(--vermelho); border: 1px solid #eecaca }
.adm .btn.risco:hover { background: var(--vermelho-bg) }

.adm .papel { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--pradum-claro); color: var(--pradum2) }
.adm .papel.pradum { background: var(--ouro-claro); color: #8a4a06 }
.adm .papel.off { background: #eef2f5; color: var(--cinza2) }

.adm details.linha-edicao summary { cursor: pointer; font-size: 12px; color: var(--pradum2); font-weight: 600; list-style: none }
.adm details.linha-edicao summary::-webkit-details-marker { display: none }
.adm details.linha-edicao[open] summary { margin-bottom: 12px }
.adm details.linha-edicao .grade { padding: 12px; background: #f7f9fc; border-radius: 10px; border: 1px solid var(--linha) }