/*
 * Identidade visual da Lonntra (um produto Tenniva), design system v1.0 (docs/design/lonntra/).
 *
 * As cores, fontes, raios e medidas do design system estão em tokens.css (--lt-*, --bg-*, --text-*, --action, ...),
 * carregado antes deste ficheiro. Os --marca-* abaixo são os nomes antigos, usados em todo o CSS: apontam para os
 * tokens novos, para não ter de mudar ~2 500 sítios de uma vez. Código novo: usar os tokens de tokens.css.
 *
 * Nome, slogan e empresa: config/params.php -> 'marca'. Logótipo: views/layouts/_marca.php (ficheiros oficiais em
 * web/imagem/marca/lonntra/). O tema.css (gerado por gerar-tema.py) liga as cores do tema Elisyam a estas variáveis.
 */
:root {
  /* Atlântico: estrutura, menu, texto forte */
  --marca-primaria: var(--lt-atlantico);
  --marca-primaria-escura: #0a1f2c;
  --marca-primaria-clara: var(--bg-nav-active);
  --marca-primaria-rgb: 14, 42, 59;

  /* Sinal (âmbar): só prazos e avisos, nunca botões do produto (≤ 5% do ecrã) */
  --marca-destaque: var(--lt-sinal);
  --marca-destaque-escuro: #d18e26;
  --marca-destaque-texto: #8a5a12;   /* âmbar legível sobre branco (texto) */
  --marca-destaque-rgb: 242, 169, 59;
  --marca-sobre-destaque: var(--lt-atlantico);   /* sobre o Sinal o texto é sempre Atlântico */

  /* Maré: ação (botão primário, links, seleção, foco) */
  --marca-acao: var(--action);
  --marca-acao-hover: var(--action-hover);
  --marca-acao-clara: var(--lt-mare-clara);
  --marca-acao-rgb: 15, 110, 104;

  /* Neutros */
  --marca-tinta: var(--lt-atlantico);
  --marca-basalto: var(--lt-pedra);
  --marca-suave: #84949a;            /* só traços e ícones decorativos: texto nunca mais claro que a Pedra */
  --marca-nevoa: var(--lt-sal);
  --marca-linha: var(--lt-bruma);

  /* Menu lateral */
  --marca-lateral: var(--bg-nav);
  --marca-lateral-hover: var(--bg-nav-active);
  --marca-lateral-texto: var(--text-on-dark-muted);

  /* Estados */
  --marca-sucesso: var(--ok);
  --marca-perigo: var(--danger);
  --marca-perigo-rgb: 179, 54, 42;

  --marca-fonte-titulo: var(--font-display);
  --marca-fonte-texto: var(--font-sans);
  --marca-fonte-numeros: var(--font-mono);
}

/* ---------- Base ---------- */
body {
  font-family: var(--marca-fonte-texto);
  background-color: var(--marca-nevoa);
  color: var(--marca-basalto);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--marca-fonte-titulo);
  color: var(--marca-tinta);
  letter-spacing: -0.01em;
}
#preloader { background-color: #fff; }
/* ecrã de carregamento: sai quando o HTML está pronto (ui.js), sem esperar por imagens e fontes.
   Fica aqui (e não em ui.css) porque marca.css é carregado em todas as páginas, incluindo o login. */
#preloader { transition: opacity 150ms ease, visibility 0s linear 150ms; }
.pagina-pronta #preloader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Logótipo (views/layouts/_marca.php) ---------- */
.marca-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  line-height: 1;
}
.marca-logo svg { flex: none; display: block; }
/* versão positiva (sobre branco e Sal) */
.marca-logo .marca-caixa { fill: var(--lt-atlantico); }
.marca-logo .marca-l { fill: var(--lt-sal); }
.marca-logo .marca-sinal { fill: var(--lt-sinal); }
.marca-logo--clara { color: var(--lt-atlantico); }
/* versão negativa (sobre Atlântico): a caixa fica um tom acima para se ver */
.marca-logo--escura { color: var(--lt-sal); }
.marca-logo--escura .marca-caixa { fill: var(--bg-nav-active); }

/* ---------- Header ---------- */
.main-header .navbar { border-bottom: 1px solid var(--marca-linha); }
.main-header .logo .marca-logo { height: 100%; }
.main-header .logo-mini .marca-nome { display: none; }

