/* Acceso de la interfaz. Por defecto la aplicación no es interactuable hasta
   que la sesión del backend se haya validado. */
body.auth-locked { overflow: hidden; }
body.auth-locked .app-shell { visibility: hidden; pointer-events: none; user-select: none; }
/* Una sesión válida debe retirar por completo la capa de acceso. Sin esta
   regla el backend autentica correctamente, pero el formulario se quedaría
   superpuesto sobre la aplicación. */
body.app-authenticated .auth-gate { display: none; }
.auth-gate { position: fixed; inset: 0; z-index: 10000; min-height: 100svh; display: grid; grid-template-columns: minmax(280px, .95fr) minmax(420px, 1.05fr); background: #fbfaf8; color: #28343e; }
.auth-gate-art { position: relative; overflow: hidden; min-height: 360px; display: grid; place-items: center; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.95), transparent 31%), radial-gradient(circle at 80% 78%, rgba(242,182,207,.47), transparent 38%), linear-gradient(135deg, #dcd5ee, #edf5ef 52%, #f7dde6); }
.auth-gate-art:before,.auth-gate-art:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(91,73,127,.17); }
.auth-gate-art:before { width: min(49vw, 700px); aspect-ratio: 1; }
.auth-gate-art:after { width: min(34vw, 470px); aspect-ratio: 1; border-color: rgba(202,107,145,.26); }
.auth-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.74); }
.orbit-one { width: 72%; aspect-ratio: 1; transform: rotate(-20deg); }
.orbit-two { width: 42%; aspect-ratio: 1; transform: rotate(38deg); border-color: rgba(107,87,151,.28); }
.auth-bottle { position: relative; z-index: 1; width: 130px; height: 190px; display: grid; place-items: center; border: 10px solid rgba(255,255,255,.48); border-radius: 37% 37% 28% 28%; background: linear-gradient(145deg, rgba(115,94,160,.86), rgba(235,163,185,.74)); box-shadow: 0 28px 70px rgba(76,59,106,.24), inset 15px 12px 18px rgba(255,255,255,.26); color: #fff; font-size: 46px; }
.auth-bottle:before { content: ""; position: absolute; width: 54px; height: 27px; top: -32px; border-radius: 7px 7px 2px 2px; background: rgba(67,54,92,.72); }
.auth-card { width: min(100%, 510px); align-self: center; justify-self: center; padding: 52px 45px; box-sizing: border-box; }
.auth-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 52px; font: 700 24px "Playfair Display", serif; color: #334a61; }
.auth-brand .brand-mark { width: 29px; height: 29px; margin: 0; display: grid; place-items: center; border-radius: 9px; background: #304c65; color: white; font: 700 20px/1 "DM Sans", sans-serif; }
.auth-card h1 { margin: 0 0 9px; font: 700 34px/1.1 "Playfair Display", serif; letter-spacing: -1px; }
.auth-intro { margin: 0 0 27px; color: #71808a; font-size: 14px; line-height: 1.5; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; color: #51606a; }
.auth-form input { width: 100%; box-sizing: border-box; border: 1px solid #d9dfe2; border-radius: 11px; padding: 12px 13px; background: #fff; color: #28343e; font: 14px "DM Sans", sans-serif; }
.auth-form input:focus { outline: 3px solid rgba(148,125,193,.23); border-color: #8d75bd; }
.auth-form .checkout { margin-top: 4px; }
.auth-message { min-height: 18px; margin: -3px 0 0; color: #a84d68; font-size: 12px; line-height: 1.45; }
.auth-message.success { color: #34745a; }
.auth-link { display: block; margin: 22px auto 0; border: 0; background: none; color: #705794; font: 600 12px "DM Sans", sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-setup-form { margin-top: 24px; padding: 18px; border: 1px solid #ddd5ed; border-radius: 15px; background: #f8f5fd; }
.auth-setup-note,.auth-security-note { margin: 0; color: #71808a; font-size: 11px; line-height: 1.5; }
.auth-setup-actions { display: flex; gap: 9px; align-items: center; }
.auth-setup-actions .checkout { width: auto; flex: 1; }
.auth-security-note { margin-top: 28px; padding-top: 17px; border-top: 1px solid #e7e4df; }
.auth-session-controls { display: grid; gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.auth-session-controls span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.auth-session-controls button { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: var(--panel); color: var(--ink); font: 600 11px inherit; cursor: pointer; }
.auth-session-controls button:hover { border-color: var(--lilac); background: var(--lilac-pale); }
@media (max-width: 800px) { .auth-gate { grid-template-columns: 1fr; overflow: auto; } .auth-gate-art { min-height: 180px; max-height: 230px; } .auth-bottle { transform: scale(.65); } .auth-card { padding: 28px 25px 42px; align-self: start; } .auth-brand { margin-bottom: 30px; } }