/* =========================
   BASE / LAYOUT
========================= */
:root{
  --livti-orange:#e68200;
  --livti-orange-2:#ff9d1c;
  --livti-dark:#0f172a;
  --livti-muted:#667085;
  --livti-border:#d8dee8;
  --livti-bg:#f4f6fb;
  --card-shadow:0 22px 55px rgba(15,23,42,.14);
}

*{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  padding:24px;
  font-family:'Rubik', sans-serif;
  background:
    radial-gradient(circle at 50% 18%, rgba(230,130,0,.13), transparent 28%),
    linear-gradient(180deg,#eef3fb 0%, #f7f8fb 48%, #eef2f8 100%);
  color:var(--livti-dark);
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:auto 0 0 0;
  height:42%;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.72) 100%);
  z-index:0;
}

/* =========================
   CARD PRINCIPAL
========================= */
.login-container{
  position:relative;
  z-index:1;
  width:min(390px, calc(100vw - 36px));
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,232,240,.95);
  border-radius:24px;
  box-shadow:var(--card-shadow);
  padding:38px 36px 30px;
  text-align:center;
  animation:fadeIn .45s ease-out;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  backdrop-filter:blur(10px);
}

.login-container::before{
  display:none;
}

.login-container > img{
  width:146px !important;
  height:auto;
  align-self:center;
  margin:0 0 8px;
  display:block;
}

h2{
  margin:0 0 24px;
  color:var(--livti-dark);
  font-weight:800;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.2px;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* =========================
   FORM / INPUTS
========================= */
.form-group{
  position:relative;
  margin-bottom:14px;
}

.icon{
  position:absolute;
  top:50%;
  left:14px;
  transform:translateY(-50%);
  font-size:15px;
  line-height:1;
  color:var(--livti-muted);
  pointer-events:none;
  filter:saturate(.55);
}

.login-container > .form-group input{
  width:100%;
  height:48px;
  padding:0 14px 0 43px;
  border:1px solid var(--livti-border);
  border-radius:12px;
  font-size:16px;
  color:var(--livti-dark);
  background:#fff;
  outline:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.login-container > .form-group input::placeholder{
  color:#98a2b3;
}

.login-container > .form-group input:focus{
  border-color:var(--livti-orange);
  box-shadow:0 0 0 4px rgba(230,130,0,.14);
}

#email[type="email"]{
  color:#1f2937;
  caret-color:var(--livti-orange);
  font-weight:500;
}

input[type="password"]{
  caret-color:var(--livti-orange);
}

/* Autofill */
#email:-webkit-autofill,
#email:-webkit-autofill:hover,
#email:-webkit-autofill:focus{
  -webkit-text-fill-color:#1f2937 !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  transition:background-color 9999s ease-out, color 0s;
}

/* =========================
   LINK ESQUECEU SENHA
========================= */
.forgot-link{
  order:5;
  text-align:right !important;
  margin:-2px 2px 14px 0 !important;
}

.forgot-link a{
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  color:#ec720e;
}

.forgot-link a:hover{
  text-decoration:underline;
}

/* =========================
   BOTÃO PRINCIPAL
========================= */
.login-container > #btn-login{
  order:6;
  width:100%;
  height:48px;
  background:linear-gradient(90deg,var(--livti-orange),var(--livti-orange-2));
  color:#fff;
  padding:0 14px;
  font-size:15px;
  font-weight:800;
  border:0;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(230,130,0,.22);
  transition:
    filter .15s ease,
    transform .12s ease,
    box-shadow .15s ease;
}

.login-container > #btn-login:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
  box-shadow:0 15px 28px rgba(230,130,0,.25);
}

.login-container > #btn-login:active{
  transform:translateY(0);
  box-shadow:0 10px 20px rgba(230,130,0,.20);
}

.login-container > #btn-login:disabled{
  cursor:not-allowed;
  opacity:.72;
  transform:none;
}

/* Loader no botão principal */
.login-container > #btn-login.is-loading{
  position:relative;
  pointer-events:none;
  opacity:.95;
}

.login-container > #btn-login.is-loading span{
  opacity:0;
}

.login-container > #btn-login.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

/* =========================
   MENSAGENS
========================= */
.mensagem{
  order:7;
  margin-top:14px;
  font-size:13px;
  font-weight:700;
  padding:10px 12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1.35;
}

.mensagem:empty{
  display:none;
}

.mensagem.sucesso{
  background:#e6f4ea;
  color:#16734f;
  border:1px solid #a5d6a7;
}

.mensagem.sucesso::before{
  content:"✔";
  font-weight:900;
}

.mensagem.erro{
  background:#fff1f0;
  color:#d93025;
  border:1px solid #f5c2c7;
}

.mensagem.erro::before{
  content:"❌";
  font-weight:900;
}

#login-error{
  order:8;
}

