/* ============================================
   DOCUMENTO.CSS — Gerador de documentos (atestado, declaração)
   ============================================
   Aba #gerador-documento. UI usa os tokens do sistema (paleta-aware);
   a folha A4 (.doc-page) é sempre preto sobre branco — documento formal.
   ============================================ */

.docg-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: docg-fade 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes docg-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Toolbar ───────────────────────────────────────────────── */
.docg-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 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);
}
.docg-spacer { flex: 1; }
.docg-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #0c1f3b);
}
.docg-title i { color: var(--accent-primary, #18355C); font-size: 15px; }

.docg-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 8px;
    color: var(--color-text-secondary, #1e293b);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.docg-back:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 6%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 35%, transparent);
    color: var(--accent-primary, #18355C);
}
.docg-back i { font-size: 12px; }

.docg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.docg-btn-primary {
    background: var(--accent-primary, #18355C);
    border-color: var(--accent-primary, #18355C);
    color: #ffffff;
}
.docg-btn-primary:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 88%, black);
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 88%, black);
}

/* ── Corpo: formulário (esq) + preview (dir) ───────────────── */
.docg-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 12px;
    align-items: start;
}
.docg-form-col,
.docg-preview-col {
    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);
}
.docg-form-col { padding: 14px 16px; }
.docg-preview-col { padding: 20px; display: flex; justify-content: center; }

