*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;background:#f7f6f2;color:#30312e;font:15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{width:100%;max-width:430px;padding:38px;background:#f3f1ec;border:1px solid #e3e0d8;border-radius:20px;box-shadow:0 18px 70px #30312310}.mark{display:grid;place-items:center;background:#a65c43;color:white;width:50px;height:50px;border-radius:14px;font-weight:750}.eyebrow{font-size:11px;letter-spacing:2px;color:#8e614e;font-weight:700;margin-top:25px}h1{font-size:29px;letter-spacing:-1px}p{line-height:1.6;color:#777871}form{margin:28px 0}label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}input{width:100%;padding:13px;border:1px solid #dcd7cb;border-radius:8px;font:16px inherit}input:focus{outline:2px solid #a6b58a;outline-offset:2px}button{width:100%;border:0;background:#a65c43;color:white;padding:14px;border-radius:8px;font:600 14px inherit;margin-top:20px;cursor:pointer}button:disabled{opacity:.6}small{color:#777871;font-size:11px}#error{color:#ba4357;font-size:13px}@media(max-width:450px){main{padding:27px}}
input{margin-bottom:18px}small{display:block;line-height:1.6;margin-top:8px}

.password-field{position:relative;display:block;width:100%}.password-field input{padding-right:52px!important;margin-bottom:0!important}.password-field .password-toggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:10px;margin:0;border:0;border-radius:7px;background:transparent;color:#68776c;display:grid;place-items:center;cursor:pointer}.password-toggle:hover{background:#87977818}.password-toggle:focus-visible{outline:2px solid #a85d40;outline-offset:1px}.password-toggle .eye-slash{display:none}.password-toggle[aria-pressed="true"] .eye-slash{display:block}

form>.password-field{margin-bottom:18px}

