/* Botao [x] de remover/desselecionar — aparencia unica no site inteiro (2026-09-13):
       glifo vermelho sem caixa, e no hover uma caixinha vermelha clara com borda. Fica
       aqui, DEPOIS do extra_css, porque cada tela tinha a sua versao (.kit-del, .del,
       .protocolo-lacs-remover, .acao-remover, .pc-x) no proprio <style>, que por ordem
       vencia a folha global. Ao criar um [x] novo, basta a classe `btn-x`. */
    .btn-x {
      background: var(--red-bg); border: 1px solid var(--red-line); border-radius: 3px;
      cursor: pointer; color: var(--red-ink); font-family: var(--sans);
      font-size: 1.15rem; line-height: 1; flex-shrink: 0;
      /* 30px = altura de um input desta folha (font .85rem + padding .4rem + borda):
         o [x] fica do tamanho do campo ao lado, em vez de um botaozinho solto. */
      display: inline-flex; align-items: center; justify-content: center;
      height: 30px; padding: 0 .5rem;
    }
    /* A caixa fica sempre visivel (2026-09-13, pedido do usuario): sem ela o [x] some
       no branco e nao parece clicavel. O hover so escurece. */
    .btn-x:hover {
      /* `color-mix` em vez de um par de literais: o hover tem que escurecer o
         chip em tema claro e CLAREAR em tema escuro, e uma cor fixa só sabe
         fazer um dos dois. Antes eram #f6d7d3/#8e2a1f, que no escuro davam um
         [x] vermelho-escuro sobre vinho — 2,1:1. */
      background: color-mix(in srgb, var(--red-bg) 80%, var(--red));
      border-color: var(--red); color: var(--red-ink);
    }
    /* Nos chips (kits, modelos, atalhos) o [x] e absoluto no canto: mesma cor e mesmo
       hover, caixa mais justa para nao cobrir o texto do chip. */
    .kit-del.btn-x, .kit-remover.btn-x { font-size: 1rem; height: auto; padding: 0 .2rem; }

    /* ── Tinta do botão ────────────────────────────────────────────────────
       `--btn-ink` é a cor do TEXTO sobre a cor de ação, e existe porque o
       branco fixo que estava aqui pressupunha uma cor de ação escura. Tema de
       acento claro (âmbar, ciano, menta) precisa de tinta escura, senão o
       rótulo do botão principal vira o texto menos legível da tela — era o
       caso de Terminal, Vidro e Painel de Dados, todos abaixo de 3:1.

       Ficar num token, e não numa lista de seletores por tema, é o que faz a
       correção valer para `.btn-perigo`, `.req-step`, `.badge-current` e
       qualquer classe nova que alguém acrescente amanhã sem avisar.
       Ver docs/temas.md. */

    /* ── BOTAO: uma aparencia so no site inteiro (2026-09-13) ──────────────────
       Pedido do usuario: nenhum botao branco/vazado, todos do MESMO tamanho
       discreto, cor solida e hover em verde mais escuro (a referencia e o Salvar
       da barra de exames do cadastro do paciente). Antes cada tela tinha o seu
       `.btn-outline`/`.btn-secondary`/`.btn-ghost` no proprio <style>, com padding
       de .45rem 1.2rem, caixa alta, borda de 2px e fundo transparente — o
       "ATUALIZAR" do cadastro era o caso mais visivel.
       Este bloco fica DEPOIS do extra_css: assim ganha no empate de especificidade
       de qualquer `.btn-*` declarado na propria tela, mesmo os que sobraram.
       Nao entram aqui de proposito: `.btn-x` (o [x] vermelho, logo acima),
       `.acao-btn` e `.tab-btn` (aba, que nao e botao — tem estado ativo proprio). */
    .btn, .btn-outline, .btn-sec, .btn-secondary, .btn-primary, .btn-ghost,
    .btn-sm, .btn-xs, .btn-add, .btn-add-kit, .btn-salvar-modelo, .btn-guardar-kit,
    .btn-cancelar, .btn-cancel, .btn-danger, .btn-perigo, .btn-red,
    .copy-btn, .preset-btn, .se-abrir-btn, .bm-drag-btn, .escala-btn, .nav-btn {
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--sans); font-size: 10.5px; font-weight: 600;
      letter-spacing: .02em; text-transform: none; line-height: 1.2;
      color: var(--btn-ink, #fff); background: var(--teal);
      border: 1px solid var(--teal-d); border-radius: var(--r-ctl);
      padding: 5px 12px; min-height: 26px; cursor: pointer; text-decoration: none;
      transition: background .15s, border-color .15s;
    }
    .btn:hover, .btn-outline:hover, .btn-sec:hover, .btn-secondary:hover,
    .btn-primary:hover, .btn-ghost:hover, .btn-sm:hover, .btn-xs:hover,
    .btn-add:hover, .btn-add-kit:hover, .btn-salvar-modelo:hover, .btn-guardar-kit:hover,
    .copy-btn:hover, .preset-btn:hover, .se-abrir-btn:hover, .bm-drag-btn:hover,
    .escala-btn:hover, .nav-btn:hover {
      background: var(--teal-dd); border-color: var(--teal-dd); color: var(--btn-ink-hover, var(--btn-ink, #fff));
    }
    /* Destrutivo e "cancelar" continuam solidos e do mesmo tamanho — so mudam de cor,
       senao "Salvar" e "Cancelar" (ou "Excluir") ficariam identicos lado a lado. */
    .btn-danger, .btn-perigo, .btn-red, .btn-xs.cancel {
      background: var(--red); border-color: var(--red-line); color: var(--btn-ink-red, #fff);
    }
    .btn-danger:hover, .btn-perigo:hover, .btn-red:hover, .btn-xs.cancel:hover {
      background: color-mix(in srgb, var(--red) 82%, #000);
      border-color: color-mix(in srgb, var(--red) 82%, #000); color: var(--btn-ink-red, #fff);
    }
    .btn-cancelar, .btn-cancel { background: var(--muted); border-color: var(--muted); }
    .btn-cancelar:hover, .btn-cancel:hover { background: var(--ink); border-color: var(--ink); }
    .btn:disabled, .btn-outline:disabled, .btn-sec:disabled, .btn-secondary:disabled,
    .btn-ghost:disabled, .btn-xs:disabled, button.escala-btn:disabled {
      opacity: .55; cursor: default;
    }
    .btn:disabled:hover, .btn-outline:disabled:hover, .btn-sec:disabled:hover,
    .btn-secondary:disabled:hover, .btn-ghost:disabled:hover, .btn-xs:disabled:hover {
      background: var(--teal); border-color: var(--teal-d);
    }
    /* Bookmarklet: e' um botao da familia (mesma cor, mesmo tamanho), mas nao se
       CLICA -- se arrasta para a barra de favoritos do navegador. O cursor e a
       trava de selecao sao a unica diferenca, e ficam aqui porque as duas telas
       que o oferecem (Baixar LACS e os atalhos do cadastro) declaravam cada uma
       a sua versao, uma delas com `background: var(--navy)` -- a cor do TEXTO --
       que nos temas escuros dava placa branca com letra branca. */
    .bm-drag-btn { cursor: grab; user-select: none; }
    .bm-drag-btn:active { cursor: grabbing; }

    /* O "+" redondo (adicionar linha de risco, medicacao, protocolo LACS, exame):
       mesma cor solida dos demais, so que redondo — era o outro botao branco da tela. */
    .btn-mais, .protocolo-lacs-add {
      background: var(--teal); color: var(--btn-ink, #fff); border: 1px solid var(--teal-d);
      width: 2rem; height: 2rem; border-radius: 50%; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--sans); font-size: 1.05rem; line-height: 1; cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .btn-mais:hover, .protocolo-lacs-add:hover {
      background: var(--teal-dd); border-color: var(--teal-dd); color: var(--btn-ink-hover, var(--btn-ink, #fff));
    }
    @media (max-width: 720px) {
      .btn, .btn-outline, .btn-sec, .btn-secondary, .btn-primary, .btn-ghost,
      .btn-sm, .btn-xs, .btn-add, .btn-add-kit, .btn-salvar-modelo, .btn-guardar-kit,
      .btn-cancelar, .btn-cancel, .btn-danger, .btn-perigo, .btn-red,
      .copy-btn, .preset-btn, .se-abrir-btn, .bm-drag-btn, .escala-btn, .nav-btn {
        font-size: 11.5px; padding: 6px 13px; min-height: 28px;
      }
    }

    /* Vem DEPOIS do extra_css de proposito: varios apps redeclaram a borda do campo
       no proprio <style> (`1px solid var(--border)`) e, por ordem, venciam a regra
       global. Campo de formulario tem uma borda so em todo o site, e e esta. */
    input[type=text], input[type=password], input[type=number], input[type=date],
    input[type=email], input[type=tel], input[type=search], select, textarea {
      border-color: var(--line-ctl);
    }
    input:focus, select:focus, textarea:focus { border-color: var(--teal); }