:root {
    /* Tema Claro (Padrão) */
    --bg-color-light: #FDFDFD;
    --text-color-light: #333333;
    --panel-bg-light: #F0F0F0;
    --border-color-light: #E0E0E0;
    --accent-color-light: #5A7D9A; /* Azul acinzentado */
    --hover-bg-light: #E5E5E5;
    --verse-number-color-light: #888;

    /* Tema Escuro */
    --bg-color-dark: #1E1E1E;
    --text-color-dark: #D0D0D0;
    --panel-bg-dark: #2A2A2A;
    --border-color-dark: #444444;
    --accent-color-dark: #8FBC8F; /* Verde sálvia */
    --hover-bg-dark: #3A3A3A;
    --verse-number-color-dark: #aaa;

    /* Fontes */
    --font-ui: 'Inter', sans-serif;
    --font-bible: 'Merriweather', serif;

    /* Transições */
    --transition-speed: 0.3s;
}

/* Aplicar variáveis baseadas no tema */
.theme-light {
    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --panel-bg: var(--panel-bg-light);
    --border-color: var(--border-color-light);
    --accent-color: var(--accent-color-light);
    --hover-bg: var(--hover-bg-light);
    --verse-number-color: var(--verse-number-color-light);
}

.theme-dark {
    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
    --panel-bg: var(--panel-bg-dark);
    --border-color: var(--border-color-dark);
    --accent-color: var(--accent-color-dark);
    --hover-bg: var(--hover-bg-dark);
    --verse-number-color: var(--verse-number-color-dark);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ui);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    font-size: 16px; /* Base font size */
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    text-decoration: underline;
}

/* Layout Principal */
.app-container {
    display: grid;
    grid-template-columns: 280px 1fr auto; /* Nav | Conteúdo | Ferramentas (auto para colapsar) */
    height: 100vh;
    overflow: hidden;
}

/* Painéis Laterais (Navegação e Ferramentas) */
.navigation-panel,
.tools-panel {
    background-color: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.tools-panel {
    border-right: none;
    border-left: 1px solid var(--border-color);
    width: 280px; /* Largura inicial, pode ser ajustada ou colapsada */
    /* display: none; */ /* Começar oculto se preferir */
}

.panel-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.panel-toggle-close {
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 5px;
    display: none; /* Visível apenas em mobile quando painel está aberto */
}

.book-list {
    overflow-y: auto;
    flex-grow: 1;
    padding: 15px;
}

.book-list h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.book-list ul {
    list-style: none;
}

.book-list li a {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    color: var(--text-color);
    font-size: 0.95rem;
}

.book-list li a:hover,
.book-list li a.active {
    background-color: var(--hover-bg);
    color: var(--accent-color);
    text-decoration: none;
}

/* Área de Conteúdo Principal */
.main-content-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-color);
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.panel-toggle-open {
    font-size: 1.3rem;
    margin-right: 15px;
    display: none; /* Visível apenas em mobile */
}

.chapter-navigation {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-arrow {
    font-size: 1rem;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background-color var(--transition-speed) ease;
}

.nav-arrow:hover {
    background-color: var(--hover-bg);
}

.current-location {
    font-size: 1.1rem;
    font-weight: 600;
}

.current-book {
    margin-right: 5px;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tool-button {
    font-size: 1.2rem;
    padding: 5px;
    border-radius: 4px;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.tool-button:hover {
    background-color: var(--hover-bg);
    color: var(--accent-color);
}

/* Conteúdo do Texto Bíblico */
.bible-text-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px 40px; /* Mais padding para conforto visual */
    font-size: 1.1rem; /* Tamanho base para leitura */
    line-height: 1.8; /* Espaçamento generoso */
    max-width: 800px; /* Limita largura da linha para legibilidade */
    margin: 0 auto; /* Centraliza coluna de texto */
}

.bible-text-content h2 {
    font-family: var(--font-ui);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
    color: var(--accent-color);
}

.bible-text-content p {
    margin-bottom: 1em;
}

.verse-number {
    font-size: 0.75em;
    color: var(--verse-number-color);
    font-weight: bold;
    margin-right: 0.5em;
    vertical-align: super; /* Ou outra forma de destacar */
}

/* Layout Versículo por Linha (classe adicionada via JS) */
.layout-verse-by-verse .bible-text-content p {
    margin-bottom: 0.5em;
}

.layout-verse-by-verse .verse-number {
    display: inline-block;
    width: 25px; /* Alinha os números */
    text-align: right;
    margin-right: 10px;
    vertical-align: baseline;
}

/* Painel de Ferramentas (Direita) */
.tools-panel {
    padding: 0 15px;
    overflow-y: auto;
}

.search-section,
.display-settings {
    margin-bottom: 25px;
}

.tools-panel h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--accent-color);
}

