/*
==========================================================================
PORTAL DA BÍBLIA + PORTAL EBD
APP THEME V153 — IDENTIDADE VISUAL UNIFICADA
==========================================================================
Carregar ESTE arquivo depois do <style> interno de cada página.

Exemplo:
</style>
<link rel="stylesheet" href="/app-theme-ebd-v153.css?v=153">
</head>

Assim esta camada visual tem prioridade sobre os estilos antigos embutidos
sem alterar API, JavaScript, rotas, áudio, favoritos, histórico ou IA.
==========================================================================
*/

:root{
    --ui-primary:#1554c0;
    --ui-primary-dark:#0a347c;
    --ui-secondary:#6d28d9;
    --ui-accent:#149fd8;

    --ui-bg:#f5f7fb;
    --ui-surface:#ffffff;
    --ui-surface-soft:#f8faff;
    --ui-text:#14213d;
    --ui-muted:#667085;
    --ui-muted-2:#7b8497;
    --ui-border:#e4e9f2;
    --ui-blue-soft:#eaf2ff;
    --ui-shadow:0 16px 40px rgba(16,24,40,.08);

    /* compatibilidade com páginas existentes */
    --p:#1554c0;
    --s:#6d28d9;
    --m:#667085;
    --reader-primary:#1554c0;
    --reader-secondary:#6d28d9;
    --reader-cyan:#149fd8;
    --reader-muted:#667085;
}

html{
    background:var(--ui-bg) !important;
}

body{
    background:
        radial-gradient(circle at 8% 8%,rgba(21,84,192,.10),transparent 28rem),
        radial-gradient(circle at 92% 16%,rgba(109,40,217,.08),transparent 30rem),
        var(--ui-bg) !important;
    color:var(--ui-text) !important;
}

body::before{
    background:
        radial-gradient(circle at top left,rgba(21,84,192,.10),transparent 30%),
        radial-gradient(circle at bottom right,rgba(109,40,217,.07),transparent 35%),
        radial-gradient(circle at center,rgba(21,84,192,.035),transparent 40%) !important;
}

body::after{
    background-image:
        linear-gradient(rgba(20,33,61,.024) 1px,transparent 1px),
        linear-gradient(90deg,rgba(20,33,61,.024) 1px,transparent 1px) !important;
}

/* ==========================================================
   CABEÇALHO / IDENTIDADE
   ========================================================== */

.topbar{
    margin:4px 0 26px !important;
    padding:12px 14px !important;
    border:1px solid var(--ui-border) !important;
    border-radius:20px !important;
    background:rgba(245,247,251,.94) !important;
    box-shadow:0 10px 30px rgba(16,24,40,.065) !important;
    backdrop-filter:blur(22px) !important;
}

.logo-main{
    background:linear-gradient(
        135deg,
        var(--ui-primary-dark),
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
    -webkit-background-clip:text !important;
    color:transparent !important;
}

.logo-sub{
    color:var(--ui-muted) !important;
    opacity:1 !important;
}

.user{
    color:var(--ui-primary-dark) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 6px 18px rgba(16,24,40,.05) !important;
}

/* ==========================================================
   HEROS: BÍBLIA / LIVRO / BUSCA / CAPÍTULO
   ========================================================== */

.books-hero,
.book-hero,
.search-hero,
.chapter-hero,
.hero{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary-dark),
        var(--ui-primary) 56%,
        var(--ui-secondary)
    ) !important;
    border-color:transparent !important;
    box-shadow:0 20px 52px rgba(15,35,70,.16) !important;
}

.books-hero h1,
.books-hero p,
.book-hero h1,
.book-hero p,
.search-hero h1,
.search-hero p,
.chapter-hero h1,
.chapter-hero p,
.hero h1,
.hero p{
    color:#fff !important;
}

.books-hero > span,
.book-hero > span,
.search-hero > span,
.chapter-hero > span{
    color:#fff !important;
    background:rgba(255,255,255,.12) !important;
    border-color:rgba(255,255,255,.22) !important;
}

