/*
 * Login: cena do painel azul (views/site/_login_cena.php) e movimento do formulário.
 *
 * A cena é desenhada numa tela fixa de 800×680 e escalada por web/js/marca/login-cena.js para caber inteira no
 * espaço entre o texto e a assinatura. Sem JS fica a 0,72.
 *
 * Movimento (personalidade "Corporate" do design system): uma curva para tudo, três durações e uma só
 * sequência à entrada (~2,4 s) que conta o que a Lonntra faz:
 *   o painel sobe → a linha desenha-se e o faturado conta → o telemóvel entra e a página inicial
 *   aparece em cascata → a fatura "Em fila" passa a "Comunicada" e chega o aviso da DNRE → aviso de stock.
 * Nada fica em movimento contínuo: o ponto do gráfico pulsa duas vezes e para. O logótipo não se mexe.
 * Com "reduzir movimento" no sistema: tudo aparece já no estado final.
 */

:root {
  --lc-azul: var(--lt-atlantico); --lc-acao: var(--lt-mare); --lc-sinal: var(--lt-sinal);
  --lc-tinta: var(--lt-atlantico); --lc-texto: var(--lt-basalto); --lc-pedra: var(--lt-pedra);
  --lc-linha: var(--border-subtle); --lc-bruma: var(--lt-bruma); --lc-sal: var(--lt-sal);
  --lc-ok: var(--ok); --lc-ok-bg: var(--ok-bg); --lc-warn-bg: var(--warn-bg);
  /* assinatura do movimento: uma curva, três durações */
  --lc-curva: cubic-bezier(0.2, 0, 0, 1);
  --lc-rapido: 150ms; --lc-normal: 300ms; --lc-lento: 600ms;
}

/* sem o ecrã de carregamento do tema: escondia o formulário até tudo carregar (vários segundos com rede lenta)
   e a sequência da cena acontecia por baixo dele, sem ninguém a ver */
.tema-login #preloader { display: none !important; }

