/* ===================== LOGIN HFC (2026-10-08) =====================
   Reemplaza la lámpara de Rete Fija. Tarjeta roja (paleta del login de Rete Fija) con ilustración propia a la
   izquierda y formulario a la derecha: campos translúcidos con ícono, título serif y botón blanco.
   El fondo de la página (#pantalla-login) y .login-err vienen del bloque LOGIN de arriba. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hl-card{
  width:100%;max-width:1040px;min-height:560px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:8px;
  padding:40px 56px 40px 28px;border-radius:26px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.14), transparent 42%),
    radial-gradient(circle at 95% 105%, rgba(0,0,0,.22), transparent 55%),
    linear-gradient(135deg, #e3343d 0%, #b5162a 55%, #8e0f1f 100%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18);
  animation:hl-in .7s cubic-bezier(.2,.8,.2,1) both;
}
.hl-art{display:flex;align-items:center;justify-content:center}
.hl-svg{width:100%;max-width:440px;height:auto;overflow:visible}
.hl-form{display:flex;flex-direction:column;gap:14px;max-width:420px;width:100%;justify-self:center}
.hl-tag{align-self:center;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22);color:#ffe3d6}
.hl-title{font:400 44px/1.08 'DM Serif Display',Georgia,'Times New Roman',serif;margin:2px 0 0;text-align:center;letter-spacing:.005em}
.hl-sub{margin:0 0 10px;text-align:center;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9)}
.hl-field{position:relative;display:flex;align-items:center;height:56px;border-radius:12px;
  background:rgba(70,0,10,.32);border:1px solid rgba(255,255,255,.10);transition:background .2s,border-color .2s,box-shadow .2s}
.hl-field:focus-within{background:rgba(70,0,10,.45);border-color:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.hl-ico{position:absolute;left:18px;width:20px;height:20px;fill:none;stroke:#ffc9b3;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hl-field input{flex:1;height:100%;min-width:0;border:0;background:transparent;color:#fff;font:500 14.5px var(--sans);
  padding:0 52px 0 50px;letter-spacing:.03em;outline:none;border-radius:12px}
.hl-field input::placeholder{color:#ffc9b3;opacity:.85;letter-spacing:.06em;font-size:13px}
.hl-field input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s ease 0s}
.hl-eye{position:absolute;right:8px;width:40px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer;display:grid;place-items:center}
.hl-eye svg{width:20px;height:20px;fill:none;stroke:#ffc9b3;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hl-eye:hover,.hl-eye.on{background:rgba(255,255,255,.10)}
.hl-eye.on svg{stroke:#fff}
.hl-btn{height:56px;margin-top:4px;border:0;border-radius:12px;cursor:pointer;background:#fff;color:#9d1224;
  font:400 21px/1 'DM Serif Display',Georgia,serif;letter-spacing:.01em;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);transition:transform .15s ease,box-shadow .15s ease,background .15s}
.hl-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(0,0,0,.6);background:#fff6f2}
.hl-btn:active{transform:translateY(0)}
.hl-btn:disabled{opacity:.75;cursor:progress}
.hl-btn:focus-visible{outline:3px solid #ffd9c7;outline-offset:3px}
.hl-form .login-err{margin-top:0;background:rgba(40,0,6,.55);color:#ffd9d3;border-color:rgba(255,255,255,.25)}

/* Animación: entrada de la tarjeta, barras que crecen, línea que se dibuja, agente y decoración flotando.
   «Reducir movimiento» las apaga con la regla global de arriba (prefers-reduced-motion). */
@keyframes hl-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hl-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hl-draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes hl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hl-spin{to{transform:rotate(360deg)}}
@keyframes hl-point{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes hl-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.hl-bars rect{transform-box:fill-box;transform-origin:bottom;animation:hl-grow .9s cubic-bezier(.2,.8,.2,1) both}
.hl-bars rect:nth-child(2){animation-delay:.08s}.hl-bars rect:nth-child(3){animation-delay:.16s}
.hl-bars rect:nth-child(4){animation-delay:.24s}.hl-bars rect:nth-child(5){animation-delay:.32s}.hl-bars rect:nth-child(6){animation-delay:.40s}
.hl-line{stroke-dasharray:320;animation:hl-draw 1.4s ease .5s both}
.hl-agent{animation:hl-float 4.5s ease-in-out infinite}
.hl-arm{transform-box:fill-box;transform-origin:0% 100%;animation:hl-point 3.2s ease-in-out infinite}
.hl-board{animation:hl-float 6s ease-in-out .8s infinite}
.hl-d1{transform-box:fill-box;transform-origin:center;animation:hl-spin 18s linear infinite}
.hl-d2{transform-box:fill-box;transform-origin:center;animation:hl-spin 24s linear infinite reverse}
.hl-d3,.hl-wifi{animation:hl-pulse 2.6s ease-in-out infinite}

/* Celular / pantallas angostas: solo el formulario. */
@media (max-width:820px){
  .hl-card{grid-template-columns:1fr;padding:32px 22px;min-height:0;max-width:460px}
  .hl-art{display:none}
  .hl-title{font-size:36px}
}

/* Firma del área (Jose, 08-oct-2026): bloque destacado al pie del formulario, sobre la tarjeta roja. */
.hl-firma{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;border-radius:14px;
  background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hl-firma-logo{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fff;color:#9d1224;
  font:800 14px/1 var(--sans);letter-spacing:.05em;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.hl-firma-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hl-firma-txt small{font-size:11px;color:rgba(255,255,255,.75);letter-spacing:.02em}
.hl-firma-txt b{font:400 19px/1.15 'DM Serif Display',Georgia,serif;color:#fff;letter-spacing:.005em}