/* =====================================================
   Touch Targets Adequados - ClubeMix
   =====================================================
   Descrição: Garantir tamanho mínimo de 44x44px para elementos clicáveis
   Data: 2025-11-09
   ===================================================== */

/* Touch Targets Mínimos */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Botões Responsivos */
.btn-mobile {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Links Responsivos */
a.touch-target {
    min-height: 44px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Espaçamento entre elementos clicáveis */
.touch-spacing {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.touch-spacing > * {
    margin: 0;
}

@media (max-width: 768px) {
    .touch-spacing {
        gap: 0.75rem;
    }
}

/* Botões de Ação em Tabelas */
.table-action-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

.table-action-btn:hover,
.table-action-btn:focus {
    transform: scale(1.1);
    outline: 2px solid rgba(255, 215, 0, 0.5);
    outline-offset: 2px;
}

/* Ícones Clicáveis */
.icon-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Menu Mobile */
.mobile-menu-button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.5rem;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Checkboxes e Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Labels para Checkboxes e Radio */
label {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

/* Cards Clicáveis */
.clickable-card {
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    tap-highlight-color: rgba(255, 215, 0, 0.2);
}

.clickable-card:active {
    transform: scale(0.98);
}

/* Melhorias para Mobile */
@media (max-width: 768px) {
    /* Aumentar tamanho de botões em mobile */
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Aumentar tamanho de links em mobile */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Espaçamento adicional em mobile */
    .mobile-spacing > * + * {
        margin-top: 1rem;
    }
}

/* Feedback Visual para Touch */
.touch-feedback {
    position: relative;
    overflow: hidden;
}

.touch-feedback::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.touch-feedback:active::after {
    width: 200px;
    height: 200px;
}