/* ============================================================
   Hospedaje Pro — Marketing (landing + auth)
   Paleta hospedaje: azul océano + teal + dorado
   ============================================================ */
:root{
  --m-navy:#0a1b30;
  --m-navy2:#0e2746;
  --m-blue:#155e9c;
  --m-blue2:#1f7fd1;
  --m-teal:#0fb6a8;
  --m-teal2:#1fd3c0;
  --m-gold:#e3a72f;
  --m-gold2:#f4c560;
  --m-ink:#0f1b2d;
  --m-soft:#64748b;
  --hp-primary:#7c3aed;
  --hp-primary-dark:#6d28d9;
  --hp-primary-rgb:124,58,237;
  --hp-teal:#a855f7;
  --hp-body-bg:#f4f7fb;
  --hp-surface:#ffffff;
  --hp-surface-2:#f8fafc;
  --hp-surface-3:#eef2f7;
  --hp-ink:#10243b;
  --hp-muted:#718096;
  --hp-border:#dce4ed;
  --hp-accent-soft:#f3e8ff;
  --hp-shadow:0 18px 50px rgba(15,23,42,.1);
  --hp-showcase-bg:#07182b;
}
:root[data-hp-accent="violet"]{--hp-primary:#7c3aed;--hp-primary-dark:#6d28d9;--hp-primary-rgb:124,58,237;--hp-teal:#a855f7;--hp-accent-soft:#f3e8ff;--hp-showcase-bg:#13092f}
:root[data-hp-accent="fuchsia"]{--hp-primary:#c026d3;--hp-primary-dark:#a21caf;--hp-primary-rgb:192,38,211;--hp-teal:#ec4899;--hp-accent-soft:#fce7f6;--hp-showcase-bg:#2a0828}
:root[data-hp-accent="ocean"]{--hp-primary:#1769aa;--hp-primary-dark:#11558b;--hp-primary-rgb:23,105,170;--hp-teal:#0f9f92;--hp-accent-soft:#e8f3fc;--hp-showcase-bg:#071d34}
:root[data-hp-accent="emerald"]{--hp-primary:#059669;--hp-primary-dark:#047857;--hp-primary-rgb:5,150,105;--hp-teal:#10b981;--hp-accent-soft:#e5f8f1;--hp-showcase-bg:#05221d}
:root[data-hp-accent="blue"]{--hp-primary:#2563eb;--hp-primary-dark:#1d4ed8;--hp-primary-rgb:37,99,235;--hp-teal:#38bdf8;--hp-accent-soft:#eaf0ff;--hp-showcase-bg:#0b1730}
:root[data-hp-accent="sky"]{--hp-primary:#0284c7;--hp-primary-dark:#0369a1;--hp-primary-rgb:2,132,199;--hp-teal:#22d3ee;--hp-accent-soft:#e5f6ff;--hp-showcase-bg:#051f2b}
:root[data-hp-accent="lime"]{--hp-primary:#65a30d;--hp-primary-dark:#4d7c0f;--hp-primary-rgb:101,163,13;--hp-teal:#84cc16;--hp-accent-soft:#effbdc;--hp-showcase-bg:#141f06}
:root[data-hp-accent="amber"]{--hp-primary:#d97706;--hp-primary-dark:#b45309;--hp-primary-rgb:217,119,6;--hp-teal:#f59e0b;--hp-accent-soft:#fff4d7;--hp-showcase-bg:#211404}
:root[data-hp-accent="orange"]{--hp-primary:#ea580c;--hp-primary-dark:#c2410c;--hp-primary-rgb:234,88,12;--hp-teal:#fb923c;--hp-accent-soft:#fff0e7;--hp-showcase-bg:#200b04}
:root[data-hp-accent="rose"]{--hp-primary:#e11d48;--hp-primary-dark:#be123c;--hp-primary-rgb:225,29,72;--hp-teal:#fb7185;--hp-accent-soft:#ffe8ee;--hp-showcase-bg:#21050d}
:root[data-hp-accent="slate"]{--hp-primary:#475569;--hp-primary-dark:#334155;--hp-primary-rgb:71,85,105;--hp-teal:#0f172a;--hp-accent-soft:#eef2f7;--hp-showcase-bg:#020617}
:root[data-hp-theme="dark"]{
  --hp-body-bg:#080d16;
  --hp-surface:#101827;
  --hp-surface-2:#131d2b;
  --hp-surface-3:#1c293b;
  --hp-ink:#e7edf6;
  --hp-muted:#97a6ba;
  --hp-border:#263449;
  --hp-accent-soft:rgba(var(--hp-primary-rgb),.16);
  --hp-shadow:0 22px 58px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
body.m-body{margin:0;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--m-ink);
  background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
.m-gradient-text{background:linear-gradient(100deg,#ffffff 10%,var(--m-gold2) 60%,var(--m-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-weight:600;border-radius:.7rem;padding:.85rem 1.5rem;border:none;cursor:pointer;
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s,filter .2s;font-size:1rem}
.m-btn:hover{transform:translateY(-2px)}
.m-btn-gold{background:linear-gradient(135deg,var(--m-gold),var(--m-gold2));color:#3a2a05;
  box-shadow:0 10px 26px rgba(227,167,47,.4)}
.m-btn-gold:hover{box-shadow:0 14px 32px rgba(227,167,47,.5);color:#3a2a05}
.m-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px)}
.m-btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.m-btn-brand{background:linear-gradient(135deg,var(--m-blue),var(--m-teal));color:#fff;
  box-shadow:0 10px 26px rgba(15,182,168,.32)}
.m-btn-brand:hover{box-shadow:0 14px 32px rgba(15,182,168,.42);color:#fff}

/* ---------- Navbar ---------- */
.m-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:1rem 2.2rem;transition:all .3s;
  background:rgba(255,255,255,.0)}
.m-nav.scrolled{background:rgba(255,255,255,.96);box-shadow:0 4px 20px rgba(10,27,48,.1);backdrop-filter:blur(10px)}
.m-brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.2rem;color:#fff;letter-spacing:-.01em}
.m-nav.scrolled .m-brand{color:var(--m-navy)}
.m-logo{width:38px;height:38px;border-radius:.7rem;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.15rem;
  background:linear-gradient(135deg,var(--m-blue),var(--m-teal));box-shadow:0 6px 16px rgba(15,182,168,.45)}
.m-navlinks{display:flex;align-items:center;gap:1.8rem}
.m-navlinks a{color:rgba(255,255,255,.82);font-weight:500;font-size:.95rem;transition:color .2s}
.m-nav.scrolled .m-navlinks a{color:#334155}
.m-navlinks a:hover{color:#fff}
.m-nav.scrolled .m-navlinks a:hover{color:var(--m-blue)}
.m-navlinks .m-btn{padding:.6rem 1.15rem;font-size:.92rem}

/* ---------- Hero ---------- */
.m-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:7rem 1.5rem 4rem;overflow:hidden;
  background:radial-gradient(1100px 520px at 50% -8%, #15467e 0%, transparent 60%),
             radial-gradient(900px 500px at 85% 20%, rgba(15,182,168,.32) 0%, transparent 55%),
             linear-gradient(160deg,#0a1b30 0%,#0e2746 55%,#0a2540 100%)}
.m-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 360px at 18% 85%, rgba(227,167,47,.16) 0%, transparent 60%)}
.m-hero-inner{position:relative;z-index:2;max-width:880px}
.m-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#dbe7f5;
  font-size:.85rem;font-weight:500;margin-bottom:1.8rem;backdrop-filter:blur(6px)}
.m-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;font-weight:800;color:#fff;
  margin:0 0 1.4rem;letter-spacing:-.02em}
.m-hero p.lead{color:#aebfd4;font-size:clamp(1rem,2.4vw,1.2rem);max-width:620px;margin:0 auto 2.3rem;line-height:1.6}
.m-hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.m-stats{display:flex;gap:2.8rem;justify-content:center;flex-wrap:wrap;margin-top:3.4rem}
.m-stat .n{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;color:#fff;line-height:1}
.m-stat .n span{background:linear-gradient(120deg,var(--m-gold2),var(--m-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-stat .l{color:#8ea2bd;font-size:.82rem;margin-top:.35rem}

/* ---------- Secciones ---------- */
.m-section{padding:5rem 1.5rem;max-width:1140px;margin:0 auto}
.m-section h2{text-align:center;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:var(--m-navy);
  margin:0 0 .6rem;letter-spacing:-.02em}
.m-section .sub{text-align:center;color:var(--m-soft);max-width:560px;margin:0 auto 3rem;font-size:1.05rem}
.m-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.m-feature{background:#fff;border:1px solid #e9eef5;border-radius:1rem;padding:1.6rem;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.m-feature:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(10,27,48,.12);border-color:#cfe0f2}
.m-feature .ic{width:52px;height:52px;border-radius:.85rem;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;margin-bottom:1rem;background:linear-gradient(135deg,var(--m-blue),var(--m-teal))}
.m-feature.gold .ic{background:linear-gradient(135deg,var(--m-gold),var(--m-gold2));color:#3a2a05}
.m-feature h3{font-size:1.12rem;font-weight:700;margin:0 0 .4rem;color:var(--m-navy)}
.m-feature p{color:var(--m-soft);font-size:.92rem;margin:0;line-height:1.55}

/* ---------- Precios ---------- */
.m-pricing{background:linear-gradient(180deg,#f6f9fc,#eef4fa)}
.m-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;max-width:1000px;margin:0 auto}
.m-price{background:#fff;border:1px solid #e4ebf3;border-radius:1.1rem;padding:2rem 1.6rem;text-align:center;
  position:relative;transition:transform .25s,box-shadow .25s}
.m-price:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(10,27,48,.13)}
.m-price.feat{border:2px solid var(--m-teal);box-shadow:0 18px 44px rgba(15,182,168,.18)}
.m-price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--m-gold),var(--m-gold2));color:#3a2a05;
  font-size:.72rem;font-weight:700;padding:.25rem .9rem;border-radius:999px}
.m-price h3{font-size:1.25rem;font-weight:800;color:var(--m-navy);margin:.2rem 0 .5rem}
.m-price .amt{font-size:2.4rem;font-weight:800;color:var(--m-blue);line-height:1}
.m-price .amt small{font-size:.9rem;color:var(--m-soft);font-weight:500}
.m-price ul{list-style:none;padding:0;margin:1.4rem 0;text-align:left}
.m-price li{padding:.4rem 0;color:#334155;font-size:.92rem;display:flex;align-items:center;gap:.5rem}
.m-price li i{color:var(--m-teal)}

/* ---------- Footer / CTA ---------- */
.m-cta-band{background:linear-gradient(135deg,#0a1b30,#0e2746 60%,#0b5a64);color:#fff;text-align:center;
  padding:4.5rem 1.5rem;border-radius:0}
.m-cta-band h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;margin:0 0 .8rem;color:#fff}
.m-cta-band p{color:#aebfd4;max-width:520px;margin:0 auto 2rem;font-size:1.05rem}
.m-foot{background:#081424;color:#7e93ad;text-align:center;padding:2rem 1.5rem;font-size:.85rem}

/* ============================================================
   AUTH SPLIT (login / registro)
   ============================================================ */
.m-auth{min-height:100vh;display:flex}
.m-auth-left{flex:1;position:relative;color:#fff;padding:3rem 3.2rem;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
  background:radial-gradient(700px 400px at 30% 20%, rgba(15,182,168,.30) 0%, transparent 55%),
             radial-gradient(600px 380px at 80% 90%, rgba(227,167,47,.18) 0%, transparent 55%),
             linear-gradient(160deg,#0a1b30,#0e2746 60%,#0a2a44)}
.m-auth-left .a-logo{width:78px;height:78px;border-radius:1.2rem;display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;color:#fff;background:linear-gradient(135deg,var(--m-blue),var(--m-teal));
  box-shadow:0 14px 34px rgba(15,182,168,.5);margin-bottom:1.1rem}
.m-auth-left h2{font-size:1.9rem;font-weight:800;margin:0;letter-spacing:-.01em}
.m-auth-left .tagline{color:var(--m-gold2);font-weight:600;letter-spacing:.12em;font-size:.78rem;
  text-transform:uppercase;margin:.3rem 0 2.2rem}
.m-feat-list{list-style:none;padding:0;margin:0 0 2.2rem;display:flex;flex-direction:column;gap:1.15rem;max-width:380px}
.m-feat-list li{display:flex;gap:.95rem;align-items:flex-start}
.m-feat-list .fi{width:44px;height:44px;flex-shrink:0;border-radius:.7rem;display:flex;align-items:center;
  justify-content:center;font-size:1.15rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:var(--m-teal2)}
.m-feat-list .ft{font-weight:600;font-size:.98rem}
.m-feat-list .fd{color:#9fb2cb;font-size:.83rem}
.m-auth-stats{display:flex;gap:.9rem;flex-wrap:wrap}
.m-auth-stats .s{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:.85rem;
  padding:.9rem 1.1rem;min-width:96px;text-align:center}
.m-auth-stats .s .n{font-size:1.5rem;font-weight:800;color:var(--m-gold2);line-height:1}
.m-auth-stats .s .l{font-size:.72rem;color:#9fb2cb;margin-top:.2rem}

.m-auth-right{width:46%;max-width:560px;background:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:3rem 3rem}
.m-auth-right h1{font-size:1.7rem;font-weight:800;color:var(--m-navy);margin:0 0 .3rem}
.m-auth-right .hint{color:var(--m-soft);font-size:.92rem;margin-bottom:1.8rem}
.m-field{margin-bottom:1.1rem}
.m-field label{display:block;font-size:.82rem;font-weight:600;color:#475569;margin-bottom:.35rem}
.m-input-group{display:flex;align-items:center;border:1.5px solid #e2e8f1;border-radius:.7rem;
  overflow:hidden;transition:border-color .2s,box-shadow .2s;background:#fff}
.m-input-group:focus-within{border-color:var(--m-teal);box-shadow:0 0 0 .2rem rgba(15,182,168,.16)}
.m-input-group .ig-ic{padding:0 .85rem;color:#94a3b8}
.m-input-group input{flex:1;border:none;outline:none;padding:.72rem .4rem;font-size:.95rem;background:transparent}
.m-demo{border:1px solid #e7eef6;border-radius:.85rem;padding:.85rem;margin-top:.4rem;background:#fafcff}
.m-demo .dh{font-size:.78rem;font-weight:700;color:var(--m-blue);margin-bottom:.5rem}
.m-demo .drow{display:flex;align-items:center;justify-content:space-between;padding:.45rem .5rem;border-radius:.5rem;
  cursor:pointer;transition:background .2s}
.m-demo .drow:hover{background:#eef5fc}
.m-demo .drow .em{font-size:.86rem;color:#334155}
.m-divider{display:flex;align-items:center;gap:.8rem;color:#9aa7b8;font-size:.78rem;margin:1.4rem 0 1rem}
.m-divider::before,.m-divider::after{content:"";flex:1;height:1px;background:#e6ecf3}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .m-auth-left{display:none}
  .m-auth-right{width:100%;max-width:none}
  .m-navlinks{gap:1rem}
  .m-navlinks a:not(.m-btn){display:none}
}
@media (max-width:575px){
  .m-nav{padding:.85rem 1.1rem}
  .m-auth-right{padding:2.2rem 1.4rem}
  .m-stats{gap:1.6rem}
  .m-section{padding:3.5rem 1.1rem}
}

/* Distintivo "Aplicativo SaaS" en el panel de login */
.m-saas-pill{display:inline-flex;align-items:center;gap:.5rem;margin:-1.4rem 0 2.2rem;
  padding:.45rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;
  color:var(--m-gold2);background:rgba(227,167,47,.12);
  border:1px solid rgba(244,197,96,.35);backdrop-filter:blur(4px);width:fit-content}
.m-saas-pill i{color:var(--m-gold2)}

/* ============================================================
   LOGIN PROFESIONAL
   ============================================================ */
.login-page{min-height:100vh;background:#f4f7fb;color:#172033}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(480px,1.08fr) minmax(500px,.92fr)}
.login-showcase{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(145deg,#07182b 0%,#0b2845 58%,#0a3948 100%)}
.login-showcase::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%)}
.login-showcase::after{content:"";position:absolute;inset:auto -10% -28% 7%;height:58%;z-index:-1;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:rotate(-8deg)}
.login-showcase-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
.login-showcase-glow-one{width:460px;height:460px;right:-160px;top:-130px;background:radial-gradient(circle,rgba(20,184,166,.28),transparent 68%)}
.login-showcase-glow-two{width:380px;height:380px;left:-190px;bottom:-130px;background:radial-gradient(circle,rgba(59,130,246,.2),transparent 68%)}
.login-showcase-content{position:relative;min-height:100vh;max-width:760px;margin:0 auto;padding:clamp(2rem,4vw,3.6rem) clamp(2.2rem,5vw,5.4rem);display:flex;flex-direction:column;justify-content:center}
.login-brand{display:inline-flex;align-items:center;gap:.75rem;color:inherit;width:fit-content}
.login-brand:hover{color:inherit}
.login-brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff;background:linear-gradient(145deg,#1688c7,#13b8a5);box-shadow:0 10px 26px rgba(15,182,168,.3);border:1px solid rgba(255,255,255,.18)}
.login-brand>span:last-child{display:flex;flex-direction:column;line-height:1.15}
.login-brand strong{font-size:1.06rem;letter-spacing:-.01em}
.login-brand small{font-size:.67rem;color:#8fa9c4;margin-top:.23rem;letter-spacing:.11em;text-transform:uppercase}
.login-showcase-copy{margin-top:auto;padding-top:clamp(3rem,7vh,6rem)}
.login-kicker{display:inline-flex;align-items:center;gap:.48rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#71ded1}
.login-showcase-copy h2{font-size:clamp(2.1rem,3.7vw,3.65rem);line-height:1.08;letter-spacing:-.045em;margin:1rem 0 1.15rem;font-weight:800;max-width:680px}
.login-showcase-copy h2 span{color:#76dfd2}
.login-showcase-copy p{max-width:570px;margin:0;color:#aac0d5;font-size:clamp(.92rem,1.25vw,1.05rem);line-height:1.7}
.login-dashboard-preview{margin-top:clamp(2rem,5vh,3.6rem);max-width:620px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px rgba(0,0,0,.24);backdrop-filter:blur(14px)}
.login-preview-head{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.09)}
.login-preview-head>div{display:flex;flex-direction:column;gap:.18rem}
.login-preview-head>div span{font-size:.68rem;color:#8fa9c4;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.login-preview-head>div strong{font-size:.88rem;font-weight:600}
.login-live{display:flex;align-items:center;gap:.45rem;color:#7ee6d8;font-size:.7rem;font-weight:600;padding:.35rem .58rem;border-radius:999px;background:rgba(20,184,166,.11)}
.login-live i{width:6px;height:6px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 0 4px rgba(45,212,191,.12)}
.login-preview-body{padding:1.1rem 1.2rem 1.2rem;display:grid;grid-template-columns:1.05fr 1fr;gap:1.2rem;align-items:center}
.login-occupancy{display:flex;align-items:center;gap:1rem}
.login-occupancy-ring{width:88px;height:88px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(#35d0bf 0 78%,rgba(255,255,255,.1) 78% 100%)}
.login-occupancy-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#102f49}
.login-occupancy-ring span{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column}
.login-occupancy-ring strong{font-size:1.1rem}.login-occupancy-ring small{font-size:.55rem;color:#91abc2;margin-top:.1rem}
.login-occupancy-copy{display:flex;flex-direction:column;min-width:0}
.login-occupancy-copy strong{font-size:.92rem}.login-occupancy-copy span{color:#91abc2;font-size:.7rem;margin-top:.14rem}
.login-occupancy-copy em{font-style:normal;color:#6ee7d7;font-size:.62rem;margin-top:.55rem}.login-occupancy-copy em i{margin-right:.2rem}
.login-preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.48rem}
.login-preview-metrics>div{min-width:0;padding:.65rem .45rem;border-radius:11px;background:rgba(255,255,255,.055);display:flex;flex-direction:column;align-items:center;text-align:center}
.login-preview-metrics span{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:.7rem;margin-bottom:.35rem}
.login-preview-metrics span.is-green{color:#5eead4;background:rgba(45,212,191,.14)}
.login-preview-metrics span.is-blue{color:#7dd3fc;background:rgba(56,189,248,.13)}
.login-preview-metrics span.is-amber{color:#fcd34d;background:rgba(245,158,11,.13)}
.login-preview-metrics strong{font-size:.88rem}.login-preview-metrics small{font-size:.55rem;color:#91abc2;margin-top:.12rem;white-space:nowrap}
.login-trust-row{display:flex;align-items:center;gap:1.5rem;margin-top:auto;padding-top:clamp(2rem,5vh,3.8rem);color:#8fa9c4;font-size:.72rem}
.login-trust-row span{display:flex;align-items:center;gap:.42rem}.login-trust-row i{color:#58d9ca;font-size:.9rem}

.login-access{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;padding:2.2rem clamp(2rem,5vw,5rem);overflow-y:auto}
.login-access-inner{width:100%;max-width:472px;margin:auto}
.login-back{display:inline-flex;align-items:center;gap:.45rem;color:#718096;font-size:.78rem;font-weight:600;margin-bottom:clamp(2rem,5vh,3.5rem);transition:color .2s,transform .2s}
.login-back:hover{color:#0f766e;transform:translateX(-2px)}
.login-mobile-brand{display:none}
.login-form-heading{margin-bottom:1.65rem}
.login-access-kicker{font-size:.68rem;font-weight:800;letter-spacing:.14em;color:#0f8b80}
.login-form-heading h1{font-size:clamp(1.75rem,3vw,2.15rem);line-height:1.15;letter-spacing:-.035em;color:#10243b;margin:.58rem 0 .52rem;font-weight:800}
.login-form-heading p{color:#718096;font-size:.89rem;margin:0;line-height:1.55}
.login-alert{display:flex;gap:.75rem;padding:.82rem .9rem;margin-bottom:1.15rem;background:#fff5f5;border:1px solid #fed7d7;border-radius:12px;color:#9b2c2c}
.login-alert>span{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:#fee2e2}
.login-alert strong{display:block;font-size:.78rem}.login-alert p{margin:.15rem 0 0;font-size:.73rem;color:#b44343;line-height:1.4}
.login-field{margin-bottom:1.05rem}
.login-field label{display:block;color:#24364b;font-size:.77rem;font-weight:700;margin-bottom:.42rem}
.login-label-row{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.login-label-row>span{font-size:.65rem;color:#8a9aad;margin-bottom:.42rem}.login-label-row>span i{color:#18a697;margin-right:.18rem}
.login-input{height:50px;display:flex;align-items:center;gap:.65rem;padding:0 .84rem;border:1.5px solid #dce4ed;border-radius:11px;background:#fbfcfe;transition:border-color .2s,box-shadow .2s,background .2s}
.login-input:focus-within{border-color:#149f93;box-shadow:0 0 0 4px rgba(20,159,147,.1);background:#fff}
.login-input.has-error{border-color:#e06a6a;background:#fffafa}
.login-input>i{color:#8b9bad;font-size:1rem}
.login-input input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#18283b;font-family:inherit;font-size:.88rem;height:100%}
.login-input input::placeholder{color:#a6b2c0}
.login-password-toggle{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#8392a5;cursor:pointer;transition:background .2s,color .2s}
.login-password-toggle:hover{background:#eaf4f3;color:#0f766e}
.login-remember{width:fit-content;display:flex;align-items:center;gap:.55rem;color:#5f6f81;font-size:.76rem;cursor:pointer;margin:.1rem 0 1.25rem;user-select:none}
.login-remember input{position:absolute;opacity:0;pointer-events:none}
.login-check{width:18px;height:18px;border-radius:5px;border:1.5px solid #ccd6e1;display:grid;place-items:center;color:transparent;background:#fff;transition:all .2s}
.login-remember input:checked+.login-check{background:#0f968a;border-color:#0f968a;color:#fff}
.login-remember input:focus-visible+.login-check{box-shadow:0 0 0 3px rgba(15,150,138,.15)}
.login-submit{width:100%;height:51px;padding:0 1.1rem;display:flex;align-items:center;justify-content:center;gap:.8rem;border:0;border-radius:11px;color:#fff;background:linear-gradient(120deg,#0f608e,#0d998c);font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;box-shadow:0 11px 24px rgba(15,118,110,.2);transition:transform .2s,box-shadow .2s,filter .2s}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,118,110,.27);filter:saturate(1.08)}
.login-submit:active{transform:translateY(0)}
.login-submit i{font-size:1rem;transition:transform .2s}.login-submit:hover i{transform:translateX(3px)}
.login-divider{display:flex;align-items:center;gap:.8rem;margin:1.45rem 0 .9rem;color:#92a0af;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.login-divider::before,.login-divider::after{content:"";height:1px;flex:1;background:#e7edf3}
.login-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.login-demo-option{min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.62rem;text-align:left;padding:.72rem;border:1px solid #e2e8ef;border-radius:11px;background:#fff;color:#25374b;cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.login-demo-option:hover{border-color:#aadbd6;background:#f8fdfc;transform:translateY(-1px);box-shadow:0 7px 16px rgba(25,56,82,.07)}
.login-demo-option.is-selected{border-color:#23a89b;background:#f2fbfa;box-shadow:0 0 0 3px rgba(35,168,155,.08)}
.login-demo-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:.8rem}
.login-demo-icon.is-admin{color:#276b9b;background:#e8f3fb}.login-demo-icon.is-reception{color:#0d8a7e;background:#e6f8f4}
.login-demo-copy{min-width:0;display:flex;flex-direction:column}.login-demo-copy strong{font-size:.7rem}.login-demo-copy small{font-size:.57rem;color:#8a99a9;margin-top:.13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-demo-option>i{color:#a5b1bf;font-size:.65rem}
.login-demo-status{height:.8rem;margin:.45rem 0 0;color:#0f8b80;font-size:.62rem}
.login-register-callout{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin-top:1rem;padding:.85rem;border:1px solid #e4eaf1;border-radius:12px;background:#f8fafc}
.login-register-icon{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;color:#176992;background:#e6f2f8}
.login-register-callout strong{display:block;color:#26384b;font-size:.71rem}.login-register-callout p{margin:.18rem 0 0;color:#8795a5;font-size:.6rem}
.login-register-callout a{display:flex;align-items:center;gap:.25rem;color:#0f8278;font-size:.66rem;font-weight:700;white-space:nowrap}.login-register-callout a:hover{color:#09665e}
.login-footer{text-align:center;color:#9aa6b4;font-size:.61rem;margin-top:1.45rem}.login-footer span{display:inline-block;width:3px;height:3px;border-radius:50%;background:#b9c3ce;margin:0 .35rem;vertical-align:middle}

@media (max-width:1100px){
  .login-shell{grid-template-columns:minmax(410px,.88fr) minmax(480px,1.12fr)}
  .login-showcase-content{padding-left:2.7rem;padding-right:2.7rem}
  .login-preview-body{grid-template-columns:1fr}.login-preview-metrics{margin-top:.1rem}
}
@media (max-width:860px){
  .login-shell{display:block}.login-showcase{display:none}
  .login-access{padding:2rem 1.5rem;background:radial-gradient(circle at 100% 0,rgba(20,184,166,.08),transparent 32%),#fff}
  .login-mobile-brand{display:block;margin-bottom:2.5rem;color:#10243b}.login-mobile-brand .login-brand small{color:#8291a2}
  .login-back{position:absolute;right:1.5rem;top:2.85rem;margin:0}.login-back i{display:none}
  .login-access-inner{position:relative}
}
@media (max-width:520px){
  .login-access{align-items:flex-start;padding:1.35rem 1.1rem 1.6rem}
  .login-access-inner{max-width:none}
  .login-mobile-brand{margin-bottom:2.15rem}.login-brand-mark{width:42px;height:42px;border-radius:12px}
  .login-back{right:0;top:1.15rem;font-size:.7rem}
  .login-form-heading{margin-bottom:1.4rem}
  .login-demo-grid{grid-template-columns:1fr}.login-demo-option{padding:.7rem .75rem}
  .login-register-callout{grid-template-columns:auto 1fr}.login-register-callout a{grid-column:2;margin-top:.08rem}
  .login-footer{line-height:1.5}
}
@media (max-height:760px) and (min-width:861px){
  .login-showcase-content{padding-top:1.8rem;padding-bottom:1.8rem}
  .login-showcase-copy{padding-top:2.2rem}.login-showcase-copy h2{font-size:2.25rem}
  .login-dashboard-preview{margin-top:1.6rem}.login-trust-row{padding-top:1.8rem}
  .login-access{padding-top:1.4rem;padding-bottom:1.4rem}.login-back{margin-bottom:1.5rem}
  .login-form-heading{margin-bottom:1.2rem}.login-field{margin-bottom:.8rem}.login-divider{margin:1rem 0 .7rem}.login-register-callout{margin-top:.7rem}.login-footer{margin-top:.85rem}
}

/* Login conectado a la apariencia del panel */
.login-page{background:radial-gradient(circle at 84% 8%,rgba(var(--hp-primary-rgb),.12),transparent 34rem),var(--hp-body-bg);color:var(--hp-ink)}
.login-showcase{background:radial-gradient(740px 380px at 74% 8%,rgba(var(--hp-primary-rgb),.34),transparent 62%),radial-gradient(620px 330px at 10% 92%,color-mix(in srgb,var(--hp-teal) 24%,transparent),transparent 62%),linear-gradient(145deg,var(--hp-showcase-bg) 0%,color-mix(in srgb,var(--hp-primary-dark) 28%,#07182b) 58%,color-mix(in srgb,var(--hp-teal) 20%,#07182b) 100%)}
.login-showcase-glow-one{background:radial-gradient(circle,rgba(var(--hp-primary-rgb),.38),transparent 68%)}
.login-showcase-glow-two{background:radial-gradient(circle,color-mix(in srgb,var(--hp-teal) 28%,transparent),transparent 68%)}
.login-brand-mark{background:linear-gradient(145deg,var(--hp-primary),var(--hp-teal));box-shadow:0 12px 28px rgba(var(--hp-primary-rgb),.34)}
.login-kicker,.login-showcase-copy h2 span,.login-live,.login-occupancy-copy em{color:color-mix(in srgb,var(--hp-teal) 74%,#ffffff)}
.login-live{background:rgba(var(--hp-primary-rgb),.15)}
.login-live i{background:color-mix(in srgb,var(--hp-teal) 85%,#ffffff);box-shadow:0 0 0 4px rgba(var(--hp-primary-rgb),.14)}
.login-occupancy-ring{background:conic-gradient(var(--hp-teal) 0 78%,rgba(255,255,255,.12) 78% 100%)}
.login-occupancy-ring::after{background:color-mix(in srgb,var(--hp-showcase-bg) 78%,#102f49)}
.login-trust-row i{color:color-mix(in srgb,var(--hp-teal) 74%,#ffffff)}
.login-access{background:linear-gradient(180deg,var(--hp-surface),color-mix(in srgb,var(--hp-surface-2) 75%,var(--hp-surface)));color:var(--hp-ink)}
.login-access-inner{position:relative}
.login-back:hover,.login-access-kicker,.login-label-row>span i,.login-demo-status,.login-register-callout a{color:var(--hp-primary)}
.login-form-heading h1,.login-field label,.login-demo-option,.login-register-callout strong{color:var(--hp-ink)}
.login-form-heading p,.login-label-row>span,.login-remember,.login-demo-copy small,.login-register-callout p,.login-footer{color:var(--hp-muted)}
.login-input,.login-demo-option,.login-register-callout{border-color:var(--hp-border);background:var(--hp-surface-2)}
.login-input:focus-within{border-color:var(--hp-primary);box-shadow:0 0 0 4px rgba(var(--hp-primary-rgb),.12);background:var(--hp-surface)}
.login-input input{color:var(--hp-ink)}
.login-input input::placeholder{color:color-mix(in srgb,var(--hp-muted) 70%,transparent)}
.login-password-toggle:hover{background:var(--hp-accent-soft);color:var(--hp-primary)}
.login-remember input:checked+.login-check{background:var(--hp-primary);border-color:var(--hp-primary)}
.login-remember input:focus-visible+.login-check{box-shadow:0 0 0 3px rgba(var(--hp-primary-rgb),.18)}
.login-submit{background:linear-gradient(120deg,var(--hp-primary),var(--hp-teal));box-shadow:0 14px 28px rgba(var(--hp-primary-rgb),.24)}
.login-submit:hover{box-shadow:0 18px 34px rgba(var(--hp-primary-rgb),.32)}
.login-divider{color:var(--hp-muted)}.login-divider::before,.login-divider::after{background:var(--hp-border)}
.login-demo-option:hover,.login-demo-option.is-selected{border-color:color-mix(in srgb,var(--hp-primary) 50%,var(--hp-border));background:var(--hp-accent-soft);box-shadow:0 0 0 3px rgba(var(--hp-primary-rgb),.08)}
.login-demo-icon.is-admin,.login-demo-icon.is-reception,.login-register-icon{color:var(--hp-primary);background:var(--hp-accent-soft)}
.login-security-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.48rem;margin:1rem 0 .1rem}
.login-security-strip span{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:38px;padding:.45rem;border:1px solid var(--hp-border);border-radius:10px;background:var(--hp-surface-2);color:var(--hp-muted);font-size:.59rem;font-weight:700;text-align:center}
.login-security-strip i{color:var(--hp-primary)}
:root[data-hp-theme="dark"] .login-page{background:radial-gradient(circle at 82% 8%,rgba(var(--hp-primary-rgb),.17),transparent 33rem),var(--hp-body-bg)}
:root[data-hp-theme="dark"] .login-access{background:linear-gradient(180deg,var(--hp-surface),#0b111d)}
:root[data-hp-theme="dark"] .login-input,
:root[data-hp-theme="dark"] .login-demo-option,
:root[data-hp-theme="dark"] .login-register-callout,
:root[data-hp-theme="dark"] .login-security-strip span{background:var(--hp-surface-2)}
:root[data-hp-theme="dark"] .login-input:focus-within{background:var(--hp-surface)}
:root[data-hp-theme="dark"] .login-check{background:var(--hp-surface-3);border-color:var(--hp-border)}
:root[data-hp-theme="dark"] .login-demo-option>i{color:var(--hp-muted)}
:root[data-hp-theme="dark"] .login-mobile-brand{color:var(--hp-ink)}
@media (max-width:860px){
  .login-access{background:radial-gradient(circle at 100% 0,rgba(var(--hp-primary-rgb),.1),transparent 34%),var(--hp-surface)}
}
@media (max-width:520px){
  .login-security-strip{grid-template-columns:1fr}
}