/* ==========================================================
   BOTÕES / CAMPOS / FILTROS
   ========================================================== */

.portal-btn,
.btn,
.chapter-btn,
.ai-question,
.search-box button,
.reader-btn.primary{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
    border-color:transparent !important;
    box-shadow:0 10px 26px rgba(21,84,192,.18) !important;
}

.chapter-tools input,
.reader-tools input,
.search-box input,
.search-filters select,
.controls input,
input,
select,
textarea{
    color:var(--ui-text) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 5px 16px rgba(16,24,40,.035) !important;
}

input::placeholder,
textarea::placeholder{
    color:#98a2b3 !important;
}

.filter,
.quick-search button{
    color:#475467 !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:none !important;
}

.filter:hover,
.quick-search button:hover{
    color:var(--ui-primary) !important;
    background:#eef4ff !important;
}

.filter.active{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
    border-color:transparent !important;
}

/* ==========================================================
   PÁGINA DO LIVRO — CAPÍTULOS
   ========================================================== */

.chapter-status,
.result-title,
.summary,
.empty{
    color:var(--ui-muted) !important;
}

.chapter-card,
.books-page .card{
    color:var(--ui-text) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 12px 30px rgba(16,24,40,.065) !important;
}

.chapter-card:nth-child(1n),
.chapter-card:nth-child(2n),
.chapter-card:nth-child(3n),
.chapter-card:nth-child(4n),
.chapter-card:nth-child(5n),
.chapter-card:nth-child(6n){
    background:var(--ui-surface) !important;
}

.chapter-card::before,
.books-page .card::before{
    background:rgba(21,84,192,.08) !important;
}

.chapter-card h3,
.books-page .card h3{
    color:var(--ui-text) !important;
}

.chapter-card p,
.books-page .card p{
    color:var(--ui-muted) !important;
}

.chapter-card small,
.books-page .tag{
    color:var(--ui-primary-dark) !important;
    background:var(--ui-blue-soft) !important;
    border:1px solid #dbe8ff !important;
}

.chapter-card:hover,
.books-page .card:hover{
    border-color:#c9dafe !important;
    box-shadow:0 18px 42px rgba(21,84,192,.11) !important;
}

/* ==========================================================
   BUSCA
   ========================================================== */

.ai-search-box{
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:var(--ui-shadow) !important;
}

.result-title{
    color:var(--ui-muted) !important;
}

/* ==========================================================
   LEITOR BÍBLICO
   ========================================================== */

.reader-progress-wrap{
    background:rgba(245,247,251,.94) !important;
    border-bottom:1px solid var(--ui-border) !important;
    backdrop-filter:blur(16px) !important;
}

.reader-progress{
    background:#e6ebf3 !important;
}

.reader-progress span{
    background:linear-gradient(
        90deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
}

.reader-info{
    color:var(--ui-muted) !important;
}

.reader-btn{
    color:#344054 !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 6px 16px rgba(16,24,40,.04) !important;
}

.reader-btn:hover{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
    border-color:transparent !important;
}

.status-box,
.empty{
    color:var(--ui-muted) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 8px 22px rgba(16,24,40,.045) !important;
}

.status-box strong{
    color:var(--ui-text) !important;
}

.verse-card{
    color:var(--ui-text) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 10px 28px rgba(16,24,40,.055) !important;
}

.verse-card:hover{
    background:#fbfcff !important;
    border-color:#cfddfb !important;
    box-shadow:0 16px 36px rgba(21,84,192,.09) !important;
}

.verse-card.selected{
    border-color:var(--ui-primary) !important;
    box-shadow:0 0 0 3px rgba(21,84,192,.11) !important;
}

.verse-card p{
    color:#344054 !important;
}

.verse-number{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
}

.verse-listen{
    color:var(--ui-primary) !important;
    background:var(--ui-blue-soft) !important;
    border:1px solid #d7e5ff !important;
    box-shadow:0 7px 18px rgba(21,84,192,.10) !important;
}

.verse-listen:hover,
.verse-listen:focus{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
}

/* ==========================================================
   MODAL DE ESTUDO
   ========================================================== */

.study-modal{
    background:rgba(10,22,43,.52) !important;
}

.study-panel{
    color:var(--ui-text) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:0 -20px 70px rgba(16,24,40,.18) !important;
}

.study-panel-title h2{
    color:var(--ui-text) !important;
}

.study-panel-title p{
    color:var(--ui-muted) !important;
}

.study-tools button{
    color:#344054 !important;
    background:var(--ui-surface-soft) !important;
    border:1px solid var(--ui-border) !important;
}

.study-tools button:hover{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
    border-color:transparent !important;
}

.study-result{
    color:#344054 !important;
    background:var(--ui-surface-soft) !important;
    border:1px solid var(--ui-border) !important;
}

.note-box{
    color:var(--ui-text) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-border) !important;
}

