/*
+----------------------------------------------------------------+
| Melhorias de Acessibilidade - Áreas tocáveis e interativas
+----------------------------------------------------------------+
*/

/* Garante que todas as áreas tocáveis tenham pelo menos 44x44px (recomendação WCAG) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
a.btn,
.chat-input-tool,
.chat-send,
.torpedo-nav a,
.selectOptions a,
.media-item {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    touch-action: manipulation;
}

/* Melhorias específicas para campos de formulário */
textarea, 
input[type=tel], 
input[type=text], 
input[type=email],
input[type=number],
select {
    padding: 10px;
    min-height: 44px;
    font-size: 16px; /* Evita zoom em iOS */
}

/* Espaçamento entre elementos interativos */
.media-item,
.btn,
.torpedo-nav a {
    margin: 5px;
}

/* Corrige exibição de botões em linha */
.btn:first-child {
    margin-right: 8px;
}

/* Melhorias visuais para foco e hover */
button:focus,
input:focus,
a:focus,
.btn:focus,
.chat-send:focus,
.torpedo-nav a:focus {
    outline: 2px solid #FFA500;
    outline-offset: 2px;
}

/* Melhorias para dispositivos móveis */
@media screen and (max-width: 480px) {
    /* Aumenta tamanho dos botões em telas pequenas */
    .btn {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        margin: 10px 0;
        min-height: 48px;
    }
    
    /* Aumenta área de toque na navegação */
    .torpedo-nav a {
        padding: 12px;
        margin: 8px 4px;
        display: inline-block;
    }
    
    /* Ajusta tamanho das áreas interativas para chat */
    .chat-input-tool,
    .chat-send {
        min-width: 48px;
        min-height: 48px;
    }
    
    /* Melhora a visualização do botão enviar no chat */
    .chat-send {
        padding: 0 15px;
    }
    
    /* Aumenta espaço ao redor de elementos interativos */
    .media-item {
        padding: 15px;
        margin: 10px 5px;
    }
}