/* S39 — "Documentos em abas": a folha do módulo compartilhado pelas duas
   superfícies (box da gravação e aba Scan). Plano: aba-scan/04-PLANO-S39-*.md
   (D6/D7), revisão: aba-scan/05-REVISAO-FABLE-S39.md.

   Receita do cabeçalho de gravacao.css/ditado.css/scan.css: esta folha é linkada
   ANTES do statement `@layer` de utilities.css, logo NÃO pode declarar @layer
   (inverteria a cascata). TODA regra — media queries inclusive — vive ANINHADA
   no único `@media all` abaixo: a trava e2e s23-layers espera exatamente
   [['CSSMediaRule', null, null]] por folha nova.

   Namespace exclusivo .docsabas-* — jamais .tabs/.tab-button/.input-tab-*: o
   `tabsetConfig` da casa decora por classe e capturaria este tablist com
   semântica errada, e o s24-tabs-component conta essas classes no DOM.

   Linguagem visual: o exemplo do dono (`examesconsulta.html`) traduzido para os
   tokens da casa — página #fafafa / card #fff vira var(--color-bg) /
   var(--color-card); a tablist "line" (sublinhado da aba ativa), a barra de
   contexto e o toggle segmentado são os mesmos três níveis de peso visual.

   Alvo de acessibilidade: WCAG AAA na leitura (exigência do dono), com o MESMO
   idioma medido em scan.css:
   - texto corrente em var(--color-text) sobre branco = 19:1;
   - texto de apoio em --docsabas-tinta-2 (cinza da casa escurecido) = 9,3:1;
   - badges/estados em --docsabas-ok/atencao/erro (tokens de status a 70%):
     8,2 a 8,4:1 sobre branco e ≥7,7:1 sobre o fundo neutro do chip;
   - alvo de toque ≥44px em TODO controle (incluindo o pager); anel de foco de
     2px com afastamento;
   - movimento só dentro de prefers-reduced-motion: no-preference;
   - zero !important e zero medida que não venha de token, salvo as três
     escolhas conscientes anotadas no lugar. */
@media all {

.docsabas {
    --docsabas-tinta-2: color-mix(in srgb, var(--color-text-2) 78%, #000);
    --docsabas-ok: color-mix(in srgb, var(--color-success) 70%, #000);
    --docsabas-atencao: color-mix(in srgb, var(--color-warning) 70%, #000);
    --docsabas-erro: color-mix(in srgb, var(--color-danger) 70%, #000);
    /* Polegar da barra de rolagem da janela de texto. Os tokens de borda da casa
       (#ededed/#e7e7e7) são quase brancos — 1,2:1 sobre o card, invisíveis como
       affordance. Este cinza (#8c8c8b) fica em 3,36:1 sobre o card, MEDIDO no
       Chromium desta VPS, acima do mínimo de 3:1 da WCAG 1.4.11 para componente
       de interface — e sem virar régua preta na lateral do laudo. */
    --docsabas-barra: color-mix(in srgb, var(--color-text-2) 70%, #fff);
    /* Contraste FACE EXTERNA × INTERNA (pedido do dono): o card branco sobre o
       fundo de página, com borda, raio e sombra leve. É o que separa "o módulo"
       de "a tela". */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-card);
    background: var(--color-card);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    font-family: var(--font-body);
    color: var(--color-text);
}

/* As regras abaixo dão `display` a elementos que o JS esconde com o atributo
   `hidden`; sem esta guarda a regra de autor venceria o [hidden] do agente do
   usuário e o painel oculto reapareceria empilhado sob o ativo. */
.docsabas [hidden] {
    display: none;
}

/* ── Tablist "line": uma aba por DOCUMENTO ────────────────────────────────── */

.docsabas-tablist {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--color-border-2);
    overflow-x: auto;
}

.docsabas-aba {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    flex: none;
    min-height: 2.75rem;   /* 44px — alvo de toque mínimo */
    padding: var(--space-3) var(--space-1);
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--docsabas-tinta-2);
    cursor: pointer;
}

/* O sublinhado da aba ativa é o sinal de hierarquia principal — e nunca é o
   ÚNICO: a cor do rótulo também muda, e o aria-selected diz o mesmo ao leitor
   de tela. */
.docsabas-aba::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text);
    transform: scaleX(0);
}

.docsabas-aba:hover {
    color: var(--color-text);
}

.docsabas-aba[aria-selected="true"] {
    color: var(--color-text);
}

.docsabas-aba[aria-selected="true"]::after {
    transform: scaleX(1);
}

/* Ponto âmbar de 6px: página ainda não-terminal no documento. Tem aria-label
   próprio ("processando") — cor nunca é o único portador do estado. */
.docsabas-ponto {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--docsabas-atencao);
}

