/* webrox.com.br — mesmas cores do sistema de férias (HPDC) */
:root {
  color-scheme: dark;
  --bg: #0f141b;
  --surface-2: #1d2632;
  --border: #2a3544;
  --text: #e3e8ef;
  --muted: #8b97a8;
  --accent: #4a8fe7;
  --accent-hover: #3576cc;
  --info: #6aa8f5;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg) var(--fundo) center / cover no-repeat; /* --fundo vem de app/comum.php, com versão na URL */
  -webkit-tap-highlight-color: transparent;
}
/* celular em pé: mostra a parte da imagem com a maquete e o tablet com a logo */
@media (orientation: portrait) { body { background-position: 94% center; } }

/* ---------- atalhos ---------- */
.atalhos {
  position: relative; z-index: 2; pointer-events: none; /* fica acima do tablet, mas deixa o toque passar fora dos botões */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
           calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.atalho {
  width: min(100%, 420px); min-height: 96px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: clamp(22px, 6.5vw, 32px); font-weight: 700; line-height: 1.1;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none; cursor: pointer; pointer-events: auto;
  background: rgba(15, 20, 27, .72); border: 2px solid var(--accent); border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s, transform .1s;
}
.atalho:hover { background: rgba(74, 143, 231, .28); }
.atalho:active { transform: scale(.98); }
.atalho:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }

/* tela larga: botões lado a lado */
@media (min-width: 760px) {
  .atalhos { flex-direction: row; gap: 32px; }
  .atalho { width: auto; min-width: 340px; min-height: 140px; font-size: 34px; white-space: nowrap; }
}