/* Misma paleta crema, oliva y terracota del panel interno. */
:root{color-scheme:light}.mark{background:#343a34}input{background:#f0eee7;color:#3e4437}button[type="submit"]:hover{background:#8e4933}button:focus-visible{outline:2px solid #a6b58a;outline-offset:3px}input:autofill{background:#f0eee7;color:#3e4437}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:#3e4437;-webkit-box-shadow:0 0 0 1000px #f0eee7 inset;caret-color:#3e4437}

.login-logo{display:block;width:96px;height:auto;border-radius:20px;box-shadow:0 6px 20px #693b2914}main{background:#fffdf8;padding:36px;border-radius:24px}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:32px;line-height:1.15;letter-spacing:-.7px}input{min-height:48px;font-family:inherit;font-size:16px}button[type=submit]{min-height:48px;border-radius:12px;font-family:inherit;font-size:15px}form{margin:24px 0}main>p:not(.eyebrow){font-size:14px}.eyebrow{margin-top:20px}small{color:#62665c}@media(max-width:450px){body{padding:18px}main{padding:26px}.login-logo{width:80px}h1{font-size:29px}}

/* Marca sin recuadro de color; espacios seguros de la aplicación móvil. */
.login-logo{width:96px;height:auto;max-width:100%;border-radius:0;box-shadow:none;mix-blend-mode:multiply;margin:0 auto 16px}main>h1{text-align:center}body{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
@media(max-width:450px){body{align-items:start}main{margin:auto 0;padding:24px}.login-logo{width:80px;margin-bottom:12px}h1{font-size:27px;margin:12px 0}form{margin:20px 0}input,button[type=submit]{min-height:48px}main>p{margin:12px 0}}
@media(max-height:650px){body{align-items:start}.login-logo{width:64px}main{padding:20px}h1{font-size:25px;margin:10px 0}form{margin:16px 0}}

/* Emblema flotante con órbitas en perspectiva y luz ambiental. */
body{position:relative;isolation:isolate;overflow-x:clip;background:#f5f3ed}
main{position:relative;z-index:1;background:radial-gradient(ellipse at 50% 0%,#e8eddf80,transparent 45%),#fffdf8;box-shadow:0 24px 80px #343a3414,0 2px 8px #343a3405;animation:login-appear .8s ease-out both}
.login-ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 15% 20%,#cdd8ba55,transparent 50%),radial-gradient(ellipse at 90% 80%,#dec4b844,transparent 50%)}
.login-ambient span{position:absolute;width:clamp(280px,45vw,650px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#a6b58a38,transparent 68%);animation:login-drift 14s ease-in-out infinite alternate}
.login-ambient span:nth-child(1){top:-12%;left:-12%}
.login-ambient span:nth-child(2){right:-15%;bottom:-15%;background:radial-gradient(circle,#a65c432a,transparent 70%);animation-delay:-8s;animation-duration:19s}
.login-ambient span:nth-child(3){top:32%;right:8%;width:280px;background:radial-gradient(circle,#c4a46a30,transparent 70%);animation-delay:-11s}
.login-brand{position:relative;isolation:isolate;width:200px;height:168px;margin:-8px auto 12px;display:grid;place-items:center;pointer-events:none;transform:perspective(650px) translate(var(--brand-x,0px),var(--brand-y,0px)) rotateX(var(--brand-rx,0deg)) rotateY(var(--brand-ry,0deg));transition:transform .25s ease-out}
.login-scene{position:absolute;inset:0}
.login-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,#c4d4ad88 0%,#dce4c64a 38%,transparent 68%);animation:login-breathe 5s ease-in-out infinite}
.login-medallion{position:relative;z-index:2;width:110px;height:110px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fffef9 20%,#ede8d9);border:1px solid #c8b88d;box-shadow:inset 0 0 0 5px #fffdf890,inset 0 -4px 10px #9d825d15,0 12px 24px #42533628,0 0 0 5px #fffdf855;animation:login-float 5s ease-in-out infinite;overflow:hidden}
.login-medallion::after{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 35%,#ffffffaa 48%,transparent 62%);transform:translateX(-100%);animation:login-shine 8s ease-in-out infinite}
.login-brand .login-logo{width:84px;margin:0;animation:none;mix-blend-mode:multiply}
.login-track{position:absolute;inset:9px;border-radius:50%;z-index:3}
.track-one{transform:rotate(-28deg) scaleY(.56)}
.track-two{transform:rotate(36deg) scaleY(.72);inset:4px;z-index:1}
.track-three{transform:rotate(-68deg) scaleY(.78);inset:18px;z-index:1}
.login-orbit{position:absolute;inset:0;border-radius:50%;border:1.5px solid #a5b58b70;border-top-color:#af7b4b;border-right-color:#cbb988;box-shadow:0 0 9px #c3ad7125;animation:login-orbit 10s linear infinite}
.track-two .login-orbit{border-color:#83977345;border-bottom-color:#748765;animation-duration:16s;animation-direction:reverse}
.track-three .login-orbit{border-style:dashed;border-color:#b8966b50;animation-duration:24s}
.login-orbit::before{content:"";position:absolute;top:calc(50% - 4px);right:-4px;width:8px;height:8px;border-radius:50%;background:#b57e4f;box-shadow:0 0 0 4px #c4a36b22,0 0 14px #d0aa73}
.track-two .login-orbit::before{background:#708461;width:6px;height:6px;box-shadow:0 0 0 4px #a6b58a22}
.track-three .login-orbit::before{width:4px;height:4px;background:#c9ae7c}
.login-plinth{position:absolute;bottom:3px;left:50%;width:95px;height:12px;margin-left:-47.5px;border-radius:50%;background:radial-gradient(ellipse,#64764f28,transparent 70%);animation:login-shadow 5s ease-in-out infinite}
.login-particles{position:absolute;inset:0}
.login-particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#a58150;box-shadow:0 0 8px #d9bc8a;animation:login-sparkle 4s ease-in-out infinite}
.login-particles i:nth-child(1){left:12%;top:18%}
.login-particles i:nth-child(2){right:9%;top:32%;animation-delay:-1.2s}
.login-particles i:nth-child(3){left:20%;bottom:18%;animation-delay:-2.6s;background:#7f9468}
.login-particles i:nth-child(4){right:22%;bottom:12%;animation-delay:-.7s}
.login-particles i:nth-child(5){left:48%;top:3%;animation-delay:-1.8s;width:3px;height:3px}
.login-particles i:nth-child(6){right:1%;bottom:37%;animation-delay:-3s;width:3px;height:3px;background:#7f9468}
main:focus-within .login-medallion{box-shadow:inset 0 0 0 5px #fffdf890,0 12px 24px #42533628,0 0 0 5px #fffdf855,0 0 30px #a6b58a40}
.is-authenticating .login-orbit{animation-duration:3s}
button[type=submit]{box-shadow:0 5px 12px #a65c431c;transition:background .2s,box-shadow .2s,transform .2s}
button[type=submit]:hover{box-shadow:0 7px 18px #a65c432c;transform:translateY(-1px)}
@keyframes login-float{0%,100%{transform:translateY(3px) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes login-orbit{to{transform:rotate(360deg)}}
@keyframes login-breathe{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}}
@keyframes login-shadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.8);opacity:.45}}
@keyframes login-sparkle{0%,100%{opacity:.25;transform:translateY(3px) scale(.7)}50%{opacity:1;transform:translateY(-7px) scale(1.15)}}
@keyframes login-shine{0%,65%{transform:translateX(-100%)}90%,100%{transform:translateX(100%)}}
@keyframes login-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(55px,-45px) scale(1.15)}}
@keyframes login-appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:450px){.login-brand{height:150px;width:182px;margin:-4px auto 8px}.login-medallion{width:102px;height:102px}.login-brand .login-logo{width:78px}}
@media(max-height:650px){.login-brand{width:150px;height:112px;margin:-4px auto 8px}.login-medallion{width:80px;height:80px}.login-brand .login-logo{width:60px}.login-plinth{bottom:-3px}}
@media(prefers-reduced-motion:reduce){main,.login-medallion,.login-medallion::after,.login-orbit,.login-halo,.login-plinth,.login-particles i,.login-ambient span{animation:none}.login-medallion::after{display:none}.login-brand{transform:none;transition:none}button[type=submit]{transition:none}button[type=submit]:hover{transform:none}}