/* ── Barra de contexto do documento ───────────────────────────────────────── */

.docsabas-barra {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-2);
    background: var(--color-card);
}

/* `flex: 1 1 22rem` e não `auto`: com base automática o título pleno (que é uma
   linha inteira de papel) tomava a faixa toda e empurrava badge, toggle e
   botões para uma segunda linha já em 1280px. Com base declarada, as ações
   sentam à DIREITA do título — a anatomia do exemplo do dono — e só quebram
   quando não cabem de verdade. */
.docsabas-contexto {
    display: flex;
    flex: 1 1 22rem;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.docsabas-titulo {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    overflow-wrap: anywhere;   /* título de papel pode vir sem espaço nenhum */
}

.docsabas-meta {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--docsabas-tinta-2);
}

.docsabas-barra-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.docsabas-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-pill);
    background: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--docsabas-tinta-2);
}

.docsabas-badge[data-estado="PRONTO"] {
    color: var(--docsabas-ok);
    border-color: var(--docsabas-ok);
}

.docsabas-badge[data-estado="CONFERIR"],
.docsabas-badge[data-estado="INCOMPLETO"] {
    color: var(--docsabas-atencao);
    border-color: var(--docsabas-atencao);
}

.docsabas-badge[data-estado="FALHOU"] {
    color: var(--docsabas-erro);
    border-color: var(--docsabas-erro);
}

/* Toggle SEGMENTADO (nunca aba-dentro-de-aba, D7): botões colados, ativo
   preenchido. Peso visual deliberadamente menor que o da tablist — troca a
   REPRESENTAÇÃO, não o documento. */
.docsabas-seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-btn);
    background: var(--color-card);
}

.docsabas-seg-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--docsabas-tinta-2);
    cursor: pointer;
}

.docsabas-seg-botao + .docsabas-seg-botao {
    border-left: 1px solid var(--color-border-2);
}

.docsabas-seg-botao[aria-pressed="true"] {
    background: var(--color-bg);
    color: var(--color-text);
}

.docsabas-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-btn);
    background: var(--color-card);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    cursor: pointer;
}

.docsabas-botao:hover {
    border-color: var(--color-blue-focus);
    color: var(--color-blue-focus);
}

/* Anel de foco em TODO interativo do módulo. */
.docsabas-aba:focus-visible,
.docsabas-seg-botao:focus-visible,
.docsabas-botao:focus-visible,
.docsabas-pager-botao:focus-visible,
.docsabas-lupa:focus-visible,
.docsabas-lightbox-fechar:focus-visible {
    outline: 2px solid var(--color-blue-focus);
    outline-offset: 2px;
}

/* ── Vistas (Texto | Original) ────────────────────────────────────────────── */

.docsabas-vista {
    display: none;
}

.docsabas-vista.is-ativa {
    display: block;
}

/* ── Janela de rolagem da visão TEXTO ─────────────────────────────────────── */

/* Pedido do dono (2026-08-18): "o texto extraído é apresentado por páginas que o
   usuário tem que correr a página-mãe do site — quero que isso corra com scroll,
   dentro de uma janela com barra de scroll, sem descer o site inteiro".
   O teto SÓ LIMITA: documento curto continua sem barra nenhuma, porque quem
   decide é o overflow, não uma altura fixa. Por isso `max-height`, nunca
   `height`.
   `min(58vh, 36rem)`: o vh mantém a janela proporcional à tela (e faz o rodapé
   do módulo caber junto com a tablist e a barra de contexto em telas baixas de
   notebook), e o teto em rem impede que num monitor 4K a janela vire de novo uma
   página inteira de rolagem.
   `overscroll-behavior: contain` é a peça que cumpre o "sem descer o site
   inteiro": ao bater no fim da janela, a roda PARA ali em vez de continuar
   rolando a página atrás (o scroll chaining do Chromium). */
.docsabas-janela {
    max-height: min(58vh, 36rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-2);   /* a barra não come a última letra da linha */
    scrollbar-width: thin;
    scrollbar-color: var(--docsabas-barra) transparent;
}

