/* ===== Login Moderno — KASOFT Ponto (mobile-first) ===== */
:root{
  /* Paleta */
  --bg1:#0f172a; --bg2:#111827; --glow:#38bdf8; --glow2:#22d3ee;
  --fg:#e5e7eb; --muted:#9ca3af; --border:#2a3346; --danger:#ef4444;
  --btn1:#38bdf8; --btn2:#0ea5e9;
  --radius:18px;

  /* Tipografia/escala fluida */
  --fs-sm:clamp(12px,1.4vw,14px);
  --fs-md:clamp(14px,1.8vw,16px);
  --fs-lg:clamp(18px,2.4vw,22px);
  --fs-xl:clamp(22px,3.2vw,28px);

  --sp-1:clamp(6px,1vw,10px);
  --sp-2:clamp(10px,2vw,16px);
  --sp-3:clamp(16px,3vw,24px);
  --sp-4:clamp(22px,4vw,32px);
}

*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--fg); font:var(--fs-md)/1.5 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, #0ea5e955, transparent 60%),
              radial-gradient(800px 600px at 120% 20%, #38bdf833, transparent 50%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow:auto;
}

/* container central responsivo */
.shell{
  min-height:100dvh; display:grid; place-items:center; padding:var(--sp-4) var(--sp-2);
}

/* cartão com vidro */
.card{
  width:100%; max-width:440px;
  background:linear-gradient( to bottom right, rgba(30,41,59,.65), rgba(15,23,42,.55) );
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(148,163,184,.15);
  border-radius:var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  padding:var(--sp-4);
  position:relative;
}

/* halo decorativo */
.card::before{
  content:""; position:absolute; inset:-1px;
  border-radius:calc(var(--radius) + 2px);
  background: conic-gradient(from 180deg at 50% 50%, var(--glow) 0%, var(--glow2) 25%, transparent 60%, var(--glow) 100%);
  filter: blur(24px) opacity(.25);
  z-index:-1;
}

.brand{
  display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-3);
}

.brand h1{ margin:0; font-size:var(--fs-lg); font-weight:800; letter-spacing:.2px; }
.brand .muted{ color:var(--muted); font-size:var(--fs-sm); margin-top:2px }

.msg-err{
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 38%, var(--border));
  color:#fecaca; border-radius:14px; padding:10px 12px; margin-bottom:var(--sp-2);
  font-size:var(--fs-sm);
}

/* campo com ícone */
.field{ display:grid; gap:6px; margin-top:var(--sp-2); }
.label{ color:var(--muted); font-size:var(--fs-sm); }

.input-wrap{
  position:relative;
  display:flex; align-items:center;
  background:rgba(2,6,23,.45);
  border:1px solid var(--border);
  border-radius:14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input-wrap:focus-within{
  border-color:var(--glow);
  box-shadow:0 0 0 3px rgba(56,189,248,.18);
}

.icon{
  width:20px; height:20px; margin-left:12px; opacity:.9; flex:0 0 auto;
}
.input{
  flex:1; min-width:0; background:transparent; border:0; color:var(--fg);
  padding:12px; font-size:var(--fs-md); outline:none;
}
.input::placeholder{ color:#94a3b8; opacity:.8 }

/* toggle senha */
.eye{
  position:absolute; right:10px; display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px; cursor:pointer; border:0; background:transparent; color:#9fb3c8;
}
.eye:hover{ color:#cfe7ff; }

/* ações */
.row{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-2); }
.checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:var(--fs-sm); }

.btn{
  width:100%; border:0; cursor:pointer; margin-top:var(--sp-3);
  border-radius:14px; padding:14px;
  font-weight:900; letter-spacing:.3px; font-size:var(--fs-md);
  color:#021016;
  background: linear-gradient(135deg, var(--btn1), var(--btn2));
  box-shadow: 0 8px 24px rgba(34,211,238,.25);
  transition: transform .02s ease-in-out, filter .2s ease;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(1px) }

/* links */
.links{ margin-top:var(--sp-2); display:flex; justify-content:space-between; }
.a{ color:var(--glow); text-decoration:none; font-size:var(--fs-sm); }
.a:hover{ text-decoration:underline; }

/* acessibilidade: menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* Aviso (banner) */
.alert {
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
}
.alert-warn {
  background: #f59e0b22;
  border-color: #f59e0b66;
  color: #fde68a;
  font-weight: 600;
}

/* Lista de requisitos da senha */
.pw-reqs { margin: var(--sp-2) 0 0; padding-left: 0; list-style: none; }
.pw-reqs li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  margin: 6px 0;
}
.pw-reqs .icon {
  width: 16px; height: 16px; flex: 0 0 auto;
}
.pw-reqs .ok { color: #22c55e; }      /* verde */
.pw-reqs .bad { color: #ef4444; }     /* vermelho */

/* Botão secundário (Cancelar) */
.btn-secondary{
  width:100%;
  border-radius:14px;
  padding:12px;
  font-weight:800;
  font-size:var(--fs-md);
  border:1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--fg);
  margin-top: var(--sp-2);
}
.btn-secondary:hover{ background: rgba(255,255,255,.12); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.pw-reqs { margin: var(--sp-2) 0 0; padding-left:0; list-style:none; }
.pw-reqs li{
  display:flex; align-items:center; gap:10px; margin:6px 0;
  font-size: var(--fs-sm);
}
.pw-reqs .icon{ width:16px; height:16px }
.pw-reqs li.ok .txt{ color:#22c55e }
.pw-reqs li.bad .txt{ color:#ef4444 }

/* opcional: banner central */
.alert-warn{ text-align:center }

/* Mensagem de validação no submit */
.msg-err {
  background: #3a0b0b;
  color: #ffd1d1;
  border: 1px solid #61221c;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}


/* === Mobile: altura real da viewport e áreas seguras === */
.shell{
  min-height: 100dvh;                   /* altura real em mobile modernos */
  min-height: 100svh;                   /* fallback Safari/iOS */
  padding: var(--sp-4) var(--sp-2);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}

.card{
  width: min(94vw, 440px);
  margin-inline: auto;
}

/* Evita “apertar” demais em telas muito pequenas */
@media (max-width: 480px){
  :root{
    --radius:16px;
    --fs-sm: 13px;
    --fs-md: 16px;              /* ≥16px evita zoom automático no iOS */
    --fs-lg: 20px;
    --fs-xl: 26px;
  }
  .card{ padding: clamp(18px, 4vw, 24px); }
  .brand{ gap: 10px; margin-bottom: var(--sp-2); }

  /* logo menor e fluida */
  .brand img{
    width: clamp(60px, 22vw, 90px);
    height:auto;
  }

  .input-wrap{ border-radius: 12px; }
  .input{ padding: 12px; min-height: 48px; }
  .eye{ right: 6px; width: 40px; height: 40px; }  /* alvo de toque ≥ 40px */

  .btn{ min-height: 48px; border-radius: 12px; }
  .btn-secondary{ min-height: 44px; border-radius: 12px; }

  .msg-err{ font-size: 13px; padding: 8px 10px; }
}

/* No iOS/Android a barra some/volta: garanta transições suaves */
.shell{ transition: min-height .2s ease; }

/* Aumenta área de toque de labels e botões no mobile */
@media (pointer: coarse){
  .label{ line-height: 1.3; }
  .btn, .btn-secondary{ touch-action: manipulation; }
  .input{ caret-color: var(--fg); }
}

/* Estado de foco visível e consistente */
.input-wrap:focus-within{
  border-color: var(--glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 30%, transparent);
}

/* Qualquer elemento com atributo hidden deve sumir */
[hidden] {
    display: none !important;
}