/* Entry experience: spacious, calm and consistent with the workspace. */
html body.login-screen { margin:0; background:#f5f8f7; color:#183b35; font-family:Inter,system-ui,sans-serif; min-height:100svh; }
html body.login-screen :is(.tech-bg,.bg,.logo-watermark,.bg-accent-glow,.bg-accent-glow-top) { display:none; }
html body.login-screen .login-page { display:grid; grid-template-columns:minmax(360px,.92fr) minmax(440px,1.08fr); align-items:stretch; justify-content:stretch; min-height:100svh; padding:0; position:relative; background:#f5f8f7; }
.login-story { background:#123e3a; color:#fff; padding:56px clamp(32px,5vw,88px); display:flex; flex-direction:column; justify-content:space-between; gap:64px; position:relative; overflow:hidden; }
.login-story::after { content:''; position:absolute; width:420px; height:420px; border:1px solid #75dfc021; border-radius:50%; bottom:-290px; right:-100px; pointer-events:none; }
html body.login-screen .login-story .system-brand-logo { width:190px; padding:10px 14px; border-radius:12px; }
.login-story .login-eyebrow { color:#75dfc0; font-size:11px; font-weight:600; letter-spacing:.17em; margin-bottom:24px; }
.login-story h2 { font-size:clamp(32px,3.2vw,48px); line-height:1.16; letter-spacing:-.045em; font-weight:600; max-width:460px; margin:0 0 24px; }
.login-story h2 span { color:#75dfc0; }
.login-story .login-story-description { color:#c2d8d2; font-size:15px; line-height:1.8; max-width:370px; }
.login-capabilities { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.login-capabilities span { padding:8px 12px; border:1px solid #ffffff26; border-radius:6px; font-size:12px; color:#d5e8e2; }
.login-story-footer { font-size:12px; color:#a5c4bb; }
html body.login-screen .login-card { width:min(100%,480px); max-width:480px; min-height:0; margin:auto; padding:48px 36px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
html body.login-screen .login-card-header { padding:0 0 32px; text-align:left; border:0; background:none; }
html body.login-screen .login-card-header::before { display:none; }
html body.login-screen .login-card-header .brand-login { display:none; }
html body.login-screen .login-card-header h1 { margin:0 0 10px; font-size:28px; font-weight:650; letter-spacing:-.035em; color:#123e3a; }
html body.login-screen .login-card-header p { margin:0; font-size:14px; line-height:1.6; color:#60746e; }
html body.login-screen .login-card-body { padding:0; display:block; }
html body.login-screen .fp-input-group { margin-bottom:20px; }
html body.login-screen .fp-input-group label { display:block; position:static; font-size:12px; line-height:1.5; font-weight:600; color:#35544c; text-transform:none; letter-spacing:0; margin-bottom:8px; pointer-events:auto; }
html body.login-screen .fp-input-group input { height:50px; padding:12px 44px 12px 14px; background:#fff; border:1px solid #cddbd5; border-radius:8px; color:#183b35; font-size:14px; box-shadow:0 1px 2px #123e3a04; }
html body.login-screen .fp-input-group input::placeholder { color:#7d9089; }
html body.login-screen .fp-input-group input:focus { border-color:#237f69; outline:3px solid #75dfc033; background:#fff; }
html body.login-screen .fp-input-group .fp-input-icon { top:42px; transform:none; color:#68867a; font-size:14px; }
html body.login-screen .fp-input-group .login-password-toggle { position:absolute; right:4px; top:30px; width:42px; height:44px; border:0; background:none; color:#68867a; cursor:pointer; }
.login-field-help { display:block; margin-top:7px; color:#60746e; font-size:11px; line-height:1.5; }
html body.login-screen .fp-remember-row { gap:12px; margin:24px 0; flex-wrap:wrap; }
html body.login-screen :is(.fp-toggle,.fp-forgot) { font-size:12px; color:#506e62; }
html body.login-screen .fp-toggle input[type=checkbox] { appearance:auto; width:16px; height:16px; border-radius:4px; accent-color:#123e3a; }
html body.login-screen .fp-toggle input[type=checkbox]::after { display:none; }
html body.login-screen .fp-forgot { color:#123e3a; font-weight:600; }
html body.login-screen .fp-submit { border-radius:8px; background:#123e3a; color:#fff; height:50px; padding:12px 18px; font-size:14px; font-weight:600; box-shadow:none; transition:background .15s; }
html body.login-screen .fp-submit:hover { background:#1b5b50; }
html body.login-screen .fp-submit:disabled { cursor:wait; opacity:.75; }
html body.login-screen .login-footer-area { padding-top:24px; }
html body.login-screen .fp-biometric { padding-top:8px; }
html body.login-screen :is(.fp-biometric-label,.fp-secure-footer) { color:#60746e; font-size:10px; letter-spacing:.1em; }
html body.login-screen .fp-biometric-label::before, html body.login-screen .fp-biometric-label::after { background:#dce5e0; }
html body.login-screen .fp-biometric-btn { background:#fff; border:1px solid #cddbd5; color:#123e3a; border-radius:10px; width:46px; height:46px; }
html body.login-screen #biometric-status { color:#60746e !important; }
html body.login-screen .fp-alert { color:#9a2828; border-radius:8px; background:#fff1f1; border:1px solid #f2caca; font-size:13px; }
html body.login-screen .fp-alert-error :is(i,span) { color:#9a2828 !important; }
html body.login-screen :is(button,a,input):focus-visible { outline:3px solid #75dfc0; outline-offset:3px; }
/* Alternate access keeps its login/registration controls. */
html body.login-screen.login-alternative { display:flex; align-items:center; justify-content:center; padding:32px 16px; }
html body.login-screen .wrap { max-width:440px; margin:0; }
html body.login-screen .wrap .card { background:white; border:1px solid #dce5e0; box-shadow:0 16px 48px #123e3a09; border-radius:16px; }
html body.login-screen .wrap :is(.top-subtitle,.panel-desc,.field label,.toggle-label,.field-wrap .fi) { color:#506e62; }
html body.login-screen .wrap :is(.panel-title,.top-title) { color:#123e3a; }
html body.login-screen .wrap .field-wrap input { background:#fff; color:#123e3a; border-color:#cddbd5; }
html body.login-screen .wrap .field-wrap input::placeholder { color:#7d9089; }
html body.login-screen .wrap .btn-submit { background:#123e3a; color:white; box-shadow:none; }
html body.login-screen .wrap .tabs { background:#edf3f0; }
html body.login-screen .wrap .tab { color:#60746e; }
html body.login-screen .wrap .tab.active { background:#fff; color:#123e3a; box-shadow:0 1px 4px #123e3a12; }
/* Illustrated invoice / response exchange; no SIFEN request is made at login. */
html body.login-screen #splash.login-transition { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 38%,#205c50 0%,#123e3a 42%,#0b2926 100%); padding:24px; isolation:isolate; }
html body.login-screen #splash.login-transition::before { content:''; position:absolute; inset:24px; border:1px solid #75dfc018; border-radius:24px; pointer-events:none; }
html body.login-screen #splash[hidden] { display:none; }
html body.login-screen:has(.login-transition.active) { overflow:hidden; }
.login-transition-card { --login-flow-duration:4.2s; width:min(100%,720px); text-align:center; position:relative; animation:login-arrive .65s cubic-bezier(.2,.7,.2,1) both; transition:opacity .24s,transform .24s; }
html body.login-screen .login-transition-card .system-brand-logo { width:140px; margin:0; padding:0; background:none; border-radius:0; }
.login-transition-eyebrow { color:#75dfc0; font-size:9px; letter-spacing:.2em; font-weight:600; margin-bottom:14px; animation:login-arrive .5s .3s both; }
.login-transition-card h2 { font-size:34px; letter-spacing:-.035em; font-weight:600; color:#fff; margin:0 0 12px; animation:login-arrive .5s .4s both; }
.login-transition-card p { font-size:14px; color:#bed9d0; margin:0; animation:login-arrive .5s .5s both; }
.login-transition-track { overflow:hidden; height:2px; border-radius:3px; background:#ffffff18; width:180px; margin:24px auto 16px; }
.login-transition-track span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#389c80,#75dfc0); transform-origin:left; animation:login-progress var(--login-flow-duration) linear both; }
.billing-flow { display:grid; grid-template-columns:180px minmax(80px,1fr) 180px; align-items:start; margin:48px auto 28px; }
.billing-node { position:relative; }
.billing-node-card { height:124px; border:1px solid #75dfc035; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; box-shadow:0 16px 40px #061e1b33; }
.billing-business .billing-node-card { background:#fff; animation:billing-business var(--login-flow-duration) both; }
.billing-sifen .billing-node-card { background:#ffffff08; color:#75dfc0; animation:billing-receiver var(--login-flow-duration) both; }
.billing-node > strong { display:block; color:#eff9f4; font-size:13px; font-weight:600; margin:18px 0 5px; }
.billing-node > span { display:block; color:#a4c7ba; font-size:11px; line-height:1.5; }
.billing-sifen-symbol { width:44px; height:44px; margin-bottom:4px; }
.billing-node-card b { color:#e5f6ef; letter-spacing:.13em; font-size:15px; font-weight:600; }
.billing-connection { position:relative; height:124px; margin:0 12px; }
.billing-lane { position:absolute; left:0; right:0; border-top:1px dashed #75dfc04d; }
.billing-lane-out { top:38px; }
.billing-lane-back { top:92px; }
.billing-lane::after { content:''; position:absolute; width:6px; height:6px; border-right:1px solid #75dfc099; border-top:1px solid #75dfc099; right:0; top:-4px; transform:rotate(45deg); }
.billing-lane-back::after { right:auto; left:0; transform:rotate(-135deg); }
.billing-lane span { position:absolute; left:0; right:0; top:-23px; color:#b5d9cc; font-size:10px; white-space:nowrap; }
.billing-lane-back span { top:12px; }
.billing-packet { width:36px; height:40px; border-radius:7px; position:absolute; display:grid; place-items:center; box-shadow:0 4px 18px #051e1b55; }
.billing-packet svg { width:24px; height:26px; }
.billing-packet-out { top:18px; background:#fff; color:#123e3a; animation:billing-send var(--login-flow-duration) both; }
.billing-packet-back { top:72px; background:#75dfc0; color:#123e3a; animation:billing-return var(--login-flow-duration) both; }
.billing-processing { position:absolute; bottom:10px; display:flex; gap:4px; opacity:0; animation:billing-process var(--login-flow-duration) both; }
.billing-processing i { width:4px; height:4px; border-radius:50%; background:#75dfc0; }
.billing-flow-steps { display:flex; justify-content:center; gap:28px; color:#b0cbbf; font-size:11px; }
.billing-flow-steps span { display:flex; align-items:center; gap:8px; }
.billing-flow-steps b { display:grid; place-items:center; font-size:9px; width:22px; height:22px; border-radius:50%; border:1px solid #75dfc035; }
.billing-step-generate { animation:billing-step-one var(--login-flow-duration) both; }
.billing-step-send { animation:billing-step-two var(--login-flow-duration) both; }
.billing-step-receive { animation:billing-step-three var(--login-flow-duration) both; }
.billing-flow-note { margin-top:18px; font-size:10px; color:#a4c7ba; }
html body.login-screen .login-transition-card .login-transition-opening { font-size:11px; color:#bed9d0; }
html body.login-screen #splash.is-leaving .login-transition-card { opacity:0; transform:translateY(-6px); animation:none; }
@keyframes login-progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes login-arrive { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes billing-send { 0%,16%{left:0;opacity:0;transform:scale(.85)} 22%{left:0;opacity:1;transform:scale(1)} 46%{left:calc(100% - 36px);opacity:1;transform:scale(1)} 50%,100%{left:calc(100% - 36px);opacity:0;transform:scale(.8)} }
@keyframes billing-return { 0%,59%{left:calc(100% - 36px);opacity:0;transform:scale(.85)} 64%{left:calc(100% - 36px);opacity:1;transform:scale(1)} 86%{left:0;opacity:1;transform:scale(1)} 92%,100%{left:0;opacity:0;transform:scale(.8)} }
@keyframes billing-receiver { 0%,44%,72%,100%{border-color:#75dfc035;box-shadow:0 16px 40px #061e1b33} 50%,64%{border-color:#75dfc0;box-shadow:0 0 36px #75dfc026} }
@keyframes billing-business { 0%,82%{box-shadow:0 16px 40px #061e1b33} 90%,100%{box-shadow:0 0 0 3px #75dfc0,0 0 36px #75dfc026} }
@keyframes billing-process { 0%,47%,66%,100%{opacity:0;transform:scaleX(.6)} 50%,62%{opacity:1;transform:scaleX(1)} }
@keyframes billing-step-one { 0%,30%{color:#75dfc0} 44%,100%{color:#b0cbbf} }
@keyframes billing-step-two { 0%,24%,72%,100%{color:#b0cbbf} 34%,60%{color:#75dfc0} }
@keyframes billing-step-three { 0%,64%{color:#b0cbbf} 76%,100%{color:#75dfc0} }
@media(max-width:600px) {
    html body.login-screen #splash.login-transition { padding:24px 20px; }
    html body.login-screen #splash.login-transition::before { inset:12px; border-radius:18px; }
    .login-transition-card h2 { font-size:26px; }
    .login-transition-card > p { font-size:12px; }
    .billing-flow { grid-template-columns:94px minmax(60px,1fr) 94px; margin:40px auto 24px; }
    .billing-node-card { height:104px; border-radius:12px; }
    html body.login-screen .login-transition-card .system-brand-logo { width:80px; }
    .billing-connection { height:104px; margin:0 7px; }
    .billing-lane-out { top:28px; }
    .billing-lane-back { top:78px; }
    .billing-packet-out { top:8px; }
    .billing-packet-back { top:58px; }
    .billing-lane span { font-size:8px; letter-spacing:-.02em; }
    .billing-lane-out span { font-size:0; }
    .billing-lane-out span::after { content:'Factura →'; font-size:8px; }
    .billing-lane-back span { font-size:0; }
    .billing-lane-back span::after { content:'← Respuesta'; font-size:8px; }
    .billing-node > strong { font-size:12px; }
    .billing-node > span { font-size:9px; }
    .billing-flow-steps { gap:16px; font-size:10px; }
    .billing-flow-steps span { gap:5px; }
}
@media(max-width:900px) {
    html body.login-screen .login-page { display:flex; min-height:100svh; padding:32px 20px; }
    .login-story { display:none; }
    html body.login-screen .login-card { padding:24px 0; max-width:390px; }
    html body.login-screen .login-card-header .brand-login { display:block; width:165px; background:none; padding:0; margin:0 0 36px; }
    html body.login-screen .login-card-header h1 { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) {
    html body.login-screen *, html body.login-screen *::before, html body.login-screen *::after { animation:none !important; transition:none !important; }
    .billing-packet { display:none; }
}