@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ============================================================
   Portal WOP — identidade visual
   Tinta (navy) #171E2F · Acento (teal) #35B2C1 · Montserrat + Source Sans
   Estilo limpo e arejado, alinhado com wop.com.pt
   ============================================================ */
:root{
  --tinta:#171e2f;        /* navy WOP — títulos, texto forte, botões primários */
  --tinta2:#586173;       /* texto secundário */
  --tinta3:#8b94a4;       /* texto ténue */
  --linha:#e5e9ee;        /* traços/limites */
  --fundo:#f4f6f8;        /* fundo da página */
  --branco:#fff;
  --acento:#35b2c1;       /* teal WOP — decorativo (sublinhados, ícones, realces) */
  --acento-txt:#0f8496;   /* teal mais fundo — texto/links (contraste) */
  --acento-suave:#e8f6f8; /* teal muito claro — fundos ténues */
  --verde:#1a7f4b; --verde-bg:#e8f5ee; --verde-linha:#b7dfc9;
  --vermelho:#b3261e; --vermelho-bg:#fdecea; --vermelho-linha:#f5c6c2;
  --amarelo:#fff8e6; --amarelo-linha:#ecd9a6; --amarelo-txt:#7a5b16;
  --raio:14px;
  --sombra:0 1px 2px rgba(23,30,47,.04), 0 10px 30px rgba(23,30,47,.06);
  --fonte:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --fonte-titulo:"Montserrat",var(--fonte);
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 var(--fonte);color:var(--tinta);background:var(--fundo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h2{font-family:var(--fonte-titulo);font-size:21px;font-weight:700;letter-spacing:-.2px;
  margin:0 0 .4em;color:var(--tinta)}
h3{font-family:var(--fonte-titulo);font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;margin:0 0 .7em;color:var(--tinta2)}
a{color:var(--acento-txt);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--acento-suave);padding:1px 6px;border-radius:5px;font-size:.9em}

/* ---------------- login ---------------- */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(1100px 620px at 50% -12%, #1f2a44 0%, #12182c 62%)}
.cartao-login{background:#fff;padding:36px 34px 32px;border-radius:18px;width:360px;
  border-top:3px solid var(--acento);box-shadow:0 26px 70px rgba(0,0,0,.34)}
.logo-login{height:56px;width:auto;display:block;margin-bottom:6px}
.cartao-login .sub{margin:2px 0 24px;color:var(--tinta2);font-size:13px}
.cartao-login label{display:block;margin-bottom:15px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;color:var(--tinta2)}
.cartao-login input{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--linha);
  border-radius:9px;font-size:14px;font-family:inherit;background:#fff}
.cartao-login input:focus{outline:2px solid var(--acento);border-color:transparent}
.cartao-login button{width:100%;margin-top:6px;padding:12px;border:0;border-radius:9px;
  background:var(--tinta);color:#fff;font-size:13px;font-weight:700;font-family:var(--fonte-titulo);
  text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:.15s}
.cartao-login button:hover{background:#232d47}
.erro{background:var(--vermelho-bg);color:var(--vermelho);padding:10px 13px;border-radius:9px;
  font-size:13px;margin-bottom:15px;border:1px solid var(--vermelho-linha)}
.ok{background:var(--verde-bg);color:#14603a;padding:10px 13px;border-radius:9px;
  font-size:13px;margin-bottom:15px;border:1px solid var(--verde-linha)}

/* ---------------- estrutura ---------------- */
header{background:#fff;border-bottom:1px solid var(--linha);display:flex;align-items:center;
  gap:22px;padding:0 26px;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(23,30,47,.02)}
.marca{display:inline-flex;align-items:center;gap:11px;padding:10px 0;white-space:nowrap;text-decoration:none}
.logo-img{height:34px;width:auto;display:block}
.marca-sub{font-family:var(--fonte-titulo);font-size:11.5px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--tinta2);padding-left:11px;border-left:1px solid var(--linha)}
.voltar{display:inline-flex;align-items:center;gap:5px;padding:7px 13px 7px 9px;
  border:1px solid var(--linha);border-radius:22px;color:var(--tinta2);text-decoration:none;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:.15s;background:#fff}
.voltar svg{width:16px;height:16px}
.voltar:hover{border-color:var(--acento);color:var(--tinta)}
header nav{display:flex;gap:4px;flex:1}
.sep{padding:19px 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;
  color:var(--tinta2);text-decoration:none;border-bottom:2px solid transparent;transition:.15s;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--fonte)}
.sep:hover{color:var(--tinta)}
.sep.activo{color:var(--tinta);border-bottom-color:var(--acento)}
.utilizador{font-size:12.5px;color:var(--tinta2);white-space:nowrap}
.utilizador a{color:var(--acento-txt)}
main{max-width:1140px;margin:0 auto;padding:34px 26px 80px}
.ajuda{color:var(--tinta2);max-width:75ch;margin:0 0 22px;font-size:14.5px}
.nota{color:var(--tinta3);font-size:12.5px}

/* ---------------- módulos ---------------- */
.modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:22px}
.modulo{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px;text-decoration:none;color:inherit;transition:.18s}
.modulo:hover{border-color:var(--acento);box-shadow:var(--sombra);transform:translateY(-2px)}
.modulo.desativado{opacity:.55;pointer-events:none}
.modulo-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;border:1px solid rgba(23,30,47,.05);color:var(--tinta)}
.modulo-icon svg{width:27px;height:27px}
.modulo-nome{font-family:var(--fonte-titulo);font-size:15px;font-weight:700;letter-spacing:.2px}
.modulo-nome .ext{color:var(--acento-txt);font-size:12px}
.modulo-desc{color:var(--tinta2);font-size:13px;margin-top:3px;line-height:1.45}
.brevemente{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--acento-txt);background:var(--acento-suave);padding:2px 9px;border-radius:20px}

