/* Edge dibuja su propio ícono nativo de "mostrar contraseña" dentro del
   input (pseudo-elemento ::-ms-reveal), superpuesto exactamente sobre
   nuestro botón #toggle-password. Sin esto, hay dos controles peleando
   por el mismo pixel: según en qué mitad del ícono cae el click, a veces
   responde el de Edge (que no dispara nuestro JS) y a veces el nuestro —
   se sentía como que "a veces hace falta más de un click". */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Panel transition base state */
    #login-panel, #recover-panel {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* Línea animada en el input focus */
    .input-wrapper {
      position: relative;
    }
    .input-wrapper::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 2px;
      background: var(--fire);
      transition: width 0.3s ease;
    }
    .input-wrapper:focus-within::after {
      width: 100%;
    }

    /* Ojito mostrar/ocultar contraseña: rebote tipo iOS al presionar y al
       cambiar de ícono (curva con "overshoot" en vez de ease lineal). */
    #toggle-password {
      transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    #toggle-password:active {
      transform: scale(0.82);
    }
    #toggle-password svg {
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
    }
    #toggle-password.icon-swap svg {
      transform: scale(0.5) rotate(8deg);
      opacity: 0;
    }

    /* Glow en el card al hover */
    .login-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      backdrop-filter: blur(30px);
      transition: border-color 0.4s;
    }
    .login-card:hover {
      border-color: color-mix(in srgb, var(--fire) 15%, transparent);
    }

    /* Bg animated mesh */
    .login-bg-mesh {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 40% 50% at 20% 30%, color-mix(in srgb, var(--fire) 6%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, color-mix(in srgb, var(--fire) 4%, transparent) 0%, transparent 60%);
      animation: meshFloat 8s ease-in-out infinite alternate;
    }
    @keyframes meshFloat {
      from { opacity: 0.6; transform: scale(1); }
      to   { opacity: 1;   transform: scale(1.05); }
    }

    /* Strength bar animation */
    .strength-bar span {
      display: block;
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s, background 0.3s;
    }