/* ---------- Sidebar ---------- */
.default-sidebar,
.default-sidebar > .side-navbar { background: var(--marca-lateral) !important; }
.default-sidebar > .side-navbar ul a,
.default-sidebar > .side-navbar a { color: var(--marca-lateral-texto) !important; }
.default-sidebar > .side-navbar ul a:hover,
.default-sidebar > .side-navbar a:hover {
  color: #fff !important;
  background-color: var(--marca-lateral-hover) !important;
}
.default-sidebar > .side-navbar a[aria-expanded="true"],
.default-sidebar > .side-navbar li.is-aberto > a,
.default-sidebar > .side-navbar a[aria-current="page"] {
  color: #fff !important;
  background-color: var(--marca-lateral-hover) !important;
  font-weight: 600;
}
.default-sidebar > .side-navbar a[aria-expanded="true"] i,
.default-sidebar > .side-navbar li.is-aberto > a i,
.default-sidebar > .side-navbar a[aria-current="page"] i { color: #7fd1c7 !important; }
.default-sidebar > .side-navbar ul ul { background: rgba(0, 0, 0, 0.12); }

/* ---------- Ações ---------- */
/* botão primário: Maré, um por ecrã (o âmbar é aviso, nunca ação) */
.btn-primary,
.btn-gradient-01, .btn-gradient-02, .btn-gradient-03, .btn-gradient-04, .btn-gradient-05 {
  background: var(--marca-acao) !important;
  border-color: var(--marca-acao) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-gradient-01:hover, .btn-gradient-02:hover, .btn-gradient-03:hover,
.btn-gradient-04:hover, .btn-gradient-05:hover {
  background: var(--marca-acao-hover) !important;
  border-color: var(--marca-acao-hover) !important;
}
.btn-success { background-color: var(--marca-sucesso); border-color: var(--marca-sucesso); }
.label-warning, .badge-warning, .navbar .label-warning {
  background-color: var(--marca-destaque) !important;
  color: var(--marca-sobre-destaque) !important;
}
:focus-visible { outline: 2px solid var(--marca-acao); outline-offset: 2px; }
.form-control:focus {
  border-color: var(--marca-acao);
  box-shadow: var(--focus-ring);
}

/* Números, totais e documentos alinham em coluna */
.description-header, .kv-align-right, td.text-right, .text-right .form-control {
  font-variant-numeric: tabular-nums;
}

/* ---------- Rodapé ---------- */
.main-footer { color: var(--marca-basalto); border-top: 1px solid var(--marca-linha); }
.main-footer a { color: var(--marca-primaria); font-weight: 500; }

/* ---------- Login (views/site/login.php, _login_marca.php; cena em login-cena.css) ----------
 * Tamanhos em px, não em rem: o layout do login fixa html em 10px (base do Bootstrap 3) e o rem encolhia o texto.
 * Mesma tipografia dos ecrãs internos: Plex Sans 400 no texto, Bricolage nos títulos, Plex Mono nos números. */
.login {
  display: grid;
  grid-template-columns: 58fr 42fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  font: 400 15px/24px var(--font-sans);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

/* painel da marca */
.login-marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40px 56px 0;
  color: var(--text-on-dark);
  background: var(--bg-nav) url(../../imagem/marca/login-fundo.svg) top left / cover no-repeat;
}
.login-texto { margin-top: clamp(32px, 7vh, 64px); max-width: 480px; position: relative; z-index: 2; }
.login-slogan {
  margin: 0;
  font: 800 clamp(44px, 4.4vw, 64px)/1 var(--font-display);
  letter-spacing: -0.045em;
  color: #fff;
}
.login-slogan em { font-style: normal; }
.login-apoio { margin: 16px 0 0; font-size: 17px; line-height: 27px; color: var(--text-on-dark-muted); max-width: 34ch; }
.login-pontos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.login-pontos li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-on-dark); }
.login-pontos li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fd1c7; }
.login-assinatura {
  position: absolute;
  left: 56px;
  bottom: 36px;
  font: 500 11px/16px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.login-assinatura b { color: #fff; font-weight: 500; }

/* formulário */
.login-lado { display: flex; flex-direction: column; padding: 32px 56px; min-width: 0; }
.login-ajuda { align-self: flex-end; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.login-ajuda a, .login-ajuda a:hover { color: var(--action); font-weight: 600; margin-left: 4px; }
.login-ajuda a:hover { color: var(--action-hover); }
.login-form { margin: auto 0; width: 100%; max-width: 384px; align-self: center; padding-block: 32px; }
.login-form h1 { margin: 0; font: 700 32px/38px var(--font-display); letter-spacing: -0.025em; color: var(--text-strong); }
.login-sub { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--text-muted); }
.login-campos { margin-top: 28px; }
.login-campo { margin: 0 0 18px; }
.login-campo .control-label, .login-campo label {
  display: block;
  margin-bottom: 6px;
  font: 600 14px/20px var(--font-sans);
  color: var(--text-strong);
}
.login-campo label::after { content: none !important; } /* sem o asterisco: os dois campos são obrigatórios */
.login-inp {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 6px 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-muted);
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms;
}
.login-inp:hover { border-color: #c5d0cd; }
.login-inp svg { flex: none; }
.login-inp:focus-within { border-color: var(--action); box-shadow: var(--focus-ring); color: var(--action); }
.login .login-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: 0;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 15px var(--font-sans);
  color: var(--text-strong);
}
.login .login-input::placeholder { color: var(--text-muted); opacity: .75; font-size: inherit; } /* o Elisyam põe 0.85rem (8,5px aqui) */
.login-mostrar {
  flex: none;
  height: 36px;
  border: 0;
  background: transparent;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font: 600 13px var(--font-sans);
  color: var(--action);
  cursor: pointer;
  transition: background-color 150ms;
}
.login-mostrar:hover { background: var(--bg-subtle); }
.login-mostrar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.login-campo.has-error .login-inp { border-color: var(--danger); }
.login-campo.has-error .login-inp:focus-within { box-shadow: 0 0 0 3px rgb(179 54 42 / .2); color: var(--danger); }
.login-campo .help-block { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--danger); }
.login-campo .help-block:empty { display: none; }
.login-esqueceu { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 24px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--action);
  color: #fff;
  font: 600 15px var(--font-sans);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
