/* ══════════════════════════════════════════════════════════════════
   WTT-ALI — a especialidade na tela (cor, chip e desenho)
   ══════════════════════════════════════════════════════════════════
   Companheiro do specialty-theme.js. O JS carimba `data-specialty` no
   <html> e escreve as variáveis --spec-*; daqui para baixo é só CSS.

   TUDO É ADITIVO. Toda regra que muda a aparência da aplicação está
   dentro de `html[data-specialty]`. Usuário sem especialidade — sem
   vínculo, ou com "todas" ativo — não tem o atributo, nenhuma regra
   pega, e a tela fica exatamente como sempre foi. Foi o pedido: "caso
   não tenha especialidade deixar branco normal".

   As variáveis (escritas pelo JS a partir de UMA cor, a do registry):
     --spec-cor          a cor
     --spec-cor-hover    clareada    (hover)
     --spec-cor-active   escurecida  (pressionado)
     --spec-cor-fraca    14% alpha   (fundo de realce, tags)
     --spec-cor-linha    34% alpha   (bordas)
     --spec-cor-brilho   13% alpha   (o halo atrás do desenho)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1) O accent da aplicação passa a ser o da especialidade ────────
   Este é o bloco que "pinta o sistema todo": botão primário, contador
   da worklist, tag de modalidade, foco de campo. Todas as telas já leem
   --accent; nenhuma precisou ser tocada para isto funcionar.

   `html[data-specialty]` (tipo + atributo) tem especificidade maior que
   o `:root` e que o `[data-theme="dark"]` de cada tela, então vence os
   dois sem !important — e sem !important continua sendo possível a uma
   tela específica discordar, se um dia precisar.

   Para desligar a ideia inteira, comente ESTE bloco: o chip e o desenho
   continuam funcionando, e a aplicação volta ao azul de sempre. */
/* O carimbo vai no <html> E no <body> (specialty-theme.js). Os dois
   seletores existem porque as telas discordam de onde redefinem o tema:
   o /laudar troca --accent em `body.light-mode`, e valor posto no PRÓPRIO
   elemento vence qualquer coisa herdada do <html>, por mais específica
   que seja — sem a regra de body, o tema claro ficava pela metade. */
html[data-specialty],
body[data-specialty] {
    --accent:        var(--spec-cor);
    --accent-hover:  var(--spec-cor-hover);
    --accent-active: var(--spec-cor-active);
    --accent-muted:  var(--spec-cor-fraca);
    --accent-dim:    var(--spec-cor-fraca);
    --accent-glow:   var(--spec-cor-brilho);
    --border-focus:  var(--spec-cor);
}

/* ── 2) O chip: cor + nome ──────────────────────────────────────────
   A leitura que funciona em qualquer largura e nunca fica ambígua. Vai
   ao lado do logo, e é o que sobra quando não há espaço para o desenho. */
.spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: var(--spec-cor-fraca);
    border: 1px solid var(--spec-cor-linha);
    line-height: 1;
    white-space: nowrap;
    /* Não empurra o resto do cabeçalho quando o nome é longo. */
    flex: none;
    max-width: 220px;
    overflow: hidden;
}

.spec-chip-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--spec-cor);
    flex: none;
}

.spec-chip-nome {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--spec-cor);
    overflow: hidden;
    text-overflow: ellipsis;
    /* Item flex nasce com `min-width: auto`, que o impede de encolher abaixo
       do proprio conteudo. Sem esta linha o texto nunca e espremido, o
       `text-overflow` acima nunca dispara e o CHIP INTEIRO estoura o
       max-width de 220px (medido: 238px com um rotulo de 35 caracteres).
       Ou seja: as duas linhas acima eram decorativas ate aqui. */
    min-width: 0;
}

/* Telas estreitas: o ponto colorido sozinho já diferencia, e o nome sai
   de cena antes de espremer o logo. (Regra do CLAUDE.md §5: o modo
   paisagem do tablet não pode virar refugo.) */
@media (max-width: 820px) {
    .spec-chip { padding: 5px; }
    .spec-chip-nome { display: none; }
}

/* ── 3) O desenho ───────────────────────────────────────────────────
   Herda a cor por `currentColor`; quem define é o `color` daqui. O
   .spec-halo é o traço da cor do FUNDO que abre caminho no contorno do
   coração para o ECG passar limpo — por isso ele segue a variável de
   fundo da tela, e não uma cor fixa. */
.spec-desenho {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--spec-cor);
    overflow: visible;
}

