/* ============================================================
   Grupo Maria — estilo central de TODAS as telas do portal.
   Cada tela HTML é um doc completo e só aponta pra cá (<link>).
   Mudou a cara aqui = mudou em todas. (DRY)
   ============================================================ */

:root{
  --bg:#070d20; --bg2:#0a1430; --fg:#e8eefb; --muted:#93a1c2;
  --accent:#4f8fe8; --gm-blue:#0b4ea2; --gm-navy2:#0b2d7a; --gm-sky:#1577be;
  --line:#243352; --card:#0d1836;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.55);
}

/* ---------- base comum ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(79,143,232,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,143,232,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(11,78,162,.35),transparent 60%);
}
.wrap{position:relative; z-index:1; min-height:100%}

/* fundo ambiente por acesso (login) — diferencia Diretoria x Geral pela cor */
body.amb-diretoria::after{
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(11,45,122,.60), transparent 62%),
    radial-gradient(900px 520px at 12% 115%, rgba(10,31,92,.48), transparent 60%);
}
body.amb-geral::after{
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(21,119,190,.52), transparent 62%),
    radial-gradient(900px 520px at 88% 115%, rgba(47,159,230,.42), transparent 60%);
}

/* wallpaper (mascote Maria) — portal + logins. Véu escuro p/ a Maria ficar
   discreta no fundo e o texto/login seguirem legíveis. Ajustar opacidade do
   véu abaixo (quanto maior, mais some a Maria). */
body.bg-maria{
  background:#0a1430 url('/static/fundo.jpg') center center / cover no-repeat fixed;
}
body.bg-maria::before{
  background:linear-gradient(180deg, rgba(7,13,32,.60), rgba(7,13,32,.72));
  -webkit-mask-image:none; mask-image:none;
}

h1,h2,.brand{font-family:"Sora",system-ui,sans-serif}
a{color:var(--accent); text-decoration:none}
.brand{font-weight:800; letter-spacing:.14em; color:#fff}
/* logo real da marca (SVG branco p/ fundo escuro) */
.brand-logo{display:block; height:40px; width:auto}
.topo .brand-logo{height:54px; margin:0 auto 4px}
.card-login .brand-logo{height:34px; margin:0 auto 26px}
.topbar .brand-logo{height:26px}
.foot{position:fixed; bottom:16px; left:0; right:0; text-align:center;
  color:var(--muted); font-size:12px; line-height:1.7; z-index:1}
.foot b{color:var(--fg); font-family:"Sora",system-ui,sans-serif; font-size:13px; font-weight:700}
.foot .ver{opacity:.7}

/* ---------- tela: portal ---------- */
.portal{min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:48px 16px 96px}
.topo{text-align:center; margin-bottom:52px}
.topo .brand{font-size:17px}
.topo h1{margin:20px 0 8px; font-size:36px; font-weight:800}
.topo p{margin:0; color:var(--muted); font-size:16px}
.cards{display:flex; gap:30px; flex-wrap:wrap; justify-content:center;
  width:100%; max-width:840px}
.card{flex:1 1 330px; max-width:380px; min-height:248px; text-decoration:none;
  background:linear-gradient(160deg,var(--card),#0a1430);
  border:1px solid var(--line); border-radius:20px; padding:40px 32px;
  color:var(--fg); display:flex; flex-direction:column; gap:14px;
  align-items:center; text-align:center;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--c1),var(--c2))}
.card:hover{transform:translateY(-6px); border-color:var(--c2);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 26px 60px rgba(0,0,0,.6),0 0 0 1px var(--c2) inset}
.ico{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
.card h2{margin:4px 0 0; font-size:23px}
.card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; flex:1}
.card .cta{font-family:"Sora";font-weight:700;font-size:14px;color:var(--c2);
  display:inline-flex;align-items:center;gap:8px}
.card .cta::after{content:"→"; transition:transform .18s ease}
.card:hover .cta::after{transform:translateX(5px)}
@media(max-width:560px){.cards{flex-direction:column;align-items:center}
  .card{max-width:100%}}

/* ---------- tela: login ---------- */
.login-area{min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:40px 16px}
.back{position:fixed; top:24px; left:28px; display:inline-flex;align-items:center;
  gap:7px; color:var(--muted); font-size:13px; z-index:2}
.back:hover{color:var(--fg)}
.card-login{width:392px; max-width:calc(100vw - 32px); text-align:center;
  background:linear-gradient(160deg,var(--card),#0a1430);
  border:1px solid var(--line); border-radius:18px; padding:26px 36px 38px;
  box-shadow:var(--shadow)}
.card-login .brand{display:block; font-size:13px; margin-bottom:20px}
.card-login h1{margin:0 0 4px; font-size:20px; font-weight:700}
.card-login .sub{margin:0 0 22px; color:var(--muted); font-size:13px}
label{display:block; text-align:left; font-size:13px; color:var(--muted); margin:0 0 7px;
  font-weight:600; letter-spacing:.02em}
.field{margin-bottom:18px}
input{width:100%; padding:13px 15px; border-radius:11px;
  border:1px solid var(--line); background:#0a1430; color:var(--fg);
  font-family:inherit; font-size:16px; outline:none; transition:border-color .15s}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,143,232,.18)}
/* olhinho mostrar/ocultar senha */
.senha-wrap{position:relative}
.senha-wrap input{padding-right:48px}
/* espaça só as bolinhas (modo senha); ao revelar, volta ao normal = igual usuário */
#senha[type="password"]{letter-spacing:.22em}
.toggle-senha{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:8px; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center; transition:color .15s}
.toggle-senha:hover{color:var(--fg)}
.toggle-senha svg{width:20px; height:20px}
.toggle-senha .ico-eye-off{display:none}
.toggle-senha.on .ico-eye{display:none}
.toggle-senha.on .ico-eye-off{display:block}
.btn{width:100%; margin-top:8px; padding:14px; border:0; border-radius:11px;
  background:linear-gradient(135deg,var(--accent),var(--gm-blue)); color:#fff;
  font-family:"Sora"; font-weight:700; font-size:15px; cursor:pointer;
  transition:transform .12s ease, filter .15s ease}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.erro{background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.4);
  color:#ff9a9d; font-size:13px; padding:10px 12px; border-radius:9px; margin-bottom:16px}
.dica{margin-top:16px; font-size:12px; color:var(--muted); text-align:center}
@media(max-width:520px){.login-area{padding:26px 16px 0}}

/* ---------- tela: geral (placeholder) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:14px 20px;z-index:2}
.topbar .brand{font-size:14px}
.topbar a{color:var(--muted);font-size:13px}
.topbar a:hover{color:var(--fg)}
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px 16px;gap:14px}
.center h1{margin:0;font-size:26px}
.center p{margin:0;color:var(--muted);max-width:440px;line-height:1.6}
.sair{margin-top:18px;color:var(--muted);font-size:13px}