:root {
    --navy-900: #050d18; --navy-800: #0a1628; --navy-700: #10213d;
    --navy-600: #172f54; --navy-500: #1e4d78; --navy-400: #2a6da8;
    --navy-300: #4a90d0; --navy-200: #7cb8e8;
    --navy-100: #c4ddf0; --navy-50: #eaf3fb;
    --red-600: #b71c1c; --red-500: #d32f2f; --red-400: #ef4444; --red-300: #f87171;
    --white: #ffffff;
    --g50: #f8fafc; --g100: #f1f5f9; --g200: #e2e8f0; --g300: #cbd5e1;
    --g400: #94a3b8; --g500: #64748b; --g600: #475569; --g700: #334155; --g800: #1e293b;
    --success: #10b981; --error: #ef4444; --warning: #f59e0b;
    --font: 'Plus Jakarta Sans', sans-serif;
    --mono: 'Space Mono', monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Premium design tokens ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.03);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.09), 0 8px 20px rgba(0,0,0,.04);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--navy-900); color: var(--g800); overflow-x: hidden; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
button { border: none; cursor: pointer; font-family: inherit; background: none; }
input { border: none; outline: none; font-family: inherit; background: none; }

/* ═══ LOGIN SCREEN ═══════════════════════════════════ */
.login-screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--navy-900); z-index: 100;
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1s ease;
}
.login-screen.fade-out { opacity: 0; transform: scale(1.06); filter: blur(16px) brightness(1.4); pointer-events: none; }

/* Aurora */
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.aurora-band { position: absolute; width: 200%; height: 300px; filter: blur(80px); opacity: 0.3; border-radius: 50%; }
.a1 { background: linear-gradient(90deg, transparent, var(--navy-400), var(--navy-300), transparent); top: -80px; left: -50%; animation: au1 12s ease-in-out infinite; }
.a2 { background: linear-gradient(90deg, transparent, var(--red-500), var(--red-400), transparent); top: 20%; left: -30%; height: 200px; opacity: 0.18; animation: au2 16s ease-in-out infinite; }
.a3 { background: linear-gradient(90deg, transparent, var(--navy-300), var(--red-300), transparent); bottom: -100px; right: -50%; opacity: 0.22; animation: au3 20s ease-in-out infinite; }
@keyframes au1 { 0%,100%{transform:translateX(-20%) scaleY(1) rotate(-3deg)}50%{transform:translateX(10%) scaleY(1.4) rotate(2deg)} }
@keyframes au2 { 0%,100%{transform:translateX(10%) scaleY(1)}33%{transform:translateX(-15%) scaleY(1.6)}66%{transform:translateX(5%) scaleY(0.8)} }
@keyframes au3 { 0%,100%{transform:translateX(20%) scaleY(1) rotate(2deg)}50%{transform:translateX(-10%) scaleY(1.5) rotate(-3deg)} }

#particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.floating-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.shape { position: absolute; border: 1px solid rgba(42,109,168,0.1); animation: sf 20s ease-in-out infinite; }
.shape-1 { width: 60px; height: 60px; border-radius: 12px; top: 12%; left: 8%; animation-duration: 22s; border-color: rgba(211,47,47,0.08); }
.shape-2 { width: 40px; height: 40px; border-radius: 50%; top: 25%; right: 15%; animation-duration: 18s; animation-delay: -4s; }
.shape-3 { width: 80px; height: 80px; border-radius: 16px; bottom: 20%; left: 12%; animation-duration: 25s; animation-delay: -8s; }
.shape-4 { width: 30px; height: 30px; border-radius: 6px; top: 60%; right: 10%; animation-duration: 15s; border-color: rgba(211,47,47,0.06); }
.shape-5 { width: 50px; height: 50px; border-radius: 50%; bottom: 15%; right: 25%; animation-duration: 20s; animation-delay: -6s; }
@keyframes sf { 0%,100%{transform:translateY(0) rotate(0);opacity:.3}25%{transform:translateY(-30px) rotate(90deg);opacity:.6}50%{transform:translateY(-15px) rotate(180deg);opacity:.4}75%{transform:translateY(-40px) rotate(270deg);opacity:.7} }

