/*
 * Instalador. Depende de base.css, carregado antes dele.
 */

.envoltorio {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

@media (max-width: 820px) {
    .envoltorio { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px 48px; }
}

.marca { margin-bottom: 28px; }
.marca strong { display: block; font-size: 17px; letter-spacing: -0.01em; }
.marca span { color: var(--tinta-tenue); font-size: 13px; }

.etapas { list-style: none; margin: 0; padding: 0; }

.etapas li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    color: var(--tinta-tenue);
    font-size: 14px;
}

.etapas li[data-estado="atual"] { color: var(--tinta); font-weight: 600; }
.etapas li[data-estado="feita"] { color: var(--tinta-fraca); }

.etapas .numero {
    flex: 0 0 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--linha-forte);
    border-radius: 50%;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.etapas li[data-estado="atual"] .numero { border-color: var(--acento); color: var(--acento); }
.etapas li[data-estado="feita"] .numero { background: var(--ok); border-color: var(--ok); color: #fff; }

@media (max-width: 820px) {
    .etapas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
    .etapas li { flex-direction: column; gap: 4px; font-size: 11px; text-align: center; min-width: 64px; }
}

/* ---------- Painel ---------- */

.painel {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 32px;
}

@media (max-width: 820px) { .painel { padding: 22px; } }

.painel h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.painel .subtitulo { margin: 0 0 28px; color: var(--tinta-fraca); }
.painel h2 { font-size: 15px; margin: 28px 0 12px; }

/* ---------- Checagens ---------- */

.checagens { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }

.checagens li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: baseline;
    padding: 10px 2px;
    border-bottom: 1px solid var(--linha);
}

.checagens .rotulo { font-size: 14px; }
.checagens .valor { font-size: 12.5px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.checagens .remedio { grid-column: 1 / -1; font-size: 12.5px; color: var(--tinta-fraca); margin-top: 2px; }
.checagens li[data-estado="falhou"] .rotulo::before { content: "✕ "; color: var(--erro); font-weight: 700; }
.checagens li[data-estado="aviso"] .rotulo::before { content: "! "; color: var(--alerta); font-weight: 700; }
.checagens li[data-estado="ok"] .rotulo::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* ---------- Progresso ---------- */

.barra { height: 6px; background: var(--linha); border-radius: 999px; overflow: hidden; margin: 14px 0 8px; }
.barra span { display: block; height: 100%; background: var(--acento); width: 0; transition: width 0.3s ease; }
.progresso-texto { font-size: 13px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }