/* ==========================================================================
   Mejoras Estéticas para Formulario de Contraseña
   ========================================================================== */

/* 1. Contenedor para posicionar el icono del ojo */
.password-input-wrapper {
    position: relative; /* Base para el posicionamiento absoluto del icono */
}

/* 2. Estilo y posición del icono del ojo */
.toggle-password-vis {
    position: absolute;
    top: 50%;
    right: 15px; /* Lo movemos a la derecha del campo */
    transform: translateY(-50%); /* Centrado vertical perfecto */
    cursor: pointer;
    color: var(--df-text-secondary); /* Un color sutil */
    transition: color 0.2s ease;
}

.toggle-password-vis:hover {
    color: var(--df-primary); /* Color primario al pasar el mouse */
}

/* 3. Contenedor del medidor de fortaleza */
.password-strength-meter {
    height: 8px; /* Un poco más grueso para mejor visibilidad */
    background-color: #e2e8f0; /* Fondo gris claro */
    border-radius: 4px;
    margin-top: 8px;
    width: 100%;
    overflow: hidden; /* Importante para que la barra interna no se salga */
}

/* 4. Barra de color interna que muestra la fortaleza */
.strength-bar {
    height: 100%;
    width: 0%; /* La barra empieza vacía */
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
}

/* 5. Texto que indica la fortaleza (Débil, Media, Fuerte) */
.strength-text {
    display: block;
    font-size: 0.85rem;
    margin-top: 5px;
    font-weight: 500;
    text-align: right; /* Alineado a la derecha, debajo de la barra */
    transition: color 0.4s ease;
}

/* 6. Colores dinámicos para la barra y el texto (usando tus clases de JS) */
.strength-bar.weak, .strength-bar.medium { background-color: #dc2626; } /* Rojo para débil */
.strength-bar.strong { background-color: #f59e0b; } /* Naranja para buena */
.strength-bar.very-strong { background-color: #16a34a; } /* Verde para fuerte */

.strength-text.weak, .strength-text.medium { color: #dc2626; }
.strength-text.strong { color: #f59e0b; }
.strength-text.very-strong { color: #16a34a; }


/* ==========================================================================
   Mejoras de Jerarquía para Requisitos de Contraseña
   ========================================================================== */

/* 1. El contenedor principal de los requisitos */
.df-password-policy {
    background-color: var(--df-bg-main); /* Un fondo muy sutil, como el del body */
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm); /* Bordes redondeados */
    padding: 1.5rem; /* Espacio interno */
    margin: 2rem 0;  /* Margen superior e inferior para separarlo del resto */
}

/* 2. El título "La contraseña debe cumplir..." */
.df-password-policy h4 {
    margin-top: 0; /* Quitamos el margen superior del título */
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--df-border); /* Línea divisoria */
}

/* 3. La lista de requisitos (CORREGIDO) */
#df-password-reset-form .df-password-policy ul {
    list-style-type: none !important; /* Forzamos la eliminación de la viñeta */
    padding-left: 0;                  /* Reseteamos el espacio que dejaba la viñeta */
    margin-bottom: 0;
}


/* 4. Cada elemento de la lista (cada requisito) */
.df-password-policy li {
    padding-left: 1.5rem; /* Espacio para el nuevo ícono */
    position: relative;
    margin-bottom: 0.75rem; /* Espacio entre cada requisito */
    color: var(--df-text-secondary);
}

.df-password-policy li:last-child {
    margin-bottom: 0; /* Quitamos el margen del último elemento */
}

/* 5. El ícono que reemplaza la viñeta */
.df-password-policy li::before {
    content: '\f058'; /* Código del ícono de check de Font Awesome */
    font-family: 'Font Awesome 6 Free'; /* Asegúrate de usar la versión correcta */
    font-weight: 900; /* Para íconos sólidos */
    color: var(--df-success); /* Color verde de éxito */
    position: absolute;
    left: 0;
    top: 2px;
}