body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6f8;
    color: #1f2933;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

h1 {
    margin-bottom: 4px;
    font-size: 30px;
}

h2 {
    line-height: 1.25;
}

.subtitulo {
    margin-top: 0;
    color: #6b7280;
}

.filtros {
    display: flex;
    gap: 10px;
    margin: 24px 0;
    flex-wrap: wrap;
}

select,
input,
textarea,
button {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #cfd4da;
}

button {
    cursor: pointer;
    border: none;
    font-weight: bold;
    background: #222;
    color: white;
}

button:hover {
    opacity: 0.9;
}

.cards {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.card {
    display: block;
    background: white;
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    border: 1px solid #e1e5e9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.card:hover {
    border-color: #999;
}

.topo-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.caso {
    font-weight: bold;
    color: #666;
}

.prioridade {
    font-weight: bold;
    padding: 5px 9px;
    border-radius: 6px;
}

.prioridade.critica {
    color: #a30018;
    background: #fde8eb;
}

.prioridade.alta {
    color: #a94c00;
    background: #fff0df;
}

.prioridade.media {
    color: #725500;
    background: #fff8d8;
}

.info {
    background: white;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e1e5e9;
}

.diagnostico h3 {
    margin-top: 22px;
    margin-bottom: 10px;
}

.metricas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.metricas div {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

.metricas span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 5px;
}

.metricas strong {
    display: block;
    font-size: 18px;
}

.tabela-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
}

.tabela {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 14px;
}

