/* ============================================================================
   LOGIN CYBERWATER — céu claro e água, com gotas/bolhas animadas em azul.
   Página auto-contida: não depende de base.css/portal.css.

   MUDANÇA DE PALETA (05/09/2026, proposta "A" escolhida pelo CYBERSYS)
   Era âmbar sobre carvão. Passou a azul sobre branco: é a cor do produto, e um
   sistema de gestão de água que abre a laranja obriga-se a explicar.

   ATENÇÃO, PARA NÃO HAVER SURPRESA: o RESTO do sistema continua âmbar -- o menu
   lateral, os botões, os cartões, o cadeado do módulo Sistema. Esta troca é só
   da porta de entrada e foi decidida assim. Se um dia se mudar o interior, é
   aqui que está a paleta de referência.
   ========================================================================== */

/* Variáveis de cor reutilizadas em todo este ficheiro (paleta água) */
:root {
  --marca-clara: #0b5fa5; /* azul de água — botões, destaques e ícones */
  --marca-media: #073d6b; /* azul profundo — o fundo dos gradientes */
  --marca-ciano: #22a3d6; /* ciano — o brilho do logótipo e das bolhas */
  --card-bg:    #ffffff;  /* fundo do cartão de login */
  --card-borda: #dbe7f1;  /* contorno subtil — usado nos campos, já não no cartão */
  /* Âmbar CYBERSYS. É EXACTAMENTE o mesmo valor do public/css/menu.css (linha 3:
     "Paleta CYBERSYS: fundo #2d2d2d · âmbar #f5a623 · branco #ffffff"), para que
     a borda do cartão de login e a barra lateral sejam a mesma cor e não duas
     cores parecidas. Se um dia o âmbar da marca mudar, muda nos dois sítios. */
  --marca-ambar: #f5a623; /* âmbar da marca — a borda do cartão */
  --txt:        #0e2338;  /* cor de texto principal (azul-tinta escuro) */
  --txt-suave:  #5d7a95;  /* cor de texto secundário (azul acinzentado) */
  --campo-bg:    #f5f9fd; /* fundo dos campos -- sobre cartão branco, um campo branco desaparecia */
  --campo-borda: #d5e3ef; /* contorno dos campos */
}

/* Mensagem de erro do login (escondida por omissao; login.js mostra) */
/* Passou a viver ANTES do botão Entrar (ver public/html/login.html), por isso a
   margem é agora por BAIXO: separa a mensagem do botão, em vez de a colar ao que
   vem depois. */
.login-erro {
  display: none;                    /* escondida até haver um erro para mostrar */
  margin-bottom: .75rem;            /* espaço por baixo, entre o erro e o botão Entrar */
  padding: .55rem .8rem;            /* espaço interno da caixa de erro */
  border-radius: 8px;               /* cantos arredondados */
  font-size: .85rem;                /* tamanho de letra pequeno */
  text-align: center;               /* texto centrado */
  color: #9b1c1c;                   /* vermelho escuro, legível sobre fundo claro */
  background: #fdecea;              /* fundo vermelho muito claro */
  border: 1px solid #f2c3c0;        /* contorno vermelho suave */
}
.login-erro.show { display: block; } /* classe aplicada por JS quando há mensagem a mostrar */

/* Reposição básica: todos os elementos incluem padding/border na largura definida */
* { box-sizing: border-box; }
html, body { height: 100%; } /* garante que o fundo cobre sempre o ecrã inteiro */
body {
  margin: 0;                                                    /* remove margem por omissão do browser */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;    /* tipo de letra da página */
  color: var(--txt);                                             /* cor de texto principal */
  /* 14/09/2026: passou de "overflow:hidden" para isto. O cartão ganhou o bloco
     de contactos de suporte (telefone/whatsapp/e-mail/horário) e em ecrãs baixos
     (telemóvel em paisagem, por ex.) pode ficar mais alto que a janela -- com
     overflow:hidden esse conteúdo ficava simplesmente inacessível, sem scroll
     nenhum para lá chegar. Continua sem scroll horizontal. */
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center; justify-content: center;            /* centra o cartão quando cabe inteiro no ecrã */
  /* Nos browsers que entendem a palavra-chave "safe" (Chrome/Firefox recentes):
     quando o cartão NÃO cabe, alinha ao topo em vez de cortar o topo a meio do
     scroll -- o efeito clássico de centrar com overflow. Num browser que não
     reconheça "safe center" esta declaração é inválida e ignorada por inteiro,
     ficando o center simples de cima; nunca fica sem nenhum dos dois. */
  align-items: safe center; justify-content: safe center;
  min-height: 100vh;                                             /* ocupa sempre a altura toda da janela */
  padding: 16px 0;                                               /* respiro em cima/baixo quando há scroll */
}

