.registro-password {
      position: relative;
  }

  .registro-password input {
      padding-left: 15px;
      padding-right: 50px;
  }

  .forgot-password {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
    margin-bottom: 18px;
}

.forgot-password a {
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-password a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

  .btn-ver-pass {
      position: absolute;

      right: 10px;
      top: 50%;

      transform: translateY(-50%);

      width: 34px;
      height: 34px;

      display: flex;
      align-items: center;
      justify-content: center;

      border: 0;
      border-radius: 8px;

      background: transparent;

      cursor: pointer;

      color: #64748b;
  }

  .btn-ver-pass:hover {
      background: #f1f5f9;
      color: #1e293b;
  }

  .btn-ver-pass svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
  }

  .registro-input-sin-icono input {
      padding-left: 15px;
  }

  /* =========================================================
   MENSAJES REGISTRO
========================================================= */

  .registro-error,
  .registro-exito {

      display: flex;
      align-items: flex-start;

      gap: 12px;

      margin-bottom: 18px;

      padding: 14px 16px;

      border-radius: 12px;

      font-size: 13px;

  }


  .registro-error {

      background: #fef2f2;

      border: 1px solid #fecaca;

      color: #991b1b;

  }


  .registro-exito {

      background: #f0fdf4;

      border: 1px solid #bbf7d0;

      color: #166534;

  }


  .registro-error strong,
  .registro-exito strong {

      display: block;

      margin-bottom: 3px;

  }


  .registro-error span,
  .registro-exito span {

      display: block;

      line-height: 1.45;

  }


  .registro-exito-icon {

      flex: 0 0 28px;

      width: 28px;
      height: 28px;

      display: flex;

      align-items: center;
      justify-content: center;

      border-radius: 50%;

      background: #16a34a;

      color: white;

      font-weight: bold;

  }


  .btn-registro:disabled {

      opacity: .65;

      cursor: not-allowed;

      transform: none;

  }

  /* =========================================================
   ACCESO REGISTRO
========================================================= */
.register-question {
    display: block;
    margin-bottom: 5px;
}

.register-link {
    display: inline-block;
    margin: 0 auto;

    background: none;
    border: 0;
    padding: 3px 5px;

    color: #2356c4;
    font-weight: 800;
    cursor: pointer;

    animation: pulsoRegistro 2s ease-in-out infinite;

    transition:
        color .2s ease,
        transform .2s ease;
}
.register-access {
    margin-top: 20px;
    text-align: center;
}

.register-arrow {
    display: inline-block;
    margin-left: 3px;

    transition: transform .2s ease;
}

.register-link:hover .register-arrow {
    transform: translateX(4px);
}

.register-link {
    background: none;
    border: 0;
    padding: 3px 5px;
    margin-left: 5px;

    color: #2356c4;

    font-weight: 800;
    cursor: pointer;

    display: inline-block;

    animation: pulsoRegistro 2s ease-in-out infinite;

    transition:
        color .2s ease,
        transform .2s ease;
}

.register-link:hover {
    color: #1746a2;
    text-decoration: underline;

    animation: none;
    transform: scale(1.08);
}


/* PULSO SUAVE */

