.login-reference {

  :root{
    --tinta:#111827; --suave:#7c8493; --linea:#e7eaf0; --fondo:#f6f7fb;
    --papel:#ffffff; --marca:#6d5df6; --marca-osc:#7c2df1; --error:#dc2626;
    --error-fondo:#fef2f2; --verde:#45bd67;
  }
  *{box-sizing:border-box}
  body{
    margin:0; min-height:100vh; padding:30px 16px;
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    background:
      radial-gradient(circle at 8% 12%, rgba(139,123,255,.26), transparent 28%),
      radial-gradient(circle at 92% 82%, rgba(83,211,221,.30), transparent 32%),
      linear-gradient(120deg,#eef2ff 0%,#ffffff 48%,#e7fbff 100%);
    color:var(--tinta); display:flex; align-items:flex-start; justify-content:center;
  }
  .caja{width:100%; max-width:1180px}
  .registro-shell{display:grid; grid-template-columns:minmax(320px, .92fr) minmax(420px, 1.08fr);
    overflow:hidden; min-height:calc(100vh - 60px);
    border-radius:28px; background:rgba(255,255,255,.74);
    box-shadow:0 24px 70px rgba(80,93,126,.20); backdrop-filter:blur(10px)}
  .marca{position:relative; overflow:hidden; color:#fff; padding:56px 44px;
    background:linear-gradient(155deg,#5a47e6 0%,#7f34ea 48%,#22a7bd 100%);
    display:flex; flex-direction:column; justify-content:space-between}
  .marca:before{content:""; position:absolute; width:270px; height:270px; border-radius:50%;
    right:-44px; top:-36px; background:rgba(255,255,255,.13)}
  .marca:after{content:""; position:absolute; width:250px; height:250px; border-radius:50%;
    left:-72px; bottom:-74px; background:rgba(255,255,255,.11)}
  .brand{position:relative; z-index:1; display:flex; align-items:center; justify-content:center}
  .brand-logo{width:300px; height:auto; max-height:150px; display:block; object-fit:contain; flex:0 0 auto}
  .marca-copy{position:relative; z-index:1; max-width:430px}
  .marca h1{margin:0 0 22px; font-size:48px; line-height:1.12; font-weight:800; letter-spacing:0}
  .marca p{margin:0; opacity:.82; font-size:18px; line-height:1.7}
  .security-art{position:relative; z-index:1; height:250px; margin:34px 0 10px}
  .safe-card{position:absolute; left:50%; top:52%; width:255px; height:145px; border-radius:18px;
    transform:translate(-50%,-50%); background:rgba(255,255,255,.92); box-shadow:0 22px 38px rgba(31,41,55,.18)}
  .lock{position:absolute; left:50%; top:-66px; width:76px; height:84px; transform:translateX(-50%);
    border:12px solid rgba(230,238,255,.95); border-bottom:0; border-radius:42px 42px 0 0}
  .lock:after{content:""; position:absolute; left:50%; bottom:-58px; width:84px; height:62px;
    transform:translateX(-50%); border-radius:16px; background:linear-gradient(145deg,#6c60f5,#2f57d8);
    box-shadow:inset 0 -10px 18px rgba(18,30,126,.24)}
  .line{position:absolute; left:42px; right:42px; height:24px; border-radius:8px; border:5px solid #f4c64f; background:#fff}
  .line.one{top:62px}.line.two{top:104px}
  .line.one:after{content:""; display:block; width:78%; height:7px; border-radius:8px; margin:4px auto; background:#6d5df6}
  .line.two:after{content:"*******"; display:block; color:#4961d8; font-size:22px; line-height:14px; text-align:center; letter-spacing:6px}
  .float-icon{position:absolute; z-index:2; filter:drop-shadow(0 10px 12px rgba(31,41,55,.20))}
  .float-icon.mail{left:36px; top:40px; width:56px; height:44px; border-radius:6px;
    background:#ffd95f; transform:rotate(-18deg)}
  .float-icon.mail:before{content:""; position:absolute; inset:8px 7px auto; height:18px;
    border-left:3px solid #fff; border-bottom:3px solid #fff; transform:skewY(-28deg)}
  .float-icon.key{left:28px; top:142px; width:96px; height:26px; border-radius:14px;
    background:#d5daf2; transform:rotate(-8deg)}
  .float-icon.key:before{content:""; position:absolute; left:-24px; top:-14px; width:44px; height:44px;
    border:10px solid #c7cee9; border-radius:50%}
  .float-icon.key:after{content:""; position:absolute; right:12px; bottom:-15px; width:12px; height:24px;
    border-left:8px solid #c7cee9; border-right:8px solid #c7cee9}
  .float-icon.check{right:42px; bottom:46px; width:62px; height:52px; border-radius:10px;
    border:6px solid #f2c74d; background:rgba(255,255,255,.88); transform:rotate(-9deg)}
  .float-icon.check:before{content:""; position:absolute; left:15px; top:17px; width:26px; height:13px;
    border-left:6px solid #5463df; border-bottom:6px solid #5463df; transform:rotate(-45deg)}
  .legal{position:relative; z-index:1; color:rgba(255,255,255,.82); font-size:17px; line-height:1.55; margin:0; max-width:460px}
  .legal strong{color:#fff; font-weight:800}
  .tarjeta{background:var(--papel); padding:56px 54px 32px}
  .tarjeta h2{margin:0 0 8px; font-size:36px; font-weight:800; letter-spacing:0}
  .intro{margin:0 0 28px; color:var(--suave); font-size:16px}
  .grupo{margin-bottom:22px}
  .grupo-t{font-size:13px; font-weight:800; color:#202938; margin-bottom:14px}
  .campo{margin-bottom:16px}
  label{display:block; font-size:13px; font-weight:700; margin-bottom:8px}
  .pista{font-weight:400; color:var(--suave)}
  input,select{
    width:100%; min-height:54px; padding:13px 16px; font-size:15px; font-family:inherit;
    border:1px solid var(--linea); border-radius:14px; background:#f8f9fc;
    color:var(--tinta); transition:border-color .15s, background .15s, box-shadow .15s;
  }
  input:focus,select:focus{outline:none; border-color:#c6bfff; background:#fff; box-shadow:0 0 0 4px rgba(109,93,246,.10)}
  select:disabled{opacity:.55; cursor:not-allowed}
  .fila{display:flex; gap:14px; flex-wrap:wrap}
  .fila .campo{flex:1; min-width:170px}
  .oculto{position:absolute; left:-9999px}
  button{
    width:100%; min-height:58px; padding:14px; margin-top:6px; font-size:16px; font-weight:800;
    font-family:inherit; color:#fff; background:linear-gradient(90deg,#6c5df6,#8b2feb); border:0;
    border-radius:14px; cursor:pointer; transition:transform .15s, box-shadow .15s;
    box-shadow:0 14px 22px rgba(109,93,246,.25);
  }
  button:hover{transform:translateY(-1px); box-shadow:0 18px 26px rgba(109,93,246,.30)}
  button:disabled{background:var(--suave); cursor:wait}
  .aviso{background:var(--error-fondo); border:1px solid #fecaca; color:var(--error);
         padding:12px 14px; border-radius:14px; font-size:13.5px; margin-bottom:20px}
  .aviso code{display:block; margin-top:6px; font-size:11.5px; opacity:.85; word-break:break-all}
  .incluye{margin:24px 0 0; padding:16px 18px; background:#fafbff;
           border:1px solid var(--linea); border-radius:14px; font-size:13px; color:var(--suave)}
  .incluye b{color:var(--tinta)}
  .incluye ul{margin:8px 0 0; padding-left:18px}
  .incluye li{margin:3px 0}
  .pie{text-align:center; margin-top:20px; font-size:13.5px}
  .pie a{color:var(--marca); font-weight:600; text-decoration:none}
  .pie a:hover{text-decoration:underline}
  /* La salida hacia la demo: separada por una linea para que no se lea como
     parte de "Ya tengo cuenta", que es otra cosa distinta. */
  .pie-demo{margin-top:12px; padding-top:12px; border-top:1px solid var(--linea)}
  .pie-demo small{display:block; margin-top:3px; font-size:12px; color:var(--suave)}
  .ruc-estado{font-size:12.5px; margin-top:6px; min-height:16px; color:var(--suave)}
  .ruc-estado.ok{color:#15803d; font-weight:600}
  .ruc-estado.mal{color:var(--error); font-weight:600}
  .ruc-estado.buscando{color:var(--marca)}
  @media (max-width:900px){
    body{padding:16px}
    .registro-shell{grid-template-columns:1fr; min-height:0}
    .marca{min-height:420px; padding:34px 28px}
    .marca h1{font-size:36px}
    .marca p{font-size:15px}
    .tarjeta{padding:34px 24px 28px}
    .tarjeta h2{font-size:30px}
    .brand-logo{width:210px; max-height:110px}
  }

  /* Estilo visual compartido con la portada; formulario original intacto. */
  :root{--marca:#ffac38;--suave:#cdc5ec;--linea:#ffffff26}
  body{padding:0;display:block;background:#241080;color:#fff}
  .caja{max-width:none}
  .registro-shell{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:100svh;border-radius:0;box-shadow:none;backdrop-filter:none;background:#241080;overflow:visible;align-items:start}
  .marca{position:sticky;top:0;height:100svh;min-height:720px;padding:48px clamp(28px,4.4vw,76px);isolation:isolate;background:#162132;justify-content:flex-end;gap:26px}
  .marca:before{inset:0;width:100%;height:100%;border-radius:0;background:linear-gradient(180deg,#0b142b28 0%,#0b142b55 40%,#060d1bef 100%),url('../imagenes_facturas/fondo4k.png') center / cover no-repeat;z-index:-1}
  .marca:after{display:none}
  .brand{position:absolute;top:40px;left:clamp(28px,4.4vw,76px);justify-content:flex-start}
  .brand-logo{width:175px;max-height:90px;padding:10px 16px;background:#fff;border-radius:14px;box-shadow:0 12px 30px #0003}
  .marca-copy{max-width:560px}
  .marca-copy:before{content:"FACTURACIÓN ELECTRÓNICA";display:inline-block;margin-bottom:16px;padding:8px 16px;border-radius:99px;background:#ff8a00;color:#fff;font-size:12px;font-weight:800;letter-spacing:1px}
  .marca h1{font-size:clamp(36px,3.4vw,54px);line-height:1.08;margin-bottom:18px;text-wrap:balance}
  .marca p{font-size:18px;line-height:1.6;opacity:1;color:#eeedf5}
  .legal{border-top:1px solid #ffffff45;padding-top:23px;font-size:15px!important;max-width:540px}
  .legal strong{color:#ffa329}
  .security-art{position:absolute;bottom:calc(100% + 42px);left:0;width:100%;height:180px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .security-art>*{display:none}
  .security-art:before,.security-art:after{content:"";display:block;border-radius:10px;border:1px solid #ffffff70;box-shadow:0 18px 40px #0006;background:#fff url('../imagenes_facturas/panel%20cotizacion.jpg') center / contain no-repeat}
  .security-art:after{background-image:url('../imagenes_facturas/panel%20factura.jpg');transform:translateY(24px)}
  .tarjeta{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:100svh;padding:60px clamp(26px,4vw,68px) 40px;background:linear-gradient(135deg,#291187,#201078 65%,#2c138e)}
  .tarjeta:before,.tarjeta:after{content:"";position:absolute;z-index:-1;pointer-events:none;width:300px;height:300px;border-radius:50%;background:#8140b52b}
  .tarjeta:before{top:-150px;right:-100px}.tarjeta:after{bottom:-140px;left:-130px}
  .tarjeta h2{font-size:40px;line-height:1.12;margin-bottom:12px;color:#fff}
  .intro{color:#ded7f6;line-height:1.6;margin-bottom:30px}
  .grupo{margin-bottom:28px}
  .grupo-t{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:#ffb64f;padding-bottom:12px;border-bottom:1px solid #ffffff26;margin-bottom:20px}
  label{color:#f4f0ff;font-size:13px;line-height:1.5;letter-spacing:.2px}
  .pista{color:#cdc5ec;font-size:12px;letter-spacing:0}
  input,select{min-width:0;min-height:54px;background:#f4f8ff;border:1px solid #e5e8f3;border-radius:14px;color:#221a42;box-shadow:0 3px 12px #12083e12}
  input::placeholder{color:#778096;opacity:1}
  input:focus,select:focus{border-color:#ffad38;background:#fff;box-shadow:0 0 0 4px #ffad3829}
  select:disabled{opacity:1;background:#c9c6dd;color:#645e7c;border-color:#c9c6dd}
  .fila{gap:16px}.fila .campo{min-width:150px}
  button{background:#ff8a00;box-shadow:0 12px 28px #ff87002b;min-height:59px;font-size:18px;border-radius:15px}
  button:hover{background:#ff9800;box-shadow:0 16px 30px #ff87003b}
  button:focus-visible,.pie a:focus-visible{outline:3px solid #ffc56c;outline-offset:4px}
  button:disabled{background:#787087;color:#fff;transform:none;box-shadow:none}
  .incluye{background:#ffffff09;border-color:#ffffff22;color:#dcd5f5;line-height:1.6;border-radius:16px}
  .incluye b{color:#fff}.incluye li::marker{color:#ffb64f}
  .pie{color:#dcd5f5;line-height:1.7}.pie a{color:#ffb64f;font-weight:700}
  .pie-demo{border-color:#ffffff26}.pie-demo small{color:#cdc5ec}
  .ruc-estado{color:#d7cfee;line-height:1.5}.ruc-estado.ok{color:#7debb0}.ruc-estado.mal{color:#ffb5b5}.ruc-estado.buscando{color:#ffbf63}
  .aviso{background:#fff0f0;color:#a51e32;border-color:#ffb8c1;line-height:1.55}
  @media(max-height:800px) and (min-width:901px){.security-art{height:130px;bottom:calc(100% + 30px)}.marca{padding-bottom:30px}.marca h1{font-size:40px}}
  @media(max-width:1100px){.registro-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.marca{padding-left:28px;padding-right:28px}.marca h1{font-size:38px}.security-art{gap:10px;height:140px}.tarjeta{padding:44px 28px}}
  @media(max-width:900px){
    body{padding:0}.registro-shell{grid-template-columns:1fr}
    .marca{position:relative;height:auto;min-height:360px;padding:125px 28px 32px;gap:18px}
    .brand{top:24px;left:28px}.brand-logo{width:140px;max-height:75px}
    .marca-copy{max-width:650px}.marca h1{font-size:34px}.marca p{font-size:16px}
    .security-art{display:none}.legal{font-size:14px!important;padding-top:16px}
    .tarjeta{min-height:0;padding:38px max(24px,calc((100vw - 650px)/2)) 32px}.tarjeta h2{font-size:34px}
  }
  @media(max-width:420px){.fila{display:block}.fila .campo{min-width:0}.marca h1{font-size:30px}.tarjeta{padding:32px 20px}.marca{padding-left:20px;padding-right:20px}.brand{left:20px}}

  /* Galeria: capturas completas sobre un fondo limpio. */
  .marca{height:100svh;min-height:800px;padding:36px clamp(24px,3.2vw,54px);justify-content:center;gap:24px;background:#10132b}
  .marca:before{background:radial-gradient(ellipse at 10% 15%,#5041a85e,transparent 60%),radial-gradient(ellipse at 100% 90%,#ff8a0014,transparent 55%),linear-gradient(145deg,#171932,#101225)}
  .brand{position:relative;top:auto;left:auto;align-self:flex-start}
  .brand-logo{width:150px;max-height:78px;border-radius:12px;padding:8px 12px}
  .marca-copy{max-width:none;width:100%}
  .marca-copy:before{font-size:11px;margin-bottom:12px}
  .marca h1{font-size:clamp(30px,2.7vw,44px);margin-bottom:12px;max-width:570px}
  .marca p{font-size:16px;line-height:1.6}
  .security-art{display:none}
  .legal{font-size:13px!important;padding-top:18px;max-width:none}
  .product-slider{position:relative;width:100%;min-width:0;z-index:1}
  .product-slider-frame{position:relative;border:1px solid #ffffff30;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 22px 55px #0005}
  .product-slider-bar{height:29px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#eceff6;border-bottom:1px solid #dce1ec}
  .product-slider-bar i{width:6px;height:6px;border-radius:50%;background:#bac2d2}.product-slider-bar i:first-child{background:#ffab74}
  .product-slider-bar span{margin-left:8px;font-size:10px;color:#69748a;letter-spacing:.3px}
  .product-slide{margin:0;display:none}.product-slide.is-active{display:block}
  .product-slide img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#fff}
  .product-slider-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:#f6f7fb;border-top:1px solid #e8eaf0;color:#262444;font-size:12px;font-weight:650}
  .product-slider-caption small{color:#77758b;font-size:11px;font-weight:400}
  .product-slider-controls{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px}
  .product-slider-controls button{width:30px;min-height:30px;height:30px;margin:0;padding:0;border-radius:50%;background:#ffffff0d;border:1px solid #ffffff30;color:#eee9ff;font-size:12px;box-shadow:none;line-height:1;transform:none}
  .product-slider-controls button[aria-pressed="true"]{background:#ff9300;border-color:#ff9300;color:#fff}
  .product-slider-controls button:hover{background:#ffffff25}
  .product-slider-controls .product-slider-toggle{width:auto;border-radius:99px;padding:0 12px;margin-left:5px;font-size:11px}
  @media(max-height:850px) and (min-width:901px){.marca{gap:18px;min-height:760px;padding-top:24px;padding-bottom:24px}.brand-logo{width:125px;max-height:65px}.marca h1{font-size:32px}.product-slide img{aspect-ratio:16/9}.legal{padding-top:13px}}
  @media(max-width:900px){.marca{position:relative;height:auto;min-height:0;padding:28px;gap:24px}.brand{left:auto;top:auto}.product-slider{max-width:650px;align-self:center}.marca-copy,.legal{width:100%;max-width:650px;align-self:center}.marca h1{font-size:32px}.brand-logo{width:130px}.product-slide img{aspect-ratio:16/10}}
  @media(max-width:420px){.marca{padding:24px 20px}.marca h1{font-size:28px}.product-slider-caption{padding:11px 12px}.product-slider-caption small{display:none}}

  /* Comprobantes flotantes inspirados en la portada de web. */
  .product-slide{position:relative}
  .registro-doc-float{position:absolute;inset:12px 0 48px;pointer-events:none;z-index:2;perspective:900px}
  .product-slide .registro-doc-float img{position:absolute;left:6%;top:3%;width:43%;height:91%;aspect-ratio:auto;object-fit:contain;object-position:center;background:transparent;border-radius:4px;filter:drop-shadow(9px 16px 12px #11152a66);transform-origin:50% 85%;animation:registroDocFloat 5s ease-in-out infinite}
  .product-slide:nth-of-type(2) .registro-doc-float img{left:9%;--doc-angle:3deg}
  .product-slide:nth-of-type(3) .registro-doc-float img{left:7%;--doc-angle:-3deg}
  /* @keyframes registroDocFloat -> movido al final del archivo, fuera de .login-reference */
  .product-slider:hover .registro-doc-float img,.product-slider:focus-within .registro-doc-float img,.product-slider.is-paused .registro-doc-float img{animation-play-state:paused}
  .product-slider.is-paused .registro-doc-float img{animation:none;opacity:1;transform:translateY(-4px) rotate(var(--doc-angle,-3deg))}
  @media(prefers-reduced-motion:reduce){.product-slide .registro-doc-float img{animation:none;opacity:1;transform:rotate(-3deg)}}
  @media(max-width:420px){.registro-doc-float{inset:8px 0 40px}.product-slide .registro-doc-float img{width:45%;left:5%}}

  /* Cinco documentos y mensajes de la demostracion visual. */
  .registro-doc-generating,.registro-doc-ready{position:absolute;right:4%;max-width:43%;padding:9px 12px;border-radius:12px;font-size:12px;font-weight:700;line-height:1.4;box-shadow:0 8px 22px #11152a33}
  .registro-doc-generating{top:7%;background:#17182f;color:#fff;animation:registroGenerating 5s linear infinite}
  .registro-doc-generating:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#ffae32}
  .registro-doc-ready{bottom:12%;background:#eafff3;color:#126039;animation:registroReady 5s linear infinite}
  .registro-doc-ready:before{content:"✓ ";color:#148849}
  .product-slide .doc-ticket img{width:30%;left:12%;height:94%;top:0}
  .product-slide .doc-rotulo img{width:49%;left:4%;height:76%;top:11%}
  /* @keyframes registroGenerating -> movido al final del archivo, fuera de .login-reference */
  /* @keyframes registroReady -> movido al final del archivo, fuera de .login-reference */
  .product-slider:hover .registro-doc-float span,.product-slider:focus-within .registro-doc-float span{animation-play-state:paused}
  .product-slider.is-paused .registro-doc-generating{animation:none;opacity:0}
  .product-slider.is-paused .registro-doc-ready{animation:none;opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.registro-doc-generating{animation:none;opacity:0}.registro-doc-ready{animation:none;opacity:1;transform:none}}
  @media(max-width:480px){.registro-doc-generating,.registro-doc-ready{font-size:10px;padding:6px 8px;right:3%;max-width:42%}.product-slider-controls{gap:6px}.product-slider-controls button{width:28px;min-height:28px;height:28px}}

  /* Texto descriptivo visible y disuasion de copia limitada a la galeria. */
  .registro-doc-description{position:absolute;right:4%;top:45%;max-width:39%;padding:10px 12px;border-radius:14px;background:#fff;color:#17182f;font-size:12px;font-weight:750;line-height:1.4;box-shadow:0 8px 24px #11152a30}
  .registro-doc-description:before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:3px;background:#8150ef}
  .product-slider-frame{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .product-slider-frame img{pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
  @media(max-width:480px){.registro-doc-description{right:3%;max-width:42%;font-size:10px;padding:7px 9px;top:39%}.registro-doc-ready{bottom:5%}}

  /* Marcos de laptop y PC dentro de las dimensiones actuales del slider. */
  .product-slider-frame{background:transparent;border-color:transparent;border-radius:14px;box-shadow:none;overflow:visible}
  .product-slider-bar{position:relative;background:linear-gradient(#242a34,#0a0d12);border:1px solid #353c48;border-bottom:0;border-radius:14px 14px 0 0;justify-content:center}
  .product-slider-bar i,.product-slider-bar span{display:none}
  .product-slider-bar:after{content:"";width:5px;height:5px;border-radius:50%;background:#526275;box-shadow:0 0 0 3px #10141d}
  .product-slide>img{border:10px solid #0a0d12;border-top:0;border-bottom:14px solid #0a0d12;border-radius:0 0 9px 9px;box-shadow:0 18px 32px #0004}
  .product-slider-caption{position:relative;height:41px;min-height:41px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:transparent;font-size:0;display:block}
  .product-slider-caption small{display:none}
  .product-slider-caption:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-radius:0 0 40% 40%;background:linear-gradient(#8a93a2 0%,#414955 25%,#181e28 80%,#0a0d12);box-shadow:0 12px 14px #0003}
  .product-slider-caption:after{content:"";position:absolute;left:42%;width:16%;top:0;height:4px;border-radius:0 0 6px 6px;background:#282f3b}
  .product-slide:nth-of-type(n+3) .product-slider-caption:before{left:43%;right:43%;top:0;height:27px;border-radius:0;background:linear-gradient(90deg,#1a202a,#363e4b 50%,#171c24);box-shadow:none}
  .product-slide:nth-of-type(n+3) .product-slider-caption:after{left:32%;width:36%;top:27px;height:11px;border-radius:4px 4px 12px 12px;background:linear-gradient(#555f70,#242b37 40%,#0b1018);box-shadow:0 9px 12px #0003}
  .registro-doc-float{left:10px;right:10px}
  @media(max-width:480px){.product-slide>img{border-left-width:7px;border-right-width:7px;border-bottom-width:10px}.product-slider-caption{padding:0;height:41px}.registro-doc-float{left:7px;right:7px}}

  /* Acabado aluminio: contraste con el fondo morado sin ampliar el slider. */
  .product-slider-bar{background:linear-gradient(180deg,#f4f7fb 0%,#cdd5df 45%,#aab6c5 100%);border-color:#eef3fa;box-shadow:inset 0 1px 0 #fff,0 -2px 18px #bcd7ff12}
  .product-slider-bar:after{background:#24344b;box-shadow:0 0 0 3px #b7c2d0,inset 0 0 0 1px #536b8a}
  .product-slide>img{border-color:#ced6e1;box-shadow:0 1px 0 1px #f2f6fc,0 18px 32px #0005}
  .product-slider-caption:before{height:17px;background:linear-gradient(180deg,#f7faff 0%,#e0e7ef 18%,#acbacb 55%,#6e8097 100%);box-shadow:0 2px 0 #ffffff55,0 12px 20px #0005;border-radius:0 0 45% 45%}
  .product-slider-caption:after{height:5px;background:linear-gradient(#7e8da2,#b5c2d3);box-shadow:0 1px 0 #ffffff9c}
  .product-slide:nth-of-type(n+3) .product-slider-caption:before{background:linear-gradient(90deg,#8b9bb0,#edf2f8 45%,#b7c4d4 75%,#8192a9);box-shadow:inset 1px 0 0 #f3f7fd,inset -1px 0 0 #dce6f3}
  .product-slide:nth-of-type(n+3) .product-slider-caption:after{background:linear-gradient(180deg,#f5f8fc,#d4dfea 35%,#92a4ba 75%,#70839c);box-shadow:0 1px 0 #eff6ff,0 9px 16px #0005}

  .password-field{position:relative}
  .password-field input{padding-right:54px}
  .password-field .password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:10px;border:0;border-radius:10px;background:transparent;color:#72608e;box-shadow:none;cursor:pointer}
  .password-field .password-toggle:hover{background:#eae5f4;color:#45237c;transform:translateY(-50%);box-shadow:none}
  .password-field .password-toggle:focus-visible{outline:2px solid #8759c5;outline-offset:-2px}
  .password-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .password-eye-slash{display:none}.password-toggle[aria-pressed="true"] .password-eye-slash{display:block}

  /* ═══════════════════════════════════════════════════════════════════════
     EL GIRO DE LA TARJETA — registro delante, demo detras.

     Gira este envoltorio y NO `.tarjeta`, a proposito, por dos cosas que
     ya estan escritas mas arriba en esta misma hoja:

       1. `.tarjeta` lleva `overflow:hidden`. Un contenedor con el
          desbordamiento recortado obliga al navegador a APLANAR el 3D de
          lo que tiene dentro: el giro no giraria, se desvaneceria.
       2. `.tarjeta` pinta sus dos burbujas con `:before/:after` en
          `z-index:-1`, apoyadas en su `isolation:isolate`. Ponerle un
          `transform` encima crea otro contexto de apilamiento y las
          borraria.

     Asi el fondo, las burbujas, el padding y el `min-height:100svh` de la
     columna se quedan quietos: gira solo el contenido. La columna del
     slider es hermana en el grid y va `sticky`, o sea que ni se entera.

     El alto no se puede dejar en manos del CSS: las dos caras van
     superpuestas (absolutas) y el contenedor colapsaria a cero. Lo mide el
     JS del final del archivo y lo escribe aqui, con transicion, para que la
     tarjeta se acomode en vez de pegar un salto. */
  /* PRIMERO, QUITARLE EL SCROLL A LA TARJETA.

     `.tarjeta` viene con `overflow:hidden` para recortar las dos burbujas
     que se le salen por las esquinas. El efecto buscado era ese, recortar,
     pero `hidden` hace ademas otra cosa que no se pidio: convierte la
     columna en un contenedor con SU PROPIO scroll.

     Con una sola cara nunca se noto, porque el contenido siempre cabia
     justo. Con dos, no: mientras la demo (corta) esta delante, la de
     registro sigue detras midiendo el doble, y por dentro de la columna
     sobran seiscientos pixeles de scroll que nadie ve. Cualquier cosa que
     mueva el foco lo desplaza — o el propio navegador lo restaura al
     recargar — y entonces la tarjeta se pinta corrida hacia arriba y se
     come su propio titulo.

     `clip` recorta exactamente igual, pero no crea scroll: no hay nada que
     desplazar. Se deja `hidden` delante para los navegadores viejos que no
     conozcan `clip` — para esos queda el seguro que pone el JS del final.

     Esta pagina hace scroll con la ventana entera, nunca por dentro de una
     columna, asi que aqui no se pierde nada. */
  .tarjeta{overflow:hidden; overflow:clip}


}

html#extr-page {background:#10132b;font-size:16px}
#extr-page body {margin:0;min-height:100vh;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:#241080}
.top-nav,#starfield,.grid-overlay,.hero-section::before {display:none}
#hero.hero-section {display:block;padding:0!important;background:none;overflow:visible}
.login-layout {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);width:100%;min-height:100vh}
.login-reference {min-width:0}
.login-panel {display:flex;align-items:center;min-width:0;padding:48px clamp(26px,4vw,68px);background:linear-gradient(135deg,#291187,#201078 65%,#2c138e)}
.login-card {width:100%;max-width:560px;margin:auto;padding:0!important;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;animation:none}
.login-card::before {display:none}
.login-card>.text-center {text-align:left}
.login-card h2 {font-size:40px!important;line-height:1.12;margin:0 0 12px;font-weight:800}
.login-card .subtitle {color:#ded7f6;line-height:1.6;margin-bottom:32px}
#moodFace,#login-messages {display:none}
#login-form input.form-control-modern {min-height:54px;padding:16px 18px 16px 48px!important;background:#f4f8ff;border:1px solid #e5e8f3;color:#221a42;font-size:16px!important;box-shadow:0 3px 12px #12083e12}
#login-form input.form-control-modern::placeholder {color:#778096;opacity:1}
#login-form input.form-control-modern:focus {border-color:#ffad38;background:#fff;box-shadow:0 0 0 4px #ffad3829}
.login-card .form-label {color:#f4f0ff;font-size:13px!important;letter-spacing:.2px}
.login-card .input-icon {left:18px;color:#778096}
.pwd-toggle {color:#645e7c}.pwd-toggle:hover,.pwd-toggle:focus {color:#291187}
.login-card .btn-primary-modern {background:#ff8a00;border-radius:15px;box-shadow:0 12px 28px #ff87002b;font-size:18px!important;padding:18px!important}
.login-card .btn-primary-modern:hover {background:#ff9800}
.login-card .link-light {color:#ffb64f}
.login-card .checkbox-wrapper label,.login-card .link-light {font-size:13px!important}
.login-card .mb-3,.login-card .mb-4 {margin-bottom:24px}
.login-card .message-box {font-size:15px;line-height:1.5}
.login-card .cuenta-alerta {padding:24px 20px}
#login-form label.error {font-size:14px!important}
.login-card button:focus-visible,.login-card a:focus-visible {outline:3px solid #ffc56c;outline-offset:3px}
@media(max-width:1100px){.login-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.login-panel{padding:40px 28px}}
@media(max-width:900px){.login-layout{grid-template-columns:1fr}.login-panel{padding:40px 24px}.login-reference .marca{height:auto;min-height:0}.login-card h2{font-size:34px!important}}
@media(max-width:420px){.login-panel{padding:32px 20px}.login-card h2{font-size:30px!important}}

/* Neutraliza el aside de navegacion de SmartAdmin en la galeria. */
#extr-page .login-reference .marca {position:sticky;top:0;left:auto;width:100%;float:none;display:flex;margin:0;color:#fff}
#extr-page .login-card>.text-center {text-align:left!important}
@media(max-width:900px){#extr-page .login-reference .marca{position:relative}}

#extr-page .login-reference .marca {height:auto;min-height:100svh;padding-top:36px;padding-bottom:36px}
#extr-page .login-reference .marca>* {flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════
   LOS FOTOGRAMAS VAN AQUI, AL RAS DEL ARCHIVO. NO DENTRO DE .login-reference.

   Todo el CSS traido de `ziren/registro.php` se envolvio en
   `.login-reference { ... }` para que no se le escapara al resto del login.
   Con las reglas normales eso funciona, pero `@keyframes` no: el anidamiento
   de CSS solo admite dentro de una regla las que preguntan algo (@media,
   @supports, @container, @layer). Cualquier otra se tira a la basura al
   analizar la hoja.

   O sea que `animation:registroDocFloat ...` si se aplicaba, pero apuntaba a
   unos fotogramas que el navegador nunca llego a guardar: el comprobante se
   quedaba quieto y los dos globos ("Generando..." y "listo") se veian a la
   vez, porque ninguno tenia como desvanecerse.

   El nombre de una animacion es global, no se hereda del sitio donde se
   escribe, asi que sacarlos aqui no le cambia el alcance a nada: es el mismo
   efecto que ya tiene `ziren/registro.php`, donde nunca estuvieron anidados.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes registroDocFloat{
    0%{opacity:0;transform:translate(45px,22px) scale(.55) rotate(9deg)}
    15%{opacity:1;transform:translate(0,0) scale(1) rotate(var(--doc-angle,-3deg))}
    35%,68%{opacity:1;transform:translate(0,-7px) scale(1) rotate(var(--doc-angle,-3deg))}
    84%{opacity:1;transform:translate(0,-3px) scale(1) rotate(var(--doc-angle,-3deg))}
    100%{opacity:0;transform:translate(-12px,-24px) scale(.95) rotate(-6deg)}
  }
@keyframes registroGenerating{0%,24%{opacity:1;transform:translateY(0)}32%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes registroReady{0%,30%{opacity:0;transform:translateY(6px)}40%,86%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-4px)}}

/* ═══════════════════════════════════════════════════════════════════════
   EL LOGO DE ZIREN: ARRIBA DEL TITULO Y SIN NADA DETRAS.

   Antes vivia en la esquina de la galeria (`.brand`), metido en una placa
   blanca con esquinas redondeadas y sombra: eso se lo pone `.brand-logo`
   mas arriba en esta misma hoja. Ahora es el FONDO de la cabecera de la
   tarjeta, justo encima de "Iniciar Sesion", en las dos medidas de
   pantalla. Sin caja, sin circulo y sin sombra.

   Se dibuja como fondo y no como imagen suelta precisamente para no
   heredar nada de aquel estilo.

   El `filter` es lo que lo deja legible: `logo1.png` es transparente, pero
   TODO su dibujo es oscuro (ni un pixel claro) y sobre el violeta del panel
   se perderia. `brightness(0)` lo pinta negro entero y `invert(1)` lo pasa
   a blanco, asi que queda la silueta de la marca en blanco limpio.

   Va centrado sobre la tarjeta en las dos medidas: el bloque tiene ancho
   fijo y margenes laterales `auto`, asi que se centra solo, sin depender
   del `text-align` del titulo.

   La caja es de 190x94 porque el PNG mide 1024x507, la misma proporcion, y
   asi `contain` lo encaja sin recortar ni deformar. El margen de abajo es
   corto a proposito: el archivo ya trae aire sobrante en su borde inferior
   y sumar los dos separaria de mas.
   ═══════════════════════════════════════════════════════════════════════ */
.login-card>.text-center::before{
  content:""; display:block;
  width:190px; height:94px; margin:0 auto 6px;
  background:url('../logo1.png') center/contain no-repeat;
  filter:brightness(0) invert(1)
}

/* Si la cuenta subio su propio logo, ese manda y este no se duplica. */
.login-card>.text-center:has(.emisor-logo)::before{display:none}

/* Y en la galeria ya no se repite. El hueco que deja lo reparte solo el
   `gap` del aside, que es flex en columna. */
#extr-page .login-reference .brand{display:none}

/* ── LA CABECERA VA CENTRADA; EL FORMULARIO NO ────────────────────────────
   Logo, titulo y subtitulo forman un solo bloque y van los tres al centro.
   Antes solo se centraban en movil y el logo quedaba de unico elemento
   fuera del eje en la pantalla grande, que se lee como descuadre y no como
   decision.

   De aqui hacia abajo el formulario SIGUE a la izquierda, y es a proposito:
   la vista baja campo por campo (etiqueta, caja, etiqueta, caja) y para eso
   necesita un borde recto del que colgarse. Centrar tambien los campos si
   desordenaria.

   Pisa el `text-align:left!important` de mas arriba: mismo peso de selector,
   pero va despues. Por eso tiene que quedarse al final del archivo. */
#extr-page .login-card>.text-center{text-align:center!important}


/* ═══════════════════════════════════════════════════════════════════════
   EN MOVIL SE VA LA GALERIA; EL FORMULARIO SE QUEDA CON TODA LA PANTALLA.

   De 900px para abajo el `grid` ya venia apilando una columna sobre la
   otra, y la galeria caia ARRIBA: en un telefono habia que pasar de largo
   el laptop con los comprobantes, el titular y el texto legal para recien
   llegar al usuario y la clave.

   Se esconde el bloque entero (`.login-reference`) y no solo el carrusel,
   porque el titular y el legal viven dentro del mismo `aside`: dejarlos
   sueltos seria el mismo estorbo, nada mas que mas corto.

   El `min-height` es para que la columna del formulario ocupe el alto real
   del telefono (`svh` descuenta la barra del navegador, `vh` no) y la
   tarjeta quede centrada en vez de pegada arriba.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .login-reference{display:none}
  .login-panel{min-height:100svh}

  /* El centrado de la cabecera ya es el de siempre; aqui solo se achica. */
  .login-card>.text-center::before{width:170px; height:84px; margin:0 auto 10px}
}