/* Login screen: same split layout as the SK8 panel and Uskonni ERP, restyled for Avísalo (approved logo lockup). */
:root{
  --hero-ink:#0A121F;
  --hero-cyan:#49D6E8;
  --hero-violet:#7C6CF0;
  --hero-text:#EAF2FA;
  --hero-text-dim:#96A9C4;

  --amber:#F2A93B;
  --amber-ink:#241605;

  --bg:#F5F8FB;
  --surface:#FFFFFF;
  --surface-2:#EDF2F7;
  --text:#16223A;
  --text-dim:#5A6A85;
  --border:rgba(22,34,58,0.13);
  --focus:#2AAFC4;
  --shadow:0 20px 45px -25px rgba(16,26,46,0.35);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1726; --surface:#16223A; --surface-2:#1C2A45;
    --text:#EAF2FA; --text-dim:#93A5C2;
    --border:rgba(234,242,250,0.12); --focus:#49D6E8;
    --shadow:0 20px 45px -20px rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1726; --surface:#16223A; --surface-2:#1C2A45;
  --text:#EAF2FA; --text-dim:#93A5C2;
  --border:rgba(234,242,250,0.12); --focus:#49D6E8;
  --shadow:0 20px 45px -20px rgba(0,0,0,0.55);
}
:root[data-theme="light"]{
  --bg:#F5F8FB; --surface:#FFFFFF; --surface-2:#EDF2F7;
  --text:#16223A; --text-dim:#5A6A85;
  --border:rgba(22,34,58,0.13); --focus:#2AAFC4;
  --shadow:0 20px 45px -25px rgba(16,26,46,0.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;}

.av-login{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(320px,42%) 1fr;
  overflow-x:hidden;
}
@media (max-width:860px){
  .av-login{grid-template-columns:1fr;}
  .hero{min-height:340px;}
}

.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(124,108,240,0.30), transparent 60%),
    radial-gradient(90% 70% at 85% 0%, rgba(73,214,232,0.16), transparent 55%),
    var(--hero-ink);
  color:var(--hero-text);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(28px,4vw,56px);
  min-height:100vh;
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hero-top,.hero-mid,.hero-bottom{position:relative;z-index:2;}

.brand-lockup{display:flex;align-items:center;gap:.85rem;}
.brand-mark{width:clamp(52px,6.5vw,76px);height:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.4));}
.wordmark{display:flex;align-items:baseline;gap:.5rem;}
.wordmark .mark{
  font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-0.03em;line-height:.9;
  transform:skewX(-6deg);
  background:linear-gradient(100deg,var(--hero-text) 0%, var(--hero-text) 45%, var(--hero-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wordmark .dot{color:var(--amber);font-size:clamp(2.2rem,5vw,3.4rem);transform:translateY(-2px);}
.org-tag{
  margin-top:.65rem;font:600 .72rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hero-text-dim);
}
.tagline{font-size:clamp(1rem,1.6vw,1.15rem);font-weight:500;max-width:30ch;text-wrap:balance;line-height:1.5;}
.tagline b{color:var(--hero-cyan);font-weight:700;}
.pillrow{display:flex;flex-wrap:wrap;gap:.5rem;}
.pill{
  font:600 .72rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem .75rem;border-radius:999px;border:1px solid rgba(234,242,250,0.18);
  background:rgba(234,242,250,0.06);backdrop-filter:blur(6px);color:var(--hero-text-dim);
}

.panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px);}
.card{width:100%;max-width:380px;}
.kicker{
  font:700 .72rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:1rem;
}
h1{margin:0 0 .4rem;font-size:clamp(1.6rem,3vw,1.85rem);font-weight:800;letter-spacing:-0.01em;text-wrap:balance;}
.sub{margin:0 0 1.9rem;color:var(--text-dim);font-size:.94rem;line-height:1.55;max-width:36ch;}

form{display:flex;flex-direction:column;gap:1.05rem;}
label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.4rem;color:var(--text);}
.field{position:relative;}
input[type="text"],input[type="password"],input[type="email"]{
  width:100%;padding:.72rem .85rem;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.95rem;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder{color:var(--text-dim);opacity:.75;}
input:focus-visible{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);}
.pw-field input{padding-right:2.6rem;}
.pw-toggle{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:none;background:transparent;
  color:var(--text-dim);width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;
  border-radius:6px;cursor:pointer;
}
.pw-toggle:hover{color:var(--text);}
.pw-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.row-between{display:flex;align-items:center;justify-content:space-between;margin-top:-.3rem;}
a.link{color:var(--focus);font-size:.83rem;font-weight:600;text-decoration:none;}
a.link:hover{text-decoration:underline;}

button.submit{
  margin-top:.3rem;padding:.82rem 1rem;border-radius:10px;border:none;background:var(--amber);
  color:var(--amber-ink);font-size:.95rem;font-weight:800;letter-spacing:.01em;cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
button.submit:hover{filter:brightness(1.06);}
button.submit:active{transform:translateY(1px);}
button.submit:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.error-box{
  background:rgba(196,85,42,0.12);border:1px solid rgba(196,85,42,0.35);color:#C4552A;
  padding:.7rem .9rem;border-radius:9px;font-size:.85rem;font-weight:600;
}

.foot{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--text-dim);margin-top:1.6rem;}
.foot .brand{font-weight:700;color:var(--text);}

@media (prefers-reduced-motion: reduce){ .hero canvas{opacity:.9;} }

.wordmark .mark{font-size:clamp(1.9rem,4vw,2.9rem);}
.wordmark .dot{font-size:clamp(1.9rem,4vw,2.9rem);}
.brand-mark{width:clamp(44px,5.5vw,64px);}
.org-tag{max-width:32ch;line-height:1.5;}

.info-box{background:rgba(31,138,76,.12);border:1px solid rgba(31,138,76,.35);color:#1f8a4c;padding:.7rem .9rem;border-radius:9px;font-size:.85rem;font-weight:600;margin-bottom:1rem}
@media (prefers-color-scheme: dark){.info-box{color:#5fd08d}}
.error-box{margin-bottom:1rem}
.alt-links{display:flex;justify-content:space-between;margin-top:.9rem;font-size:.83rem}
.field-hint{font-size:.75rem;color:var(--text-dim);margin-top:.35rem}

/* Avísalo: logo lockup image instead of a text wordmark */
.brand-logo{display:block;height:clamp(44px,5.4vw,64px);width:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.35));}
.org-tag{margin-top:.9rem;}

/* Phones: compact brand strip on top, form visible straight away (the base rule above made the hero full height) */
@media (max-width:860px){
  .av-login .hero{min-height:0;gap:14px;padding:22px 22px 24px;}
  .av-login .hero-mid{display:none;}
  .av-login .hero-bottom{display:none;}
  .av-login .org-tag{margin-top:.6rem;}
  .av-login .panel{align-items:flex-start;padding:26px 22px 40px;}
}

.forgot{margin:14px 0 0;text-align:center;font-size:.9rem}.forgot a{color:inherit;opacity:.8}.forgot a:hover{opacity:1}