.noise-overlay { position: absolute; inset: 0; z-index: 2; opacity: 0.025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px; }
.perspective-grid { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(rgba(42,109,168,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(42,109,168,0.04) 1px,transparent 1px); background-size: 60px 60px; transform: perspective(500px) rotateX(60deg); transform-origin: bottom; mask-image: linear-gradient(to top,rgba(0,0,0,0.3),transparent); z-index: 0; }

/* Container */
.login-container {
    position: relative; z-index: 10; display: flex;
    width: calc(100% - 32px); max-width: 1120px; min-height: 640px;
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 60px rgba(42,109,168,0.08), 0 0 120px rgba(42,109,168,0.03);
    animation: cardIn 1.4s var(--ease) both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(50px) scale(0.93)} }

/* ═══ BRANDING ═══════════════════════════════════════ */
.login-branding {
    display: none; flex-direction: column; justify-content: space-between;
    width: 44%; padding: 48px 40px;
    background: linear-gradient(170deg, var(--navy-800), var(--navy-900));
    position: relative; overflow: hidden;
}
.login-branding::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(42,109,168,.06), transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(211,47,47,.03), transparent 50%);
    pointer-events: none; z-index: 0;
}
.login-branding::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--navy-400), var(--red-400), var(--navy-300), var(--red-500)); background-size: 300% 100%; animation: bs 5s linear infinite; z-index: 2; }
@keyframes bs { to{background-position:300% 0} }
.branding-content { position: relative; z-index: 1; }

.logo-wrapper { position: relative; display: inline-block; margin-bottom: 8px; }
.brand-logo-img { width: 210px; height: auto; position: relative; z-index: 2; filter: drop-shadow(0 0 30px rgba(42,109,168,0.4)); animation: lb 4s ease-in-out infinite; }
@keyframes lb { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)} }
.logo-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 80px; background: radial-gradient(ellipse,rgba(42,109,168,.35),transparent 70%); filter: blur(25px); z-index: 0; animation: gp 3s ease-in-out infinite alternate; }
@keyframes gp { from{opacity:.5;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.3)} }
.logo-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 160px; height: 60px; border: 1px solid rgba(42,109,168,.15); border-radius: 50%; z-index: 1; animation: re 4s ease-in-out infinite; }
@keyframes re { 0%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.4);opacity:0} }

.tagline-wrapper { margin-bottom: 28px; }
.tag-line { display: block; width: 32px; height: 2px; background: var(--red-400); margin-bottom: 10px; animation: lg .8s var(--ease) .5s both; }
@keyframes lg { from{width:0} }
.brand-tagline { color: var(--g400); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; animation: fu .6s var(--ease) .6s both; }
.brand-separator { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; animation: fu .6s var(--ease) .7s both; }
.sep-line { flex: 1; height: 1px; background: linear-gradient(90deg,rgba(42,109,168,.3),transparent); }
.sep-line:last-child { background: linear-gradient(90deg,transparent,rgba(211,47,47,.2)); }
.sep-diamond { width: 8px; height: 8px; background: var(--red-400); transform: rotate(45deg); animation: ds 8s linear infinite; }
@keyframes ds { to{transform:rotate(405deg)} }
.brand-description { color: var(--g300); font-size: .9rem; line-height: 1.7; margin-bottom: 32px; animation: fu .6s var(--ease) .8s both; }

