/* =========================================================================
 * diario-render.css - CONTRATO UNICO DE APRESENTACAO DO CONTEUDO DO DIARIO
 * =========================================================================
 *
 * Este arquivo e a UNICA fonte de verdade para como o HTML armazenado de um
 * conteudo do diario e renderizado. E consumido pelos quatro contextos:
 *
 *   1. Editor (TinyMCE)  - via content_css + body_class="diario-render"
 *                          em Cadastro/ConteudoForm.aspx
 *   2. Lupa / Detalhar   - wrapper em Cadastro/ConteudoForm.aspx.cs
 *   3. Integra (tela)    - wrapper emitido por Negocio/Diario/Ng/SecaoNg.cs
 *   4. PDF wkhtmltopdf   - embutido por Cadastro/DiarioForm.aspx.cs e
 *                          Integra/DiarioVisualFormNovo.aspx.cs
 *
 * REGRA: qualquer ajuste na aparencia do conteudo do diario deve ser feito
 * AQUI, nunca em style inline ou em <style> de uma pagina especifica. Estilo
 * inline vence folha de estilo e foi exatamente o que fez os quatro contextos
 * divergirem antes desta unificacao.
 *
 * Referencia adotada: espelhar o documento Word original em A4.
 * ========================================================================= */

.diario-render {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    line-height: 1.4;
    color: #000000;
}

/* ---- Blocos de texto ---- */
.diario-render p {
    margin: 0 0 6px 0;
    line-height: inherit;
}

.diario-render h1,
.diario-render h2,
.diario-render h3,
.diario-render h4 {
    margin: 10px 0 6px 0;
    line-height: 1.25;
}

.diario-render ul,
.diario-render ol {
    margin: 0 0 6px 22px;
    padding: 0;
    line-height: inherit;
}

/* ---- Tabelas ----
 * Sem width:100% forcado: a tabela usa a largura natural do conteudo, como
 * no Word. max-width impede estouro horizontal da area util. */
.diario-render table {
    border-collapse: collapse;
    max-width: 100%;
    table-layout: auto;
    float: none;
    margin-left: 0;
    margin-right: 0;
}

.diario-render td,
.diario-render th {
    padding: 2px 4px;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ---- Midia ---- */
.diario-render img {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
 * Simulacao da area util A4 no editor.
 * A4 = 210mm de largura; o PDF usa margem lateral de 8mm (@page em
 * DiarioForm.aspx.cs), sobrando 194mm uteis. Aplicar a mesma largura no
 * corpo do TinyMCE faz a quebra de linha do editor coincidir com a do PDF.
 * ========================================================================= */
body.diario-render {
    width: 194mm;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
}