/* ---------- tablet do fundo: brilho ao tocar ---------- */
.tablet {
  position: absolute; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tablet:focus-visible { outline: none; }
.tablet:focus-visible .tela { box-shadow: inset 0 0 0 3px var(--info); }
.tablet .tela { position: absolute; inset: 0; overflow: hidden; }
/* faixa de luz que atravessa a tela */
.tablet .tela::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 48%, rgba(190, 230, 255, .75) 50%, rgba(255, 255, 255, .45) 52%, transparent 62%);
  background-size: 300% 100%; background-position: 100% 0; mix-blend-mode: screen;
}
/* a tela acende em azul e verde (cores da logo) */
.tablet .tela::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 40% 50%, rgba(74, 143, 231, .4), rgba(63, 191, 122, .18) 55%, transparent 80%);
  mix-blend-mode: screen;
}
.tablet.brilho { animation: tablet-aura 1.2s ease-out; }
.tablet.brilho .tela::before { animation: tablet-faixa .9s ease-in-out; }
.tablet.brilho .tela::after { animation: tablet-luz 1.2s ease-out; }
@keyframes tablet-faixa {
  0% { opacity: 1; background-position: 100% 0; }
  100% { opacity: 1; background-position: 0 0; }
}
@keyframes tablet-luz {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
/* brilho em volta do tablet (o contorno vem da tela iluminada) */
@keyframes tablet-aura {
  0% { filter: drop-shadow(0 0 0 rgba(74, 143, 231, 0)); }
  25% { filter: drop-shadow(0 0 18px rgba(74, 143, 231, .95)) drop-shadow(0 0 40px rgba(63, 191, 122, .6)); }
  100% { filter: drop-shadow(0 0 0 rgba(74, 143, 231, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .tablet.brilho .tela::before { animation: none; }
}

/* ---------- periféricos: fundo da fábrica fixo, conteúdo rolando por cima ---------- */
html { background: var(--bg); }
body.fabrica { background: none; }
body.fabrica::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  /* o título "LISTA DE TAREFAS" fica no alto da imagem: alinha pelo topo para ele nunca ser cortado */
  background: var(--bg) var(--fundo) center top / cover no-repeat;
}
/* celular em pé: imagem inteira na largura (título visível) sobre a mesma imagem escurecida preenchendo a tela */
@media (orientation: portrait) {
  body.fabrica::before {
    background:
      var(--fundo) center calc(68px + env(safe-area-inset-top)) / 100% auto no-repeat,
      linear-gradient(rgba(15, 20, 27, .82), rgba(15, 20, 27, .82)),
      var(--bg) var(--fundo) center / cover no-repeat;
  }
}
/* infográfico: a imagem fica bem escura para o texto ter leitura */
body.fabrica.tarefa::before {
  background: linear-gradient(rgba(11, 15, 21, .88), rgba(11, 15, 21, .95)), var(--bg) var(--fundo) center / cover no-repeat;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* lista de sistemas: começa logo abaixo do título da imagem */
.lista {
  max-width: 1180px; margin: 0 auto;
  padding: calc(max(100vh, 55.8vw) * .2) calc(16px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
@media (orientation: portrait) { .lista { padding-top: calc(80px + env(safe-area-inset-top) + 12vw); } }

/* pesquisa: fica presa no alto ao rolar, à direita do botão de voltar */
.busca {
  position: sticky; top: calc(12px + env(safe-area-inset-top)); z-index: 15;
  display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 0 18px 56px; padding: 0 6px 0 14px;
  background: rgba(15, 20, 27, .9); border: 1.5px solid var(--accent); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 1300px) { .busca { margin-left: 0; } }
.busca:focus-within { border-color: var(--info); box-shadow: 0 0 0 3px rgba(74, 143, 231, .3), 0 8px 24px rgba(0, 0, 0, .5); }
.busca .ic { color: var(--info); }
.busca input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff;
  font: inherit; font-size: 16px; /* 16px evita o zoom automático do iPhone */
}
.busca input::placeholder { color: var(--muted); }
.busca input::-webkit-search-cancel-button { display: none; }
.busca .limpar { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.busca-vazia { margin: 24px 0; text-align: center; color: #fff; font-size: 15px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.sistema-btn .meta.achou { color: #f5c542; font-weight: 600; }
.area + .area { margin-top: 28px; }
.area h2 {
  margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
.area h2 small { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (min-width: 760px) { .grade { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } }
.sistema-btn {
  display: flex; flex-direction: column; gap: 6px; min-height: 104px; padding: 14px;
  color: #fff; text-decoration: none;
  background: rgba(15, 20, 27, .78); border: 1.5px solid var(--accent); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, transform .1s;
}
.sistema-btn .ic { width: 26px; height: 26px; color: var(--info); }
.sistema-btn .nome { font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.sistema-btn .meta { margin-top: auto; font-size: 12px; color: var(--muted); }
.sistema-btn:hover { background: rgba(74, 143, 231, .28); }
.sistema-btn:active { transform: scale(.98); }
.sistema-btn:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }

/* ---------- infográfico de um sistema ---------- */
.tipo-inspecao { --t: #4a8fe7; }
.tipo-teste { --t: #a78bfa; }
.tipo-ajuste { --t: #f0a93b; }
.tipo-limpeza { --t: #2cc4c4; }
.tipo-lubrificacao { --t: #3fbf7a; }
.tipo-medicao { --t: #f472b6; }
.tipo-troca { --t: #f2626d; }
.mec { --d: #6aa8f5; }
.ele { --d: #f5c542; }

.info {
  max-width: 880px; margin: 0 auto;
  padding: calc(72px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
.info-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.info-ic {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #1f4f8f); color: #fff; box-shadow: 0 8px 24px rgba(74, 143, 231, .35);
}
.info-ic .ic { width: 32px; height: 32px; }
.info-area { margin: 0 0 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.info h1 { margin: 0; font-size: clamp(24px, 6vw, 34px); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px;
  background: rgba(29, 38, 50, .82); border: 1px solid var(--border); border-radius: 12px;
}
.kpi b { font-size: 26px; line-height: 1; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi .ic { width: 18px; height: 18px; color: var(--d); margin-bottom: 4px; }
.kpi.mec, .kpi.ele { border-top: 3px solid var(--d); }
@media (max-width: 420px) { .kpi b { font-size: 22px; } .kpi { padding: 10px; } }

.cartao {
  background: rgba(23, 30, 40, .9); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px;
}
.cartao h2 { margin: 0 0 12px; font-size: 16px; }
.barra { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; }
.barra span { background: var(--t); min-width: 6px; }
.legenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.legenda li { display: flex; align-items: center; gap: 6px; }
.legenda .ic { width: 18px; height: 18px; color: var(--t); }
.legenda small { color: var(--muted); }

.indice { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: thin; }
.indice a {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  background: rgba(29, 38, 50, .9); border: 1px solid var(--d);
}
.indice a .ic { width: 16px; height: 16px; color: var(--d); }
.indice small { font-weight: 400; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grupo { border-top: 4px solid var(--d); scroll-margin-top: calc(70px + env(safe-area-inset-top)); }
.grupo-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.disciplina {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--d); background: color-mix(in srgb, var(--d) 15%, transparent);
}
.disciplina .ic { width: 16px; height: 16px; }
.numero { font-size: 13px; font-weight: 600; color: var(--muted); }
.qtd { margin-left: auto; font-size: 13px; color: var(--muted); }
.grupo h2 { margin: 4px 0 8px; font-size: 17px; }
.maquinas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.chip { padding: 3px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 600; }

/* passos: linha do tempo numerada, cor pelo tipo de tarefa */
.passos { list-style: none; margin: 0; padding: 0; }
.passos li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.passos li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--border); }
.passo-num {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #0b111a; background: var(--t); box-shadow: 0 0 0 4px rgba(23, 30, 40, .9);
}
.passo {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(29, 38, 50, .7); border-left: 3px solid var(--t);
}
.passo-tipo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t); }
.passo-tipo .ic { width: 15px; height: 15px; }
.passo h3 { margin: 4px 0 2px; font-size: 15px; }
.passo p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #c9d4e3; overflow-wrap: anywhere; }
.destaques { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.destaques span {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--t) 30%, transparent); border: 1px solid var(--t);
}
.destaques .ic { width: 14px; height: 14px; }
.passo .obs {
  display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(240, 169, 59, .14); color: #f6c87e; font-size: 13px;
}
.obs .ic { width: 18px; height: 18px; color: #f0a93b; }

/* ---------- informativo ilustrado da tarefa ---------- */
.ver-info {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent);
}
.ver-info .ic { width: 17px; height: 17px; }
.ver-info:hover { background: var(--accent-hover); }
.ver-info:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }

dialog.informativo {
  width: min(100% - 20px, 640px); max-height: min(92dvh, 900px); padding: 0;
  color: var(--text); background: #171e28; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
dialog.informativo[open] { display: flex; flex-direction: column; }
dialog.informativo::backdrop { background: rgba(5, 8, 12, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.informativo > header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.informativo > header .info-ic { width: 44px; height: 44px; border-radius: 12px; }
.informativo > header .info-ic .ic { width: 24px; height: 24px; }
.informativo > header div { flex: 1; min-width: 0; }
.informativo h2 { margin: 0; font-size: 20px; }
.informativo .fechar { border: 0; background: none; color: var(--muted); font-size: 30px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.informativo-corpo { overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.ilustracao { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto 14px; font-family: inherit; }
.informativo .resumo { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #c9d4e3; }
.informativo h3 { margin: 18px 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.verificar { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.verificar li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.verificar p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #c9d4e3; }
.marca { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0b111a; }
.marca.m1 { background: #f0a93b; }
.marca.m2 { background: #2cc4c4; }
.marca.m3 { background: #f2626d; }
.marca.m4 { background: #a78bfa; }
.passo-a-passo { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: #c9d4e3; }
.passo-a-passo li::marker { color: var(--info); font-weight: 700; }
.aviso-geral { display: flex; gap: 8px; margin: 18px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgba(240, 169, 59, .12); color: #f6c87e; }
.aviso-geral .ic { color: #f0a93b; }
.voltar-lista {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: min(100%, 420px); min-height: 56px; margin: 22px auto 0; padding: 14px 20px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none;
  background: rgba(15, 20, 27, .78); border: 2px solid var(--accent); border-radius: 14px;
  transition: background .15s, transform .1s;
}
.voltar-lista .ic { width: 20px; height: 20px; stroke-width: 2.4; }
.voltar-lista:hover { background: rgba(74, 143, 231, .28); }
.voltar-lista:active { transform: scale(.98); }
.voltar-lista:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }

.voltar {
  position: fixed; z-index: 20;
  top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left));
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 20, 27, .72); border: 1px solid var(--border); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.voltar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.voltar:hover { border-color: var(--accent); }
.voltar:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }

/* ---------- aviso de instalação do app (igual ao HPDC) ---------- */
.aviso-instalar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; width: min(520px, calc(100% - 24px));
  transform: translate(-50%, 140%); transition: transform .3s ease;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.aviso-instalar.visivel { transform: translate(-50%, 0); }
.aviso-instalar img { border-radius: 10px; flex-shrink: 0; }
.aviso-instalar-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.aviso-instalar-texto strong { font-size: 14px; }
.aviso-instalar-texto span { color: var(--muted); line-height: 1.4; }
.aviso-instalar-texto b { color: var(--text); }
.aviso-instalar-acoes { display: flex; align-items: center; gap: 4px; }
.aviso-instalar-btn {
  padding: 8px 16px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
}
.aviso-instalar-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.aviso-fechar { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.ico-share { width: 16px; height: 16px; vertical-align: -3px; color: var(--info); }

/* ---------- login e logout ---------- */
body.login-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 3vh, 28px);
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  min-height: 100dvh; overflow: hidden; perspective: 1000px;
  background: #080709;
}
/* camada do degradê, fixa, para cobrir a tela inteira em qualquer tamanho */
body.login-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 42%, #2a1412 0%, #140d10 48%, #080709 100%);
}
/* rede de partículas (assets/fundo-login.js) */
#fundo-rede { position: fixed; inset: 0; z-index: 0; display: block; }

/* logo acima do formulário, com paralaxe 3D vindo do ponteiro/giroscópio (--gx, --gy) */
.marca-logo {
  --gx: 0; --gy: 0;
  position: relative; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
}
.marca-logo .alvo {
  position: relative; width: min(52vw, 420px); aspect-ratio: 308 / 207;
  transform:
    translate3d(calc(var(--gx) * -34px), calc(var(--gy) * -26px), 0)
    rotateX(calc(var(--gy) * -9deg)) rotateY(calc(var(--gx) * 12deg));
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  animation: marca-flutua 7s ease-in-out infinite;
}
/* halo que respira atrás da logo */
.marca-logo .alvo::before {
  content: ""; position: absolute; inset: -22%;
  background: radial-gradient(ellipse at 50% 45%, rgba(232, 56, 43, .5), rgba(255, 122, 89, .18) 45%, transparent 72%);
  filter: blur(14px); animation: marca-halo 4.5s ease-in-out infinite; z-index: -1;
}
.marca-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .7)) drop-shadow(0 0 28px rgba(232, 56, 43, .35));
}
/* reflexo que cruza só o desenho da logo (usa a própria imagem como máscara) */
.marca-logo .brilho {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  background-size: 280% 100%; background-position: 160% 0;
  -webkit-mask: url("/assets/logo-webrox.png") center / contain no-repeat;
  mask: url("/assets/logo-webrox.png") center / contain no-repeat;
  mix-blend-mode: screen; animation: marca-brilho 7s ease-in-out infinite;
}
@keyframes marca-flutua {
  0%, 100% { translate: 0 -8px; }
  50% { translate: 0 8px; }
}
@keyframes marca-halo {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes marca-brilho {
  0%, 60% { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}
/* toque: a logo dá um pulo e acende */
.marca-logo.pulso .alvo { animation: marca-flutua 7s ease-in-out infinite, marca-pulo .75s cubic-bezier(.22,1.4,.4,1); }
.marca-logo.pulso .brilho { animation: marca-brilho-rapido .75s ease-out; }
@keyframes marca-pulo {
  0% { scale: 1; }
  28% { scale: 1.1; filter: drop-shadow(0 0 60px rgba(255, 122, 89, .95)); }
  60% { scale: .97; }
  100% { scale: 1; }
}
@keyframes marca-brilho-rapido { from { background-position: 160% 0; } to { background-position: -160% 0; } }

/* celular em pé: logo um pouco maior */
@media (orientation: portrait) {
  .marca-logo .alvo { width: min(78vw, 420px); }
}
/* tela larga: logo no alto e o formulário mais para baixo */
@media (min-width: 760px) and (orientation: landscape) {
  body.login-page { justify-content: flex-start; padding-top: clamp(16px, 7vh, 70px); }
  .login-box { margin-top: clamp(16px, 9vh, 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .marca-logo .alvo, .marca-logo .alvo::before, .marca-logo .brilho { animation: none; }
  .marca-logo .alvo { transition: none; }
}
.login-box {
  position: relative; z-index: 2;
  width: 100%; max-width: 360px; padding: 28px 26px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(20, 14, 16, .74); border: 1px solid rgba(232, 56, 43, .4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.login-page .field input:focus { outline: 2px solid rgba(232, 56, 43, .2); border-color: #e8382b; }
body.login-page .btn.primary { background: linear-gradient(180deg, #e8483a, #c8291e); border-color: #e8382b; }
body.login-page .btn.primary:hover { background: linear-gradient(180deg, #f2594a, #d63326); }
.login-box .logo { display: block; margin: 0 auto; }
.login-box h1 { font-size: 20px; text-align: center; margin: 0; font-weight: 600; }
.login-box .muted { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field label { color: var(--muted); }
.field input { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #11171f; color: var(--text); }
.field input:focus { outline: 2px solid rgba(74,143,231,.16); border-color: var(--accent); }
.msg.error { background: rgba(242,98,109,.15); color: #f2626d; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.btn { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 10px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; text-align: center; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: 4px; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.sair-form { position: fixed; z-index: 20; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); margin: 0; pointer-events: auto; }
.sair-btn {
  height: 44px; padding: 0 16px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 20, 27, .72); border: 1px solid var(--border); color: #fff;
  font: 600 13px inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sair-btn:hover { border-color: var(--accent); }
.sair-btn:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }