.tab-btn.active {
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #2563eb !important;
}

.tab-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#main-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
    .tab-btn i {
        font-size: 1.25rem;
    }
}

#res {
    scroll-margin-top: 5rem;
}

.overflow-hidden.border.border-gray-100 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 300px; 
}

#res > div {
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .tab-btn i {
        font-size: 1.25rem;
    }
    .tab-btn span:not(.text-base) {
        display: none;
    }
}

/* Esconder Nav Superior no Mobile e mostrar no Desktop */
#main-nav {
    display: none;
}

@media (min-width: 768px) {
    #main-nav {
        display: block;
    }
    #bottom-nav {
        display: none;
    }
}

/* Ajuste do corpo para não ser cortado pela barra fixa */
body {
    padding-bottom: 5rem; /* Espaço para a barra inferior no mobile */
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* Estética da Tab Bar */
#bottom-nav {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9);
}

/* Safe Area para iPhones novos (com notch embaixo) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Esconde o container de abas original no mobile */
@media (max-width: 767px) {
    #abas-navegacao, 
    .tab-container { 
        display: none !important; 
    }
    
    /* Garante que as seções tenham respiro por causa do nav inferior */
    .tab-content {
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    /* Ajusta o Nav para não esmagar os itens */
    #bottom-nav .flex {
        justify-content: space-around;
        gap: 4px;
        padding: 0 8px;
    }

    /* Diminui um pouco o texto para caber tudo */
    .nav-item span {
        font-size: 9px !important;
        letter-spacing: -0.02em;
    }

    /* Ajuste para o botão (+) da lista não fugir da tela */
    #secao-lista .flex.gap-2 {
        flex-wrap: nowrap;
    }
    
    #input-lista {
        width: 100%; /* Garante que o input empurre o botão, mas não saia da tela */
    }
}
/* Quando a checkbox estiver marcada, risca o texto ao lado */
.item-checkbox:checked + .item-texto {
    text-decoration: line-through;
    opacity: 0.5;
    color: #9ca3af;
}

/* Animação suave para novos itens */
.animate-fade-in {
    animation: fadeInItem 0.4s ease-out forwards;
}

@keyframes fadeInItem {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.custom-scroll::-webkit-scrollbar {
    width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}