/**
 * ESTILOS PARA TOGGLE DE CONTRASEÑA
 * Funcionalidad de mostrar/ocultar contraseña con icono de ojo
 * Sistema: Ground Control - Gestión de Gimnasio
 */

:root {
    --password-toggle-size: 2.5rem;
    --password-toggle-color: #94a3b8;
    --password-toggle-hover-color: #ff6b00;
    --password-toggle-active-color: #e65500;
}

/* Contenedor del campo de contraseña */
.password-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Input de contraseña con espacio para el botón */
.password-field-wrapper input[type="password"],
.password-field-wrapper input[type="text"].password-input {
    padding-right: 3.5rem;
    width: 100%;
}

/* Botón toggle de visibilidad */
.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--password-toggle-color);
    transition: color 0.2s ease, transform 0.1s ease;
    z-index: 10;
    border-radius: 0.375rem;
}

.password-toggle-btn:hover {
    color: var(--password-toggle-hover-color);
    background: rgba(255, 107, 0, 0.1);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
    color: var(--password-toggle-active-color);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--password-toggle-hover-color);
    outline-offset: 2px;
}

/* Icono del ojo */
.password-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

/* Animación suave al cambiar icono */
.password-toggle-btn[data-visible="true"] .password-toggle-icon {
    opacity: 0.9;
}

/* Responsive: Ajustar tamaño en móviles */
@media (max-width: 640px) {
    .password-toggle-btn {
        right: 0.5rem;
        padding: 0.375rem;
    }
    
    .password-toggle-icon {
        width: 1.125rem;
        height: 1.125rem;
    }
}

/* Accesibilidad: Alto contraste */
@media (prefers-contrast: high) {
    .password-toggle-btn {
        border: 1px solid currentColor;
    }
}

/* Accesibilidad: Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .password-toggle-btn {
        transition: none;
    }
    
    .password-toggle-btn:active {
        transform: translateY(-50%);
    }
}