.login-btn svg { transition: transform 150ms cubic-bezier(0.2, 0, 0, 1); }
.login-btn:hover { background: var(--action-hover); }
.login-btn:hover svg { transform: translateX(3px); }
.login-btn:active { transform: scale(0.985); }
.login-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* o Elisyam força font-weight: 300 !important em todos os botões */
.login .login-btn, .login .login-mostrar { font-weight: 600 !important; }
.login-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 12px; line-height: 18px; color: var(--text-muted); }
.login-seguro svg { width: 13px; height: 13px; }
.login-rodape {
  display: flex;
  justify-content: space-between;
  font: 400 12px/18px var(--font-mono);
  color: var(--text-muted);
}

/* tablet e telemóvel: topo Atlântico com a marca, formulário numa folha branca */
@media (max-width: 991px) {
  .login { grid-template-columns: 1fr; background: var(--bg-nav) url(../../imagem/marca/login-fundo.svg) top right / cover no-repeat; }
  .login-marca { background: none; padding: 40px 24px 32px; }
  .login-texto { margin-top: 28px; }
  .login-slogan { font-size: 40px; }
  .login-apoio { margin-top: 10px; font-size: 15px; line-height: 23px; }
  .login-pontos, .login-assinatura { display: none; }
  .login-lado { background: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 28px 24px 24px; }
  .login-ajuda { order: 2; align-self: center; margin-top: 24px; }
  .login-form { order: 1; margin: 0 auto; padding: 0; }
  .login-form h1 { font-size: 28px !important; line-height: 34px; } /* o Elisyam força 2rem !important nos h1 abaixo de 576px */
  .login-rodape { order: 3; justify-content: center; gap: 8px; margin-top: 10px; }
  .login-rodape span + span::before { content: "·"; margin-right: 8px; }
  .login-inp { height: 52px; }
  .login .login-input { font-size: 16px; } /* 16px evita o zoom automático do iPhone */
  .login-btn { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-inp, .login-btn, .login-btn svg, .login-mostrar { transition: none; }
}

/* segundo passo da entrada (contas de gabinete, ADR-050) */
.login-2fa-passos { margin: 0 0 18px; padding-left: 20px; line-height: 1.55; color: var(--marca-basalto); }
.login-2fa-passos li { margin: 0 0 10px; }
.login-2fa-qr { display: block; margin: 10px 0 6px; border: 1px solid var(--marca-linha); border-radius: 12px; background: #fff; }
.login-2fa-chave summary { cursor: pointer; color: var(--marca-primaria); font-weight: 500; width: fit-content; }
.login-2fa-chave code { display: block; margin: 6px 0 2px; font: 600 15px/1.5 var(--marca-fonte-numeros); letter-spacing: .04em; color: var(--marca-tinta); word-break: break-all; }
.login-2fa-chave small { color: var(--marca-suave); }
.login-2fa-input { font: 600 20px var(--marca-fonte-numeros); letter-spacing: .25em; text-align: center; }
.login-2fa-input::placeholder { letter-spacing: .25em; }
.login-2fa-ajuda { margin: 6px 0 0; font-size: 13px; color: var(--marca-suave); }
.login-2fa-codigos { list-style: none; margin: 0 0 14px; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 1px dashed var(--marca-linha); border-radius: 12px; background: var(--marca-nevoa); }
.login-2fa-codigos code { font: 600 15px var(--marca-fonte-numeros); color: var(--marca-tinta); background: none; }
.login-2fa-acoes { display: flex; gap: 8px; margin: 0 0 16px; }
@media print { .login-marca, .login-2fa-acoes, .login-2fa form { display: none !important; } }