.tools-panel input[type="search"],
.tools-panel select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.tools-panel button {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--hover-bg);
    margin-right: 5px;
}

.tools-panel button:hover {
    background-color: var(--accent-color);
    color: white; /* Ajustar cor do texto no hover do botão */
    border-color: var(--accent-color);
}

.display-settings label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-weight: 500;
}

.font-size-indicator {
    display: inline-block;
    min-width: 50px;
    text-align: center;
    margin: 0 5px;
}

/* Responsividade */
@media (max-width: 1024px) {
    .app-container {
        grid-template-columns: 240px 1fr; /* Oculta painel de ferramentas por padrão */
    }
    .tools-panel {
        /* Adicionar lógica JS para mostrar/ocultar */
        position: fixed; /* Ou absolute */
        right: 0;
        top: 0;
        height: 100%;
        transform: translateX(100%);
        transition: transform var(--transition-speed) ease;
        z-index: 100;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }
    .tools-panel.open {
        transform: translateX(0);
    }
    .bible-text-content {
        padding: 25px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .no-mobile{ display:none; }
    .app-container {
        grid-template-columns: 1fr; /* Apenas conteúdo principal visível */
    }
    .navigation-panel {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform var(--transition-speed) ease;
        z-index: 100;
        width: 280px; /* Ou outra largura */
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    .navigation-panel.open {
        transform: translateX(0);
    }
    .panel-toggle-open,
    .panel-toggle-close {
        display: block; /* Mostra botões de abrir/fechar painéis */
    }
    .content-header {
        padding: 10px 15px;
    }
    .chapter-navigation {
        gap: 10px;
    }
    .current-location {
        font-size: 1rem;
    }
    .header-tools {
        gap: 5px;
    }
    .tool-button {
        font-size: 1.1rem;
    }
    .bible-text-content {
        padding: 20px 15px;
        max-width: 100%; /* Ocupa toda a largura */
    }
}





/* Estilo para o Seletor de Capítulo */
.chapter-select {
    font-family: var(--font-ui);
    font-size: 1rem; /* Ajustar conforme necessário */
    font-weight: 600;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin-left: 5px; /* Espaçamento do nome do livro */
    max-width: 150px; /* Evitar que fique muito largo */
    cursor: pointer;
    transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.chapter-select:hover {
    border-color: var(--accent-color);
}

.chapter-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 90, 125, 154), 0.3); /* Adicionar um brilho no foco */
}

/* Adicionar variável RGB para accent color para o box-shadow */
:root {
    /* ... outras variáveis ... */
    --accent-color-light-rgb: 90, 125, 154;
    --accent-color-dark-rgb: 143, 188, 143;
    /* ... */
}

.theme-light {
    /* ... */
    --accent-color-rgb: var(--accent-color-light-rgb);
}

.theme-dark {
    /* ... */
    --accent-color-rgb: var(--accent-color-dark-rgb);
}


/* bible_style.css - Refinamentos Mobile */

