:root { --login-navy: #061a32; --login-blue: #1688da; --login-sky: #52c5ff; --login-orange: #ffad66; }
body.client-login { min-height: 100vh; margin: 0; color: var(--login-navy); font-family: Inter, Aptos, "Segoe UI", sans-serif; background: #061a32; }
body.client-login::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 91% 13%, rgba(25,140,220,.55), transparent 25%), radial-gradient(circle at 8% 88%, rgba(255,173,102,.14), transparent 27%), linear-gradient(122deg, #041426 2%, #0b3159 57%, #0a6eb4 132%); }
body.client-login::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(210,237,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(210,237,255,.25) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(125deg, #000 10%, transparent 85%); }
body.client-login header { position: relative; z-index: 5; }
body.client-login .horizontal-nav { min-height: 88px; width: min(1280px, calc(100% - 48px)); margin: auto; padding: 0; background: transparent !important; border-bottom: 1px solid rgba(221,241,255,.16); }
body.client-login .horizontal-nav .logo { display: flex; align-items: center; }
body.client-login .horizontal-nav .logo img { width: 148px !important; height: 58px; object-fit: contain; filter: brightness(0) invert(1); }
body.client-login .horizontal-nav .links { margin-left: auto; }
body.client-login .horizontal-nav .nav-links { gap: 28px; }
body.client-login .horizontal-nav .nav-links a { color: rgba(243,249,255,.76); font-size: 13px; font-weight: 750; }
body.client-login .horizontal-nav .nav-links a:hover { color: #fff; }
body.client-login .auth-buttons-desktop .login-btn { border-color: rgba(255,255,255,.45); color: #fff; }
body.client-login .auth-buttons-desktop .register-btn { border-color: var(--login-orange); background: var(--login-orange); color: var(--login-navy); }
body.client-login .auth-viewport { position: relative; display: grid; min-height: calc(100vh - 88px); padding: 54px 0 70px; background: transparent; }
body.client-login .auth-shell { width: min(1240px, calc(100% - 48px)); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 440px); align-items: center; gap: clamp(60px, 10vw, 150px); }
body.client-login .client-access-intro { max-width: 570px; color: #fff; }
body.client-login .client-access-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--login-orange); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
body.client-login .client-access-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #6cf1c0; box-shadow: 0 0 14px #6cf1c0; }
body.client-login .client-access-intro h1 { max-width: 540px; margin: 0; color: #fff; font-size: clamp(47px, 5vw, 72px); font-weight: 850; letter-spacing: -.065em; line-height: .93; }
body.client-login .client-access-intro h1 em { color: var(--login-orange); font-style: normal; }
body.client-login .client-access-intro > p:not(.client-access-kicker) { max-width: 460px; margin: 25px 0 0; color: rgba(234,246,255,.76); font-size: 16px; line-height: 1.7; }
body.client-login .client-login-route { position: relative; display: flex; align-items: flex-end; justify-content: space-between; max-width: 490px; margin-top: 44px; padding: 25px 4px 0; border-top: 1px solid rgba(230,245,255,.23); }
body.client-login .client-login-route::before { content: ""; position: absolute; top: -1px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--login-sky), var(--login-orange)); box-shadow: 0 0 18px rgba(82,197,255,.34); }
body.client-login .client-login-route::after { content: "📦"; position: absolute; top: -15px; left: 7%; font-size: 22px; filter: drop-shadow(0 6px 9px rgba(0,0,0,.3)); animation: login-package-route 8s ease-in-out infinite; }
body.client-login .route-stop { width: 31%; color: rgba(235,246,255,.62); font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; }
body.client-login .route-stop:nth-child(2) { text-align: center; }
body.client-login .route-stop:last-child { text-align: right; }
body.client-login .route-stop strong { display: block; margin-bottom: 4px; color: #fff; font-size: 14px; letter-spacing: 0; text-transform: none; }
@keyframes login-package-route { 0%, 10% { left: 7%; transform: translateY(0) rotate(-6deg); } 42%, 54% { left: 46%; transform: translateY(-7px) rotate(5deg); } 88%, 100% { left: 86%; transform: translateY(0) rotate(-5deg); } }
body.client-login .login-container.auth-card { width: 100%; padding: 38px !important; border: 1px solid rgba(255,255,255,.58); border-radius: 22px; background: rgba(251,254,255,.97); box-shadow: 0 30px 80px rgba(1,13,30,.35); }
body.client-login .client-login-mark { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 22px; border-radius: 16px; background: var(--login-navy); color: var(--login-orange); font-size: 25px; box-shadow: 0 14px 28px rgba(6,26,50,.2); }
body.client-login .client-card-eyebrow { margin: 0 0 7px; color: #628099; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
body.client-login .auth-card .auth-stage h2, body.client-login .auth-card .auth-stage h5 { color: var(--login-navy); font-weight: 850; letter-spacing: -.04em; }
body.client-login .auth-card #stage-login h2 { margin-bottom: 8px !important; text-align: left !important; font-size: 30px; }
body.client-login .auth-card #stage-login h2::after { content: "Gestioná tus compras y envíos desde un solo lugar."; display: block; margin-top: 8px; color: #637b90; font-family: Inter, Aptos, "Segoe UI", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
body.client-login .auth-card .form-label { margin-bottom: 8px; color: #36506a; font-size: 12px; font-weight: 750; }
body.client-login .auth-card .form-control { min-height: 52px; border: 1px solid #c9d8e5; border-radius: 10px; color: var(--login-navy); box-shadow: none; }
body.client-login .auth-card .form-control:focus { border-color: var(--login-blue); box-shadow: 0 0 0 4px rgba(22,136,218,.13); }
body.client-login .auth-card a { color: #1478bf; font-weight: 650; }
body.client-login .auth-card .btn-primary, body.client-login .auth-card .btn-login { min-height: 54px; border: 0; border-radius: 10px; background: var(--login-orange); color: var(--login-navy); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
body.client-login .auth-card .btn-primary:hover, body.client-login .auth-card .btn-login:hover { background: #ffc075; color: var(--login-navy); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,173,102,.32); }
body.client-login .auth-card .alert { border-radius: 10px; font-size: 13px; }
body.client-login .auth-card .otp-digit { min-height: 50px; font-size: 21px; font-weight: 800; }
body.client-login footer { display: none; }
@media (max-width: 920px) { body.client-login .auth-shell { grid-template-columns: minmax(0, 460px); justify-content: center; } body.client-login .client-access-intro { display: none; } }
@media (max-width: 720px) { body.client-login .horizontal-nav { width: 100%; min-height: 72px; padding: 0 18px; border: 0; } .horizontal-nav { display: none !important; } body.client-login .navbar { display: flex; min-height: 72px; background: rgba(5,25,48,.78) !important; backdrop-filter: blur(12px); } body.client-login .navbar .logo img { width: 110px; filter: brightness(0) invert(1); } body.client-login .auth-viewport { min-height: calc(100vh - 72px); padding: 26px 0 42px; } body.client-login .auth-shell { width: min(100% - 28px, 460px); } }
@media (max-width: 440px) { body.client-login .login-container.auth-card { padding: 27px 22px !important; border-radius: 18px; } body.client-login .auth-card #stage-login h2 { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { body.client-login .client-login-route::after { animation: none; } }
/* Header del login: misma estructura y jerarquía visual que el Home. */
body.client-login .client-site-header { position: relative; z-index: 20; height: 82px; background: rgba(20,35,61,.9); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px); }
body.client-login .client-nav-shell { width: min(100% - 48px, 1280px); height: 100%; margin: auto; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 28px; }
body.client-login .client-brand { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.58); font-size: 8px; font-weight: 800; letter-spacing: .15em; line-height: 1.35; text-decoration: none; text-transform: uppercase; }
body.client-login .client-brand img { width: 108px; height: 54px; object-fit: contain; filter: brightness(0) invert(1); }
body.client-login .client-brand span { max-width: 62px; }
body.client-login .client-desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px,2vw,34px); }
body.client-login .client-desktop-nav a, body.client-login .client-nav-actions .login-btn { position: relative; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 750; letter-spacing: .03em; text-decoration: none; }
body.client-login .client-desktop-nav a::after, body.client-login .client-nav-actions .login-btn::after { content: ""; position: absolute; right: 100%; bottom: -9px; left: 0; height: 2px; background: var(--login-orange); transition: right 180ms ease; }
body.client-login .client-desktop-nav a:hover, body.client-login .client-nav-actions .login-btn:hover { color: #fff; }
body.client-login .client-desktop-nav a:hover::after, body.client-login .client-nav-actions .login-btn:hover::after { right: 0; }
body.client-login .client-nav-actions, body.client-login .auth-buttons-desktop { display: flex; align-items: center; gap: 18px; }
body.client-login .client-nav-actions .auth-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 0 15px; border: 1px solid transparent; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
body.client-login .client-nav-actions .login-btn { min-height: auto; padding: 0; border: 0; border-radius: 0; letter-spacing: .03em; text-transform: none; }
body.client-login .client-nav-actions .register-btn { border-color: var(--login-orange); background: var(--login-orange); color: var(--login-navy); }
body.client-login .client-nav-actions .register-btn:hover { background: #ffc075; color: var(--login-navy); }
body.client-login .client-menu-toggle, body.client-login .client-mobile-panel { display: none; }
@media (max-width: 1120px) { body.client-login .client-desktop-nav { display: none; } body.client-login .client-nav-shell { grid-template-columns: 1fr auto auto; } body.client-login .client-menu-toggle { width: 42px; height: 42px; display: grid; place-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: transparent; cursor: pointer; } body.client-login .client-menu-toggle span { width: 18px; height: 1px; background: #fff; transition: transform 180ms ease; } body.client-login .client-menu-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); } body.client-login .client-menu-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); } body.client-login .client-mobile-panel { position: fixed; inset: 82px 0 0; padding: 34px 24px; flex-direction: column; background: rgba(20,35,61,.98); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease; } body.client-login .client-mobile-panel.is-open { display: flex; opacity: 1; visibility: visible; transform: translateY(0); } body.client-login .client-mobile-panel nav { display: grid; } body.client-login .client-mobile-panel nav a { min-height: 58px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 22px; font-weight: 760; letter-spacing: -.03em; text-decoration: none; } body.client-login .client-mobile-panel nav a span { color: var(--login-orange); font-size: 9px; letter-spacing: .12em; } body.client-login .client-mobile-actions { margin-top: auto; } body.client-login .auth-buttons-mobile { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; } body.client-login .auth-buttons-mobile .auth-btn { min-height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 7px; color: #fff; font-size: 11px; font-weight: 800; text-decoration: none; } body.client-login .auth-buttons-mobile .register-btn { border-color: var(--login-orange); background: var(--login-orange); color: var(--login-navy); } }
@media (max-width: 860px) { body.client-login .client-nav-actions { display: none; } body.client-login .client-nav-shell { grid-template-columns: 1fr auto; } body.client-login .client-brand span { display: none; } }
@media (max-width: 560px) { body.client-login .client-site-header { height: 72px; } body.client-login .client-nav-shell { width: calc(100% - 28px); } body.client-login .client-brand img { width: 94px; height: 48px; } body.client-login .client-mobile-panel { inset: 72px 0 0; } }
/* Registro: conserva la misma identidad, con más aire para el formulario extenso. */
body.client-register .register-viewport { align-items: start; padding: 64px 0 86px; }
body.client-register .auth-shell { align-items: start; }
body.client-register .client-access-intro { position: sticky; top: 128px; padding-top: 72px; }
body.client-register .register-container.auth-card { width: 100%; padding: 38px !important; border: 1px solid rgba(255,255,255,.58); border-radius: 22px; background: rgba(251,254,255,.97); box-shadow: 0 30px 80px rgba(1,13,30,.35); }
body.client-register .register-title { margin: 0; color: var(--login-navy); font-size: 30px; font-weight: 850; letter-spacing: -.045em; text-align: left; }
body.client-register .register-card-intro { margin: 8px 0 28px; color: #637b90; font-size: 13px; line-height: 1.5; }
body.client-register .register-container .form-group { margin-bottom: 18px; }
body.client-register .register-container .form-label { margin-bottom: 8px; color: #36506a; font-size: 12px; font-weight: 750; }
body.client-register .register-container .form-control, body.client-register .register-container .form-select { min-height: 50px; border: 1px solid #c9d8e5; border-radius: 10px; color: var(--login-navy); box-shadow: none; }
body.client-register .register-container .form-control:focus, body.client-register .register-container .form-select:focus { border-color: var(--login-blue); box-shadow: 0 0 0 4px rgba(22,136,218,.13); }
body.client-register .register-container .text-muted { color: #71869a !important; font-size: 11px; }
body.client-register .register-container .btn-register { width: 100%; min-height: 54px; margin-top: 8px; border: 0; border-radius: 10px; background: var(--login-orange); color: var(--login-navy); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
body.client-register .register-container .btn-register:hover { background: #ffc075; color: var(--login-navy); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,173,102,.32); }
body.client-register .login-link { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dbe6ef; text-align: center; }
body.client-register .login-link p { margin: 0; color: #5f7488; font-size: 13px; }
body.client-register .login-link a { color: #1478bf; font-weight: 700; }
body.client-register .alert { border-radius: 10px; font-size: 13px; }
@media (max-width: 920px) { body.client-register .client-access-intro { display: none; } body.client-register .register-viewport { padding-top: 32px; } }
@media (max-width: 440px) { body.client-register .register-container.auth-card { padding: 27px 22px !important; border-radius: 18px; } body.client-register .register-title { font-size: 27px; } }