/* As duas gramáticas de barra convivem de propósito: `scrollbar-width`/
   `scrollbar-color` (acima) valem em Firefox e no Chromium moderno, que IGNORA
   os pseudo-elementos quando as propriedades padrão estão declaradas; este bloco
   é quem atende Safari e Chromium antigo. Nada colide.
   Medido nesta VPS: o Chromium daqui usa barra OVERLAY (some parada e ocupa 0px
   de layout — um `div` com `overflow:auto` cru mede o mesmo, então não é efeito
   destas regras). Onde a barra é clássica — Chrome no Windows, o consultório —
   ela ocupa faixa, e é por isso que o `padding-right` existe. */
.docsabas-janela::-webkit-scrollbar {
    width: 10px;
}

.docsabas-janela::-webkit-scrollbar-track {
    background: transparent;
}

.docsabas-janela::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background: var(--docsabas-barra);
    background-clip: content-box;
}

/* Anel de foco INSET: a janela ocupa a largura toda do card, e um anel com
   afastamento POSITIVO seria comido pelo `overflow: hidden` da raiz do módulo. */
.docsabas-janela:focus-visible {
    outline: 2px solid var(--color-blue-focus);
    outline-offset: -2px;
}

/* Largura de LEITURA: ~68ch centrados. Linha longa demais faz o olho perder a
   volta — e este texto é laudo, lido de ponta a ponta. */
.docsabas-texto {
    max-width: 68ch;
    margin: 0 auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.docsabas-pagina {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Separador ENTRE páginas: marca a costura sem competir com o conteúdo. */
.docsabas-separador {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--docsabas-tinta-2);
}

.docsabas-subtitulo {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.docsabas-secao {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Micro-cabeçalho da seção: uppercase por CSS — o texto do papel entra no DOM
   exatamente como veio (textContent), e a caixa é decisão de apresentação. */
.docsabas-secao-tipo {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--docsabas-tinta-2);
}

.docsabas-secao-texto {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text);
}

/* Página que falhou / ainda está sendo lida: placeholder NA POSIÇÃO, nunca
   omitida — omitir deslocaria a leitura das demais. */
.docsabas-falha {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border-3);
    border-radius: var(--r-btn);
    background: var(--color-bg);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--docsabas-tinta-2);
}

.docsabas-rodape {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-2);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--docsabas-tinta-2);
}

/* ── Visão ORIGINAL: fundo muted, documento centrado com sombra ───────────── */

/* O palco é MAIS ESCURO que o card (o --color-bg cru quase empata com o branco
   e o documento não se descolava do fundo): é o que faz o papel "flutuar", como
   o #f1f1f3 do exemplo do dono contra o card branco. */
.docsabas-original {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: color-mix(in srgb, var(--color-bg) 93%, #000);
}

.docsabas-palco {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* Proporção A4 (1 : 1.414) por CLASSE — o inventário [style] é congelado
   DURANTE o fluxo, então nada de dimensão por style inline. */
.docsabas-skeleton {
    width: 100%;
    max-width: 42rem;
    aspect-ratio: 1 / 1.414;
    /* O MESMO teto da imagem: sem ele o esqueleto reservaria 950px, a imagem
       chegaria com 666 e a tela pularia 284px para cima com o pager junto. O
       lugar guardado tem de ter o tamanho do que vai chegar. */
    max-height: 74vh;
    border-radius: var(--r-btn);
    background: var(--color-border-2);
}

.docsabas-lupa {
    display: block;
    /* O teto de 42rem migrou da imagem para a MOLDURA: com a imagem em largura
       intrínseca (abaixo), um `max-width: 42rem` nela ignoraria a largura real do
       palco e estouraria a lateral em 390px. Aqui os dois tetos convivem. */
    max-width: min(42rem, 100%);
    /* Alvo de toque nunca degenera: mesmo com imagem minúscula ou ainda sem
       carregar, o botão-moldura garante os 44px de área clicável (AAA). */
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

/* Teto de ALTURA (pedido do dono, mesma leva da janela de rolagem): sem ele um
   retrato de A4 fotografado no celular saía com 896px de altura numa viewport de
   900 (medido: 1200×1600 → 672×896) e o médico rolava a página inteira para ver
   o pé do documento. Com `max-height: 74vh` o documento cabe na tela junto com o
   pager, e sobra margem para o palco e a barra.
   `object-fit: contain` é o par obrigatório do teto: o padrão é `fill`, que
   ACHATARIA a imagem assim que a altura passasse a mandar — distorção silenciosa
   num documento clínico.
   E as dimensões voltam a ser INTRÍNSECAS (`width/height: auto` + os dois
   máximos): é o que faz o navegador reduzir preservando a proporção, sem tarja
   branca ao lado da foto — a sombra continua abraçando o papel, não uma caixa
   maior que ele. `margin: 0 auto` centra a imagem quando a moldura sobra. */
.docsabas-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 74vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--r-btn);
    background: var(--color-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

/* PDF: visualizador NATIVO do navegador (o blob autenticado já é o idioma do
   S38). Sem pager próprio — PDF nunca agrupa. */
.docsabas-pdf {
    width: 100%;
    max-width: 48rem;
    height: 70vh;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--color-card);
}

.docsabas-erro-original {
    margin: 0;
    padding: var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--docsabas-erro);
}

/* Pager discreto — mas com alvo de toque cheio: é usado com o dedo, no
   consultório, com o paciente esperando. */
.docsabas-pager {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.docsabas-pager-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-btn);
    background: var(--color-card);
    font-family: inherit;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
}