.brand-features { display: flex; flex-direction: column; gap: 10px; }
.feature-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; transition: all .5s var(--ease); animation: fu .6s var(--ease) calc(.9s + var(--d)*.1s) both; backdrop-filter: blur(6px); }
.feature-card:hover { background: rgba(42,109,168,.1); border-color: rgba(42,109,168,.25); transform: translateX(8px) scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.feature-icon { width: 42px; height: 42px; background: linear-gradient(135deg,rgba(211,47,47,.12),rgba(211,47,47,.04)); border: 1px solid rgba(211,47,47,.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .5s var(--ease); }
.feature-card:hover .feature-icon { background: linear-gradient(135deg,var(--red-500),var(--red-600)); border-color: transparent; box-shadow: 0 0 25px rgba(211,47,47,.4); transform: rotate(-5deg) scale(1.1); }
.feature-icon svg { width: 20px; height: 20px; color: var(--red-300); transition: color .3s; }
.feature-card:hover .feature-icon svg { color: white; }
.ft { display: block; color: var(--g200); font-size: .88rem; font-weight: 600; }
.fd { display: block; color: var(--g500); font-size: .72rem; margin-top: 2px; }
.feature-arrow { margin-left: auto; color: var(--g600); font-size: 1.1rem; opacity: 0; transform: translateX(-8px); transition: all .4s var(--ease); }
.feature-card:hover .feature-arrow { opacity: 1; transform: translateX(0); color: var(--navy-300); }

.branding-footer { position: relative; z-index: 1; }
.secure-badge { display: flex; align-items: center; gap: 8px; color: var(--g500); font-size: .75rem; }
.secure-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; animation: bk 2s ease-in-out infinite; }
@keyframes bk { 0%,100%{opacity:1}50%{opacity:.3} }
@keyframes fu { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }

/* ═══ FORM PANEL ═════════════════════════════════════ */
.login-form-panel {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 32px 24px; background: var(--white); position: relative;
}
.login-form-panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 85% 15%, rgba(42,109,168,.02), transparent 45%),
        radial-gradient(ellipse at 15% 85%, rgba(211,47,47,.015), transparent 45%);
}
.form-wrapper { width: 100%; max-width: 420px; position: relative; z-index: 1; }
.mobile-logo { text-align: center; margin-bottom: 24px; }
.mobile-logo-img { height: 40px; width: auto; filter: brightness(.15); }

/* ═══ TABS ═══════════════════════════════════════════ */
.login-tabs { display: flex; position: relative; background: var(--g100); border-radius: 14px; padding: 4px; margin-bottom: 28px; animation: fu .6s var(--ease) .1s both; box-shadow: inset 0 1px 3px rgba(0,0,0,.04); }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border-radius: 10px; font-size: .82rem; font-weight: 600; color: var(--g500); transition: all .35s var(--ease); z-index: 1; position: relative; }
.tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.tab.active { color: var(--navy-800); }
.tab:hover:not(.active) { color: var(--g700); }
.tab-indicator { position: absolute; top: 4px; left: 4px; width: calc(33.333% - 3px); height: calc(100% - 8px); background: var(--white); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); transition: transform .4s var(--ease); z-index: 0; }
.tab-indicator[data-pos="1"] { transform: translateX(100%); }
.tab-indicator[data-pos="2"] { transform: translateX(200%); }

/* ═══ FORM VIEWS ═════════════════════════════════════ */
.form-view { display: none; animation: viewIn .4s var(--ease) both; }
.form-view.active { display: block; }
@keyframes viewIn { from{opacity:0;transform:translateY(10px)} }

.form-header { margin-bottom: 24px; }
.greeting-icon { font-size: 1.8rem; display: inline-block; }
.form-title { font-size: 1.6rem; font-weight: 800; color: var(--navy-800); letter-spacing: -.03em; margin: 4px 0; }
.form-subtitle { color: var(--g500); font-size: .88rem; }

/* Inputs */
.login-form { display: flex; flex-direction: column; gap: 18px; }
.input-label { display: block; font-size: .75rem; font-weight: 700; color: var(--g600); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; }
.input-wrapper { position: relative; display: flex; align-items: center; background: var(--g50); border: 2px solid var(--g200); border-radius: 14px; transition: all .4s var(--ease); overflow: hidden; }
.input-wrapper:focus-within { border-color: var(--navy-400); background: var(--white); box-shadow: 0 0 0 4px rgba(42,109,168,.06), 0 8px 20px rgba(42,109,168,.06); transform: translateY(-1px); }
.iw-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,var(--navy-400),var(--red-400),var(--navy-300)); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.input-wrapper:focus-within .iw-line { transform: scaleX(1); animation: lf 3s linear infinite; }
@keyframes lf { to{background-position:200% 0} }
.iw-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iw-icon svg { width: 20px; height: 20px; color: var(--g400); transition: all .4s var(--ease); }
.input-wrapper:focus-within .iw-icon svg { color: var(--navy-400); transform: scale(1.15); }
.input-field { flex: 1; padding: 15px 0; font-size: .95rem; color: var(--g800); font-weight: 500; }
.input-field::placeholder { color: var(--g400); font-weight: 400; }

