/* ============================================================================
   Escores Clínicos / CDSS — botão + painel de busca + modal das calculadoras.
   Escopo: classes .esc-* (usadas por Components/EscoresClinicos/*).

   POR QUE ESTE ARQUIVO É GLOBAL (e não um .razor.css isolado):
   o bundle de CSS isolado do Blazor está DESLIGADO neste projeto — o
   <link href="...styles.css"> está comentado em Pages/_Layout.cshtml. Ou seja,
   TODO arquivo .razor.css é silenciosamente inerte aqui. Os poucos que existem
   (AIH.razor.css, Ambulatorio2/Index.razor.css) só carregam ajustes cosméticos
   de fonte, por isso ninguém notou. A convenção real do projeto para estilo que
   sustenta layout é CSS global em wwwroot/css/ (mc-page.css, clinical-panels.css,
   internacao-detalhe.css, evolucao-modal.css...) ou style inline — ver
   EstiloOverlayLista em Pages/Faturamento/Sus/AIH.razor.
   Ao alterar este arquivo, dar bump no ?v= do link em _Layout.cshtml.

   Tema escuro: NÃO precisa de bloco próprio. As superfícies vêm de --mc-surface,
   que medcare-tokens.css já redefine sob [data-theme-mode="dark"] (o atributo do
   YNEX/StateService.ColorTheme). Nada de prefers-color-scheme nem :root[data-theme]
   — nenhum dos dois é o mecanismo de tema deste sistema.
   ============================================================================ */

.esc-trigger-wrap {
    position: relative;
    display: inline-block;
}

/* Toque sutil de cor no ícone, sem alterar o "chrome" do botão (mantém o padrão da página) */
.esc-trigger-ico {
    color: var(--mc-brand, #0891b2);
}

.esc-trigger-itn.active,
.esc-trigger-itn:hover {
    color: var(--mc-brand, #0891b2);
}

/* ---------- Painel de busca (dropdown do botão) ----------
   Mesmo visual das listas de sugestão do sistema (ex.: busca de procedimento SIGTAP em
   Pages/Faturamento/Sus/AIH.razor — EstiloOverlayLista): fundo padrão, borda cinza clara,
   sombra suave, sem cor customizada.

   Nasce position:fixed FORA da tela (não position:absolute perto do botão) por dois motivos:
   1) o painel é renderizado via SectionOutlet, longe de .esc-trigger-wrap no DOM — "perto do
      botão" não existe mais como posição de CSS estático;
   2) sendo fixed desde o primeiro frame, ele nunca entra no fluxo nem soma à área de scroll de
      nenhum ancestral (.mc-scaled na Consulta, .itn-tabs com overflow-x:auto na Internação)
      enquanto o dropdown-overlay.js calcula e aplica a posição real.
   Era exatamente isso que deslocava a interface ao abrir o menu. */
.esc-dropdown-anchor {
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 1060;
    min-width: 300px;
    max-width: min(90vw, 340px);
    background: var(--mc-surface, #fff);
    border: 1px solid var(--mc-border, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: 8px;
}

.esc-lista {
    margin-top: 6px;
    max-height: 300px;
    overflow-y: auto;
}

/* ---------- Modal das calculadoras ----------
   Renderizado como IRMÃO do container com zoom (.mc-scaled) na página hospedeira — zoom em
   ancestral desloca position:fixed (mesma regra dos demais modais do sistema, ver CLAUDE.md). */
.esc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.esc-modal {
    width: 720px;
    max-width: 100%;
    max-height: 88vh;
    background: var(--mc-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.esc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: #fff;
}

/* Cabeçalho: nome do escore. !important pelo mesmo motivo do bloco de tipografia abaixo
   (custom-font-size.css reduz tudo globalmente com !important). */
.esc-modal-titulo {
    font-size: 1.3rem !important;
    font-weight: 700;
    line-height: 1.25;
}

.esc-modal-subtitulo {
    font-size: 0.88rem !important;
    opacity: .92;
}

.esc-modal-fechar {
    border: none;
    background: transparent;
    color: inherit;
    opacity: .85;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.esc-modal-fechar:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

.esc-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    font-size: 0.95rem !important;
}

/* ---------- Tipografia das calculadoras ----------
   O modal é ferramenta de decisão à beira do leito: o médico VARRE os blocos, não lê corrido.

   POR QUE TODO font-size AQUI LEVA !important:
   wwwroot/css/custom-font-size.css (linkado ANTES deste, no _Layout) aplica uma redução global de
   ~10% usando !important em 116 declarações — inclusive html{15px}, body{0.732rem}, .form-label,
   .list-group-item e, o pior caso, `small, .small { calc(0.875em * 0.75) }`. Composto sobre um
   body de 0.732rem, um .small aninhado cai para ~7-9px REAIS. Era isso que tornava os títulos das
   variáveis ilegíveis; sem !important, qualquer valor definido aqui é simplesmente descartado.
   Mesmo recurso que o projeto já usa de propósito em custom-tables.css (ver CLAUDE.md).
   O escopo .esc-modal-body garante que nada disso vaza para o resto do sistema.

   Hierarquia (o que guia o olho, do mais forte ao mais fraco):
     esc-var-titulo  → nome da variável/sistema ("Neurológico - Glasgow", "Respiratório").
                       É o elemento DOMINANTE de cada bloco.
     esc-var-sub     → rótulo do controle dentro do bloco ("Relação PaO2/FiO2"), um degrau abaixo.
     esc-var-pontos  → pontuação parcial daquele bloco.
     esc-total       → pontuação final do escore.
   Os componentes aplicam as classes .esc-* diretamente, sem .small. */

.esc-modal-body .esc-var-titulo {
    font-size: 1.06rem !important;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mc-text, #16232a);
    margin-bottom: 9px;
}

/* Ícone do sistema orgânico: um pouco maior que o texto e na cor da marca — vira âncora visual
   para localizar o bloco sem precisar ler o título. */
.esc-modal-body .esc-var-titulo i {
    font-size: 1.24rem !important;
    color: var(--mc-brand, #0891b2);
    vertical-align: -2px;
}

.esc-modal-body .esc-var-sub {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--mc-text-2, #4a5c66);
    margin-bottom: 5px;
}

.esc-modal-body .esc-var-pontos {
    font-size: 0.92rem !important;
    color: var(--mc-text-2, #4a5c66);
}

.esc-modal-body .esc-var-pontos strong {
    font-size: 1.04rem !important;
    color: var(--mc-text, #16232a);
}

/* Cartão de cada sistema orgânico (SOFA-2): respiro maior agora que o título cresceu. */
.esc-modal-body .card-body {
    padding: 12px 14px;
}

/* Itens de checklist (CURB-65, Alvarado): são a própria variável do escore — mesmo destaque
   dos títulos das demais calculadoras, com alvo de clique maior. */
.esc-modal-body .list-group-item {
    font-size: 0.98rem !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.esc-modal-body .list-group-item .form-check-input {
    width: 1.15em;
    height: 1.15em;
}

/* Rótulos de switch/checkbox auxiliares ("Em tratamento para delirium", "Suporte ventilatório"). */
.esc-modal-body .form-check-label {
    font-size: 0.9rem !important;
}

/* Controles: acompanham o texto, senão o valor digitado/selecionado fica menor que o rótulo. */
.esc-modal-body .form-select,
.esc-modal-body .form-select-sm,
.esc-modal-body .form-control,
.esc-modal-body .form-control-sm {
    font-size: 0.92rem !important;
}

/* Texto auxiliar (hints "(1 ponto)", recomendação clínica, histórico). Continua sendo o degrau
   mais baixo da hierarquia, mas legível: o .small global o deixava em ~7-9px. */
.esc-modal-body small,
.esc-modal-body .small {
    font-size: 0.85rem !important;
}

/* Faixa de resultado final do escore. */
.esc-modal-body .esc-total {
    font-size: 1.18rem !important;
    font-weight: 700;
}

.esc-modal-body .badge {
    font-size: 0.85rem !important;
}

/* Histórico do paciente no rodapé — informação de apoio, fica propositalmente menor. */
.esc-modal-body .esc-historico-titulo {
    font-size: 0.95rem !important;
    font-weight: 700;
    color: var(--mc-text, #16232a);
    margin-bottom: 6px;
}

/* ---------- Slider + campo numérico (CampoSlider.razor) ----------
   O valor deixou de ser texto e virou campo digitável: o médico arrasta OU digita. O input fica
   compacto e alinhado à direita, no mesmo lugar onde antes só aparecia o número, para a
   composição da tela não mudar. */
.esc-modal-body .esc-slider {
    margin-bottom: 4px;
}

.esc-modal-body .esc-slider-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.esc-modal-body .esc-slider-rotulo {
    min-width: 0;
}

.esc-modal-body .esc-slider-valor {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Largura fixa e texto à direita: o número não "pula" de posição ao mudar de 1 para 2 dígitos. */
.esc-modal-body .esc-slider-num {
    width: 5.6rem;
    text-align: right;
    padding: 3px 7px;
    font-size: 0.92rem !important;
    font-weight: 600;
}

/* As setinhas nativas roubam espaço num campo estreito e não ajudam (o slider já faz esse papel). */
.esc-modal-body .esc-slider-num::-webkit-outer-spin-button,
.esc-modal-body .esc-slider-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.esc-modal-body .esc-slider-num { -moz-appearance: textfield; appearance: textfield; }

.esc-modal-body .esc-slider-unidade {
    font-size: 0.88rem;
    color: var(--mc-text-2, #4a5c66);
}

/* ---------- Ícone de ajuda "?" (Ajuda.razor + wwwroot/js/esc-ajuda.js) ----------
   O balão é position:FIXED (não absolute): dentro do .esc-modal-body, que rola, um absolute era
   RECORTADO pela borda do modal. Quem calcula left/top é o esc-ajuda.js no hover/foco, que também
   vira o balão para cima quando não cabe embaixo e o prende na janela quando não cabe na lateral.
   A visibilidade também é do JS (classe .esc-ajuda-visivel), não de :hover — o CSS não teria como
   posicionar sem medir o ícone. */
.esc-modal-body .esc-ajuda {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: var(--mc-brand, #0891b2);
    cursor: help;
    vertical-align: middle;
}

.esc-modal-body .esc-ajuda > i {
    font-size: 1.02rem !important;
    line-height: 1;
}

/* Fora do escopo .esc-modal-body de propósito: sendo fixed, o balão é filho do ícone no DOM, mas
   quem o desenha é a viewport — manter a regra específica evita depender da cadeia de ancestrais. */
.esc-ajuda-balao {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 1200;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 9px 11px;
    border-radius: 8px;
    background: #16232a;
    color: #fff;
    font-size: 0.84rem !important;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    transition: opacity .12s ease-in-out;
    pointer-events: none;
}

.esc-ajuda-balao.esc-ajuda-visivel {
    visibility: visible;
    opacity: 1;
}