/* Tela /login da Control Tower. Fora do HTML para a CSP do /login (Caddyfile) não precisar de unsafe-inline. */
    /* Fontes da mesma família do console, servidas daqui: a página é pública e não deve depender
       do Google Fonts nem do bundle do console para carregar. Roboto Flex só nos títulos (eixo wdth). */
    @font-face{ font-family:'Roboto Flex'; src:url('/login-assets/roboto-flex.woff2') format('woff2-variations'); font-weight:100 1000; font-stretch:25% 151%; font-display:swap }
    @font-face{ font-family:'Roboto'; src:url('/login-assets/roboto.woff2') format('woff2-variations'); font-weight:100 900; font-display:swap }
    @font-face{ font-family:'Roboto Mono'; src:url('/login-assets/roboto-mono.woff2') format('woff2-variations'); font-weight:100 700; font-display:swap }

    :root{
      --fundo: oklch(0.968 0.006 250);
      --mapa: oklch(0.995 0.002 250);
      --mapa-borda: oklch(0.8 0.016 250);
      --uf: oklch(0.885 0.012 250);
      --uf-linha: oklch(0.86 0.013 250);
      --pr-topo: oklch(0.955 0.032 25);
      --pr-lado: oklch(0.5 0.14 28);
      --pr-sombra: oklch(0.3 0.08 28 / .35);
      --pr-letra: oklch(0.86 0.04 28);
      --mapa-sombra: oklch(0.3 0.03 250 / .14);
      --ink: oklch(0.21 0.015 260);
      --muted: oklch(0.45 0.012 255);
      --oxblood: oklch(0.4 0.15 28);
      --sinal: oklch(0.66 0.16 52);
      --cartao: oklch(1 0 0);
      --campo: oklch(0.975 0.004 250);
      --linha: oklch(0.88 0.008 250);
      --perigo: oklch(0.52 0.19 27);
      --ok: oklch(0.52 0.13 150);
      --branco: oklch(1 0 0);
      --halo: color-mix(in oklch, var(--oxblood) 24%, transparent);
      --halo-erro: color-mix(in oklch, var(--perigo) 22%, transparent);
      --display: 'Roboto Flex', 'Roboto', system-ui, sans-serif;
      --ui: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
      --dado: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    *{ box-sizing:border-box }
    [hidden]{ display:none !important }
    html, body{ margin:0; min-height:100% }
    body{ font:400 15px/1.5 var(--ui); color:var(--ink); background:var(--fundo); -webkit-font-smoothing:antialiased }
    button, input{ font:inherit; color:inherit }
    :focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }

    .palco{ position:relative; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,600px); overflow:hidden;
      background:radial-gradient(60% 70% at 30% 60%, var(--branco), transparent 70%), var(--fundo) }
    #mapa{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }

    /* ── Lado da marca ── */
    .marca{ position:relative; display:flex; flex-direction:column; gap:28px; padding:40px 24px 34px max(72px, env(safe-area-inset-left)) }
    .topo{ display:flex; align-items:center; gap:18px }
    .logo{ height:46px; width:auto; display:block }
    .produto{ font:500 12px/1 var(--dado); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); padding:8px 0 8px 18px; border-left:1px solid var(--linha) }
    .chamada{ display:flex; flex-direction:column; gap:20px; margin-top:52px; max-width:620px }
    .chamada h1{ font-family:var(--display); font-stretch:120%; font-weight:800; font-size:clamp(44px, 5.3vw, 76px); line-height:.92; letter-spacing:-.05em; margin:0; text-wrap:balance }
    .chamada h1 em{ font-style:normal; color:var(--oxblood) }
    .chamada p{ margin:0; font-size:18px; line-height:1.55; color:var(--muted); max-width:38ch }
    .legenda{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 22px; font:500 11px/1 var(--dado); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
    .legenda span{ display:inline-flex; align-items:center; gap:8px }
    .legenda i{ width:18px; height:2px; border-radius:2px; background:var(--oxblood) }
    .legenda i.o{ width:8px; height:8px; border-radius:50%; background:var(--sinal) }

    /* ── Lado do formulário ── */
    .lado{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:28px; padding:40px max(72px, env(safe-area-inset-right)) 30px 24px }
    .plantao{ position:absolute; top:40px; right:max(72px, env(safe-area-inset-right)); display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 14px; border-radius:999px; background:var(--cartao); border:1px solid var(--linha);
      font:500 11.5px/1 var(--dado); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums }
    .plantao .sep{ opacity:.4 }
    /* Anel por transform + opacity, não por box-shadow: box-shadow animado obriga a repintar a cada
       quadro, e sem aceleração de vídeo isso derrubava a tela inteira para ~22 quadros/s (22/10). */
    .vivo{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--sinal); flex:none }
    .vivo::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--sinal); opacity:0; will-change:transform, opacity; animation:pulso 2.2s ease-out infinite }
    @keyframes pulso{ 0%{ transform:scale(1); opacity:.6 } 70%,100%{ transform:scale(3.5); opacity:0 } }

    .cartao{ width:100%; max-width:456px; display:flex; flex-direction:column; gap:20px; padding:40px 40px 32px; background:var(--cartao); border:1px solid var(--linha); border-radius:26px;
      box-shadow:0 1px 2px oklch(0.3 0.03 250 / .06), 0 30px 70px oklch(0.3 0.03 250 / .14) }
    .etapa{ display:flex; flex-direction:column; gap:10px }
    .prog{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
    .prog i{ height:3px; border-radius:3px; background:var(--linha); transition:background .3s }
    .prog i.on{ background:var(--oxblood) }
    .etapa-rot{ font:500 11.5px/1 var(--dado); letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
    .tit{ display:flex; flex-direction:column; gap:8px }
    .tit h2{ font-family:var(--display); font-stretch:112%; font-weight:750; font-size:31px; line-height:1.08; letter-spacing:-.03em; margin:0; text-wrap:balance }
    .tit p{ margin:0; font-size:15px; line-height:1.5; color:var(--muted) }
    form{ display:flex; flex-direction:column; gap:20px; margin:0 }
    .campo{ display:flex; flex-direction:column; gap:8px }
    .campo label{ font:500 13px/1.2 var(--ui) }
    .entrada{ position:relative; height:52px; display:flex; align-items:center; border:1px solid var(--linha); border-radius:12px; background:var(--campo); transition:border-color .15s, box-shadow .15s, background .15s }
    .entrada > svg{ position:absolute; left:16px; color:var(--muted); pointer-events:none; transition:color .15s }
    .entrada input{ flex:1; min-width:0; height:100%; border:0; background:transparent; padding:0 12px 0 45px; font-size:15px; outline:none }
    .entrada input::placeholder{ color:var(--muted); opacity:.7 }
    .entrada:focus-within{ border-color:var(--oxblood); background:var(--branco); box-shadow:0 0 0 4px var(--halo) }
    .entrada:focus-within > svg{ color:var(--oxblood) }
    .campo.invalido .entrada{ border-color:var(--perigo); box-shadow:0 0 0 4px var(--halo-erro) }
    .olho{ flex:none; display:inline-flex; align-items:center; gap:6px; height:38px; margin-right:7px; padding:0 10px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer }
    .olho:hover{ background:var(--linha); color:var(--ink) }
    .erro{ display:flex; gap:8px; align-items:flex-start; margin:2px 0 0; font-size:13.5px; line-height:1.45; color:var(--perigo) }
    .erro svg{ flex:none; margin-top:1px }
    .erro:empty{ display:none }
    .caps{ align-self:flex-start; margin:0; font:500 12px/1 var(--ui); padding:6px 10px; border-radius:8px; color:oklch(0.48 0.13 52); background:color-mix(in oklch, var(--sinal) 15%, transparent) }
    .btn{ position:relative; height:52px; border:0; border-radius:12px; cursor:pointer; color:var(--branco); font:600 15.5px/1 var(--ui); display:flex; align-items:center; justify-content:center; gap:10px;
      background:linear-gradient(180deg, color-mix(in oklch, var(--oxblood), white 10%), var(--oxblood));
      box-shadow:inset 0 1px 0 oklch(1 0 0 / .2), 0 1px 2px oklch(0 0 0 / .2), 0 12px 28px color-mix(in oklch, var(--oxblood) 38%, transparent); transition:transform .14s, box-shadow .14s, filter .14s }
    .btn:hover:not(:disabled){ transform:translateY(-1px); filter:brightness(1.06) }
    .btn:active:not(:disabled){ transform:none }
    .btn:disabled{ cursor:default; opacity:.75 }
    .btn svg{ transition:transform .14s }
    .btn:hover:not(:disabled) svg{ transform:translateX(2px) }
    .spin{ width:16px; height:16px; border-radius:50%; border:2px solid oklch(1 0 0 / .45); border-top-color:var(--branco); animation:gira .7s linear infinite }
    @keyframes gira{ to{ transform:rotate(360deg) } }
    .link{ align-self:center; display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--muted); font:500 13.5px/1 var(--ui) }
    .link:hover{ color:var(--ink) }
    .ajuda{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center }
    .ajuda b{ color:var(--ink); font-weight:600 }

    /* Código: um input só (o autocomplete="one-time-code" do celular depende disso), desenhado como seis casas. */
    .otp{ position:relative }
    .otp input{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; background:transparent; color:transparent; caret-color:transparent; font-size:16px; outline:none; letter-spacing:2em }
    .otp input::selection{ background:transparent }
    .casas{ display:flex; gap:8px }
    .casas span{ flex:1; height:60px; display:flex; align-items:center; justify-content:center; border:1px solid var(--linha); border-radius:12px; background:var(--campo); font:500 26px/1 var(--dado); transition:border-color .15s, box-shadow .15s }
    .casas span:nth-child(4){ margin-left:10px }
    .otp.foco .casas span.atual{ border-color:var(--oxblood); background:var(--branco); box-shadow:0 0 0 4px var(--halo) }
    .otp.foco .casas span.atual:empty::after{ content:''; width:1.5px; height:26px; background:var(--oxblood); animation:pisca 1.06s steps(1) infinite }
    .otp.invalido .casas span{ border-color:var(--perigo) }
    @keyframes pisca{ 50%{ opacity:0 } }
    .validade{ display:flex; align-items:center; gap:10px; margin:0; font-size:13px; line-height:1.4; color:var(--muted) }
    .validade b{ font:600 13px/1 var(--dado); color:var(--ink); font-variant-numeric:tabular-nums }
    .anel{ flex:none }
    .anel circle{ fill:none; stroke-width:2.4 }
    .anel .trilho{ stroke:var(--linha) }
    .anel .prog-anel{ stroke:var(--sinal); stroke-linecap:round; transition:stroke-dashoffset .9s linear }

    #cadastro:not([hidden]){ display:flex; flex-direction:column; gap:18px }
    .qr-bloco{ display:flex; gap:18px; align-items:center; padding:7px 0 0 7px }
    .qr{ flex:none; position:relative; width:132px; height:132px; padding:10px; background:var(--branco); border-radius:14px }
    .qr :is(img, canvas){ display:block; width:112px !important; height:112px !important }
    .qr::before{ content:''; position:absolute; inset:-7px; border-radius:18px; border:2px solid var(--oxblood);
      -webkit-mask:linear-gradient(#000 0 0) 0 0/30% 30% no-repeat, linear-gradient(#000 0 0) 100% 0/30% 30% no-repeat, linear-gradient(#000 0 0) 0 100%/30% 30% no-repeat, linear-gradient(#000 0 0) 100% 100%/30% 30% no-repeat;
      mask:linear-gradient(#000 0 0) 0 0/30% 30% no-repeat, linear-gradient(#000 0 0) 100% 0/30% 30% no-repeat, linear-gradient(#000 0 0) 0 100%/30% 30% no-repeat, linear-gradient(#000 0 0) 100% 100%/30% 30% no-repeat }
    .passos{ margin:0; padding:0; list-style:none; counter-reset:q; display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.4; color:var(--muted) }
    .passos li{ counter-increment:q; display:grid; grid-template-columns:20px 1fr; gap:8px }
    .passos li::before{ content:counter(q); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:600 11px/1 var(--dado); color:var(--ink); border:1px solid var(--linha) }
    .passos b{ color:var(--ink) }
    .chave{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0; font-size:12.5px; color:var(--muted) }
    .chave code{ font:500 12.5px var(--dado); color:var(--ink); background:var(--campo); border:1px solid var(--linha); padding:3px 7px; border-radius:6px; overflow-wrap:anywhere }
    .chave button{ border:0; background:transparent; padding:3px 6px; border-radius:6px; color:var(--oxblood); font:500 12.5px var(--ui); cursor:pointer }

    .rodape{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 24px; font-size:12px; color:var(--muted) }
    .devby{ display:inline-flex; align-items:center; gap:9px; font:500 10px/1 var(--dado); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; opacity:.85; transition:opacity .15s }
    .devby:hover{ opacity:1 }
    .devby img{ height:20px; width:auto; opacity:.75 }

    /* Celular e tablet em pé: mapa no topo, formulário sobe como folha. */
    @media (max-width: 899px){
      .palco{ grid-template-columns:1fr; grid-template-rows:auto 1fr }
      .marca{ height:316px; padding:max(22px, env(safe-area-inset-top)) 22px 0 max(22px, env(safe-area-inset-left)) }
      .logo{ height:34px }
      .produto{ font-size:10px; letter-spacing:.18em; padding-left:12px }
      .chamada, .legenda, .plantao{ display:none }
      .lado{ justify-content:flex-start; gap:16px; padding:0 }
      .cartao{ max-width:none; flex:1; gap:18px; border-radius:30px 30px 0 0; border-bottom:0; padding:12px 22px max(20px, env(safe-area-inset-bottom)); box-shadow:0 -10px 40px oklch(0.3 0.03 250 / .12) }
      .cartao::before{ content:''; width:40px; height:5px; border-radius:3px; margin:0 auto 2px; background:var(--linha) }
      .tit h2{ font-size:27px }
      .tit p{ font-size:14px }
      .casas span{ height:54px; font-size:23px }
      .qr{ width:116px; height:116px; padding:8px } .qr :is(img, canvas){ width:100px !important; height:100px !important }
      .rodape{ margin-top:auto; padding-top:8px }
      .rodape.fora{ display:none }
    }
    @media (min-width: 900px){ .cartao .rodape{ display:none } }
    @media (min-width: 900px) and (max-height: 760px){ .chamada{ margin-top:24px } .chamada h1{ font-size:52px } }
    @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation:none !important; transition:none !important } }