/*
 * ======================================================================================
 * NOME DO PROJETO: BÍBLIA ÁGAPE
 * ARQUIVO: styles.css
 * DESCRIÇÃO: Folha de estilos globais, animações e utilitários visuais.
 * VERSÃO: 4.0.0
 * DESENVOLVIDO POR: Mateus Heringer
 * ======================================================================================
 */

/* Garante que o app não tenha scroll elástico indesejado no body */
body {
    overscroll-behavior-y: none;
    background-color: #ffffff;
    /* Previne fundo branco piscando */
}

/* Modo escuro no body */
.dark body {
    background-color: #111827;
    /* gray-900 */
}

/* ==========================================================================
   CORREÇÃO DE LAYOUT: HEADER E BOTÕES (Use este código)
   ========================================================================== */

:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
}

/* 1. CORREÇÃO DA BARRA DE TÍTULOS (HEADER) 
   Alvo: #main-header (presente no seu HTML)
*/
#main-header,
header {
    /* Adiciona espaço para o Notch (Entalhe) */
    padding-top: var(--sat) !important;

    /* Altura automática para acomodar o notch */
    height: auto !important;
    min-height: calc(4rem + var(--sat)) !important;

    /* IMPORTANTE: Impede quebra de linha entre Logo e Título */
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    /* Força linha única */
    white-space: nowrap !important;
    /* Texto não desce */

    /* Fixa no topo (caso não esteja no HTML) */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Garante que os containers dentro do header também não quebrem */
#main-header>div,
#main-header .flex {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* 2. CORREÇÃO DOS BOTÕES FLUTUANTES (Avançar/Voltar)
   Posiciona 10px acima da área de gestos.
*/
#reading-nav-bar,
.botoes-navegacao,
.fixed.bottom-8 {
    /* Ignora o 'bottom-8' do Tailwind e usa a Safe Area + 10px */
    bottom: calc(var(--sab) + 10px) !important;
    z-index: 40;
}

/* 3. COMPENSAÇÃO DO CONTEÚDO (Para não ficar atrás do Header) */
main,
#main-content {
    /* Empurra o texto para baixo para não ser comido pelo header fixo */
    padding-top: calc(4rem + var(--sat) + 10px) !important;
}

/* Ajuste Específico para o MENU INFERIOR (Fixo no fundo)
   Adiciona padding no fundo igual à barra de gestos (Home Indicator)
*/
nav.fixed.bottom-0 {
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);
    height: auto !important;
}

/* Ajuste para a Área de Conteúdo (MAIN)
   Compensa o espaço extra que o Header e o Footer ganharam
*/
main {
    /* Soma o padding original do Tailwind (pt-16 e pb-20) com a Safe Area */
    padding-top: calc(4rem + var(--sat)) !important;
    padding-bottom: calc(5rem + var(--sab)) !important;
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* * --------------------------------------------------------------------------------------
 * UTILITÁRIOS DE INTERFACE
 * Pequenos ajustes para melhorar a experiência visual do usuário (UX/UI).
 * -------------------------------------------------------------------------------------- 
 */

/* * Oculta a barra de rolagem (scrollbar) mantendo a funcionalidade de scroll.
 * Essencial para carrosséis ou listas horizontais onde a barra polui o visual.
 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Para Chrome, Safari e Opera */
}

.hide-scrollbar {
    -ms-overflow-style: none;
    /* Para Internet Explorer e Edge */
    scrollbar-width: none;
    /* Para Firefox */
}

/* * Remove a aparência nativa e inconsistente dos navegadores para elementos <select>.
 * Isso permite aplicarmos nossos próprios estilos personalizados via CSS/Tailwind.
 */
select {
    -webkit-appearance: none;
    appearance: none;
}


/* * --------------------------------------------------------------------------------------
 * CLASSES ESPECÍFICAS DO PROJETO
 * Estilização de componentes únicos como "Letras Vermelhas" e "Refrões".
 * -------------------------------------------------------------------------------------- 
 */

/* * Estilo "Red Letter" (Palavras de Jesus)
 * Usado para destacar falas diretas de Jesus nos textos bíblicos.
 * Adapta-se automaticamente ao modo claro e escuro.
 */
.red-letter {
    color: #b91c1c;
    /* Red-700: Um vermelho forte e legível no claro */
    font-weight: 500;
    /* Levemente mais grosso para destaque */
}

/* Red Letter no Modo Escuro (precisa ser mais claro para contraste) */
.dark .red-letter {
    color: #fb7185;
    /* Rose-400: Um vermelho rosado luminoso */
}


/* * Estilo para Refrão de Hinos
 * Cria um bloco visualmente distinto para separar estrofes de refrões.
 */
.hymn-chorus {
    background-color: rgba(180, 83, 9, 0.05);
    /* Fundo laranja/âmbar muito sutil */
    color: inherit;
    padding: 1.5rem;
    /* Espaço interno confortável */
    border-left: 3px solid #b45309;
    /* Barra lateral laranja para indicar citação/destaque */
    font-style: italic;
    /* Itálico para diferenciar da estrofe */
    font-weight: 500;
    /* Levemente mais grosso */
    margin-bottom: 2rem;
    border-radius: 0 0.5rem 0.5rem 0;
    /* Arredonda apenas o lado direito */
}

