/*
 * Experimente sem cadastro (app/View/demonstracao.php - Home::demonstracao).
 *
 * A simulacao usa o CSS da apresentacao (css/sistema/apresentacaoDemo.css).
 * Aqui so o que muda na pagina publica:
 *  - o topo e o fechamento com a chamada para os planos;
 *  - a briga com o style.css global, que pinta p, span, a, li e label de
 *    #111 com !important: dentro da simulacao eles voltam a herdar a cor, e as
 *    classes coloridas da simulacao reafirmam a delas (mesmo motivo do site.css).
 */

/* ------------------------------------------------------------------ topo */
.dp-topo { padding: 2.5rem 0 1rem; }
.dp-topo .st-lead { max-width: 52rem; }
/* Mesmo degrade azul do titulo da Home (no site.css ele so vale dentro de .st-hero) */
.st-root .dp-topo .st-h1 .st-gradiente {
    background: linear-gradient(90deg, var(--st-marca), var(--st-ceu));
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
}
.dp-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.st-root .dp-dica, .st-root .dp-dica * { color: var(--st-apagado) !important; }

/* -------------------------------------------------------------- fechamento */
.dp-cta { padding: 3rem 0 4rem; text-align: center; }
.dp-cta .st-lead { margin-left: auto; margin-right: auto; }
.dp-cta-botoes { justify-content: center; }

/* -------------------------------- cores da simulacao contra o style.css */
.dm-publico :is(p, span, a, li, label) { color: inherit !important; }
.dm-publico .dm-mudo, .dm-publico .dm-mudo * { color: var(--dm-mudo) !important; }
.dm-publico .dm-selo-plano { color: #6d28d9 !important; }
.dm-publico .dm-selo { color: #92400e !important; }
.dm-publico .dm-badge-ok { color: var(--dm-azul-2) !important; }
.dm-publico .badge.text-success, .dm-publico .badge.text-success * { color: var(--dm-ok) !important; }
.dm-publico .badge.text-info { color: #0e7490 !important; }
.dm-publico .dm-dias { color: var(--dm-mudo) !important; }
.dm-publico .dm-dias.parado { color: var(--dm-critico) !important; }
.dm-publico .dm-oferta, .dm-publico .dm-oferta * { color: #fff !important; }
.dm-publico .dm-hora { color: #64748b !important; }
.dm-publico .dm-celular-topo, .dm-publico .dm-celular-topo * { color: #fff !important; }
.dm-publico .dm-kpis span { color: var(--dm-mudo) !important; }
.dm-publico .dm-kpis .sobe, .dm-publico .dm-kpis .sobe * { color: var(--dm-ok) !important; }
.dm-publico .dm-kpis .desce, .dm-publico .dm-kpis .desce * { color: var(--dm-critico) !important; }
.dm-publico .dm-situacao.ativo { color: var(--dm-ok) !important; }
.dm-publico .dm-situacao.atencao { color: var(--dm-atencao) !important; }
.dm-publico .dm-situacao.risco { color: var(--dm-risco) !important; }
.dm-publico .dm-situacao.critico { color: var(--dm-critico) !important; }
.dm-publico .dm-paradas li span { color: var(--dm-mudo) !important; }
.dm-publico .dm-aviso, .dm-publico .dm-aviso * { color: #fff !important; }
.dm-publico .dm-aviso a { color: var(--dm-turquesa) !important; }
.dm-publico .dm-etapas button.ativa, .dm-publico .dm-etapas button.ativa * { color: #fff !important; }
.dm-publico .btn-primary, .dm-publico .btn-primary *, .dm-publico .btn-success, .dm-publico .btn-success * { color: #fff !important; }

/* O tema (style.css) pinta todo .btn-primary de branco com borda cinza: na
   simulacao o botao principal volta a ser azul, como na apresentacao. */
.dm-publico .btn-primary {
    background-color: var(--dm-azul-2) !important;
    border: 1px solid var(--dm-azul-2) !important;
    color: #fff !important;
}
.dm-publico .btn-primary i { color: #fff !important; }
.dm-publico .btn-primary:disabled { opacity: .55; }

/* O site e mais estreito que a tela da apresentacao: abas sem largura minima */
.dm-publico .dm-etapas { padding-left: 0; padding-right: 0; background: transparent; border-bottom: 0; }
.dm-publico .dm-etapas button { flex: 1 1 auto; min-width: 0; padding: 9px 10px; font-size: 13.5px; }
@media (min-width: 768px) and (max-width: 1199.98px) {
    .dm-publico .dm-etapas button > i { display: none; }
}

@media (max-width: 767.98px) {
    /* Celular: abas rolam de lado; so o numero, e o nome so na aba aberta */
    .dm-publico .dm-etapas button { flex: 0 0 auto; }
    .dm-publico .dm-etapas button > i { display: none; }
}