/* =====================================================================
   Tela de login — no padrao dos logins SeaTech (SeaDesk, Sea+ContaAzul)

   Desktop: painel da marca CLARO a esquerda (logo, frase, um cartao do
   produto) e o formulario num cartao branco sobre o petroleo, com as
   ondas entre os dois. Celular: a marca em cima, compacta, e o cartao logo
   abaixo — o formulario aparece sem rolar.

   🔴 A marca fica SEMPRE sobre fundo claro. Sobre petroleo os crescentes do
   simbolo somem (ver marca.php); por isso o petroleo e so o lado do
   formulario, que nao leva marca.

   Sem Bootstrap e sem app.css: a tela tem pouca coisa e carrega so isto.
   Fonte local (Atkinson), a mesma emenda de digitos do app.css.
   ===================================================================== */

@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/atkinson-400.woff2') format('woff2');unicode-range:U+0030-0039}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700 800;font-display:swap;src:url('../fonts/atkinson-700.woff2') format('woff2');unicode-range:U+0030-0039}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/atkinson-next.woff2') format('woff2');unicode-range:U+0000-002F,U+003A-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/atkinson-next-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:#12656B; --brand-light:#1C8A91; --brand-glow:#7CC3C5; --brand-deep:#08393D;
  --leaf:#D9924F; --leaf-text:#A85A17;
  --ink:#0E1A1C; --ink-2:#1D2D30; --body:#53656A; --muted:#6B7C80;
  --line:#D6E3E3; --soft:#F2F7F7;
  --ok:#0A8054;
  --f:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --toque:2.75rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);color:var(--ink);background:#F4F9F9;-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:3px;border-radius:6px}

