:root{
    --of-preto:#111111;
    --of-preto-2:#1b1b1b;
    --of-amarelo:#ffd400;
    --of-amarelo-hover:#e9c200;
    --of-branco:#ffffff;
    --of-fundo:#f5f5f5;
    --of-cinza:#6b7280;
    --of-borda:#e5e7eb;
    --of-verde:#16a34a;
    --of-vermelho:#dc2626;
    --of-raio:16px;
    --of-sombra:0 5px 20px rgba(0,0,0,.08);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--of-fundo);
    color:var(--of-preto);
    font-family:Arial,Helvetica,sans-serif;
}

.container,
.page-container,
.of-container{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
}

.card,
.of-card{
    background:var(--of-branco);
    border:1px solid var(--of-borda);
    border-radius:var(--of-raio);
    box-shadow:var(--of-sombra);
    padding:24px;
}

h1,h2,h3{
    color:var(--of-preto);
}

input,
select,
textarea{
    width:100%;
    min-height:46px;
    border:1px solid #d1d5db;
    border-radius:10px;
    padding:11px 13px;
    background:#fff;
    color:#111;
    font-size:15px;
    outline:none;
}

textarea{
    min-height:100px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--of-amarelo);
    box-shadow:0 0 0 3px rgba(255,212,0,.20);
}

button,
.btn,
.of-btn{
    min-height:46px;
    border:0;
    border-radius:10px;
    padding:11px 18px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.btn-primary,
.of-btn-primary{
    background:var(--of-amarelo);
    color:var(--of-preto);
}

.btn-primary:hover,
.of-btn-primary:hover{
    background:var(--of-amarelo-hover);
}

.btn-dark,
.of-btn-dark{
    background:var(--of-preto);
    color:var(--of-branco);
}

.btn-secondary,
.of-btn-secondary{
    background:#ededed;
    color:#111;
}

.aviso,
.of-aviso{
    padding:14px 16px;
    background:#fff8cc;
    border-left:5px solid var(--of-amarelo);
    border-radius:10px;
}

.steps,
.etapas,
.of-steps{
    display:flex;
    gap:8px;
    margin:20px 0;
}

.step,
.etapa,
.of-step{
    flex:1;
    text-align:center;
    padding:12px 8px;
    background:#e5e7eb;
    border-radius:10px;
    font-weight:700;
    font-size:14px;
}

.step.ativo,
.step.active,
.etapa.ativo,
.etapa.active,
.of-step.active{
    background:var(--of-amarelo);
    color:#111;
}

.of-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.of-grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.of-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:24px;
}

img{
    max-width:100%;
}

@media(max-width:768px){
    .container,
    .page-container,
    .of-container{
        width:min(100% - 20px,1180px);
    }

    .card,
    .of-card{
        padding:16px;
        border-radius:13px;
    }

    .of-grid-2,
    .of-grid-3{
        grid-template-columns:1fr;
    }

    .steps,
    .etapas,
    .of-steps{
        overflow-x:auto;
    }

    .step,
    .etapa,
    .of-step{
        min-width:105px;
        flex:none;
    }

    .of-actions{
        flex-direction:column;
    }

    .of-actions button,
    .of-actions .btn,
    .of-actions .of-btn{
        width:100%;
    }

    h1{
        font-size:26px;
    }

    h2{
        font-size:21px;
    }
}

/* =========================================================
   OFERTASFLEX - PADRAO OFICIAL DASHBOARD
   ========================================================= */

body.ofertasflex-dashboard-page{
    background:#080808 !important;
    color:#fff !important;
}

body.ofertasflex-dashboard-page main,
body.ofertasflex-dashboard-page .container,
body.ofertasflex-dashboard-page .page-container{
    width:min(1136px,calc(100% - 32px)) !important;
    max-width:1136px !important;
    margin:28px auto 60px !important;
}

/* TITULOS */
body.ofertasflex-dashboard-page h1,
body.ofertasflex-dashboard-page h2,
body.ofertasflex-dashboard-page h3,
body.ofertasflex-dashboard-page h4,
body.ofertasflex-dashboard-page label{
    color:#fff !important;
}

body.ofertasflex-dashboard-page p{
    color:#bdbdbd;
}

/* ETAPAS */
body.ofertasflex-dashboard-page .steps,
body.ofertasflex-dashboard-page .etapas{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:10px !important;
    margin:0 0 22px !important;
}