/* Ajustes gerais para telas menores */
@media (max-width: 768px) {
    /* ... outros estilos mobile ... */

    .content-header {
        padding: 8px 10px; /* Reduzir padding no header mobile */
        gap: 8px; /* Reduzir espaçamento entre grupos de elementos */
    }

    .panel-toggle-open {
        margin-right: 5px; /* Menos margem para o botão de menu */
    }

    .chapter-navigation {
        gap: 5px; /* Menos espaço na navegação de capítulo */
        flex-grow: 1; /* Permitir que o seletor de capítulo ocupe espaço */
        justify-content: center; /* Centralizar se houver espaço */
    }

    .current-location {
        font-size: 0.9rem; /* Fonte ligeiramente menor para livro/capítulo */
        display: flex; /* Alinhar livro e select */
        align-items: center;
        flex-wrap: wrap; /* Permitir quebra se necessário */
        justify-content: center;
    }

    .current-book {
        margin-right: 5px;
        white-space: nowrap; /* Evitar quebra do nome do livro */
    }

    .chapter-select {
        font-size: 0.9rem; /* Fonte menor para o select */
        padding: 4px 6px;
        max-width: 120px; /* Limitar largura do select */
        margin-left: 0; /* Remover margem esquerda */
    }

    .nav-arrow {
        font-size: 0.9rem; /* Setas menores */
        padding: 4px 6px;
    }

    .header-tools {
        gap: 5px; /* Menos espaço entre ferramentas */
    }

    .tool-button {
        font-size: 1.1rem; /* Ícones ligeiramente menores */
        padding: 4px;
    }

    .bible-text-content {
        padding: 15px 10px; /* Menos padding lateral no conteúdo */
        font-size: 1rem; /* Ajustar tamanho base se necessário */
    }

    /* Ajustar painéis laterais para ocupar tela inteira quando abertos */
    .navigation-panel,
    .tools-panel {
        width: 90%; /* Ocupar quase toda a tela */
        max-width: 320px; /* Mas limitar a largura máxima */
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }

    .navigation-panel.open {
        transform: translateX(0);
    }

    .tools-panel.open {
        transform: translateX(0);
        right: 0; /* Garantir que abra da direita */
        left: auto;
    }

    /* Adicionar um overlay escuro quando o painel estiver aberto */
    body.panel-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 90; /* Abaixo do painel */
        opacity: 1;
        transition: opacity var(--transition-speed) ease;
    }

    body:not(.panel-open)::before {
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    .current-location {
        font-size: 0.85rem;
    }
    .chapter-select {
        font-size: 0.85rem;
        max-width: 100px;
    }
    .header-tools {
        /* Opcional: Mover algumas ferramentas para dentro do painel de Configurações */
        /* Ex: Ocultar busca no header e deixar só no painel */
        /* .search-button { display: none; } */
    }
    .bible-text-content {
        font-size: 0.95rem; /* Ajustar se necessário */
    }
}


/* Ajuste para rolagem da área de conteúdo principal */
.main-content-area {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ocupa toda a altura da viewport */
    overflow: hidden; /* Evita rolagem no container principal */
}

.content-header {
    flex-shrink: 0; /* Não deixa o header encolher */
    /* Estilos existentes do header... */
}

.bible-text-content {
    flex-grow: 1; /* Ocupa o espaço restante */
    overflow-y: auto; /* Permite rolagem vertical APENAS nesta área */
    padding: 20px; /* Mantém o padding */
    /* Estilos existentes do conteúdo... */
}


/* Ajuste para rolagem do painel de navegação lateral */
.navigation-panel {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ocupa toda a altura da viewport */
    overflow: hidden; /* Evita rolagem no painel em si */
    /* Estilos existentes do painel... */
}

.navigation-panel .panel-header {
    flex-shrink: 0; /* Não deixa o header do painel encolher */
    /* Estilos existentes do header do painel... */
}

.book-list {
    flex-grow: 1; /* Ocupa o espaço restante no painel */
    overflow-y: auto; /* Permite rolagem vertical APENAS na lista de livros */
    padding: 10px; /* Adicionar padding se necessário */
    /* Estilos existentes da lista de livros... */
}

/* Opcional: Estilizar a barra de rolagem (Webkit) */
.book-list::-webkit-scrollbar {
    width: 6px;
}

.book-list::-webkit-scrollbar-track {
    background: transparent; /* Ou var(--bg-secondary) */
}

.book-list::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color, rgba(0, 0, 0, 0.3)); /* Usar variável de cor */
    border-radius: 3px;
}

/* Adicionar variável para cor da barra de rolagem */
:root {
    /* ... */
    --scrollbar-color-light: rgba(0, 0, 0, 0.3);
    --scrollbar-color-dark: rgba(255, 255, 255, 0.3);
}

.theme-light {
    /* ... */
    --scrollbar-color: var(--scrollbar-color-light);
}

.theme-dark {
    /* ... */
    --scrollbar-color: var(--scrollbar-color-dark);
}