/* ============================================================
   Plantio — módulo de destaque (3 cenários + preparo da terra).
   Reusa tokens globais; cartões grandes e linhas de etapa com custo.
   ============================================================ */

.pagina-plantio { padding-bottom: var(--gap-xxl); }

/* Cartões de cenário (menu + escolhas de tipo) */
.plantio-cenario {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    text-align: left;
    background: var(--branco);
    border: 1.5px solid rgba(94, 124, 71, 0.15);
    border-left: 4px solid var(--verde-medio);
    border-radius: var(--raio-md);
    padding: var(--gap-lg) var(--gap-md);
    margin-bottom: var(--gap-md);
    cursor: pointer;
    transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.plantio-cenario:active { transform: scale(0.99); }
.plantio-cenario:hover { box-shadow: var(--sombra-leve); }

.plantio-cenario-ic {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
    text-align: center;
}
.plantio-cenario-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plantio-cenario-tit {
    font-weight: var(--peso-bold);
    color: var(--verde-escuro);
    font-size: var(--fs-base);
}
.plantio-cenario-sub {
    color: var(--texto-secundario);
    font-size: var(--fs-pequeno);
    line-height: 1.4;
}

/* Faixa de contexto do passo atual */
.plantio-ctx {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--peso-semi);
    color: var(--verde-escuro);
    font-size: var(--fs-base);
    margin: var(--gap-md) 0 var(--gap-md);
}
.plantio-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--dourado-suave, #F5EDD8);
    font-size: 15px;
}

/* Checklist de etapas de preparo (cada uma com input de custo) */
.plantio-etapas {
    border: 1px solid var(--bege-medio);
    border-radius: var(--raio-md);
    overflow: hidden;
    margin-bottom: var(--gap-lg);
    background: var(--branco);
}
.plantio-etapa {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--gap-md);
    border-bottom: 1px solid var(--bege-suave);
}
.plantio-etapa:last-child { border-bottom: none; }
.plantio-etapa-nome {
    flex: 1;
    color: var(--texto-principal);
    font-size: var(--fs-base);
}
.plantio-etapa-custo {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.plantio-etapa-rs {
    color: var(--texto-claro);
    font-size: var(--fs-pequeno);
}
/* Específico o bastante pra vencer `input.input { width:100% }` do base.css
   (que esticava o campo a 100% e esmagava o nome da etapa — o "comido"). */
.plantio-etapa-custo .plantio-custo-input {
    width: 120px;
    text-align: right;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
}

/* Revisão */
.plantio-revisao {
    background: var(--branco);
    border: 1px solid var(--bege-medio);
    border-radius: var(--raio-md);
    padding: var(--gap-md) var(--gap-lg);
    margin-bottom: var(--gap-lg);
}
.rev-linha {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-md);
    padding: 7px 0;
    border-bottom: 1px solid var(--bege-suave);
    font-size: var(--fs-pequeno);
}
.rev-linha:last-child { border-bottom: none; }
.rev-linha span { color: var(--texto-secundario); }
.rev-linha strong { color: var(--texto-principal); text-align: right; }

.plantio-rev-h4 {
    color: var(--verde-escuro);
    font-size: var(--fs-base);
    margin: var(--gap-md) 0 var(--gap-sm);
}
.plantio-rev-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-pequeno);
    margin-bottom: var(--gap-lg);
}
.plantio-rev-tabela td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--bege-suave);
    color: var(--texto-principal);
}
.plantio-rev-tabela .rev-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plantio-rev-tabela tfoot td {
    font-weight: var(--peso-bold);
    border-top: 2px solid var(--verde-escuro);
    border-bottom: none;
    color: var(--verde-escuro);
}