/* ===== CORES E TEMA ===== */
:root {
    --ceu: #4A6FA5;
    --provisao: #2E7D32;
    --ouro-suave: #B78900;
    --fundo: #F8FAFC;
    --texto: #334155;
    --suave: #E2E8F0;
    --branco: #FFFFFF;
    --sombra: 0 4px 12px rgba(0,0,0,0.06);
    --arredondado: 16px;
    --oracao-fundo: #FFFBEB;
    --oracao-borda: #F59E0B;
    --licao-fundo: #EFF6FF;
    --licao-borda: #4A6FA5;
    --curso-fundo: #F0FDF4;
    --curso-borda: #2E7D32;
}

/* ===== RESET GERAL ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

body {
    background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
    background-attachment: fixed;
    color: var(--texto);
    line-height: 1.6;
    padding-bottom: 40px;
}

/* ===== CABEÇALHO ===== */
.cabecalho {
    text-align: center;
    padding: 30px 20px 10px;
}

.titulo-principal {
    font-size: 1.8rem;
    color: var(--ceu);
    font-weight: 600;
}

.subtitulo {
    color: #64748B;
    font-size: 1rem;
    margin-top: 4px;
}

/* ===== BOTÃO INSTALAR APP ===== */
.botao-instalar {
    background: rgba(74, 111, 165, 0.08);
    color: #4A6FA5;
    border: 1px solid rgba(74, 111, 165, 0.25);
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.botao-instalar:hover {
    background: rgba(74, 111, 165, 0.15);
    transform: translateY(-1px);
}

/* ===== NAVEGAÇÃO EM ABAS ===== */
.navegacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 15px 10px;
}