/* =========================
   RESPONSIVO LOGIN
========================= */
@media (max-width:480px){
  body{
    padding:18px 14px;
    align-items:center;
  }

  .login-container{
  width:min(316px, calc(100vw - 32px));
  padding:22px 16px 18px;
  border-radius:18px;
  box-shadow:0 16px 38px rgba(15,23,42,.12);
}

  .login-container::before{
    width:76px;
    height:3px;
  }

  .login-container > img{
  width:118px !important;
  margin-bottom:8px;
}

  h2{
  font-size:17px;
  margin-bottom:21px;
}

  .form-group{
    margin-bottom:12px;
  }

  .login-container > .form-group input{
    height:44px;
    border-radius:10px;
    font-size:16px;
    padding-left:40px;
  }

  .icon{
    left:13px;
    font-size:14px;
  }

  .forgot-link{
    margin:-1px 1px 12px 0 !important;
  }

  .forgot-link a{
    font-size:12px;
  }

  .login-container > #btn-login{
    height:45px;
    border-radius:10px;
    font-size:14px;
  }

  .mensagem{
    font-size:12px;
    padding:9px 10px;
  }
}

@media (max-height:640px){
  body{
    padding-top:12px;
    padding-bottom:12px;
  }

  .login-container{
    padding-top:22px;
    padding-bottom:18px;
  }

  .login-container > img{
    width:118px !important;
  }

  h2{
    margin-bottom:16px;
  }

  .form-group{
    margin-bottom:10px;
  }

  .login-container > .form-group input{
    height:42px;
  }

  .login-container > #btn-login{
    height:43px;
  }
}

/* =========================
   OVERLAY DE PROCESSAMENTO
========================= */
.processing-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  place-items:center;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(7px);
}

.processing-overlay.show{
  display:grid;
}

.processing-box{
  background:#fff;
  border:1px solid #e6e9f0;
  border-radius:16px;
  padding:20px;
  width:min(290px, calc(100vw - 38px));
  text-align:center;
  box-shadow:0 18px 45px rgba(15,23,42,.15);
}

.processing-title{
  font-weight:800;
  color:#1f2937;
  margin-bottom:10px;
}

.processing-hint{
  margin-top:10px;
  font-size:12px;
  color:#6b7280;
}

.progress{
  position:relative;
  height:8px;
  background:#f1f5f9;
  border-radius:999px;
  overflow:hidden;
}

.progress::before{
  content:"";
  position:absolute;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(90deg,var(--livti-orange),var(--livti-orange-2));
  border-radius:inherit;
  animation:indeterminate 1.2s ease-in-out infinite;
}

@keyframes indeterminate{
  0%{
    left:-40%;
    width:40%;
  }
  50%{
    left:20%;
    width:60%;
  }
  100%{
    left:110%;
    width:40%;
  }
}

.check,
.x{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:4px auto 8px;
  border-radius:50%;
  color:#fff;
  font-weight:900;
  font-size:26px;
  animation:pop .28s ease-out both;
}

.check{
  background:linear-gradient(180deg,var(--livti-orange),var(--livti-orange-2));
}

.x{
  background:linear-gradient(180deg,#ef4444,#f97373);
  font-size:24px;
}

@keyframes pop{
  from{
    transform:scale(.8);
    opacity:.6;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

.processing-overlay.success .progress{
  display:none;
}

.processing-overlay.success .check{
  display:inline-flex;
}

.processing-overlay.error .progress{
  display:none;
}

.processing-overlay.error .x{
  display:inline-flex;
}

body.route-leave .login-container{
  animation:leavePage .38s ease forwards;
}

@keyframes leavePage{
  to{
    transform:translateY(-10px);
    opacity:0;
    filter:blur(2px);
  }
}

/* =========================
   MODAL / CARTÃO BASE
========================= */
.force-overlay[hidden]{
  display:none !important;
}

.force-overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(10,16,30,.58);
  backdrop-filter:blur(4px);
  z-index:9999;
  padding:16px;
}

.force-card{
  width:480px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  background:#ffffff;
  border:1px solid #eef1f6;
  border-radius:20px;
  padding:22px;
  box-shadow:0 24px 60px rgba(15,23,42,.20);
  animation:fc-pop .18s ease-out;
  color:#0f172a;
}

@keyframes fc-pop{
  from{
    transform:translateY(6px);
    opacity:0;
  }
  to{
    transform:none;
    opacity:1;
  }
}

.force-card h3{
  margin:0 0 6px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.2px;
}

.force-card p{
  margin:0 0 16px;
  color:#64748b;
  font-size:14px;
  line-height:1.55;
}

/* =========================
   CAMPOS DE SENHA MODAL
========================= */
.fc-label{
  display:block;
  font-size:12px;
  color:#6b7280;
  margin:10px 0 6px;
  font-weight:700;
}

.fc-input-wrap{
  position:relative;
  width:100%;
}

.fc-input{
  width:100%;
  border:1px solid #e6e9f0;
  border-radius:12px;
  padding:12px 46px 12px 14px;
  font:inherit;
  font-size:16px;
  background:#fff;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.fc-input:focus{
  border-color:var(--livti-orange);
  box-shadow:0 0 0 3px rgba(230,130,0,.16);
}

.pw-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#475569;
  cursor:pointer;
  z-index:2;
}

.pw-toggle:hover{
  background:rgba(15,23,42,.06);
}

.pw-toggle svg{
  width:18px;
  height:18px;
}

.pw-toggle .eye-closed{
  display:none;
}

.pw-toggle.is-on .eye-open{
  display:none;
}

.pw-toggle.is-on .eye-closed{
  display:block;
}

/* =========================
   CARTÃO DO TERMO
========================= */
.terms-card{
  width:760px;
  max-width:calc(100vw - 32px);
  background:#ffffff;
  color:#000;
  border:1px solid #e2e8f0;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}

.welcome-title{
  text-align:center;
  font-size:22px;
  font-weight:900;
  margin:0;
  color:#0f172a;
}

.welcome-subtitle{
  text-align:center;
  font-size:16px;
  margin:2px 0 14px;
  color:#0f172a;
}

.welcome-body{
  color:#334155;
  font-size:14px;
  line-height:1.6;
}

.welcome-list{
  padding-left:18px;
}

.welcome-cta{
  margin-top:8px;
  font-weight:600;
}

#terms-content{
  flex:1 1 auto;
  overflow-y:auto;
  padding-right:10px;
  font-size:15px;
  line-height:1.6;
  color:#000;
  max-height:60vh;
}

#terms-overlay strong{
  color:#0f172a;
  font-weight:700;
}