/* ---- FUNDO: gradiente escuro "carvão" da marca (mantém a animação de gotas/bolhas) ---- */
.oceano {
  position: fixed; inset: 0; z-index: -2; /* cobre todo o ecrã, atrás de tudo o resto */
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(34,163,214,.30), transparent 60%), /* brilho superior, em ciano */
    linear-gradient(180deg, #f6fbff 0%, #eaf3fb 35%, #d9e9f6 70%, #c6dcee 100%);       /* degradê claro: céu em cima, água em baixo */
}
.oceano::after {
  content: ""; position: absolute; inset: 0; /* camada extra sobreposta ao fundo */
  background:
    radial-gradient(600px 600px at 20% 30%, rgba(34,163,214,.14), transparent 60%), /* brilho difuso 1 */
    radial-gradient(500px 500px at 80% 70%, rgba(11,95,165,.10), transparent 60%);  /* brilho difuso 2 */
  animation: respirar 9s ease-in-out infinite alternate; /* efeito de "respiração" do fundo */
}
/* Animação usada por .oceano::after: alterna opacidade e escala lentamente */
@keyframes respirar {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.08); }
}

/* ---- ONDA no fundo (imagem SVG desenhada directamente no HTML) ---- */
.onda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; /* colada ao fundo do ecrã */
  width: 100vw; height: 160px; opacity: .5; display: block;   /* dimensão e transparência da onda */
}

/* ---- GOTAS / BOLHAS (elementos criados dinamicamente por login.js) ----
   PARADAS, por pedido do CYBERSYS (05/09/2026): "as bolhas e pingos podem ser
   fixos". Continuam lá, espalhadas ao acaso pelo ecrã, mas já não sobem nem
   caem -- são textura de fundo e não movimento.

   As animações "subir" e "cair", e a variável --desvio que a primeira usava,
   foram removidas por inteiro em vez de ficarem comentadas: CSS morto que
   ninguém aplica é CSS que o próximo a mexer aqui tem de ler para perceber que
   não faz nada. O login.js deixou de definir animationDuration/Delay. */
.gotas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* contentor das gotas/bolhas, não intercepta cliques */
.bolha {
  position: absolute; border-radius: 50%; /* posicionada por JS (top/left); forma circular */
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(34,163,214,.18) 45%, rgba(11,95,165,.08) 70%); /* efeito de brilho/bolha */
  border: 1px solid rgba(11,95,165,.16); /* contorno subtil da bolha -- sobre fundo claro tem de ser escuro */
  opacity: .7; /* opacidade fixa -- antes vinha da animação, que já não existe */
}
.gota {
  position: absolute; width: 2px; height: 18px; border-radius: 2px; /* posicionada por JS (top/left); forma de traço fino */
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(11,95,165,.55)); /* degradê transparente->azul */
  opacity: .55; /* opacidade fixa -- antes vinha da animação, que já não existe */
}

/* ---- CARTÃO de login ---- */
.cartao {
  position: relative; z-index: 1;                                  /* fica por cima do fundo animado */
  width: min(94vw, 420px);                                         /* largura responsiva, até 420px */
  /* 08/09/2026: era .92 -- branco quase opaco, que tapava o fundo animado e
     deixava o desfoque abaixo sem nada para mostrar. A .72 o oceano, a onda e
     as bolhas passam a ver-se atraves do cartao, que era o ponto de ter aqui
     um backdrop-filter. Abaixo de .65 o texto dos campos comeca a competir
     com as bolhas -- .72 e o limite confortavel. */
  background: rgba(255,255,255,.72);                               /* vidro: deixa passar o fundo animado */
  backdrop-filter: blur(16px) saturate(160%);                      /* desfoca o que está por trás (efeito vidro) */
  -webkit-backdrop-filter: blur(16px) saturate(160%);              /* mesmo efeito, compatibilidade Safari */
  border: 2px solid var(--marca-ambar);                            /* borda âmbar, a mesma cor da barra lateral do menu */
  border-radius: 22px;                                             /* cantos bem arredondados */
  /* A sombra passou a levar um halo âmbar muito diluído (.16) em vez do azul que
     tinha. Sem isso, a borda laranja ficava com um contorno de luz azul colado
     por fora e lia-se como duas bordas em vez de uma. */
  box-shadow: 0 30px 70px -24px rgba(7,61,107,.35), 0 0 0 6px rgba(245,166,35,.16); /* sombra azulada + halo âmbar */
  padding: 38px 34px 26px;                                         /* espaço interno do cartão */
}

