/**
 * FIX CRÍTICO - Imágenes de Profesionales Cortadas
 *
 * PROBLEMA IDENTIFICADO:
 * - Las fotos de los profesionales se ven mal (solo 1/4 parte visible)
 * - Múltiples archivos CSS con estilos contradictorios
 * - Faltan propiedades object-fit y object-position
 * - Contenedores con dimensiones incorrectas
 *
 * SOLUCIÓN:
 * 1. Unificar estilos de avatares con !important
 * 2. Agregar object-fit: cover y object-position: center
 * 3. Corregir dimensiones de contenedores
 * 4. Asegurar responsive design
 *
 * @package ConectaTerapia
 * @since 2.0.0
 */

/* ============================================================
   FIX UNIFICADO - AVATARES DE PROFESIONALES
   ============================================================ */

/* Contenedor principal del avatar */
.ct-card-avatar,
.ct-pro-card__avatar-container,
figure.ct-card-avatar,
figure.ct-pro-card__avatar {
    position: relative !important;
    width: 100% !important;
    max-width: 120px !important;
    min-width: 80px !important;
    aspect-ratio: 1 / 1 !important; /* Siempre cuadrado */
    margin: 0 auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #F5F5F5 !important;
    border: 3px solid rgba(255,255,255,0.8) !important;
    box-shadow: 0 4px 16px rgba(80, 164, 167, 0.15) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Imagen del avatar - ESTILO CRÍTICO */
.ct-card-avatar img,
.ct-pro-card__avatar-container img,
figure.ct-card-avatar img,
figure.ct-pro-card__avatar img,
.ct-pro-card__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Asegura que la imagen cubra todo el contenedor */
    object-position: center center !important; /* Centra la imagen */
    display: block !important;
    border-radius: 0 !important; /* El border está en el contenedor */
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important; /* Permite que la imagen crezca más allá de sus dimensiones originales */
    min-height: 100% !important;
    min-width: 100% !important;
}

/* Contenedor anillo decorativo */
.ct-pro-card__avatar-ring {
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #50A4A7, #177275) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Hover effects - Suaves y no destructivos */
.ct-professional-card:hover .ct-card-avatar,
.ct-pro-card:hover .ct-pro-card__avatar,
.ct-pro-card--premium:hover .ct-pro-card__avatar {
    transform: scale(1.05) !important;
    border-color: #50A4A7 !important;
    box-shadow: 0 6px 24px rgba(80, 164, 167, 0.25) !important;
}

.ct-professional-card:hover .ct-card-avatar img,
.ct-pro-card:hover .ct-pro-card__avatar img,
.ct-pro-card--premium:hover .ct-pro-card__avatar img {
    transform: scale(1.05) !important;
}

/* ============================================================
   ESPECÍFICO PARA EL CARRUSEL INFINITO
   ============================================================ */

.ct-pro-card__avatar-container {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
}

.ct-pro-card__avatar-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

/* ============================================================
   ESPECÍFICO PARA TARJETAS UNIFICADAS
   ============================================================ */

.ct-card-avatar {
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
}

/* ============================================================
   ESPECÍFICO PARA TARJETAS PREMIUM
   ============================================================ */

.ct-pro-card__avatar--premium {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
}

/* ============================================================
   RESPONSIVE - MÓVILES
   ============================================================ */

@media (max-width: 768px) {
    .ct-card-avatar,
    .ct-pro-card__avatar-container {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }

    .ct-pro-card__avatar--premium {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
    }
}

@media (max-width: 480px) {
    .ct-card-avatar,
    .ct-pro-card__avatar-container {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
    }

    .ct-pro-card__avatar--premium {
        width: 90px !important;
        height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
    }
}

/* ============================================================
   ESPECÍFICO PARA PÁGINA DE PROFESIONALES (GRID)
   ============================================================ */

.ct-professionals-results[data-view="grid"] .ct-pro-card__avatar-wrapper,
.ct-professionals-results[data-view="grid"] .ct-card-avatar {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
}

.ct-professionals-results[data-view="list"] .ct-pro-card__avatar-wrapper,
.ct-professionals-results[data-view="list"] .ct-card-avatar {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

/* ============================================================
   ESTADOS DE CARGA Y ERROR
   ============================================================ */

.ct-card-avatar img[src=""],
.ct-card-avatar img:not([src]),
.ct-pro-card__avatar img[src=""],
.ct-pro-card__avatar img:not([src]) {
    background: url('../img/default-profile.svg') no-repeat center center !important;
    background-size: contain !important;
}

/* ============================================================
   ANIMACIONES SUAVES
   ============================================================ */

.ct-card-avatar img,
.ct-pro-card__avatar img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

.ct-card-avatar img,
.ct-pro-card__avatar img {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* ============================================================
   CORRECCIÓN DE CASCADA - Asegurar que estos estilos ganen
   ============================================================ */

/* Sobrescribir cualquier estilo conflictivo */
.ct-professionals-section .ct-card-avatar,
.ct-professionals-section--premium .ct-pro-card__avatar,
.ct-professionals-grid .ct-card-avatar,
.ct-professionals-grid--premium .ct-pro-card__avatar {
    object-fit: cover !important;
    object-position: center center !important;
}

/* Prevenir distorsión */
.ct-professional-card figure img,
.ct-pro-card figure img,
.ct-pro-card--premium figure img {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}