.aba {
    background: var(--branco);
    border: none;
    padding: 10px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.aba.ativa {
    background: var(--ceu);
    color: white;
    font-weight: 500;
}

.aba:hover {
    transform: translateY(-2px);
}

/* ===== CONTEÚDO PRINCIPAL ===== */
.conteudo {
    max-width: 800px;
    margin: 0 auto;
    padding: 15px;
}

.titulo-caixa {
    font-size: 1.15rem;
    margin-bottom: 15px;
    color: var(--ceu);
}

/* ===== CAIXA DA LIÇÃO ===== */
.caixa-licao {
    background: linear-gradient(120deg, #F0F7FF, #FAF5FF);
    padding: 22px;
    border-radius: var(--arredondado);
    box-shadow: var(--sombra);
    margin-bottom: 25px;
    border-left: 4px solid var(--ceu);
}

.versiculo {
    font-style: italic;
    color: #374151;
    margin-bottom: 12px;
    line-height: 1.7;
}

.versiculo cite {
    display: block;
    margin-top: 8px;
    font-weight: 500;
    color: var(--ceu);
}

.mensalicao {
    background: rgba(74, 111, 165, 0.06);
    padding: 12px;
    border-radius: 10px;
    color: #1E40AF;
}

/* ===== CAIXA DE RESUMO ===== */
.caixa-resumo {
    background: var(--branco);
    padding: 22px;
    border-radius: var(--arredondado);
    box-shadow: var(--sombra);
    margin-bottom: 25px;
}

.saldo-principal {
    text-align: center;
    padding: 18px;
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border-radius: 12px;
    margin-bottom: 20px;
}

.rotulo-saldo {
    display: block;
    font-size: 1rem;
    color: var(--provisao);
}

.valor-saldo {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--provisao);
}

.grade-contas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.cartao-conta {
    background: #F8FAFC;
    padding: 14px;
    border-radius: 12px;
    text-align: center;
}

.icone-conta {
    font-size: 1.4rem;
}

.nome-conta {
    display: block;
    font-size: 0.9rem;
    color: #64748B;
}

.saldo-conta {
    display: block;
    font-weight: 600;
    color: var(--texto);
    margin-top: 4px;
}

.botoes-acao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.botao {
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s;
}

.botao:hover {
    transform: translateY(-2px);
}

.botao.primario {
    background: var(--provisao);
    color: white;
}

.botao.secundario {
    background: var(--ceu);
    color: white;
}

/* ===== ACESSO RÁPIDO ===== */
.caixa-rapida {
    background: var(--branco);
    padding: 22px;
    border-radius: var(--arredondado);
    box-shadow: var(--sombra);
}

.grade-rapida {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.botao-rapido {
    background: linear-gradient(135deg, #EFF6FF, #FAF5FF);
    border: none;
    padding: 14px 10px;
    border-radius: 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s;
}

.botao-rapido:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ===== CONTEÚDO DAS ABAS ===== */
.aba-conteudo {
    animation: apareceSuave 0.3s ease-out;
}

@keyframes apareceSuave {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mensagem-biblica {
    background: linear-gradient(120deg, rgba(46,125,50,0.04), rgba(74,111,165,0.04));
    padding: 14px 18px;
    border-radius: 12px;
    border-left: 3px solid var(--provisao);
    margin-bottom: 20px;
    font-style: italic;
    color: #2E7D32;
}

.mensagem-biblica cite {
    display: block;
    margin-top: 6px;
    font-weight: 500;
    font-style: normal;
    font-size: 0.92rem;
}

.resumo-financeiro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.cartao-resumo {
    background: var(--branco);
    padding: 16px 12px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.cartao-resumo .rotulo {
    display: block;
    font-size: 0.9rem;
    color: #64748B;
    margin-bottom: 4px;
}

.cartao-resumo .valor {
    font-size: 1.25rem;
    font-weight: 700;
}

.valor.positivo { color: var(--provisao); }
.valor.negativo { color: #C62828; }

.saldo-final {
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border: 2px solid var(--provisao);
}

.caixa-contas {
    background: var(--branco);
    padding: 18px;
    border-radius: var(--arredondado);
    box-shadow: var(--sombra);
    margin-bottom: 22px;
}

.caixa-contas h3 {
    font-size: 1rem;
    color: var(--ceu);
    margin-bottom: 14px;
}

.item-conta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--suave);
}

.item-conta:last-child { border-bottom: none; }

.saldo-conta-input {
    width: 140px;
    padding: 8px 10px;
    border: 1px solid var(--suave);
    border-radius: 8px;
    font-size: 0.95rem;
    text-align: right;
    background: #FAFAFA;
}

.caixa-formulario {
    background: var(--branco);
    padding: 18px;
    border-radius: var(--arredondado);
    box-shadow: var(--sombra);
    margin-bottom: 22px;
}

.caixa-formulario h3 {
    font-size: 1rem;
    color: var(--ceu);
    margin-bottom: 16px;
}

.linha-form {
    margin-bottom: 12px;
}

.linha-form label {
    display: block;
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 4px;
}

.linha-form input,
.linha-form select,
.linha-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--suave);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #FCFCFD;
}

.linha-form textarea {
    resize: vertical;
    min-height: 80px;
}

.btn-lancar {
    width: 100%;
    margin-top: 8px;
}

.caixa-lista {
    background: var(--branco);
    padding: 18px;
    border-radius: var(--arredondado);
    box-shadow: var(--sombra);
}

.caixa-lista h3 {
    font-size: 1rem;
    color: var(--ceu);
    margin-bottom: 14px;
}

.sem-lancamento {
    text-align: center;
    color: #94A3B8;
    padding: 20px;
    font-style: italic;
}

.item-lancamento {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--suave);
    gap: 6px;
}

.item-lancamento:last-child { border-bottom: none; }

.item-lancamento .info {
    flex: 1;
    min-width: 160px;
}

.item-lancamento .desc {
    font-weight: 500;
    font-size: 0.95rem;
}

.item-lancamento .meta {
    font-size: 0.85rem;
    color: #64748B;
    margin-top: 2px;
}

.item-lancamento .valor {
    font-weight: 700;
    font-size: 1rem;
}

.tag-categoria {
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
}

.tag-pf { background: #E3F2FD; color: #1565C0; }
.tag-pj { background: #F3E5F5; color: #7B1FA2; }
.tag-dizimo { background: #FFF8E1; color: #F57C00; }
.tag-imposto { background: #ECEFF1; color: #455A64; }

/* ===== ITENS DA LISTA DE COMPRAS ===== */
.item-compra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--suave);
    transition: background 0.2s;
}

.item-compra:last-child { border-bottom: none; }
.item-compra.comprado { opacity: 0.6; }
.item-compra.comprado .nome-item { text-decoration: line-through; color: #94A3B8; }

.check-compra {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--provisao);
}

.nome-item { flex: 1; font-size: 0.98rem; }
.qtd-item { font-size: 0.88rem; color: #64748B; background: #F1F5F9; padding: 2px 8px; border-radius: 8px; }

.btn-remover-item {
    background: none; border: none; color: #EF4444; cursor: pointer;
    font-size: 1.1rem; padding: 4px 8px; opacity: 0.6; transition: opacity 0.2s;
}
.btn-remover-item:hover { opacity: 1; }

/* ===== ITENS DA LISTA DE TAREFAS ===== */
.item-tarefa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--suave);
    border-left: 3px solid var(--ouro-suave);
    transition: all 0.2s;
}

.item-tarefa:last-child { border-bottom: none; }
.item-tarefa.concluida { opacity: 0.6; border-left-color: var(--provisao); }
.item-tarefa.concluida .texto-tarefa { text-decoration: line-through; color: #94A3B8; }

.check-tarefa {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--provisao);
}

.texto-tarefa { flex: 1; }
.nome-tarefa { display: block; font-weight: 500; font-size: 0.98rem; }
.data-tarefa { display: block; font-size: 0.85rem; color: #64748B; margin-top: 2px; }

.btn-remover-tarefa {
    background: none; border: none; color: #EF4444; cursor: pointer;
    font-size: 1.1rem; padding: 4px 6px; opacity: 0.5; transition: opacity 0.2s;
}
.btn-remover-tarefa:hover { opacity: 1; }

/* ===== ITENS DE ORAÇÃO ===== */
.item-oracao {
    padding: 14px;
    border-bottom: 1px solid var(--suave);
    border-left: 3px solid var(--oracao-borda);
    background: var(--oracao-fundo);
    transition: all 0.2s;
}

.item-oracao:last-child { border-bottom: none; }
.item-oracao.respondida { border-left-color: var(--provisao); background: #F0FDF4; }

.cabecalho-oracao {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.nome-oracao { font-weight: 600; font-size: 0.95rem; color: #B45309; }
.data-oracao { font-size: 0.82rem; color: #78716C; }
.texto-pedido-oracao { font-size: 0.95rem; line-height: 1.6; color: #422006; margin-bottom: 10px; }

.botoes-oracao { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-orar { background: var(--provisao); color: white; border: none; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.btn-respondida { background: var(--ceu); color: white; border: none; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.btn-remover-oracao { background: none; border: none; color: #EF4444; padding: 5px 6px; cursor: pointer; font-size: 1rem; opacity: 0.5; }
.btn-remover-oracao:hover { opacity: 1; }

.tag-compartilhada { display: inline-block; font-size: 0.78rem; background: #E0E7FF; color: #4338CA; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }

/* ===== LIÇÕES E ENSINOS ===== */
.licao-destaque {
    background: var(--licao-fundo);
    padding: 18px;
    border-radius: 12px;
    border-left: 4px solid var(--licao-borda);
}

.licao-destaque h4 {
    font-size: 1.05rem;
    color: var(--ceu);
    margin-bottom: 10px;
}

.licao-destaque p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #1E293B;
    margin-bottom: 10px;
}

.licao-versiculo {
    font-size: 0.9rem;
    color: #1E40AF;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px dashed #BFDBFE;
}

.item-licao {
    padding: 14px;
    border-bottom: 1px solid var(--suave);
    border-left: 3px solid var(--licao-borda);
    background: var(--licao-fundo);
    transition: all 0.2s;
}

.item-licao:last-child { border-bottom: none; }
.item-licao.lida { opacity: 0.75; }
.item-licao.lida .titulo-licao { text-decoration: line-through; color: #64748B; }

.cabecalho-licao {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.titulo-licao {
    font-weight: 600;
    font-size: 0.98rem;
    color: #1E3A8A;
    cursor: pointer;
}

.titulo-licao:hover {
    color: var(--ceu);
    text-decoration: underline;
}

.meta-licao {
    font-size: 0.82rem;
    color: #64748B;
    margin-bottom: 8px;
}

.versiculo-licao {
    font-size: 0.9rem;
    color: #3B82F6;
    font-style: italic;
    margin-bottom: 6px;
}

.resumo-licao {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
}

.botoes-licao { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.btn-marcar-lida { background: var(--provisao); color: white; border: none; padding: 4px 10px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.btn-excluir-licao { background: none; border: none; color: #EF4444; padding: 4px 6px; cursor: pointer; font-size: 1rem; opacity: 0.5; }
.btn-excluir-licao:hover { opacity: 1; }

.tag-curso { display: inline-block; font-size: 0.75rem; background: #D1FAE5; color: #065F46; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }

.item-curso {
    padding: 10px 12px;
    border-bottom: 1px solid #D1FAE5;
    border-left: 3px solid var(--curso-borda);
    background: var(--curso-fundo);
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-curso.concluida { opacity: 0.7; }
.item-curso.concluida .titulo-curso { text-decoration: line-through; color: #64748B; }

.check-curso {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--provisao);
}

.titulo-curso { flex: 1; font-size: 0.95rem; }

/* ===== AVISO DE VERSÃO PREMIUM ===== */
.aviso-premium {
    margin-top: 20px;
    padding: 14px;
    background: rgba(183, 137, 0, 0.06);
    border-left: 3px solid var(--ouro-suave);
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #78350