.spec-desenho .spec-halo {
    stroke: var(--spec-fundo, var(--bg-primary, var(--bg, #0a0e17)));
}

/* ── 4) A tela vazia do /laudar ─────────────────────────────────────
   O único lugar com área sobrando para o desenho, e o único momento em
   que ele faz sentido: antes de haver um exame aberto. Depois disso a
   tela é do paciente e o bloco some.

   É uma CAMADA POR CIMA do editor (o wrapper já é position:relative,
   laudar.css:4342), não um irmão no fluxo: assim o editor não muda de
   tamanho, não é medido diferente e nenhuma outra parte do /laudar
   precisa saber que isto existe. Aparecer e sumir é um atributo. */
.spec-vazio {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--bg-editor, var(--bg-primary, var(--bg, #141c2b)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

/* `display: flex` acima passa por cima do [hidden] do navegador, que só
   vale enquanto ninguém declara display. Sem esta linha o bloco fica
   visível POR CIMA do editor o tempo todo — e o médico não consegue
   escrever. */
.spec-vazio[hidden] { display: none; }

.spec-vazio-arte {
    position: relative;
    width: 340px;
    height: 340px;
    max-width: 60vh;
    max-height: 60vh;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* O brilho atrás do desenho. Some junto com ele quando não há
   especialidade, porque a variável deixa de existir. */
.spec-vazio-arte::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
                var(--spec-cor-brilho) 0%, transparent 68%);
}

.spec-vazio-arte .spec-desenho {
    position: relative;
    width: 61%;
    height: 61%;
}

.spec-vazio-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: -20px;
    max-width: 470px;
}

.spec-vazio-nome {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary, var(--text, #f1f5f9));
}

.spec-vazio-dica {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-tertiary, #64748b);
    margin-top: 10px;
    text-wrap: pretty;
}

/* Sem especialidade a área vazia continua existindo — só perde a cor e o
   desenho, e fica com a frase. Uma tela em branco absoluta pareceria
   carregamento travado. */
html:not([data-specialty]) .spec-vazio-arte { display: none; }
html:not([data-specialty]) .spec-vazio-texto { margin-top: 0; }

/* ── 5) Chip no seletor de acesso (tela pós-login) ──────────────────
   Ali o chip aparece sozinho, centrado sob a marca, e não ao lado de um
   logo — precisa de respiro próprio. */
.spec-chip-solto {
    display: flex;
    justify-content: center;
    margin: 10px 0 2px;
    /* O chip TRANSBORDAVA quando o espaço era menor que os 220px dele
       (25/08, /admin): `.spec-chip` tem flex:none e, num container flex
       apertado, saía por cima do conteúdo vizinho — o rótulo "Exames
       endoscópicos" atravessava a borda da sidebar e colidia com o seletor
       de especialidade. min-width:0 deixa este wrapper encolher, e o
       max-width abaixo faz o chip caber com reticências no que houver. */
    min-width: 0;
    max-width: 100%;
}

.spec-chip-solto .spec-chip {
    flex: 0 1 auto;
    max-width: 100%;
}

.spec-chip-solto:empty { display: none; }


/* ══════════════════════════════════════════════════════════════════
   4) CARDIOLOGIA — a matéria do vermelho
   ══════════════════════════════════════════════════════════════════
   Pedido (08/09): "seria possível nos itens vermelhos trazer um leve
   conceito de textura? no site da Pantone as cores do ano vêm com
   texturas, que as tornam vívidas". E, sobre o alvo: "grãos fortes e leve
   brilho metálico, quero que lembre sangue, o sangue que passa pelas
   pessoas, as hemoglobinas".

   POR QUE TEXTURA AQUI NÃO É ENFEITE. Sangue não é uma superfície
   chapada: é líquido com corpo, com células em suspensão, e um hex
   sozinho não diz nada disso. E o heme é uma molécula de FERRO — o
   brilho não é licença poética, é o material.

   (A primeira versão desta seção nasceu com o PANTONE 20-0076 TPM
   "Sceptre Red", da coleção Metallic Shimmers, e o argumento da textura
   era o padrão ser metálico. A cor mudou para o vermelho de sangue
   arterial — o Pantone lia como vinho, ver registry.py — e o argumento
   passou a ser este. A receita abaixo não mudou uma linha: ela vale para
   a matéria, não para aquele hex.)

   AS QUATRO CAMADAS, de baixo para cima:
     · mancha larga  — ruído de frequência muito baixa: o líquido não é
                       homogêneo, tem corpo e suspensão
     · grão fino     — a granulação; é o "grão forte" do pedido
     · profundidade  — um radial que escurece as bordas e abre uma
                       clareira no alto: volume, não plano
     · varredura     — a luz metálica, FIXA. Nada aqui anima: isto é uma
                       tela de laudo, não uma vitrine.

   COMO, E POR QUE ASSIM. Tudo em camadas de `background-image` +
   `background-blend-mode`, sem NENHUM pseudo-elemento — os componentes
   do WTT-ALI já usam ::before/::after (o .cap-rail-btn.active::before, o
   .tab.active::after, o .sr-section-title::before) e disputar com eles
   quebraria layout em silêncio.

   O blend é `soft-light`, não `overlay`. Com overlay o ruído CLAREIA a
   cor: o vinho #840016 subia para um carmim (medido: a média ia a
   #B0002B) e virava chuvisco de televisão. Com soft-light a média fica
   em #8E0021 — deriva pequena — e o branco em cima se mantém em 9,7:1.

   INTENSIDADE. As três variáveis abaixo são o botão de volume. Zerar as
   três devolve a cor chapada, sem tirar nada do lugar. */

html[data-specialty="cardiology"] {
    /* o volume */
    --sangue-grao:   0.55;   /* granulação      0 = liso                 */
    --sangue-mancha: 0.90;   /* mancha larga    0 = homogêneo            */
    --sangue-luz:    1;      /* varredura       0 = fosco                */

    --sangue-camada-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
    --sangue-camada-mancha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23m)' opacity='0.9'/%3E%3C/svg%3E");
    --sangue-camada-luz: linear-gradient(118deg,
        rgba(255, 255, 255, calc(0.17 * var(--sangue-luz))) 0%,
        rgba(255, 255, 255, calc(0.02 * var(--sangue-luz))) 30%,
        rgba(0, 0, 0, calc(0.10 * var(--sangue-luz))) 58%,
        rgba(255, 255, 255, calc(0.08 * var(--sangue-luz))) 84%,
        rgba(0, 0, 0, calc(0.12 * var(--sangue-luz))) 100%);
    --sangue-camada-prof: radial-gradient(130% 100% at 26% 8%,
        rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.16) 70%);
}

/* A receita, num lugar só. `.textura-sangue` existe para quem quiser
   aplicar em algo que a lista abaixo não alcança. */
/* SÓ ENTRA AQUI O QUE JÁ ERA PREENCHIDO COM O ACCENT.
   A primeira lista trouxe junto `.wl-mod`, `.step-badge` e `.tag`, e isso
   deu tela ilegível (08/09): esses três não são preenchidos, são TINGIDOS
   — fundo em `--accent-muted`/`--accent-dim` e TEXTO em `--accent`. Ao
   trocar só o fundo por vermelho cheio, o texto continuava vermelho: cor
   sobre ela mesma. Era o "alguns textos ótimos de ler, alguns outros
   não", e a modalidade da worklist do /laudar (`.wl-mod`) era o caso mais
   visível. Componente tingido não precisa de nada aqui: ele já segue a
   especialidade sozinho, porque `--accent-muted` e `--accent` saem de
   `--spec-cor`.
   `.tag` ainda por cima é genérica — em anteriores.css e dashboard.css ela
   é status (cinza, verde, âmbar) e nunca teve nada com a cardiologia.
   `.badge` está com o caminho inteiro porque só ESSA é preenchida com o
   accent; `.badge` solta pega pílula de status em outras telas. */
html[data-specialty="cardiology"] .textura-sangue,
html[data-specialty="cardiology"] :is(
    .btn-primary, .btn.pri, .btn-sign, .topbar-btn.primary,
    .jornada-search-btn,
    #sec-forms-builder .tab .badge, .worklist-count,
    .spec-chip-ponto
) {
    /* A cor de PREENCHIMENTO, não a de texto — ver `_cheia` no
       specialty-theme.js. Nas telas claras as duas são o mesmo #840016. */
    /* `!important` aqui não é preguiça: o `.btn-primary` do laudar.css é
       `background: var(--accent) !important`, e o atalho `background`
       carrega junto um `background-image: none !important`. Sem igualar a
       força, o botão primário do /laudar ficava com a cor de TEXTO como
       preenchimento (branco em cima dela dava 4,11:1, abaixo do mínimo) e
       sem textura nenhuma. Com o !important ele passa a usar a cor de
       preenchimento e sobe para 6,2:1. */
    background-color: var(--spec-cor-cheia, var(--spec-cor)) !important;
    background-image:
        var(--sangue-camada-luz),
        var(--sangue-camada-prof),
        var(--sangue-camada-grao),
        var(--sangue-camada-mancha) !important;
    background-size: auto, auto, 160px 160px, 420px 420px;
    background-blend-mode: soft-light, soft-light, soft-light, soft-light;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    /* Rede de segurança: alguns destes herdam a cor do texto do pai, e em
       cima do vermelho cheio branco é o único valor seguro. Quatro dos
       cinco já declaravam isso por conta própria; o `.btn.pri` não. */
    color: #fff;
}

/* Quem pediu para não ver movimento também não quer relevo falso: fica a
   cor, sem a varredura de luz. O grão continua — ele não se move. */
@media (prefers-reduced-motion: reduce) {
    html[data-specialty="cardiology"] { --sangue-luz: 0; }
}

/* Impressão: papel não tem brilho de tela, e um fundo texturizado só
   gasta toner e piora a leitura. O laudo sai chapado. */
@media print {
    html[data-specialty="cardiology"] .textura-sangue,
    html[data-specialty="cardiology"] :is(
        .btn-primary, .btn.pri, .btn-sign, .topbar-btn.primary,
        .jornada-search-btn,
        #sec-forms-builder .tab .badge, .worklist-count,
        .spec-chip-ponto
    ) {
        background-image: none !important;
    }
}