/* ── Modalidade (pills) ────────────────────────────────────── */
.docg-modalidade-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--color-border-primary, #e2e8f0);
}
.docg-modalidade-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
}
.docg-modalidades { display: flex; flex-wrap: wrap; gap: 6px; }
.docg-modalidade-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border-primary, #e2e8f0);
    background: transparent;
    color: var(--color-text-secondary, #1e293b);
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.docg-modalidade-btn:hover {
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 30%, transparent);
    color: var(--accent-primary, #18355C);
}
.docg-modalidade-btn.is-active {
    background: var(--accent-primary, #18355C);
    border-color: var(--accent-primary, #18355C);
    color: #ffffff;
    font-weight: 500;
}

/* ── Formulário ────────────────────────────────────────────── */
.docg-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.docg-campo { display: flex; flex-direction: column; gap: 4px; }
.docg-campo-wide { grid-column: span 2; }
.docg-campo label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-muted, #94a3b8);
}
.docg-req { color: #dc2626; margin-left: 1px; }
.docg-opt { color: var(--color-text-muted, #94a3b8); font-size: 11px; opacity: 0.7; margin-left: 2px; }
.docg-campo input {
    padding: 7px 9px;
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-primary, #0c1f3b);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.docg-campo input:focus {
    outline: none;
    border-color: var(--accent-primary, #18355C);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #18355C) 16%, transparent);
}
.docg-campo textarea {
    padding: 7px 9px;
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-primary, #0c1f3b);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.docg-campo textarea:focus {
    outline: none;
    border-color: var(--accent-primary, #18355C);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #18355C) 16%, transparent);
}

/* ── Folha A4 (preview) ────────────────────────────────────── */
.doc-page {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 40px 44px;
    font-family: 'Times New Roman', Times, serif;
    color: #111111;
    font-size: 15px;
    line-height: 1.9;
}
.doc-clinica-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid #cbd5e1;
}
.doc-clinica-logo { max-height: 64px; max-width: 170px; object-fit: contain; flex-shrink: 0; }
.doc-clinica-info { line-height: 1.4; text-align: left; }
.doc-clinica-nome { font-weight: 700; font-size: 15px; margin: 0; }
.doc-clinica-contato { font-size: 12px; color: #475569; margin: 2px 0 0; }
.doc-titulo {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 28px;
}
.doc-titulo .doc-subtitulo {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.doc-corpo p { margin: 0 0 18px; text-align: justify; }
.doc-autorizacao { margin-top: 26px !important; }
.doc-bloco-titulo { font-weight: 600; margin-top: 16px !important; }
.doc-texto-livre { text-align: justify; }
.doc-data { margin: 32px 0 0; }
.doc-blank {
    display: inline-block;
    min-width: 200px;
    border-bottom: 1px solid #111111;
    line-height: 1;
}
.doc-blank-xs { min-width: 64px; }
.doc-assinatura { margin-top: 52px; text-align: center; }
.doc-assinatura-linha {
    width: 300px;
    max-width: 80%;
    margin: 0 auto 4px;
    border-bottom: 1px solid #111111;
    height: 0;
}
.doc-assinatura-nome { margin: 0; font-size: 13.5px; font-weight: 700; }
.doc-assinatura-rotulo { margin: 0; font-size: 13px; }

/* ── Dark mode (UI; a folha permanece branca) ──────────────── */
html.dark .docg-toolbar,
html.dark .docg-form-col,
html.dark .docg-preview-col {
    background: var(--color-bg-primary, #21262d);
    border-color: var(--color-border-primary, #30363d);
}
html.dark .docg-title { color: var(--color-text-primary, #e6edf3); }
html.dark .docg-back {
    border-color: var(--color-border-primary, #30363d);
    color: var(--color-text-secondary, #c9d1d9);
}
html.dark .docg-campo input,
html.dark .docg-campo textarea {
    background: var(--color-bg-secondary, #161b22);
    border-color: var(--color-border-primary, #30363d);
    color: var(--color-text-primary, #e6edf3);
}
html.dark .docg-modalidade-btn {
    border-color: var(--color-border-primary, #30363d);
    color: var(--color-text-secondary, #c9d1d9);
}
html.dark .docg-preview-col { background: #2b313a; }

/* ── Solicitação de Exames (exr-*) ─────────────────────────── */
.exr-secao { margin-top: 14px; }
.exr-secao-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 7px;
}
.exr-count { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Toggle Tipo de exame (Laboratorial / Imagem) */
.exr-modo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.exr-modo-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
}
.exr-modo { display: inline-flex; gap: 6px; }

.exr-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.exr-atalho {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #18355C) 22%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #18355C) 7%, transparent);
    color: var(--accent-primary, #18355C);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.exr-atalho:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 45%, transparent);
}
.exr-atalho i { font-size: 9px; }

.exr-search { position: relative; }
.exr-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    background: var(--color-bg-secondary, #fbfcfe);
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.exr-search-box:focus-within {
    border-color: var(--accent-primary, #18355C);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #18355C) 16%, transparent);
}
.exr-search-box i { color: var(--color-text-muted, #94a3b8); font-size: 12px; }
.exr-search-box input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 13px; color: var(--color-text-primary, #0c1f3b); font-family: inherit;
}
.exr-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 50; max-height: 280px; overflow-y: auto;
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    padding: 5px;
}
.exr-search-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left;
    padding: 7px 9px; border: 1px solid transparent; border-radius: 6px;
    background: transparent; cursor: pointer; font-size: 12.5px;
    color: var(--color-text-primary, #0c1f3b);
}
.exr-search-row:hover,
.exr-search-row.is-highlight {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 8%, transparent);
}
.exr-search-cat {
    font-size: 10px; color: var(--color-text-muted, #94a3b8);
    white-space: nowrap; flex-shrink: 0;
}
.exr-search-freetext { color: var(--accent-primary, #18355C); font-weight: 500; }
.exr-search-empty {
    padding: 14px; text-align: center;
    color: var(--color-text-muted, #94a3b8); font-size: 12.5px;
}

.exr-vazio { font-size: 12.5px; color: var(--color-text-muted, #94a3b8); margin: 0; }
.exr-grupo { margin-bottom: 10px; }
.exr-grupo-titulo {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--color-text-secondary, #1e293b); margin-bottom: 5px;
}
.exr-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.exr-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 6px 4px 10px;
    background: var(--color-bg-secondary, #fbfcfe);
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 6px; font-size: 12px;
    color: var(--color-text-primary, #0c1f3b);
}
.exr-tag-rem {
    width: 16px; height: 16px; border: none; background: transparent;
    color: var(--color-text-muted, #94a3b8); cursor: pointer;
    border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px;
}
.exr-tag-rem:hover { background: #fee2e2; color: #dc2626; }

/* Seletor de lado (D/E/Bilateral) nos exames de imagem */
.exr-tag-lado { gap: 6px; }
.exr-lado-sel {
    display: inline-flex;
    border: 1px solid var(--color-border-primary, #e2e8f0);
    border-radius: 5px;
    overflow: hidden;
}
.exr-lado-sel button {
    border: none;
    border-left: 1px solid var(--color-border-primary, #e2e8f0);
    background: transparent;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.exr-lado-sel button:first-child { border-left: none; }
.exr-lado-sel button:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 10%, transparent);
    color: var(--accent-primary, #18355C);
}
.exr-lado-sel button.is-lado {
    background: var(--accent-primary, #18355C);
    color: #ffffff;
}
.exr-search-lado-i { font-size: 9px; color: var(--color-text-muted, #94a3b8); margin-left: 4px; }
.exr-search-inc { font-size: 10px; color: var(--color-text-muted, #94a3b8); font-weight: 400; }
html.dark .exr-lado-sel { border-color: var(--color-border-primary, #30363d); }
html.dark .exr-lado-sel button { border-left-color: var(--color-border-primary, #30363d); }

/* Lista de exames na folha A4 */
.exr-doc-intro { margin: 14px 0 8px; }
.exr-doc-secao { margin: 0 0 12px; }
.exr-doc-secao-titulo {
    font-size: 14px; font-weight: 700; margin: 0 0 3px;
    border-bottom: 1px solid #999999; padding-bottom: 2px;
}
.exr-doc-exames { margin: 4px 0 0; padding-left: 0; list-style: none; }
.exr-doc-exames li {
    margin-bottom: 2px;
    padding-left: 14px;
    position: relative;
    break-inside: avoid;
}
.exr-doc-exames li::before { content: "–"; position: absolute; left: 0; }
/* Exames laboratoriais em colunas (definido por exam-request.js) */
.exr-doc-exames--col2 { column-count: 2; column-gap: 22px; }
.exr-doc-exames--col3 { column-count: 3; column-gap: 16px; }
.exr-doc-vazio { font-style: italic; color: #555555; }

html.dark .exr-search-box { background: var(--color-bg-secondary, #161b22); border-color: var(--color-border-primary, #30363d); }
html.dark .exr-search-results { background: var(--color-bg-primary, #21262d); border-color: var(--color-border-primary, #30363d); }
html.dark .exr-search-row { color: var(--color-text-primary, #e6edf3); }
html.dark .exr-tag { background: var(--color-bg-secondary, #161b22); border-color: var(--color-border-primary, #30363d); color: var(--color-text-primary, #e6edf3); }
html.dark .exr-grupo-titulo { color: var(--color-text-secondary, #c9d1d9); }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .docg-body { grid-template-columns: 1fr; }
    .docg-form { grid-template-columns: 1fr; }
    .docg-campo-wide { grid-column: span 1; }
}