.docsabas-pager-botao:hover:not(:disabled) {
    border-color: var(--color-blue-focus);
    color: var(--color-blue-focus);
}

/* Fim da faixa: o botão morto continua legível (não some, não vira fantasma
   ilegível) — mas o cursor e o disabled dizem que não há para onde ir. */
.docsabas-pager-botao:disabled {
    color: var(--docsabas-tinta-2);
    background: var(--color-bg);
    cursor: default;
}

.docsabas-pager-conta {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--docsabas-tinta-2);
}

/* ── Lightbox (documento ampliado, diálogo modal) ─────────────────────────── */

/* Véu: não há token de véu; o rgba escuro é a escolha consciente (mesma família
   do véu do S35/S38). Fecha por clique fora, pelo botão e por Esc. */
.docsabas-lightbox {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: rgba(20, 20, 19, 0.72);
    cursor: zoom-out;
}

.docsabas-lightbox-caixa {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    max-width: 100%;
    max-height: 100%;
    cursor: default;
}

.docsabas-lightbox-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-btn);
    background: var(--color-card);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.docsabas-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--r-btn);
    background: var(--color-card);
}

.docsabas-lightbox-pdf {
    width: min(60rem, 85vw);
    height: 80vh;
    max-width: 100%;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--color-card);
}

/* O textarea do fallback de cópia não pode ser visto nem rolar a página; sai do
   fluxo sem display:none (que impediria a seleção). */
.docsabas-copia-fallback {
    position: fixed;
    top: -1000px;
    left: -1000px;
    opacity: 0;
}

/* ── Telas estreitas ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .docsabas-tablist {
        gap: var(--space-4);
        padding: 0 var(--space-4);
    }

    /* A barra empilha: título em cima, ações embaixo — em 360px de largura o
       título e quatro controles na mesma linha viravam picadinho. */
    .docsabas-barra {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
    }

    /* Empilhado, o eixo principal vira o VERTICAL: mantido o `flex-grow: 1` do
       desktop, o bloco do título esticava e abria um vão morto de ~250px entre
       o título e a linha de ações (medido em 390px). */
    .docsabas-contexto {
        flex: 0 0 auto;
    }

    /* Tela estreita: a janela pode ser proporcionalmente MAIOR (não há coluna
       ao lado disputando a tela), mas o teto absoluto cai — num celular de 844px
       de altura, 36rem seriam quase a tela toda e a barra de contexto do
       documento sairia de vista ao rolar. */
    .docsabas-janela {
        max-height: min(62vh, 30rem);
        padding-right: var(--space-1);
    }

    .docsabas-texto {
        padding: var(--space-4);
    }

    .docsabas-original {
        padding: var(--space-4);
    }

    .docsabas-pager {
        justify-content: center;
        align-self: stretch;
    }

    .docsabas-pdf {
        height: 60vh;
    }

    .docsabas-lightbox-pdf {
        width: 100%;
        height: 70vh;
    }
}

/* Movimento é opt-in: quem pediu menos movimento no sistema não recebe
   transição nenhuma deste módulo. */
@media (prefers-reduced-motion: no-preference) {
    .docsabas-aba,
    .docsabas-botao,
    .docsabas-seg-botao,
    .docsabas-pager-botao,
    .docsabas-lightbox-fechar {
        transition: border-color var(--dur-fast) var(--ease),
                    background var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease);
    }

    .docsabas-aba::after {
        transition: transform var(--dur-fast) var(--ease);
    }
}

}