/* ===========================================
   Café 360 — Custo por saca completo (tela-bandeira)
   =========================================== */

.pagina-cc { padding: var(--espacamento-md); padding-bottom: 80px; }

.cc-hero {
    background: linear-gradient(135deg, var(--verde-escuro), var(--verde-medio));
    color: var(--texto-invertido);
    border-radius: var(--raio-md);
    padding: 22px 16px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: var(--sombra-media);
    display: flex; flex-direction: column; gap: 6px;
}
.cc-hero-leg { font-size: var(--tamanho-xs); opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; }
.cc-hero-num { font-size: var(--fs-hero); font-weight: var(--peso-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.cc-hero-comp { font-size: var(--tamanho-sm); color: var(--dourado-claro); line-height: 1.4; }

/* A conta na cara: custo do ano ÷ sacas = custo por saca */
.cc-conta {
    background: var(--bege-papel);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin-bottom: 4px;
    text-align: center;
    font-size: var(--tamanho-sm);
    color: var(--texto-principal);
    line-height: 1.5;
}
.cc-conta b { color: var(--verde-escuro); font-variant-numeric: tabular-nums; }

/* Explicação curta do que compõe o custo (além do caixa) */
.cc-ajuda {
    font-size: var(--tamanho-xs);
    color: var(--texto-secundario);
    line-height: 1.5;
    margin: 8px 2px 0;
}
.cc-ajuda b { color: var(--verde-escuro); }

/* Toggle: incluir depreciação no custo */
.cc-toggle {
    display: flex; align-items: center; gap: 10px;
    background: var(--branco);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin: 10px 0 4px;
    box-shadow: var(--sombra-leve);
    font-size: var(--tamanho-sm);
    color: var(--texto-principal);
    cursor: pointer;
}
.cc-toggle input { width: 20px; height: 20px; accent-color: var(--verde-medio); flex-shrink: 0; }
.cc-toggle b { color: var(--verde-escuro); }

.cc-secao { font-size: var(--tamanho-md); font-weight: var(--peso-semi); color: var(--verde-escuro); margin: 18px 0 6px; }
.cc-secao-sub { font-size: var(--tamanho-xs); color: var(--texto-secundario); margin: 0 0 10px; }

.cc-comp {
    background: var(--branco);
    border-radius: var(--raio-sm);
    padding: 6px 12px;
    box-shadow: var(--sombra-leve);
}
.cc-comp-linha {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--linha-caderno);
    font-size: var(--tamanho-sm);
    color: var(--texto-principal);
}
.cc-comp-linha:last-child { border-bottom: none; }
.cc-comp-linha span:last-child { font-variant-numeric: tabular-nums; font-weight: var(--peso-medio); }
.cc-comp-total {
    font-weight: var(--peso-bold);
    color: var(--verde-escuro);
    border-top: 2px solid var(--bege-medio);
    margin-top: 2px;
}

.cc-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-ind-card {
    background: var(--branco);
    border-radius: var(--raio-sm);
    padding: 12px;
    box-shadow: var(--sombra-leve);
    text-align: center;
    display: flex; flex-direction: column; gap: 2px;
    border-left: 4px solid var(--dourado);
}
.cc-ind-val { font-size: var(--tamanho-lg); font-weight: var(--peso-bold); color: var(--verde-escuro); font-variant-numeric: tabular-nums; }
.cc-ind-lbl { font-size: var(--tamanho-xs); color: var(--texto-secundario); }

.cc-talhao-linha {
    display: flex; justify-content: space-between;
    padding: 8px 12px;
    background: var(--branco);
    border-radius: var(--raio-sm);
    margin-bottom: 6px;
    font-size: var(--tamanho-sm);
    box-shadow: var(--sombra-leve);
}
.cc-talhao-linha span:last-child { color: var(--texto-secundario); font-variant-numeric: tabular-nums; }

.cc-ia { margin-top: 16px; }
.cc-rodape { font-size: var(--tamanho-xs); color: var(--texto-claro); font-style: italic; text-align: center; margin-top: 14px; line-height: 1.4; }