/*
 * Estilos do conteúdo criado no editor (TinyMCE).
 * Este arquivo é usado em dois lugares:
 *  1) dentro do editor (content_css) - o que você vê ao editar;
 *  2) no site / telas de visualização, envolvendo o HTML com .doc-content.
 * Mantenha os dois iguais para ter "o que você vê é o que sai".
 */

.doc-content {
    color: #1f2937;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.65;
    word-wrap: break-word;
}

/*
 * O reset global do tema (css/style.css / app.css) zera b, strong, i, em
 * com font-weight/font-style: inherit. Repomos aqui para que o negrito e o
 * italico feitos no editor continuem aparecendo no site.
 */
.doc-content b,
.doc-content strong {
    font-weight: 700;
}

.doc-content i,
.doc-content em {
    font-style: italic;
}

.doc-content u {
    text-decoration: underline;
}

.doc-content s,
.doc-content strike,
.doc-content del {
    text-decoration: line-through;
}

.doc-content sub { vertical-align: sub; font-size: smaller; }
.doc-content sup { vertical-align: super; font-size: smaller; }

.doc-content img {
    max-width: 100%;
    height: auto;
}

.doc-content p {
    margin: 0 0 1em;
    text-align: justify;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2;
    margin: 1.2em 0 0.5em;
    color: #0b4f9c;
}

.doc-content h1 { font-size: 34px; text-transform: uppercase; letter-spacing: .5px; }
.doc-content h2 { font-size: 26px; }
.doc-content h3 { font-size: 20px; }
.doc-content h4 { font-size: 17px; }

.doc-content ul,
.doc-content ol { margin: 0 0 1em 1.4em; padding: 0; }
.doc-content li { margin-bottom: .35em; }

.doc-content a { color: #0b4f9c; }

.doc-content hr {
    border: 0;
    border-top: 2px solid #16a34a;
    margin: 1.6em 0;
}

/* ---------- Blocos de diagramação ---------- */

/* Seção: bloco onde é possível aplicar imagem de fundo */
.doc-content .doc-section {
    position: relative;
    padding: 28px 32px;
    margin: 0 0 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 4px;
}

/* Faixa/cabeçalho de topo com imagem grande */
.doc-content .doc-hero {
    margin: 0 0 24px;
    text-align: center;
}
.doc-content .doc-hero img {
    width: 100%;
    display: block;
}

/* Marca d'água: imagem de fundo suave atrás do texto */
.doc-content .doc-watermark {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 55% auto;
}

/* Título principal do documento */
.doc-content .doc-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0b4f9c;
    margin: 0 0 4px;
    text-align: left;
}
.doc-content .doc-subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    color: #16a34a;
    margin: 0 0 18px;
    text-align: left;
}

/* Linha de rota: GUIADO >> SANTIAGO >> 7 NOITES */
.doc-content .doc-kicker {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #111827;
    margin: 0 0 18px;
}

/* Caixa de destaque (informações básicas, avisos) */
.doc-content .doc-box {
    background: #f3f7fb;
    border-left: 5px solid #0b4f9c;
    padding: 16px 20px;
    margin: 0 0 20px;
    border-radius: 3px;
}
.doc-content .doc-box.is-green { background: #f1faf3; border-left-color: #16a34a; }
.doc-content .doc-box.is-warning { background: #fff8ec; border-left-color: #d97706; }
.doc-content .doc-box p:last-child,
.doc-content .doc-box ul:last-child { margin-bottom: 0; }

/* Título sublinhado, estilo "Informações Básicas:" */
.doc-content .doc-label {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-decoration: underline;
    margin: 0 0 .5em;
    text-align: left;
}

/* Colunas (usa tabela: funciona no editor, no site e na geração de PDF) */
.doc-content table.doc-cols {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    table-layout: fixed;
}
.doc-content table.doc-cols td {
    vertical-align: top;
    padding: 0 14px;
    border: 0;
}
.doc-content table.doc-cols td:first-child { padding-left: 0; }
.doc-content table.doc-cols td:last-child { padding-right: 0; }

/* Tabela de dados normal */
.doc-content table.doc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.doc-content table.doc-table th,
.doc-content table.doc-table td {
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.doc-content table.doc-table th {
    background: #0b4f9c;
    color: #fff;
    font-weight: 700;
}
.doc-content table.doc-table tr:nth-child(even) td { background: #f8fafc; }

/* Legenda de imagem */
.doc-content .doc-caption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-top: -.6em;
}

/* Dia do roteiro */
.doc-content .doc-day {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0b4f9c;
    border-bottom: 2px solid #16a34a;
    padding-bottom: 4px;
    margin: 1.4em 0 .6em;
}

/* Quebra de página (plugin pagebreak) */
.doc-content .mce-pagebreak { border-top: 2px dashed #9ca3af; }

/* ---------- Cabeçalho e rodapé do documento ---------- */
/* Entram vazios e sem decoração: quem escreve monta o conteúdo e o estilo
   (imagem, texto, colunas, cores e imagem de fundo funcionam dentro deles). */

.doc-content .doc-header,
.doc-content .doc-footer {
    padding: 12px 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.doc-content .doc-header {
    margin: 0 0 24px;
    border-bottom: 1px solid #e5e7eb;
}

.doc-content .doc-footer {
    margin: 28px 0 0;
    border-top: 1px solid #e5e7eb;
}

.doc-content .doc-header img,
.doc-content .doc-footer img { max-width: 100%; height: auto; }

/* dentro do editor, um cabeçalho/rodapé vazio precisa continuar clicável */
body.doc-content .doc-header,
body.doc-content .doc-footer {
    min-height: 48px;
    outline: 1px dashed rgba(11, 79, 156, .25);
    outline-offset: 2px;
}