/* ============================================================================
   PERFIL COMERCIAL - MOBILE OPTIMIZATIONS
   ============================================================================ */

/* Asegurar que el contenido no se desborde */
body {
    overflow-x: hidden;
}

/* Optimizar competencias cards para móvil */
.competencia-card {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem;
}

.competencia-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.competencia-nombre {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.competencia-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
    align-self: flex-start;
}

/* Optimizar selector de cargo */
select {
    font-size: 1rem !important;
    padding: 0.875rem !important;
}

/* Botones responsive */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.button-container a {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
}

/* Media queries específicas */
@media (min-width: 640px) {
    .competencia-card-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .competencia-nombre {
        font-size: 1rem !important;
    }
    
    .competencia-badge {
        font-size: 0.875rem !important;
        align-self: auto;
    }
    
    .button-container {
        flex-direction: row;
    }
    
    .button-container a {
        width: auto;
        flex: 1;
    }
}

@media (max-width: 640px) {
    /* Header más compacto */
    .header-mobile {
        padding: 1rem !important;
    }
    
    /* Cards más compactas */
    .card-mobile {
        padding: 1.25rem !important;
        border-radius: 1.25rem !important;
    }
    
    /* Títulos más pequeños */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
}

/* Optimizar márgenes en pantallas pequeñas */
@media (max-width: 480px) {
    .max-w-4xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}