/* ============================================================
   MRC CONSULTORIA — Calculadora de Balanceamento de Linha
   ============================================================ */

/* ── Área principal ── */
.calc-wrap {
    background-color: var(--bg-soft);
    padding: 56px 24px 80px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.calc-container {
    width: 100%;
    max-width: 720px;
}

/* ── Cabeçalho da ferramenta ── */
.calc-header {
    text-align: center;
    margin-bottom: 32px;
}

.calc-header .badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    background: none;
    border: 1px solid var(--copper-500);
    color: var(--dourado);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 99px;
    margin-bottom: 16px;
}

.calc-header h1 {
    font-size: 1.7rem;
    line-height: 1.3;
    margin-bottom: 10px;
}

.calc-header p {
    font-size: .92rem;
    color: var(--muted);
    line-height: 1.7;
}

/* ── Indicador de progresso ── */
.calc-progress {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    gap: 0;
}

.calc-progress .step {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-2);
    padding: 10px 4px;
    border-bottom: 2px solid var(--petrol-100);
    transition: color .25s, border-color .25s;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.calc-progress .step.ativo {
    color: var(--dourado);
    border-color: var(--dourado);
}

.calc-progress .step.concluido {
    color: #27ae60;
    border-color: #27ae60;
}

/* ── Tela (card de cada etapa) ── */
.calc-screen {
    background: #fff;
    border: 1px solid var(--petrol-100);
    border-radius: 12px;
    padding: 32px 28px;
    animation: fadeIn .3s ease;
}

.calc-screen.hidden { display: none; }

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

.calc-screen h2 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.calc-screen .subtitulo {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ── Grupos de campo ── */
.campo-grupo {
    margin-bottom: 18px;
}

.campo-grupo label {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.campo-grupo input[type="number"],
.campo-grupo input[type="text"],
.campo-grupo input[type="email"],
.campo-grupo input[type="tel"],
.campo-grupo select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--petrol-100);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color .2s;
}

.campo-grupo input:focus,
.campo-grupo select:focus {
    outline: none;
    border-color: var(--dourado);
}

.campo-grupo .hint {
    font-size: .76rem;
    color: var(--muted-2);
    margin-top: 5px;
    line-height: 1.5;
}

/* ── Linha de demanda (número + unidade inline) ── */
.campo-inline {
    display: flex;
    gap: 10px;
}

.campo-inline input { flex: 2; }
.campo-inline select { flex: 1; }

/* ── Lista de tarefas ── */
.tarefas-lista {
    margin-bottom: 10px;
}

.tarefa-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.tarefa-row input[type="text"] { flex: 3; }
.tarefa-row input[type="number"] { flex: 1.5; min-width: 90px; }

.btn-remover {
    background: none;
    border: 1px solid #d32b1a;
    color: #d32b1a;
    border-radius: 5px;
    width: 32px;
    height: 36px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .2s;
}
.btn-remover:hover { background: rgba(231,76,60,.08); }

.btn-add-tarefa {
    background: none;
    border: 1px dashed var(--copper-500);
    color: var(--dourado);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background .2s, border-color .2s;
    margin-bottom: 18px;
}
.btn-add-tarefa:hover {
    background: var(--copper-100);
    border-color: var(--dourado);
}

/* ── Botões principais ── */
.btn-calc {
    display: block;
    width: 100%;
    background: var(--dourado);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .2s, transform .1s;
    margin-top: 8px;
    box-shadow: 0 8px 22px rgba(168,115,74,.3);
}
.btn-calc:hover { background: var(--copper-550); }
.btn-calc:active { transform: scale(.98); }
.btn-calc:disabled { background: var(--petrol-100); color: var(--muted-2); cursor: not-allowed; box-shadow: none; }

.btn-secundario {
    display: block;
    width: 100%;
    background: none;
    color: var(--petrol-700);
    border: 1.5px solid var(--petrol-700);
    border-radius: 7px;
    padding: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
    margin-top: 10px;
}
.btn-secundario:hover { background-color: var(--petrol-100); }

/* ── TELA 2 — Takt Time em destaque ── */
.takt-box {
    background: var(--copper-100);
    border: 2px solid var(--dourado);
    border-radius: 10px;
    padding: 28px;
    text-align: center;
    margin: 20px 0;
}