/* Marca / Logo */
.marca { text-align: center; margin-bottom: 22px; } /* centra o bloco da marca e afasta do conteúdo seguinte */
.logo {
  width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 20px; /* círculo/quadrado arredondado, centrado */
  display: flex; align-items: center; justify-content: center;         /* centra o ícone lá dentro */
  background: linear-gradient(140deg, #22a3d6, #0b5fa5 55%, #073d6b);  /* degradê azul da marca */
  box-shadow: 0 14px 30px -8px rgba(11,95,165,.55), inset 0 1px 0 rgba(255,255,255,.4); /* sombra + brilho interior */
  color: #fff; font-size: 2rem;                                        /* cor e tamanho do ícone */
}
.marca h1   { font-size: 1.7rem; font-weight: 800; letter-spacing: .14em; margin: 0; color: var(--txt); } /* título "CYBERWATER" */
.marca .sub { color: var(--txt-suave); font-size: .86rem; margin-top: 3px; }                        /* subtítulo por baixo do título */

/* Selector de idioma (pills PT/EN/FR) */
/* Selector de idioma (pílulas PT/EN/FR). Desceu para o rodapé do cartão, por
   isso a margem é só por cima: já não separa nada por baixo. */
.idiomas { display: flex; gap: 8px; justify-content: center; margin: 16px 0 0; } /* botões de idioma lado a lado, centrados */
.idiomas button {
  background: var(--campo-bg); border: 1px solid var(--campo-borda); /* fundo/contorno subtis (estado normal) */
  color: var(--txt-suave); font-size: .72rem; font-weight: 700; letter-spacing: .05em; /* texto do botão */
  padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: .2s;  /* forma de "pílula" e animação suave */
}
.idiomas button.active {
  background: linear-gradient(135deg, var(--marca-ciano), var(--marca-clara)); color: #fff; border-color: transparent; /* destaque do idioma activo */
  box-shadow: 0 6px 16px -6px rgba(11,95,165,.55); /* sombra colorida no botão activo */
}

/* A faixa .aba/.seg ("SENHA") foi removida em 05/09/2026 com a marcação que a
   usava -- era um separador único, não clicável, com o mesmo destaque do botão
   Entrar. Ver a nota no public/html/login.html. */

/* Campos do formulário (utilizador / senha) */
.campo { margin-bottom: 16px; } /* espaço entre campos consecutivos */
.campo label { display: block; font-size: .78rem; color: var(--txt-suave); margin-bottom: 7px; font-weight: 600; } /* rótulo por cima do campo */
.shell {
  display: flex; align-items: center; gap: 10px;                        /* alinha ícone + campo de texto */
  background: var(--campo-bg); border-radius: 11px; padding: 0 12px;     /* fundo azul muito claro, cantos arredondados */
  border: 1px solid var(--campo-borda); transition: .2s;                 /* contorno visível: sobre cartão branco, um campo branco desaparecia */
}
.shell:focus-within { border-color: var(--marca-clara); box-shadow: 0 0 0 4px rgba(11,95,165,.15); } /* destaque quando o campo tem foco */
.shell .bi { color: #6b8299; font-size: 1.05rem; } /* cor/tamanho do ícone dentro do campo */
.shell input {
  flex: 1; border: 0; outline: 0; background: transparent; color: var(--txt); /* campo ocupa o espaço restante, sem contorno próprio */
  padding: 13px 0; font-size: .95rem;                                         /* espaço vertical e tamanho do texto */
}
.shell input::placeholder { color: #93a9bd; } /* cor do texto de exemplo (placeholder) */
/* Selector de empresa (multi-empresa): mesmo visual do input, sem contorno proprio */
.shell select {
  flex: 1; border: 0; outline: 0; background: transparent; color: var(--txt); /* ocupa o espaco restante, sem contorno proprio (igual ao input acima) */
  padding: 13px 0; font-size: .95rem; appearance: none;                    /* espaco vertical/tamanho igual ao input; remove a seta nativa do browser */
}
/* Remove o fundo amarelo que o Chrome/Safari aplicam ao preenchimento automático (autofill) */
.shell input:-webkit-autofill,
.shell input:-webkit-autofill:hover,
.shell input:-webkit-autofill:focus,
.shell input:-webkit-autofill:active {
  -webkit-text-fill-color: #0e2338 !important;                  /* força a cor do texto autopreenchido */
  -webkit-box-shadow: 0 0 0 1000px #f5f9fd inset !important;    /* "pinta" o fundo com a cor do campo, por cima do amarelo */
          box-shadow: 0 0 0 1000px #f5f9fd inset !important;    /* mesma técnica, sintaxe sem prefixo */
  caret-color: #0e2338;                                         /* cor do cursor de texto */
  border-radius: 11px;                                        /* mantém os cantos arredondados do campo */
  transition: background-color 6000s ease-in-out 0s;          /* atraso enorme = impede o Chrome de reaplicar o amarelo */
}
.toggle-pw { background: none; border: 0; color: #6b8299; cursor: pointer; font-size: 1.05rem; display: flex; padding: 4px; } /* botão de mostrar/esconder senha */
.toggle-pw:hover { color: var(--marca-clara); } /* cor ao passar o rato por cima */

/* Botão "Entrar" */
.btn-entrar {
  width: 100%; border: 0; border-radius: 12px; padding: 14px; cursor: pointer; /* ocupa toda a largura, cantos arredondados */
  font-weight: 700; font-size: .98rem; color: #fff; margin-top: 4px;            /* texto do botão */
  background: linear-gradient(135deg, #0b5fa5, #094e88 55%, #073d6b);          /* degradê azul da marca */
  box-shadow: 0 16px 34px -12px rgba(7,61,107,.55); transition: .2s;           /* sombra + animação suave */
}
.btn-entrar:hover  { filter: brightness(1.08); transform: translateY(-1px); } /* efeito ao passar o rato: mais brilho, sobe ligeiramente */
.btn-entrar:active { transform: translateY(0); }                              /* volta à posição normal ao clicar */

/* Link "Esqueci-me da senha" */
.esqueci {
  display: block; text-align: center; margin-top: 16px; color: var(--marca-clara); /* texto centrado, cor de destaque */
  font-size: .85rem; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; width: 100%; /* aparência de link/botão */
}
.esqueci:hover { text-decoration: underline; } /* sublinhado ao passar o rato */

/* Rodapé e dica de utilização */
.rodape { text-align: center; margin-top: 24px; font-size: .72rem; color: var(--txt-suave); letter-spacing: .04em; } /* rodapé "powered by" */
.rodape strong { color: var(--txt); } /* destaque do nome dentro do rodapé */
.dica { text-align: center; color: var(--txt-suave); font-size: .74rem; margin-top: 14px; line-height: 1.5; } /* dica sobre como entrar (operador/cliente) */

/* ---- TOASTS (avisos flutuantes, usados por outras páginas que reutilizam este estilo) ---- */
.toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 1080; } /* contentor no canto inferior direito */
.toast-mini {
  background: #fff; color: #1f1d1b; border: 1px solid #e2e8f0; border-left: 4px solid #1b89c4; /* cartão branco com barra colorida à esquerda (azul = categoria "informação", distinta do âmbar já usado no aviso) */
  padding: 12px 16px; border-radius: 10px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45);        /* espaço interno e sombra */
  font-size: 13.5px; min-width: 260px; max-width: 340px;                                          /* tamanho do texto e largura do toast */
  display: flex; align-items: center; gap: 10px; animation: toastEntra .25s ease;                 /* alinha ícone+texto, anima a entrada */
}
.toast-mini .bi          { font-size: 18px; color: #1b89c4; }   /* ícone por omissão (informação) — mantido azul para não colidir com a cor de aviso (âmbar) */
.toast-mini.success      { border-left-color: #10b981; }        /* barra verde — sucesso */
.toast-mini.success .bi  { color: #10b981; }                    /* ícone verde — sucesso */
.toast-mini.error        { border-left-color: #ef4444; }        /* barra vermelha — erro */
.toast-mini.error .bi    { color: #ef4444; }                    /* ícone vermelho — erro */
.toast-mini.warn         { border-left-color: #f59e0b; }        /* barra laranja — aviso */
.toast-mini.warn .bi     { color: #f59e0b; }                    /* ícone laranja — aviso */
/* Animação de entrada do toast: desliza da direita e aparece */
@keyframes toastEntra {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* O bloco #nomeEmpresaLogin foi removido em 05/09/2026, com o elemento e o
   pedido que o preenchiam. Ver as notas em public/html/login.html e
   public/js/login.js. */

/* Browser sem backdrop-filter (Firefox antigo, WebView velha de Android): sem o
   desfoque, o cartao a .72 deixa as bolhas do fundo a passar por tras do texto
   dos campos. Nesses casos volta-se ao quase opaco de antes -- perde-se o
   vidro, nao a legibilidade. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cartao { background: rgba(255, 255, 255, .95); }
}

/* ---- BOTÃO "Suporte Técnico" (abre o drawer) ----
   3ª versão do contacto de suporte (14/09/2026): primeiro viveu dentro do
   cartão, depois foi para um painel ao lado -- nenhuma agradou ao CYBERSYS.
   Passa a ser este botão discreto, do mesmo formato/família visual dos
   pills de idioma, que abre um drawer (ver .suporte-drawer mais abaixo). */
.btn-suporte {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px;
  background: var(--campo-bg); border: 1px solid var(--campo-borda); color: var(--marca-clara);
  font-size: .82rem; font-weight: 700;
  padding: 10px 14px; border-radius: 11px; cursor: pointer; transition: .2s;
}
.btn-suporte:hover { background: rgba(11,95,165,.1); border-color: var(--marca-clara); }
.btn-suporte .bi { font-size: 1rem; }

/* ---- DRAWER de suporte técnico ----
   Fundo escurecido + painel que desliza a partir da direita. Ambos escondidos
   por omissão (opacity/transform) e revelados com a classe .on, que
   public/js/login.js liga ao clique no .btn-suporte (ver #suporteDrawer). */
.suporte-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(7,20,33,.55);
  opacity: 0; pointer-events: none;                 /* invisível e "clique-através" enquanto o drawer está fechado */
  transition: opacity .25s ease;
}
.suporte-backdrop.on { opacity: 1; pointer-events: auto; }

.suporte-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
  width: min(88vw, 280px);  /* 15/09/2026: era 340px -- o CYBERSYS achou o drawer grande demais no desktop/tablet */
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.97);                /* mais opaco que o cartão: aqui não há fundo animado por trás a valer a pena mostrar */
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-left: 2px solid var(--marca-ambar);         /* mesmo acento âmbar da borda do cartão de login */
  box-shadow: -20px 0 60px -20px rgba(7,61,107,.45);
  padding: 20px 18px 26px;  /* 15/09/2026: reduzido junto com a largura, para o telefone/e-mail nao quebrarem para 2 linhas */
  overflow-y: auto;
  transform: translateX(100%);                       /* escondido para lá da borda direita do ecrã */
  transition: transform .3s ease;
}
.suporte-drawer.on { transform: translateX(0); }

/* Logotipo da CYBERSYS, quando carregado (Configuracoes -> Empresas, so
   super_admin). Fica ACIMA do cabecalho, nao dentro dele: um logotipo em
   forma de rectangulo largo (o caso mais comum) fica esquisito espremido ao
   lado do titulo e do botao de fechar. */
.suporte-logo { display: block; align-self: center; max-width: 78%; max-height: 64px; margin: 0 auto 16px; object-fit: contain; }  /* 15/09/2026: centrado (pedido do CYBERSYS) -- align-self porque o drawer e flex-column */

.suporte-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.suporte-fechar {
  background: var(--campo-bg); border: 1px solid var(--campo-borda); color: var(--txt-suave);
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s;
}
.suporte-fechar:hover { background: rgba(11,95,165,.1); color: var(--marca-clara); }

.suporte-titulo {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--txt-suave);
  display: flex; align-items: center; gap: 6px;
}
.suporte-intro { color: var(--txt-suave); font-size: .82rem; line-height: 1.5; margin: 4px 0 16px; }

.suporte-contactos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.suporte-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--campo-bg); border: 1px solid var(--campo-borda);
  color: var(--marca-clara); text-decoration: none;
  font-size: .88rem; font-weight: 600;
  padding: 10px 10px; border-radius: 11px; transition: .2s;  /* 15/09/2026: menos padding para o e-mail caber numa linha no drawer mais estreito */
}
.suporte-item span { overflow-wrap: break-word; word-break: normal; }   /* quebra so em pontos naturais (ver <wbr> no HTML, depois do @) -- 'anywhere' partia o dominio ao meio (ex: 'co.' / 'mz') */
.suporte-item:hover { background: rgba(11,95,165,.1); border-color: var(--marca-clara); }
.suporte-item .bi { font-size: 1.05rem; flex-shrink: 0; }

/* Linha do telefone: o mesmo número serve chamada e WhatsApp, por isso é UMA
   linha com o número e os DOIS ícones de acção lado a lado, em vez de duas
   linhas a repetir o número (pedido do CYBERSYS, 14/09/2026). Só esta linha
   não é ela própria um link -- quem age são os dois botões redondos. */
.suporte-item-tel { padding: 8px 6px 8px 12px; gap: 8px; cursor: default; }
.suporte-item-tel:hover { background: var(--campo-bg); border-color: var(--campo-borda); } /* não reage ao rato -- quem reage são os dois ícones */
.suporte-item-tel span { flex: 1; color: var(--txt); }
.suporte-item-icones { display: flex; gap: 5px; flex-shrink: 0; }
.suporte-mini-icone {
  display: flex; align-items: center; justify-content: center;
  width: 31px; height: 31px; border-radius: 9px;
  color: #fff; font-size: 1rem; text-decoration: none; transition: .2s;
}
.suporte-icone-ligar { background: var(--marca-clara); }        /* azul da marca -- a acção "ligar" */
.suporte-icone-ligar:hover { background: #094e88; }
.suporte-icone-whatsapp { background: #22a355; }                /* verde WhatsApp -- único ícone colorido fora da paleta da marca */
.suporte-icone-whatsapp:hover { background: #1c8a48; }

.suporte-horario {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--txt-suave); font-size: .78rem; line-height: 1.6;
  padding-top: 14px; border-top: 1px solid var(--card-borda);
}
.suporte-horario .bi { margin-top: 2px; flex-shrink: 0; }

/* Ecrãs muito estreitos (≤380px): o cartão ganha o mesmo ajuste de sempre e o
   drawer passa a ocupar o ecrã quase todo em vez de ficar preso a 340px. */
@media (max-width: 380px) {
  .cartao { padding: 30px 22px 22px; }
  .suporte-drawer { width: 92vw; padding: 18px 18px 24px; }
}

/* Ecrãs largos (tablet/desktop): o cartão ganha mais respiro vertical, já
   que sobra espaço à volta em vez de a janela ser do tamanho do cartão. */
@media (min-width: 700px) {
  .cartao { padding: 42px 38px 30px; }
}

/* ---- Licença suspensa (CYBERPORTAL, 27/09/2026) ----------------------------
   Bloco #licencaSuspensa em login.html, preenchido por licencaSuspensa.js.
   Substitui o formulário enquanto a licença estiver suspensa. */
.licenca-escondido { display: none !important; }        /* formulário e "esqueci" escondidos com a licença suspensa */
.licenca-suspensa {
  margin-bottom: .9rem;                                  /* espaço até ao rodapé/botões */
  padding: .9rem 1rem;                                   /* espaço interno */
  border-radius: 10px;                                   /* cantos arredondados */
  background: #fff4f4;                                   /* fundo vermelho muito claro */
  border: 1px solid #f0c2c2;                             /* contorno vermelho suave */
  color: var(--txt);                                     /* texto principal */
  text-align: left;                                      /* listas alinhadas à esquerda */
  font-size: .88rem;                                     /* letra ligeiramente pequena */
}
.licenca-titulo { font-weight: 700; color: #9b1c1c; font-size: 1.05rem; margin-bottom: .4rem; } /* título a vermelho */
.licenca-titulo .bi { margin-right: .3rem; }             /* espaço entre o ícone e o texto */
.licenca-texto { margin: 0 0 .6rem; line-height: 1.4; } /* parágrafo explicativo */
.licenca-contactos { margin: 0 0 .5rem; font-size: .82rem; color: var(--txt-suave); } /* contactos da CYBERSYS */
.licenca-ligacao { display: block; margin-bottom: .6rem; color: var(--marca-clara); font-weight: 600; } /* ligação para a área de cliente */
.licenca-botao-cybersys {                                /* botão discreto para a CYBERSYS entrar */
  width: 100%; padding: .45rem; border-radius: 8px; border: 1px solid var(--campo-borda);
  background: transparent; color: var(--txt-suave); font-size: .8rem; cursor: pointer;
}
.licenca-botao-cybersys:hover { background: var(--campo-bg); } /* realce ao passar */
.licenca-suspensa.licenca-compacto .licenca-ligacao,
.licenca-suspensa.licenca-compacto .licenca-botao-cybersys { display: none; } /* depois de "Sou da CYBERSYS": só o essencial */