/* ============================================================
   Vigilância de Processos e Controle de Infecção
   Relatórios das avaliações de dispositivos invasivos
   (complementos sobre ../painel/painel.css). Inclui a folha de
   impressão: o relatório sai limpo em A4 para "Salvar em PDF".
   ============================================================ */


/* ---------------- lista ---------------- */

.rel-secao {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.rel-cabecalho h2 {

    margin: 0;

    color: var(--primary-navy);

    font-size: 1.15rem;
}


.rel-sub {

    margin: 4px 0 0;

    color: var(--text-muted);

    font-size: 0.86rem;
}


.rel-mes {

    margin: 10px 0 8px;

    color: #51607A;

    font-size: 0.76rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.rel-lista {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 12px;
}


.rel-card {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 16px 18px;

    background: var(--surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);
}


.rel-card-titulo {

    margin: 0;

    color: var(--primary-navy);

    font-size: 1rem;
}


.rel-card-meta {

    margin: 0;

    color: var(--text-muted);

    font-size: 0.82rem;
}


.rel-tipos {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


/* Etiqueta do tipo nas cores de identidade (../comum/cores-tipos.css). */

.rel-tipo {

    padding: 3px 9px;

    border-radius: 999px;

    border: 1px solid var(--cor-tipo);

    background: var(--cor-tipo-fundo);

    color: var(--cor-tipo-texto);

    font-size: 0.74rem;

    font-weight: 700;

    white-space: nowrap;
}


.rel-tipo.ipcsl { --cor-tipo: var(--tipo-ipcsl); --cor-tipo-fundo: var(--tipo-ipcsl-fundo); --cor-tipo-texto: var(--tipo-ipcsl-texto); }

.rel-tipo.itu   { --cor-tipo: var(--tipo-itu);   --cor-tipo-fundo: var(--tipo-itu-fundo);   --cor-tipo-texto: var(--tipo-itu-texto); }

.rel-tipo.pav   { --cor-tipo: var(--tipo-pav);   --cor-tipo-fundo: var(--tipo-pav-fundo);   --cor-tipo-texto: var(--tipo-pav-texto); }


.rel-status {

    padding: 3px 9px;

    border-radius: 999px;

    border: 1px solid var(--border-color);

    background: var(--surface-secondary);

    color: var(--text-muted);

    font-size: 0.74rem;

    font-weight: 700;
}


.rel-status.enviada {

    border-color: #B7D9C2;

    background: #E9F6EE;

    color: #1E5A38;
}


.rel-abrir {

    align-self: flex-start;

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 4px;

    padding: 8px 16px;

    border-radius: var(--radius-medium);

    background: var(--primary-navy);

    color: #FFFFFF;

    font-weight: 700;

    text-decoration: none;
}


.rel-abrir:hover {

    background: var(--serie-1);
}


.rel-abrir .icon {

    width: 18px;
    height: 18px;
}


.rel-vazio {

    margin: 0;

    padding: 18px;

    border: 1px dashed var(--border-color);

    border-radius: var(--radius-medium);

    color: var(--text-muted);

    font-size: 0.9rem;
}


/* ---------------- barra de ações ---------------- */

.rel-barra {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-bottom: 16px;
}


.rel-botao-pdf {

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border: 0;

    border-radius: var(--radius-medium);

    background: var(--primary-navy);

    color: #FFFFFF;

    font: inherit;

    font-weight: 700;

    cursor: pointer;
}


.rel-botao-pdf:hover {

    background: var(--serie-1);
}


.rel-botao-pdf .icon {

    width: 18px;
    height: 18px;
}


.rel-dica {

    margin: 0;

    flex: 1 1 260px;

    color: var(--text-muted);

    font-size: 0.8rem;
}


/* ---------------- o relatório ---------------- */

.relatorio {

    padding: 28px 30px 24px;

    background: #FFFFFF;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);

    color: var(--text-main);
}


.rel-topo {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 20px;

    padding-bottom: 16px;

    margin-bottom: 18px;

    border-bottom: 2px solid var(--primary-navy);
}


.rel-marca {

    width: 190px;

    height: auto;

    flex-shrink: 0;
}


.rel-titulos {

    flex: 1 1 260px;

    min-width: 0;
}


.rel-eyebrow {

    margin: 0 0 4px;

    color: var(--text-muted);

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.rel-titulos .rel-doc-titulo {

    margin: 0;

    color: var(--primary-navy);

    font-size: 1.3rem;

    line-height: 1.25;
}


.rel-subtitulo {

    margin: 6px 0 0;

    color: var(--text-main);

    font-size: 0.95rem;
}


.rel-bloco {

    margin-bottom: 20px;
}


.rel-bloco h3 {

    margin: 0 0 10px;

    padding-left: 10px;

    border-left: 5px solid var(--primary-navy);

    color: var(--primary-navy);

    font-size: 1.02rem;
}


.rel-bloco.ipcsl h3 { border-left-color: var(--tipo-ipcsl); }

.rel-bloco.itu h3   { border-left-color: var(--tipo-itu); }

.rel-bloco.pav h3   { border-left-color: var(--tipo-pav); }


.rel-dados {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 10px 20px;

    margin: 0;
}


.rel-dados div {

    padding: 8px 10px;

    background: var(--surface-secondary);

    border-radius: 8px;
}


.rel-dados dt {

    color: var(--text-muted);

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.rel-dados dd {

    margin: 2px 0 0;

    font-size: 0.92rem;

    font-weight: 600;
}


.rel-resumo {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 10px;
}


.rel-resumo div {

    padding: 12px 14px;

    border: 1px solid var(--border-color);

    border-radius: 8px;
}


.rel-resumo strong {

    display: block;

    color: var(--primary-navy);

    font-size: 1.5rem;

    line-height: 1.1;
}


.rel-resumo span {

    color: var(--text-muted);

    font-size: 0.78rem;
}


.rel-tabela {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.88rem;
}


.rel-tabela th,
.rel-tabela td {

    padding: 7px 9px;

    border-bottom: 1px solid var(--border-color);

    text-align: left;

    vertical-align: top;
}


.rel-tabela th {

    color: var(--text-muted);

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.rel-tabela td.resposta {

    white-space: nowrap;

    font-weight: 600;
}


.rel-tabela tr.nao-conforme td {

    background: #FBF1EF;
}


.rel-tabela tr.nao-conforme td.resposta {

    color: #8A3531;
}


.rel-tabela tr.nao-se-aplica td {

    color: var(--text-muted);
}


.rel-conformidade {

    margin: 8px 0 0;

    color: var(--text-main);

    font-size: 0.86rem;
}


.rel-texto {

    margin: 0;

    white-space: pre-wrap;

    font-size: 0.92rem;
}


.rel-fotos {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 10px;
}


.rel-fotos figure {

    margin: 0;
}


.rel-fotos img {

    width: 100%;

    height: auto;

    border: 1px solid var(--border-color);

    border-radius: 6px;
}


.rel-fotos figcaption {

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 0.72rem;

    overflow-wrap: anywhere;
}


.rel-rodape {

    margin-top: 18px;

    padding-top: 10px;

    border-top: 1px solid var(--border-color);

    color: var(--text-muted);

    font-size: 0.74rem;
}


/* ---------------- impressão / PDF ---------------- */

@page {

    size: A4;

    margin: 14mm;
}


@media print {

    body {

        background: #FFFFFF;
    }

    .app-header,
    .rel-barra,
    .prototype-notice {

        display: none;
    }

    .main-content {

        width: 100%;

        padding: 0;
    }

    .relatorio {

        padding: 0;

        border: 0;

        border-radius: 0;
    }

    .rel-bloco,
    .rel-fotos figure {

        break-inside: avoid;
    }

    .rel-bloco h3 {

        break-after: avoid;
    }

    .rel-tabela tr {

        break-inside: avoid;
    }

    .rel-bloco h3,
    .rel-tabela tr.nao-conforme td,
    .rel-dados div {

        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;
    }
}