/**
 * Estilos Frontend - Gestión Perfiles Suscriptores
 * 
 * Estilos para el botón del perfil en el frontend
 */

/* Contenedor del botón - FORZAR SIN MÁRGENES */
.perfil-button-container,
.borrar-perfil-container {
    margin: 0 !important; /* Sin márgenes superiores ni inferiores */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left;
}

/* Forzar sin márgenes en todos los contextos */
.woocommerce-MyAccount-content .perfil-button-container,
.woocommerce-MyAccount-content .borrar-perfil-container,
.elementor-widget-container .perfil-button-container,
.elementor-widget-container .borrar-perfil-container {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Estilos base del botón */
.perfil-button-container .button {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background-color: #2E647E;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
    box-sizing: border-box;
}

/* Hover del botón */
.perfil-button-container .button:hover {
    background-color: #BF9C4A !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Focus del botón (accesibilidad) */
.perfil-button-container .button:focus {
    outline: 2px solid #BF9C4A;
    outline-offset: 2px;
}

/* Estilos específicos para botón crear */
.btn-crear-perfil {
    background-color: #2E647E !important;
    color: #ffffff !important;
    font-weight: normal !important;
}

.btn-crear-perfil:hover {
    background-color: #BF9C4A !important;
    color: #ffffff !important;
}

/* Estilos específicos para botón editar */
.btn-editar-perfil {
    background-color: #2E647E !important;
    color: #ffffff !important;
    font-weight: normal !important;
}

.btn-editar-perfil:hover {
    background-color: #BF9C4A !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .perfil-button-container .button {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .perfil-button-container {
        text-align: center;
    }
}

/* Integración con WooCommerce */
.woocommerce-MyAccount-content .perfil-button-container {
    margin: 0; /* Sin márgenes superiores ni inferiores */
}

.woocommerce-MyAccount-content .perfil-button-container .button {
    font-family: inherit;
}

/* Estados adicionales */
.perfil-button-container .button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perfil-button-container .button:visited {
    color: #ffffff !important;
}

/* Compatibilidad con temas */
.perfil-button-container .button.woocommerce-button {
    border: none !important;
    background-image: none !important;
    text-shadow: none !important;
}

/* ========================================
   ESTILOS PARA BOTÓN BORRAR PERFIL
   ======================================== */

/* Contenedor específico para botón borrar */
.borrar-perfil-container {
    margin: 0; /* Sin márgenes superiores ni inferiores */
}

/* Estilos específicos para botón borrar - MÁXIMA PRIORIDAD */
.perfil-button-container .btn-borrar-perfil,
.borrar-perfil-container .btn-borrar-perfil,
.btn-borrar-perfil {
    background-color: #dc3545 !important; /* Rojo */
    color: #ffffff !important; /* Texto blanco */
    font-weight: normal !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* Hover del botón borrar */
.btn-borrar-perfil:hover {
    background-color: #000000 !important; /* Negro en hover */
    color: #ffffff !important; /* Texto blanco */
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Focus del botón borrar (accesibilidad) */
.btn-borrar-perfil:focus {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Estado activo del botón borrar */
.btn-borrar-perfil:active {
    background-color: #c82333 !important;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Estado deshabilitado del botón borrar */
.btn-borrar-perfil:disabled {
    background-color: #6c757d !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.65;
    transform: none !important;
    box-shadow: none !important;
}

/* Compatibilidad con WooCommerce para botón borrar */
.woocommerce-MyAccount-content .borrar-perfil-container {
    margin: 0; /* Sin márgenes */
}

/* Responsive para botón borrar */
@media (max-width: 768px) {
    .borrar-perfil-container .btn-borrar-perfil {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
}