/* =========================================================
   GLOBAL ADJUSTMENTS
   ========================================================= */

div.DnnModule-HTML h3,
div.DnnModule-HTML table {
  margin: 0 !important;
  padding: 0 !important;
}

footer,
#footer,
.footer,
.site-footer {
  display: none !important;
}

body {
  padding-bottom: 0 !important;
}

<style>
/* =========================================================
   IMPORT GOOGLE FONTS - POPPINS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   RESET & GLOBAL
   ========================================================= */
* {
  box-sizing: border-box;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* =========================================================
   BACKGROUND (mantém imagem original)
   ========================================================= */
.dnnLogin {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}

.dnnLogin::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.06) 100%),
    url("/Portals/0/Images/POLO_ARCOZELO_OLD.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}

/* =========================================================
   GLASS CARD (mantém transparência)
   ========================================================= */
.dnnLogin .loginContent,
.dnnLogin .associateContent,
.dnnLogin .registerContent {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out;
  width: 100%;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   TITLE (AUMENTADO)
   ========================================================= */
.dnnLogin .ourCabelteTitle {
  text-align: center;
  font-weight: 900;
  /* 2.6-3.2rem -> 3.2-4.0rem (pedido do Tiago, 3-ago): o título da caixa de login
     era mais pequeno que a tagline do canto, e é ele o assunto do ecrã. */
  font-size: clamp(3.2rem, 7.2vw, 4rem);
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 0 0 2.2rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  font-family: 'Poppins', sans-serif;
}



/* =========================================================
   FORM ITEMS
   ========================================================= */
.dnnLogin .dnnFormItem {
  margin-bottom: 1.5rem;
  animation: fadeIn 0.8s ease-out;
  animation-fill-mode: both;
}

.dnnLogin .dnnFormItem:nth-child(1) { animation-delay: 0.1s; }
.dnnLogin .dnnFormItem:nth-child(2) { animation-delay: 0.2s; }
.dnnLogin .dnnFormItem:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================
   LABELS (texto branco para contraste com fundo transparente)
   ========================================================= */
.dnnLogin .dnnLabel,
.dnnLogin .dnnFormItem label {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.55rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.3px;
  font-family: 'Poppins', sans-serif;
}

/* =========================================================
   INPUTS
   ========================================================= */
.dnnLogin input[type="text"],
.dnnLogin input[type="password"],
.dnnLogin input[type="email"] {
  width: 100%;
  height: 52px;
  padding: 0 1.25rem 0 3.25rem;
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  color: #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-repeat: no-repeat;
  background-position: 1.25rem center;
  background-size: 20px;
  line-height: normal;
  font-family: 'Poppins', sans-serif;
}

/* Ícones por defeito */
.dnnLogin input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.dnnLogin input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.dnnLogin input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.dnnLogin input[type="text"]:focus,
.dnnLogin input[type="password"]:focus,
.dnnLogin input[type="email"]:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 25, 255, 0.2),
    0 6px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.dnnLogin input[type="text"]:hover,
.dnnLogin input[type="password"]:hover,
.dnnLogin input[type="email"]:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
}

/* Remove ícone ao focar ou quando tem conteúdo */
.dnnLogin input.hasFocus,
.dnnLogin input.hasValue {
  background-image: none !important;
  padding-left: 1.25rem;
}

/* Placeholder */
.dnnLogin input::placeholder {
  color: #999;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}

/* =========================================================
   BUTTONS (primários) + HOVER MAIS "RESPONSIVO"
   ========================================================= */
.dnnLogin .dnnActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.8rem;
  padding: 0;
  list-style: none;
}

/* Botões primários */
.dnnLogin .dnnPrimaryAction,
.dnnLogin button[type="submit"],
.dnnLogin input[type="submit"],
.dnnLogin .LoginButton,
.dnnLogin #cmdLogin,
.dnnLogin #cmdAssociate,
.dnnLogin #cmdCreateUser,
.dnnLogin #cmdProceed {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(90deg, #0019FF 0%, #0047FF 100%);
  color: #fff !important;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 4px 12px rgba(0, 25, 255, 0.3);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* Ripple (não interfere no hover) */
.dnnLogin .dnnPrimaryAction::before,
.dnnLogin button[type="submit"]::before,
.dnnLogin input[type="submit"]::before,
.dnnLogin .LoginButton::before,
.dnnLogin #cmdLogin::before,
.dnnLogin #cmdAssociate::before,
.dnnLogin #cmdCreateUser::before,
.dnnLogin #cmdProceed::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none; /* <- importante */
}

.dnnLogin .dnnPrimaryAction:hover::before,
.dnnLogin button[type="submit"]:hover::before,
.dnnLogin input[type="submit"]:hover::before,
.dnnLogin .LoginButton:hover::before,
.dnnLogin #cmdLogin:hover::before,
.dnnLogin #cmdAssociate:hover::before,
.dnnLogin #cmdCreateUser:hover::before,
.dnnLogin #cmdProceed:hover::before {
  width: 320px;
  height: 320px;
}

/* Hover mais perceptível e imediato */
.dnnLogin .dnnPrimaryAction:hover,
.dnnLogin button[type="submit"]:hover,
.dnnLogin input[type="submit"]:hover,
.dnnLogin .LoginButton:hover,
.dnnLogin #cmdLogin:hover,
.dnnLogin #cmdAssociate:hover,
.dnnLogin #cmdCreateUser:hover,
.dnnLogin #cmdProceed:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 25, 255, 0.45);
  filter: brightness(1.06);
}

.dnnLogin .dnnPrimaryAction:active,
.dnnLogin button[type="submit"]:active,
.dnnLogin input[type="submit"]:active,
.dnnLogin .LoginButton:active,
.dnnLogin #cmdLogin:active,
.dnnLogin #cmdAssociate:active,
.dnnLogin #cmdCreateUser:active,
.dnnLogin #cmdProceed:active {
  transform: translateY(0);
}

/* =========================================================
   RECOVER PASSWORD: MOSTRAR
   CANCELAR/SECUNDÁRIO: ESCONDER
   ========================================================= */

/* Esconde tudo que for secundário (ex.: Cancelar) */
.dnnLogin .dnnSecondaryAction {
  display: none !important;
}

/* Mostra apenas o link do "recover / redefinir password"
   (no teu HTML ele aparece como <a ... id="..._passwordlink" class="dnnSecondaryAction" ...>) */