.takt-box .takt-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.takt-box .takt-valor {
    font-family: 'Poppins', sans-serif;
    font-size: 54px;
    font-weight: 700;
    color: var(--dourado);
    line-height: 1;
}

.takt-box .takt-unidade {
    font-size: 16px;
    color: var(--muted);
    margin-top: 6px;
}

.takt-frase {
    font-size: .92rem;
    color: var(--ink);
    line-height: 1.7;
    margin: 16px 0 8px;
    text-align: center;
}

.gancho-box {
    background: var(--bg-soft);
    border-left: 3px solid var(--dourado);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 20px 0 24px;
}

/* ── TELA 3 — Gate ── */
.gate-destaque {
    background: var(--copper-100);
    border: 1px solid var(--petrol-100);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: .85rem;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 22px;
}

.campo-obrigatorio { color: var(--dourado); }

/* ── TELA 4 — Resultado completo ── */
.resultado-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.resultado-card {
    background: var(--bg-soft);
    border: 1px solid var(--petrol-100);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.resultado-card .r-label {
    font-size: 11px;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 6px;
}

.resultado-card .r-valor {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--dourado);
    line-height: 1;
}

.resultado-card .r-sub {
    font-size: 12px;
    color: var(--muted-2);
    margin-top: 4px;
}

.resultado-card.destaque .r-valor { color: #27ae60; font-size: 38px; }

/* ── Alerta de otimização ── */
.alerta-box {
    background: rgba(230,126,34,.08);
    border: 1px solid rgba(230,126,34,.4);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 18px 0;
    font-size: .85rem;
    color: #9f570d;
    line-height: 1.7;
}

.alerta-box strong { color: #b44800; }

/* ── Gráficos (Tela 4) ── */
.chart-container {
    background: var(--bg-soft);
    border: 1px solid var(--petrol-100);
    border-radius: 10px;
    padding: 18px 20px 14px;
    margin-top: 20px;
}

.chart-titulo {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--azul-petroleo);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
}

/* ── CTA final ── */
.cta-box {
    background: var(--azul-petroleo);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    margin-top: 24px;
}

.cta-box p {
    font-size: .85rem;
    color: var(--petrol-200);
    margin-bottom: 14px;
    line-height: 1.6;
}

/* CTA primário — cobre sólido */
.btn-cta-principal {
    display: block;
    background: var(--dourado);
    color: #fff;
    text-decoration: none;
    border-radius: 7px;
    padding: 14px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: background .2s, transform .1s;
    box-sizing: border-box;
    text-align: center;
}
.btn-cta-principal:hover  { background: var(--copper-550); }
.btn-cta-principal:active { transform: scale(.98); }

/* CTA secundário — outline */
.btn-cta-agendar {
    display: block;
    background: none;
    border: 1px solid var(--petrol-200);
    color: var(--petrol-200);
    text-decoration: none;
    border-radius: 7px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
    transition: border-color .2s, color .2s;
    box-sizing: border-box;
    text-align: center;
}
.btn-cta-agendar:hover { border-color: #fff; color: #fff; }

/* ── Mensagem de erro ── */
.calc-erro {
    background: rgba(231,76,60,.08);
    border: 1px solid rgba(231,76,60,.35);
    border-radius: 6px;
    color: #c0392b;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: none;
}

/* ── Spinner de loading ── */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Separador ── */
.divider {
    border: none;
    border-top: 1px solid var(--petrol-100);
    margin: 20px 0;
}

/* ── Responsivo ── */
@media (max-width: 500px) {
    .calc-screen { padding: 22px 16px; }
    .takt-box .takt-valor { font-size: 40px; }
    .resultado-grid { grid-template-columns: 1fr 1fr; }
    .campo-inline { flex-direction: column; }
    .tarefa-row { flex-wrap: wrap; }
    .tarefa-row input[type="text"] { flex: 1 0 100%; }
    .calc-header h1 { font-size: 1.3rem; }
    .calc-progress .step { font-size: 9.5px; padding: 10px 2px; letter-spacing: 0; }
    .calc-wrap { padding: 56px 28px 80px; }
}