.iw-status { width: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iw-status svg { width: 18px; height: 18px; display: none; }
.s-ok { color: var(--success); }
.s-err { color: var(--error); }
.input-group.valid .input-wrapper { border-color: var(--success); background: #f0fdf4; }
.input-group.valid .s-ok { display: block; animation: pb .5s var(--bounce); }
.input-group.error .input-wrapper { border-color: var(--error); background: #fef2f2; animation: si .6s ease; }
.input-group.error .input-wrapper:focus-within { box-shadow: 0 0 0 4px rgba(239,68,68,.06); }
.input-group.error .s-err { display: block; animation: pb .5s var(--bounce); }
.input-group.error .iw-icon svg { color: var(--error); }
@keyframes pb { 0%{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.3) rotate(5deg)}100%{transform:scale(1) rotate(0)} }
@keyframes si { 0%,100%{transform:translateX(0)}15%{transform:translateX(-10px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)} }
.input-error { display: block; font-size: .78rem; color: var(--error); margin-top: 6px; font-weight: 600; }

.toggle-pw { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--g400); transition: all .3s; flex-shrink: 0; }
.toggle-pw:hover { color: var(--navy-500); transform: scale(1.1); }
.toggle-pw svg { width: 20px; height: 20px; }

/* Global Error */
.global-error { display: none; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg,#fef2f2,#fff5f5); border: 1px solid rgba(239,68,68,.2); border-radius: 12px; }
.global-error.visible { display: flex; animation: si .6s ease; }
.global-error svg { width: 20px; height: 20px; color: var(--error); flex-shrink: 0; }
.global-error span { font-size: .85rem; color: var(--red-600); font-weight: 600; }

/* ═══ Botón Login ════════════════════════════════════ */
.btn-login { position: relative; width: 100%; padding: 17px 24px; border-radius: 16px; color: var(--white); font-size: 1rem; font-weight: 700; overflow: hidden; transition: transform .3s var(--ease), box-shadow .4s; }
.btn-bg { position: absolute; inset: 0; background: linear-gradient(135deg,var(--navy-700),var(--navy-900)); z-index: 0; transition: all .5s; }
.btn-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,var(--red-500),#c62828); opacity: 0; transition: opacity .5s; }
.btn-login:hover .btn-bg::after { opacity: 1; }
.btn-login:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(211,47,47,.3); }
.btn-login:active { transform: translateY(-1px); }
.btn-shine { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 45%,rgba(255,255,255,.05) 50%,transparent 55%); background-size: 250% 100%; animation: bsh 4s ease-in-out infinite; }
@keyframes bsh { 0%{background-position:200% 0}100%{background-position:-100% 0} }
.btn-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .3s; }
.btn-arrow { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.btn-login:hover .btn-arrow { transform: translateX(6px); }
.btn-loader,.btn-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0; transition: opacity .4s; }
.spinner { width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.25); border-top-color: white; border-radius: 50%; animation: sp .65s linear infinite; }
@keyframes sp { to{transform:rotate(360deg)} }
.btn-login.loading .btn-content { opacity: 0; }
.btn-login.loading .btn-loader { opacity: 1; }
.btn-login.loading { pointer-events: none; }
.btn-login.success .btn-content { opacity: 0; }
.btn-login.success .btn-check { opacity: 1; }
.btn-login.success .btn-bg { background: var(--success); }
.btn-login.success .btn-bg::after { opacity: 0; }
.btn-login.success .btn-shine { display: none; }
.btn-login.success { box-shadow: 0 15px 40px rgba(16,185,129,.3); }
.btn-check svg { width: 30px; height: 30px; color: white; animation: pb .5s var(--bounce); }

/* ═══ Sin Cuenta ═════════════════════════════════════ */
.no-account-view { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0; }
.na-emoji { font-size: 4rem; margin-bottom: 4px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
.na-title { font-size: 1.4rem; font-weight: 800; color: var(--navy-800); }
.na-desc { color: var(--g500); font-size: .9rem; line-height: 1.6; margin: 12px 0 28px; max-width: 320px; }
.btn-contact-wa { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: #25D366; color: white; font-size: .95rem; font-weight: 700; border-radius: 14px; transition: all .3s var(--ease); box-shadow: 0 4px 16px rgba(37,211,102,.25); }
.btn-contact-wa:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(37,211,102,.35); }
.btn-contact-wa svg { width: 22px; height: 22px; }
.btn-contact-phone { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 24px; margin-top: 12px; background: transparent; color: var(--navy-500); font-size: .9rem; font-weight: 600; border: 2px solid var(--g200); border-radius: 14px; transition: all .3s var(--ease); }
.btn-contact-phone:hover { border-color: var(--navy-400); background: var(--navy-50); transform: translateY(-2px); }
.btn-contact-phone svg { width: 20px; height: 20px; }

.form-footer { text-align: center; margin-top: 24px; font-size: .78rem; color: var(--g400); }

/* ═══ TRANSICIÓN WOW ═════════════════════════════════ */
.transition-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--navy-900); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.transition-screen.active { opacity: 1; pointer-events: auto; }
#confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.transition-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }
.trans-box-icon { font-size: 6rem; animation: boxBounce 1.5s var(--bounce) infinite; }
@keyframes boxBounce { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)} }
.welcome-msg { margin-top: 28px; }
.w-text { font-size: 1.5rem; font-weight: 800; color: var(--white); min-height: 2em; white-space: pre-wrap; }
.w-text::after { content: '▌'; color: var(--red-400); animation: cb .55s step-end infinite; font-weight: 300; }
.w-text.done::after { display: none; }
@keyframes cb { 0%,100%{opacity:1}50%{opacity:0} }
.w-sub { color: var(--g400); font-size: .88rem; margin-top: 10px; min-height: 1.4em; }
.pbar-wrap { display: flex; align-items: center; gap: 14px; margin-top: 28px; width: 300px; }
.pbar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 20px; overflow: hidden; }
.pbar-fill { height: 100%; width: 0%; background: linear-gradient(90deg,var(--navy-400),var(--red-400)); border-radius: 20px; transition: width .5s var(--ease); box-shadow: 0 0 12px rgba(211,47,47,.3); }
.pbar-pct { font-family: var(--mono); font-size: .82rem; color: var(--g400); min-width: 38px; text-align: right; }