.dnnLogin a.dnnSecondaryAction[id$="_passwordlink"],
.dnnLogin a[id*="_passwordlink"] {
  display: inline-block !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 10px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Hover do recover */
.dnnLogin a.dnnSecondaryAction[id$="_passwordlink"]:hover,
.dnnLogin a[id*="_passwordlink"]:hover {
  text-decoration: underline;
  opacity: 0.95;
}

/* Garantia extra: esconder qualquer cmdCancel, se existir */
.dnnLogin a[id*="cmdCancel"],
.dnnLogin input[id*="cmdCancel"],
.dnnLogin button[id*="cmdCancel"] {
  display: none !important;
}

/* =========================================================
   SOCIAL LOGIN
   ========================================================= */
.dnnLogin .dnnSocialRegistration {
  margin-top: 1.5rem;
}

.dnnLogin .buttonList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* =========================================================
   ERROR & SUCCESS MESSAGES
   ========================================================= */
.dnnLogin .dnnFormMessage {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin: 1rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

.dnnLogin .dnnFormError {
  background: rgba(255, 59, 48, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 59, 48, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dnnLogin .dnnFormSuccess {
  background: rgba(52, 199, 89, 0.15);
  color: #fff;
  border: 1px solid rgba(52, 199, 89, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   RESPONSIVE - TABLET (768px - 1024px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .dnnLogin { max-width: 520px; padding: 3rem 1.5rem; }

  .dnnLogin .loginContent,
  .dnnLogin .associateContent,
  .dnnLogin .registerContent { padding: 3rem; }

  .dnnLogin .ourCabelteTitle { font-size: 3.5rem; margin-bottom: 2.5rem; }   /* 3-ago: acompanha o aumento do desktop */

  .dnnLogin input[type="text"],
  .dnnLogin input[type="password"],
  .dnnLogin input[type="email"] { height: 54px; font-size: 1.05rem; }
}

/* =========================================================
   RESPONSIVE - MOBILE (até 767px)
   ========================================================= */
@media (max-width: 767px) {
  .dnnLogin { max-width: 100%; padding: 1.5rem 1rem; min-height: 100vh; }

  .dnnLogin .loginContent,
  .dnnLogin .associateContent,
  .dnnLogin .registerContent { padding: 2rem 1.5rem; border-radius: 20px; }

  .dnnLogin .ourCabelteTitle { font-size: 2.5rem; margin-bottom: 1.5rem; }

  .dnnLogin .dnnFormItem { margin-bottom: 1.25rem; }

  .dnnLogin .dnnLabel,
  .dnnLogin .dnnFormItem label { font-size: 0.9rem; margin-bottom: 0.5rem; }

  .dnnLogin input[type="text"],
  .dnnLogin input[type="password"],
  .dnnLogin input[type="email"] {
    height: 50px;
    font-size: 0.95rem;
    padding: 0 1rem 0 3rem;
    border-radius: 50px;
  }

  .dnnLogin .dnnPrimaryAction,
  .dnnLogin button[type="submit"],
  .dnnLogin input[type="submit"],
  .dnnLogin .LoginButton,
  .dnnLogin #cmdLogin,
  .dnnLogin #cmdAssociate,
  .dnnLogin #cmdCreateUser,
  .dnnLogin #cmdProceed {
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 10px;
  }

  .dnnLogin .dnnActions { margin-top: 1.5rem; gap: 0.875rem; }
}

/* =========================================================
   RESPONSIVE - SMALL MOBILE (até 375px)
   ========================================================= */
@media (max-width: 375px) {
  .dnnLogin { padding: 1rem 0.75rem; }

  .dnnLogin .loginContent,
  .dnnLogin .associateContent,
  .dnnLogin .registerContent { padding: 1.75rem 1.25rem; border-radius: 18px; }

  .dnnLogin .ourCabelteTitle { font-size: 2.35rem; }

  .dnnLogin input[type="text"],
  .dnnLogin input[type="password"],
  .dnnLogin input[type="email"] {
    height: 48px;
    font-size: 0.9rem;
    padding: 0 1rem 0 2.75rem;
  }
}

/* =========================================================
   LANDSCAPE MODE (Mobile em modo horizontal)
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .dnnLogin { padding: 1rem; min-height: auto; }

  .dnnLogin .loginContent,
  .dnnLogin .associateContent,
  .dnnLogin .registerContent { padding: 1.5rem; }

  .dnnLogin .ourCabelteTitle { font-size: 2.1rem; margin-bottom: 1rem; }

  .dnnLogin .dnnFormItem { margin-bottom: 1rem; }

  .dnnLogin input[type="text"],
  .dnnLogin input[type="password"],
  .dnnLogin input[type="email"] { height: 46px; }

  .dnnLogin .dnnActions { margin-top: 1rem; }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
.dnnLogin *:focus-visible {
  outline: 2px solid #0019FF;
  outline-offset: 2px;
}


/* =========================================================
   LOADING STATE
   ========================================================= */
.dnnLogin.loading { pointer-events: none; opacity: 0.7; }

.dnnLogin.loading::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid rgba(0, 25, 255, 0.2);
  border-top-color: #0019FF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 9999;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   FIX #1: RECOVER PASSWORD VISÍVEL / CANCELAR OCULTO
   (colar no FINAL do teu <style>)
   ========================================================= */

/* 1) Oculta apenas "Cancelar" por padrões comuns de DNN */
.dnnLogin li[id*="liaCancel"],
.dnnLogin a[id*="cmdCancel"],
.dnnLogin input[id*="cmdCancel"],
.dnnLogin button[id*="cmdCancel"] {
  display: none !important;
}

/* 2) Mantém secundários ocultos por padrão... */
.dnnLogin .dnnSecondaryAction {
  display: none !important;
}

/* 3) ...mas reativa explicitamente o Recover Password (pelo teu DOM: liaPassword + passwordlink) */
.dnnLogin li[id*="liaPassword"] a,
.dnnLogin a[id*="_passwordlink"],
.dnnLogin a[id$="_passwordlink"],
.dnnLogin a[href*="sendpassword"],
.dnnLogin a[href*="SendPassword"] {
  display: inline-block !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
  cursor: pointer !important;
}

.dnnLogin li[id*="liaPassword"] a:hover,
.dnnLogin a[id*="_passwordlink"]:hover,
.dnnLogin a[href*="sendpassword"]:hover {
  text-decoration: underline !important;
  opacity: 0.95 !important;
}


/* =========================================================
   FIX #2: HOVER DO BOTÃO LOGIN (mais responsivo/imediato)
   ========================================================= */

/* Garante que o pseudo-elemento não bloqueia eventos */
.dnnLogin .dnnPrimaryAction::before,
.dnnLogin #cmdLogin::before,
.dnnLogin input[type="submit"]::before,
.dnnLogin button[type="submit"]::before,
.dnnLogin .LoginButton::before {
  pointer-events: none !important;
}

/* Aumenta área clicável + transição mais rápida */
.dnnLogin .dnnActions li,
.dnnLogin .dnnActions li a,
.dnnLogin .dnnActions li button,
.dnnLogin .dnnActions li input {
  pointer-events: auto !important;
}

.dnnLogin .dnnActions li .dnnPrimaryAction,
.dnnLogin .dnnActions li #cmdLogin,
.dnnLogin .dnnActions li button[type="submit"],
.dnnLogin .dnnActions li input[type="submit"],
.dnnLogin .dnnActions li .LoginButton {
  display: block !important;
  width: 100% !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease !important;
  will-change: transform, box-shadow, filter;
}

/* =========================================================
   FIX: NÃO QUEBRAR "PALAVRA-PASSE" EM DUAS LINHAS
   ========================================================= */

/* 1) Força o texto do label a ficar sempre numa linha */
.dnnLogin .dnnLabel,
.dnnLogin .dnnFormItem label,
.dnnLogin .dnnLabel span,
.dnnLogin .dnnLabel label {
  white-space: nowrap !important;
}

/* 2) Garante que não há hifenização automática (se estiver ativa) */
.dnnLogin .dnnLabel,
.dnnLogin .dnnFormItem label {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* =========================================================
   FIX: DESCER SÓ O "RECOVER PASSWORD" (sem mexer no form)
   ========================================================= */

/* Empurra o item (li) do recover para baixo */
.dnnLogin li[id*="liaPassword"]{
  margin-top: 10px !important;   /* ajusta: 10, 20, 30, 40... */
  padding-top: 0 !important;
}

/* Garante que o link não “anula” a margem */
.dnnLogin li[id*="liaPassword"] a{
  display: inline-block !important;
  margin-top: 0 !important;
}

/* Fallback: descer pelo id do link */
.dnnLogin a[id$="_passwordlink"]{
  position: relative !important;
  top: 55px !important; /* desce sem empurrar o resto */
}

/* Stack seguro para mensagens DNN + conteúdo */
div[id$="_Login_UP"]{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  overflow:visible !important;
}

/* Mensagens DNN sempre acima */
.dnnFormMessage.dnnFormValidationSummary{
  position:relative !important;
  z-index:10 !important;
  width:100%;
  max-width:480px;
  margin:0 auto 16px auto;
}

/* Container do Remember Me */
.dnnLogin .dnnLoginRememberMe{
  display:flex !important;
  align-items:center !important;
  gap:8px;
}

/* Checkbox visual */
.dnnLogin .dnnCheckbox{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Marca visual */
.dnnLogin .dnnCheckbox .mark{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Label texto */
.dnnLogin label[for*="chkCookie"]{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  line-height:1.2 !important;
}

/* Forçar o mesmo comportamento no Username/Email, independentemente do type */
.dnnLogin input[id$="_txtUsername"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: 1.25rem center;
  background-size: 20px;
}

/* Remover ícone quando focado ou com valor (mesma regra) */
.dnnLogin input[id$="_txtUsername"].hasFocus,
.dnnLogin input[id$="_txtUsername"].hasValue{
  background-image: none !important;
  padding-left: 1.25rem !important;
}

/* Se tem valor, remove o ícone para não “sobrepor” */
.dnnLogin input.hasValue{
  background-image: none !important;
  padding-left: 1.25rem !important;
}

/* Autofill (Chrome/Edge) — força o mesmo comportamento */
.dnnLogin input:-webkit-autofill{
  background-image: none !important;
  padding-left: 1.25rem !important;
}

/* =========================================================
   LOGO CABELTE NO CANTO SUPERIOR ESQUERDO + "OUR CABELTE" NO CARD
   (pedido do Tiago, 2026-07-02) — substitui o antigo logo do card.
   ⚠️ Removida a antiga regra ".dnnLogin .loginContent::before" que punha o
   logo dentro do card (era um background-image). Agora esse ::before mostra
   o texto "Our Cabelte"; o logo passa a viver fixo no canto da página via
   ".dnnForm.dnnLogin.dnnClear::after".
   ========================================================= */

/* TODO o texto do login em Poppins (obrigatório — pedido da Gabriela).
   Scoped a .dnnLogin → NÃO vaza para outras páginas. !important p/ vencer
   qualquer fonte que o skin/DNN injete em labels, links, mensagens, etc. */
.dnnLogin,
.dnnLogin * {
  font-family: 'Poppins', sans-serif !important;
}

/* Troca do título por logo */
.dnnLogin .ourCabelteLogo{
  margin: 0 0 2.2rem 0;
  display:flex;
  justify-content:center;
}

.dnnLogin .ourCabelteLogoImg{
  max-width: 260px;     /* ajusta */
  width: 100%;
  height: auto;
  display:block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)); /* opcional */
}

/* ================================
   FIX EDGE: username com ícone + erro
   ================================ */

/* id real do input (renderizado no HTML) termina em "_txtUsername" */
.dnnLogin input[id$="_txtUsername"]{

  box-sizing: border-box;
  background-repeat: no-repeat !important;


}

/* quando o DNN marca erro (login failed), não deixar cair o padding */
.dnnLogin input[id$="_txtUsername"].input-validation-error,
.dnnLogin .input-validation-error input[id$="_txtUsername"],
.dnnLogin .dnnFormError input[id$="_txtUsername"],
.dnnLogin .dnnFormMessage.dnnFormError input[id$="_txtUsername"]{
  background-repeat: no-repeat !important;
}

/* IMPORTANTE: evita shorthand "background:" no erro (não apaga o ícone) */
.dnnLogin input[id$="_txtUsername"].input-validation-error{
  background-color: rgba(255,255,255,0.95) !important;
}

/* Username com o MESMO tamanho/posição do Password */
.dnnLogin input[id$="_txtUsername"]{
  background-size: 20px 20px !important;
  background-position: 1.25rem center !important;
  padding-left: 3.25rem !important; /* igual ao bloco base */
}

/* Também quando estiver com erro (login failed) */
.dnnLogin input[id$="_txtUsername"].input-validation-error,
.dnnLogin .input-validation-error input[id$="_txtUsername"],
.dnnLogin .dnnFormError input[id$="_txtUsername"],
.dnnLogin .dnnFormMessage.dnnFormError input[id$="_txtUsername"]{
  background-size: 20px 20px !important;
  background-position: 1.25rem center !important;
  padding-left: 3.25rem !important;
}

/* =========================================================
    LOGIN ZOOM-STABLE — tamanho relativo ao ecrã, sempre a fit
    Régua = vmin no card; interior em em (escala como bloco só)
    ========================================================= */

/* Página estática + card centrado */
html, body { height: 100%; margin: 0; overflow: hidden; }
.dnnLogin {
height: 100svh; min-height: 0;
display: flex; align-items: center; justify-content: center;
padding: 4vmin; overflow: hidden;
}

/* CARD — base de escala (vmin). Tudo lá dentro deriva daqui via em */
.dnnLogin .loginContent,
.dnnLogin .associateContent,
.dnnLogin .registerContent {
font-size: 1.75vmin !important;       /* <- "régua" do card (sobe/desce p/ maior/menor) */
width: min(92vw, 25em) !important;
max-width: none !important;
max-height: 94svh !important;
padding: 2.3em !important;
border-radius: 1.5em !important;
overflow: hidden auto !important;
}

/* Trava de segurança: nunca minúsculo nem gigante (gama larga p/ não cortar o zoom) */
@media (max-width: 600px)  { .dnnLogin .loginContent { font-size: 4.4vw !important; } }

/* "Our Cabelte" (Poppins) no topo do card — ONDE ESTAVA O LOGO.
   (Antes: background-image do logo. Agora: texto.) */
.dnnLogin .loginContent::before,
.dnnLogin .associateContent::before,
.dnnLogin .registerContent::before {
content: "Our Cabelte" !important;
background: none !important;
display: block !important;
width: auto !important; height: auto !important;
text-align: center !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 800 !important;
font-size: 1.9em !important;
line-height: 1.2 !important;
color: #fff !important;
text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
/* margin-top 1.2em → desce o título (pedido da Gabriela); margin-bottom 0.84em
   → o gap título→"Username" fica IGUAL ao gap (barra Username)→"Password" (28px
   no desktop). NB: 0.84em é relativo à fonte GRANDE do título (~1.9em do card),
   por isso ~24px de margem. Ajustar margin-top p/ mais/menos "para baixo". */
margin: 1.2em auto 0.84em auto !important;
}

/* Logo Cabelte (branco) FIXO no canto superior esquerdo da página.
   Usa .dnnForm.dnnLogin.dnnClear::after (o ::after simples tem clearfix e o
   ::before já é o fundo). NÃO usar .loginContent (backdrop-filter recortaria). */
.dnnForm.dnnLogin.dnnClear::after {
content: "" !important;
position: fixed !important;
top: 24px !important; left: 32px !important;
/* logo aumentado 132×32 → 240×58 p/ mais destaque (pedido Gabriela, 2026-07-03).
   Rácio mantido (~4.13) p/ não distorcer. */
width: 240px !important; height: 58px !important;
display: block !important; visibility: visible !important;
clear: none !important; float: none !important; opacity: 1 !important;
margin: 0 !important; padding: 0 !important;
background: url("/Portals/0/Logo%20principal%20CABELTE_white_RGB.png") left center / contain no-repeat !important;
z-index: 100 !important; pointer-events: none !important;
}
@media (max-width: 600px) {
.dnnForm.dnnLogin.dnnClear::after { top: 16px !important; left: 20px !important; width: 190px !important; height: 46px !important; }
}

/* Labels */
.dnnLogin .dnnLabel,
.dnnLogin .dnnFormItem label { font-size: 0.95em !important; margin-bottom: 0.5em !important; }

/* Form items */
.dnnLogin .dnnFormItem { margin-bottom: 1.15em !important; }

/* Inputs */
.dnnLogin input[type="text"],
.dnnLogin input[type="password"],
.dnnLogin input[type="email"],
.dnnLogin input[id$="_txtUsername"] {
height: 3em !important;
font-size: 1em !important;
padding: 0 1.2em 0 3em !important;
border-radius: 2.4em !important;
background-size: 1.25em 1.25em !important;
background-position: 1.1em center !important;
}

/* Botão Login */
.dnnLogin .dnnActions { margin-top: 1.4em !important; }
.dnnLogin .dnnPrimaryAction,
.dnnLogin button[type="submit"],
.dnnLogin input[type="submit"],
.dnnLogin .LoginButton,
.dnnLogin #cmdLogin {
font-size: 1em !important;
padding: 0.85em 1.4em !important;
border-radius: 0.7em !important;
}

/* Remember + Recover */
.dnnLogin .dnnLoginRememberMe { font-size: 0.9em !important; }
.dnnLogin a[id$="_passwordlink"] { top: 0 !important; font-size: 0.9em !important; }
.dnnLogin li[id*="liaPassword"] { margin-top: 1em !important; }

.dnnLogin {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}


.dnnLogin .loginContent,
.dnnLogin .associateContent,
.dnnLogin .registerContent {
margin-left: auto !important;
margin-right: auto !important;
}


/* =========================================================
    FIT + CENTRAGEM + RESPONSIVO (desktop / mobile / landscape)
    ========================================================= */

/* Contentor full-width (sem o limite de 480px) + card centrado */
.dnnLogin { width: 100% !important; max-width: none !important; margin: 0 !important; }
.dnnLogin .loginContent,
.dnnLogin .associateContent,
.dnnLogin .registerContent { margin-left: auto !important; margin-right: auto !important; }

/* Link "Reset Password" acompanha a escala do card (estava em rem fixo) */
.dnnLogin a[href*="sendpassword"] { font-size: 0.85em !important; position: static !important; top: 0 !important; }
.dnnLogin a[id$="_passwordLink"] { font-size: 0.85em !important; position: static !important; top: 0 !important; }
.dnnLogin li[id*="liaPassword"] { margin-top: 0.8em !important; }

/* MOBILE VERTICAL — letra limitada por largura E altura (não estoura) */
@media (max-width: 600px) {
.dnnLogin { padding: 3vmin !important; }
.dnnLogin .loginContent,
.dnnLogin .associateContent,
.dnnLogin .registerContent {
    font-size: min(4.4vw, 2.3vh) !important;
    width: 94vw !important;
    max-height: 96svh !important;
    padding: 1.8em !important;
    overflow: hidden auto !important;
}
.dnnLogin .dnnFormItem { margin-bottom: 0.9em !important; }
.dnnLogin .dnnActions { margin-top: 1.1em !important; }
.dnnLogin .loginContent::before,
.dnnLogin .associateContent::before,
.dnnLogin .registerContent::before { margin: 0.8em auto 0.66em auto !important; }
}

/* ECRÃS BAIXOS / TELEMÓVEL DEITADO */
@media (max-height: 520px) {
.dnnLogin { padding: 2vmin !important; }
.dnnLogin .loginContent,
.dnnLogin .associateContent,
.dnnLogin .registerContent {
    font-size: min(2.7vh, 2.2vw) !important;
    width: min(94vw, 34em) !important;
    max-height: 96svh !important;
    padding: 1.2em 1.8em !important;
    overflow: hidden auto !important;
}
.dnnLogin .dnnFormItem { margin-bottom: 0.6em !important; }
.dnnLogin .dnnActions { margin-top: 0.8em !important; }
.dnnLogin .loginContent::before,
.dnnLogin .associateContent::before,
.dnnLogin .registerContent::before { margin: 0.4em auto 0.84em auto !important; }
}

/* =========================================================
   ⇩⇩⇩  TRADUÇÕES PT + ESPAÇAMENTO DO RESET  (Tiago, 2026-07-03)  ⇩⇩⇩
   SÓ CSS, sem tocar na estrutura. Verificado AO VIVO (deb.cabelte.pt,
   Playwright). Fica no FINAL do <style> de propósito (last-wins).

   (A) Traduz 4 textos EN→PT sem mexer no markup, por content-replacement:
       colapsa o texto original (font-size:0) e injecta o PT no ::after.
         Username        -> Utilizador
         Password        -> Palavra-passe
         Remember Login  -> Manter sessão iniciada
         Reset Password  -> Esqueci-me da palavra-passe
       ("Login" fica em inglês — não foi pedido para mudar.)

   (B) Iguala a distância Login→"Esqueci-me da palavra-passe" à distância
       "Manter sessão iniciada"→Login (~24px) em desktop. Antes o reset caía
       ~63px abaixo do botão (o ul .dnnActions tinha margin-top:1.4em).

   GOTCHAS (custaram tempo — não reverter sem perceber):
   - content PRECISA de !important: o DNN injecta content:"" (clearfix) nos
     ::after dos .dnnFormLabel/.dnnLabel e ganhava → Utilizador/Palavra-passe
     saíam VAZIOS. (Remember/Reset, que não são .dnnFormLabel, já funcionavam.)
   - font-size do ::after em REM, NÃO em em: o elemento fica a font-size:0 e
     'em' colapsaria a 0 (texto invisível). Custo: estes 4 textos não escalam
     com o "zoom-stable" do card; a olho é impercetível.
   - id do reset é ..._passwordLink (L MAIÚSCULO). CSS é case-sensitive em ids;
     por isso [id$="_passwordLink" i] com a flag i (as regras antigas com
     _passwordlink minúsculo NÃO casam neste DOM).
   - o <a> do reset é inline → margin-top nele não faz nada; o espaçamento
     mexe-se no container block-level (ul.dnnActions). -1.0em (em, escala com
     o card) assenta no "chão" do gap (~24px) em desktop; scoped a ≥601px para
     não tocar nas media queries de mobile (1.1em / 0.8em ficam como estão).
   ========================================================= */

/* (A) Traduções */
.dnnLogin label[for$="_txtUsername"],
.dnnLogin label[for$="_txtPassword"],
.dnnLogin label[for$="_chkCookie"],
.dnnLogin a[id$="_passwordLink" i] {
    font-size: 0 !important;
}

.dnnLogin label[for$="_txtUsername"]::after { content: "Utilizador" !important;             font-size: 0.95rem !important; }
.dnnLogin label[for$="_txtPassword"]::after { content: "Palavra-passe" !important;          font-size: 0.95rem !important; }
.dnnLogin label[for$="_chkCookie"]::after   { content: "Manter sessão iniciada" !important; font-size: 0.95rem !important; }
.dnnLogin a[id$="_passwordLink" i]::after    { content: "Esqueci-me da palavra-passe" !important; font-size: 0.95rem !important; white-space: nowrap !important; }

/* (B) Espaçamento — só desktop (≥601px); mobile mantém as suas media queries */
.dnnLogin a[id$="_passwordLink" i] { margin-top: 0 !important; }
@media (min-width: 601px) {
    .dnnLogin .dnnActions { margin-top: -1.0em !important; }
}

/* (C) "Manter sessão iniciada" — BOLA em vez de quadrado (pedido do Tiago, 3-ago).
   A caixa visível é o <input> nativo do DNN; com appearance:none deixa de ser o
   quadrado do sistema e passa a ser desenhada aqui. O ponto branco do meio vem de um
   radial-gradient e não de um ::after: inputs são elementos substituídos e os
   pseudo-elementos não são fiáveis neles.
   Selecionada: azul primário + halo (o "brilho" pedido). */
.dnnLogin input[id$="_chkCookie"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.dnnLogin input[id$="_chkCookie"]:hover {
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

.dnnLogin input[id$="_chkCookie"]:checked {
    border-color: #0019FF !important;
    background: radial-gradient(circle, #ffffff 0 4px, #0019FF 4.5px 100%) !important;
    box-shadow: 0 0 0 3px rgba(0, 25, 255, 0.22),
                0 0 14px rgba(0, 25, 255, 0.75),
                0 0 28px rgba(0, 25, 255, 0.45) !important;
}

.dnnLogin input[id$="_chkCookie"]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85) !important;
    outline-offset: 2px !important;
}

/* =========================================================
   TAGLINE "FUTURE IS ALL AROUND" — canto inferior direito (Gabriela, 2026-07-03)
   Selo fixo, análogo ao logo do canto superior esquerdo.

   HOST = .aperture-login (wrapper da SKIN). ::before/::after livres. NÃO usar
   descendentes do card (.loginContent tem backdrop-filter → viraria containing
   block de 'fixed' e recortava o selo). .aperture-login está limpo (sem
   transform/filter/contain), por isso o 'fixed' fica relativo ao viewport.

   CORREÇÃO 2026-07-06 (Gabriela: "a tagline aparece em TODA a navegação"): ERRO
   da 1ª leitura — a skin aperture-login NÃO existe só no login; envolve TODA a
   plataforma (é a mesma skin que trava o <html>, ver base.css da área cliente).
   Logo .aperture-login::after vazava o selo para todas as páginas. Fix: scopar
   por :has(.dnnLogin, .owc-welcome) — a tagline só aparece no LOGIN (módulo
   .dnnLogin) e na landing WELCOME (módulo .owc-welcome). Ambos os marcadores só
   existem nessas duas páginas; nas restantes (dashboard, etc.) não há match.
   (.dnnLogin verificado ao vivo no deb: presente no /Login, ausente na Dashboard.
    2026-07-10, pedido do Tiago: tagline só no welcome e login.)

   RECORTE (CROP) — porquê e como (NÃO reverter sem perceber):
   O PNG é 16:9 (8000×4500) mas o desenho ("Future is all around" + swoosh) NÃO
   está encostado ao canto: tem ~31% de transparência à direita e ~16% em baixo,
   e está mais à esquerda. Com 'contain'+'right bottom' o selo saía pequeno e
   AFASTADO do canto, e a margem direita ≠ margem inferior. A Gabriela pediu
   margem X = margem Y. Solução: recortar por CSS à bounding-box REAL do desenho
   (medida por alpha-scan via Playwright: x=63..275, y=25..188 num scan 400×225):
     - aspect-ratio da CAIXA = 213/164 (= aspect do desenho) → sem distorção.
     - background-size: 187.8% auto  (= 400/213, faz a largura do desenho == caixa)
     - background-position: 33.7% 41% (alinha o desenho borda-a-borda na caixa)
   Assim o pixel mais à direita do desenho toca o bordo direito da caixa e o mais
   em baixo toca o fundo → com right==bottom a margem visual X==Y é EXATA.
   Verificado AO VIVO (Playwright 1440 + 375). Se trocarem o PNG, refazer o scan.
   ========================================================= */
.aperture-login:has(.dnnLogin)::after,
.aperture-login:has(.owc-welcome)::after {
    content: "" !important;
    position: fixed !important;
    /* ── SEM CROP (3-ago) ─────────────────────────────────────────────────────
       O recorte antigo (background-size:187.8% + position:33.7% 41% numa caixa de
       aspect 213/164) foi feito para encostar o desenho às bordas da caixa, mas
       qualquer diferença de arredondamento CORTA o selo — era o que se via: o
       "around" e o círculo aparados à direita e em baixo.

       Agora a caixa tem o aspect REAL do PNG (16:9) e o desenho entra com
       'contain': por definição nunca é cortado, sai exactamente como na origem.

       O preço é que o PNG tem transparência a mais (31,25% à direita, 16,4% em
       baixo, medido por alpha-scan: desenho em x=63..275, y=25..188 de 400×225).
       Essa transparência afastaria o selo do canto, e é por isso que o 'right' é
       NEGATIVO: puxa a caixa para fora até o DESENHO ficar a ~28px do canto.
         caixa 211x119  ->  desenho ~112px de largura (o tamanho pedido)
         margem interna: 0,3125x211 = 66px à direita | 0,164x119 = 19px em baixo
         right = 28 - 66 = -38px   |   bottom = 28 - 19 = 9px
       Se o PNG for substituído, refazer o alpha-scan e recalcular estes dois. */
    right: -38px !important; bottom: 9px !important;
    width: 211px !important; height: auto !important; aspect-ratio: 16 / 9 !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    margin: 0 !important; padding: 0 !important; clear: none !important; float: none !important;
    background-image: url("/Portals/0/Images/Tagline_RGB-01sem%20fundo.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center center !important;
    z-index: 100 !important; pointer-events: none !important;
}
@media (max-width: 600px) {
    /* caixa 162x91 -> desenho ~86px; margens internas 51px / 15px, para 18px do canto */
    .aperture-login:has(.dnnLogin)::after,
    .aperture-login:has(.owc-welcome)::after { right: -33px !important; bottom: 3px !important; width: 162px !important; }
}

/* =========================================================
   ECRÃS DE PALAVRA-PASSE COM O ESTILO DO LOGIN (Tiago, 08-out-2026)
     - Redefinir: /login_us/ctl/PasswordReset?resetToken=...  (.dnnPasswordReset)
       É aqui que o utilizador novo define a palavra-passe (o "forced reset" do DNN
       manda o link por email) e onde cai quem pediu para recuperar.
     - Recuperar: /login_us/ctl/sendpassword  (.dnnSendPassword)
       O "Esqueci-me da palavra-passe" do login.

   COLAR NO FIM do /Portals/0/portal.css, antes da última linha (a tag que fecha o
   bloco de estilos). Só CSS. Tudo preso a estes dois ecrãs: o portal.css é global e a
   skin aperture-login envolve a plataforma toda. Os textos em PT vêm do script das
   Page Header Tags (olho-password-header.html).

   Markup (DNN 10.4.0, admin/Security/PasswordReset.ascx e SendPassword.ascx):
     .dnnPasswordReset > [.dnnFormMessage] + .dnnPasswordResetContent > 3x .dnnFormItem
       (só placeholders, sem labels) + ul.dnnActions (Alterar, Cancelar)
     .dnnSendPassword > [id$=_pnlRecover] > .dnnFormMessage + .dnnSendPasswordContent >
       .dnnFormItem (.dnnLabel com ajuda + campo); ul.dnnActions (Enviar, Cancelar) fora
   O DNN (default.css) estiliza .dnnFormItem input/button/label a 45%/32% de largura, com
   floats, margens, borda azul ao focar e botões cinzentos: daí os !important.
   O medidor de força (dnn.PasswordStrength.js) fixa a largura do .meter em px.

   Pseudo-elementos (os fixed NÃO podem ficar dentro do cartão: backdrop-filter):
     .aperture-login:has(...)::before        = foto de fundo
     .aperture-login:has(...)::after         = tagline (a do login)
     .aperture-login-main::after             = logótipo no canto
     cartão::before                          = "Our Cabelte"
     .dnnPasswordResetContent::before        = "Definir palavra-passe"
     [id$=_pnlRecover]::before               = "Recuperar palavra-passe"
   ========================================================= */

/* Página: só o cartão, ao centro, sem o resto da skin */
.aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-hero,
.aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-featured { display: none !important; }

.aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main {
    height: 100svh; min-height: 0; margin: 0; padding: 4vmin;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 0;
}
.aperture-login:has(.dnnPasswordReset, .dnnSendPassword) #dnn_ContentPane { width: 100%; }

/* Foto de fundo (a mesma do login) */
.aperture-login:has(.dnnPasswordReset, .dnnSendPassword)::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.06) 100%),
        url("/Portals/0/Images/POLO_ARCOZELO_OLD.png");
    background-repeat: no-repeat; background-size: cover;
    background-position: center bottom; background-attachment: fixed;
}

/* Logótipo branco no canto superior esquerdo (o mesmo do login) */
.aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main::after {
    content: ""; position: fixed; top: 24px; left: 32px; width: 240px; height: 58px;
    background: url("/Portals/0/Logo%20principal%20CABELTE_white_RGB.png") left center / contain no-repeat;
    z-index: 100; pointer-events: none;
}

/* Tagline: a mesma do login */
.aperture-login:has(.dnnPasswordReset, .dnnSendPassword)::after {
    content: "" !important; position: fixed !important;
    right: -38px !important; bottom: 9px !important;
    width: 211px !important; height: auto !important; aspect-ratio: 16 / 9 !important;
    display: block !important;
    background: url("/Portals/0/Images/Tagline_RGB-01sem%20fundo.png") center / contain no-repeat !important;
    z-index: 100 !important; pointer-events: none !important;
}

/* CARTÃO DE VIDRO — a mesma régua (vmin) e os mesmos números do login */
:is(.dnnPasswordReset, .dnnSendPassword) {
    font-size: 1.75vmin;
    width: min(92vw, 25em) !important; max-height: 94svh; margin: 0 auto !important;
    padding: 2.3em !important; border-radius: 1.5em;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden auto; position: relative;
    animation: fadeInUp 0.6s ease-out;
    font-family: 'Poppins', sans-serif;
}
:is(.dnnPasswordReset, .dnnSendPassword) * { font-family: 'Poppins', sans-serif; }

/* "Our Cabelte" e o subtítulo de cada ecrã */
:is(.dnnPasswordReset, .dnnSendPassword)::before {
    content: "Our Cabelte"; display: block; text-align: center;
    font-weight: 800; font-size: 1.9em; line-height: 1.2; color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    margin: 0.6em auto 0.25em auto;
}
.dnnPasswordReset .dnnPasswordResetContent::before,
.dnnSendPassword [id$="_pnlRecover"]::before {
    display: block; text-align: center;
    font-weight: 600; font-size: 1em; color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    margin: 0 0 1.4em 0;
}
.dnnPasswordReset .dnnPasswordResetContent::before { content: "Definir palavra-passe"; }
.dnnSendPassword [id$="_pnlRecover"]::before { content: "Recuperar palavra-passe"; }

/* O DNN dá 550px ao conteúdo, 56px de margem em cima e 45% aos campos */
:is(.dnnPasswordResetContent, .dnnSendPasswordContent) {
    width: auto !important; margin: 0 !important; padding: 0 !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem {
    margin: 0 0 1.15em 0 !important; padding: 0 !important;
    float: none !important; width: 100% !important; clear: both; text-align: left !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .password-strength-container,
:is(.dnnPasswordReset, .dnnSendPassword) [id$="_passwordContainer"] {
    width: 100% !important; max-width: none !important; display: block !important;
}

/* Label por cima do campo, a branco, como no login (só o recuperar tem label) */
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem .dnnLabel {
    display: block !important; float: none !important; width: auto !important;
    text-align: left !important; padding: 0 !important; margin: 0 0 0.5em 0 !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem .dnnLabel label,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem .dnnLabel label span {
    display: inline !important; float: none !important; width: auto !important; padding: 0 !important;
    color: #fff !important; font-weight: 700 !important; font-size: 0.95em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); letter-spacing: 0.3px;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormHelp,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnTooltip { display: none !important; }

/* Campos em pílula, como no login (também ao focar: o DNN põe fundo e borda azul) */
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"],
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"],
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"]:focus,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"]:focus,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"]:active,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"]:active {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    height: 3em !important; margin: 0 !important;
    padding: 0 1.2em 0 3em !important;
    font-size: 1em !important; color: #333 !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: none !important; border-radius: 2.4em !important;
    background-repeat: no-repeat !important; background-size: 1.25em 1.25em !important;
    background-position: 1.1em center !important;
    line-height: normal; box-sizing: border-box;
    transition: box-shadow .3s ease;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"],
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"]:focus,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 25, 255, 0.2), 0 6px 25px rgba(0, 0, 0, 0.12) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"],
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input.cab-pw-visivel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) input::placeholder { color: #999; font-weight: 400; }
/* Com o olho, o texto não passa por baixo dele */
:is(.dnnPasswordReset, .dnnSendPassword) .cab-pw > input[type] { padding-right: 3.2em !important; }

/* Medidor de força: largura do cartão, barras arredondadas, texto branco */
.dnnPasswordReset .password-strength-container .meter { width: 100% !important; margin-top: 0.4em; }
.dnnPasswordReset .password-strength-container .meter div span { border-radius: 4px; }
.dnnPasswordReset .password-strength-container .meter label,
.dnnPasswordReset .password-strength-container .min-length-text {
    color: #fff !important; font-size: 0.8em; font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Botões: o principal é o botão azul do login; Cancelar é um link branco por baixo */
:is(.dnnPasswordReset, .dnnSendPassword) ul.dnnActions {
    display: grid !important; grid-template-columns: 1fr; gap: 0.8em;
    margin: 1.4em 0 0 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important;
    width: 100% !important; float: none !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) ul.dnnActions li {
    margin: 0 !important; padding: 0 !important; list-style: none !important;
    text-align: center; float: none !important; display: block !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnPrimaryAction,
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnPrimaryAction:hover,
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnPrimaryAction:focus {
    display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box;
    margin: 0 !important; padding: 0.85em 1.4em !important; border: none !important; border-radius: 0.7em !important;
    background: linear-gradient(90deg, #0019FF 0%, #0047FF 100%) !important;
    color: #fff !important; font-weight: 700 !important; font-size: 1em !important;
    text-align: center; text-decoration: none !important; text-shadow: none !important;
    box-shadow: 0 4px 12px rgba(0, 25, 255, 0.3) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnPrimaryAction:hover {
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 25, 255, 0.45) !important; filter: brightness(1.06);
}
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnSecondaryAction,
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnSecondaryAction:hover,
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnSecondaryAction:focus {
    display: inline-block !important; width: auto !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    color: #fff !important; font-weight: 700 !important; font-size: 0.9em !important;
    text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) a.dnnSecondaryAction:hover { text-decoration: underline !important; }

/* Mensagens (instruções, link expirado, sucesso, erros) em vidro branco, não a verde */
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage {
    display: block; float: none !important; width: auto !important; max-width: none !important;
    padding: 0.75em 1em !important; border-radius: 10px !important; margin: 0 0 1.2em 0 !important;
    font-size: 0.85em !important; font-weight: 500; line-height: 1.45;
    color: #fff !important; text-align: left;
    background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage * { color: #fff !important; }
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.dnnFormSuccess {
    background: rgba(52, 199, 89, 0.18) !important; border-color: rgba(52, 199, 89, 0.45) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.dnnFormValidationSummary,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.dnnFormError,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem .dnnFormError {
    background: rgba(255, 59, 48, 0.18) !important; border-color: rgba(255, 59, 48, 0.45) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem .dnnFormError {
    position: static !important; margin: 0.4em 0 0 0 !important; font-size: 0.8em !important; padding: 0.4em 0.8em !important;
}
/* Recuperar: SEM a instrução do DNN ("If you forgot your password...", Tiago, 09-out-2026).
   Só a que vem antes do campo; sucesso e erros continuam a aparecer. */
.dnnSendPassword [id$=_pnlRecover] > .dnnFormMessage:not(.dnnFormSuccess):not(.dnnFormError):not(.dnnFormValidationSummary) { display: none !important; }
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormError::before,
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormError::after { display: none !important; }

/* Telemóvel e ecrãs baixos: as mesmas réguas do login */
@media (max-width: 600px) {
    .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main { padding: 3vmin; }
    .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main::after { top: 16px; left: 20px; width: 190px; height: 46px; }
    .aperture-login:has(.dnnPasswordReset, .dnnSendPassword)::after { right: -33px !important; bottom: 3px !important; width: 162px !important; }
    :is(.dnnPasswordReset, .dnnSendPassword) { font-size: min(4.4vw, 2.3vh); width: 94vw !important; max-height: 96svh; padding: 1.8em !important; }
}
@media (max-height: 520px) {
    :is(.dnnPasswordReset, .dnnSendPassword) { font-size: min(2.7vh, 2.2vw); width: min(94vw, 34em) !important; padding: 1.2em 1.8em !important; }
}

/* =========================================================
   A BARRA DE MENSAGEM DO DNN, MAIS SUAVE (Tiago, 08-out-2026: "odeio esta barra verde")
   É o painel dnnSkinMessage (admin/Skins/modulemessage.ascx): o DNN mete-o FORA do cartão, a
   toda a largura, com o verde/vermelho/azul cheio do default.css.
   ATENÇÃO (11-out-2026): o .ascx dá-lhe a classe dnnModuleMessage, mas o ModuleMessage.cs
   SUBSTITUI-A por "dnnFormMessage dnnFormSuccess" (ou Warning/Info/ValidationSummary). A
   classe nunca chega ao HTML; por isso apanha-se pelo id, que acaba em _dnnSkinMessage
   (até aqui a barra verde passava intacta). Aparece no login ("Login
   Failed", conta bloqueada, "tem de mudar a palavra-passe") e nos ecrãs de recuperar e
   redefinir ("Password Changed Successfully"...).

   Passa a ser um aviso de vidro FIXO no topo, ao centro, com a largura do cartão: não
   empurra o cartão (o login ocupa 100svh e a página não rola) e lê-se sobre a foto. A cor
   fica só no ícone redondo à esquerda. Os textos em PT vêm do script das Page Header Tags.
   Classes do DNN por tipo: dnnFormSuccess, dnnFormValidationSummary/dnnFormError (erro),
   dnnFormWarning, dnnFormInfo.
   Nos ecrãs de recuperar e redefinir o script das Page Header Tags mete a mensagem DENTRO
   do cartão (classe .cab-aviso, ver o bloco a seguir); este aviso fixo fica para o login e
   como recurso se o script não correr.
   ========================================================= */
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso) {
    position: fixed !important; top: 28px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 30rem) !important; max-width: none !important; box-sizing: border-box !important;
    margin: 0 !important; z-index: 120 !important;
    display: flex !important; align-items: center !important; gap: 0.75rem !important;
    padding: 0.8rem 1.1rem 0.8rem 0.85rem !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
    color: #fff !important; text-align: left !important;
    font-family: 'Poppins', sans-serif !important; font-size: 0.9rem !important; font-weight: 500 !important;
    line-height: 1.45 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    animation: cabAvisoEntra 0.35s ease-out both;
}
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso) * {
    color: #fff !important; font-family: 'Poppins', sans-serif !important; background: none !important;
}
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso) .dnnModMessageHeading {
    display: block; font-weight: 700 !important; margin-bottom: 0.15rem;
}
/* O ícone: um círculo de cor com o símbolo branco (informação por omissão) */
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso)::before {
    content: "" !important; flex: 0 0 26px !important; width: 26px !important; height: 26px !important;
    border-radius: 50% !important; display: block !important;
    background: #3D6BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.2v.1'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    box-shadow: 0 0 0 4px rgba(61, 107, 255, 0.22) !important;
}
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso).dnnFormSuccess::before {
    background: #2FB36A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    box-shadow: 0 0 0 4px rgba(47, 179, 106, 0.25) !important;
}
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso):is(.dnnFormValidationSummary, .dnnFormError)::before {
    background: #E5484D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.8v.1'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.25) !important;
}
.aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso).dnnFormWarning::before {
    background: #E5A00D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.8v.1'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    box-shadow: 0 0 0 4px rgba(229, 160, 13, 0.25) !important;
}
/* Só a opacidade: o transform do centramento tem !important e uma animação não lhe toca. */
@keyframes cabAvisoEntra {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Telemóvel: por baixo do logótipo do canto */
@media (max-width: 600px) {
    .aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso) {
        top: 78px !important; width: 94vw !important; font-size: 0.85rem !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .aperture-login:has(.dnnLogin, .dnnPasswordReset, .dnnSendPassword) :is([id$="_dnnSkinMessage"], .dnnModuleMessage):not(.cab-aviso) { animation: none; }
}

/* =========================================================
   A MENSAGEM DENTRO DO CARTÃO (Tiago, 09-out-2026: "deveria aparecer dentro do card
   glassmorphism com menos destaque")
   Nos ecrãs de recuperar e redefinir o script das Page Header Tags (olho-password-header.html)
   muda a mensagem (id ..._dnnSkinMessage) para dentro do cartão e dá-lhe a classe .cab-aviso.
   Fica sem caixa: texto em Poppins, branco, ao centro, com um ícone redondo pequeno por cima.
   Dois casos de sucesso (DNN 10, admin/Security):
     - Recuperar: "If the details entered for X were correct..." e um link "Close"; o DNN
       esconde o formulário. Fica um ecrã de "Verifique o seu email": envelope, título e nota
       de spam (o script mete .cab-aviso-titulo e .cab-aviso-nota) e o "Close" passa a ser o
       botão azul "Voltar ao login".
     - Redefinir: "Password Changed Successfully"; o DNN esconde o formulário e manda para o
       login ao fim de 3 s. Junta-se uma linha a dizer isso.
   ========================================================= */
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso {
    display: block !important; float: none !important; position: static !important; transform: none !important;
    width: auto !important; max-width: 22em !important; margin: 0.6em auto 1.2em auto !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important;
    color: rgba(255, 255, 255, 0.92) !important; text-align: center !important;
    font-family: 'Poppins', sans-serif !important; font-size: 0.9em !important; font-weight: 500 !important;
    line-height: 1.55 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    animation: cabAvisoEntra 0.35s ease-out both;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso * {
    color: inherit !important; font: inherit !important; background: none !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso .dnnModMessageHeading {
    display: block; font-weight: 700 !important; color: #fff !important; margin-bottom: 0.2em;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso .dnnModMessageHeading:empty { display: none; }
/* O ícone: círculo pequeno, a cor diz o tipo (informação por omissão) */
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso::before {
    content: "" !important; display: block !important; position: static !important;
    width: 2.2em !important; height: 2.2em !important; margin: 0 auto 0.75em auto !important;
    border-radius: 50% !important;
    background: rgba(61, 107, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.2v.1'/%3E%3C/svg%3E") center / 55% 55% no-repeat !important;
    box-shadow: 0 0 0 0.3em rgba(61, 107, 255, 0.18) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso.dnnFormSuccess::before {
    background: rgba(47, 179, 106, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 55% 55% no-repeat !important;
    box-shadow: 0 0 0 0.3em rgba(47, 179, 106, 0.2) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso:is(.dnnFormValidationSummary, .dnnFormError)::before {
    background: rgba(229, 72, 77, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.8v.1'/%3E%3C/svg%3E") center / 55% 55% no-repeat !important;
    box-shadow: 0 0 0 0.3em rgba(229, 72, 77, 0.2) !important;
}
:is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso.dnnFormWarning::before {
    background: rgba(229, 160, 13, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.8v.1'/%3E%3C/svg%3E") center / 55% 55% no-repeat !important;
    box-shadow: 0 0 0 0.3em rgba(229, 160, 13, 0.2) !important;
}
/* Redefinir com sucesso (o DNN esconde o formulário e leva ao login ao fim de 3 s, ou ao
   returnurl): visto verde grande, a mensagem como título, a nota com "entrar já" e uma barra
   que se esgota nos 3 s. O script mete .cab-aviso-nota e .cab-aviso-barra. */
.dnnPasswordReset .dnnFormMessage.cab-aviso.dnnFormSuccess {
    margin-top: 1em !important;
    font-size: 1.25em !important; font-weight: 700 !important; color: #fff !important;
}
.dnnPasswordReset .dnnFormMessage.cab-aviso.dnnFormSuccess::before {
    width: 2.6em !important; height: 2.6em !important; margin-bottom: 0.8em !important;
    box-shadow: 0 0 0 0.3em rgba(47, 179, 106, 0.2), 0 6px 18px rgba(47, 179, 106, 0.35) !important;
}
.dnnPasswordReset .dnnFormMessage.cab-aviso .cab-aviso-nota { font-size: 0.7em !important; }
.dnnFormMessage.cab-aviso .cab-aviso-barra {
    display: block; height: 4px; margin: 1.2em auto 0 auto; width: 70%;
    border-radius: 4px; background: rgba(255, 255, 255, 0.2) !important; overflow: hidden;
}
.dnnFormMessage.cab-aviso .cab-aviso-barra::before {
    content: ""; display: block; height: 100%; border-radius: 4px;
    background: #fff; transform-origin: left center;
    animation: cabAvisoBarra 3s linear both;
}
@keyframes cabAvisoBarra {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .dnnFormMessage.cab-aviso .cab-aviso-barra { display: none; }
}

/* Recuperar com sucesso: "Verifique o seu email" */
.dnnSendPassword .dnnFormMessage.cab-aviso.dnnFormSuccess { margin-top: 1em !important; }
.dnnSendPassword .dnnFormMessage.cab-aviso.dnnFormSuccess::before {
    width: 3.2em !important; height: 3.2em !important; margin-bottom: 1em !important;
    background: rgba(0, 25, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / 52% 52% no-repeat !important;
    box-shadow: 0 0 0 0.35em rgba(0, 25, 255, 0.2), 0 6px 18px rgba(0, 25, 255, 0.35) !important;
}
.dnnFormMessage.cab-aviso .cab-aviso-titulo {
    display: block; margin-bottom: 0.45em;
    font-size: 1.25em !important; font-weight: 700 !important; color: #fff !important;
}
.dnnFormMessage.cab-aviso .cab-aviso-nota {
    display: block; margin-top: 1em;
    font-size: 0.85em !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.75) !important;
}
.dnnFormMessage.cab-aviso .cab-aviso-nota a {
    color: #fff !important; font-weight: 700 !important; text-decoration: underline !important;
    text-underline-offset: 2px;
}
/* O "Close" do DNN passa a ser o botão principal "Voltar ao login" */
.dnnSendPassword:has(.cab-aviso.dnnFormSuccess) ul.dnnActions { margin-top: 1.6em !important; }
.dnnSendPassword:has(.cab-aviso.dnnFormSuccess) a.dnnSecondaryAction,
.dnnSendPassword:has(.cab-aviso.dnnFormSuccess) a.dnnSecondaryAction:hover,
.dnnSendPassword:has(.cab-aviso.dnnFormSuccess) a.dnnSecondaryAction:focus {
    display: block !important; width: 100% !important; box-sizing: border-box;
    padding: 0.85em 1.4em !important; border-radius: 0.7em !important;
    background: linear-gradient(90deg, #0019FF 0%, #0047FF 100%) !important;
    font-size: 1em !important; text-decoration: none !important; text-shadow: none !important;
    box-shadow: 0 4px 12px rgba(0, 25, 255, 0.3) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.dnnSendPassword:has(.cab-aviso.dnnFormSuccess) a.dnnSecondaryAction:hover {
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 25, 255, 0.45) !important; filter: brightness(1.06);
}
@media (prefers-reduced-motion: reduce) {
    :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormMessage.cab-aviso { animation: none; }
}

/* =========================================================
   COLAR NA .225 (DNN 10.4.0), Tiago 11-out-2026
   No FIM do Custom CSS / portal.css, depois do bloco "A MENSAGEM DENTRO DO CARTÃO" e
   ANTES da tag que fecha os estilos. São as duas peças que faltam lá:
     1. login-mobile-delta.css (login no telemóvel)
     2. o bloco do telemóvel dos ecrãs de recuperar e redefinir (fim do password-reset-delta.css)
   ========================================================= */

/* =========================================================
   LOGIN NO TELEMÓVEL: O TECLADO JÁ NÃO MEXE NA PÁGINA (Tiago, 10-out-2026)

   COLAR NO FIM do /Portals/0/portal.css, antes da última linha (a tag que fecha o
   bloco de estilos). Só CSS e só no login: tudo preso a .dnnLogin.

   PORQUE É QUE PARTIA (o bloco "LOGIN ZOOM-STABLE" e o "FIT + CENTRAGEM"):
     1. html e body com overflow:hidden e o .dnnLogin com height:100svh: a página não
        faz scroll. Quando o teclado abre, o browser tem de mostrar o campo e só o
        consegue empurrando a página toda (iOS) ou encolhendo-a (Android).
     2. A letra do cartão é min(4.4vw, 2.3vh) no telemóvel e vmin no resto: depende da
        ALTURA do ecrã. Onde o teclado encolhe o ecrã, o cartão inteiro encolhe junto.
     3. Com o teclado aberto o ecrã fica com menos de 520px de altura e entra a regra
        dos "ecrãs baixos": o cartão muda de tamanho e de margens a meio da escrita.
     4. O cartão tinha scroll próprio (max-height 96svh + overflow auto) dentro de uma
        página sem scroll: dois scrolls, um deles escondido.
     5. Logótipo e tagline são position:fixed: com o teclado aberto sobem com o ecrã
        visível e tapam o cartão e o botão Entrar.
     6. Abaixo de 16px de letra num campo o Safari faz zoom ao tocar. Com 2.3vh, num
        iPhone SE (667px de altura) a letra dava 15px.

   O QUE ESTE DELTA FAZ (padrão de login mobile):
     - A página volta a ter scroll normal, o cartão cresce com o conteúdo e o teclado
       só empurra a página o que for preciso.
     - Tamanhos fixos em px no telemóvel (nada em vh, vw ou vmin): o teclado não muda
       nada. Campos com 16px de letra e 52px de altura; alvos de toque com 44px ou mais.
     - No telemóvel o cartão fica em cima (não ao centro): o formulário mora na metade
       de cima, que o teclado nunca tapa.
     - Logótipo passa a absolute (vai com a página); a tagline esconde-se enquanto se
       escreve.
     - Respeita o notch e a barra de baixo do iPhone (env(safe-area-inset-*)).
   Os atributos do teclado (autocomplete, enterkeyhint, sem maiúscula automática) não
   são CSS: estão no script das Page Header Tags (olho-password-header.html).
   ========================================================= */

/* ── Ecrãs de toque (telemóvel e tablet): a página faz scroll, o cartão não ── */
@media (max-width: 600px), (pointer: coarse) {
    html:has(.dnnLogin),
    html:has(.dnnLogin) body {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        overflow-x: clip !important;
    }

    html body .dnnLogin {
        height: auto !important;
        min-height: 100vh;
        min-height: 100svh !important;
        overflow: visible !important;
    }

    /* Sem altura máxima o cartão cresce com o conteúdo e deixa de ter scroll próprio.
       NÃO pôr overflow:visible: os campos do DNN são floats (default.css) e só um
       contexto de formatação próprio os prende dentro do cartão. Com visible, o vidro
       acabava no "Utilizador" e o resto do formulário ficava cá fora (10-out-2026).
       O hidden não corta nada porque a altura é automática. */
    html body .dnnLogin .loginContent,
    html body .dnnLogin .associateContent,
    html body .dnnLogin .registerContent {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    /* O fundo já é fixed; o attachment fixed por cima disso só custa repaints no iOS */
    .dnnLogin::before { background-attachment: scroll !important; }

    /* A foto de fundo não se mexe quando o teclado abre: onde o teclado encolhe o
       ecrã, o fundo (fixed, inset 0) encolhia junto e o cover recortava a foto de
       novo. A altura vem do script das Page Header Tags (--cab-fundo-h: a maior altura
       vista nesta largura, por isso o teclado nunca a baixa). */
    .dnnLogin::before {
        bottom: auto !important;
        height: var(--cab-fundo-h, 100lvh) !important;
    }

    /* Quando o browser rola até ao campo, deixa espaço para o botão Entrar por baixo */
    html body .dnnLogin input[type="text"],
    html body .dnnLogin input[type="password"],
    html body .dnnLogin input[type="email"] {
        scroll-margin-top: 96px;
        scroll-margin-bottom: 160px;
    }

    /* A tagline sai enquanto se escreve: com o teclado aberto ficava por cima do botão */
    .aperture-login:has(.dnnLogin :focus)::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* ── Telemóvel ao alto: tamanhos fixos, cartão em cima ── */
@media (max-width: 600px) {
    html body .dnnLogin {
        align-items: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 88px) 16px calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
    }

    html body .dnnLogin .loginContent,
    html body .dnnLogin .associateContent,
    html body .dnnLogin .registerContent {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 420px !important;
        padding: 24px 20px 20px !important;
        border-radius: 20px !important;
    }

    /* "Our Cabelte" no topo do cartão */
    html body .dnnLogin .loginContent::before,
    html body .dnnLogin .associateContent::before,
    html body .dnnLogin .registerContent::before {
        font-size: 28px !important;
        margin: 4px auto 20px auto !important;
    }

    html body .dnnLogin .dnnFormItem { margin-bottom: 16px !important; }

    /* 16px é o mínimo para o Safari não fazer zoom ao tocar no campo */
    html body .dnnLogin input[type="text"],
    html body .dnnLogin input[type="password"],
    html body .dnnLogin input[type="email"],
    html body .dnnLogin input[id$="_txtUsername"] {
        font-size: 16px !important;
        height: 52px !important;
    }

    /* Botão Entrar e "Esqueci-me": sem os vazios do DNN. Medido a 360px: margem do
       item do botão (16) + margem do ul (20) + o li a 52px por ficar numa linha de um
       inline-block + margem do último item (16) davam ~70px de vazio de cada lado. */
    html body .dnnLogin .dnnFormItem:has(> .dnnPrimaryAction) { margin-bottom: 8px !important; }
    html body .dnnLogin .dnnFormItem:has(.dnnLoginActions) { margin-bottom: 0 !important; }
    html body .dnnLogin .dnnPrimaryAction { margin-bottom: 0 !important; }
    html body .dnnLogin .dnnLoginActions { display: block !important; }
    html body .dnnLogin .dnnLoginActions .dnnActions { margin-top: 0 !important; gap: 0 !important; }
    html body .dnnLogin .dnnLoginActions li { display: block !important; margin: 0 !important; }

    html body .dnnLogin .dnnPrimaryAction,
    html body .dnnLogin #cmdLogin {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    /* "Manter sessão iniciada" e "Esqueci-me da palavra-passe": alvos de 44px */
    html body .dnnLogin .dnnLoginRememberMe,
    html body .dnnLogin a[id$="_passwordLink"] {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }
    /* O link fica a font-size:0 (o texto PT vem do ::after); inline, a linha à volta
       dele somava altura. Em flex ocupa só os 44px. */
    html body .dnnLogin a[id$="_passwordLink"] {
        display: flex !important;
        width: fit-content !important;
    }

    /* Logótipo: vai com a página em vez de flutuar por cima do teclado */
    html body .dnnForm.dnnLogin.dnnClear::after {
        position: absolute !important;
        top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
        left: 20px !important;
        width: 160px !important;
        height: 39px !important;
    }
}

/* ── Telemóvel deitado num ecrã de toque ──
   Substitui a regra dos "ecrãs baixos", que media a letra em vh. Página compacta e
   com scroll; a letra fica nos 16px.
   O min-width:601px é obrigatório: há telemóveis (e as apps) que encolhem o ecrã
   quando o teclado abre, e ao alto com o teclado aberto ficam com ~420px de altura.
   Sem ele, este bloco entrava a meio da escrita (o logótipo sumia e o título
   encolhia). Deitado, um telemóvel tem sempre mais de 600px de largura. */
@media (max-height: 520px) and (min-width: 601px) and (pointer: coarse) {
    html body .dnnLogin {
        align-items: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)) !important;
    }

    html body .dnnLogin .loginContent,
    html body .dnnLogin .associateContent,
    html body .dnnLogin .registerContent {
        font-size: 16px !important;
        width: min(100%, 440px) !important;
        padding: 16px 24px !important;
    }

    html body .dnnLogin .loginContent::before,
    html body .dnnLogin .associateContent::before,
    html body .dnnLogin .registerContent::before {
        font-size: 24px !important;
        margin: 0 auto 12px auto !important;
    }

    html body .dnnLogin input[type="text"],
    html body .dnnLogin input[type="password"],
    html body .dnnLogin input[type="email"],
    html body .dnnLogin input[id$="_txtUsername"] {
        font-size: 16px !important;
        height: 46px !important;
    }

    html body .dnnLogin .dnnFormItem { margin-bottom: 10px !important; }

    /* Deitado não há espaço para os dois cantos: saem logótipo e tagline */
    html body .dnnForm.dnnLogin.dnnClear::after,
    .aperture-login:has(.dnnLogin)::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .dnnLogin .loginContent,
    .dnnLogin .dnnFormItem { animation: none !important; }
}

/* =========================================================
   RECUPERAR E REDEFINIR NO TELEMÓVEL (Tiago, 11-out-2026: "não estão responsivos ao
   telemóvel como está o login normal")
   O mesmo padrão do login-mobile-delta.css, aplicado a estes dois ecrãs. Os problemas
   eram os mesmos do login antes de 10-out: página sem scroll (html/body overflow:hidden e
   .aperture-login-main com height:100svh), letra do cartão em min(4.4vw, 2.3vh) que
   encolhia quando o teclado abria, cartão com scroll próprio, logótipo e tagline fixos a
   tapar o botão, e campos abaixo de 16px (o Safari faz zoom).
   COLAR NO FIM, depois do login-mobile-delta.css e antes da tag que fecha os estilos.
   A altura estável da foto (--cab-fundo-h) vem do script das Page Header Tags.
   ========================================================= */

/* ── Ecrãs de toque: a página faz scroll, o cartão não ── */
@media (max-width: 600px), (pointer: coarse) {
    html:has(.dnnPasswordReset, .dnnSendPassword),
    html:has(.dnnPasswordReset, .dnnSendPassword) body {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        overflow-x: clip !important;
    }

    html body .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main {
        height: auto !important;
        min-height: 100vh;
        min-height: 100svh !important;
    }

    /* Cresce com o conteúdo, sem scroll próprio. hidden e não visible: os campos do
       DNN são floats e só um contexto de formatação próprio os prende no cartão. */
    html body :is(.dnnPasswordReset, .dnnSendPassword) {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    /* A foto não se mexe quando o teclado abre (ver o login-mobile-delta.css) */
    .aperture-login:has(.dnnPasswordReset, .dnnSendPassword)::before {
        background-attachment: scroll !important;
        bottom: auto !important;
        height: var(--cab-fundo-h, 100lvh) !important;
    }

    /* Quando o browser rola até ao campo, deixa ver o botão por baixo */
    html body :is(.dnnPasswordReset, .dnnSendPassword) input[type="text"],
    html body :is(.dnnPasswordReset, .dnnSendPassword) input[type="password"] {
        scroll-margin-top: 96px;
        scroll-margin-bottom: 160px;
    }

    /* A tagline sai enquanto se escreve */
    .aperture-login:has(.dnnPasswordReset :focus, .dnnSendPassword :focus)::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* ── Telemóvel ao alto: tamanhos fixos, cartão em cima ── */
@media (max-width: 600px) {
    html body .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main {
        align-items: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 88px) 16px calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
    }

    html body :is(.dnnPasswordReset, .dnnSendPassword) {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 420px !important;
        padding: 24px 20px 20px !important;
        border-radius: 20px !important;
    }

    /* "Our Cabelte" e o subtítulo */
    html body :is(.dnnPasswordReset, .dnnSendPassword)::before {
        font-size: 28px !important;
        margin: 4px auto 6px auto !important;
    }
    html body .dnnPasswordReset .dnnPasswordResetContent::before,
    html body .dnnSendPassword [id$="_pnlRecover"]::before { margin-bottom: 20px !important; }

    html body :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem { margin-bottom: 16px !important; }

    /* 16px é o mínimo para o Safari não fazer zoom ao tocar no campo */
    html body :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"],
    html body :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"] {
        font-size: 16px !important;
        height: 52px !important;
    }

    /* Botão principal com 52px; Cancelar e Voltar com alvo de 44px */
    html body :is(.dnnPasswordReset, .dnnSendPassword) ul.dnnActions { margin-top: 20px !important; gap: 4px !important; }
    html body :is(.dnnPasswordReset, .dnnSendPassword) a.dnnPrimaryAction {
        display: flex !important; align-items: center !important; justify-content: center !important;
        min-height: 52px !important; font-size: 16px !important;
    }
    html body :is(.dnnPasswordReset, .dnnSendPassword) a.dnnSecondaryAction {
        display: inline-flex !important; align-items: center !important; min-height: 44px !important;
    }
    html body .dnnSendPassword:has(.cab-aviso.dnnFormSuccess) a.dnnSecondaryAction {
        display: flex !important; justify-content: center !important; min-height: 52px !important;
    }

    /* Logótipo: vai com a página em vez de flutuar por cima do teclado */
    html body .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main::after {
        position: absolute !important;
        top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
        left: 20px !important;
        width: 160px !important;
        height: 39px !important;
    }
}

/* ── Telemóvel deitado num ecrã de toque (o min-width:601px como no login: ao alto com
   o teclado aberto há telemóveis com ~420px de altura) ── */
@media (max-height: 520px) and (min-width: 601px) and (pointer: coarse) {
    html body .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main {
        align-items: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)) !important;
    }

    html body :is(.dnnPasswordReset, .dnnSendPassword) {
        font-size: 16px !important;
        width: min(100%, 440px) !important;
        padding: 16px 24px !important;
    }

    html body :is(.dnnPasswordReset, .dnnSendPassword)::before {
        font-size: 24px !important;
        margin: 0 auto 4px auto !important;
    }
    html body .dnnPasswordReset .dnnPasswordResetContent::before,
    html body .dnnSendPassword [id$="_pnlRecover"]::before { margin-bottom: 12px !important; }

    html body :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="text"],
    html body :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem input[type="password"] {
        font-size: 16px !important;
        height: 46px !important;
    }

    html body :is(.dnnPasswordReset, .dnnSendPassword) .dnnFormItem { margin-bottom: 10px !important; }

    /* Deitado não há espaço para os dois cantos: saem logótipo e tagline */
    html body .aperture-login:has(.dnnPasswordReset, .dnnSendPassword) .aperture-login-main::after,
    .aperture-login:has(.dnnPasswordReset, .dnnSendPassword)::after { display: none !important; }
}


</style>