/* RBL Monitor - Estilos de las pantallas de acceso (login.php, totp.php). */
 /* ==========================================================================
    Paleta alineada con styles.css (indigo -> cyan = identidad de marca;
    el rojo queda reservado para alertas).
    ========================================================================== */
 :root{
   --bg:#080c18; --bd:rgba(255,255,255,.09); --txt:#eaeefb; --mut:#93a1c0; --dim:#64748b;
   --acc:#6366f1; --acc2:#22d3ee; --bad:#ef4444; --ok:#22c55e;
   --font:'Geist',system-ui,-apple-system,sans-serif;
   --font-display:'Geist',system-ui,sans-serif;
   --font-mono:'Geist Mono',ui-monospace,monospace;
 }
 *{box-sizing:border-box}

 /* ---------- Tipografia ---------------------------------------------------
    Geist (misma superfamilia que Geist Mono, que se usa para la contrasena):
    ligaduras contextuales y cifras tabulares para que los datos alineen.
    ------------------------------------------------------------------------ */
 html{-webkit-text-size-adjust:100%}
 body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;
   background:var(--bg);color:var(--txt);
   font-family:var(--font);font-size:15px;line-height:1.55;font-weight:400;
   font-feature-settings:'calt';font-variant-numeric:tabular-nums;
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
   overflow-x:hidden}

 /* ==========================================================================
    FONDO ANIMADO (capas, de atras hacia adelante)
    ========================================================================== */
 .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}
 /* Viñeta: hunde los bordes y centra la mirada en la card */
 .bg::after{content:'';position:absolute;inset:0;
   background:radial-gradient(125% 95% at 50% 42%,transparent 32%,rgba(3,6,14,.82) 100%)}

 /* 1. Base: profundidad vertical */
 .bg-base{position:absolute;inset:0;
   background:radial-gradient(1300px 700px at 50% -14%,#1d2c56,#0e1630 42%,#070b16 100%)}

 /* 2. Aurora: manchas de marca que derivan lento (el movimiento principal) */
 .aurora span{position:absolute;border-radius:50%;filter:blur(clamp(60px,9vw,110px));
   mix-blend-mode:screen;will-change:transform}
 .aurora .b1{width:min(66vw,660px);aspect-ratio:1;left:-15%;top:-25%;opacity:.55;
   background:radial-gradient(circle,#6366f1,transparent 66%);animation:drift1 26s ease-in-out infinite}
 .aurora .b2{width:min(60vw,600px);aspect-ratio:1;right:-18%;bottom:-26%;opacity:.5;
   background:radial-gradient(circle,#22d3ee,transparent 66%);animation:drift2 31s ease-in-out infinite}
 .aurora .b3{width:min(48vw,480px);aspect-ratio:1;left:52%;top:58%;opacity:.32;
   background:radial-gradient(circle,#8b5cf6,transparent 68%);animation:drift3 38s ease-in-out infinite}
 @keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
   33%{transform:translate3d(70px,50px,0) scale(1.12)}66%{transform:translate3d(26px,96px,0) scale(.95)}}
 @keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
   33%{transform:translate3d(-60px,-42px,0) scale(1.1)}66%{transform:translate3d(-18px,-88px,0) scale(.96)}}
 @keyframes drift3{0%,100%{transform:translate3d(-50%,-50%,0) scale(1)}
   50%{transform:translate3d(-58%,-62%,0) scale(1.18)}}

 /* 3. Rejilla tecnica: textura de panel de monitoreo, difuminada hacia afuera */
 .bg-grid{position:absolute;inset:-2px;
   background-image:linear-gradient(rgba(148,163,196,.14) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(148,163,196,.14) 1px,transparent 1px);
   background-size:clamp(34px,4.5vw,52px) clamp(34px,4.5vw,52px);
   -webkit-mask-image:radial-gradient(74% 64% at 50% 44%,#000 18%,transparent 76%);
           mask-image:radial-gradient(74% 64% at 50% 44%,#000 18%,transparent 76%)}

 /* 4. Radar: anillos + barrido girando + blips que laten (semantica de la app:
       el barrido detecta IPs listadas). Ata con el logo, que es un scope. */
 .radar{position:absolute;left:50%;top:50%;width:min(158vmin,1180px);aspect-ratio:1;
   transform:translate(-50%,-50%);opacity:.55;
   -webkit-mask-image:radial-gradient(circle,#000 26%,transparent 70%);
           mask-image:radial-gradient(circle,#000 26%,transparent 70%)}
 .radar::before{content:'';position:absolute;inset:0;border-radius:50%;
   background:repeating-radial-gradient(circle,transparent 0 66px,rgba(148,163,196,.13) 66px 67px)}
 .radar::after{content:'';position:absolute;inset:0;border-radius:50%;will-change:transform;
   background:conic-gradient(from 0deg,transparent 0 288deg,rgba(99,102,241,.18) 334deg,
     rgba(34,211,238,.30) 357deg,rgba(34,211,238,.05) 360deg);
   animation:sweep 11s linear infinite}
 @keyframes sweep{to{transform:rotate(360deg)}}
 /* Ejes del scope */
 .radar i.ax{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(148,163,196,.1)}
 .radar i.ax.h{left:0;right:0;top:50%;bottom:auto;height:1px;width:auto}
 /* Blips: destellos en posiciones fijas, con retardos distintos */
 .blip{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;border-radius:50%;
   background:var(--c,#22d3ee);box-shadow:0 0 12px 2px var(--c,#22d3ee);opacity:0;
   animation:blip 11s ease-out infinite;animation-delay:var(--d)}
 @keyframes blip{0%{opacity:0;transform:scale(.4)}4%{opacity:.95;transform:scale(1)}
   26%{opacity:0;transform:scale(2.6)}100%{opacity:0}}

 /* 5. Scanline: barrido horizontal lento, apenas perceptible */
 .scanline{position:absolute;left:0;right:0;height:38vh;top:-38vh;will-change:transform;
   background:linear-gradient(180deg,transparent,rgba(99,102,241,.07) 45%,rgba(34,211,238,.09) 72%,transparent);
   animation:scan 14s linear infinite}
 @keyframes scan{to{transform:translateY(calc(100vh + 38vh))}}

 /* 6. Grano: textura fina, saca el look plastico de los degrades */
 .bg-grain{position:absolute;inset:0;opacity:.26;mix-blend-mode:overlay;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size:160px 160px}

 /* ==========================================================================
    CARD
    ========================================================================== */
 .card{position:relative;z-index:1;width:100%;max-width:404px;padding:34px 32px 26px;
   border-radius:22px;border:1px solid var(--bd);
   background:linear-gradient(168deg,rgba(25,35,64,.84),rgba(12,18,35,.93));
   -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
   box-shadow:0 34px 90px -22px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03) inset;
   animation:rise .55s cubic-bezier(.22,1,.36,1) both}
 @keyframes rise{from{opacity:0;transform:translateY(16px) scale(.982)}}
 /* Borde en gradiente de marca (si el navegador no soporta mask, queda el borde plano) */
 .card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
   background:linear-gradient(150deg,rgba(99,102,241,.9),rgba(34,211,238,.55) 40%,transparent 68%);
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
   -webkit-mask-composite:xor;mask-composite:exclude}
 /* Highlight superior: da volumen al vidrio */
 .card::after{content:'';position:absolute;left:14%;right:14%;top:-1px;height:1px;pointer-events:none;
   background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}

 /* ---------- Encabezado: marca -> eyebrow -> titulo -> bajada -------------- */
 .brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
 .brand img{width:36px;height:36px;filter:drop-shadow(0 4px 16px rgba(99,102,241,.55))}
 .brand b{font-family:var(--font-display);font-size:1.16rem;font-weight:700;letter-spacing:-.022em}
 .brand span{background:linear-gradient(92deg,var(--acc),var(--acc2));-webkit-background-clip:text;
   background-clip:text;color:transparent}
 .eyebrow{display:flex;align-items:center;gap:7px;
   font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--acc2);
   font-variant-numeric:normal;margin-bottom:9px}
 .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);
   box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);animation:live 2.4s ease-in-out infinite}
 @keyframes live{50%{box-shadow:0 0 0 6px transparent}}
 h1{margin:0 0 7px;font-family:var(--font-display);font-weight:700;
   font-size:clamp(1.45rem,1.15rem + 1.3vw,1.72rem);line-height:1.18;letter-spacing:-.03em;
   text-wrap:balance}
 .sub{color:var(--mut);font-size:.875rem;line-height:1.55;margin:0 0 4px;max-width:34ch;text-wrap:pretty}

 /* ---------- Campos ------------------------------------------------------- */
 label{display:block;margin:18px 0 7px;
   font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
 input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);
   background:linear-gradient(#0a1120,#0d1526);color:var(--txt);
   font-family:var(--font);font-size:.94rem;letter-spacing:.005em;
   box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
   transition:border-color .18s,box-shadow .18s,background .18s}
 input::placeholder{color:var(--dim);letter-spacing:.02em}
 input:hover{border-color:rgba(255,255,255,.17)}
 input:focus{outline:none;border-color:transparent;background:linear-gradient(#0b1324,#101a30);
   box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 72%,transparent),0 0 26px -5px rgba(99,102,241,.6)}
 input[type=password]{font-family:var(--font-mono);letter-spacing:.08em}
 /* Autofill de Chrome: evita el amarillo y conserva el tema oscuro */
 input:-webkit-autofill,input:-webkit-autofill:focus{
   -webkit-text-fill-color:var(--txt);caret-color:var(--txt);
   -webkit-box-shadow:0 0 0 1000px #0d1526 inset,0 1px 0 rgba(255,255,255,.04) inset}

 /* ---------- Boton -------------------------------------------------------- */
 button{position:relative;overflow:hidden;width:100%;margin-top:24px;padding:12.5px;border:0;
   border-radius:12px;cursor:pointer;color:#fff;
   font-family:var(--font);font-size:.94rem;font-weight:600;letter-spacing:.012em;
   background:linear-gradient(96deg,var(--acc),#4f8ef7 54%,var(--acc2));background-size:170% 100%;
   box-shadow:0 12px 28px -11px rgba(99,102,241,.9);
   transition:background-position .55s,box-shadow .22s,transform .12s}
 button:hover{background-position:100% 0;box-shadow:0 16px 34px -11px rgba(34,211,238,.75)}
 button:active{transform:translateY(1px)}
 button:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
 /* Destello que cruza el boton al pasar el mouse */
 button::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
   background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent)}
 button:hover::after{animation:shine .75s ease}
 @keyframes shine{to{transform:translateX(100%)}}

 /* ---------- Avisos ------------------------------------------------------- */
 .err,.seed{margin-top:16px;padding:11px 13px;border-radius:12px;
   font-size:.83rem;line-height:1.55;border:1px solid transparent;animation:rise .32s ease both}
 .err{background:color-mix(in srgb,var(--bad) 14%,transparent);
   border-color:color-mix(in srgb,var(--bad) 42%,transparent);color:#fca5a5}
 .seed{background:color-mix(in srgb,var(--ok) 12%,transparent);
   border-color:color-mix(in srgb,var(--ok) 36%,transparent);color:#86efac}
 .seed code{display:inline-block;margin-top:2px;background:rgba(0,0,0,.4);padding:3px 7px;border-radius:6px;
   font-family:var(--font-mono);font-size:.9em;letter-spacing:.02em;color:#d1fae5;word-break:break-all}
 .foot{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);text-align:center;
   font-size:.67rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

 @media (max-width:420px){
   .card{padding:28px 22px 22px;border-radius:18px}
 }
 /* Respeta "reducir movimiento": queda todo quieto, sin perder el diseno */
 @media (prefers-reduced-motion:reduce){
   .aurora span,.radar::after,.blip,.scanline,.card,.err,.seed,.eyebrow::before{animation:none}
   .scanline{display:none}
   *{transition:none!important}
 }

/* ==========================================================================
   SEGUNDO FACTOR (totp.php): QR de alta, codigo y codigos de respaldo
   ========================================================================== */
.qr{display:grid;place-items:center;margin:18px auto 4px;width:max-content;padding:12px;
  border-radius:14px;background:#fff;box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.qr svg,.qr img{display:block;width:184px;height:184px}
.steps{margin:14px 0 0;padding-left:20px;color:var(--mut);font-size:.84rem;line-height:1.6}
.steps b{color:var(--txt);font-weight:600}
details.manual{margin-top:10px;font-size:.8rem;color:var(--mut)}
details.manual summary{cursor:pointer;color:var(--acc2)}
details.manual code{display:block;margin-top:7px;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.4);
  font-family:var(--font-mono);font-size:.86rem;letter-spacing:.08em;color:var(--txt);word-break:break-all;user-select:all}
input.code{font-family:var(--font-mono);font-size:1.35rem;letter-spacing:.42em;text-align:center;padding:12px 10px}
input.code::placeholder{letter-spacing:.42em}
.alt{display:block;margin-top:14px;text-align:center;font-size:.8rem;color:var(--mut)}
.alt a,.alt button{color:var(--acc2);text-decoration:none;background:none;border:0;padding:0;margin:0;width:auto;
  box-shadow:none;font:inherit;cursor:pointer}
.alt button::after{display:none}
.alt a:hover,.alt button:hover{text-decoration:underline;background:none}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px;padding:14px;border-radius:12px;
  background:rgba(0,0,0,.35);border:1px dashed rgba(255,255,255,.14)}
.codes code{font-family:var(--font-mono);font-size:.98rem;letter-spacing:.06em;text-align:center;color:#d1fae5}
a.btn{display:block;margin-top:20px;padding:12.5px;border-radius:12px;text-align:center;text-decoration:none;color:#fff;
  font-weight:600;background:linear-gradient(96deg,var(--acc),#4f8ef7 54%,var(--acc2))}