/* Refrão no Modo Escuro */
.dark .hymn-chorus {
    background-color: rgba(255, 255, 255, 0.05);
    /* Fundo branco translúcido */
    border-left: 3px solid #d6d3d1;
    /* Barra lateral cinza claro */
}

/* * --------------------------------------------------------------------------------------
 * ANIMAÇÕES PERSONALIZADAS
 * Keyframes para feedbacks visuais (sucesso, erro, carregamento).
 * -------------------------------------------------------------------------------------- 
 */

/* * Animação de Entrada (Fade In + Slide Up)
 * Usada em modais, toasts e menus que aparecem na tela.
 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.3s ease-out;
}

/* * Animação de Pulso (Feedback de Clique)
 * Efeito sutil ao clicar em botões de ação importante.
 */
@keyframes pulse-soft {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.btn-pulse:active {
    animation: pulse-soft 0.2s ease-in-out;
}

/* * --------------------------------------------------------------------------------------
 * CONFIGURAÇÕES DE SELEÇÃO E TOQUE
 * Melhorias de usabilidade para dispositivos móveis (Toque).
 * -------------------------------------------------------------------------------------- 
 */

/* * Previne o "Flash" cinza ao clicar em elementos no iOS/Android.
 * Torna a interação mais parecida com app nativo.
 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* * Impede a seleção de texto em elementos de interface (botões, menus).
 * Mantém a seleção de texto permitida apenas no conteúdo principal (versículos).
 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* * Garante que o texto bíblico seja selecionável para copiar/compartilhar. */
.selectable-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* * --------------------------------------------------------------------------------------
 * ESTILOS DE FORMULÁRIO E INPUTS
 * -------------------------------------------------------------------------------------- 
 */

/* Estilo do Input Range (Slider) - Customização Cross-Browser */
input[type=range] {
    -webkit-appearance: none;
    /* Remove estilo padrão */
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
    /* Remove borda azul padrão de foco */
}

/* Ajuste de foco para acessibilidade (apenas teclado) */
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
    outline: none;
}

/* * --------------------------------------------------------------------------------------
 * CORES DE DESTAQUE (HIGHLIGHTS)
 * Cores usadas para marcar versículos.
 * -------------------------------------------------------------------------------------- 
 */

/* Amarelo (Padrão) */
.highlight-yellow {
    background-color: rgba(253, 224, 71, 0.4);
    /* yellow-300 com transparência */
}

.dark .highlight-yellow {
    background-color: rgba(253, 224, 71, 0.25);
    /* Mais sutil no escuro */
}

/* Verde */
.highlight-green {
    background-color: rgba(134, 239, 172, 0.4);
    /* green-300 */
}

.dark .highlight-green {
    background-color: rgba(134, 239, 172, 0.25);
}

/* Azul */
.highlight-blue {
    background-color: rgba(147, 197, 253, 0.4);
    /* blue-300 */
}

.dark .highlight-blue {
    background-color: rgba(147, 197, 253, 0.25);
}

/* Rosa */
.highlight-pink {
    background-color: rgba(249, 168, 212, 0.4);
    /* pink-300 */
}

.dark .highlight-pink {
    background-color: rgba(249, 168, 212, 0.25);
}

/* Notificações (Toasts) - Centralização Corrigida */
.toast {
    visibility: hidden;
    min-width: 250px;
    /* REMOVA o margin-left antigo */
    /* margin-left: -125px; */

    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    /* Borda mais arredondada e moderna */
    padding: 16px 24px;

    position: fixed;
    z-index: 1000;
    /* Garante que fique sobre tudo */

    /* Lógica de Centralização Perfeita */
    left: 50%;
    transform: translateX(-50%);
    /* O segredo: move 50% da própria largura para a esquerda */

    bottom: 30px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* Sombra mais destacada */

    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s, visibility 0.3s;
}

/* Toast Visível */
.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
    /* Sobe um pouco ao aparecer */
}

/* Cores de Status */
.toast.success {
    background-color: #10b981;
}

/* Verde */
.toast.error {
    background-color: #ef4444;
}

/* Vermelho */

/* * --------------------------------------------------------------------------------------
 * AJUSTE DE BOTÕES FLUTUANTES
 * Posiciona os botões de avançar/voltar 10px acima da área de gestos/borda
 * -------------------------------------------------------------------------------------- 
 */
.botoes-navegacao,
.fixed.bottom-4,
#reading-nav-bar {
    /* 10px de margem + Área Segura (para não colar na barra do iPhone/Android) */
    bottom: calc(env(safe-area-inset-bottom) + 15px) !important;

    /* Garante que fiquem acima do texto */
    z-index: 40;
}

/* --- CORREÇÃO DE QUEBRA DE LINHA (HEADER) --- */
.brand-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
    white-space: nowrap;
    /* Impede quebra de texto */
    flex-shrink: 0;
    /* Impede que o container encolha */
}

.brand-title {
    white-space: nowrap;
    /* Garante que 'Bíblia Ágape' fique em uma linha */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Garante que os botões caibam sem quebrar o layout */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}