/* Hangar Legalite · login pro v1
   Capa visual aislada: no modifica autenticación, rutas ni validaciones. */

.app-public:has(.login-pro){
  margin:0;
  min-width:320px;
  background:#f7f4f3;
}

.app-public:has(.login-pro) .public-main{min-height:100vh;min-height:100svh}

.login-pro{
  --login-wine:#a3262d;
  --login-wine-dark:#7d1b22;
  --login-wine-soft:#f8e9ea;
  --login-ink:#23191b;
  --login-ink-soft:#493a3d;
  --login-muted:#7e7173;
  --login-line:#e7dcda;
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(470px,.88fr);
  place-items:stretch;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 8%,rgba(163,38,45,.06),transparent 22rem),
    linear-gradient(135deg,#faf8f7,#f4efee);
  color:var(--login-ink);
  font-family:Inter,"Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,sans-serif;
}

.login-pro::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-11rem;
  bottom:-13rem;
  width:34rem;
  aspect-ratio:1;
  border:1px solid rgba(163,38,45,.08);
  border-radius:50%;
  box-shadow:0 0 0 5rem rgba(163,38,45,.025),0 0 0 10rem rgba(163,38,45,.015);
}

.login-pro__showcase{
  min-width:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  padding:clamp(34px,4.2vw,72px) clamp(38px,6.3vw,108px);
  background:
    radial-gradient(circle at 14% 2%,rgba(190,66,72,.28),transparent 21rem),
    radial-gradient(circle at 92% 88%,rgba(163,38,45,.22),transparent 24rem),
    linear-gradient(145deg,#1a1113 0%,#27191b 48%,#3a292c 100%);
  color:#fff;
}

.login-pro__showcase::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:linear-gradient(135deg,#000 20%,transparent 86%);
  pointer-events:none;
}

.login-pro__showcase::after{
  width:min(620px,58vw);
  height:min(620px,58vw);
  right:-25%;
  bottom:-38%;
  border:1px solid rgba(228,151,155,.13);
  border-radius:50%;
  box-shadow:0 0 0 76px rgba(255,255,255,.018),0 0 0 152px rgba(255,255,255,.012);
  transform:none;
}

.login-pro__brand,
.login-pro__hero,
.login-pro__showcase-footer{position:relative;z-index:2}

.login-pro__brand{
  align-self:flex-start;
  width:max-content;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 34px rgba(0,0,0,.2);
}

.login-pro__brand img{display:block;width:clamp(122px,10vw,168px);height:34px;object-fit:contain}

.login-pro__hero{
  width:100%;
  max-width:670px;
  align-items:flex-start;
  text-align:left;
  margin:auto 0;
  padding:48px 0;
}

.login-pro__kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:#e8bfc2;
  font-size:10px;
  letter-spacing:.22em;
}

.login-pro__kicker::before{content:"";width:28px;height:2px;border-radius:999px;background:#ce676d;box-shadow:0 0 14px rgba(206,103,109,.5)}

.login-pro .login-pro__hero h1{
  margin:18px 0 2px;
  color:#fff;
  font-size:clamp(76px,8.2vw,132px);
  line-height:.86;
  font-weight:790;
  letter-spacing:-.07em;
  text-shadow:0 20px 48px rgba(0,0,0,.2);
}

.login-pro__byline{
  justify-content:flex-start;
  gap:7px;
  margin:12px 0 0;
  color:rgba(255,255,255,.72);
  font-size:14px;
  letter-spacing:.03em;
}

.login-pro__byline strong{color:#fff;font-size:17px;font-weight:790;letter-spacing:-.025em}

.login-pro__tagline{
  max-width:610px;
  margin:34px 0 0;
  color:rgba(255,255,255,.78);
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.65;
  text-align:left;
}

.login-pro__signals{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}

.login-pro__signals span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.76);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
}

