/* ============================================
   RECEITA — Preview + Impressão (Fase 3)
   ============================================
   Arquivo isolado. Carregado em index.html após css/receita.css.

   - @media screen: preview na tela (escala visual ~A4)
   - @media print: layout final pra papel (Branca retrato / Ctrl Esp paisagem 2 A5)
   - @page com size: A4 (retrato ou paisagem) + margins regulatórias

   Doc regulatório: docs/RECEITA_REGULATORY_RULES.md
   ============================================ */

/* ════════════════════════════════════════════════════════════════════
   §1 — Wrapper + toolbar do preview (não imprime)
   ════════════════════════════════════════════════════════════════════ */
.receita-preview-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.receita-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.receita-preview-toolbar-spacer { flex: 1; }
.receita-preview-toolbar-info {
    font-size: 12.5px;
    color: var(--color-text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.receita-preview-toolbar-info i { color: var(--accent-primary, #18355C); }

.no-print { /* visível na tela; oculto em print por §5 */ }

.receita-preview-error {
    padding: 32px;
    text-align: center;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
}

/* ════════════════════════════════════════════════════════════════════
   §2 — Print area (estilos compartilhados screen + print)
   ════════════════════════════════════════════════════════════════════ */
.receita-print-area {
    background: white;
    color: #0c1f3b;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.3;
    font-size: 10.5pt;
}

.receita-page {
    background: white;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Retrato (Branca simples + verso de qualquer tipo) */
.receita-page-portrait {
    width: 210mm;
    padding: 8mm 10mm;
}

/* Paisagem com 2 A5 lado a lado (Controle Especial / C1 / C5) */
.receita-page-landscape {
    width: 297mm;
    padding: 5mm;
}
.receita-page-2vias {
    display: grid;
    grid-template-columns: 1fr 4mm 1fr;
    column-gap: 0;
    align-items: stretch;
}
.receita-via {
    padding: 4mm 6mm;
    overflow: hidden;
}
.receita-corte {
    border-left: 1px dashed #999;
    margin: 0;
    height: 100%;
    align-self: stretch;
}

/* ════════════════════════════════════════════════════════════════════
   §3 — Tela: simula a folha + sombra para previsualização
   ════════════════════════════════════════════════════════════════════ */
@media screen {
    .receita-print-area {
        max-width: 100%;
        overflow-x: auto;
    }
    .receita-page {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
        margin-bottom: 16px;
        border: 1px solid #e2e8f0;
    }
    /* Reduz a escala da paisagem em telas menores pra caber sem rolar */
    @media (max-width: 1400px) {
        .receita-page-landscape {
            transform: scale(0.78);
            transform-origin: top center;
            margin-bottom: -50mm; /* compensa o scale */
        }
    }
    @media (max-width: 900px) {
        .receita-page-landscape { transform: scale(0.55); margin-bottom: -90mm; }
        .receita-page-portrait  { transform: scale(0.75); transform-origin: top center; margin-bottom: -65mm; }
    }
}

/* ════════════════════════════════════════════════════════════════════
   §4 — Tipografia da receita
   ════════════════════════════════════════════════════════════════════ */
.receita-tipo-badge {
    display: inline-block;
    background: transparent;
    color: #475569;
    padding: 1pt 6pt;
    font-size: 7.5pt;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 0.5pt solid #94a3b8;
    border-radius: 2pt;
    margin-bottom: 4pt;
}

.receita-titulo {
    font-size: 12.5pt;
    font-weight: 700;
    text-align: center;
    margin: 0 0 4pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.receita-header {
    border-bottom: 1pt solid #0c1f3b;
    padding-bottom: 4pt;
    margin-bottom: 4pt;
}

/* Linha via (esquerda) + quadro do emitente (direita) — abaixo do título */
.receita-via-emitente-row {
    display: flex;
    align-items: flex-start;
    gap: 10pt;
    margin: 4pt 0 6pt;
}
.receita-via-tag {
    align-self: center;
    font-weight: 700;
    font-size: 9pt;
    letter-spacing: 0.04em;
    color: #0c1f3b;
}

/* Cabeçalho personalizado — logo + dados da clínica */
.receita-clinica-header {
    display: flex;
    align-items: center;
    gap: 9pt;
    min-width: 0;
}
.receita-clinica-logo {
    max-height: 42pt;
    max-width: 96pt;
    object-fit: contain;
    flex-shrink: 0;
}
.receita-clinica-info { line-height: 1.3; text-align: left; min-width: 0; }
.receita-clinica-nome { font-weight: 700; font-size: 10.5pt; margin: 0; color: #0c1f3b; }
.receita-clinica-contato { font-size: 8pt; color: #475569; margin: 1pt 0 0; }

/* Quadro do médico emitente — canto superior direito */
.receita-emitente-card {
    flex-shrink: 0;
    width: 175pt;
    margin-left: auto;
    border: 0.7pt solid #475569;
    border-radius: 3pt;
    padding: 4pt 7pt;
    text-align: left;
    line-height: 1.3;
}
.receita-emitente-card-rotulo {
    font-size: 6.5pt;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 600;
    margin: 0 0 1pt;
}
.receita-emitente-card-nome { font-weight: 700; font-size: 9.5pt; margin: 0; color: #0c1f3b; }
.receita-emitente-card-meta { font-size: 8pt; color: #1e293b; margin: 1pt 0 0; }

/* Quadro de emitente vazio — receita de controle de estudante: espaço
   para o médico responsável carimbar/assinar como emitente. */
.receita-emitente-box {
    flex-shrink: 0;
    width: 175pt;
    margin-left: auto;
    border: 0.7pt solid #475569;
    border-radius: 3pt;
    min-height: 46pt;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 3pt 6pt;
}
.receita-emitente-rotulo {
    font-size: 7.5pt;
    color: #475569;
    text-align: center;
    line-height: 1.25;
}

/* Paciente */
.receita-paciente-section {
    margin: 6pt 0;
    padding-bottom: 4pt;
    border-bottom: 0.7pt solid #475569;
}
.receita-field-line {
    margin: 2pt 0;
    font-size: 10pt;
    line-height: 1.35;
}
.receita-field-line strong { font-weight: 600; }
.receita-field-meta {
    font-size: 9.5pt;
    color: #475569;
    margin-top: 4pt;
}

/* Prescrição */
.receita-section-title {
    font-size: 9.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 6pt 0 4pt;
    color: #0c1f3b;
    border-bottom: 0.7pt solid #475569;
    padding-bottom: 2pt;
    text-align: center;
}

.receita-meds-print-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.receita-med-item {
    padding: 3pt 0;
    border-bottom: none;
    page-break-inside: avoid;
}
.receita-med-item:last-child { border-bottom: none; }
.receita-med-titulo {
    margin: 0 0 3pt;
    font-size: 11pt;
    line-height: 1.4;
}
.receita-med-uso {
    margin: 1pt 0 0 14pt;
    font-size: 10pt;
    color: #1e293b;
}
.receita-med-qtd {
    margin: 2pt 0;
    font-size: 10pt;
    color: #0c1f3b;
}
.receita-med-qtd strong { font-weight: 600; }
.receita-meds-empty {
    font-style: italic;
    color: #94a3b8;
    text-align: center;
    padding: 12pt;
}

/* Rodapé */
.receita-rodape {
    margin-top: 22pt;
    page-break-inside: avoid;
}
.receita-data-local {
    margin: 6pt 0 4pt;
    font-size: 10pt;
}
.receita-assinatura {
    margin: 30pt 0 4pt;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.receita-assinatura-linha {
    width: 40%;
    margin: 10pt auto 3pt;
    border-bottom: 0.3pt solid #1e293b;
    height: 0;
}
.receita-assinatura-nome {
    margin: 0;
    font-size: 10.5pt;
    font-weight: 600;
}
.receita-assinatura-meta {
    margin: 1pt 0 0;
    font-size: 9.5pt;
    color: #475569;
}

/* Comprador (apenas Controle Especial) */
.receita-comprador {
    margin-top: 14pt;
    padding-top: 6pt;
    border-top: 0.5pt dashed #cbd5e1;
    font-size: 9.5pt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12pt 18pt;
}
.receita-comprador-titulo {
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 6pt 0 3pt;
    color: #0c1f3b;
}
.receita-comprador-grid {
    display: flex;
    flex-direction: column;
    gap: 3pt;
    line-height: 1.5;
}
.receita-comprador-grid > div { font-size: 9pt; }

.receita-via-label {
    margin: 10pt 0 0;
    text-align: center;
    font-weight: 700;
    font-size: 9.5pt;
    letter-spacing: 0.04em;
    color: #0c1f3b;
    border-top: 0.5pt solid #cbd5e1;
    padding-top: 6pt;
}
.receita-validade {
    margin: 4pt 0 0;
    text-align: center;
    font-size: 8.5pt;
    color: #475569;
    font-style: italic;
}

/* Verso (página 2 — Controle Especial) */
.receita-page-verso {
    page-break-before: always;
    margin-top: 24px;
}
.receita-verso-nota {
    font-size: 9.5pt;
    font-style: italic;
    color: #475569;
    text-align: center;
    margin: 6pt 0;
}
.receita-verso-campos {
    margin-top: 20pt;
    line-height: 1.9;
}
.receita-verso-campos p {
    margin: 0;
    font-size: 11pt;
    border-bottom: 0.5pt dotted #cbd5e1;
    padding: 4pt 0;
}
.receita-verso-carimbo {
    margin-top: 16pt;
    padding: 28pt 0;
    border: 0.6pt dashed #cbd5e1;
    text-align: center;
    color: #94a3b8;
    font-size: 10pt;
}




/* ════════════════════════════════════════════════════════════════════
   §6 — Dark mode (preview apenas — impressão sempre branco)
   ════════════════════════════════════════════════════════════════════ */
html.dark .receita-preview-toolbar {
    background: var(--color-bg-primary, #21262d);
    border-color: var(--color-border-primary, #30363d);
}
html.dark .receita-page {
    /* Mantém fundo branco mesmo em dark mode — receita SEMPRE branca */
    background: white;
    color: #0c1f3b;
}

/* ════════════════════════════════════════════════════════════════════
   §7 — Responsivo (preview na tela)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .receita-preview-toolbar { flex-wrap: wrap; }
    .receita-preview-toolbar-info { order: 99; flex-basis: 100%; }
}

/* Via de uso — linha discreta antes da posologia ──────── */
.receita-med-via {
    margin: 2pt 0;
    font-size: 10pt;
    color: #0c1f3b;
    letter-spacing: 0.02em;
}
.receita-med-via strong {
    font-weight: 600;
}



/* ════════════════════════════════════════════════════════════════════
   §8 — Layout PRESCRIÇÃO (Fase 3.6) — agrupado por via + dot leader
   ════════════════════════════════════════════════════════════════════ */

/* Grupo de meds por via */
.receita-meds-group {
    margin-bottom: 6pt;
    page-break-inside: avoid;
}
.receita-meds-via-header {
    margin: 4pt 0 2pt;
    font-size: 10pt;
    font-weight: 600;
    font-style: italic;
    color: #0c1f3b;
    letter-spacing: 0.02em;
}

/* Lista numerada — sem marcador (números embutidos no texto) */
.receita-meds-print-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Linha "1. Nome dose ........ 21 CP" usando flex + leader */
.receita-med-linha {
    display: flex;
    align-items: baseline;
    gap: 4pt;
    font-size: 11pt;
    line-height: 1.35;
}
.receita-med-titulo-inline {
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.receita-med-titulo-inline strong { font-weight: 600; }

.receita-med-leader {
    flex: 1;
    border-bottom: 0.5pt dotted #94a3b8;
    height: 0.5em;
    margin: 0 2pt;
    min-width: 8pt;
}

.receita-med-qtd-right {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    color: #0c1f3b;
    font-size: 10.5pt;
}

/* ════════════════════════════════════════════════════════════════════
   §9 — Rodapé refinado (Fase 3.7) — data à direita + assinatura
   ════════════════════════════════════════════════════════════════════ */
.receita-data-direita {
    text-align: right;
    margin: 16pt 0 4pt;
    font-size: 10pt;
    font-weight: 500;
}
.receita-assinatura {
    margin: 18pt 0 4pt;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.receita-assinatura-linha {
    width: 60%;
    margin: 6pt auto 2pt;
    border-bottom: 0.6pt solid #0c1f3b;
    height: 0;
}
.receita-assinatura-rotulo {
    margin: 1pt 0 0;
    font-size: 9.5pt;
    color: #1e293b;
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   §10 — Comprador + Fornecedor em 2 COLUNAS (Fase 3.8 → 3.12)
   Sem linhas-guia nos campos; divisor vertical entre as colunas.
   ════════════════════════════════════════════════════════════════════ */
.receita-comprador {
    margin-top: 14pt;
    padding-top: 6pt;
    border-top: 0.5pt dashed #cbd5e1;
    font-size: 8.5pt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.receita-comprador-bloco {
    display: flex;
    flex-direction: column;
    padding: 0 14pt;
}
.receita-comprador-bloco + .receita-comprador-bloco {
    border-left: 0.4pt solid #cbd5e1;
}
.receita-comprador-bloco:first-child { padding-left: 0; }
.receita-comprador-bloco:last-child  { padding-right: 0; }
.receita-comprador-titulo {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 4pt;
    color: #0c1f3b;
}
.receita-comprador-grid {
    display: flex;
    flex-direction: column;
    gap: 4pt;
    line-height: 1.35;
}
.receita-comprador-grid > div { font-size: 8.5pt; }


/* ════════════════════════════════════════════════════════════════════
   §12 — Comprador: campos sem linhas-guia (Fase 3.12)
   ════════════════════════════════════════════════════════════════════ */
.receita-comprador-field {
    display: flex;
    align-items: baseline;
    gap: 4pt;
    padding: 3pt 0 1pt;
    font-size: 8.5pt;
    line-height: 1.2;
}
.receita-comprador-field span {
    flex-shrink: 0;
    font-weight: 500;
    color: #0c1f3b;
}


/* ════════════════════════════════════════════════════════════════════
   §13 — FIX DEFINITIVO páginas em branco extras (Fase 3.11)
   ════════════════════════════════════════════════════════════════════
   Estratégia FINAL: position: fixed + dimensões exatas + overflow:hidden
   no html/body. Garante UMA folha apenas.
   ════════════════════════════════════════════════════════════════════ */
@media print {
    @page {
        margin: 0 !important; /* Sem margem do @page — o conteúdo dá o respiro */
    }
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        background: white !important;
    }
    /* Bloqueia rolagem + páginas extras */
    body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .receita-print-area {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 5mm !important; /* Aqui o respiro de 5mm — em vez do @page */
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Portrait: container ocupa altura disponível */
    .receita-page-portrait {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
    }
    /* Landscape: container ocupa altura disponível, grid 2 vias */
    .receita-page-landscape {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
    }
    .receita-page-2vias {
        display: grid !important;
        grid-template-columns: 1fr 3mm 1fr !important;
        height: 100% !important;
    }
    .receita-via {
        height: 100% !important;
        padding: 0 5mm !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .receita-via-content {
        height: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Branca portrait: padding interno via via-content */
    .receita-page-portrait .receita-via-content {
        height: 100% !important;
        padding: 0 5mm !important;
    }

    /* Esconde toolbar */
    .no-print, .receita-preview-toolbar { display: none !important; }
}