/*
============================================================
VARIÁVEIS / TEMAS
============================================================
*/

:root,
html[data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f5f7f5;
    --text: #202420;
    --text-soft: #6f7770;
    --reference: #67806e;
    --border: #e7ebe7;
    --accent-bg: #dff3e4;
    --accent: #205b35;
    --overlay: rgba(255, 255, 255, .96);
    --shadow: 0 14px 40px rgba(20, 35, 25, .12);
}

html[data-theme="dark"] {
    --bg: #111411;
    --surface: #171b18;
    --surface-soft: #202620;
    --text: #e9eee9;
    --text-soft: #a6afa7;
    --reference: #9ab9a2;
    --border: #2c342e;
    --accent-bg: #233d2b;
    --accent: #a9d7b5;
    --overlay: rgba(17, 20, 17, .96);
    --shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

html[data-theme="paper"] {
    --bg: #d9d9d4;
    --surface: #d9d9d4;
    --surface-soft: #cecec9;
    --text: #181818;
    --text-soft: #555550;
    --reference: #454540;
    --border: #b9b9b4;
    --accent-bg: #c5c5c0;
    --accent: #171717;
    --overlay: #d9d9d4;
    --shadow: none;
}


/*
============================================================
BASE
============================================================
*/

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    overflow: hidden;
}

button,
input {
    font-family: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.app-leitura {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}


/*
============================================================
TOPO
============================================================
*/

.topo {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--overlay);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
    z-index: 20;
}