.login-pro__signals i,
.login-pro__status i{display:block;width:6px;height:6px;border-radius:50%;background:#d8797e;box-shadow:0 0 0 4px rgba(216,121,126,.1)}

.login-pro__showcase-footer{
  align-self:flex-end;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.43);
  font-size:9px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.login-pro__status{display:inline-flex;align-items:center;gap:9px}

.login-pro__card{
  position:relative;
  align-self:center;
  justify-self:center;
  width:min(490px,calc(100% - 64px));
  margin:34px 0;
  padding:clamp(32px,4vw,48px);
  overflow:hidden;
  border:1px solid rgba(220,206,204,.92);
  border-radius:26px;
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 75px rgba(54,34,37,.12),0 2px 8px rgba(54,34,37,.04);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.login-pro__card-accent{
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--login-wine-dark),#c94c53 52%,#e2a0a3);
}

.login-pro__card-head{align-items:center;gap:15px;margin:0 0 18px}

.login-pro__mark-wrap{
  display:grid;
  place-items:center;
  flex:0 0 58px;
  width:58px;
  height:58px;
  border:1px solid #eadedd;
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 25px rgba(70,40,44,.08),0 0 0 5px #faf6f5;
}

.login-pro .login-pro__mark-wrap .auth-mark{width:44px;height:44px;border:0;border-radius:12px}

.login-pro__card-head .eyebrow{display:block;margin-bottom:5px;color:var(--login-wine);font-size:9px;letter-spacing:.16em}

.login-pro .login-pro__card-head h2{margin:0;color:var(--login-ink);font-size:clamp(25px,2.1vw,31px);line-height:1.08;font-weight:790;letter-spacing:-.04em}

.login-pro__intro{margin:0 0 24px;color:var(--login-muted);font-size:13px;line-height:1.55}

.login-pro__error{margin:0 0 18px;padding:12px 14px;border-radius:11px;font-size:12px;line-height:1.45}

.login-pro .login-pro__google{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) 20px;
  align-items:center;
  width:100%;
  min-height:50px;
  margin:0;
  padding:8px 13px!important;
  border:1px solid #d9cecc!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--login-ink)!important;
  font-size:13px;
  font-weight:750;
  text-align:center;
  text-decoration:none;
  box-shadow:0 5px 15px rgba(55,34,37,.045)!important;
}

.login-pro .login-pro__google:hover{border-color:#c8b7b5!important;background:#fcf9f8!important;color:var(--login-wine-dark)!important;transform:translateY(-1px)}

.login-pro__google-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid #e6dcda;
  border-radius:9px;
  background:#fff;
  color:#4285f4;
  font-size:14px;
  font-weight:850;
}

