/* TOK Importadores 1.0.5: login nas cores TOK (marinho #0D2B5B + laranja) com a propaganda das 20 dobras DHF. */
:root{
  --navy:#0D2B5B;--navy2:#091d3e;--navy3:#1a3a6a;
  --orange:#E8650A;--orange-txt:#B94800;--orange-btn:#C45208;
  --bg:#F0F4FA;--surface:#fff;--surface2:#F8FAFF;
  --text:#1A2340;--text2:#2d3a56;--muted:#5D6B88;
  --line:#DDE3EE;
  --red:#B91C1C;--red-bg:#FEE2E2;
  --info-bg:#FFF4EC;--info-line:#F6C9A8;
  --sh-or:0 4px 20px rgba(232,101,10,.3);
  --sh-xl:0 20px 60px rgba(9,29,62,.35),0 8px 24px rgba(9,29,62,.2);
  --r-sm:8px;--r:12px;--r-2xl:24px;
  --ease-expo:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px;overflow-x:hidden}
html,body{margin:0;padding:0;max-width:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;background:var(--navy2);color:var(--text);-webkit-font-smoothing:antialiased}
button,input{font:inherit}

/* palco: login + propaganda. No HTML o login vem primeiro (celular e leitor de tela). */
.palco{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(420px,1fr);grid-template-areas:"promo entrar";min-height:100vh;min-height:100svh;overflow-x:clip}
.palco>.entrar{grid-area:entrar}
.palco>.promo{grid-area:promo;min-width:0;min-height:100vh;min-height:100svh}
.promo-reserva{padding:48px;color:#DCE8FD;background:linear-gradient(135deg,#0A2350,#0D2C63);height:100%}

.entrar{display:flex;align-items:center;justify-content:center;padding:32px clamp(20px,3.4vw,56px);
  background:linear-gradient(135deg,var(--navy2),var(--navy) 55%,var(--navy3))}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.login-card{width:100%;max-width:400px;background:var(--surface);border-radius:var(--r-2xl);box-shadow:var(--sh-xl);padding:40px 36px;animation:fadeUp .5s var(--ease-expo) both}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand-logo{width:46px;height:46px;background:linear-gradient(135deg,var(--orange),#f07320);border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-or);font-size:19px;font-weight:900;color:#fff;flex-shrink:0}
.brand-name{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.brand-tag{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
h1{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.3px;margin:0 0 6px}
.sub{font-size:13px;color:var(--muted);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.field input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface2);color:var(--text);font-size:15px;transition:border-color .2s,box-shadow .2s;outline:none}
.field input:focus{border-color:var(--navy3);box-shadow:0 0 0 3px rgba(13,43,91,.12)}
.erro{background:var(--red-bg);color:var(--red);border-radius:var(--r-sm);padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:16px;line-height:1.45}
.aviso{background:var(--info-bg);border:1px solid var(--info-line);color:var(--orange-txt);border-radius:var(--r-sm);padding:10px 14px;font-size:13px;margin-bottom:16px;line-height:1.45;overflow-wrap:anywhere}
.aviso a{color:var(--orange-txt);font-weight:700}
.ts{min-height:65px;margin:4px 0 12px;display:flex;justify-content:center;max-width:100%;overflow:hidden}
.ts-msg{margin:0 0 12px;font-size:13px;color:var(--orange-txt);line-height:1.45}
.ts-msg[hidden]{display:none}
.btn-entrar{width:100%;padding:13px 24px;border:none;border-radius:var(--r);font-size:15px;font-weight:700;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--orange-btn),var(--orange-txt));box-shadow:var(--sh-or);transition:transform .15s,box-shadow .15s,opacity .15s;margin-top:4px}
.btn-entrar:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px rgba(232,101,10,.4)}
.btn-entrar:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-entrar:focus-visible{outline:3px solid var(--navy3);outline-offset:3px}
.pe{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}

/* celular e tablet: login primeiro, propaganda embaixo, sem rolagem lateral */
@media (max-width:900px){
  .palco{grid-template-columns:minmax(0,1fr);grid-template-areas:"entrar" "promo"}
  .entrar{padding:28px 16px 32px;min-height:auto}
  .palco>.promo{min-height:560px;height:auto}
  .login-card{padding:30px 22px 24px}
}
@media (max-width:360px){.ts{transform:scale(.9);transform-origin:center}}
@media (prefers-reduced-motion:reduce){.login-card{animation:none}.btn-entrar{transition:none}}