/* responsive.css - Otimização Integral e Universal Nexus Gestão */

@media (max-width: 850px) {

    /* 1. Ajuste da Estrutura Global */
    body {
        overflow-y: auto !important;
        height: auto !important;
    }

    .container-principal {
        flex-direction: column !important;
        height: auto !important;
    }

    /* 2. Cabeçalho (Header) */
    .cabecalho {
        height: auto !important;
        padding: 1.2rem 25px 1.2rem 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right;
    }

    .cabecalho h1 {
        font-size: 1.3rem !important;
        letter-spacing: 4px !important;
    }

    /* 3. Sidebar Universal (Barra de Navegação Superior) */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        background: linear-gradient(90deg,
                #FF0000 0%,
                #FF0000 20%,
                #0000FF 60%,
                #FF0000 100%);
        background-size: 100% 200%;
        animation: gradientMove 1s ease-in-out infinite;
        padding: 12px 15px 12px 80px !important;
        flex-direction: row !important;
        align-items: center !important;
        position: sticky !important;
        top: 0;
        z-index: 1000;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    @keyframes gradientMove {

        0%,
        100% {
            background-position: 0% 0%;
        }

        50% {
            background-position: 0% 70%;
        }
    }


    /* 4. Logo Criativo (Selo) */
    .logo {
        display: block !important;
        position: absolute !important;
        left: 15px !important;
        top: -35px !important;
        width: 60px !important;
        height: 60px !important;
        padding: 8px !important;
        border-radius: 50% !important;
        background: white !important;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
        z-index: 1100 !important;
        border: 2px solid var(--cor-primaria) !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    /* 5. Menu de Navegação */
    .menu {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 0 !important;
        display: flex !important;
    }

    .btn-nav {
        font-size: 0.75rem !important;
        padding: 10px 5px !important;
        flex: 1 !important;
        text-align: center !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        margin: 0 !important;
        transform: none !important;
        /* Remove o translateX da sidebar desktop */
    }

    /* 6. Dashboard e Grid de Cards (Index e Documentos) */
    .dashboard {
        padding: 25px 15px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 0 !important;
    }

    .cards-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .card {
        max-width: 100% !important;
        min-width: unset !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        padding: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .card img {
        max-width: 75% !important;
        max-height: 70% !important;
    }

    /* 7. Adaptação das Legendas (Suporta .legenda-card e .legend) */
    .legenda-card,
    .legend {
        position: absolute !important;
        bottom: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.7rem !important;
        padding: 5px 12px !important;
        width: 85% !important;
        opacity: 1 !important;
        /* Garante visibilidade no mobile sem hover */
        background-color: var(--cor-dark) !important;
        border-radius: 15px !important;
        color: white !important;
        text-align: center !important;
        display: block !important;
    }

    /* 8. Rodapé e Modal */
    .rodape-sidebar {
        display: none !important;
    }

    .modal-conteudo img {
        max-height: 60vh !important;
        /* Ajuste para não quebrar no mobile */
    }

    /* Estilização para transformar linhas da tabela em Cards no Mobile */

    /* 1. Esconde o cabeçalho original da tabela (opcional, mas limpa o visual) */
    /* Estilização para transformar linhas da tabela em Cards no Mobile */

    /* 1. Esconde o cabeçalho original */
    thead {
        display: none !important;
    }

    /* 2. Container dos cards com fundo leve para tirar o "branco total" */
    tbody {
        display: block !important;
        background-color: #f4f7f9 !important;
        /* Cor de fundo entre os cards */
        padding: 10px 5px !important;
        border-radius: 8px;
    }

    /* 3. O Card em si */
    tr {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-bottom: 12px !important;
        /* Espaçamento entre cards */
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        /* Card continua branco */
        padding: 15px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        width: 100% !important;
    }

    /* 4. Colunas de cima (Código, Marca, Veículo) */
    td:nth-child(1),
    td:nth-child(2),
    td:nth-child(3) {
        display: block !important;
        flex: 1 1 1 !important;
        border: none !important;
        font-size: 0.8rem !important;
        padding: 5px !important;
        color: #666;
    }

    /* 5. A coluna de Medida/Descrição (Linha de baixo) */
    td:nth-child(4) {
        display: block !important;
        flex: 1 1 100% !important;
        border-top: 1px dashed #eee !important;
        /* Linha divisória interna */
        margin-top: 10px !important;
        padding-top: 12px !important;
        font-weight: 600 !important;
        color: #222 !important;
        font-size: 0.9rem !important;
    }

    /* Ajuste do ícone de copiar para não quebrar o layout */
    .copy-icon {
        float: right;
        opacity: 0.6;
    }

    /* 9. Adaptação Específica para Página de Contato */
    .contato-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
        /* Reduz o padding interno no mobile */
        border-radius: 15px !important;
        box-shadow: none !important;
        /* Remove sombra pesada para leveza visual */
        background: transparent !important;
        /* Opcional: integra melhor ao fundo da dashboard */
    }

    .contato-container h2 {
        font-size: 1.5rem !important;
        text-align: center;
    }

    .contato-container p {
        font-size: 0.9rem !important;
        text-align: center;
        margin-bottom: 20px !important;
    }

    .form-contato {
        gap: 15px !important;
    }

    .grupo-input label {
        font-size: 0.85rem !important;
    }

    .grupo-input input,
    .grupo-input textarea {
        font-size: 1rem !important;
        /* Evita o zoom automático do iOS em inputs */
        padding: 10px !important;
    }

    .btn-enviar {
        width: 100% !important;
        padding: 14px !important;
        font-size: 0.9rem !important;
    }

    .contato-whatsapp {
        margin-top: 20px !important;
        padding-top: 15px !important;
    }

    .btn-whatsapp {
        width: 100% !important;
        /* Botão de WhatsApp ocupa largura total */
        justify-content: center;
    }

    /* Ajuste para o Toast no Mobile */
    .toast {
        width: 90% !important;
        right: 5% !important;
        left: 5% !important;
        bottom: 20px !important;
        /* Move para baixo para não cobrir o cabeçalho */
        top: auto !important;
        transform: translateY(150%);
    }

    .toast.show {
        transform: translateY(0) !important;
    }

    /* 10. Adaptação da Planilha de Acessórios para Mobile */

    /* Esconde o cabeçalho original da tabela no mobile */
    .tabela-acessorios thead {
        display: none !important;
    }

    /* Transforma o corpo da tabela em uma lista flexível */
    .tabela-acessorios tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Transforma cada linha (TR) em um Card individual */
    .tabela-acessorios tr {
        display: grid !important;
        grid-template-areas:
            "codigo marca"
            "veiculo veiculo"
            "medida medida"
            "acoes acoes";
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 20px !important;
        padding: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
    }

    /* Estilização das células (TD) dentro do Card */
    .tabela-acessorios td {
        display: block !important;
        padding: 5px !important;
        border: none !important;
        font-size: 0.9rem !important;
    }

    /* Identificando as colunas específicas pelo layout */
    .tabela-acessorios td:nth-child(1) {
        grid-area: codigo;
        font-weight: bold;
        color: var(--cor-primaria);
    }

    .tabela-acessorios td:nth-child(2) {
        grid-area: marca;
        text-align: right;
    }

    .tabela-acessorios td:nth-child(3) {
        grid-area: veiculo;
        border-top: 1px solid #eee !important;
        padding-top: 10px !important;
    }

    .tabela-acessorios td:nth-child(4) {
        grid-area: medida;
        font-weight: 600;
        color: #333;
    }

    .tabela-acessorios td:nth-child(5) {
        grid-area: acoes;
        text-align: center;
        background: #f9f9f9;
        border-radius: 8px;
        margin-top: 5px;
    }

    /* Ajuste do botão de copiar para o polegar no mobile */
    .copy-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px !important;
    }

    /* Ajuste dos Filtros de Acessórios */
    .filtros-acessorios {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .filtros-acessorios input,
    .filtros-acessorios select {
        width: 100% !important;
        height: 45px !important;
        /* Altura melhor para toque */
        font-size: 16px !important;
        /* Evita zoom no iOS */
    }

    /* No responsive.css, dentro do @media (max-width: 850px) */

    .dashboard {
        margin-left: 0 !important;
        /* Remove o empurrão da sidebar desktop */
        padding-top: 20px !important;
        width: 100% !important;
    }

}

/* Ajustes para Smartphones Pequenos */
@media (max-width: 400px) {
    .sidebar {
        padding-left: 65px !important;
    }

    .logo {
        width: 50px !important;
        height: 50px !important;
        top: -25px !important;
    }

    .btn-nav {
        font-size: 0.65rem !important;
    }

    .cards-row {
        grid-template-columns: 1fr !important;
    }
}

/* Dentro de @media (max-width: 850px) */

/* 1. Ajuste da Área de Filtros */
.filters {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 15px !important;
}

.filters input,
.filters select {
    width: 100% !important;
    /* Filtros ocupam largura total no mobile */
    margin: 0 !important;
}

/* 2. Scroll Horizontal na Tabela */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    /* Permite deslizar a tabela para o lado */
    -webkit-overflow-scrolling: touch;
    margin-top: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 3. Ajuste de Fontes da Tabela */
table {
    min-width: 600px;
    /* Garante que a tabela não esmague os dados */
    font-size: 0.85rem !important;
}

th,
td {
    padding: 10px 8px !important;
}

/* 4. Botões de Ação */
.btn-add,
.btn-export {
    width: 100% !important;
    justify-content: center;
    margin-bottom: 5px;
}