/* ═══ DASHBOARD ══════════════════════════════════════ */
.dashboard-screen { position: fixed; inset: 0; background: var(--g50); z-index: 80; opacity: 0; pointer-events: none; overflow-y: auto; transition: opacity .8s var(--ease); }
.dashboard-screen.active { opacity: 1; pointer-events: auto; }
.d-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--white); border-bottom: 1px solid var(--g200); position: sticky; top: 0; z-index: 10; }
.d-nav-logo { height: 30px; }
.d-nav-r { display: flex; align-items: center; gap: 10px; }
.d-pill { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; background: var(--g50); border-radius: 50px; border: 1px solid var(--g200); }
.d-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,var(--navy-600),var(--navy-800)); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: white; }
.d-name { font-size: .85rem; font-weight: 600; color: var(--g700); display: none; }
.d-badge { font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: none; }
.d-badge.sucursal { display: inline; background: var(--navy-50); color: var(--navy-500); }
.d-badge.cliente { display: inline; background: #ecfdf5; color: var(--success); }
.btn-out { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--g400); transition: all .2s; }
.btn-out:hover { background: #fef2f2; color: var(--red-500); }
.btn-out svg { width: 18px; height: 18px; }
.d-main { padding: 24px 20px; max-width: 1200px; margin: 0 auto; }
.d-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; animation: fu .5s var(--ease) both; }
.d-title { font-size: 1.5rem; font-weight: 800; color: var(--navy-800); }
.d-sub { color: var(--g500); font-size: .88rem; }
.btn-new {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg,var(--red-500),var(--red-600));
    color: white; font-size: .9rem; font-weight: 700; border-radius: 12px;
    transition: all .3s var(--ease);
    box-shadow: 0 4px 12px rgba(211,47,47,.2); align-self: flex-start;
    position: relative; overflow: hidden;
}
.btn-new::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 45%,rgba(255,255,255,.04) 50%,transparent 55%);
    background-size: 250% 100%; animation: bsh 3s ease-in-out infinite;
}
.btn-new:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(211,47,47,.3); }
.btn-new svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.btn-new span { position: relative; z-index: 1; }
.d-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.m-card {
    display: flex; align-items: center; gap: 14px; padding: 20px;
    background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--g200);
    transition: all .4s var(--ease);
    animation: fu .5s var(--ease) calc(.1s + var(--i)*.08s) both;
    position: relative; overflow: hidden;
}
.m-card::before {
    content: ''; position: absolute; top: 0; right: 0;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(42,109,168,.03), transparent 70%);
    transform: translate(40%, -40%); transition: all .5s var(--ease); pointer-events: none;
}
.m-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.m-card:hover::before { transform: translate(30%, -30%) scale(1.5); }
.m-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .4s var(--ease); }
.m-card:hover .m-ico { transform: scale(1.1) rotate(-3deg); }
.m-ico svg { width: 22px; height: 22px; }
.m-b { background: var(--navy-50); color: var(--navy-500); }
.m-r { background: #fef2f2; color: var(--red-500); }
.m-g { background: #ecfdf5; color: var(--success); }
.m-a { background: #fffbeb; color: #f59e0b; }
.m-val { display: block; font-size: 1.4rem; font-weight: 800; color: var(--navy-800); }
.m-lab { display: block; font-size: .78rem; color: var(--g500); margin-top: 2px; }
.d-section { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--g200); overflow: hidden; animation: fu .5s var(--ease) .4s both; }
.d-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--g100); }
.d-sec-head h3 { font-size: 1rem; font-weight: 700; color: var(--navy-800); }
.d-sec-head a { font-size: .85rem; color: var(--navy-400); font-weight: 600; transition: color .2s; }
.d-sec-head a:hover { color: var(--red-500); }
.d-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; }
.de-icon { font-size: 3rem; opacity: .5; }
.de-t { font-weight: 700; color: var(--g600); margin-top: 8px; }
.de-s { color: var(--g400); font-size: .85rem; margin-top: 4px; }

/* ═══ RESPONSIVE ═════════════════════════════════════ */
@media (max-width: 639px) { .tab span { display: none; } .tab svg { width: 20px; height: 20px; } }
@media (min-width: 640px) { .d-name { display: block; } .d-header { flex-direction: row; align-items: center; justify-content: space-between; } .w-text { font-size: 1.85rem; } }
@media (min-width: 900px) { .login-branding { display: flex; } .mobile-logo { display: none; } .login-form-panel { padding: 40px 44px; } .form-title { font-size: 1.8rem; } .d-main { padding: 32px 48px; } .d-nav { padding: 12px 48px; } .d-metrics { grid-template-columns: repeat(4,1fr); gap: 16px; } }
@media (min-width: 1200px) { .login-container { min-height: 660px; } .brand-logo-img { width: 230px; } }

