/* ============================================================
   Reestruturação Home + Drawer (3 visões: Trial / Básico / Pro)
   ============================================================ */

/* ===== Fazenda 360 — Lucro por atividade (bloco-bandeira da Home) ===== */
.lucro-atividades-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-left: 4px solid #D4A537;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.lucro-atv-titulo {
    font-weight: 700;
    color: #2B2B2B;
    margin-bottom: 6px;
    font-size: 0.98rem;
}
.lucro-atv-periodo { font-weight: 400; opacity: 0.55; font-size: 0.8rem; }
.lucro-atv-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
}
.lucro-atv-icone { font-size: 1.3rem; width: 1.7rem; text-align: center; }
.lucro-atv-nome { flex: 1; font-weight: 600; color: #2B2B2B; }
.lucro-atv-nome small { display: block; font-weight: 400; opacity: 0.6; font-size: 0.76rem; }
.lucro-atv-valor { font-weight: 800; font-variant-numeric: tabular-nums; }
.lucro-atv-valor.lucro-pos { color: #1B7A2E; }
.lucro-atv-valor.lucro-neg { color: #C62828; }

/* Linha de TOTAL (rodapé do quadro) — separada e mais forte que as atividades. */
.lucro-atv-total {
    border-top: 2px solid rgba(0, 0, 0, 0.16);
    margin-top: 2px;
    cursor: default;
}
.lucro-atv-total .lucro-atv-nome { font-weight: 800; }
.lucro-atv-total .lucro-atv-valor { font-size: 1.06rem; }

/* ===== Fazenda 360 — Metas (planejamento) ===== */
.meta-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 4px solid #D4A537;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.meta-card-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.meta-card-icone { font-size: 1.3rem; }
.meta-card-nome { flex: 1; font-weight: 700; color: #2B2B2B; }
.meta-card-edit { opacity: 0.45; }
.meta-linha { font-size: 0.85rem; color: #444; margin-top: 8px; }
.meta-barra { height: 8px; background: #ECECEC; border-radius: 5px; overflow: hidden; margin-top: 4px; }
.meta-barra-fill { height: 100%; border-radius: 5px; transition: width 0.3s; }
.meta-pct { font-size: 0.74rem; color: #777; text-align: right; margin-top: 2px; }
.meta-semmeta { font-size: 0.82rem; color: #888; margin-top: 4px; }

/* ===== Trial pill no hero ===== */
.hero-trial-pill {
    display: inline-block;
    background: rgba(0, 0, 0, 0.35);
    color: #FFE9A8;
    border: 1px solid #C9A961;
    padding: 4px 14px;
    border-radius: 14px;
    font-size: var(--fs-mini);
    font-weight: var(--peso-semi);
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    backdrop-filter: blur(2px);
}
.hero-trial-pill:empty { display: none; }

/* ===== Bloco Fazenda — destaque visual ===== */
.home-bloco-fazenda {
    /* O bloco principal já era destaque pelo tamanho dos cards.
       Adiciona indicador visual sutil de "núcleo do app". */
    position: relative;
}

/* ===== Bloco Pro Preview (Trial) — discreto, depois da fazenda ===== */
.home-bloco-pro-preview {
    background: rgba(201, 169, 97, 0.05);
    border-radius: var(--raio-md);
    padding: var(--gap-md);
    margin: var(--gap-md);
    border: 1px solid rgba(201, 169, 97, 0.18);
}
.home-bloco-pro-preview .section-title {
    margin-top: 0;
}

/* ===== Strip rodapé Trial (fica no fim da Home) ===== */
.home-pro-strip-rodape {
    margin: 24px var(--gap-md) calc(var(--gap-md) + env(safe-area-inset-bottom));
}

/* ===== Trial expirado — Paywall ===== */
.home-paywall-page {
    min-height: 100dvh;
    background: linear-gradient(180deg, #FAF6EB 0%, #F0E8D4 100%);
}
.home-paywall {
    max-width: 540px;
    margin: 0 auto;
    padding: calc(var(--gap-lg) + env(safe-area-inset-top)) var(--gap-lg) var(--gap-lg);
    text-align: center;
}
.paywall-icone {
    font-size: 96px;
    line-height: 1;
    margin-bottom: var(--gap-md);
}
.paywall-titulo {
    color: var(--verde-escuro);
    font-size: 28px;
    margin: 0 0 12px;
    line-height: 1.2;
}
.paywall-subtitulo {
    color: var(--texto-secundario);
    font-size: var(--fs-pequeno);
    line-height: 1.5;
    margin: 0 auto var(--gap-lg);
    max-width: 420px;
}
.paywall-subtitulo strong { color: var(--verde-escuro); }

.paywall-planos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    margin: var(--gap-lg) 0;
}
@media (min-width: 480px) {
    .paywall-planos { grid-template-columns: 1fr 1fr; }
}

.paywall-plano {
    background: var(--branco);
    border: 2px solid rgba(94, 124, 71, 0.15);
    border-radius: var(--raio-md);
    padding: var(--gap-md);
    text-align: left;
    cursor: pointer;
    transition: transform var(--transicao-rapida);
    position: relative;
    display: flex;
    flex-direction: column;
}
.paywall-plano:active { transform: scale(0.98); }

.paywall-plano-pro {
    border-color: #C9A961;
    background: linear-gradient(135deg, #FFF7E2 0%, #FAF6EB 100%);
}
.paywall-plano-tag {
    position: absolute;
    top: -10px;
    right: 12px;
    background: #C9A961;
    color: #fff;
    font-size: 11px;
    font-weight: var(--peso-semi);
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}
.paywall-plano-titulo {
    font-size: 20px;
    font-weight: var(--peso-semi);
    color: var(--verde-escuro);
    margin-bottom: 4px;
}
.paywall-plano-preco {
    font-size: 24px;
    color: var(--texto-primario);
    margin-bottom: var(--gap-sm);
    font-weight: var(--peso-semi);
}
.paywall-plano-preco span {
    font-size: var(--fs-mini);
    color: var(--texto-secundario);
    font-weight: normal;
}
.paywall-plano-itens {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-md);
    flex: 1;
    color: var(--texto-primario);
    font-size: var(--fs-pequeno);
    line-height: 1.7;
}
.paywall-plano-itens li::before {
    content: '✓ ';
    color: var(--verde-medio);
    font-weight: var(--peso-semi);
}
.paywall-plano-cta {
    background: var(--verde-medio);
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: var(--raio-sm);
    font-weight: var(--peso-semi);
    font-size: var(--fs-pequeno);
}
.paywall-plano-pro .paywall-plano-cta {
    background: #C9A961;
}

.paywall-restaurar {
    background: transparent;
    border: none;
    color: var(--texto-secundario);
    font-size: var(--fs-mini);
    margin-top: var(--gap-md);
    cursor: pointer;
    padding: 8px;
}
.paywall-restaurar strong { color: var(--verde-escuro); }

/* ===== Paywall INTERSTITIAL (tela cheia pós-trial, insistente) ===== */
.paywall-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(20, 30, 18, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow-y: auto;
    transition: background var(--transicao-media);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
}
.paywall-overlay.paywall-visivel {
    background: rgba(20, 30, 18, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.paywall-inter-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--branco, #fff);
    border-radius: 20px;
    padding: 30px 22px calc(20px + env(safe-area-inset-bottom));
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform var(--transicao-media), opacity var(--transicao-media);
}
.paywall-overlay.paywall-visivel .paywall-inter-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.paywall-fechar {
    position: absolute;
    top: 10px; right: 12px;
    width: 34px; height: 34px;
    border: none; background: transparent;
    color: var(--texto-secundario, #888);
    font-size: 18px; cursor: pointer; line-height: 1;
    border-radius: 50%;
}
.paywall-fechar:active { background: rgba(0,0,0,0.06); }
.paywall-inter-card .paywall-plano-itens {
    list-style: none; padding: 0; margin: 10px 0 0; text-align: left;
}
.paywall-inter-card .paywall-plano-itens li {
    padding: 5px 0 5px 24px; position: relative; font-size: var(--fs-pequeno);
    color: var(--texto-secundario);
}
.paywall-inter-card .paywall-plano-itens li::before {
    content: '✓'; position: absolute; left: 4px; color: var(--verde-medio); font-weight: 800;
}
.paywall-agora-nao {
    background: transparent; border: none;
    color: var(--texto-secundario); font-size: var(--fs-mini);
    margin-top: 10px; padding: 8px; cursor: pointer;
}

/* ===== Drawer — seções e cadeado ===== */
.drawer-secao-titulo {
    padding: 14px var(--gap-md) 4px;
    color: var(--texto-secundario);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: var(--peso-semi);
    opacity: 0.7;
}
.drawer-secao-titulo:first-child {
    padding-top: 8px;
}

/* Item Pro com cadeado (Trial) */
.drawer-item-cadeado {
    opacity: 0.78;
    position: relative;
}
.drawer-item-cadeado::after {
    content: '🔒';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.6;
}
.drawer-item-cadeado .drawer-pro-badge-mini {
    /* esconde o badge "PRO" quando tem cadeado pra não duplicar visual */
    display: none;
}

/* Alerta financeiro: contas a pagar acima da receita (home) */
.alerta-dividas {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 16px 8px;
    padding: 14px 16px;
    background: var(--alerta-suave);
    border: 1px solid var(--alerta);
    border-left: 5px solid var(--alerta);
    border-radius: 12px;
}
.alerta-dividas-icone {
    font-size: 20px;
    line-height: 1.2;
    flex-shrink: 0;
}
.alerta-dividas-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alerta-dividas-texto strong {
    color: var(--alerta);
    font-size: 15px;
}
.alerta-dividas-texto span {
    color: var(--texto-secundario, #5C5550);
    font-size: 13px;
    line-height: 1.35;
}

/* Aviso de vencimento (parcela/conta vencendo) na home */
.aviso-vencimento {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 16px 8px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    background: var(--atencao-suave, rgba(201, 155, 65, 0.14));
    border-left: 5px solid var(--atencao, #C99B41);
}
.aviso-vencimento.venc-atrasado,
.aviso-vencimento.venc-hoje {
    background: var(--alerta-suave, #F8DDD8);
    border-left-color: var(--alerta, #B5443A);
}
.aviso-venc-ic { font-size: 18px; flex-shrink: 0; }
.aviso-venc-txt {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--texto-principal);
}
.aviso-venc-txt strong { color: var(--texto-principal); }


/* ====== Interstitial do paywall: TELA CHEIA no celular ======
   Antes era um cartao de 420px com um plano so. Agora ele carrega os mesmos
   dois planos da tela Pro (o anual mostrando quanto sai por mes), entao precisa
   da tela inteira pra caber sem apertar. No tablet/desktop segue como cartao. */
@media (max-width: 560px) {
    .paywall-inter-card {
        max-width: none;
        width: 100%;
        max-height: 100%;
        min-height: 100%;
        border-radius: 0;
        padding: calc(26px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
    }
    .paywall-overlay { padding: 0; }
}

/* O card e centralizado, mas lista de plano e beneficio se le da esquerda. */
.paywall-inter-card .pw-planos,
.paywall-inter-card .pw-beneficios,
.paywall-inter-card .pw-secao-titulo {
    text-align: left;
}

/* O icone gigante roubava a altura que agora e dos planos. */
.paywall-inter-card .paywall-icone { font-size: 2.4rem; }