/* Correções Mobile Globais - Todos os Painéis e Páginas */

/* ============================================
   CORREÇÕES GERAIS
   ============================================ */

/* Garantir que containers não ultrapassem a largura */
.container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Tabelas responsivas */
@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    thead {
        display: none;
    }
    
    tbody {
        display: block;
        width: 100%;
    }
    
    tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        background: white;
    }
    
    td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        text-align: right;
    }
    
    td:before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: 1rem;
    }
}

/* ============================================
   PAINÉIS DASHBOARD
   ============================================ */

/* Menu mobile dos painéis */
@media (max-width: 1024px) {
    .mobile-menu-hidden {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    .mobile-menu-visible {
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
    }
}

/* Overlay mobile */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

/* Cards em grid - ajustar para mobile */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================
   HOME PAGE - CORREÇÕES
   ============================================ */

/* Banner carousel mobile */
@media (max-width: 768px) {
    section.relative.h-\[500px\] {
        height: 400px !important;
    }
    
    h1.text-4xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
    
    h2.text-2xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    /* Serviços carousel */
    #services-carousel {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #services-carousel .flex {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    #services-carousel .flex > div {
        scroll-snap-align: start;
        min-width: 85%;
    }
    
    /* Botões de navegação do carousel */
    #services-prev,
    #services-next {
        display: none !important;
    }
}

/* Cards de serviços */
@media (max-width: 640px) {
    .flex-shrink-0.w-full {
        width: 90% !important;
    }
}

/* ============================================
   NAVIGATION HEADER
   ============================================ */

@media (max-width: 1024px) {
    /* Esconder navegação desktop */
    nav.hidden.lg\\:flex {
        display: none !important;
    }
    
    /* Mostrar menu mobile */
    button.lg\\:hidden {
        display: block !important;
    }
}

/* Menu mobile hamburger */
@media (min-width: 1025px) {
    button.lg\\:hidden {
        display: none !important;
    }
}

/* ============================================
   FORMULÁRIOS
   ============================================ */

@media (max-width: 768px) {
    /* Inputs em grid - empilhar */
    .grid-cols-2 input,
    .grid-cols-2 select,
    .grid-cols-2 textarea {
        width: 100%;
    }
    
    /* Botões */
    .flex.justify-end,
    .flex.justify-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .flex.justify-end button,
    .flex.justify-between button {
        width: 100%;
    }
}

/* ============================================
   DASHBOARD CARDS
   ============================================ */

@media (max-width: 640px) {
    /* Cards de estatísticas */
    .bg-gradient-to-br {
        padding: 1rem !important;
    }
    
    .text-3xl,
    .text-4xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    /* Espaçamento */
    .p-6 {
        padding: 1rem !important;
    }
    
    .mb-6 {
        margin-bottom: 1rem !important;
    }
    
    .gap-6 {
        gap: 1rem !important;
    }
}

/* ============================================
   TABS E NAVEGAÇÃO INTERNA
   ============================================ */

@media (max-width: 768px) {
    /* Tabs - scroll horizontal */
    nav.flex {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    nav.flex::-webkit-scrollbar {
        display: none;
    }
    
    nav.flex button,
    nav.flex a {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ============================================
   MODAIS
   ============================================ */

@media (max-width: 768px) {
    /* Modal fullscreen em mobile */
    .fixed.inset-0 {
        padding: 1rem;
    }
    
    .max-w-md,
    .max-w-lg {
        max-width: 100% !important;
        margin: 0;
    }
}

/* ============================================
   TEXTO E TIPOGRAFIA
   ============================================ */

@media (max-width: 640px) {
    h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
}

/* ============================================
   ESPAÇAMENTOS MOBILE
   ============================================ */

@media (max-width: 640px) {
    .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ============================================
   UTILITÁRIOS
   ============================================ */

/* Scrollbar escondida */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Prevenir overflow horizontal */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ajustar imagens */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   CHECKOUT E PAGAMENTOS
   ============================================ */

@media (max-width: 768px) {
    /* Cards de pagamento */
    .payment-method-card {
        padding: 1rem !important;
    }
    
    /* Botões de ação */
    .action-buttons {
        flex-direction: column;
    }
    
    .action-buttons button {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ============================================
   CONSULTORES LISTAGEM
   ============================================ */

@media (max-width: 768px) {
    .consultant-card {
        width: 100% !important;
        margin-bottom: 1rem;
    }
}

/* ============================================
   FOOTER
   ============================================ */

@media (max-width: 768px) {
    footer .grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    footer .flex {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}