/* ---------------- formulários / grupos ---------------- */
.grupo{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;margin-bottom:18px}
details.grupo summary{cursor:pointer;font-size:14px;font-weight:600;list-style:none}
details.grupo summary::-webkit-details-marker{display:none}
details.grupo[open] summary{margin-bottom:16px}
.campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.campo span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--tinta2)}
input,select{padding:9px 11px;border:1px solid var(--linha);border-radius:9px;font-size:14px;
  font-family:inherit;background:#fff;color:var(--tinta)}
input:focus,select:focus{outline:2px solid var(--acento);border-color:transparent}
.checks{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:5px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.chk.mini{font-size:12.5px}
.chk input{accent-color:var(--acento)}
button.primario,button.mini{cursor:pointer;font-family:var(--fonte);font-weight:600;border-radius:9px;
  border:1px solid transparent;transition:.15s}
button.primario{padding:10px 20px;font-size:12.5px;font-family:var(--fonte-titulo);text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;background:var(--tinta);color:#fff}
button.primario:hover{background:#232d47}
button.mini{padding:6px 12px;font-size:12px;background:#fff;border-color:var(--linha);color:var(--tinta)}
button.mini.primario{background:var(--tinta);color:#fff;border-color:var(--tinta);letter-spacing:.5px}
button.mini:hover{border-color:var(--acento)}

/* ---------------- tabela admin ---------------- */
.rolar{overflow:auto;border-radius:var(--raio);border:1px solid var(--linha);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:#f7f9fb;text-align:left;padding:11px 12px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--tinta2);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--linha)}
td{padding:11px 12px;border-top:1px solid var(--linha);vertical-align:top}
td.mods{min-width:230px}
td.mods .chk{display:block;margin-bottom:4px}
form.inline{display:inline-flex;gap:7px;align-items:center;margin:0 8px 4px 0}
.aviso{background:var(--amarelo);border:1px solid var(--amarelo-linha);color:var(--amarelo-txt);
  padding:13px 16px;border-radius:var(--raio);margin:16px 0;font-size:13.5px}