.livros {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 94px 8px 10px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.livros::-webkit-scrollbar {
    display: none;
}

.livro-btn {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    cursor: pointer;
}

.livro-btn.ativo {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 700;
}

.topo-acoes {
    position: absolute;
    right: 7px;
    top: calc(7px + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

.btn-aparencia {
    position: static;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 10px;
    background: var(--overlay);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-aparencia i {
    font-size: 19px;
}


/*
============================================================
NOME DO LIVRO ATUAL
============================================================
*/

.livro-atual {
    width: 100%;
    min-height: 42px;
    padding: 9px 16px 8px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    z-index: 15;
}

.livro-atual span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.livro-atual i {
    color: var(--text-soft);
    font-size: 12px;
}


/*
============================================================
MENU DE APARÊNCIA
============================================================
*/

.menu-aparencia {
    position: fixed;
    top: calc(54px + env(safe-area-inset-top));
    right: 10px;
    width: 190px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;
    z-index: 80;
}

.menu-aparencia.aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-aparencia-titulo {
    padding: 7px 10px 9px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.tema-opcao {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    display: grid;
    grid-template-columns: 24px 1fr 20px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.tema-opcao.ativo {
    background: var(--accent-bg);
    color: var(--accent);
}

.tema-check {
    opacity: 0;
}

.tema-opcao.ativo .tema-check {
    opacity: 1;
}


/*
============================================================
LEITURA
============================================================
*/

.leitura {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
}

.versiculo-container {
    width: 100%;
    max-width: 680px;
    padding: 26px 28px 85px;
    text-align: center;
    transition:
        opacity .15s ease,
        transform .15s ease;
}

.referencia-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 18px;
}

.referencia {
    margin-bottom: 0;
    color: var(--reference);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
}

.referencia-marcada {
    display: none;
    color: #dc2626;
    font-size: 13px;
    line-height: 1;
}

.referencia-marcada.visivel {
    display: inline-block;
}
.referencia-btn {
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.referencia-btn:active {
    background: var(--surface-soft);
}

.texto-versiculo {
    color: var(--text);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        clamp(
            25px,
            7vw,
            36px
        );
    line-height: 1.45;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.versiculo-container.saindo-esquerda {
    opacity: 0;
    transform: translateX(-25px);
}

.versiculo-container.saindo-direita {
    opacity: 0;
    transform: translateX(25px);
}


/*
============================================================
AÇÕES DO VERSÍCULO
============================================================
*/

.acoes-versiculo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s;
}

.acoes-versiculo.aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.acao-versiculo {
    border: 0;
    background: var(--surface-soft);
    color: var(--text-soft);
    border-radius: 10px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}

.acao-versiculo i {
    font-size: 17px;
}

.acao-versiculo.salvo,
.acao-versiculo.audio-ativo {
    background: var(--accent-bg);
    color: var(--accent);
}

.versiculo-container.lendo-audio .referencia {
    color: var(--accent);
}


/*
============================================================
MENU INFERIOR
============================================================
*/

.menu-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height:
        calc(
            60px +
            env(safe-area-inset-bottom)
        );
    padding:
        0
        8px
        env(safe-area-inset-bottom);
    background:
        var(--overlay);
    border-top:
        1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 100;
}

.menu-btn {
    flex: 1;
    height: 58px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-btn i {
    font-size: 23px;
    line-height: 1;
}

.menu-btn:active,
.menu-btn.ativo {
    color: var(--accent);
}


/*
============================================================
PAINÉIS
============================================================
*/

.painel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .18s ease,
        visibility .18s;
    z-index: 100;
}

.painel-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.painel {
    width: 100%;
    max-width: 680px;
    max-height: 82dvh;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 20px 20px 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    transform: translateY(20px);
    transition: transform .18s ease;
    overflow: hidden;
}

.painel-overlay.aberto .painel {
    transform: translateY(0);
}

.painel-cabecalho {
    min-height: 70px;
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 4px;
}

.painel-titulo-area {
    min-width: 0;
    text-align: center;
}

.painel-titulo {
    font-size: 17px;
    font-weight: 700;
}

.painel-subtitulo {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 12px;
}

.painel-voltar,
.painel-fechar {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.painel-voltar i,
.painel-fechar i {
    font-size: 20px;
}

.oculto {
    visibility: hidden !important;
}

.grade-indice {
    max-height: calc(82dvh - 70px);
    padding: 18px;
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(52px, 1fr)
        );
    gap: 9px;
    overflow-y: auto;
}

.indice-btn {
    aspect-ratio: 1 / 1;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.indice-btn.atual {
    background: var(--accent-bg);
    border-color: var(--accent-bg);
    color: var(--accent);
}


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

.painel-busca {
    height: min(88dvh, 760px);
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}

.painel-busca .painel-cabecalho {
    grid-template-columns: 42px 1fr 42px;
}

.busca-campo-wrap {
    margin: 14px 14px 8px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    gap: 9px;
}

.busca-campo-wrap > i {
    color: var(--text-soft);
    font-size: 18px;
}

.busca-campo {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
}

.busca-campo::placeholder {
    color: var(--text-soft);
}

.busca-campo::-webkit-search-cancel-button {
    display: none;
}

.busca-limpar {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.busca-status {
    min-height: 29px;
    padding: 4px 18px 8px;
    color: var(--text-soft);
    font-size: 12px;
}

.resultados-busca {
    flex: 1;
    min-height: 0;
    padding: 0 10px 20px;
    overflow-y: auto;
}

.resultado-busca {
    width: 100%;
    padding: 14px 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.resultado-referencia {
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.resultado-texto {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 16px;
    line-height: 1.45;
}

.busca-vazia {
    padding: 35px 18px;
    color: var(--text-soft);
    text-align: center;
}


/*
============================================================
BLUR
============================================================
*/

html:not([data-theme="paper"]) .topo,
html:not([data-theme="paper"]) .menu-bottom {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/*
============================================================
E-INK
============================================================
*/

html[data-theme="paper"] * {
    text-shadow: none;
}

html[data-theme="paper"] body,
html[data-theme="paper"] .app-leitura {
    background: #d9d9d4;
}

html[data-theme="paper"] .texto-versiculo {
    color: #161616;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-weight: 400;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

html[data-theme="paper"] .topo,
html[data-theme="paper"] .menu-bottom {
    background: #d9d9d4;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="paper"] .painel-overlay {
    background: rgba(0, 0, 0, .18);
}

html[data-theme="paper"] .painel,
html[data-theme="paper"] .menu-aparencia {
    box-shadow: none;
}

html[data-theme="paper"] .versiculo-container,
html[data-theme="paper"] .menu-aparencia,
html[data-theme="paper"] .acoes-versiculo,
html[data-theme="paper"] .livro-btn,
html[data-theme="paper"] .acao-versiculo,
html[data-theme="paper"] .painel,
html[data-theme="paper"] .painel-overlay,
html[data-theme="paper"] body {
    transition: none;
}


/*
============================================================
DESKTOP
============================================================
*/

@media (min-width: 768px) {

    .versiculo-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .texto-versiculo {
        font-size: 34px;
    }

    .menu-btn:hover,
    .livro-btn:hover,
    .acao-versiculo:hover,
    .painel-voltar:hover,
    .painel-fechar:hover {
        color: var(--accent);
    }

    .indice-btn:hover {
        border-color: var(--accent);
    }

    .resultado-busca:hover {
        background: var(--surface-soft);
    }
}


/*
============================================================
TELAS PEQUENAS
============================================================
*/

@media (max-width: 380px) {

    .versiculo-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .acoes-versiculo {
        gap: 6px;
    }

    .acao-versiculo {
        padding: 7px 8px;
    }

    .grade-indice {
        padding: 14px;
        gap: 7px;
    }
}

/*
============================================================
NAVEGADOR DA BÍBLIA
============================================================
*/

.painel-navegador {
    height: min(88dvh, 780px);
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}

.navegador-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 12px 24px;
}

.navegador-status {
    padding: 34px 16px;
    color: var(--text-soft);
    text-align: center;
    font-size: 14px;
}

.navegador-livro {
    border-bottom: 1px solid var(--border);
}

.navegador-livro-btn {
    width: 100%;
    min-height: 56px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.navegador-livro-btn > i {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 14px;
}

.navegador-livro-nome {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.navegador-livro-nome strong {
    font-size: 16px;
    font-weight: 650;
}

.navegador-livro-nome small {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
}

.navegador-livro.livro-atual-nav >
.navegador-livro-btn {
    color: var(--accent);
}

.navegador-capitulos {
    display: none;
    padding: 0 0 8px 14px;
}

.navegador-livro.aberto >
.navegador-capitulos {
    display: block;
}

.navegador-capitulo {
    border-left: 1px solid var(--border);
}

.navegador-capitulo-btn {
    width: 100%;
    min-height: 44px;
    padding: 6px 10px 6px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.navegador-capitulo-btn span {
    font-size: 14px;
    font-weight: 600;
}

.navegador-capitulo-btn i {
    color: var(--text-soft);
    font-size: 12px;
}

.navegador-versiculos {
    display: none;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(44px, 1fr)
        );
    gap: 7px;
    padding: 5px 10px 14px 14px;
}

.navegador-capitulo.aberto >
.navegador-versiculos {
    display: grid;
}

.navegador-versiculo {
    min-height: 42px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.navegador-versiculo.atual {
    border-color: var(--accent-bg);
    background: var(--accent-bg);
    color: var(--accent);
}

html[data-theme="paper"]
.navegador-livro-btn,
html[data-theme="paper"]
.navegador-capitulo-btn,
html[data-theme="paper"]
.navegador-versiculo {
    transition: none;
}

@media (min-width: 768px) {
    .navegador-livro-btn:hover,
    .navegador-capitulo-btn:hover {
        background: var(--surface-soft);
    }

    .navegador-versiculo:hover {
        border-color: var(--accent);
    }
}

/*
============================================================
VERSÍCULOS SALVOS
============================================================
*/

.painel-favoritos {
    height: min(88dvh, 780px);
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}

.favoritos-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 12px 24px;
}

.favorito-item {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.favorito-abrir {
    flex: 1;
    min-width: 0;
    padding: 14px 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.favorito-referencia {
    color: var(--reference);
    font-size: 14px;
    font-weight: 700;
}

.favorito-texto {
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
}

.favorito-remover {
    flex: 0 0 48px;
    width: 48px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favoritos-vazio {
    min-height: 240px;
    padding: 36px 20px;
    color: var(--text-soft);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.favoritos-vazio > i {
    margin-bottom: 6px;
    font-size: 30px;
}

.favoritos-vazio > strong {
    color: var(--text);
    font-size: 15px;
}

.favoritos-vazio > span {
    max-width: 260px;
    font-size: 13px;
    line-height: 1.45;
}

html[data-theme="paper"]
.favorito-abrir,
html[data-theme="paper"]
.favorito-remover {
    transition: none;
}

@media (min-width: 768px) {

    .favorito-item:hover {
        background: var(--surface-soft);
    }
}



/*
============================================================
ANOTAÇÃO DO VERSÍCULO
============================================================
*/

.anotacao-editor {
    display: none;
    width: min(100%, 680px);
    margin: 18px auto 4px;
}

.anotacao-editor.aberto {
    display: block;
}

.anotacao-campo {
    display: block;
    width: 100%;
    min-height: 110px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    outline: none;
}

.anotacao-campo:focus {
    border-color: var(--reference);
}

.anotacao-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 9px;
}

.anotacao-cancelar,
.anotacao-salvar {
    border-radius: 8px;
    padding: 9px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.anotacao-cancelar {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-soft);
}

.anotacao-salvar {
    border: 1px solid var(--reference);
    background: var(--reference);
    color: var(--surface);
}


/*
============================================================
ANOTAÇÃO VISÍVEL
============================================================
*/

.anotacao-exibicao {
    display: none;
    width: min(100%, 680px);
    box-sizing: border-box;
    margin: 18px auto 4px;
    padding: 13px 15px;
    border-left: 3px solid var(--reference);
    border-radius: 0 8px 8px 0;
    background: var(--surface-soft);
    cursor: default;
}

.anotacao-exibicao.visivel {
    display: block;
}

.anotacao-exibicao-rotulo {
    margin-bottom: 5px;
    color: var(--reference);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.anotacao-exibicao-texto {
    color: var(--text-soft);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
============================================================
MARCADOR DE LEITURA
============================================================
*/

.acao-versiculo.marcado {
    color: #dc2626;
}

.acao-versiculo.marcado i {
    color: #dc2626;
}

/*
============================================================
ATALHO DA PÁGINA MARCADA
============================================================
*/

#btnIrPaginaMarcada {
    opacity: .35;
}

#btnIrPaginaMarcada.tem-marcador {
    opacity: 1;
    color: #dc2626;
}

#btnIrPaginaMarcada:disabled {
    cursor: default;
}

/*
============================================================
EVOLUÇÃO DA LEITURA
============================================================
*/

.painel-evolucao {
    height: min(88dvh, 780px);
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}

.evolucao-conteudo {
    flex: 1;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
}


/*
============================================================
RESUMO GERAL
============================================================
*/

.evolucao-resumo {
    padding: 22px 18px;
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-soft);
    text-align: center;
}

.evolucao-percentual {
    color: var(--text);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}

.evolucao-contagem {
    margin-top: 7px;
    color: var(--text-soft);
    font-size: 13px;
}

.evolucao-livros-concluidos {
    margin-top: 12px;
    color: var(--text-soft);
    font-size: 12px;
}


/*
============================================================
BARRA
============================================================
*/

.evolucao-barra {
    height: 7px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.evolucao-barra-preenchimento {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
}


/*
============================================================
LIVROS
============================================================
*/

.evolucao-livros {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evolucao-livro {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.evolucao-livro-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.evolucao-livro-nome {
    font-size: 14px;
    font-weight: 650;
}

.evolucao-livro-percentual {
    flex-shrink: 0;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.evolucao-livro-contagem {
    margin-top: 7px;
    color: var(--text-soft);
    font-size: 11px;
}


/*
============================================================
DETALHE DO LIVRO
============================================================
*/

.evolucao-livro-resumo {
    margin-bottom: 20px;
    text-align: center;
}

.evolucao-livro-resumo-percentual {
    font-size: 30px;
    font-weight: 700;
}

.evolucao-capitulos {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.evolucao-capitulo-titulo {
    margin-bottom: 9px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
}

.evolucao-versiculos {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(30px, 1fr)
        );
    gap: 6px;
}

.evolucao-versiculo {
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.evolucao-versiculo.lido {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}


/*
============================================================
EVOLUÇÃO — TESTAMENTOS
============================================================
*/

.evolucao-testamentos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.evolucao-testamento {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.evolucao-testamento-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.evolucao-testamento-topo span {
    font-weight: 600;
}

.evolucao-testamento-topo strong {
    font-size: 14px;
}

.evolucao-secao-titulo {
    margin: 4px 2px 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.evolucao-sem-leitura {
    padding: 24px 10px;
    color: var(--text-soft);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 420px) {

    .evolucao-testamentos {
        grid-template-columns: 1fr;
    }
}



/*
============================================================
USUÁRIO
============================================================
*/

.painel-usuario {
    max-height: 82dvh;
}

.usuario-conteudo {
    padding: 26px 22px 32px;
}

.usuario-login {
    max-width: 420px;
    margin: 0 auto;
}

.usuario-icone-grande,
.usuario-avatar {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.usuario-icone-grande i,
.usuario-avatar i {
    font-size: 27px;
}

.usuario-login-titulo {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.usuario-login-texto {
    margin-top: 6px;
    color: var(--text-soft);
    text-align: center;
    font-size: 13px;
}

.usuario-form {
    margin-top: 25px;
}

.usuario-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.usuario-input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.usuario-input:focus {
    border-color: var(--accent);
}

.usuario-continuar {
    width: 100%;
    height: 46px;
    margin-top: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-weight: 650;
    cursor: pointer;
}


/*
============================================================
PERFIL
============================================================
*/

.usuario-perfil {
    max-width: 420px;
    margin: 0 auto;
}

.usuario-nome {
    margin-bottom: 25px;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
}

.usuario-dados {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.usuario-dado {
    min-height: 65px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--border);
}

.usuario-dado:last-child {
    border-bottom: 0;
}

.usuario-dado > i {
    width: 22px;
    color: var(--text-soft);
    font-size: 17px;
    text-align: center;
}

.usuario-dado div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.usuario-dado span {
    color: var(--text-soft);
    font-size: 11px;
}

.usuario-dado strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/*
============================================================
USUÁRIO — MENSAGEM
============================================================
*/

.usuario-mensagem {
    min-height: 18px;
    margin-top: 10px;
    color: var(--text-soft);
    font-size: 12px;
    text-align: center;
}

.usuario-mensagem.erro {
    color: #dc2626;
}


/*
============================================================
EVOLUÇÃO — CALENDÁRIO DE LEITURA
============================================================
*/

.evolucao-calendario {
    margin-top: 18px;
    margin-bottom: 22px;
}

.evolucao-sequencias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.evolucao-sequencia {
    border: 1px solid rgba(127, 127, 127, .22);
    border-radius: 12px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.evolucao-sequencia span {
    font-size: 12px;
    opacity: .65;
}

.evolucao-sequencia strong {
    font-size: 17px;
    font-weight: 600;
}

.evolucao-calendario-topo {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    margin-bottom: 14px;
}

.evolucao-calendario-mes {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.evolucao-calendario-nav {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evolucao-calendario-nav:hover {
    background: rgba(127, 127, 127, .12);
}

.evolucao-calendario-semana,
.evolucao-calendario-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.evolucao-calendario-semana {
    margin-bottom: 5px;
}

.evolucao-calendario-semana span {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    opacity: .5;
    text-transform: uppercase;
}

.evolucao-calendario-dia {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    border: 1px solid transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px;

    font-size: 12px;
}

.evolucao-calendario-dia.vazio {
    visibility: hidden;
}

.evolucao-calendario-dia.com-leitura {
    background: rgba(127, 127, 127, .13);
    font-weight: 600;
}

.evolucao-calendario-dia.hoje {
    border-color: currentColor;
}

.evolucao-calendario-dia.maior-volume {
    background: currentColor;
}

.evolucao-calendario-dia.maior-volume
.evolucao-calendario-numero,
.evolucao-calendario-dia.maior-volume
.evolucao-calendario-leituras {
    color: var(--cor-fundo, #fff);
}

.evolucao-calendario-numero {
    position: absolute;
    top: 4px;
    left: 5px;

    z-index: 1;

    font-size: 9px;
    font-weight: 500;
    opacity: .55;
}


.evolucao-calendario-leituras {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    line-height: 1;
    min-width: 0;
}


.evolucao-calendario-leituras strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}


.evolucao-calendario-leituras span {
    margin-top: 3px;

    font-size: 7px;
    font-weight: 500;

    opacity: .65;

    white-space: nowrap;
}

.evolucao-calendario-destaque {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(127, 127, 127, .1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.evolucao-calendario-destaque i {
    font-size: 17px;
}

.evolucao-calendario-destaque div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.evolucao-calendario-destaque span {
    font-size: 11px;
    opacity: .6;
}

.evolucao-calendario-destaque strong {
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 480px) {

    .evolucao-calendario-semana,
    .evolucao-calendario-dias {
        gap: 3px;
    }

    .evolucao-calendario-dia {
        border-radius: 7px;
        font-size: 11px;
    }

    .evolucao-calendario-leituras strong {
        font-size: 15px;
    }

    .evolucao-calendario-leituras span {
        font-size: 6px;
    }

    .evolucao-calendario-numero {
        top: 3px;
        left: 4px;
        font-size: 8px;
    }
}


.referencia-favorita {
    display: none;
    flex: 0 0 auto;

    font-size: 14px;
    line-height: 1;

    color: #dc3545;
}

.referencia-favorita.ativo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
============================================================
CARREGAMENTO DA LEITURA
============================================================
*/

.carregamento-leitura {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--bg, #ffffff);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .15s ease,
        visibility .15s ease;
}


.carregamento-leitura.ativo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.carregamento-leitura-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 18px;
}


.carregamento-leitura-logo {
    width: 90px;
    height: 90px;

    object-fit: contain;

    animation:
        girar-logo-carregamento
        1.15s
        ease-in-out
        infinite;
}


.carregamento-leitura-texto {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;

    opacity: .65;
}


@keyframes girar-logo-carregamento {

    0% {
        transform: scaleX(1);
    }

    25% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(-1);
    }

    75% {
        transform: scaleX(0);
    }

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

/*
============================================================
EVOLUÇÃO — CARREGAMENTO
============================================================
*/

.evolucao-carregando {
    width: 100%;
    min-height: 280px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 16px;
}


.evolucao-carregando-logo {
    width: 90px;
    height: 90px;

    object-fit: contain;

    animation:
        evolucao-logo-giro
        1.8s
        ease-in-out
        infinite;
}


.evolucao-carregando-texto {
    font-size: 13px;
    font-weight: 500;

    opacity: .65;
}


@keyframes evolucao-logo-giro {

    0% {
        transform: perspective(400px) rotateY(0deg);
    }

    50% {
        transform: perspective(400px) rotateY(180deg);
    }

    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}