/* Login de Zenon BYP — mismo diseño que ADA: órbita de módulos | tarjeta con marca y formulario */
:root { --s-black:#1f1f22; --s-black-2:#29292d; --s-black-3:#35353a; --s-yellow:#FFC400; }
body.auth-body { margin:0; min-height:100vh; background:var(--s-black); display:grid; place-items:center; padding:16px; font-family:'Nunito Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.auth-panel { display:grid; grid-template-columns:1.1fr 1fr; width:min(900px,100%); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.auth-orbit { order:-1; background:var(--s-black-2); display:grid; place-items:center; padding:14px 12px; overflow:hidden; background-image:radial-gradient(circle at 50% 50%, rgba(255,196,0,.16), transparent 62%); }
.auth-orbit .orbit { --stage:min(250px,28vw); width:var(--stage); height:var(--stage); position:relative; margin:0 auto; display:grid; place-items:center; }
.orbit-ring { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.16); }
.orbit-ring.r1 { width:100%; height:100%; }
.orbit-ring.r2 { width:68%; height:68%; border-style:dashed; border-color:rgba(255,255,255,.09); }
.orbit-ring.r3 { width:37%; height:37%; }
.orbit-halo { position:absolute; width:88%; height:88%; border-radius:50%; filter:blur(28px); animation:orb-spin 40s linear infinite;
    background:conic-gradient(from 0deg, rgba(255,196,0,0), rgba(255,196,0,.26), rgba(255,196,0,.08), rgba(255,196,0,.2), rgba(255,196,0,0)); }
.orbit-core { position:absolute; width:40%; height:40%; padding:6px; border-radius:50%; display:grid; place-items:center; text-align:center; color:#1a1204; font-weight:800; line-height:1.15;
    background:radial-gradient(circle at 34% 30%, #ffd04d, #FFC400 45%, #b5830a 100%); box-shadow:0 0 60px -6px rgba(255,196,0,.55), inset 0 -8px 22px rgba(0,0,0,.3); animation:orb-bob 7s ease-in-out infinite; }
.orbit-core span { display:block; color:#111; font-weight:800; font-size:calc(var(--stage) * .056); line-height:1.05; letter-spacing:-.02em; text-transform:uppercase; }
.orbit-core span b { color:#fff; font-weight:800; text-shadow:0 1px 6px rgba(0,0,0,.25); margin-left:.08em; }
.orbit-layer { position:absolute; inset:0; pointer-events:none; will-change:transform; }
.orbit-layer.a { animation:orb-spin 52s linear infinite; }
.orbit-layer.b { animation:orb-spin 38s linear infinite reverse; }
.orbit-node { position:absolute; top:50%; left:50%; transform:rotate(var(--t)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--t))); }
.chip-rot { display:block; position:absolute; left:0; top:0; transform-origin:0 0; }
.orbit-layer.a .chip-rot { animation:orb-spin 52s linear infinite reverse; }
.orbit-layer.b .chip-rot { animation:orb-spin 38s linear infinite; }
.orbit-node .chip { transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border-radius:999px; white-space:nowrap; font-size:.7rem; font-weight:700; color:#fff;
    background:rgba(24,24,28,.92); border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 26px -12px rgba(0,0,0,.6); }
.orbit-node .chip i { width:19px; height:19px; flex:0 0 auto; border-radius:6px; display:grid; place-items:center; font-size:.62rem; background:#FFC400; color:#111; box-shadow:0 0 0 1px rgba(255,196,0,.35); }
@keyframes orb-spin { to { transform:rotate(360deg); } }
@keyframes orb-bob { 50% { transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce) { .orbit-layer, .orbit-layer .chip-rot, .orbit-halo, .orbit-core { animation:none; } }

.auth-card { padding:24px 40px 26px; }
.auth-marca { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.08); display:flex; flex-direction:column; gap:5px; }
.auth-marca .brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.04em; font-size:1.3rem; color:var(--s-black); }
.auth-marca .brand b { color:#d99f00; font-weight:800; margin-left:2px; }
.auth-marca .brand-mark { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--s-yellow); color:var(--s-black); font-weight:800; font-size:.95rem; letter-spacing:0; }
.auth-marca p { margin:0; color:#6b6b66; font-size:.9rem; }
.auth-card h1 { margin-bottom:.6rem; }
.auth-card .form-label { font-weight:600; font-size:.85rem; margin-bottom:.25rem; }
.auth-card .form-control { border-color:#e6e6e3; font-size:.875rem; }
.auth-card .form-control:focus { border-color:var(--s-yellow); box-shadow:0 0 0 .2rem rgba(255,196,0,.14); }
.btn-pf { background:var(--s-yellow); border:0; border-radius:999px; color:var(--s-black); font-weight:700; padding:.55rem 1rem; }
.btn-pf:hover, .btn-pf:focus { background:var(--s-black-3); color:var(--s-yellow); }
.auth-links { text-align:center; margin-top:.8rem; font-size:.82rem; }
.auth-links a { color:#8a6a00; text-decoration:none; font-weight:600; }
.auth-links a:hover { text-decoration:underline; }
.auth-pie { margin-top:.9rem; text-align:center; font-size:.72rem; color:#8a8a85; }
@media (max-width:900px) { .auth-panel { grid-template-columns:1fr; width:min(460px,100%); } .auth-orbit .orbit { --stage:min(290px,74vw); } .orbit-node.opt { display:none; } .auth-card { padding:24px 24px 26px; } }

/* Cierre de sesión: tarjeta compacta */
.auth-panel.salida { grid-template-columns:1fr; width:min(400px,100%); text-align:center; }
.salida .auth-card { padding:28px 32px 24px; }
.salida .auth-marca { align-items:center; border-bottom:0; margin-bottom:6px; padding-bottom:0; }
.salida .salida-ico { width:52px; height:52px; margin:6px auto 10px; border-radius:50%; display:grid; place-items:center; background:rgba(255,196,0,.16); color:#b88600; font-size:1.3rem; }
.salida h1 { font-size:1.15rem; font-weight:800; margin:0 0 4px; }
.salida .salida-msg { color:#6b6b66; font-size:.86rem; margin:0 0 16px; }
.salida-datos { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; font-size:.76rem; color:#57574f; background:#fafaf8; border:1px solid #efefec; border-radius:10px; padding:9px 12px; margin-bottom:16px; }
.salida-datos span { display:inline-flex; align-items:center; gap:6px; }
.salida-datos i { color:#b88600; font-size:.72rem; }
.salida .progress { height:3px; background:#efefec; border-radius:3px; margin:12px 0 4px; }
.salida .progress-bar { background:var(--s-yellow); transition:width 1s linear; }
.salida .salida-cuenta { font-size:.72rem; color:#8a8a85; }