/* ============================================================
   MODULO: Diagnostico publico embedado
   ARQUIVO: /geral/assets/css/diagnostico.css
   LOTE: LOTE-002
   ============================================================ */

:root {
    --diag-border: #e6e6e6;
    --diag-bg: #ffffff;
    --diag-muted: #6c757d;
    --diag-soft: #f7f7f7;
}

html, body { min-height: 100%; }
body.diagnostico-publico {
    margin: 0;
    background: transparent;
    color: #212529;
}

.diagnostico-viewport {
    width: 100%;
    padding: 18px 12px 28px;
}

.diagnostico-container {
    width: min(100%, 920px);
    margin: 0 auto;
    background: var(--diag-bg);
    border: 1px solid var(--diag-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.045);
}

.diagnostico-topo {
    padding: 22px 26px;
    border-bottom: 1px solid var(--diag-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 24px;
    align-items: center;
}

.diagnostico-marca {
    min-width: 0;
    display: flex;
    gap: 14px;
    align-items: center;
}

.diagnostico-marca img {
    width: auto;
    height: 58px;
    max-width: 145px;
    object-fit: contain;
    flex: 0 0 auto;
}

.diagnostico-sistema { font-weight: 700; line-height: 1.2; }
.diagnostico-empresa { color: var(--diag-muted); font-size: .875rem; margin-top: 3px; }
.diagnostico-progresso-box .progress { height: 8px; background: #ededed; }
.diagnostico-progresso-box .progress-bar { background: #212529; width: 0; }

.diagnostico-corpo { padding: 30px 32px 20px; }

.diagnostico-pergunta {
    padding: 20px 0;
    border-bottom: 1px solid #efefef;
}
.diagnostico-pergunta:first-of-type { padding-top: 0; }
.diagnostico-pergunta:last-of-type { border-bottom: 0; }
.diagnostico-pergunta .form-label,
.diagnostico-pergunta legend {
    font-weight: 600;
    margin-bottom: 10px;
}
.diagnostico-ajuda { font-size: .875rem; color: var(--diag-muted); margin-top: 7px; }

.opcoes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}
.opcao-box {
    border: 1px solid var(--diag-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}
.opcao-box:has(.form-check-input:checked) {
    border-color: #7c7c7c;
    background: var(--diag-soft);
}

.diagnostico-acoes {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--diag-border);
}
.diagnostico-acoes .grupo-direita { margin-left: auto; }

.diagnostico-rodape-interno {
    text-align: center;
    color: #8a8a8a;
    border-top: 1px solid #f0f0f0;
    margin-top: 30px;
    padding-top: 16px;
}

.resultado-tabela th { width: 58%; font-weight: 600; }
.resultado-tabela td { text-align: right; }
.resultado-destaque {
    background: var(--diag-soft);
    border: 1px solid var(--diag-border);
    border-radius: 12px;
    padding: 18px;
}
.resultado-status {
    border-left: 4px solid #6c757d;
    padding-left: 14px;
}

[data-condicional][hidden] { display: none !important; }
.cidade-fallback[hidden] { display: none !important; }

@media (max-width: 767.98px) {
    .diagnostico-viewport { padding: 0; }
    .diagnostico-container {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .diagnostico-topo {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }
    .diagnostico-corpo { padding: 24px 18px 16px; }
    .diagnostico-marca img { height: 48px; max-width: 120px; }
    .opcoes-grid { grid-template-columns: 1fr; }
    .diagnostico-acoes { align-items: stretch; flex-direction: column-reverse; }
    .diagnostico-acoes .grupo-direita { margin-left: 0; }
    .diagnostico-acoes .btn { width: 100%; }
    .resultado-tabela th, .resultado-tabela td { width: auto; text-align: left; }
}

/* Revisao Silvio 01 - Acessibilidade e identidade WhatsApp CONSIL */
.btn-whatsapp-consil { background-color: #168c47; border: 1px solid #168c47; color: #fff; font-weight: 600; }
.btn-whatsapp-consil:hover, .btn-whatsapp-consil:focus { background-color: #11753b; border-color: #11753b; color: #fff; }
.btn-whatsapp-consil:focus-visible { outline: 3px solid #14532d; outline-offset: 2px; }
.diagnostico-subcampo { max-width: 460px; margin-top: 12px; }
[data-condicional][hidden] { display: none !important; }


/* Revisao Silvio 02 - Identificacao acessivel de inconsistencias */
.diagnostico-alerta-erros { scroll-margin-top: 16px; }
.diagnostico-alerta-erros[hidden] { display: none !important; }
.diagnostico-pergunta.diagnostico-pergunta-erro {
    border-left: 4px solid #dc3545;
    padding-left: 14px;
    background: #fffafa;
}
.diagnostico-pergunta-erro > legend,
.diagnostico-pergunta-erro > .form-label { color: #842029; }
.diagnostico-pergunta .is-invalid,
.diagnostico-pergunta select.is-invalid { border-color: #dc3545; }
.diagnostico-pergunta .opcoes-grid.is-invalid,
.diagnostico-pergunta .diagnostico-grupo-erro { outline: 2px solid #dc3545; outline-offset: 4px; border-radius: 5px; }
.diagnostico-pergunta .opcao-box:has(.is-invalid) { border-color: #dc3545; }
.diagnostico-feedback-erro {
    color: #b02a37;
    font-size: .875rem;
    font-weight: 500;
    margin-top: 6px;
}