@keyframes pulsoRegistro {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.10);
    }

}

  /* =========================================================
   MODAL REGISTRO
========================================================= */

  .modal-registro {
      position: fixed;
      inset: 0;
      z-index: 9999;

      display: none;
      align-items: center;
      justify-content: center;

      padding: 20px;
  }

  .modal-registro.activo {
      display: flex;
  }

  .modal-registro-backdrop {
      position: absolute;
      inset: 0;

      background: rgba(15, 23, 42, .68);
      backdrop-filter: blur(5px);
  }

  .modal-registro-box {
      position: relative;
      z-index: 2;

      width: 100%;
      max-width: 580px;

      max-height: calc(100vh - 40px);
      overflow-y: auto;

      background: #ffffff;

      border-radius: 22px;

      padding: 38px;

      box-shadow:
          0 30px 70px rgba(15, 23, 42, .30),
          0 2px 8px rgba(15, 23, 42, .08);

      animation: registroEntrada .22s ease-out;
  }

  @keyframes registroEntrada {

      from {
          opacity: 0;
          transform: translateY(16px) scale(.98);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }

  }


  /* CERRAR */

  .modal-registro-close {
      position: absolute;

      right: 22px;
      top: 18px;

      width: 38px;
      height: 38px;

      border: 0;
      border-radius: 10px;

      background: #f1f5f9;

      color: #475569;

      font-size: 25px;
      line-height: 1;

      cursor: pointer;

      transition: .2s;
  }

  .modal-registro-close:hover {
      background: #e2e8f0;
      color: #0f172a;
  }


  /* ICONO */

  .registro-icon {
      width: 54px;
      height: 54px;

      display: flex;
      align-items: center;
      justify-content: center;

      margin-bottom: 18px;

      border-radius: 16px;

      background: linear-gradient(135deg,
              #2563eb,
              #3b82f6);
  }

  .registro-icon svg {
      width: 26px;
      height: 26px;
      fill: #fff;
  }

  /* HEADER */

  .registro-header {
      margin-bottom: 28px;
  }

  .registro-header h2 {
      margin: 0 0 7px;

      font-size: 26px;
      font-weight: 800;

      color: #172554;
  }

  .registro-header p {
      margin: 0;

      font-size: 14px;
      line-height: 1.5;

      color: #64748b;
  }


  /* CAMPOS */

  .registro-field {
      margin-bottom: 18px;
  }

  .registro-field label {
      display: block;

      margin-bottom: 7px;

      color: #334155;

      font-size: 13px;
      font-weight: 700;
  }

  .registro-field small {
      display: block;

      margin-top: 6px;

      color: #94a3b8;

      font-size: 12px;
  }

  .registro-input {
      position: relative;
  }

  .registro-input input {
      width: 100%;
      height: 48px;

      box-sizing: border-box;

      padding: 0 15px 0 48px;

      border: 1px solid #d7dee8;
      border-radius: 11px;

      background: #fff;

      color: #0f172a;

      font-size: 14px;

      outline: none;

      transition:
          border-color .2s,
          box-shadow .2s;
  }

  .registro-input input::placeholder {
      color: #a0aec0;
  }

  .registro-input input:focus {
      border-color: #3b82f6;

      box-shadow:
          0 0 0 4px rgba(59, 130, 246, .10);
  }


  /* ICONITO DENTRO INPUT */

  .input-icon {
      position: absolute;

      left: 15px;
      top: 50%;

      transform: translateY(-50%);

      min-width: 20px;

      color: #64748b;

      font-size: 12px;
      font-weight: 800;

      text-align: center;

      pointer-events: none;
  }


  /* CONTRASEÑAS EN DOS COLUMNAS */

  .registro-grid {
      display: grid;

      grid-template-columns:
          repeat(2, minmax(0, 1fr));

      gap: 14px;
  }


  /* MENSAJE IMPORTANTE */

  .registro-info {
      display: flex;

      gap: 12px;

      margin: 4px 0 22px;

      padding: 14px 16px;

      border: 1px solid #dbeafe;
      border-radius: 12px;

      background: #eff6ff;

      font-size: 12px;
      line-height: 1.5;

      color: #475569;
  }

  .registro-info strong {
      color: #1d4ed8;
  }


  /* BOTONES */

  .btn-registro {
      width: 100%;
      height: 50px;

      border: 0;
      border-radius: 11px;

      background: linear-gradient(135deg,
              #172554,
              #312e81);

      color: #ffffff;

      font-size: 14px;
      font-weight: 800;

      cursor: pointer;

      transition:
          transform .15s,
          box-shadow .15s;
  }

  .btn-registro:hover {
      transform: translateY(-1px);

      box-shadow:
          0 8px 20px rgba(49, 46, 129, .20);
  }

  .btn-registro-cancelar {
      width: 100%;
      height: 46px;

      margin-top: 10px;

      border: 0;
      border-radius: 11px;

      background: #f1f5f9;

      color: #475569;

      font-size: 13px;
      font-weight: 700;

      cursor: pointer;
  }

  .btn-registro-cancelar:hover {
      background: #e2e8f0;
  }


  /* MOBILE */

  @media(max-width:650px) {

      .modal-registro {
          padding: 12px;
      }

      .modal-registro-box {
          padding: 28px 22px;
          border-radius: 18px;
      }

      .registro-grid {
          grid-template-columns: 1fr;
          gap: 0;
      }

  }

  /* =========================================================
   PANEL DE AYUDA ANIMADO
========================================================= */

  .login-copy {
      width: 100%;
      max-width: 540px;
  }

  .login-copy-intro {
      max-width: 500px;
      margin-bottom: 30px;
  }


  /* TARJETA */

  .login-guide {
      width: 100%;

      margin-top: 30px;

      padding: 24px;

      box-sizing: border-box;

      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;

      background:
          linear-gradient(135deg,
              rgba(255, 255, 255, .10),
              rgba(255, 255, 255, .045));

      backdrop-filter: blur(10px);

      box-shadow:
          0 20px 45px rgba(0, 0, 0, .12);

      overflow: hidden;
  }


  /* CABECERA */

  .login-guide-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      margin-bottom: 20px;
  }

  .login-guide-label {
      color: #7dd3fc;

      font-size: 10px;
      font-weight: 800;

      letter-spacing: 1.4px;
  }

  .login-guide-counter {
      color: rgba(255, 255, 255, .55);

      font-size: 11px;
      font-weight: 700;
  }


  /* CONTENIDO */

  .login-guide-content {
      position: relative;

      min-height: 145px;
  }


  /* SLIDES */

  .guide-slide {
      position: absolute;

      inset: 0;

      display: flex;
      align-items: flex-start;

      gap: 16px;

      opacity: 0;

      visibility: hidden;

      transform: translateX(25px);

      transition:
          opacity .45s ease,
          transform .45s ease,
          visibility .45s;
  }

  .guide-slide.activo {
      opacity: 1;

      visibility: visible;

      transform: translateX(0);
  }


  /* ICONO */

  .guide-icon {
      flex: 0 0 50px;

      width: 50px;
      height: 50px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 15px;

      background: rgba(125, 211, 252, .14);

      border: 1px solid rgba(125, 211, 252, .20);

      box-shadow:
          0 8px 25px rgba(0, 0, 0, .08);
  }

  .guide-icon svg {
      width: 25px;
      height: 25px;

      fill: #7dd3fc;
  }


  /* TEXTO */

  .guide-text {
      flex: 1;
  }

  .guide-small {
      display: block;

      margin-bottom: 6px;

      color: #7dd3fc;

      font-size: 9px;
      font-weight: 800;

      letter-spacing: 1px;
  }

  .guide-text h3 {
      margin: 0 0 8px;

      color: #ffffff;

      font-size: 18px;
      font-weight: 800;

      line-height: 1.25;
  }

  .guide-text p {
      margin: 0;

      color: rgba(255, 255, 255, .76);

      font-size: 12px;

      line-height: 1.6;
  }

  .guide-text strong {
      color: #ffffff;
      font-weight: 800;
  }


  /* PUNTITOS */

  .guide-progress {
      display: flex;
      align-items: center;

      gap: 7px;

      margin-top: 18px;
  }

  .guide-dot {
      width: 7px;
      height: 7px;

      padding: 0;

      border: 0;
      border-radius: 20px;

      background: rgba(255, 255, 255, .28);

      cursor: pointer;

      transition: .3s;
  }

  .guide-dot.activo {
      width: 24px;

      background: #7dd3fc;
  }


  /* MOBILE */

  @media(max-width:900px) {

      .login-guide {
          display: none;
      }

  }