/* Entrada de OWI+ Web: un muro de carátulas en movimiento y una tarjeta de vidrio. Va después de app.css. Sigue el modo claro/oscuro del equipo. */
:root{--w-bg:#dfe6f2;--w-shade:radial-gradient(ellipse at 50% 50%,rgba(238,242,248,.35) 0,rgba(238,242,248,.78) 66%,#e9eef6 100%);--w-card:rgba(255,255,255,.74);--w-card-bd:rgba(255,255,255,.85);--w-shadow:0 30px 80px rgba(16,26,51,.22),inset 0 1px 0 rgba(255,255,255,.9);--w-ink:#17233a;--w-sub:#4b5b74;--w-chip:rgba(23,35,58,.07);--w-chip-bd:rgba(23,35,58,.14);--w-field:rgba(255,255,255,.85);--w-field-bd:rgba(23,35,58,.2);--w-field-focus:#fff;--w-label:#5b6b82;--w-eye:#b84f00;--w-link:#1F63E0;--w-help:#5b6b82;--w-or:#5b6b82;--w-line:rgba(23,35,58,.16);--w-err-bg:rgba(198,47,47,.12);--w-err-bd:rgba(198,47,47,.4);--w-err:#b3261e;--w-mark-t:rgba(23,35,58,.2);--w-mark-f:#1F63E0;--w-ghost:rgba(255,255,255,.7);--w-ghost-bd:rgba(23,35,58,.22);--w-focus:#17233a;--w-em:linear-gradient(90deg,#e0620d,#ff7a1a);--w-sheet:rgba(255,255,255,.88);--w-shade-m:linear-gradient(180deg,rgba(238,242,248,.1) 0,rgba(238,242,248,.3) 34%,rgba(238,242,248,.92) 60%,#e9eef6 100%)}
@media(prefers-color-scheme:dark){:root{--w-bg:#050b18;--w-shade:radial-gradient(ellipse at 50% 50%,rgba(5,11,24,.28) 0,rgba(5,11,24,.72) 66%,#050b18 100%);--w-card:rgba(14,24,44,.66);--w-card-bd:rgba(255,255,255,.16);--w-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);--w-ink:#fff;--w-sub:#b4c3dc;--w-chip:rgba(255,255,255,.1);--w-chip-bd:rgba(255,255,255,.16);--w-field:rgba(255,255,255,.07);--w-field-bd:rgba(255,255,255,.16);--w-field-focus:rgba(255,255,255,.11);--w-label:#9fb4d6;--w-eye:#ffb36b;--w-link:#9fc4ff;--w-help:#8ea5c9;--w-or:#9fb4d6;--w-line:rgba(255,255,255,.16);--w-err-bg:rgba(208,58,58,.22);--w-err-bd:rgba(255,140,140,.5);--w-err:#ffb4b4;--w-mark-t:rgba(255,255,255,.25);--w-mark-f:#fff;--w-ghost:rgba(255,255,255,.08);--w-ghost-bd:rgba(255,255,255,.22);--w-focus:#fff;--w-em:linear-gradient(90deg,#ffb36b,#ff7a1a);--w-sheet:rgba(14,24,44,.7);--w-shade-m:linear-gradient(180deg,rgba(5,11,24,.1) 0,rgba(5,11,24,.3) 34%,rgba(5,11,24,.92) 60%,#050b18 100%)}}
.wall{position:fixed;inset:-22% -12%;z-index:0;transform:rotate(-9deg);display:grid;gap:16px;align-content:center;background:var(--w-bg);--tw:150px;pointer-events:none}
.wall .row{overflow:hidden}.wall .strip{display:flex;gap:16px;width:max-content;animation:wall-left 100s linear infinite}
.wall .r1 .strip,.wall .r3 .strip{animation-name:wall-right;animation-duration:120s}.wall .r2 .strip{animation-duration:140s}
.wall i{flex:none;width:var(--tw);aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.55);display:block;background:#12203a}
.wall img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes wall-left{to{transform:translateX(-50%)}}@keyframes wall-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.wall-shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--w-shade)}
/* the wall only lives behind the entrance screens; once inside the app the page paints itself again */
body:has(#shell:not([hidden])) .wall,body:has(#shell:not([hidden])) .wall-shade{display:none}
#shell{position:relative;z-index:2;background:var(--bg)}
.login-screen,.request-screen{position:relative;z-index:2;min-height:100vh;color:var(--w-ink)}
.login-screen{display:grid;grid-template-columns:1fr;place-items:center;padding:20px}
.login-form{width:min(480px,100%);max-width:none;margin:0;display:block;padding:30px 28px 24px;border-radius:30px;background:var(--w-card);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--w-card-bd);box-shadow:var(--w-shadow)}
.login-form .mark{display:block;width:200px;height:auto;margin:0 0 14px}
.mark .t,.mark .tp,.mark .f,.mark .fp{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.mark .t{stroke:var(--w-mark-t)}.mark .tp{stroke:rgba(255,122,26,.4)}.mark .f{stroke:var(--w-mark-f)}.mark .fp{stroke:#FF7A1A}
.login-form h1{margin:0 0 4px;font-size:36px;line-height:1.08;letter-spacing:-.02em;color:var(--w-ink)}
.login-form h1 em{font-style:normal;background:var(--w-em);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-form .sub{margin:0 0 16px;color:var(--w-sub)}
.login-form .chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.login-form .chips span{padding:5px 12px;border-radius:99px;background:var(--w-chip);border:1px solid var(--w-chip-bd);font-size:12px;font-weight:700;color:var(--w-ink)}
.login-form .fld{position:relative;display:block;margin:0 0 12px}
.login-form .fld input{display:block;margin:0;width:100%;height:58px;min-height:58px;padding:22px 16px 6px;border-radius:16px;border:1.5px solid var(--w-field-bd);background:var(--w-field);color:var(--w-ink);font-size:17px}
.login-form .fld>span{position:absolute;left:17px;top:9px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--w-label);pointer-events:none}
.login-form .fld input:focus{outline:none;border-color:#FF7A1A;background:var(--w-field-focus);box-shadow:0 0 0 4px rgba(255,122,26,.22)}
.login-form .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-height:0;border:0;background:transparent;color:var(--w-eye);font-weight:800;padding:10px;border-radius:10px}
.login-form .go{width:100%;margin-top:6px;min-height:58px;border-radius:16px;font-size:18px;background:linear-gradient(135deg,#FF9A3D,#FF6A00);color:#1b1206;box-shadow:0 12px 30px rgba(255,122,26,.42)}
.login-form button.outline{min-height:58px;border-radius:16px;font-size:16px;background:var(--w-ghost);border:1.5px solid var(--w-ghost-bd);box-shadow:none;color:var(--w-ink)}
.login-form button:focus-visible,.login-form a:focus-visible{outline:4px solid var(--w-focus);outline-offset:3px}
.login-form .error{margin:12px 0 0;padding:11px 14px;border-radius:14px;background:var(--w-err-bg);border:1px solid var(--w-err-bd);color:var(--w-err);font-weight:600}.login-form .error:empty{display:none}
.login-form .or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--w-or);font-size:12px;font-weight:800;letter-spacing:.14em}.login-form .or:before,.login-form .or:after{background:var(--w-line)}
.login-form .install-link{display:block;text-align:center;margin:14px 0 0;color:var(--w-link);font-weight:800}
.login-form .help{display:block;margin:12px 0 0;color:var(--w-help);font-size:13px;text-align:center}
/* «Pide tu acceso»: the same dark glass over the same wall, so the words stay readable */
.request-screen{background:transparent;place-items:center;padding:20px}
.request-wrap{color:var(--w-ink);border-radius:30px;background:var(--w-sheet);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--w-card-bd);box-shadow:var(--w-shadow)}
.request-wrap h1,.request-wrap h2,.request-wrap label,.request-wrap .brand{color:var(--w-ink)}.request-wrap .brand span{color:var(--orange)}.request-wrap .muted,.request-wrap small{color:var(--w-sub)}
@media(prefers-color-scheme:dark){.request-wrap{--ink:#f3f6fc;--muted:#b4c3dc;--field:rgba(255,255,255,.08);--panel:rgba(255,255,255,.1);--line:rgba(255,255,255,.2);--chip:rgba(255,255,255,.12);--blue:#9fc4ff}.request-wrap input{color:#fff}}
.request-wrap .req-card{background:#fff}
@media(max-width:599px){
 .login-screen{place-items:end center;padding:0}.login-form{width:100%;border-radius:30px 30px 0 0;padding:26px 20px 24px;border-bottom:0}
 .wall{inset:-6% -30% 44% -30%;align-content:start;gap:12px;--tw:96px}
 .wall-shade{background:var(--w-shade-m)}
 .login-form .mark{width:150px}.login-form h1{font-size:27px}.login-form .sub{margin-bottom:12px}
 .request-screen{padding:0;place-items:start center}.request-wrap{border-radius:0 0 30px 30px;border-top:0}
}
@media(min-width:600px) and (max-width:1000px){.login-form{width:min(560px,100%);padding:40px 38px 30px}.login-form .mark{width:240px}.login-form h1{font-size:40px}.login-form .fld input{height:64px;min-height:64px;font-size:19px}.login-form .go,.login-form button.outline{min-height:64px}.wall{--tw:150px}}
@media(prefers-reduced-motion:reduce){.wall .strip{animation:none}}