/* app.rizastream.com · pantalla de entrada con el diseño de /acceso del sistema (los Rizian).
   Colores y tipografías tomados del sistema: fondo #0a0c10, panel #161a22, marca cian #06b6d4,
   degradado #0054cc→#0093ff, Fraunces (títulos) + Inter (texto). Sin scripts inline (CSP). */
:root{
  --bg:#0a0c10; --panel:#161a22; --brand:#06b6d4; --brand-light:rgba(6,182,212,.08); --brand-glow:rgba(6,182,212,.27);
  --grad:linear-gradient(135deg,#0054cc,#0093ff); --t1:#f4f7fb; --t2:#c2ccd9; --tm:#8a97a8;
  --hover:rgba(255,255,255,.05); --borde:rgba(255,255,255,.06);
  --display:"Fraunces","Playfair Display",Georgia,serif; --texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--texto);color:var(--t1);background:var(--bg);
  background-image:radial-gradient(900px 600px at 18% 22%,rgba(6,182,212,.10),transparent 70%),
                   radial-gradient(800px 600px at 55% 95%,rgba(0,84,204,.14),transparent 70%),
                   radial-gradient(500px 400px at 40% 50%,rgba(249,115,22,.04),transparent 70%);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.escena{min-height:100vh;display:flex}

/* ---------- Izquierda: los Rizian ---------- */
.heroe{display:none;flex:1;flex-direction:column;justify-content:space-between;padding:48px 64px}
.logo{height:48px;width:auto;align-self:flex-start}
.centro{max-width:36rem}
.antetitulo{display:flex;align-items:center;gap:8px;margin:0 0 24px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.antetitulo span{display:inline-block;width:24px;height:1px;background:var(--brand)}
.frase{display:flex;align-items:center;gap:32px;margin-bottom:32px}
.frase h1{flex:1;margin:0;font-family:var(--display);font-weight:600;font-size:48px;line-height:1.05;letter-spacing:-.015em;color:var(--t1)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mascota{position:relative;flex:none;margin:0;text-align:center}
.mascota img{position:relative;width:110px;height:auto}
.aura{position:absolute;left:50%;top:45%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;
  background:radial-gradient(circle,#f97316 0%,transparent 68%);opacity:.35;pointer-events:none}
.mascota figcaption{position:relative;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f97316}
.texto{max-width:24rem;margin:0 0 40px;font-size:16px;font-weight:500;line-height:1.6;color:var(--tm)}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;border:1px solid var(--borde);background:var(--hover);
  font-size:12px;font-weight:600;color:var(--t2);transition:background-color .5s,border-color .5s,box-shadow .5s,color .5s,transform .3s}
.chips li img{width:30px;height:auto}
.chips li.activo{background:var(--brand-light);border-color:var(--brand);box-shadow:0 4px 20px var(--brand-glow);color:var(--brand);transform:scale(1.06)}
.firma{margin:0;font-size:12px;font-weight:500;color:var(--tm)}

/* ---------- Derecha: inicio de sesión ---------- */
.panel{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;padding:48px 24px;background:var(--panel);box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.costura{display:none}
.caja{width:100%;max-width:400px;margin:0 auto}
.movil-cabeza{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:36px}
.logo-movil{height:52px;width:auto}
.zorro-movil{width:64px;height:auto;filter:drop-shadow(0 0 22px rgba(249,115,22,.35))}
h2{margin:0;font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.015em;color:var(--t1)}
.sub{margin:6px 0 32px;font-size:14px;font-weight:500;color:var(--tm)}
.boton{display:flex;justify-content:center;min-height:44px}
.estado{min-height:22px;margin:16px 0 0;font-size:14px;font-weight:600;text-align:center;color:var(--brand)}
.estado.error{color:#f87171}
.candado{display:flex;align-items:center;justify-content:center;gap:8px;margin:28px 0 0;padding:12px;border-radius:16px;border:1px solid var(--borde);background:var(--hover);
  font-size:12px;font-weight:600;color:var(--t2);text-align:center}
.candado svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pie{margin:28px 0 0;font-size:11px;color:var(--tm);text-align:center}

@media (min-width:768px){.panel{padding:48px 56px}}
@media (min-width:1024px){
  .heroe{display:flex}
  .panel{width:480px;flex:none}
  .movil-cabeza{display:none}
  .costura{display:block;position:absolute;left:0;top:16.66%;width:1px;height:66.66%;background:linear-gradient(to bottom,transparent,var(--brand),transparent);box-shadow:0 0 28px 2px var(--brand-glow)}
  .panel::before{content:"";position:absolute;top:0;bottom:0;left:-160px;width:160px;pointer-events:none;background:linear-gradient(to right,transparent,rgba(6,182,212,.09))}
}
@media (min-width:1280px){.panel{width:520px}}
@media (prefers-reduced-motion:reduce){.chips li{transition:none}}