body.ofertasflex-dashboard-page .step,
body.ofertasflex-dashboard-page .etapa{
    background:#151515 !important;
    color:#fff !important;
    border:1px solid #2c2c2c !important;
    border-radius:16px !important;
    min-height:78px !important;
    box-shadow:none !important;
}

body.ofertasflex-dashboard-page .step.active,
body.ofertasflex-dashboard-page .step.ativo,
body.ofertasflex-dashboard-page .etapa.active,
body.ofertasflex-dashboard-page .etapa.ativo{
    background:#ffd400 !important;
    border-color:#ffd400 !important;
    color:#080808 !important;
}

body.ofertasflex-dashboard-page .step.active *,
body.ofertasflex-dashboard-page .step.ativo *,
body.ofertasflex-dashboard-page .etapa.active *,
body.ofertasflex-dashboard-page .etapa.ativo *{
    color:#080808 !important;
}

/* CARDS */
body.ofertasflex-dashboard-page .card,
body.ofertasflex-dashboard-page .painel,
body.ofertasflex-dashboard-page .step-content,
body.ofertasflex-dashboard-page .etapa-conteudo{
    background:#151515 !important;
    color:#fff !important;
    border:1px solid #2b2b2b !important;
    border-radius:20px !important;
    box-shadow:none !important;
}

/* AVISO */
body.ofertasflex-dashboard-page .aviso{
    background:#201d08 !important;
    color:#fff !important;
    border:1px solid #4b4200 !important;
    border-left:5px solid #ffd400 !important;
    border-radius:12px !important;
}

body.ofertasflex-dashboard-page .aviso *{
    color:#fff !important;
}

/* CAMPOS */
body.ofertasflex-dashboard-page input,
body.ofertasflex-dashboard-page select,
body.ofertasflex-dashboard-page textarea{
    background:#0d0d0d !important;
    color:#fff !important;
    border:1px solid #353535 !important;
    border-radius:12px !important;
}

body.ofertasflex-dashboard-page input::placeholder,
body.ofertasflex-dashboard-page textarea::placeholder{
    color:#777 !important;
}

body.ofertasflex-dashboard-page input:focus,
body.ofertasflex-dashboard-page select:focus,
body.ofertasflex-dashboard-page textarea:focus{
    border-color:#ffd400 !important;
    box-shadow:0 0 0 3px rgba(255,212,0,.12) !important;
}

/* PRODUTOS */
body.ofertasflex-dashboard-page .produto,
body.ofertasflex-dashboard-page .produto-card,
body.ofertasflex-dashboard-page .item-produto{
    background:#111 !important;
    color:#fff !important;
    border:1px solid #2b2b2b !important;
    border-radius:16px !important;
}

/* BOTOES */
body.ofertasflex-dashboard-page button,
body.ofertasflex-dashboard-page .btn{
    border-radius:12px !important;
    font-weight:800 !important;
}

body.ofertasflex-dashboard-page .btn-primary,
body.ofertasflex-dashboard-page button.primary{
    background:#ffd400 !important;
    color:#080808 !important;
}

/* JORNAL BASICO CONTINUA BRANCO:
   ele representa a arte que sera enviada para a IA */
body.ofertasflex-dashboard-page .jornal-basico,
body.ofertasflex-dashboard-page #jornalBasicoPreview{
    background:#fff !important;
    color:#111 !important;
}

body.ofertasflex-dashboard-page .jornal-basico *,
body.ofertasflex-dashboard-page #jornalBasicoPreview *{
    color:inherit;
}

/* RESULTADO */
body.ofertasflex-dashboard-page #resultadoJornal{
    background:#151515 !important;
    border:1px solid #2b2b2b !important;
    border-radius:20px !important;
}

/* MOBILE */
@media(max-width:768px){

    body.ofertasflex-dashboard-page main,
    body.ofertasflex-dashboard-page .container,
    body.ofertasflex-dashboard-page .page-container{
        width:calc(100% - 20px) !important;
    }

    body.ofertasflex-dashboard-page .steps,
    body.ofertasflex-dashboard-page .etapas{
        display:flex !important;
        overflow-x:auto !important;
    }

    body.ofertasflex-dashboard-page .step,
    body.ofertasflex-dashboard-page .etapa{
        min-width:115px !important;
    }
}