/* ---------- lugar da cena no painel ---------- */
.login-marca { isolation: isolate; }
.lc-caixa {
  flex: 1 1 auto; min-height: 0; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 28px 0 76px; /* por baixo fica a assinatura "um produto Tenniva" */
}
/* a cena fica fora do fluxo: o espaço da caixa vem só do que sobra no painel */
.lc-medida {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(800px * var(--lc-k, 0.72)); height: calc(680px * var(--lc-k, 0.72));
}
@media (min-width: 992px) { .login-marca { height: 100vh; height: 100dvh; min-height: 560px; } }
.lc {
  position: absolute; left: 0; top: 0; width: 800px; height: 680px;
  transform: scale(var(--lc-k, 0.72)); transform-origin: 0 0;
  font: 400 13px/1.45 var(--font-sans); color: var(--lc-texto);
  -webkit-font-smoothing: antialiased;
}
.lc b { font-weight: 600; }
.lc-n, .lc-data, .lc-id, .lc-v, .lc-eixo, .lc-mov-l b, .lc-aviso span {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ---------- computador: "Vendas de hoje" ---------- */
.lc-flut {
  position: absolute; background: #fff; border-radius: 16px;
  box-shadow: 0 1px 2px rgb(14 42 59 / .2), 0 24px 56px -16px rgb(4 16 24 / .6);
}
.lc-painel { left: 10px; top: 54px; width: 520px; padding: 22px 24px 16px; }
.lc-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.lc-marca { display: flex; align-items: center; gap: 8px; font: 700 16px var(--font-display); letter-spacing: -.02em; color: var(--lc-tinta); }
.lc-data { font-size: 11px; color: var(--lc-pedra); }
.lc-kpis { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.lc-kpi { background: var(--lc-sal); border-radius: 10px; padding: 12px 14px; }
.lc-kpi span { display: block; font-size: 11.5px; color: var(--lc-pedra); margin-bottom: 4px; }
.lc-kpi b { font: 700 20px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--lc-tinta); }
.lc-kpi small { margin-left: 4px; font-size: 10px; color: var(--text-on-dark-muted); }
.lc-kpi--forte { background: var(--lc-azul); }
.lc-kpi--forte span { color: var(--text-on-dark-muted); }
.lc-kpi--forte b { color: #fff; }
.lc-graf { position: relative; height: 118px; margin-bottom: 10px; }
.lc-graf svg { display: block; overflow: visible; }
.lc-eixo { position: absolute; bottom: -2px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 10px; color: var(--lc-pedra); }
.lc-graf-halo { opacity: .2; transform-origin: center; transform-box: fill-box; }
.lc-docs { border-top: 1px solid var(--lc-linha); margin-top: 20px; }
.lc-doc { display: grid; grid-template-columns: 112px 1fr auto 96px; gap: 10px; align-items: center; height: 40px; border-bottom: 1px solid var(--lc-linha); font-size: 12.5px; transition: background-color var(--lc-normal); }
.lc-doc:last-child { border-bottom: 0; }
.lc-id { font-size: 11.5px; font-weight: 500; color: var(--lc-tinta); }
.lc-cli { color: var(--lc-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-v { font-size: 12px; font-weight: 500; text-align: right; color: var(--lc-tinta); }
/* pílulas de estado do design system: ponto + texto */
.lc-st { grid-column: 4; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 999px; }
.lc-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lc-st--ok { background: var(--lc-ok-bg); color: var(--lc-ok); }
.lc-st--fila { background: var(--lc-warn-bg); color: #7a4e0e; }
.lc-st--fila i { background: var(--lc-sinal); }
.lc-st--depois { opacity: 0; }

/* ---------- telemóvel: página inicial ---------- */
.lc-tel {
  position: absolute; left: 512px; top: 150px; width: 240px; height: 492px; border-radius: 38px; background: #0a1f2c; padding: 9px;
  box-shadow: 0 0 0 1.5px #24404f inset, 0 2px 6px rgb(4 16 24 / .3), 0 30px 70px -12px rgb(4 16 24 / .75);
}
.lc-ecra { width: 100%; height: 100%; border-radius: 30px; background: var(--lc-sal); overflow: hidden; display: flex; flex-direction: column; }
.lc-sb { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 6px; font: 600 11px var(--font-sans); color: var(--lc-tinta); }
.lc-sb i { width: 58px; height: 17px; border-radius: 10px; background: #0a1f2c; }
.lc-app-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 0; }
.lc-empresa { display: flex; align-items: center; gap: 7px; font: 600 11.5px var(--font-sans); color: var(--lc-tinta); }
.lc-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lc-azul); color: #fff; font: 600 9px var(--font-sans); }
.lc-ola { padding: 10px 14px 0; }
.lc-ola small { display: block; font: 500 9.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lc-pedra); }
.lc-ola h4 { margin: 2px 0 0; font: 700 19px/1.15 var(--font-display); letter-spacing: -.025em; color: var(--lc-tinta); }
.lc-prazo { display: flex; gap: 8px; align-items: baseline; margin: 8px 12px 0; padding: 9px 10px; border-radius: 10px; background: var(--lc-warn-bg); font-size: 10.5px; line-height: 1.4; color: var(--lc-tinta); }
.lc-prazo i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lc-sinal); transform: translateY(-1px); }
.lc-mkpi { margin: 6px 12px 0; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--lc-bruma); display: grid; gap: 2px; }
.lc-mkpi > span { font-size: 10.5px; color: var(--lc-pedra); }
.lc-mkpi b { font: 700 17px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--lc-tinta); white-space: nowrap; }
.lc-mkpi b .lc-n { font: inherit; }
.lc-mkpi small { font: 500 9px var(--font-sans); color: var(--lc-pedra); }
.lc-mkpi--forte { background: var(--lc-azul); border-color: var(--lc-azul); }
.lc-mkpi--forte > span, .lc-mkpi--forte small { color: var(--text-on-dark-muted); }
.lc-mkpi--forte b { color: #fff; }
.lc-mov { margin: 8px 12px 0; }
.lc-mov p { margin: 0 0 2px; font: 600 11px var(--font-sans); color: var(--lc-tinta); }
.lc-mov-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; white-space: nowrap; border-top: 1px solid var(--lc-linha); font-size: 10.5px; color: var(--lc-tinta); }
.lc-mov-l small { display: block; font-size: 9px; color: var(--lc-pedra); }
.lc-mov-l b { font-size: 10.5px; font-weight: 500; color: var(--lc-tinta); white-space: nowrap; }
.lc-mov-l b.lc-mais { color: var(--lc-ok); }
.lc-tabs { margin-top: auto; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px 10px; background: #fff; border-top: 1px solid var(--lc-bruma); }
.lc-tabs span { display: grid; justify-items: center; gap: 2px; font: 500 8.5px var(--font-sans); color: var(--lc-pedra); }
.lc-tabs span.on { color: var(--lc-acao); font-weight: 600; }

/* ---------- avisos ---------- */
.lc-aviso {
  position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 14px 10px 10px;
  box-shadow: 0 1px 2px rgb(14 42 59 / .2), 0 16px 36px -12px rgb(4 16 24 / .6);
}
.lc-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.lc-aviso b { display: block; font-size: 12px; color: var(--lc-tinta); }
.lc-aviso span { display: block; font-size: 10.5px; color: var(--lc-pedra); margin-top: 1px; }
.lc-aviso--dnre { left: 300px; top: 0; }
.lc-aviso--dnre .lc-ic { background: var(--lc-ok-bg); }
.lc-aviso--stock { left: 34px; top: 572px; }
.lc-aviso--stock .lc-ic { background: var(--lc-warn-bg); }
.lc-sinal { width: 10px; height: 10px; border-radius: 50%; background: var(--lc-sinal); }

/* ---------- a sequência de entrada (só depois de o JS marcar a cena pronta: fontes carregadas e escala certa) ---------- */
.lc:not(.is-pronta) .lc-painel, .lc:not(.is-pronta) .lc-tel, .lc:not(.is-pronta) .lc-aviso { opacity: 0; }

/* 1. primário: o painel sobe */
.lc.is-pronta .lc-painel { animation: lc-subir var(--lc-lento) var(--lc-curva) both; }
/* 2. a linha desenha-se enquanto o faturado conta (JS); a área e o ponto chegam no fim */
.lc.is-pronta .lc-graf-linha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lc-desenhar 1100ms 300ms cubic-bezier(.4, 0, .2, 1) forwards; }
.lc.is-pronta .lc-graf-area { opacity: 0; animation: lc-aparecer var(--lc-lento) 1000ms ease-out forwards; }
.lc.is-pronta .lc-graf-ponto { opacity: 0; transform-origin: center; transform-box: fill-box; animation: lc-pousar var(--lc-normal) 1350ms var(--lc-curva) forwards; }
/* ambiente: o ponto pulsa duas vezes e para */
.lc.is-pronta .lc-graf-halo { opacity: 0; animation: lc-pulsar 1800ms 1500ms ease-out 2; }
/* 3. o telemóvel entra 150 ms depois, do mesmo lado de onde a vista lê; o conteúdo aparece em cascata (60 ms) */
.lc.is-pronta .lc-tel { animation: lc-subir var(--lc-lento) 150ms var(--lc-curva) both; }
.lc.is-pronta .lc-h { animation: lc-subir-pouco var(--lc-normal) var(--lc-curva) both; }
.lc.is-pronta .lc-h:nth-child(2) { animation-delay: 500ms; }
.lc.is-pronta .lc-h:nth-child(3) { animation-delay: 560ms; }
.lc.is-pronta .lc-h:nth-child(4) { animation-delay: 620ms; }
.lc.is-pronta .lc-h:nth-child(5) { animation-delay: 680ms; }
.lc.is-pronta .lc-h:nth-child(6) { animation-delay: 740ms; }
.lc.is-pronta .lc-h:nth-child(7) { animation-delay: 800ms; }
/* 4. a fatura em fila é comunicada: o estado troca e o aviso da DNRE desce */
.lc.is-pronta .lc-st--fila { animation: lc-sair var(--lc-rapido) 1800ms ease-in forwards; }
.lc.is-pronta .lc-st--depois { animation: lc-trocar var(--lc-normal) 1900ms var(--lc-curva) forwards; }
.lc.is-pronta .lc-doc--envio { animation: lc-realce 1200ms 1850ms ease-out; }
.lc.is-pronta .lc-aviso--dnre { animation: lc-descer var(--lc-normal) 1950ms var(--lc-curva) both; }
.lc.is-pronta .lc-visto { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lc-desenhar var(--lc-normal) 2150ms ease-out forwards; }
/* 5. por fim, o aviso de stock */
.lc.is-pronta .lc-aviso--stock { animation: lc-subir-pouco var(--lc-normal) 2300ms var(--lc-curva) both; }