.decline-text{
  color:#374151;
  font-size:14px;
  line-height:1.6;
}

/* =========================
   REGRAS / FORÇA / AÇÕES
========================= */
.strength{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0 6px;
}

.strength .bars{
  display:flex;
  gap:6px;
  width:180px;
}

.strength .bars span{
  flex:1 0 0;
  height:8px;
  border-radius:999px;
  background:#e5e7eb;
}

.strength-text{
  font-size:12px;
  color:#6b7280;
  min-width:90px;
}

.strength.s1 .bars span:nth-child(-n+1){
  background:#ef4444;
}

.strength.s2 .bars span:nth-child(-n+2){
  background:#f59e0b;
}

.strength.s3 .bars span:nth-child(-n+3){
  background:#f59e0b;
}

.strength.s4 .bars span:nth-child(-n+4){
  background:#16a34a;
}

.strength.s1 .strength-text{
  color:#ef4444;
}

.strength.s2 .strength-text,
.strength.s3 .strength-text{
  color:#f59e0b;
}

.strength.s4 .strength-text{
  color:#16a34a;
}

.rules{
  list-style:none;
  padding-left:14px;
  margin:6px 0 0;
}

.rules li{
  position:relative;
  padding-left:16px;
  font-size:12px;
  color:#6b7280;
  line-height:1.7;
}

.rules li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#9aa3b2;
}

.rules li.ok{
  color:#16a34a;
}

.rules li.ok::before{
  content:"✓";
  color:#16a34a;
  font-weight:800;
}

.fc-msg{
  margin-top:10px;
  min-height:18px;
  font-size:13px;
  color:#b91c1c;
  font-weight:700;
}

.fc-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.fc-btn{
  border:0;
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.1px;
}

.fc-btn.outline{
  background:#fff;
  color:#0f172a;
  border:1px solid #e6e9f0;
}

.fc-btn.primary{
  background:linear-gradient(90deg,var(--livti-orange),var(--livti-orange-2));
  color:#fff;
  box-shadow:0 10px 24px rgba(230,130,0,.25);
  transition:transform .12s, filter .12s;
}

.fc-btn.primary:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

.fc-btn.primary:active{
  transform:translateY(0);
}

/* =========================
   RESPONSIVO MODAIS
========================= */
@media (max-width:480px){
  .force-overlay{
    padding:12px;
  }

  .force-card,
  .terms-card{
    width:100%;
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    border-radius:18px;
    padding:18px;
  }

  .force-card h3,
  .welcome-title{
    font-size:19px;
  }

  .force-card p,
  .welcome-body,
  .decline-text{
    font-size:13px;
  }

  #terms-content{
    max-height:54vh;
    font-size:13px;
    line-height:1.55;
  }

  .strength{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .strength .bars{
    width:100%;
  }

  .fc-actions{
    flex-direction:column;
  }

  .fc-btn{
    width:100%;
  }
}
/* =========================================================
   HOTFIX — overlays de primeiro acesso centralizados no viewport
   O backdrop-filter/transform do .login-container cria contexto
   para descendentes position:fixed. Removemos esse contexto
   somente enquanto um modal de primeiro acesso estiver aberto.
   ========================================================= */
.login-container:has(.force-overlay:not([hidden])){
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none !important;
}