.tabela th,
.tabela td {
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.tabela th {
    background: #f8fafc;
    color: #374151;
    font-size: 13px;
}

.tabela tr:last-child td {
    border-bottom: none;
}

.orientacao {
    margin-top: 14px;
    padding: 14px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e1e5e9;
}

.formulario label {
    font-weight: bold;
    margin-top: 8px;
}

.formulario input,
.formulario select,
.formulario textarea {
    width: 100%;
}

.formulario button {
    width: 100%;
    margin-top: 16px;
    padding: 15px;
}

.historico {
    margin-top: 12px;
}

.historico-item {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #e1e5e9;
}

.sucesso {
    padding: 14px;
    background: #e8f5e9;
    border-radius: 8px;
    margin: 15px 0;
}

.voltar {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 12px;
    font-weight: bold;
    color: #333;
}

.nav-links {
    margin-top: 8px;
}

.nav-links a {
    display: inline-block;
    color: #1f2933;
    font-weight: bold;
}

.aviso {
    padding: 14px;
    background: #eef6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin: 18px 0;
}

.painel-metricas {
    margin: 18px 0 24px;
}

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

.grid-duas h3 {
    margin-top: 0;
}

.grid-duas ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.badges span {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    font-size: 13px;
    font-weight: bold;
}

.tabela-compacta {
    min-width: 560px;
}

.tabela-fila {
    min-width: 1280px;
}

.tabela-fila th:nth-child(1),
.tabela-fila td:nth-child(1) {
    width: 90px;
}

.tabela-fila th:nth-child(2),
.tabela-fila td:nth-child(2) {
    width: 130px;
}

.tabela-fila th:nth-child(3),
.tabela-fila td:nth-child(3) {
    width: 220px;
}

.tabela-fila th:nth-child(4),
.tabela-fila td:nth-child(4),
.tabela-fila th:nth-child(6),
.tabela-fila td:nth-child(6) {
    width: 210px;
}

.lista-compacta {
    margin: 0;
    padding-left: 18px;
}

.lista-compacta li {
    margin-bottom: 4px;
}

.tabela small {
    color: #6b7280;
}

.tabela a {
    color: #111827;
    font-weight: bold;
}

.decisao-box {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    margin-bottom: 12px;
}

.decisao-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.acoes-decisao {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.botao-decisao {
    min-height: 44px;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    background: #111827;
}


/* =========================================================
   CELULAR
   ========================================================= */

.caso-navegacao, .caso-resumo { color: #4b5563; }
.retorno-loja { border-top: 1px solid #d1d5db; padding: 20px 0; }
.retorno-loja-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.retorno-loja h3 { margin: 0; font-size: 18px; }
.retorno-estado { font-weight: 700; color: #166534; white-space: nowrap; }
.retorno-sinal { margin: 6px 0 14px; color: #374151; }
.retorno-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.retorno-metricas span { border-left: 2px solid #d1d5db; padding-left: 9px; color: #4b5563; font-size: 13px; }
.retorno-metricas strong { display: block; color: #111827; font-size: 15px; }
.retorno-metricas small { display: block; }
.retorno-anterior { border-left: 3px solid #0f766e; padding-left: 10px; }
.retorno-anterior small { color: #6b7280; }
.retorno-form fieldset { border: 0; padding: 0; margin: 16px 0 8px; }
.retorno-form legend { font-weight: 700; margin-bottom: 8px; }
.retorno-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.retorno-opcoes label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #9ca3af; padding: 8px 10px; cursor: pointer; }
.retorno-opcoes label:has(input:checked) { border-color: #0f766e; background: #e6f5f1; }
.retorno-opcoes input { min-height: auto; margin: 0; }
.retorno-detalhe { display: block; margin: 12px 0; font-weight: 700; }
.retorno-detalhe[hidden] { display: none; }
.retorno-detalhe textarea { display: block; width: 100%; max-width: 680px; box-sizing: border-box; margin-top: 6px; font-weight: 400; }
.retorno-form button { min-height: 42px; }
.caso-diagnostico, .caso-historico { border-top: 1px solid #d1d5db; padding: 18px 0; }
.caso-diagnostico summary, .caso-historico summary { cursor: pointer; font-weight: 700; }

.encarte-envio { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 16px 0 22px; border-bottom: 1px solid #d1d5db; }
.encarte-envio label, .encarte-form label { display: block; font-weight: 600; font-size: 14px; }
.encarte-envio input, .encarte-form input, .encarte-form select { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; }
.encarte-envio button { min-height: 42px; }
.encarte-layout { display: grid; grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); gap: 24px; align-items: start; }
.encarte-preview { position: sticky; top: 12px; }
.encarte-preview iframe { display: block; width: 100%; height: min(76vh, 900px); border: 1px solid #d1d5db; margin-top: 12px; }
.encarte-preview img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; margin-top: 12px; border: 1px solid #d1d5db; }
.encarte-oferta { border-top: 1px solid #d1d5db; padding: 18px 0; }
.encarte-oferta h3 { margin: 0; font-size: 17px; }
.encarte-form { display: grid; gap: 10px; margin-top: 12px; }
.encarte-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.encarte-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.encarte-acoes button { min-height: 42px; }
.encarte-erro { color: #991b1b; font-weight: 600; }
.promocao-linha { border-top: 1px solid #d1d5db; padding: 16px 0; }
.promocao-grade { display: grid; grid-template-columns: minmax(260px, 3fr) minmax(110px, 1fr) minmax(110px, 1fr) 44px; gap: 12px; align-items: start; }
.promocao-grade label { position: relative; font-size: 14px; font-weight: 600; }
.promocao-grade input { box-sizing: border-box; display: block; width: 100%; margin-top: 5px; }
.promocao-grade .remover-linha { margin-top: 22px; min-height: 42px; font-size: 22px; }
.produto-selecionado { display: block; color: #0f766e; font-size: 12px; font-weight: 500; }
.sugestoes:not(:empty) { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid #9ca3af; box-shadow: 0 8px 18px #0002; }
.sugestao-produto { display: block; width: 100%; border: 0; border-bottom: 1px solid #e5e7eb; border-radius: 0; background: #fff; color: #111827; text-align: left; padding: 9px; font-size: 13px; }
.sugestao-produto:hover, .sugestao-produto:focus { background: #e6f5f1; }
.sugestao-titulo { display: block; font-weight: 600; }
.sugestao-detalhe { display: block; margin-top: 2px; color: #4b5563; font-weight: 400; }
.encarte-historico-item { padding: 10px 0; border-top: 1px solid #e5e7eb; }
.encarte-historico-item summary { cursor: pointer; }

@media (max-width: 900px) {
    .encarte-envio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .encarte-layout { grid-template-columns: 1fr; }
    .encarte-preview { position: static; }
    .encarte-preview iframe { height: 50vh; }
}

@media (max-width: 600px) {
    .encarte-envio, .encarte-form-grid { grid-template-columns: 1fr; }
    .encarte-acoes { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .promocao-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; }
    .promocao-descricao { grid-column: 1 / -1; }
    .retorno-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .retorno-loja-topo { align-items: flex-start; }
    .retorno-estado { white-space: normal; text-align: right; }
    .retorno-opcoes { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 700px) {

    .container {
        padding: 14px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 19px;
    }

    .filtros {
        flex-direction: column;
        gap: 8px;
    }

    .filtros select,
    .filtros button {
        width: 100%;
        min-height: 48px;
    }

    .cards {
        display: block;
    }

    .card {
        margin-bottom: 12px;
        padding: 16px;
    }

    .card h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .card p {
        margin: 7px 0;
    }

    .topo-card {
        margin-bottom: 10px;
    }

    .info {
        padding: 15px;
    }

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

    .grid-duas {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .acoes-decisao {
        grid-template-columns: 1fr;
    }

    .metricas strong {
        font-size: 16px;
    }

    .tabela {
        font-size: 13px;
    }

    .info p {
        margin: 9px 0;
    }

    .formulario {
        padding: 15px;
    }

    select,
    input,
    textarea {
        min-height: 48px;
        font-size: 16px;
    }

    textarea {
        min-height: 100px;
    }

    .formulario button {
        min-height: 52px;
        font-size: 17px;
    }

    .historico-item {
        font-size: 14px;
    }
}