@keyframes lc-subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lc-subir-pouco { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lc-descer { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes lc-desenhar { to { stroke-dashoffset: 0; } }
@keyframes lc-aparecer { to { opacity: 1; } }
@keyframes lc-pousar { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes lc-pulsar { 0% { opacity: .35; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes lc-sair { to { opacity: 0; transform: scale(.92); } }
@keyframes lc-trocar { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lc-realce { 0% { background: transparent; } 30% { background: rgb(30 122 76 / .07); } 100% { background: transparent; } }

/* ---------- formulário: movimento que responde à pessoa ---------- */
.login-form { animation: lc-subir-pouco var(--lc-normal) 80ms var(--lc-curva) both; }
.login-btn { position: relative; }
.login-btn[aria-busy="true"] { pointer-events: none; }
.login-btn[aria-busy="true"] svg { display: none; }
.login-btn[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff;
  animation: lc-rodar .7s linear infinite;
}
@keyframes lc-rodar { to { transform: rotate(360deg); } }
/* erro: abana uma vez, firme e curto */
.login-campo.has-error .login-inp { animation: lc-abanar 320ms ease-in-out; }
@keyframes lc-abanar { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.login-campo .help-block:not(:empty) { animation: lc-subir-pouco var(--lc-rapido) var(--lc-curva) both; }

/* sem espaço para a cena (ecrãs baixos ou estreitos): fica só o texto */
@media (max-height: 640px), (max-width: 991px) { .lc-caixa { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .login-form, .lc.is-pronta *, .login-campo.has-error .login-inp, .login-campo .help-block { animation: none !important; }
  .lc .lc-painel, .lc .lc-tel, .lc .lc-aviso, .lc .lc-graf-area, .lc .lc-graf-ponto { opacity: 1 !important; }
  .lc .lc-graf-linha, .lc .lc-visto { stroke-dashoffset: 0 !important; }
  .lc .lc-st--fila { opacity: 0; }
  .lc .lc-st--depois { opacity: 1; }
}

/* "Manter sessão iniciada" (views/site/login.php) */
.login-lembrar { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 12px; cursor: pointer; font: 400 14px/20px var(--font-sans); color: var(--text-strong); }
.login-lembrar input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--marca-acao, #0f6e68); cursor: pointer;
}
.login-lembrar small { display: block; margin-top: 1px; font-size: 12px; line-height: 18px; color: var(--text-muted); }
.login-lembrar input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (max-width: 991px) { .login-lembrar { min-height: 44px; align-items: center; } }