.login-pro__arrow{color:#a18f91;font-size:16px}

.login-pro__divider{display:flex;align-items:center;gap:12px;margin:21px 0 19px;color:#a09294;font-size:9px;letter-spacing:.035em;text-align:center}
.login-pro__divider::before,.login-pro__divider::after{content:"";height:1px;flex:1;background:#eee6e4}
.login-pro__divider span{white-space:nowrap}

.login-pro__form{display:grid;gap:16px;margin:0}
.login-pro__form label{display:grid;gap:7px;color:var(--login-ink-soft);font-size:11px;font-weight:760}
.login-pro__form label>span{padding-left:2px}

.login-pro__form input:not([type=hidden]){
  width:100%;
  min-height:49px;
  padding:12px 14px;
  border:1px solid #d7cbc9!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--login-ink)!important;
  font-size:13px;
  box-shadow:inset 0 1px 2px rgba(60,38,41,.025);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.login-pro__form input::placeholder{color:#ac9fa1}
.login-pro__form input:focus{border-color:#b94a50!important;background:#fff!important;box-shadow:0 0 0 4px rgba(163,38,45,.1)!important;outline:0}

.login-pro .login-pro__submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:52px;
  margin-top:3px;
  padding:12px 17px!important;
  border:1px solid var(--login-wine-dark)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,var(--login-wine),var(--login-wine-dark))!important;
  color:#fff!important;
  font-size:13px;
  font-weight:780;
  box-shadow:0 12px 26px rgba(125,27,34,.2)!important;
}

.login-pro .login-pro__submit:hover{transform:translateY(-1px);box-shadow:0 15px 30px rgba(125,27,34,.27)!important}

.login-pro__security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:22px 0 0;
  color:#928588;
  text-align:left;
}

.login-pro__security>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--login-wine-soft);color:var(--login-wine);font-size:11px;font-weight:900}
.login-pro__security p{display:grid;gap:1px;margin:0}
.login-pro__security strong{color:#746668;font-size:9px;letter-spacing:.03em;text-transform:uppercase}
.login-pro__security small{font-size:9px;color:#a09496}

.login-pro :focus-visible{outline:3px solid rgba(163,38,45,.2);outline-offset:3px}

@media(max-width:1100px){
  .login-pro{grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr)}
  .login-pro__showcase{padding-inline:50px}
  .login-pro .login-pro__hero h1{font-size:78px}
  .login-pro__tagline{font-size:16px}
  .login-pro__signals span:nth-child(3){display:none}
  .login-pro__card{width:min(470px,calc(100% - 48px));padding:36px}
}

@media(max-width:820px){
  .app-public:has(.login-pro){overflow:auto}
  .login-pro{display:block;min-height:100svh;overflow:visible;background:linear-gradient(180deg,#241719 0 285px,#f7f4f3 285px 100%)}
  .login-pro::after{display:none}
  .login-pro__showcase{min-height:330px;padding:30px 36px 78px;border-radius:0 0 30px 30px}
  .login-pro__brand img{width:128px;height:30px}
  .login-pro__hero{padding:24px 0 16px;align-items:center;text-align:center}
  .login-pro__kicker{font-size:9px}
  .login-pro .login-pro__hero h1{font-size:68px;margin-top:14px}
  .login-pro__byline{justify-content:center}
  .login-pro__tagline{max-width:580px;margin-top:18px;text-align:center;font-size:13px;line-height:1.55}
  .login-pro__signals{display:none}
  .login-pro__showcase-footer{display:none}
  .login-pro__card{width:min(520px,calc(100% - 36px));margin:-48px auto 32px;padding:34px;border-radius:23px;box-shadow:0 24px 62px rgba(54,34,37,.17)}
}

@media(max-width:520px){
  .login-pro{background:linear-gradient(180deg,#241719 0 235px,#f7f4f3 235px 100%)}
  .login-pro__showcase{min-height:270px;padding:22px 22px 58px;border-radius:0 0 24px 24px}
  .login-pro__brand{padding:6px 9px;border-radius:10px}
  .login-pro__brand img{width:108px;height:27px}
  .login-pro__hero{padding:18px 0 4px}
  .login-pro__kicker{font-size:8px;letter-spacing:.18em}
  .login-pro .login-pro__hero h1{font-size:54px;margin-top:12px}
  .login-pro__byline{margin-top:8px;font-size:11px}.login-pro__byline strong{font-size:14px}
  .login-pro__tagline{display:none}
  .login-pro__card{width:calc(100% - 24px);margin:-35px auto 22px;padding:27px 22px 24px;border-radius:20px}
  .login-pro__card-head{gap:12px;margin-bottom:15px}
  .login-pro__mark-wrap{flex-basis:50px;width:50px;height:50px;border-radius:14px}
  .login-pro .login-pro__mark-wrap .auth-mark{width:38px;height:38px}
  .login-pro .login-pro__card-head h2{font-size:24px}
  .login-pro__intro{margin-bottom:20px;font-size:12px}
  .login-pro__divider{margin:18px 0 16px}.login-pro__divider span{font-size:8px}
  .login-pro__form{gap:14px}
  .login-pro__form input:not([type=hidden]){min-height:47px}
  .login-pro__security{margin-top:18px}
}

@media(max-width:360px){
  .login-pro__card{padding-inline:18px}
  .login-pro__divider span{white-space:normal}
  .login-pro__security small{font-size:8px}
}

@media(max-height:720px) and (min-width:821px){
  .login-pro__showcase{padding-block:28px}
  .login-pro .login-pro__hero h1{font-size:72px}
  .login-pro__hero{padding:22px 0}
  .login-pro__tagline{margin-top:22px;font-size:14px}
  .login-pro__signals{margin-top:20px}
  .login-pro__card{margin:20px 0;padding:28px 34px}
  .login-pro__card-head{margin-bottom:13px}
  .login-pro__intro{margin-bottom:18px}
  .login-pro__divider{margin:16px 0 14px}
  .login-pro__form{gap:12px}
  .login-pro__form input:not([type=hidden]){min-height:45px}
  .login-pro .login-pro__submit{min-height:47px}
  .login-pro__security{margin-top:15px}
}

@media(prefers-reduced-motion:reduce){
  .login-pro *,
  .login-pro *::before,
  .login-pro *::after{scroll-behavior:auto!important;transition:none!important}
}