/* ---------- aviso de rede (app.js poe .sem-rede no body) ---------- */
.app-offline{display:none;position:fixed;top:0;left:0;right:0;z-index:50;background:#FFF3D6;color:#5C3A06;border-bottom:1px solid #F3D79A;text-align:center;font-size:.875rem;font-weight:700;padding:.55rem 1rem calc(.55rem);padding-top:calc(.55rem + env(safe-area-inset-top,0px))}
body.sem-rede .app-offline{display:block}

/* ---------- casca ---------- */
.lg{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr;overflow:hidden;background:linear-gradient(160deg,#F9FCFC 0%,#EEF6F6 55%,#E2EFEF 100%)}
@media (min-width:1024px){.lg{grid-template-columns:1.08fr 1fr}}

/* ---------- painel da marca (sempre claro) ---------- */
.lg-brand{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:calc(2.25rem + env(safe-area-inset-top,0px)) 1.5rem 5.5rem}
@media (min-width:1024px){.lg-brand{padding:4rem 6rem 4rem 4rem}}
.lg-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(8,57,61,.10) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(at 35% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(at 35% 40%,#000 0%,transparent 70%)}
.lg-orb{position:absolute;border-radius:50%;display:none}
@media (min-width:1024px){.lg-orb{display:block}}
.lg-orb-1{width:260px;height:260px;top:-185px;left:7%;background:linear-gradient(145deg,#1C8A91 0%,#08393D 100%);box-shadow:0 30px 60px -20px rgba(8,57,61,.45)}
.lg-orb-2{width:62px;height:62px;top:22px;left:calc(7% + 262px);background:linear-gradient(145deg,#F6E3CF,#E9B987);opacity:.9}
@media (max-height:820px){.lg-orb-1{top:-205px}.lg-orb-2{top:12px}}
.lg-waves{position:absolute;left:0;bottom:0;width:100%;height:120px}
@media (min-width:1024px){.lg-waves{width:calc(100% + 220px);height:210px}}

.lg-brand-in{position:relative;z-index:2;width:100%;max-width:34rem;text-align:center}
@media (min-width:1024px){.lg-brand-in{text-align:left}}
.lg-brand h1{line-height:0}
.lg-brand .marca-completa{height:clamp(46px,13vw,60px)!important;width:auto;max-width:100%;margin:0 auto;filter:drop-shadow(0 14px 28px rgba(8,57,61,.16))}
@media (min-width:1024px){.lg-brand .marca-completa{height:clamp(64px,5.4vw,84px)!important;margin:0 0 0 -.25rem}}
.lg-tag{margin-top:.9rem;font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brand)}
.lg-head{display:none;margin-top:2.25rem;font-size:2.05rem;line-height:1.18;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.lg-head span{background:linear-gradient(120deg,var(--brand-light),var(--brand) 55%,var(--brand-deep));-webkit-background-clip:text;background-clip:text;color:transparent}

/* cartao do produto — a mesma ideia do Sea+ContaAzul: mostrar o que ha la dentro */
.lg-peek{display:none;position:relative;margin-top:2rem;max-width:30rem;padding-bottom:2.4rem}
.lg-peek-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.15rem 1.25rem;box-shadow:0 30px 60px -36px rgba(8,57,61,.55),0 8px 20px -14px rgba(8,57,61,.25)}
.lg-peek-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.lg-peek-k{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lg-peek-t{margin-top:.2rem;font-weight:800;font-size:1.05rem;color:var(--ink)}
.lg-peek-badge{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.3rem .6rem;border-radius:99px;background:#FBEBDD;color:var(--leaf-text)}
.lg-peek ul{list-style:none;margin-top:.9rem;display:grid;gap:.6rem}
.lg-peek li{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;align-items:center;font-size:.85rem;color:var(--ink-2)}
.lg-peek li em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--muted)}
.lg-peek li .bar{grid-column:1/-1;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
.lg-peek li .bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand-light),var(--brand))}
.lg-peek li.feito em{color:var(--ok)}
.lg-peek li.feito .bar i{background:linear-gradient(90deg,#2BA57A,var(--ok))}
.lg-peek-chip{position:absolute;right:-.75rem;bottom:0;display:flex;align-items:center;gap:.65rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem;box-shadow:0 20px 44px -24px rgba(8,57,61,.55);font-size:.8rem}
.lg-peek-chip .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(10,128,84,.12);color:var(--ok)}
.lg-peek-chip b{display:block;font-size:.85rem;color:var(--ink)}
.lg-peek-chip span{color:var(--muted)}

.lg-feats{display:none;list-style:none;margin-top:1.6rem;gap:.85rem}
@media (min-width:1024px){.lg-head,.lg-peek{display:block}.lg-feats{display:grid}}
/* a lista de recursos so entra quando cabe ACIMA das ondas */
@media (min-width:1024px) and (max-height:980px){.lg-feats{display:none}}
@media (min-width:1024px) and (max-height:720px){.lg-peek{display:none}}
.lg-feat{display:flex;align-items:center;gap:.85rem}
.lg-feat .ic{width:2.6rem;height:2.6rem;border-radius:.8rem;flex:0 0 auto;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1C8A91 0%,#08393D 100%);box-shadow:0 10px 22px -10px rgba(8,57,61,.55)}
.lg-feat .ic svg{width:1.15rem;height:1.15rem}
.lg-feat b{display:block;font-size:.92rem;color:var(--ink-2)}
.lg-feat span{display:block;font-size:.8rem;color:var(--muted);margin-top:.1rem}

/* ---------- lado do formulario (petroleo) ---------- */
.lg-side{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:1.75rem 1.1rem calc(2rem + env(safe-area-inset-bottom,0px));margin-top:-1px;background:linear-gradient(180deg,#0B4549 0%,#08393D 55%,#052A2E 100%)}
@media (min-width:1024px){.lg-side{background:transparent;padding:3rem 3rem 3rem 5rem}}
.lg-side-bg{display:none;position:absolute;top:0;bottom:0;left:-170px;width:calc(100% + 170px);height:100%}
@media (min-width:1024px){.lg-side-bg{display:block}}
.lg-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.lg-glow-1{width:380px;height:380px;right:-60px;top:10%;background:rgba(28,138,145,.38)}
.lg-glow-2{width:280px;height:280px;right:30%;bottom:-80px;background:rgba(217,146,79,.18)}

.lg-card{position:relative;z-index:2;width:100%;max-width:27rem;background:#fff;border-radius:1.5rem;padding:1.75rem 1.4rem 1.6rem;box-shadow:0 40px 80px -20px rgba(2,20,22,.6),0 12px 30px -10px rgba(2,20,22,.45),0 0 0 1px rgba(255,255,255,.06)}
@media (min-width:480px){.lg-card{padding:2.4rem 2.4rem 2.1rem}}
.lg-accent{height:4px;width:48px;border-radius:99px;background:linear-gradient(90deg,var(--brand-light),var(--brand-deep));margin-bottom:1.15rem}
.lg-card h2{font-size:1.4rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.lg-card .sub{margin-top:.3rem;font-size:.92rem;color:var(--body)}

/* mensagens: FlashMessage e $this->login_error */
.lg-msgs{margin-top:1.25rem;display:grid;gap:.6rem}
.lg-msg{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem .9rem;border-radius:.75rem;font-size:.9rem;line-height:1.45;border:1px solid var(--line);background:var(--soft);color:var(--ink-2)}
.lg-msg svg{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.1rem}
.lg-msg-success{border-color:#A7F3D0;background:#ECFDF5;color:#065F46}
.lg-msg-danger,.lg-msg-error{border-color:#FECACA;background:#FEF2F2;color:#991B1B}
.lg-msg-warning{border-color:#FDE3B8;background:#FFF8EC;color:#7A4510}
.lg-msg-info{border-color:#C7E3E4;background:#EEF7F7;color:#0B4549}

form.lg-form{margin-top:1.4rem;display:grid;gap:1.05rem}
.lg-field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-2);margin-bottom:.4rem}
.lg-field .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lg-input{position:relative}
.lg-input>svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.05rem;height:1.05rem;color:#8FA1A4;pointer-events:none;transition:color .2s}
.lg-input input{width:100%;min-height:var(--toque);padding:.7rem .9rem .7rem 2.55rem;border:1px solid #C9D9DA;border-radius:.75rem;background:#fff;color:var(--ink);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.lg-input input::placeholder{color:#9AABAE}
.lg-input input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,101,107,.16)}
.lg-input:focus-within>svg{color:var(--brand)}
.lg-input.com-olho input{padding-right:3rem}
.lg-olho{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;border:0;border-radius:.6rem;background:transparent;color:#7D9093;display:grid;place-items:center}
.lg-olho:hover{color:var(--brand);background:var(--soft)}
.lg-olho svg{width:1.15rem;height:1.15rem}
.lg-olho .fecha,.lg-olho[aria-pressed="true"] .abre{display:none}
.lg-olho[aria-pressed="true"] .fecha{display:block}
.lg-caps{display:none;margin-top:.45rem;font-size:.8rem;font-weight:700;color:var(--leaf-text)}
.lg-caps.ligado{display:block}
.lg-esqueci{font-size:.82rem;font-weight:700;color:var(--brand)}
.lg-esqueci:hover{text-decoration:underline}

.lg-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:3rem;margin-top:.25rem;border:0;border-radius:.8rem;font-size:1rem;font-weight:700;color:#fff;background-image:linear-gradient(135deg,#1C8A91 0%,#08393D 100%);box-shadow:0 12px 26px -8px rgba(8,57,61,.55),0 3px 8px -2px rgba(8,57,61,.3);transition:box-shadow .2s,transform .15s}
.lg-btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px -8px rgba(8,57,61,.6),0 4px 10px -2px rgba(8,57,61,.35)}
.lg-btn:active{transform:none}
.lg-btn svg{width:1.1rem;height:1.1rem}
.lg-btn .gira{display:none;width:1.05rem;height:1.05rem;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
.lg-btn.enviando{pointer-events:none;opacity:.9}
.lg-btn.enviando .gira{display:block}
.lg-btn.enviando svg{display:none}
@keyframes gira{to{transform:rotate(360deg)}}

.lg-novo{margin-top:1.35rem;padding-top:1.2rem;border-top:1px solid #E4EDED;text-align:center;font-size:.9rem;color:var(--body)}
.lg-novo a{font-weight:700;color:var(--brand)}
.lg-novo a:hover{text-decoration:underline}

/* ---------- abaixo do cartao (sobre o petroleo) ---------- */
.lg-below{position:relative;z-index:2;width:100%;max-width:27rem;display:grid;gap:.85rem;justify-items:center;text-align:center;color:rgba(255,255,255,.62);font-size:.82rem}
.lg-below a{color:rgba(255,255,255,.78)}
.lg-below a:hover{color:#fff;text-decoration:underline}
.lg-voltar{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.lg-voltar svg{width:.95rem;height:.95rem}
.lg-nota{display:flex;align-items:center;gap:.45rem;justify-content:center;line-height:1.45}
.lg-nota svg{flex:0 0 auto;width:.95rem;height:.95rem;color:var(--brand-glow)}
.lg-legal{display:flex;gap:.35rem 1rem;flex-wrap:wrap;justify-content:center;color:rgba(255,255,255,.45);font-size:.78rem}

/* "Instalar o app": app.js mostra quando o navegador oferece (.visivel) */
.app-instalar{display:none;align-items:center;gap:.5rem;min-height:var(--toque);padding:.55rem 1.1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:.9rem;backdrop-filter:blur(6px)}
.app-instalar.visivel{display:inline-flex}
.app-instalar:hover{background:rgba(255,255,255,.14)}
.app-instalar svg{width:1rem;height:1rem}

/* ---------- entrada suave ---------- */
@media (prefers-reduced-motion:no-preference){
  .lg-sobe{animation:lgSobe .6s cubic-bezier(.2,.7,.2,1) both}
  .lg-sobe-2{animation-delay:.08s}.lg-sobe-3{animation-delay:.16s}
  @keyframes lgSobe{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
  .lg-flutua{animation:lgFlutua 7s ease-in-out infinite}
  @keyframes lgFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}

/* celular baixo (iPhone SE e afins): marca ainda mais compacta */
@media (max-width:1023px) and (max-height:700px){
  .lg-brand{padding-top:calc(1.4rem + env(safe-area-inset-top,0px));padding-bottom:4.4rem}
  .lg-tag{margin-top:.6rem}
  .lg-waves{height:96px}
}

/* celular bem baixo (320x568 e afins), com mensagem de erro na tela: o botao
   Entrar precisa caber sem rolar — e quem errou a senha e quem mais tenta de novo */
@media (max-width:1023px) and (max-height:600px){
  .lg-brand{padding-top:calc(.9rem + env(safe-area-inset-top,0px));padding-bottom:3.3rem}
  .lg-tag{display:none}
  .lg-waves{height:72px}
  .lg-side{padding-top:1.1rem}
  .lg-card{padding:1.25rem 1.1rem 1.2rem}
  .lg-accent{margin-bottom:.8rem}
  .lg-card h2{font-size:1.25rem}
  .lg-card .sub{display:none}
  .lg-msgs{margin-top:.9rem}
  .lg-msg{padding:.6rem .75rem;font-size:.85rem}
  form.lg-form{margin-top:1rem;gap:.8rem}
}

/* ---------- telas de /senha (pedir, redefinir, pronto) na mesma casca ---------- */
.lg-card .sub+.sub{margin-top:.7rem}
.lg-card .lg-acao{margin-top:1.4rem}
.lg-card a.lg-btn{text-decoration:none}
.lg-ajuda{margin-top:.45rem;font-size:.8rem;color:var(--muted)}
.lg-card .sub strong{color:var(--ink-2)}