/* ══════════ MODAL NUEVA GUÍA ══════════ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(5,13,24,0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 200; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-wrapper {
    background: var(--white); width: 100%; max-width: 850px;
    border-radius: var(--radius-lg); overflow: hidden;
    transform: translateY(30px) scale(0.98);
    transition: transform 0.4s var(--bounce);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,.08);
    display: flex; flex-direction: column; max-height: 90vh;
}
.modal-overlay.active .modal-wrapper { transform: translateY(0) scale(1); }

.modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 24px 32px; border-bottom: 1px solid var(--g200);
    background: linear-gradient(135deg, var(--g50), rgba(234,243,251,.3));
}
.mh-title { font-size: 1.3rem; font-weight: 800; color: var(--navy-800); }
.mh-sub { font-size: 0.85rem; color: var(--g500); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.btn-close-modal { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--g500); border-radius: 8px; transition: all .25s var(--ease); }
.btn-close-modal:hover { background: var(--red-500); color: white; transform: rotate(90deg); }
.btn-close-modal svg { width: 20px; height: 20px; }

.modal-body { padding: 32px; overflow-y: auto; flex: 1; position: relative; }
.step-view { display: none; animation: fadeIn 0.4s var(--ease); }
.step-view.active { display: block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Paso 1: Servicios */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.service-card {
    display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--white);
    border: 2px solid var(--g200); border-radius: var(--radius-md);
    transition: all 0.3s var(--ease); text-align: left;
    position: relative; overflow: hidden;
}
.service-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(42,109,168,.03));
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
.service-card:hover:not(.disabled)::after { opacity: 1; }
.service-card:hover:not(.disabled) { border-color: var(--navy-400); box-shadow: var(--shadow-md), 0 0 0 1px rgba(42,109,168,.06); transform: translateY(-3px); }
.service-card.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(1); }
.sc-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s var(--ease); }
.service-card:hover:not(.disabled) .sc-icon { transform: scale(1.1) rotate(-3deg); }
.sc-icon svg { width: 24px; height: 24px; }
.sc-title { display: block; font-size: 1.1rem; font-weight: 800; color: var(--navy-800); }
.sc-desc { display: block; font-size: 0.8rem; color: var(--g500); margin-top: 4px; }

/* Paso 2: Formulario */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-grid.single-col { grid-template-columns: 1fr; }
.fg-title { font-size: 0.95rem; font-weight: 700; color: var(--navy-600); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--g100); }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }

/* Botones Modal */
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--g200); }
.modal-actions.centered { justify-content: center; border-top: none; }
.btn-secondary { padding: 12px 24px; background: var(--g100); color: var(--g700); font-weight: 700; border-radius: var(--radius-sm); transition: all .25s var(--ease); }
.btn-secondary:hover { background: var(--g200); transform: translateY(-1px); }
.btn-primary {
    padding: 12px 28px; background: linear-gradient(135deg,var(--red-500),var(--red-600));
    color: white; font-weight: 700; border-radius: var(--radius-sm);
    transition: all .3s var(--ease); box-shadow: 0 4px 12px rgba(211,47,47,0.2);
    position: relative; overflow: hidden;
}
.btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 45%,transparent 55%);
    background-size: 250% 100%; animation: bsh 3s ease-in-out infinite;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(211,47,47,0.3); }

/* Paso 3: Cotización (RBAC) */
.quote-container { text-align: center; max-width: 400px; margin: 0 auto; padding: 20px 0; }
.q-icon { width: 64px; height: 64px; background: #ecfdf5; color: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 0 0 8px rgba(16,185,129,.06); }
.q-icon svg { width: 32px; height: 32px; }
.q-title { font-size: 1.2rem; font-weight: 800; color: var(--navy-800); margin-bottom: 24px; }
.q-price-box { background: var(--navy-50); border: 2px solid var(--navy-200); border-radius: var(--radius-md); padding: 24px; margin-bottom: 16px; }
.qp-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--navy-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.qp-amount { display: block; font-size: 2.2rem; font-weight: 800; color: var(--navy-800); }
.q-client-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 16px; color: #166534; font-weight: 600; font-size: 0.9rem; }
.hidden { display: none !important; }

/* ═══ GBL SERVICE BADGE & CARD ═══ */
.sv-gbl { background: #dcfce7; color: #166534; }
.service-card[data-service="gbl-local"] .sc-icon { color: #16a34a; background: #f0fdf4; }
.service-card[data-service="gbl-local"]:hover { border-color: #16a34a; box-shadow: 0 4px 16px rgba(22,163,74,0.15); }
.service-card[data-service="gbl-local"].selected { border-color: #16a34a; background: #f0fdf4; }