/* responsive.css (VERSÃO MELHORADA) */

/* ==========================================================================
   1. Estilos Gerais e Reset
   ========================================================================== */

/* Define o padding do body para acomodar o header fixo. */
body {
    /* Altura inicial para o header mobile que ocupa mais espaço vertical */
    /* padding-top: 320px;  */
    transition: padding-top 0.3s ease;
}


/* ==========================================================================
   2. Cabeçalho (Header)
   ========================================================================== */

/* Estilo base para mobile: header com altura automática e itens empilhados. */
header {
    top: 0;
    left: 0;
    width: 100%;
    background: #221e1a;
    border-bottom: 1px solid #54431f;
    z-index: 2000;
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: auto;
    /* Altura automática no mobile */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1200px) {
    header {
        position: fixed !important;
    }
}

#calculakin-inputdatas {
    display: flex;
    flex-direction: column;
    /* Itens empilhados verticalmente */
    align-items: stretch;
    /* Itens ocupam toda a largura */
    gap: 15px;
    width: 90%;
    /* Limita a largura dos inputs no mobile */
}

/* Oculta a linha divisória vertical no mobile */
#calculakin-inputdatas>div[style*="border-left"] {
    display: none;
}

.select-lua {
    width: 100%;
    /* Garante que o select ocupe todo o espaço */
}


/* ==========================================================================
   3. Barra de Navegação do Kin (Abaixo do Header)
   ========================================================================== */

.rota-popup-container {
    display: flex;
    height: auto;
    /* Altura automática */
    padding: 15px 0;
    width: 100%;
}

.rota-popup-container>.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

/* ESTILO MOBILE-FIRST: Botões individuais que quebram a linha */
.seletorkin-btns-navegacao {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    /* PERMITE que os botões quebrem a linha */
    justify-content: center;
    gap: 4px;
    /* Espaçamento entre os botões quando quebram a linha */
}

.seletorkin-btns-navegacao li {
    background-color: #2b2722;
    /* Cor de fundo EM CADA botão */
    border-radius: 6px;
    /* Borda arredondada EM CADA botão */
    border-right: none;
    /* Sem borda lateral no mobile */
    transition: background-color 0.2s;
}

.seletorkin-btns-navegacao li:hover {
    background-color: #4a4643;
}

.seletorkin-btns-navegacao a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    /* Altura menor e mais amigável para mobile */
    padding: 0 1rem;
    color: #e0e0e0;
    text-decoration: none;
    white-space: nowrap;
}


/* ==========================================================================
   6. Media Queries para Telas Maiores (Desktop)
   ========================================================================== */

/* A partir de 1200px, aplicamos o layout de desktop. */
@media (min-width: 1200px) {

    /* ... (suas outras regras para body, header, etc. continuam aqui) ... */

    .rota-popup-container>.text-center {
        flex-direction: row;
        /* Volta para o layout lado a lado no desktop */
        gap: 1rem;
    }

    /* ESTILO DESKTOP: Recria o visual de grupo de botões */
    .seletorkin-btns-navegacao {
        background-color: #2b2722;
        /* Fundo do GRUPO de botões */
        border-radius: 8px;
        /* Borda arredondada do GRUPO */
        overflow: hidden;
        height: 52px;
        /* Altura fixa do GRUPO */
        flex-wrap: nowrap;
        /* IMPEDE a quebra de linha */
        gap: 0;
        /* Remove o espaçamento entre os botões */
    }

    .seletorkin-btns-navegacao li {
        background-color: transparent;
        /* Remove o fundo individual do botão */
        border-radius: 0;
        /* Remove a borda individual */
    }

    /* Recria a linha divisória, exceto no último item */
    .seletorkin-btns-navegacao li:not(:last-child) {
        border-right: 1px solid #14120f;
    }

    .seletorkin-btns-navegacao a {
        height: 52px;
        /* Restaura a altura original do link */
    }

    .seletorkin-btns-navegacao li:hover {
        background-color: #4a4643;
        /* Efeito hover no item da lista */
    }

    /* ... (o resto das suas regras de media query) ... */
}


/* ==========================================================================
   4. Conteúdo Principal (#conteudo)
   ========================================================================== */

#conteudo {
    display: flex;
    flex-direction: column;
    /* Empilha as seções */
    align-items: center;
    padding-top: 20px;
    gap: 40px;
}

#orbital,
#poema {
    width: 90%;
    /* Ocupam a maior parte da largura da tela */
    max-width: 400px;
    /* Evita que fiquem grandes demais */
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   5. Seção Complementar e Inferior
   ========================================================================== */

#calculakin-complementar {
    display: flex;
    flex-direction: column;
    /* Empilha as informações */
    align-items: center;
    max-width: 90%;
    gap: 30px;
    padding-top: 3rem;
    margin: 0 auto;
}

/* Container que engloba a Onda e o Oráculo */
#campo-alternado>div {
    width: 95% !important;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 2rem;
    background-color: #2b2722;
    border-radius: 16px;
}


/* ==========================================================================
   6. Media Queries para Telas Maiores (Desktop)
   ========================================================================== */

/* A partir de 1200px, aplicamos o layout de desktop. */
@media (min-width: 1200px) {
    body {
        padding-top: 82px;
        /* Volta para a altura original do header */
    }

    header {
        height: 70px;
        /* Altura fixa no desktop */
        padding: 0.5rem 0;
    }

    #calculakin-inputdatas {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
    }

    /* Mostra a linha divisória novamente */
    #calculakin-inputdatas>div[style*="border-left"] {
        display: block;
    }

    .rota-popup-container {
        height: 52px;
    }

    .rota-popup-container>.text-center {
        flex-direction: row;
        gap: 1rem;
    }

    #conteudo {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        padding-top: 2%;
    }

    #orbital,
    #poema {
        width: 30%;
    }

    #calculakin-complementar {
        flex-direction: row;
        max-width: 60%;
    }

    #campo-alternado>div {
        width: 60% !important;
    }
}