/* ==========================================================
   BOTÕES FLUTUANTES
   ========================================================== */

.reader-floating button{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--ui-primary-dark),
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
    box-shadow:0 12px 28px rgba(21,84,192,.22) !important;
}

.reader-floating .study-fab::after{
    color:#fff !important;
    background:var(--ui-primary-dark) !important;
    border-color:rgba(255,255,255,.12) !important;
}

/* ==========================================================
   NAVEGAÇÃO INFERIOR
   ========================================================== */

.bottom-nav{
    background:rgba(255,255,255,.95) !important;
    border-top:1px solid var(--ui-border) !important;
    box-shadow:0 -10px 32px rgba(16,24,40,.09) !important;
    backdrop-filter:blur(24px) !important;
}

.nav-item{
    color:#667085 !important;
    opacity:.82 !important;
}

.nav-item.active{
    color:var(--ui-primary) !important;
    opacity:1 !important;
}

.nav-item.active::before{
    background:linear-gradient(
        90deg,
        var(--ui-primary),
        var(--ui-secondary)
    ) !important;
}

/* ==========================================================
   MODO NOTURNO DO LEITOR
   ========================================================== */

body.reader-night{
    filter:none !important;
    --ui-bg:#07111f;
    --ui-surface:#0f1b2d;
    --ui-surface-soft:#132238;
    --ui-text:#f5f7fb;
    --ui-muted:#b9c4d4;
    --ui-muted-2:#98a8bc;
    --ui-border:#26374d;
    --ui-blue-soft:#152a47;
}

body.reader-night .topbar,
body.reader-night .reader-progress-wrap,
body.reader-night .bottom-nav{
    background:rgba(7,17,31,.94) !important;
}

body.reader-night .logo-main{
    background:linear-gradient(135deg,#c6d8ff,#9fb9ff,#d2c0ff) !important;
    -webkit-background-clip:text !important;
}

body.reader-night .reader-btn,
body.reader-night .verse-card,
body.reader-night .study-panel,
body.reader-night .study-result,
body.reader-night .status-box,
body.reader-night .note-box,
body.reader-night input,
body.reader-night select,
body.reader-night textarea{
    color:var(--ui-text) !important;
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}

body.reader-night .verse-card p,
body.reader-night .study-panel-title h2,
body.reader-night .study-panel-title p,
body.reader-night .status-box strong,
body.reader-night .reader-info,
body.reader-night .nav-item{
    color:var(--ui-text) !important;
}

body.reader-night .study-tools button{
    color:var(--ui-text) !important;
    background:var(--ui-surface-soft) !important;
    border-color:var(--ui-border) !important;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media(max-width:768px){
    .topbar{
        flex-direction:row !important;
        align-items:center !important;
    }

    .top-actions{
        width:auto !important;
    }

    .portal-btn{
        width:auto !important;
    }

    .books-hero,
    .book-hero,
    .search-hero,
    .chapter-hero{
        border-radius:26px !important;
    }
}

@media(max-width:390px){
    .books-page .grid{
        grid-template-columns:1fr !important;
    }
}