/* Integra_Tokens.html — camada 0 do ecossistema Integra Farmácia HRN. Entra ANTES de qualquer estilo da ferramenta.
     Origem: tokens do PGA HRN (PLANO_VISUAL v5, aprovado em 02/10/2026), os mesmos do portal Integra e do MEMORANDO.
     Não editar dentro de cada ferramenta: atualizar na skill integra-ecossistema e copiar de novo.

     O que é igual em TODAS as ferramentas (nomes e valores): cores, fonte, raios, sombras, movimento.
     O que NÃO se sobrescreve: --fs-* e --esp-* de cada ferramenta (PGA e portal usam escalas diferentes
     com o mesmo nome). Os componentes do kit usam a escala própria --eco-fs-* / --eco-esp-*.

     Identidade da ferramenta: <body data-frente="CAF|SUP|FC|GES|SIS">. A frente só pinta a marca do topo,
     o selo da ferramenta e a aba ativa. Botão principal, foco e links continuam no teal HRN (--primaria):
     é ele que faz todas as ferramentas parecerem do mesmo sistema. */
  :root {
    color-scheme: light;
    /* superfícies e texto */
    --fundo: #f3f5f7; --superficie: #ffffff; --superficie-2: #f7f8fa; --raia: #e9edf1; --linha: #edf0f3;
    --texto: #111827; --suave: #4b5563; --borda: #e1e5ea; --borda-campo: #848f9c; --borda-hover: #c4ccd5;
    --hover: #f1f4f7; --campo-fundo: #ffffff;
    /* marca HRN (igual em todas as ferramentas) */
    --primaria: #0f766e; --primaria-hover: #0b5e58; --primaria-texto: #ffffff; --primaria-f: #dcf3ef; --foco: #0f766e;
    /* sinais: cada cor tem um significado só, sempre com ícone + texto */
    --vermelho: #b42318; --vermelho-f: #fef1ef; --vermelho-borda: #f3b4ab; --vermelho-hover: #8f1e18; --vermelho-texto: #ffffff; /* risco / erro */
    --ambar: #8a4b00; --ambar-f: #fff6e3; --ambar-borda: #efcb84;                                      /* falta algo / atrasado */
    --azul: #1d4ed8; --azul-f: #edf3ff; --azul-borda: #b8cdfa;                                         /* informação / novo */
    --verde: #166534; --verde-f: #eaf7ee; --verde-borda: #a9dcb8;                                      /* concluído / funcionando */
    --estrela: #b7791f;
    /* frentes (identidade de cada ferramenta; contraste >= 4.5:1 sobre o fundo -f e sobre branco) */
    --frente-CAF: #047857; --frente-CAF-f: #e3f5ec;
    --frente-SUP: #4338ca; --frente-SUP-f: #eceefd;
    --frente-FC:  #0369a1; --frente-FC-f:  #e3f1fa;
    --frente-GES: #6d28d9; --frente-GES-f: #f0eafd;
    --frente-SIS: #0f766e; --frente-SIS-f: #dcf3ef;
    /* geometria, elevação, movimento */
    --r-cartao: 14px; --r-bloco: 10px; --r-pilula: 999px;
    --sombra: 0 1px 2px rgba(16,24,40,.04), 0 3px 10px rgba(16,24,40,.035);
    --sombra-hover: 0 2px 4px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.07);
    --sombra-modal: 0 20px 25px -5px rgba(15,23,42,.15), 0 10px 10px -5px rgba(15,23,42,.04);
    --curva: cubic-bezier(.32,.72,0,1); --mov: 180ms var(--curva);
    --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* escala própria do kit (não colide com a da ferramenta) */
    --eco-fs-xs: 12.5px; --eco-fs-sm: 13.5px; --eco-fs-md: 15px; --eco-fs-lg: 17px; --eco-fs-xl: 20px;
    --eco-esp-1: 4px; --eco-esp-2: 8px; --eco-esp-3: 12px; --eco-esp-4: 16px; --eco-esp-5: 20px; --eco-esp-6: 24px; --eco-esp-7: 32px;
    --eco-alvo: 44px; /* altura mínima de tudo que se clica */
    /* frente ativa (o body troca com data-frente) */
    --frente: var(--frente-SIS); --frente-f: var(--frente-SIS-f);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --fundo: #0d1117; --superficie: #1a2029; --superficie-2: #1f2630; --raia: #131920; --linha: #222a35;
      --texto: #e9eef4; --suave: #b0bac6; --borda: #2a333f; --borda-campo: #718096; --borda-hover: #3e4a59;
      --hover: #222a35; --campo-fundo: #151b23;
      --primaria: #2dd4bf; --primaria-hover: #5eead4; --primaria-texto: #04201e; --primaria-f: #10302c; --foco: #5eead4;
      --vermelho: #ff8f84; --vermelho-f: #351614; --vermelho-borda: #7d2c25; --vermelho-hover: #ffb3ab; --vermelho-texto: #2a0b08;
      --ambar: #f7c26b; --ambar-f: #30230b; --ambar-borda: #6e5114;
      --azul: #93b4ff; --azul-f: #142039; --azul-borda: #2c4479;
      --verde: #7fd69b; --verde-f: #12281a; --verde-borda: #285c39;
      --estrela: #f0b429;
      --frente-CAF: #6ee7b7; --frente-CAF-f: #0f2a20;
      --frente-SUP: #a5b4fc; --frente-SUP-f: #1e2142;
      --frente-FC:  #7dd3fc; --frente-FC-f:  #0f2533;
      --frente-GES: #c4b5fd; --frente-GES-f: #251a3f;
      --frente-SIS: #2dd4bf; --frente-SIS-f: #10302c;
      --sombra: none; --sombra-hover: 0 0 0 1px var(--borda-hover); --sombra-modal: 0 8px 24px rgba(0,0,0,.6);
    }
  }
  body[data-frente="CAF"] { --frente: var(--frente-CAF); --frente-f: var(--frente-CAF-f); }
  body[data-frente="SUP"] { --frente: var(--frente-SUP); --frente-f: var(--frente-SUP-f); }
  body[data-frente="FC"]  { --frente: var(--frente-FC);  --frente-f: var(--frente-FC-f); }
  body[data-frente="GES"] { --frente: var(--frente-GES); --frente-f: var(--frente-GES-f); }
  body[data-frente="SIS"] { --frente: var(--frente-SIS); --frente-f: var(--frente-SIS-f); }


  /* Integra_Base.html — camada 1 do ecossistema: a "casca" comum e os componentes que se repetem em todas as ferramentas.
     Entra logo depois de Integra_Tokens.html e ANTES dos estilos próprios da ferramenta.
     Tudo com prefixo eco- para não colidir com as classes que a ferramenta já tem.
     Não editar dentro de cada ferramenta: atualizar na skill integra-ecossistema e copiar de novo. */

  /* ---------- base ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); line-height: 1.5; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
  ::selection { background: var(--primaria-f); color: var(--texto); }
  input, select, textarea { caret-color: var(--primaria); }
  * { scrollbar-color: var(--borda-campo) transparent; scrollbar-width: thin; }
  a { color: var(--primaria); text-underline-offset: 3px; }
  .ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }
  .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

  /* ---------- casca: topo ---------- */
  .eco-topo { position: sticky; top: 0; z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra); }
  .eco-topo-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-esp-3) var(--eco-esp-4);
    padding: var(--eco-esp-3) var(--eco-esp-5); max-width: var(--eco-largura, none); margin: 0 auto; }
  .eco-marca { display: flex; align-items: center; gap: var(--eco-esp-3); margin-right: auto; min-width: 0; }
  .eco-marca-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-bloco);
    background: var(--frente-f); color: var(--frente); }
  .eco-marca-ic .ic { width: 22px; height: 22px; }
  .eco-marca-nome { margin: 0; font-size: var(--eco-fs-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
  .eco-marca-sub { display: block; color: var(--suave); font-size: var(--eco-fs-xs); font-weight: 500; }
  .eco-marca-sub b { color: var(--primaria); font-weight: 700; }
  .eco-simbolo { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
  .eco-topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-esp-2); }
  .eco-portal { display: inline-flex; align-items: center; gap: 6px; min-height: var(--eco-alvo); padding: 0 var(--eco-esp-4);
    border: 1px solid var(--borda); border-radius: var(--r-pilula); background: var(--superficie); color: var(--texto);
    font-size: var(--eco-fs-sm); font-weight: 600; text-decoration: none; transition: background var(--mov), border-color var(--mov); }
  .eco-portal:hover { background: var(--hover); border-color: var(--borda-hover); }
  .eco-portal .ic { color: var(--primaria); }
  .eco-usuario { color: var(--suave); font-size: var(--eco-fs-sm); }
  .eco-usuario strong { color: var(--texto); font-weight: 600; }

  /* ---------- casca: abas ---------- */
  /* a faixa ocupa a tela toda, mas as abas ficam na mesma coluna do topo e da página (--eco-largura):
     o texto da 1ª aba alinha com a marca (desconta o recuo da própria aba) */
  .eco-abas { display: flex; gap: var(--eco-esp-1); overflow-x: auto; border-top: 1px solid var(--borda);
    padding: 0 max(var(--eco-esp-1), calc((100% - var(--eco-largura, 100%)) / 2 + var(--eco-esp-5) - var(--eco-esp-4)));
    background: var(--superficie); }
  .eco-aba { display: inline-flex; align-items: center; gap: var(--eco-esp-2); min-height: 48px; padding: 0 var(--eco-esp-4);
    background: none; border: 0; border-bottom: 3px solid transparent; color: var(--suave); font-weight: 600;
    font-size: var(--eco-fs-md); white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: color var(--mov), border-color var(--mov), background var(--mov); }
  .eco-aba:hover { color: var(--texto); background: var(--hover); }
  .eco-aba[aria-selected="true"], .eco-aba.ativa { color: var(--frente); border-bottom-color: var(--frente); font-weight: 700; }

  /* ---------- casca: página e rodapé ---------- */
  .eco-pagina { max-width: var(--eco-largura, 1180px); margin: 0 auto; padding: var(--eco-esp-5) var(--eco-esp-5) var(--eco-esp-7); }
  .eco-titulo { margin: 0 0 4px; font-size: var(--eco-fs-xl); font-weight: 700; }
  .eco-dica { margin: 0 0 var(--eco-esp-4); color: var(--suave); font-size: var(--eco-fs-sm); }
  .eco-rodape { display: flex; flex-wrap: wrap; gap: 4px var(--eco-esp-3); justify-content: center; align-items: center;
    padding: var(--eco-esp-4) var(--eco-esp-5) var(--eco-esp-6); color: var(--suave); font-size: var(--eco-fs-xs);
    border-top: 1px solid var(--borda); }
  .eco-rodape b { color: var(--texto); font-weight: 600; }
  /* "Sobre": discreto, no rodapé de toda ferramenta; abre a janela .eco-sobre com o nome da autora */
  .eco-sobre-btn { display: inline-flex; align-items: center; min-height: var(--eco-alvo); padding: 0 var(--eco-esp-2); border: 0;
    background: none; color: var(--suave); font-size: var(--eco-fs-xs); text-decoration: underline; text-decoration-color: var(--borda);
    text-underline-offset: 3px; cursor: pointer; transition: color var(--mov), text-decoration-color var(--mov); }
  .eco-sobre-btn:hover { color: var(--primaria); text-decoration-color: currentColor; }
  .eco-janela.eco-sobre { width: min(400px, calc(100% - 32px)); }
  .eco-sobre .eco-janela-corpo { justify-items: center; text-align: center; gap: var(--eco-esp-2); padding-block: var(--eco-esp-6) var(--eco-esp-5); }
  .eco-sobre .eco-marca-ic { width: 48px; height: 48px; margin-bottom: var(--eco-esp-2); }
  .eco-sobre h2 { margin: 0; font-size: var(--eco-fs-lg); }
  .eco-sobre p { margin: 0; color: var(--suave); font-size: var(--eco-fs-sm); }
  .eco-sobre-autora { margin-top: var(--eco-esp-4) !important; padding-top: var(--eco-esp-4); border-top: 1px solid var(--borda); width: 100%; }
  .eco-sobre-autora b { display: block; color: var(--texto); font-size: var(--eco-fs-md); font-weight: 700; }
  .eco-sobre .eco-janela-pe { justify-content: center; border-top: 0; padding-top: 0; }

  /* ---------- botões (tudo em pílula, altura mínima 44px) ---------- */
  .eco-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--eco-esp-2);
    min-height: var(--eco-alvo); padding: 0 var(--eco-esp-5); border: 1px solid var(--borda); border-radius: var(--r-pilula);
    background: var(--superficie); color: var(--texto); font-size: var(--eco-fs-sm); font-weight: 600; text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: background var(--mov), border-color var(--mov), box-shadow var(--mov); }
  .eco-btn:hover { background: var(--hover); border-color: var(--borda-hover); }
  .eco-btn.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); font-weight: 700; }
  .eco-btn.primario:hover { background: var(--primaria-hover); border-color: var(--primaria-hover); }
  .eco-btn.perigo { background: var(--vermelho); border-color: var(--vermelho); color: var(--vermelho-texto); }
  .eco-btn.perigo:hover { background: var(--vermelho-hover); border-color: var(--vermelho-hover); }
  .eco-btn.discreto { border-color: transparent; background: none; color: var(--primaria); }
  .eco-btn.discreto:hover { background: var(--hover); }
  .eco-btn.icone { width: var(--eco-alvo); padding: 0; }
  .eco-btn .ic { width: 18px; height: 18px; }
  .eco-btn:disabled, .eco-btn[aria-busy="true"] { opacity: .6; cursor: wait; }

  /* ---------- filtros (pílula discreta; fundo colorido só quando ligado) ---------- */
  .eco-filtros { display: flex; flex-wrap: wrap; gap: var(--eco-esp-2); }
  .eco-filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--eco-esp-4);
    border: 1px solid var(--borda); border-radius: var(--r-pilula); background: var(--superficie); color: var(--suave);
    font-size: var(--eco-fs-sm); font-weight: 600; cursor: pointer; transition: all var(--mov); }
  .eco-filtro:hover { border-color: var(--borda-hover); color: var(--texto); }
  .eco-filtro[aria-pressed="true"] { background: var(--primaria-f); border-color: var(--primaria); color: var(--primaria); }
  .eco-filtro .n { font-weight: 700; color: var(--texto); }

  /* ---------- campos ---------- */
  .eco-campo { display: grid; gap: var(--eco-esp-1); min-width: 0; font-size: var(--eco-fs-sm); font-weight: 600; }
  /* largura 100% e min-width 0: um setor de nome longo numa lista não alarga a coluna nem estoura a janela */
  .eco-campo input, .eco-campo select, .eco-campo textarea, .eco-input {
    width: 100%; min-width: 0; min-height: var(--eco-alvo); padding: var(--eco-esp-2) var(--eco-esp-3); font-size: 16px; font-weight: 400; /* 16px: o iPhone não dá zoom */
    background: var(--campo-fundo); border: 1px solid var(--borda-campo); border-radius: var(--r-bloco);
    transition: border-color var(--mov), box-shadow var(--mov); }
  .eco-campo input:focus, .eco-campo select:focus, .eco-campo textarea:focus, .eco-input:focus {
    outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-f); }
  .eco-campo input[type=checkbox], .eco-campo input[type=radio] { width: auto; min-height: 0; padding: 0; } /* não esticam */
  .eco-campo .ajuda { font-weight: 400; color: var(--suave); font-size: var(--eco-fs-xs); }
  /* campo que não se altera: fundo da raia, sem parecer quebrado */
  .eco-campo input:disabled, .eco-campo select:disabled, .eco-campo textarea:disabled,
  .eco-campo input[readonly], .eco-campo textarea[readonly] {
    background: var(--superficie-2); border-color: var(--borda); color: var(--texto); cursor: not-allowed; opacity: 1; }
  .eco-busca { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; }
  .eco-busca > .ic { position: absolute; left: 14px; color: var(--suave); pointer-events: none; }
  .eco-busca input { width: 100%; min-height: var(--eco-alvo); padding: 0 44px 0 40px; font-size: 16px; border-radius: var(--r-pilula);
    border: 1px solid var(--borda-campo); background: var(--campo-fundo); }
  .eco-busca input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-f); }
  .eco-busca kbd { position: absolute; right: 12px; min-width: 22px; padding: 1px 6px; border: 1px solid var(--borda);
    border-radius: 6px; color: var(--suave); font: 600 var(--eco-fs-xs)/1.4 var(--fonte); text-align: center; pointer-events: none; }

  /* ---------- cartões (o único elemento com contorno) ---------- */
  .eco-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao);
    box-shadow: var(--sombra); padding: var(--eco-esp-4); }
  a.eco-cartao, button.eco-cartao { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; cursor: pointer;
    transition: border-color var(--mov), box-shadow var(--mov); }
  a.eco-cartao:hover, button.eco-cartao:hover { border-color: var(--borda-hover); box-shadow: var(--sombra-hover); }
  .eco-cartao.VERMELHO { border-color: var(--vermelho-borda); background: linear-gradient(var(--vermelho-f), var(--superficie) 70%); }
  .eco-cartao.AMARELO { border-color: var(--ambar-borda); }
  .eco-cartao h3 { margin: 0 0 var(--eco-esp-2); font-size: var(--eco-fs-md); font-weight: 700; display: flex; align-items: center; gap: var(--eco-esp-2); }
  .eco-grade { display: grid; gap: var(--eco-esp-3); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  .eco-raia { background: var(--raia); border-radius: var(--r-cartao); padding: var(--eco-esp-3); }

  /* ---------- cartão de ferramenta (portal e menus): ladrilho com o ícone da ferramenta na cor da frente ---------- */
  .eco-app { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--eco-esp-3); align-content: start;
    padding: var(--eco-esp-4); min-height: 112px; color: inherit; text-decoration: none; background: var(--superficie);
    border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra);
    transition: border-color var(--mov), box-shadow var(--mov); }
  .eco-app:hover { border-color: var(--borda-hover); box-shadow: var(--sombra-hover); }
  .eco-ladrilho { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-bloco);
    background: var(--frente-f); color: var(--frente); }
  .eco-ladrilho .ic { width: 24px; height: 24px; }
  [data-frente="CAF"] { --frente: var(--frente-CAF); --frente-f: var(--frente-CAF-f); }
  [data-frente="SUP"] { --frente: var(--frente-SUP); --frente-f: var(--frente-SUP-f); }
  [data-frente="FC"]  { --frente: var(--frente-FC);  --frente-f: var(--frente-FC-f); }
  [data-frente="GES"] { --frente: var(--frente-GES); --frente-f: var(--frente-GES-f); }
  [data-frente="SIS"] { --frente: var(--frente-SIS); --frente-f: var(--frente-SIS-f); }
  .eco-app-nome { font-weight: 700; font-size: var(--eco-fs-md); line-height: 1.3; }
  .eco-app-desc { color: var(--suave); font-size: var(--eco-fs-sm); line-height: 1.4; }
  .eco-app-pe { display: flex; flex-wrap: wrap; gap: var(--eco-esp-2); align-items: center; margin-top: var(--eco-esp-2); }

  /* ---------- cartão de paciente (quadro / kanban) ---------- */
  .eco-paciente { display: grid; gap: 6px; padding: var(--eco-esp-3); background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r-cartao); box-shadow: var(--sombra); }
  .eco-paciente.urgente { border-color: var(--vermelho-borda); background: linear-gradient(var(--vermelho-f), var(--superficie) 60%); }
  .eco-paciente-topo { display: flex; align-items: flex-start; gap: var(--eco-esp-2); }
  .eco-leito { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--suave); font-size: var(--eco-fs-xs); font-weight: 600; }
  .eco-alertas { display: flex; gap: 4px; }
  .eco-alertas .ic { width: 18px; height: 18px; }
  .eco-alertas .VERMELHO { color: var(--vermelho); }
  .eco-alertas .AMARELO { color: var(--ambar); }
  .eco-alertas .AZUL { color: var(--azul); }
  .eco-paciente-nome { font-weight: 700; font-size: var(--eco-fs-md); line-height: 1.3; overflow-wrap: anywhere; }

  /* ---------- chip de medicação (nome inteiro, quebra linha; nunca reticências) ---------- */
  .eco-med { display: flex; align-items: flex-start; gap: var(--eco-esp-2); padding: 6px 10px; border-radius: var(--r-bloco);
    background: var(--superficie-2); border: 1px solid var(--linha); font-size: var(--eco-fs-sm); }
  .eco-med-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .eco-med-tipo { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800;
    color: var(--primaria); background: var(--primaria-f); }
  .eco-med-dia { flex: none; padding: 1px 8px; border-radius: var(--r-pilula); font-size: var(--eco-fs-xs); font-weight: 700;
    color: var(--azul); background: var(--azul-f); font-variant-numeric: tabular-nums; }

  /* ---------- números (KPI) ---------- */
  .eco-kpi { display: flex; flex-direction: column; gap: 4px; }
  .eco-kpi-num { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .eco-kpi-rotulo { color: var(--suave); font-size: var(--eco-fs-sm); font-weight: 600; }

  /* ---------- sinais: cor + ícone + texto, sempre os três ---------- */
  .eco-sinal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pilula);
    font-size: var(--eco-fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; }
  .eco-sinal .ic { flex-shrink: 0; }
  .eco-sinal.VERMELHO { color: var(--vermelho); background: var(--vermelho-f); }
  .eco-sinal.AMARELO  { color: var(--ambar); background: var(--ambar-f); }
  .eco-sinal.AZUL     { color: var(--azul); background: var(--azul-f); }
  .eco-sinal.VERDE    { color: var(--verde); background: var(--verde-f); }
  .eco-sinal.NEUTRO   { color: var(--suave); background: var(--hover); }
  .eco-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pilula);
    font-size: var(--eco-fs-xs); font-weight: 700; color: var(--frente); background: var(--frente-f); }

  /* ---------- avisos ---------- */
  .eco-aviso { display: flex; gap: var(--eco-esp-3); align-items: flex-start; padding: var(--eco-esp-3) var(--eco-esp-4);
    border: 1px solid var(--borda); border-radius: var(--r-bloco); background: var(--superficie-2); font-size: var(--eco-fs-sm); }
  .eco-aviso > .ic { width: 20px; height: 20px; margin-top: 1px; }
  .eco-aviso.VERMELHO { color: var(--vermelho); background: var(--vermelho-f); border-color: var(--vermelho-borda); }
  .eco-aviso.AMARELO  { color: var(--ambar); background: var(--ambar-f); border-color: var(--ambar-borda); }
  .eco-aviso.AZUL     { color: var(--azul); background: var(--azul-f); border-color: var(--azul-borda); }
  .eco-aviso.VERDE    { color: var(--verde); background: var(--verde-f); border-color: var(--verde-borda); }
  .eco-aviso p { margin: 0; color: var(--texto); }
  .eco-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: min(520px, calc(100% - 32px));
    display: flex; gap: var(--eco-esp-2); align-items: center; padding: var(--eco-esp-3) var(--eco-esp-4);
    background: var(--aviso-fundo, #1d2733); color: #fff; border-radius: var(--r-bloco); box-shadow: var(--sombra-modal); font-size: var(--eco-fs-sm); }

  /* ---------- estados: vazio, erro, carregando ---------- */
  .eco-vazio { display: grid; justify-items: center; gap: var(--eco-esp-2); padding: 48px var(--eco-esp-4); text-align: center; color: var(--suave); }
  .eco-vazio > .ic { width: 32px; height: 32px; color: var(--borda-campo); }
  .eco-vazio strong { color: var(--texto); font-size: var(--eco-fs-md); }
  .eco-esq { border-radius: var(--r-bloco); background: var(--raia);
    background-image: linear-gradient(90deg, transparent, var(--superficie-2), transparent); background-size: 200% 100%;
    animation: eco-brilho 1.4s linear infinite; min-height: 18px; }
  .eco-esq.cartao { min-height: 112px; border-radius: var(--r-cartao); }
  @keyframes eco-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

  /* ---------- seções recolhíveis (seta em CSS, sem caractere ▾) ---------- */
  details.eco-recolhe > summary { display: flex; align-items: center; gap: var(--eco-esp-2); min-height: var(--eco-alvo);
    cursor: pointer; list-style: none; font-weight: 700; }
  details.eco-recolhe > summary::-webkit-details-marker { display: none; }
  details.eco-recolhe > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border: solid var(--suave);
    border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--mov); }
  details.eco-recolhe[open] > summary::after { transform: rotate(-135deg); }

  /* ---------- tabelas ---------- */
  .eco-tabela-caixa { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-cartao); background: var(--superficie); }
  .eco-tabela { width: 100%; border-collapse: collapse; font-size: var(--eco-fs-sm); }
  .eco-tabela th { position: sticky; top: 0; background: var(--superficie-2); color: var(--suave); text-align: left;
    font-size: var(--eco-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px;
    border-bottom: 1px solid var(--borda); }
  .eco-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; overflow-wrap: anywhere; }
  .eco-tabela tr:last-child td { border-bottom: 0; }
  .eco-tabela td.num, .eco-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

  /* ---------- janela (modal) ---------- */
  .eco-janela { border: 0; padding: 0; border-radius: var(--r-cartao); box-shadow: var(--sombra-modal); background: var(--superficie);
    color: var(--texto); width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; }
  /* topo e pé ficam sempre à vista; só o corpo rola (também quando um <form> envolve os três) */
  .eco-janela[open], .eco-janela > form { display: flex; flex-direction: column; min-height: 0; }
  .eco-janela > form { flex: 1 1 auto; }
  .eco-janela-topo, .eco-janela-pe { flex: none; }
  .eco-janela::backdrop { background: rgba(15,23,42,.45); }
  .eco-janela-topo { display: flex; align-items: center; gap: var(--eco-esp-3); padding: var(--eco-esp-4) var(--eco-esp-5); border-bottom: 1px solid var(--borda); }
  .eco-janela-topo h2 { margin: 0 auto 0 0; font-size: var(--eco-fs-lg); }
  .eco-janela-corpo { padding: var(--eco-esp-5); display: grid; gap: var(--eco-esp-4); align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .eco-janela-pe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--eco-esp-2); padding: var(--eco-esp-4) var(--eco-esp-5);
    border-top: 1px solid var(--borda); }

  /* ---------- celular ---------- */
  @media (max-width: 760px) { .eco-topo { position: static; } } /* no celular o topo tem 2–3 linhas: fixo, tomaria meia tela */
  @media (max-width: 560px) {
    .eco-topo-dentro { padding: var(--eco-esp-2) var(--eco-esp-4); }
    .eco-marca-nome { font-size: var(--eco-fs-lg); }
    .eco-portal span { display: none; } /* fica só o ícone, com aria-label no link */
    .eco-portal { width: var(--eco-alvo); padding: 0; justify-content: center; }
    .eco-busca { max-width: none; flex-basis: 100%; order: 3; }
    .eco-pagina { padding: var(--eco-esp-4); }
    .eco-abas { padding: 0; } /* o recuo da própria aba (16px) alinha o texto com a marca */
  }


  /* Estilo.html — camada 1 de 5 — tokens: cores, tipografia (--fs-*), espaçamentos (--esp-*), raios. Use as variáveis em vez de px soltos; cada cor tem um significado só (vermelho = risco, âmbar = falta algo, azul = informação, verde = concluído).
     As 5 camadas entram nesta ordem (Index.html e Infecto.html): a ordem decide qual regra vale. */
  :root {
    color-scheme: light;
    --fundo: #f3f5f7; --superficie: #ffffff; --texto: #111827; --suave: #4b5563; --borda: #e1e5ea;
    --primaria: #0f766e; --primaria-texto: #ffffff; --primaria-f: #dcf3ef; --foco: #0f766e;
    --borda-campo: #848f9c; /* contorno de campos: ≥ 3:1 sobre branco e sobre --fundo */
    --borda-hover: #c4ccd5;
    --campo-fundo: #ffffff;
    --vermelho: #b42318; --vermelho-f: #fef1ef; --vermelho-borda: #f3b4ab; --vermelho-hover: #8f1e18;
    --ambar: #8a4b00; --ambar-f: #fff6e3; --ambar-borda: #efcb84;
    --azul: #1d4ed8; --azul-f: #edf3ff; --azul-borda: #b8cdfa;
    --verde: #166534; --verde-f: #eaf7ee; --verde-borda: #a9dcb8;
    --reserva: #9d174d; --reserva-f: #fdeef5; --estrategico: #3730a3; --estrategico-f: #eef0ff;
    --outro: #4b5563; --outro-f: #eef0f3;
    --hover: #f1f4f7; --primaria-hover: #0b5e58;
    --revisado-f: #f6faf8; --barra-fundo: #e3e8ed;
    --esqueleto-1: #eef1f4; --esqueleto-2: #f7f9fa;
    --coluna-fundo: var(--raia); --coluna-topo-fundo: #e4e9ef; --coluna-borda: #dde3ea;
    /* marcas gráficas (borda de prioridade, barra, ponto da linha do tempo): ≥ 3:1 sobre branco e sobre --fundo (WCAG 1.4.11) */
    --marca-atencao: #c27a00; --marca-neutra: var(--borda-campo);
    /* escala de elevação calibrada: substitui sombras difusas sintéticas */
    --sombra: 0 1px 2px rgba(16,24,40,.04), 0 3px 10px rgba(16,24,40,.035);
    --sombra-md: 0 2px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
    --sombra-lg: 0 4px 8px rgba(0,0,0,.07), 0 8px 16px rgba(0,0,0,.08);
    --aviso-fundo: #1d2733; --aviso-texto: #ffffff; --aviso-acao: #9fe3dd;
    /* escala de texto e de espaçamento */
    --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 13px; --fs-lg: 14px; --fs-xl: 15px; --fs-2xl: 17px; --fs-3xl: 19px;
    --fs-kpi-sm: 22px; --fs-kpi: 24px;
    --esp-1: 2px; --esp-2: 4px; --esp-3: 6px; --esp-4: 8px; --esp-5: 10px; --esp-6: 12px; --esp-7: 14px; --esp-8: 16px; --esp-9: 20px;
    --raio: 12px;
    --raia: #e9edf1;
    --superficie-2: #f7f8fa;
    --suave-2: #596373;
    --linha: #edf0f3;
    --reserva-borda: #f3b6cf;
    --estrategico-borda: #c4c8f5;
    --r-cartao: 14px;
    --r-bloco: 10px;
    --sombra-hover: 0 2px 4px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.07);
    --curva: cubic-bezier(.32,.72,0,1);
    --mov: 180ms var(--curva);
    --trilho: 248px;
    --trilho-mini: 64px;
    --largura-painel: 560px;
    --altura-topo: 0px;
    /* frentes do ecossistema (mesmos valores do Integra_Tokens): repetidas aqui para seguirem o tema escolhido na tela,
       não o do sistema — o símbolo #i-integra usa as quatro; o ladrilho da marca usa a FC (body data-frente="FC") */
    --frente-CAF: #047857; --frente-CAF-f: #e3f5ec; --frente-SUP: #4338ca; --frente-SUP-f: #eceefd;
    --frente-FC: #0369a1; --frente-FC-f: #e3f1fa; --frente-GES: #6d28d9; --frente-GES-f: #f0eafd;
    --vermelho-texto: #ffffff;
  }

  /* Modo escuro: ativado por escolha em Configurações/Menu ou por preferência do sistema (via script de hidratação antecipada) */
  html[data-tema="escuro"], [data-tema="escuro"] {
    color-scheme: dark;
    --fundo: #0d1117; --superficie: #1a2029; --texto: #e9eef4; --suave: #b0bac6; --borda: #2a333f;
    --primaria: #2dd4bf; --primaria-texto: #04201e; --primaria-f: #10302c; --foco: #5eead4;
    --borda-campo: #718096;
    --borda-hover: #3e4a59;
    --campo-fundo: #121924;
    --vermelho: #ff8f84; --vermelho-f: #351614; --vermelho-borda: #7d2c25; --vermelho-hover: #ff857d;
    --ambar: #f7c26b; --ambar-f: #30230b; --ambar-borda: #6e5114;
    --azul: #8fb4ff; --azul-f: #14213d; --azul-borda: #2e4a85;
    --verde: #7fd69b; --verde-f: #12281a; --verde-borda: #2b6a3f;
    --reserva: #f59cc2; --reserva-f: #36142a; --estrategico: #b4b9ff; --estrategico-f: #1e1f45;
    --outro: #a0aec0; --outro-f: #222f3e;
    --hover: #222a35; --primaria-hover: #5eead4;
    --revisado-f: #132720; --barra-fundo: #233142;
    --esqueleto-1: #1a2432; --esqueleto-2: #243245;
    --coluna-fundo: #131b26; --coluna-topo-fundo: #172230; --coluna-borda: #263547;
    --marca-atencao: #f7c26b; --marca-neutra: #4a6078;
    --sombra: none;
    --sombra-md: 0 2px 4px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --sombra-lg: 0 4px 8px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.35);
    --aviso-fundo: #243245; --aviso-texto: #ffffff;
    --raia: #131920;
    --superficie-2: #1f2630;
    --suave-2: #8b97a5;
    --linha: #262e39;
    --reserva-borda: #7a2e55;
    --estrategico-borda: #3f428a;
    --sombra-hover: 0 0 0 1px var(--borda-hover);
    --frente-CAF: #6ee7b7; --frente-CAF-f: #0f2a20; --frente-SUP: #a5b4fc; --frente-SUP-f: #1e2142;
    --frente-FC: #7dd3fc; --frente-FC-f: #0f2533; --frente-GES: #c4b5fd; --frente-GES-f: #251a3f;
    --vermelho-texto: #2a0b08;
  }


  /* Estilo_Base.html — camada 2 de 5 — base e componentes comuns: página, topo, botões, abas, quadro, painel, formulários, avisos, indicadores.
     As 5 camadas entram nesta ordem (Index.html e Infecto.html): a ordem decide qual regra vale. */
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
  ::selection { background: var(--primaria-f); color: var(--texto); }
  input, select, textarea { caret-color: var(--primaria); }
  * { scrollbar-color: var(--borda-campo) transparent; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--borda-campo); border-radius: 999px; }
  a, button.link, .link { text-underline-offset: 3px; }
  .painel-titulo:focus { outline: none; } /* recebe foco por script só como ponto de retorno */
  .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
  /* ícones (Icones.html): acompanham o tamanho e a cor do texto */
  .ic { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .35em; flex: none; }
  .btn.icone .ic { width: 20px; height: 20px; margin: 0; vertical-align: middle; }
  .btn.icone.pequeno .ic { width: 18px; height: 18px; }
  .aviso-fechar .ic { width: 16px; height: 16px; margin: 0; vertical-align: middle; }
  /* Cores com um significado só — vermelho: risco clínico · âmbar: falta algo · azul: informação/novo ·
     verde: concluído · roxo/azul-escuro/cinza: só a categoria do antimicrobiano */

  .topo { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--esp-4); align-items: center; flex-wrap: wrap;
          padding: var(--esp-3) var(--esp-6); background: var(--superficie); border-bottom: 1px solid var(--borda); box-shadow: 0 1px 3px rgba(0,0,0,.03); }
  .marca { margin: 0; font-weight: 700; font-size: var(--fs-xl); letter-spacing: .02em; }
  .marca span { color: var(--primaria); }
  .abas { display: flex; gap: var(--esp-2); }
  .filtros { display: flex; gap: var(--esp-3); align-items: center; }
  /* faixas que rolam de lado são a referência dos textos só para leitor de tela (.so-leitor, position:absolute) dentro delas;
     sem isso eles escapam do recorte, alargam a página no tablet/celular e empurram o painel para fora da tela */
  .filtros, .abas-config, .visoes, .abas { position: relative; }
  .btn .qtd { display: inline-block; min-width: 18px; padding: 0 var(--esp-2); margin-left: var(--esp-2); border-radius: 999px; background: var(--ambar-f); color: var(--ambar); font-weight: 700; text-align: center; font-size: var(--fs-xs); }

  .abas button { border: 1px solid var(--borda); background: var(--superficie); padding: var(--esp-2) var(--esp-4); min-height: 30px; border-radius: 999px; cursor: pointer; font-size: var(--fs-sm); }
  .abas button:hover { background: var(--hover); }
  .abas button[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
  .filtro-setor { position: relative; display: inline-flex; }
  .filtro-setor select { appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--fs-sm); color: var(--texto); cursor: pointer; min-height: 30px;
    padding: var(--esp-2) 26px var(--esp-2) var(--esp-4); border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); }
  .filtro-setor select:hover { background: var(--hover); }
  /* setas de abrir/fechar: o mesmo chevron (traço do sprite) desenhado por máscara, na cor do texto — nada de setas de fonte */
  :root { --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
  .filtro-setor::after, details.dobra > summary::before, .secao-paciente summary::before, .secao-culturas > summary::before, button.secao-form::before {
    content: ""; display: inline-block; flex: none; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: var(--seta) center / contain no-repeat; mask: var(--seta) center / contain no-repeat; }
  .filtro-setor::after { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); pointer-events: none; color: var(--suave); }
  .filtro-setor.ativo select { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); font-weight: 600; }
  .filtro-setor.ativo::after { color: var(--primaria-texto); }
  .filtro-setor option, .filtro-setor optgroup { background: var(--superficie); color: var(--texto); }
  #busca { flex: 1 1 200px; min-width: 0; padding: var(--esp-2) var(--esp-5); min-height: 32px; border: 1px solid var(--borda-campo); border-radius: 6px; background: var(--campo-fundo); color: var(--texto); transition: border-color .15s, box-shadow .15s; font-size: var(--fs-sm); }
  #busca:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-f); }
  #btnNovo { font-weight: 700; display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 32px; padding: var(--esp-2) var(--esp-5); font-size: var(--fs-sm); }
  /* tela do farmacêutico, desktop: uma linha só — navegação e filtros à esquerda, busca no meio, ações à direita.
     Os botões ficam no mesmo lugar no Quadro e na Ronda. */
  @media (min-width: 1101px) {
    .topo { flex-wrap: nowrap; }
    #busca { flex: 1 1 160px; max-width: 380px; }
    #btnNovo, #btnAtualizar { margin-left: auto; }
    .coluna.sem-cartao h2 { white-space: nowrap; }
    .filtros { flex: none; }
  }

  .usuario { color: var(--suave); font-size: var(--fs-sm); overflow-wrap: anywhere; }

  .btn { border: 1px solid var(--borda); background: var(--superficie); padding: var(--esp-4) var(--esp-7); border-radius: 8px; cursor: pointer; white-space: nowrap; }
  .btn:hover { background: var(--hover); border-color: var(--borda-hover); }
  .btn.primario { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
  .btn.primario:hover { background: var(--primaria-hover); border-color: var(--primaria-hover); }
  .btn.fantasma { background: transparent; border-color: transparent; }
  .btn.fantasma:hover { background: var(--hover); }
  .btn.pequeno { padding: 5px var(--esp-5); min-height: 32px; font-size: var(--fs-md); }
  .btn.perigo { color: var(--vermelho); }
  .btn.perigo:hover { background: var(--vermelho-f); border-color: var(--vermelho-borda); }
  .btn.perigo-cheio { background: var(--vermelho); color: var(--vermelho-texto); border-color: var(--vermelho); }
  .btn.perigo-cheio:hover { background: var(--vermelho-hover); border-color: var(--vermelho-hover); }
  .btn:disabled, .btn:disabled:hover, .situacao-saidas:disabled { background: var(--fundo); color: var(--suave); border-color: var(--borda); cursor: not-allowed; box-shadow: none; }
  .btn.primario:disabled, .btn.primario:disabled:hover { background: var(--primaria-f); color: var(--primaria); border-color: transparent; }

  /* origem automática: só um ícone discreto (o texto fica no title e para o leitor de tela) */
  /* rótulos de chegada (até alguém abrir o paciente): azul = informação, não alerta */
  .rotulo { font-size: var(--fs-xs); font-weight: 600; padding: 1px var(--esp-3); border-radius: 4px; background: var(--azul-f); color: var(--azul); white-space: nowrap; cursor: help; }
  .rotulo.inicio { background: var(--verde-f); color: var(--verde); }

  /* ---------- Kanban Board: Raias compactas com aproveitamento lateral total ---------- */
  .quadro { display: grid; grid-template-columns: var(--colunas, repeat(3, minmax(0, 1fr))); gap: var(--esp-3); padding: var(--esp-3) var(--esp-5); align-items: start; }
  .coluna {
    background: var(--coluna-fundo);
    border: 1px solid var(--coluna-borda);
    border-radius: 8px;
    padding: var(--esp-2);
    min-height: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: background-color .15s, border-color .15s;
  }
  .coluna-topo {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--coluna-topo-fundo);
    border: 1px solid var(--coluna-borda);
    border-radius: 6px;
    padding: 3px var(--esp-3);
    margin-bottom: var(--esp-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .coluna-topo h2 {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--texto);
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
  }
  .coluna-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--superficie);
    color: var(--suave);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  .coluna-ico .ic { margin: 0; }
  .col-cad .coluna-ico { color: var(--ambar); background: var(--ambar-f); }
  .col-acomp .coluna-ico { color: var(--primaria); background: var(--primaria-f); }
  .col-fech .coluna-ico { color: var(--verde); background: var(--verde-f); }
  .coluna-tit { letter-spacing: -.01em; }

  .coluna-topo h2 .qtd {
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.4;
    padding: 0 var(--esp-2);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--borda);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
  }
  .col-cad .coluna-topo h2 .qtd { background: var(--ambar-f); color: var(--ambar); border-color: var(--ambar-borda); }
  .col-acomp .coluna-topo h2 .qtd { background: var(--primaria-f); color: var(--primaria); border-color: transparent; }
  .col-fech .coluna-topo h2 .qtd { background: var(--verde-f); color: var(--verde); border-color: var(--verde-borda); }

  .coluna-topo .btn { font-size: var(--fs-xs); padding: 2px var(--esp-3); min-height: 24px; font-weight: 600; border-radius: 5px; }

  /* Empty state receptivo compacto */
  .coluna-vazia {
    margin: var(--esp-2) 0;
    padding: var(--esp-6) var(--esp-4);
    border: 1.5px dashed var(--borda);
    border-radius: 6px;
    text-align: center;
    color: var(--suave);
    font-size: var(--fs-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    background: rgba(255,255,255,.2);
  }
  [data-tema="escuro"] .coluna-vazia { background: rgba(0,0,0,.15); }
  .coluna-vazia .ic { color: var(--suave); }
  .carregando { grid-column: 1 / -1; color: var(--suave); }
  .falha-carga { grid-column: 1 / -1; display: flex; gap: var(--esp-6); align-items: center; flex-wrap: wrap; }
  .vazio-filtro { grid-column: 1 / -1; display: flex; gap: var(--esp-6); align-items: center; flex-wrap: wrap; justify-content: center;
                  padding: 32px var(--esp-8); color: var(--suave); border: 1px dashed var(--borda); border-radius: var(--raio); }
  .vazio-filtro p { margin: 0; }
  /* espera: blocos no formato do conteúdo com gradiente adaptado a claro/escuro */
  .esqueleto { min-height: 72px; background: linear-gradient(90deg, var(--esqueleto-1) 25%, var(--esqueleto-2) 50%, var(--esqueleto-1) 75%) 0 0 / 200% 100%; animation: brilho 1.2s linear infinite; }
  .esqueleto.alto { min-height: 160px; }
  /* .bloco e .tile definem fundo próprio: o degradê da espera precisa vencer */
  .bloco.esqueleto, .tile.esqueleto { background: linear-gradient(90deg, var(--esqueleto-1) 25%, var(--esqueleto-2) 50%, var(--esqueleto-1) 75%) 0 0 / 200% 100%; border-color: transparent; }
  .tile.esqueleto { min-height: 96px; }
  .esqueleto.linha { min-height: 12px; border-radius: 6px; margin-top: var(--esp-4); width: 70%; }
  /* acabou de salvar: o item que mudou pisca de leve (sem animação para quem pediu menos movimento) */
  .destaque { animation: destaque 1.6s ease-out; }
  @keyframes destaque { 0%, 30% { background-color: var(--azul-f); box-shadow: 0 0 0 2px var(--azul); } 100% { box-shadow: 0 0 0 0 transparent; } }
  @media (prefers-reduced-motion: reduce) { .destaque { animation: none; box-shadow: 0 0 0 2px var(--azul); } }
  .encerrados { flex-basis: 100%; text-align: left; }
  .encerrados ul { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .encerrados .cartao { margin: 0; }
  @keyframes brilho { to { background-position: -200% 0; } }
  .painel-corpo.atualizando { pointer-events: none; filter: grayscale(15%); }
  .painel[aria-busy="true"] .painel-titulo::after { content: "atualizando…"; display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--suave); }
  .painel.salvando .painel-titulo::after { content: "salvando…"; }
  /* estratégia nova que acabou de ser salva: já aparece, esmaecida, até o servidor devolver o registro (App_Formularios) */
  .em-previa { opacity: .6; cursor: progress; }
  .painel.salvando .painel-corpo.atualizando { pointer-events: none; filter: none; } /* o que acabou de ser digitado já foi; só espera a confirmação */

  .cartao { display: block; width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borda);
            border-left: 4px solid var(--borda); border-radius: 8px; padding: 6px var(--esp-4); margin-bottom: var(--esp-2);
            box-shadow: var(--sombra); cursor: pointer; transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out; }
  .cartao:hover { border-color: var(--borda-hover); box-shadow: var(--sombra-md); transform: translateY(-1px); }
  @media (prefers-reduced-motion: reduce) { .cartao:hover { transform: none; } }
  .cartao .meta { display: block; }
  /* borda do cartão = o que pede atenção (igual à ronda e à visão do infecto), não a etapa do cadastro */
  .cartao.PRONTO_CARGA { border-left-color: var(--verde); }
  .cartao.CARREGADO { border-left-color: var(--outro); color: var(--suave); }
  .cartao.p1 { border-left-color: var(--marca-atencao); }
  .cartao.p0 { border-left-color: var(--vermelho); }
  .cartao .linha1 { display: flex; gap: var(--esp-3); align-items: baseline; }
  .cartao .leito { font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

  .cartao .setor { margin-left: auto; color: var(--suave); font-size: var(--fs-sm); white-space: nowrap; }
  .cartao .nome { display: block; font-weight: 600; margin-top: 1px; }
  .cartao .meta { color: var(--suave); font-size: var(--fs-sm); margin-top: 1px; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }
  .chip { font-size: var(--fs-sm); padding: var(--esp-1) var(--esp-4); border-radius: 999px; background: var(--outro-f); color: var(--outro); white-space: nowrap; }
  .chip.RESERVA { background: var(--reserva-f); color: var(--reserva); }
  .chip.ESTRATÉGICO { background: var(--estrategico-f); color: var(--estrategico); }
  .chip.encerrado { text-decoration: line-through; color: var(--suave); }
  .chip.passou { outline: 2px solid var(--vermelho); }

  .painel { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--fundo); z-index: 20;
            display: flex; flex-direction: column; box-shadow: var(--sombra-lg); }
  .veu { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 15; }
  .painel-topo { display: flex; justify-content: space-between; align-items: center; padding: var(--esp-6) var(--esp-8); background: var(--superficie); border-bottom: 1px solid var(--borda); }
  .painel-titulo { font-weight: 700; font-size: var(--fs-xl); }
  .painel-titulo small { display: block; font-weight: 400; color: var(--suave); font-size: var(--fs-sm); }
  /* linhas do tamanho do conteúdo: com conteúdo longo, a grade encolhia blocos com rolagem própria (abas das configurações) */
  .painel-corpo { overflow: auto; padding: var(--esp-8); display: grid; gap: var(--esp-7); grid-auto-rows: max-content; }

  .bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-6) var(--esp-7); }
  .bloco h3 { margin: 0 0 var(--esp-4); font-size: var(--fs-base); display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); }
  .pendencias { background: var(--ambar-f); border-color: var(--ambar-borda); }
  .pendencias ul { margin: var(--esp-2) 0 0; padding-left: 18px; }
  .ok { background: var(--verde-f); border-color: var(--verde-borda); }
  .dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--esp-3) var(--esp-7); margin: 0; }
  .dados dt { font-size: var(--fs-sm); color: var(--suave); }
  .dados dd { margin: 0 0 var(--esp-2); }
  .faltando { color: var(--ambar); font-style: italic; }

  .atm { border-left: 4px solid var(--outro); }
  .atm.RESERVA { border-left-color: var(--reserva); }
  .atm.ESTRATÉGICO { border-left-color: var(--estrategico); }
  .atm .dia { font-variant-numeric: tabular-nums; font-weight: 700; }
  .atm .sub { color: var(--suave); font-size: var(--fs-sm); font-weight: 400; }

  .lista-estr { margin-top: var(--esp-4); }
  .estrategia { display: flex; gap: var(--esp-4); align-items: center; justify-content: space-between; width: calc(100% + 12px); padding: var(--esp-4) var(--esp-3); margin: 0 -6px; font: inherit; font-size: var(--fs-md);
                text-align: left; color: inherit; background: none; border: none; border-top: 1px solid var(--borda); border-radius: 0; }
  button.estrategia { cursor: pointer; }
  button.estrategia:hover { background: var(--hover); }
  .estr-texto { min-width: 0; }
  .estr-texto > .sub { display: block; }
  .estr-editar { flex: none; font-size: var(--fs-sm); color: var(--suave); }
  button.estrategia:hover .estr-editar { color: var(--primaria); }

  .btn.icone.pequeno { min-width: 32px; min-height: 32px; padding: var(--esp-2); }
  .secao-atms { display: grid; gap: var(--esp-5); }
  .secao-titulo { display: flex; gap: var(--esp-4); align-items: center; justify-content: space-between; }
  .secao-titulo h3 { margin: 0; font-size: var(--fs-lg); display: flex; gap: var(--esp-4); align-items: center; }
  .secao-titulo .qtd { background: var(--borda); border-radius: 999px; padding: 0 var(--esp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }
  .vazio-secao { margin: 0; padding: var(--esp-7); color: var(--suave); font-size: var(--fs-md); border: 1px dashed var(--borda); border-radius: var(--raio); text-align: center; }
  details.recolhivel > summary h3 { margin: 0; display: inline-flex; gap: var(--esp-4); align-items: baseline; }

  /* recolhido de uma linha (conferência no painel, ATMs encerrados): mesma seta da linha do tempo */
  details.dobra > summary { display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap; cursor: pointer; list-style: none; min-height: 32px; }
  details.dobra > summary::-webkit-details-marker { display: none; }
  details.dobra > summary::before { color: var(--suave); }
  details.dobra[open] > summary::before { transform: rotate(90deg); }
  details.dobra[open] > summary { margin-bottom: var(--esp-4); }
  details.dobra > summary .qtd { background: var(--borda); border-radius: 999px; padding: 0 var(--esp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }
  .atms-encerrados { display: grid; gap: var(--esp-5); }
  .atms-encerrados > summary { font-weight: 600; color: var(--suave); }

  .retificacoes { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
  .retificacoes ul { list-style: none; margin: var(--esp-2) 0 0; padding: 0; }
  .retificacoes li { display: flex; gap: var(--esp-4); justify-content: space-between; align-items: center; padding: var(--esp-2) 0; font-size: var(--fs-md); }

  .so-celular { display: none !important; }
  #btnBusca { display: none; }
  /* exames e função renal (laudos em PDF): uma linha no painel; a janela Exames tem a caixa do ClCr e a tabela */
  .linha-exames { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5); padding: var(--esp-4) var(--esp-6);
    margin-bottom: var(--esp-6); border: 1px solid var(--borda); border-radius: var(--r-bloco); background: var(--superficie); font-size: var(--fs-md); }
  .linha-exames > .ic { color: var(--suave); flex: none; }
  .linha-exames-txt { flex: 1 1 200px; min-width: 0; }
  .linha-exames .btn { margin-left: auto; }
  .dialogo-exames { width: min(820px, calc(100% - 24px)); max-height: calc(100vh - 32px); }
  .dialogo-exames[open] { display: flex; flex-direction: column; }
  .dex-topo { display: flex; gap: var(--esp-6); justify-content: space-between; align-items: flex-start; padding: var(--esp-8) var(--esp-9) var(--esp-5);
    border-bottom: 1px solid var(--borda); }
  .dex-topo h2 { margin: 0 0 var(--esp-2); }
  .dex-corpo { overflow: auto; padding: var(--esp-7) var(--esp-9) var(--esp-9); }
  @media (max-width: 700px) {
    .dialogo-exames { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .dex-topo, .dex-corpo { padding-inline: var(--esp-8); }
  }
  .renal-caixa { display: grid; gap: var(--esp-3); padding: var(--esp-6) var(--esp-7); border: 1px solid var(--borda); border-radius: var(--r-bloco);
    background: var(--superficie-2); margin-bottom: var(--esp-6); }
  .renal-caixa.instavel { border-color: var(--ambar-borda); background: var(--ambar-f); }
  .renal-tit { font-size: var(--fs-md); color: var(--suave); }
  .renal-valor { font-size: var(--fs-lg); }
  .renal-valor b { font-size: var(--fs-kpi-sm); font-variant-numeric: tabular-nums; }
  .renal-alerta { margin: 0; color: var(--ambar); font-weight: 600; font-size: var(--fs-md); }
  .renal-medidas { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-6); align-items: center; justify-content: space-between;
    border-top: 1px solid var(--borda); padding-top: var(--esp-4); font-size: var(--fs-md); }
  .renal-caixa p { margin: 0; }
  .tab-exames { width: 100%; }
  .tab-exames th[scope="row"] { font-weight: 600; }
  .tab-exames td { vertical-align: top; }
  .tab-exames td:last-child { font-size: var(--fs-xs); max-width: 9em; }
  .tab-exames .ex-ult { font-variant-numeric: tabular-nums; }
  .tab-exames .ex-ult.alto, .tab-exames .ex-ult.baixo { font-weight: 700; }
  .tab-exames .ex-ult.alto { color: var(--vermelho); }
  .tab-exames .ex-ult.baixo { color: var(--azul); }
  .selo.alto { background: var(--vermelho-f); color: var(--vermelho); }
  .selo.baixo { background: var(--azul-f); color: var(--azul); }
  .secao-paciente summary, .secao-culturas > summary { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-6); align-items: baseline; cursor: pointer; list-style: none; }
  .secao-paciente summary::-webkit-details-marker, .secao-culturas > summary::-webkit-details-marker { display: none; }
  .secao-paciente summary::before, .secao-culturas > summary::before { color: var(--suave); }
  .secao-paciente[open] summary::before, .secao-culturas[open] > summary::before { transform: rotate(90deg); }
  .secao-paciente[open] summary, .secao-culturas[open] > summary { margin-bottom: var(--esp-4); }
  /* culturas do laboratório: uma linha por amostra; positiva com o germe em destaque e o antibiograma recolhido */
  .lista-culturas { list-style: none; margin: 0; padding: 0; }
  .cultura { padding: var(--esp-4) 0; border-top: 1px solid var(--borda); }
  .cultura:first-child { border-top: 0; }
  .cult-cab { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-6); justify-content: space-between; align-items: baseline; }
  .cult-res { color: var(--suave); }
  .cultura.positivo .cult-res { color: var(--vermelho); }
  .cultura.contaminada .cult-res, .cultura.em_identificacao .cult-res, .cultura.desconhecido .cult-res { color: var(--ambar); }
  .cultura .tsa { margin-top: var(--esp-3); }
  .tabela-tsa { border-collapse: collapse; font-size: var(--fs-md); width: 100%; max-width: 420px; }
  .tabela-tsa th, .tabela-tsa td { text-align: left; padding: 2px var(--esp-4) 2px 0; border-bottom: 1px solid var(--borda); }
  .tabela-tsa th { color: var(--suave); font-weight: 600; }
  .tabela-tsa .sir { font-weight: 700; }
  .tabela-tsa .sir-S { color: var(--verde); }
  .tabela-tsa .sir-I { color: var(--ambar); }
  .tabela-tsa .sir-R { color: var(--vermelho); }
  .cult-nao { margin-top: var(--esp-3); }

  .selo.mr.critica { background: var(--vermelho-f); color: var(--vermelho); }
  .selo.mr.alta { background: var(--ambar-f); color: var(--ambar); }
  .selo.mr.info, .selo.contaminante, .selo.parcial { background: var(--borda); color: var(--texto); }
  .selo.nova { background: var(--azul-f); color: var(--azul); }
  .cult-subst { margin: var(--esp-4) 0 0; }
  .cult-sens { margin: var(--esp-2) 0 0; }
  /* cobertura no cartão do ATM: uma linha por germe da janela */
  .ac-cult { list-style: none; margin: var(--esp-3) 0 0; padding: var(--esp-3) 0 0; border-top: 1px dashed var(--borda); display: grid; gap: 2px; font-size: var(--fs-md); }
  .ac-cult .cob { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); }
  .ac-cult .cob-germe { font-style: italic; }
  .ac-cult .cob-sit { font-weight: 600; margin-left: auto; }
  .ac-cult .cob.ok .cob-sit { color: var(--verde); }
  .ac-cult .cob.nao .cob-sit { color: var(--vermelho); }
  .ac-cult .cob.avaliar .cob-sit { color: var(--ambar); }
  .ac-cult .cob.neutro .cob-sit { color: var(--suave); font-weight: 400; }
  .sum-titulo { font-weight: 700; }
  .acoes-secao { display: flex; justify-content: flex-end; margin: -4px 0 6px; }

  .dialogo-excluir { margin-right: auto; }
  .selo { font-size: var(--fs-sm); padding: 2px var(--esp-3); border-radius: 4px; margin-left: var(--esp-2); }
  .selo.PENDENTE { background: var(--ambar-f); color: var(--ambar); }
  .selo.SIM { background: var(--verde-f); color: var(--verde); }
  .selo.NÃO { background: var(--vermelho-f); color: var(--vermelho); }
  .selo.isgh { background: var(--azul-f); color: var(--azul); }

  .dialogo { border: none; border-radius: 12px; padding: 0; width: min(640px, calc(100% - 24px)); box-shadow: var(--sombra-lg); background: var(--superficie); color: var(--texto); }
  .dialogo::backdrop { background: rgba(0,0,0,.3); }
  .dialogo form { padding: 18px var(--esp-9); }
  .dialogo h2 { margin: 0 0 var(--esp-6); font-size: var(--fs-2xl); }
  .grade-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-5) var(--esp-7); }
  .campo { display: flex; flex-direction: column; gap: var(--esp-2); }
  .campo.largo { grid-column: 1 / -1; }
  .campo label, .campo .rotulo-campo { font-size: var(--fs-sm); font-weight: 600; color: var(--suave); }
  .campo .check { display: flex; gap: var(--esp-4); align-items: flex-start; font-size: var(--fs-base); font-weight: 400; color: var(--texto); }
  .campo label .obr, .campo .rotulo-campo .obr { color: var(--vermelho); }
  .campo input, .campo select, .campo textarea { padding: var(--esp-4) var(--esp-5); border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--campo-fundo); color: var(--texto); }
  .campo .ajuda { font-size: var(--fs-sm); color: var(--suave); }
  .opcoes-rapidas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
  .opcoes-rapidas button { border: 1px solid var(--borda-campo); background: var(--campo-fundo); color: var(--texto); border-radius: 6px; padding: var(--esp-2) var(--esp-5); min-height: 32px; min-width: 36px; cursor: pointer; font-size: var(--fs-md); }
  .opcoes-rapidas button:hover { background: var(--hover); }
  .opcoes-rapidas button[aria-pressed="true"], .opcoes-rapidas button[aria-pressed="true"]:hover { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
  .secao-form { grid-column: 1 / -1; margin: var(--esp-3) 0 0; padding-top: var(--esp-4); border-top: 1px solid var(--borda); font-size: var(--fs-md); font-weight: 700; }
  .grade-form > .secao-form:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  button.secao-form { display: flex; gap: var(--esp-3); align-items: center; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0;
                      padding: var(--esp-5) 0 var(--esp-1); color: var(--suave); cursor: pointer; font: inherit; font-size: var(--fs-md); font-weight: 600; }
  button.secao-form[aria-expanded="true"]::before { transform: rotate(90deg); }
  button.secao-form:hover { color: var(--texto); }
  .nota-form { grid-column: 1 / -1; margin: 0; padding: var(--esp-4) var(--esp-6); border-radius: 8px; background: var(--azul-f); color: var(--azul); font-size: var(--fs-md); }
  .dialogo-acoes { display: flex; justify-content: flex-end; gap: var(--esp-4); margin-top: var(--esp-8); }
  .erro { color: var(--vermelho); background: var(--vermelho-f); padding: var(--esp-4) var(--esp-5); border-radius: 8px; }
  .confirmacao { width: min(460px, calc(100% - 24px)); }
  .conf-texto { white-space: pre-line; }

  .acoes-ficha { display: flex; gap: var(--esp-4); flex-wrap: wrap; align-items: center; }
  .codigo-isgh { font-weight: 700; color: var(--verde); }

  .alertas { background: var(--ambar-f); border-color: var(--ambar-borda); }
  .alertas.alta { background: var(--vermelho-f); border-color: var(--vermelho-borda); } /* com alerta alto a caixa é de risco, não de "falta algo" */
  .alertas li { display: flex; justify-content: space-between; gap: var(--esp-4); align-items: center; padding: var(--esp-2) 0; }
  .alertas li.alta { color: var(--vermelho); font-weight: 600; }
  .alertas .btn { color: var(--texto); font-weight: 400; }
  .alertas ul { list-style: none; margin: var(--esp-2) 0 0; padding: 0; }
  .painel.largo { width: min(1100px, 100%); }
  .indicadores-topo { display: flex; gap: var(--esp-4); align-items: center; flex-wrap: wrap; }
  .indicadores-topo input { padding: var(--esp-3) var(--esp-5); border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--campo-fundo); color: var(--texto); }
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--esp-5); }
  .tile { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-5) var(--esp-6); }
  .tile .rot { font-size: var(--fs-md); color: var(--suave); }
  .tile .valor { font-size: var(--fs-kpi); font-weight: 700; font-variant-numeric: tabular-nums; margin: var(--esp-1) 0; }
  .tile .meta { font-size: var(--fs-sm); color: var(--suave); }
  .tile.bom .valor { color: var(--verde); } .tile.ruim .valor { color: var(--vermelho); }
  table.tab { width: 100%; border-collapse: collapse; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
  table.tab th, table.tab td { text-align: left; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--borda); }
  .tab-rolagem { overflow-x: auto; }
  table.tab th { font-size: var(--fs-sm); color: var(--suave); font-weight: 600; }
  table.tab td.n, table.tab th.n { text-align: right; }
  .barra { display: inline-block; height: 8px; background: var(--primaria); border-radius: 4px; vertical-align: middle; margin-right: var(--esp-3); }
  .fca-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--esp-5) var(--esp-7); }
  .fca-grade .largo { grid-column: 1 / -1; }
  .fca-grade textarea { min-height: 110px; }
  .fca-grade #fcaFato { min-height: 200px; }


  /* Estilo_Telas.html — camada 3 de 5 — telas: quadro × ronda, indicadores, conferência da dispensação, evolução, configurações, visão do infectologista.
     As 5 camadas entram nesta ordem (Index.html e Infecto.html): a ordem decide qual regra vale. */
  /* ---------- quadro × ronda do dia */
  .visoes { display: inline-flex; padding: 3px; gap: var(--esp-1); background: var(--hover); border-radius: 10px; }
  .visoes button { border: none; background: transparent; padding: var(--esp-3) var(--esp-6); min-height: 32px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--suave);
                   display: inline-flex; gap: var(--esp-3); align-items: center; white-space: nowrap; }
  .visoes button:hover { color: var(--texto); }
  .visoes button[aria-pressed="true"] { background: var(--superficie); color: var(--primaria); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  /* pílula com o número: neutra em Pacientes; âmbar enquanto falta revisar; verde (✓) quando zera */
  .visoes .qtd { display: inline-block; min-width: 20px; padding: 0 var(--esp-3); border-radius: 999px; font-size: var(--fs-sm); font-weight: 700;
                 text-align: center; line-height: 20px; background: var(--borda); color: var(--texto); }
  .visoes .qtd.pendente { background: var(--ambar-f); color: var(--ambar); }
  .visoes .qtd.feito { background: var(--verde-f); color: var(--verde); }
  .selo.novo { background: var(--azul-f); color: var(--azul); font-weight: 700; }

  .ronda { padding: var(--esp-8); display: grid; gap: var(--esp-6); max-width: 1100px; margin-inline: auto; }

  kbd { font: 600 var(--fs-xs)/1 ui-monospace, Menlo, Consolas, monospace; padding: 2px 5px; border: 1px solid var(--borda-campo); border-bottom-width: 2px; border-radius: 4px; background: var(--superficie); color: var(--texto); }
  @media (pointer: coarse) { .dica-teclado { display: none; } } /* sem teclado físico, a dica não serve */
  .menu-flutuante { position: fixed; z-index: 30; min-width: 240px; max-height: calc(100vh - 16px); overflow: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
                    box-shadow: var(--sombra-md); padding: var(--esp-3); display: grid; }
  .menu-flutuante [role=menuitem] { border: none; background: none; text-align: left; padding: var(--esp-4) var(--esp-5); border-radius: 6px; cursor: pointer; display: grid; font-weight: 600; color: var(--texto); }
  .menu-flutuante [role=menuitem]:hover, .menu-flutuante [role=menuitem]:focus-visible { background: var(--hover); }
  .menu-flutuante [role=menuitem] .sub { font-weight: 400; color: var(--suave); }
  .menu-flutuante [role=menuitem].perigo { color: var(--vermelho); }
  .menu-flutuante [role=menuitem].perigo:hover, .menu-flutuante [role=menuitem].perigo:focus-visible { background: var(--vermelho-f); }
  .menu-conta { padding: var(--esp-3) var(--esp-5) var(--esp-4); margin-bottom: var(--esp-2); border-bottom: 1px solid var(--borda); font-size: var(--fs-sm); color: var(--suave); overflow-wrap: anywhere; }
  .menu-conta strong { color: var(--texto); font-weight: 600; }
  .lista-aceites { grid-column: 1 / -1; display: grid; gap: var(--esp-4); max-height: 52vh; overflow: auto; }
  .aceite-linha { border: 1px solid var(--borda); border-radius: 8px; padding: var(--esp-4) var(--esp-6) var(--esp-5); margin: 0; }
  .aceite-linha legend { padding: 0 var(--esp-2); }
  .aceite-linha legend .sub { display: block; }
  /* escolha curta: opções lado a lado, 1 toque (radio de verdade por baixo: setas e leitor de tela funcionam) */
  .segmentado { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-1); border-radius: 8px; }
  .segmentado label { position: relative; display: inline-flex; align-items: center; padding: var(--esp-3) var(--esp-7); min-height: 36px; cursor: pointer;
                      border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--campo-fundo); color: var(--texto); font-size: var(--fs-base); }
  .segmentado label:hover { background: var(--hover); }
  .segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .campo .segmentado label { font-size: var(--fs-base); font-weight: 400; color: var(--texto); }
  .segmentado label:has(input:checked), .campo .segmentado label:has(input:checked) { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); font-weight: 600; }
  .segmentado label:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
  .segmentado[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--vermelho); border-color: transparent !important; }
  .aceite-linha .segmentado { margin-top: var(--esp-2); }
  /* indicadores: barra curta com a marca da meta; ⓘ abre a explicação do termo; índice fixo das seções */
  .barra-meta { position: relative; height: 6px; margin: var(--esp-3) 0 var(--esp-2); border-radius: 3px; background: var(--barra-fundo); }
  .barra-meta .bm-valor { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--verde); }
  .barra-meta.fora .bm-valor { background: var(--vermelho); }
  .barra-meta .bm-meta { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--texto); }
  .st-meta { font-weight: 700; }
  .tile.bom .st-meta { color: var(--verde); } .tile.ruim .st-meta { color: var(--vermelho); }
  .delta.melhorou { color: var(--verde); font-weight: 600; } .delta.piorou { color: var(--vermelho); font-weight: 600; }
  .tile .rot { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
  .dica { display: inline; }
  .dica > summary { display: inline-flex; list-style: none; cursor: pointer; color: var(--suave); border-radius: 50%; padding: 2px; vertical-align: middle; }
  .dica > summary::-webkit-details-marker { display: none; }
  .dica > summary .ic { margin: 0; }
  .dica[open] > summary { color: var(--primaria); }
  .tile { position: relative; }
  /* a explicação abre por cima do número (como um balão), sem empurrar os outros cartões */
  .dica > p { position: absolute; left: var(--esp-4); right: var(--esp-4); top: 34px; z-index: 3; margin: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--texto);
              background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: var(--esp-4) var(--esp-5);
              box-shadow: var(--sombra-md); }

  #ind-isgh:focus, #ind-uso:focus, #ind-tabelas:focus, #ind-fca:focus { outline: none; }
  #ind-isgh, #ind-uso, #ind-tabelas, #ind-fca { scroll-margin-top: 64px; min-width: 0; }
  #ind-uso, #ind-tabelas, #ind-fca { display: grid; gap: var(--esp-7); }
  .painel-corpo > *, #ind-uso > *, #ind-tabelas > *, #ind-fca > * { min-width: 0; } /* tabelas largas rolam dentro da própria caixa, não esticam o painel */

  /* muitas opções à vista (desfecho): grade de botões do mesmo tamanho, sem lista suspensa */
  .segmentado.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .segmentado.grade label { justify-content: center; text-align: center; min-height: 44px; }
  /* envio ao ISGH: cada paciente em duas linhas (quem · o que vai para a planilha) */
  .campo .check.check-rico { display: grid; grid-template-columns: auto 1fr; column-gap: var(--esp-4); align-items: start; padding: var(--esp-4) 0; border-bottom: 1px solid var(--borda); }
  .check-rico input { grid-column: 1; grid-row: span 2; margin-top: 3px; }
  .check-rico .carga-pac, .check-rico .carga-det { grid-column: 2; }
  .carga-det { color: var(--suave); font-size: var(--fs-sm); }
  .carga-pend { color: var(--ambar); }

  .lt-dia { position: absolute; top: 24px; width: clamp(4px, calc(100cqw / var(--dias, 20) * .7), 10px); aspect-ratio: 1; transform: translate(-50%, -50%);
            border-radius: 50%; background: var(--primaria); box-shadow: 0 0 0 1.5px var(--superficie); }
  .lt-dia.ok.fim { background: var(--outro); }
  .lt-dia.diferente { border-radius: 2px; background: var(--marca-atencao); width: clamp(5px, calc(100cqw / var(--dias, 20) * .8), 11px); }
  .lt-dia.sem-saida { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--vermelho), 0 0 0 1.5px var(--superficie); }
  .lt-dia.parou { background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--marca-neutra), 0 0 0 1.5px var(--superficie); }
  .lt-dia.parcial { background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--primaria), 0 0 0 1.5px var(--superficie); }
  .lt-dia.aguardando { background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--borda-campo), 0 0 0 1.5px var(--superficie); } /* sem dados ainda */
  .lt-dia.conferido { background: var(--primaria); box-shadow: inset 0 0 0 2px var(--superficie), 0 0 0 1.5px var(--primaria); } /* ok, com anel: conferido */
  .lt-dia.nao-tomou { aspect-ratio: auto; height: 3px; border-radius: 1px; background: var(--suave); } /* traço: dia sem dose */
  .lt-dia.retificado { border-radius: 2px; background: var(--superficie); box-shadow: inset 0 0 0 2px var(--primaria), 0 0 0 1.5px var(--superficie); }
  .lt-dia.neutro { background: var(--borda-campo); }

  /* ---------- indicadores: uso de antimicrobianos e tendências */
  .titulo-grupo { margin: 4px 0 -4px; font-size: var(--fs-base); display: flex; gap: var(--esp-4); align-items: baseline; }
  .tile .delta { white-space: nowrap; }
  table.tab td.pior { color: var(--vermelho); font-weight: 600; }
  .mini-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-7); }
  .mini-grafico { margin: 0; }
  .mini-grafico figcaption { font-size: var(--fs-sm); font-weight: 600; color: var(--suave); margin-bottom: var(--esp-2); }
  .mini-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
  .mg-grade { stroke: var(--borda); stroke-width: 1; }
  .mg-eixo { font-size: var(--fs-2xs); fill: var(--suave); font-variant-numeric: tabular-nums; }
  .mg-linha { fill: none; stroke: var(--primaria); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .mg-ponto { fill: var(--primaria); stroke: var(--superficie); stroke-width: 2; }
  .mg-valor { font-size: var(--fs-xs); font-weight: 700; fill: var(--texto); }
  .mg-alvo { fill: transparent; }
  .mg-alvo:hover { fill: rgba(15,110,106,.08); }

  /* ---------- conferência da dispensação */
  .conferencia { border-color: var(--ambar-borda); background: var(--ambar-f); }
  .conferencia h3 { align-items: center; }
  .conferencia > .sub { margin: 0 0 var(--esp-3); }
  .lista-conf { list-style: none; margin: 0; padding: 0; }
  .conf-item { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-3) var(--esp-6); align-items: start; padding: var(--esp-4) 0; border-top: 1px solid var(--borda); font-size: var(--fs-md); }
  .conf-item:first-child { border-top: none; }
  .conf-item.alta > div:first-child { font-weight: 600; }
  .conf-item .acoes { display: flex; gap: var(--esp-3); flex-wrap: wrap; justify-content: flex-end; }
  .conf-tipo { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ambar);
               background: var(--ambar-f); border: 1px solid var(--ambar-borda); border-radius: 4px; padding: 1px var(--esp-3); margin-right: var(--esp-3); }
  .conf-item.alta .conf-tipo { color: var(--vermelho); background: var(--vermelho-f); border-color: var(--vermelho-borda); }
  .conf-topo { display: flex; gap: var(--esp-6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .conf-topo p { margin: 0; flex: 1 1 420px; }
  .conf-paciente h3 .btn { flex: none; }

  @media (max-width: 640px) { .conf-item { grid-template-columns: 1fr; } .conf-item .acoes { justify-content: flex-start; } }
  /* conferidos: continuam à vista, como ok (sem ações) */
  .conferidos { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
  .conferidos ul { list-style: none; margin: var(--esp-2) 0 0; padding: 0; }
  .conferidos li { padding: var(--esp-2) 0; font-size: var(--fs-md); color: var(--suave); }
  .conferidos .conf-tipo { color: var(--suave); background: var(--hover); border-color: transparent; }
  /* consolidado por dia: saída do almox × posologia cadastrada */
  .consolidado { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
  .consolidado > summary { cursor: pointer; }
  .tabela-consolidado { width: 100%; border-collapse: collapse; margin-top: var(--esp-4); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .tabela-consolidado caption { text-align: left; font-weight: 700; padding-bottom: var(--esp-2); }
  .tabela-consolidado th { text-align: left; font-weight: 600; color: var(--suave); border-bottom: 1px solid var(--borda); padding: var(--esp-2) var(--esp-3); }
  .tabela-consolidado td { padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--hover); }
  .tabela-consolidado .lt-dia { position: static; display: inline-block; width: 9px; transform: none; vertical-align: middle; margin-right: var(--esp-2); }
  .tabela-consolidado tr.c-diferente td, .tabela-consolidado tr.c-sem-saida td { background: var(--ambar-f); color: var(--texto); font-weight: 600; }
  /* botão "Completar cadastro" ao lado de Estratégia: só existe quando falta algo */
  .btn.completar { border-color: var(--ambar-borda); background: var(--ambar-f); color: var(--ambar); font-weight: 600; display: inline-flex; align-items: center; gap: var(--esp-2); }
  .btn.completar:hover { background: var(--hover); }

  /* ---------- evolução para copiar e colar */
  .painel-topo-acoes { display: flex; gap: var(--esp-3); align-items: center; flex: none; }
  .painel-topo .painel-titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  /* celular estreito: o botão fica só com o ícone; o nome continua para o leitor de tela */
  @media (max-width: 640px) {
    .rotulo-evo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  .dialogo.largo { width: min(1040px, calc(100% - 24px)); }
  .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-md); line-height: 1.5; }
  .evo-grade { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--esp-8); }
  .evo-lado { display: grid; gap: var(--esp-5); align-content: start; }
  .evo-lado textarea { resize: vertical; }
  .evo-texto { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
  .evo-texto .linha-ajuda { align-items: center; }
  .evo-texto label { font-size: var(--fs-sm); font-weight: 600; color: var(--suave); }
  #evoTexto { width: 100%; min-height: 360px; padding: var(--esp-5) var(--esp-6); border: 1px solid var(--borda-campo); border-radius: 8px; resize: vertical; background: var(--campo-fundo); color: var(--texto); }

  .evo-editor { display: grid; grid-template-columns: 200px 1fr; gap: var(--esp-7); align-items: start; }
  .evo-modelos { display: grid; gap: var(--esp-2); position: sticky; top: 56px; }
  .evo-modelos button { text-align: left; border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; padding: var(--esp-4) var(--esp-5); cursor: pointer; font-weight: 600; }
  .evo-modelos button:hover { background: var(--hover); }
  .evo-modelos button[aria-pressed="true"] { border-color: var(--primaria); background: var(--primaria-f); color: var(--primaria); }
  .evo-modelos .evo-novo { border-style: dashed; color: var(--primaria); font-weight: 600; }
  .evo-edicao { display: grid; gap: var(--esp-5); min-width: 0; }
  .evo-edicao input, .evo-edicao textarea { width: 100%; }
  .evo-edicao textarea[readonly], .evo-edicao input[readonly] { background: var(--fundo); }
  #evoAvisos p { margin: 0; }
  .evo-variaveis { border: 1px solid var(--borda); border-radius: 8px; padding: var(--esp-4) var(--esp-6); background: var(--superficie); }
  .evo-variaveis summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); }
  .evo-variaveis .sub { margin: var(--esp-3) 0; }
  .evo-grupo { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); }
  .evo-grupo .opcoes-rapidas button { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); }
  .evo-previa { margin: 0; padding: var(--esp-6) var(--esp-7); background: var(--superficie); border: 1px dashed var(--borda-campo); border-radius: 8px;
                white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-md); line-height: 1.5; max-height: 420px; overflow: auto; }

  /* ---------- configurações (engrenagem) */
  .btn.icone { display: inline-flex; align-items: center; justify-content: center; padding: var(--esp-3); min-width: 38px; min-height: 38px; color: var(--suave); }
  .btn.icone:hover { color: var(--texto); }
  /* as abas ficam presas no topo enquanto a seção rola */
  .abas-config { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none;
                 position: sticky; top: -16px; z-index: 2; margin: -16px -16px 0; padding: var(--esp-2) var(--esp-8) 0; background: var(--fundo); }
  .abas-config [role=tab] { flex: none; border: none; background: none; padding: var(--esp-5) var(--esp-7); cursor: pointer; color: var(--suave); font-weight: 600;
                            border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; gap: var(--esp-3); align-items: center; }
  .abas-config [role=tab]:hover { color: var(--texto); background: var(--hover); }
  .abas-config [role=tab][aria-selected="true"] { color: var(--primaria); border-bottom-color: var(--primaria); }
  .ponto-alterado { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); }
  .secao-config { display: grid; gap: var(--esp-7); }
  .secao-config:focus { outline: none; }
  .nota-config { margin: 0; }
  .nota-config.info { background: var(--azul-f); color: var(--azul); padding: var(--esp-5) var(--esp-6); border-radius: 8px; font-size: var(--fs-md); }

  .grupo-regras h3 { margin-bottom: var(--esp-2); }
  .lista-regras { list-style: none; margin: 0; padding: 0; }
  .regra { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-1) var(--esp-8); padding: var(--esp-6) 0; border-top: 1px solid var(--borda); align-items: center; }
  .regra:first-child { border-top: none; }
  .regra .interruptor { grid-column: 1; }
  .regra .regra-limite { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--esp-3); align-items: center; justify-self: end; }
  .regra .regra-desc { grid-column: 1; padding-left: 50px; }
  .regra .erro-campo { grid-column: 1 / -1; padding-left: 50px; }
  .regra.desligada .regra-nome, .regra.desligada .regra-desc { color: var(--suave); }
  .regra.alterada { background: var(--ambar-f); border-radius: 6px; }
  .regra-limite input { width: 72px; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borda-campo); border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; }
  .regra-limite input:disabled { background: var(--fundo); color: var(--suave); }
  .regra-limite .sub { max-width: 110px; }
  .regra-nome { font-weight: 600; }
  .regra-id { font-size: var(--fs-xs); font-weight: 600; color: var(--suave); background: var(--outro-f); border-radius: 4px; padding: 0 5px; margin-left: var(--esp-2); }
  /* interruptor: checkbox de verdade (teclado e leitor de tela), com aparência de chave */
  .interruptor { display: flex; gap: var(--esp-5); align-items: center; cursor: pointer; position: relative; }
  .interruptor input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }
  .interruptor .trilho { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--borda-campo); position: relative; transition: background .15s; }
  .interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--superficie);
                                box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
  .interruptor input:checked + .trilho { background: var(--primaria); }
  .interruptor input:checked + .trilho::after { transform: translateX(16px); }
  .interruptor input:focus-visible + .trilho { outline: 3px solid var(--foco); outline-offset: 2px; }
  .interruptor input:disabled, .interruptor input:disabled ~ * { cursor: not-allowed; }
  .interruptor input:disabled + .trilho { background: var(--borda); }
  .interruptor input:disabled:checked + .trilho { background: var(--primaria-f); }
  .barra-salvar { position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: var(--esp-6) var(--esp-8); background: var(--superficie); border-top: 1px solid var(--borda);
                  display: flex; gap: var(--esp-4); align-items: center; justify-content: flex-end; box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
  .barra-salvar .sub { margin-right: auto; }
  .estado-importacao h3 { justify-content: flex-start; font-size: var(--fs-xl); }
  .estado-importacao .bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
  .estado-importacao.atrasada { border-color: var(--vermelho-borda); background: var(--vermelho-f); }
  .estado-importacao.atrasada .bolinha { background: var(--vermelho); }
  .estado-importacao.desligada { background: var(--outro-f); }
  .estado-importacao .acoes-ficha { margin-top: var(--esp-6); }
  .lista-simples { margin: var(--esp-2) 0 0; padding-left: 18px; font-size: var(--fs-md); }
  .lista-status { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }
  .lista-status .selo { margin: 0 var(--esp-3) 0 0; }
  .qtd-simples { font-size: var(--fs-sm); font-weight: 400; color: var(--suave); margin-right: auto; }
  table.tab tr.inativo td { color: var(--suave); }
  .situacao-saidas { border: 1px solid var(--borda); background: var(--verde-f); color: var(--verde); border-radius: 999px; padding: 5px var(--esp-6); font-size: var(--fs-sm); cursor: pointer; }
  .situacao-saidas.atrasada { background: var(--vermelho-f); color: var(--vermelho); border-color: var(--vermelho-borda); }
  /* o aviso fica sempre no DOM (as regiões ao vivo precisam existir antes do texto); vazio, some da tela */
  .aviso { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--aviso-fundo); color: var(--aviso-texto);
           padding: var(--esp-5) var(--esp-8); border-radius: 8px; z-index: 50; max-width: calc(100% - 32px); display: flex; gap: var(--esp-6); align-items: center; box-shadow: var(--sombra-lg); }
  .aviso:not(.visivel) { opacity: 0; pointer-events: none; transform: translate(-50%, 150%); }
  .aviso.erro-aviso { background: var(--vermelho); color: var(--vermelho-texto); }
  .aviso-fechar { border: 1px solid rgba(255,255,255,.5); background: transparent; color: var(--aviso-texto); border-radius: 6px; min-width: 32px; min-height: 32px; cursor: pointer; }
  .aviso-fechar:hover { background: rgba(255,255,255,.15); }
  .aviso-acao { border: none; background: transparent; color: var(--aviso-acao); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: var(--fs-md);
                padding: var(--esp-3) var(--esp-4); min-height: 32px; border-radius: 6px; cursor: pointer; }
  .aviso-acao:hover { background: rgba(255,255,255,.12); }

  /* ---------- quadro do farmacêutico: comentários do infecto */
  .selo.infecto { background: var(--azul-f); color: var(--azul); font-weight: 600; }

  /* ---------- visão do infectologista */
  .marca-sub { font-weight: 500; font-size: var(--fs-md); color: var(--suave); margin-left: var(--esp-2); }

  /* números que filtram: botão com cara de cartão; ligado = borda da cor primária */
  .filtro-tile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
  .filtro-tile:hover { border-color: var(--primaria); }
  .filtro-tile[aria-pressed="true"] { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); background: var(--primaria-f); }
  .cards-infecto { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--esp-5); padding: var(--esp-8); align-items: start; }
  .vazio-infecto { grid-column: 1 / -1; color: var(--suave); padding: 24px; text-align: center; border: 1px dashed var(--borda); border-radius: var(--raio); }

  /* card: o mesmo .cartao do quadro do farmacêutico; aqui só o que muda na grade e no paciente com desfecho */
  .cards-infecto .cartao { margin: 0; min-width: 0; transition: border-color .15s, box-shadow .15s; }
  .cartao.card-infecto.p3 { border-left-color: var(--outro); background: var(--superficie); }
  .cartao.card-infecto.p3 .nome, .cartao.card-infecto.p3 .chips { color: var(--suave); }
  .ci-alergia { font-size: var(--fs-sm); color: var(--vermelho); font-weight: 600; }
  /* símbolo + valor no lugar de palavra repetida (Alergia, Infecto, cultura, estratégias, aceite, dispensação) */
  .sim { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; vertical-align: baseline; }
  .sim .ic { margin: 0; }
  .sim.pendente { color: var(--ambar); }

  /* ronda: estratégia sugerida pelo motivo, direto na linha (mesma cor de "informação/novo") */
  .btn.sugestao { border-color: var(--azul); color: var(--azul); font-weight: 600; }
  .btn.sugestao:hover { background: var(--azul-f); }
  .menu-flutuante .sub.sugerida { color: var(--azul); }

  .ci-mais { color: var(--vermelho); font-weight: 700; font-size: var(--fs-sm); }

  .popup-infecto { border: none; border-radius: 12px; padding: 0; width: min(860px, calc(100% - 24px)); max-height: calc(100vh - 32px);
                   box-shadow: var(--sombra-lg); background: var(--superficie); color: var(--texto); }
  .popup-infecto[open] { display: flex; flex-direction: column; }
  .popup-infecto::backdrop { background: rgba(16,24,32,.45); }
  .popup-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-6); padding: var(--esp-6) var(--esp-8);
                background: var(--superficie); border-bottom: 1px solid var(--borda); }
  .popup-acoes { display: flex; gap: var(--esp-3); align-items: center; }
  .popup-corpo { overflow: auto; padding: var(--esp-8); display: grid; gap: var(--esp-7); }
  /* popup: mesmas peças do painel do farmacêutico (pt-*, .ac, .cartao-aviso); aqui só os ajustes */
  .popup-topo .painel-titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .atencao-infecto { display: grid; gap: var(--esp-3); }
  .atencao-infecto .rot-secao { margin: 0; }
  .atencao-infecto .cartao-aviso { margin: 0; padding-top: var(--esp-3); padding-bottom: var(--esp-3); }
  .atencao-infecto .ca-txt { white-space: normal; }
  .popup-corpo .ac.encerrado { background: var(--fundo); border-color: var(--borda); }
  .popup-corpo .ac.encerrado .ac-nome { color: var(--suave); }
  /* antimicrobiano compacto (2 linhas): dose ao lado do nome; "Detalhes" no fim da 2ª linha e, aberto, em linha inteira */
  .popup-corpo .ac { gap: 2px; }
  .popup-corpo .ac-id { align-items: baseline; gap: 0 8px; }
  .popup-corpo .ac-id .ac-dose { font-size: var(--fs-sm); font-weight: 600; }
  .popup-corpo .ac-id .ac-dose.sem { font-weight: 400; color: var(--suave); font-style: italic; }
  .popup-corpo .ac-desde { font-size: var(--fs-sm); }
  .popup-corpo .ac-l3 { align-items: baseline; }
  .popup-corpo .ac-l3 > span:not(.ac-estr) + span:not(.ac-estr)::before { content: "·"; margin-right: var(--esp-4); color: var(--suave-2); }
  .popup-corpo .ac-l1 .ac-det-inf, .popup-corpo .ac-l3 .ac-det-inf { margin-left: auto; }
  .popup-corpo .ac-l1 .ac-det-inf { flex: none; }
  .popup-corpo .ac-l1 .ac-det-inf[open], .popup-corpo .ac-l3 .ac-det-inf[open] { flex-basis: 100%; margin: var(--esp-2) 0 0; color: var(--texto); font-size: var(--fs-md); }
  .popup-corpo .ac-comentar { color: var(--primaria); }
  .ac-det-inf > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--primaria); font-weight: 600; width: max-content; min-height: 24px; }
  .ac-det-inf[open] { display: grid; gap: var(--esp-5); border-top: 1px dashed var(--borda); padding-top: var(--esp-4); font-size: var(--fs-md); }
  .ac-det-inf[open] > summary { margin-bottom: calc(-1 * var(--esp-2)); }
  .lista-estr-inf { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: grid; gap: var(--esp-3); }
  .lista-estr-inf .selo { margin-left: var(--esp-2); }
  .dados-infecto { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-6) var(--esp-7); }
  .dados-infecto .largo { grid-column: 1 / -1; }
  .dados-infecto .destaque dd { color: var(--vermelho); font-weight: 600; }
  .atm.encerrado { background: var(--fundo); border-color: var(--borda); }

  .pe-coments { list-style: none; margin: 0 0 var(--esp-4); padding: 0; }
  .pe-corpo { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
  .pe-corpo strong { display: inline; }
  .pe-corpo .selo { align-self: flex-start; margin-left: 0; }
  .pe-obs { display: block; font-size: var(--fs-sm); color: var(--texto); background: var(--fundo); border-radius: 6px; padding: var(--esp-2) var(--esp-4); margin-top: var(--esp-2); }
  .selo.economia { background: var(--verde-f); color: var(--verde); }
  .pe-coments li { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-5); padding: var(--esp-4) 0; border-top: 1px solid var(--borda); font-size: var(--fs-md); }
  .pe-coments li:first-child { border-top: none; }
  .selo.coment-aberto { background: var(--azul-f); color: var(--azul); align-self: start; }
  .selo.coment-fechado { background: var(--verde-f); color: var(--verde); align-self: start; }
  .form-comentario { border: 2px solid var(--primaria); }
  .form-comentario textarea { resize: vertical; min-height: 76px; }
  .rotulo-atalho { font-size: var(--fs-sm); font-weight: 600; color: var(--suave); }
  .linha-ajuda { display: flex; justify-content: space-between; gap: var(--esp-4); }
  .erro-campo { color: var(--vermelho); font-size: var(--fs-md); }
  .erro-campo:empty { display: none; }
  [aria-invalid="true"] { border-color: var(--vermelho) !important; box-shadow: 0 0 0 1px var(--vermelho); }
  .sub { color: var(--suave); font-size: var(--fs-sm); }

  .aviso { transition: opacity .15s, transform .15s; }
  @media (prefers-reduced-motion: reduce) { .card-infecto, .aviso, .interruptor .trilho, .interruptor .trilho::after { transition: none; } .esqueleto { animation: none; } }


  /* ======================= painel de sincronização & mapeamento ======================= */
  .sinc-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 14px; margin-bottom: 12px; }
  .sinc-hero.ok { background: var(--verde-f); border: 1px solid var(--verde-borda); }
  .sinc-hero.atencao { background: var(--ambar-f); border: 1px solid var(--ambar-borda); }
  .sinc-hero-info { flex: 1; min-width: 250px; }
  .sinc-hero-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .sinc-hero-tit h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--texto); }
  .bolinha-status { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
  .bolinha-status.ok { background: var(--verde); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
  .bolinha-status.atencao { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
  .sinc-btn-sinc { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-height: 40px; padding: 0 18px; border-radius: 999px; }

  .grade-sinc { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
  .card-sinc { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sombra); transition: border-color var(--mov), box-shadow var(--mov); }
  .card-sinc:hover { border-color: var(--borda-hover); }
  .card-sinc.atrasada { border-left: 5px solid var(--vermelho); background: linear-gradient(to right, rgba(239, 68, 68, 0.04), var(--superficie)); }
  .card-sinc.em-dia { border-left: 5px solid var(--verde); }
  .card-sinc.desligada { border-left: 5px solid var(--suave-2); opacity: 0.75; }

  .sinc-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .sinc-card-tit { display: flex; align-items: center; gap: 10px; }
  .sinc-ico-caixa { width: 36px; height: 36px; border-radius: 10px; background: var(--superficie-2); display: grid; place-items: center; color: var(--primaria); border: 1px solid var(--borda); flex: none; }
  .card-sinc.atrasada .sinc-ico-caixa { color: var(--vermelho); background: var(--vermelho-f); border-color: var(--vermelho-borda); }
  .sinc-card-tit h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--texto); line-height: 1.25; }
  .sinc-origem { display: block; font-size: 11px; color: var(--suave-2); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }

  .selo-sinc { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
  .selo-sinc.em-dia { background: var(--verde-f); color: var(--verde); border: 1px solid var(--verde-borda); }
  .selo-sinc.atrasada { background: var(--vermelho-f); color: var(--vermelho); border: 1px solid var(--vermelho-borda); }
  .selo-sinc.desligada { background: var(--outro-f); color: var(--suave-2); border: 1px solid var(--borda); }

  .sinc-desc { margin: 0; font-size: 12px; color: var(--suave); line-height: 1.4; }
  .sinc-dados { display: grid; gap: 8px; font-size: 12px; border-top: 1px solid var(--linha); padding-top: 12px; margin-top: auto; }
  .sinc-linha-dado { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .sinc-rot { color: var(--suave-2); font-size: 11px; font-weight: 500; }
  .sinc-val { color: var(--texto); text-align: right; }
  .sinc-val.mono { font-family: var(--mono); font-size: 11px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sinc-arq { padding: 4px 8px; background: var(--superficie-2); border-radius: 6px; }
  .sinc-pend, .sinc-gaps { margin-top: 14px; }


  /* Estilo_Responsivo.html — camada 4 de 5 — impressão da ronda e os tamanhos de tela (tablet, celular, toque).
     As 5 camadas entram nesta ordem (Index.html e Infecto.html): a ordem decide qual regra vale. */
  /* ---------- impressão da ronda: folha A4 com caixinha por ATM para marcar à mão */
  @media print {
    body { background: var(--superficie); font-size: var(--fs-sm); }
    .topo, .painel, .veu, .aviso, .ronda-acoes, .check-ocultar, .ratm-acoes, .menu-flutuante, #quadro, .ronda-rodape, .barra-prog { display: none !important; }
    .ronda { display: block !important; padding: 0; max-width: none; }
    .ronda-topo { position: static; border: none; padding: 0 0 var(--esp-4); }
    .ronda-paciente { box-shadow: none; break-inside: avoid; margin-bottom: var(--esp-3); }
    .ratm { grid-template-columns: 28px 1fr; padding: var(--esp-2) var(--esp-4) var(--esp-2) var(--esp-2); background: none !important; }
    .rv-check input { width: 14px; height: 14px; }
    .ci-barra { display: none; }
  }

  /* o nome da conta é só informativo: cede espaço para o cabeçalho caber numa linha */
  @media (max-width: 1440px) { .topo .usuario { display: none; } }
  @media (max-width: 1100px) { .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* tablet (retrato e paisagem): cabeçalho em 2 linhas — navegação em cima, busca e ações embaixo; o que não cabe rola de lado */
  @media (min-width: 641px) and (max-width: 1100px) {
    .topo { gap: var(--esp-4) var(--esp-5); }
    .marca, .visoes, .filtros, #btnMais, #btnConfig, #btnAtualizar { order: 1; }
    #busca, #btnNovo, #situacaoSaidas { order: 2; }
    .filtros { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .filtros > *, .abas button { flex: none; }
    /* quebra de linha fixa: navegação e setores em cima, busca e ações embaixo */
    .topo::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
    #busca { flex: 1 1 280px; }
    .ronda { max-width: none; }
  }
  /* celular deitado / tela baixa: nada fica preso no topo (o cabeçalho tomaria metade da tela) */
  @media (max-height: 500px) {
    .topo, .ronda-topo { position: static; }
  }
  @media (max-width: 640px) {
    .quadro { grid-template-columns: 1fr; padding: var(--esp-6); gap: var(--esp-6); }
    .coluna { min-height: auto; }
    /* cabeçalho numa linha (marca · Quadro|Ronda · lupa · ⋯), grudado no topo; a faixa de setores some ao rolar para baixo
       e volta ao rolar para cima; a busca abre pela lupa; "+ Paciente" vira botão flutuante */
    .topo { position: sticky; padding: var(--esp-4) var(--esp-6); gap: var(--esp-4); }
    .topo.recolhido .filtros { display: none; }
    #btnBusca { display: inline-flex; order: 0; }
    #btnConfig { display: none; }
    .so-celular { display: grid !important; }
    body:not(.infecto) .topo:not(.busca-aberta) #busca { display: none; }
    body.infecto #busca { order: 3; flex-basis: 100%; }
    body.infecto #btnAtualizar { order: 0; margin-left: auto; }

    body[data-visao=ronda] #btnNovo { display: none; }
    #btnNovo { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 6; min-height: 52px; padding: 0 18px;
               border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
    #principal { padding-bottom: 84px; }
    body:not(.infecto) .aviso { bottom: calc(84px + env(safe-area-inset-bottom)); }
    .filtros { min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .filtros { flex: 1 1 200px; } #busca { flex: 1 1 200px; }
    .visoes, #btnMais { order: 0; } .visoes { margin-left: auto; }
    .visoes button { padding: var(--esp-3) var(--esp-5); }
    .filtros { order: 2; flex-basis: 100%; } #situacaoSaidas { order: 3; }
    .ronda { padding: var(--esp-6) var(--esp-8); }

    .ronda > * { min-width: 0; }

    .dados { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    /* janelas viram tela cheia, com os botões sempre à vista embaixo (a pequena de confirmação continua pequena) */
    .dialogo:not(.confirmacao), .dialogo.largo { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
    .dialogo:not(.confirmacao) form { min-height: 100%; display: flex; flex-direction: column; padding: var(--esp-7) var(--esp-8) 0; }
    .dialogo:not(.confirmacao) .dialogo-acoes { position: sticky; bottom: 0; margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      background: var(--superficie); border-top: 1px solid var(--borda); }
    .painel-topo { padding: var(--esp-5) var(--esp-6); gap: var(--esp-4); }
    .painel-corpo { padding: var(--esp-6); }

    .evo-grade, .evo-editor { grid-template-columns: 1fr; }
    .evo-modelos { position: static; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    #evoTexto { min-height: 260px; }

    .regra { grid-template-columns: 1fr; }
    .regra .regra-limite { grid-column: 1; grid-row: auto; justify-self: start; padding-left: 50px; }
    .filtros > *, .abas button { flex: none; }

    .usuario { display: none; }
    .grade-form { grid-template-columns: 1fr; }

    .cards-infecto { grid-template-columns: minmax(0, 1fr); padding: var(--esp-6); }
    .popup-infecto { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
    .popup-corpo { padding: var(--esp-6); }
    .popup-topo { padding: var(--esp-5) var(--esp-6); }
  }
  /* celular estreito (≤ 400px): a 1ª linha do topo só cabe sem o nome do hospital e com menos folga */
  @media (max-width: 400px) {
    body:not(.infecto) .marca span { display: none; }
    body:not(.infecto) .topo { gap: var(--esp-3); }
    .visoes button { padding: var(--esp-3) var(--esp-4); }
  }
  /* telas de toque: alvo mínimo de 44px */
  @media (pointer: coarse) {
    .btn, .btn.pequeno, .abas button, .opcoes-rapidas button, .situacao-saidas, .aviso-fechar, .aviso-acao, .abas-config [role=tab],
    .visoes button, #busca, .rp-nome, .menu-flutuante [role=menuitem], .lt-rotulo, .ci-tag.conf { min-height: 44px; }
    .btn.icone, .btn.icone.pequeno { min-width: 44px; min-height: 44px; }
    .opcoes-rapidas button, .aviso-fechar, .btn.fantasma { min-width: 44px; }
    input[type=checkbox] { width: 22px; height: 22px; }
    /* 16px em campos: o iPhone não dá zoom ao tocar; toque rápido sem esperar o duplo toque */
    input, select, textarea, #busca { font-size: var(--fs-xl); }
    button, a, label, input, select, textarea, .cartao, .card-infecto { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    .btn:active, .visoes button:active, .abas button:active, .rp-nome:active, .cartao:active, .card-infecto:active,
    .menu-flutuante [role=menuitem]:active, .lt-linha button:active { background: var(--hover); }
    .btn.primario:active { background: var(--primaria-hover); }
    /* caixinha "revisado hoje": a coluna inteira é o alvo, e a caixa é maior */
    .ratm { grid-template-columns: 56px 1fr auto; padding-left: 0; }
    .rv-check { align-self: stretch; min-height: 48px; align-items: flex-start; padding-top: 0; }
    .rv-check input { width: 30px; height: 30px; }
    .rp-nome { display: inline-flex; align-items: center; }
    /* títulos que abrem/fecham (Dispensação, Encerrados, Linha do tempo, Paciente, Legenda) e o Recolher da ronda */
    details > summary, details.dobra > summary, .ratm-fechar { min-height: 44px; align-items: center; }

    .segmentado label, button.secao-form { min-height: 44px; }
    .interruptor .trilho { width: 48px; height: 28px; border-radius: 14px; } .interruptor input { width: 48px; height: 28px; }
    .interruptor .trilho::after { width: 22px; height: 22px; } .interruptor input:checked + .trilho::after { transform: translateX(20px); }
    .regra .regra-desc, .regra .erro-campo { padding-left: 58px; }
  }


  /* Estilo_Painel.html — camada 5 de 5 — painel do paciente (versão simplificada) e cartão do quadro; vem por último porque sobrepõe regras das camadas anteriores.
     As 5 camadas entram nesta ordem (Index.html e Infecto.html): a ordem decide qual regra vale. */
  /* ---------- painel do paciente (versão simplificada): topo, "Precisa de você", card do antimicrobiano, rodapé ---------- */
  /* tela larga: o painel fica ao lado do quadro (sem véu); o quadro encolhe para os cartões continuarem clicáveis */
  @media (min-width: 1100px) {
    body.com-painel .quadro { margin-right: min(760px, 100%); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    body.com-painel .ronda { margin-right: min(760px, 100%); }
    body.com-painel .painel { box-shadow: -2px 0 16px rgba(0,0,0,.12); border-left: 1px solid var(--borda); }
  }
  .painel-corpo { flex: 1 1 auto; }
  .pt-local { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-5); font-size: var(--fs-md); font-weight: 700; color: var(--texto); }
  .pt-pront { font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; padding-left: var(--esp-5); border-left: 1px solid var(--borda); }
  .pt-nome { display: block; font-size: var(--fs-3xl); line-height: 1.25; }
  .pt-alergia { display: inline-flex; align-items: center; gap: var(--esp-2); margin: var(--esp-2) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--vermelho);
                background: var(--vermelho-f); border-radius: 999px; padding: 1px var(--esp-5); }
  .pt-alergia .ic { margin: 0; }
  .nav-paciente { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 8px; }
  .nav-paciente .btn.icone { min-width: 36px; min-height: 36px; padding: var(--esp-2); }
  .nav-posicao { font-size: var(--fs-sm); color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 var(--esp-1); }
  .painel-rodape { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; padding: var(--esp-5) var(--esp-8); background: var(--superficie); border-top: 1px solid var(--borda); flex: none; }
  .painel-rodape .rp-espaco { flex: 1; }
  .painel-rodape .rp-fim { font-size: var(--fs-md); }
  .painel-rodape .btn .ic { margin-right: var(--esp-2); }
  .rot-secao { margin: 0 0 var(--esp-4); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 700; display: flex; gap: var(--esp-3); align-items: center; }
  .rot-secao .qtd { background: var(--ambar-f); color: var(--ambar); border-radius: 999px; padding: 0 var(--esp-3); letter-spacing: 0; min-width: 20px; text-align: center; }
  .btn.suave { background: var(--primaria-f); border-color: transparent; color: var(--primaria); font-weight: 600; }
  .btn.suave:hover { background: var(--primaria); color: var(--primaria-texto); }
  .tudo-certo { display: flex; gap: var(--esp-4); align-items: center; margin: 0; padding: var(--esp-5) var(--esp-6); border-radius: var(--raio); background: var(--verde-f); color: var(--verde); font-weight: 600; }
  .tudo-certo .ic { margin: 0; }
  .t-ok { color: var(--verde); display: inline-flex; align-items: center; gap: 3px; }
  .t-ok .ic { margin: 0; }
  .t-alerta { color: var(--ambar); font-weight: 600; }
  .falta-txt { color: var(--ambar); font-weight: 600; }
  .falta-linha { display: flex; gap: var(--esp-4); align-items: center; flex-wrap: wrap; margin: var(--esp-4) 0; font-size: var(--fs-md); color: var(--ambar);
                 background: var(--ambar-f); border-radius: 8px; padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-5); }
  .falta-linha > span { flex: 1; min-width: 12ch; }
  .falta-linha .ic { margin: 0; }
  .acoes-secao { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; margin-top: var(--esp-5); }
  .dados-grupo + .dados-grupo { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
  .dados-grupo .rot-secao { margin-bottom: var(--esp-3); }
  .coment-fechados ul { margin: var(--esp-2) 0 0; padding-left: 18px; font-size: var(--fs-md); }

  /* "Precisa de você": uma linha fina por pendência, confirmar à direita */
  .pend-lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
  .pend { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-4); padding: var(--esp-2) var(--esp-3) var(--esp-2) 0; border-top: 1px solid var(--borda); position: relative; }
  .pend:first-child { border-top: 0; }
  .pend::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marca-neutra); }
  .pend.infecto::before { background: var(--azul); } .pend.aceite::before, .pend.conf::before, .pend.cad::before, .pend.alerta::before { background: var(--marca-atencao); }
  .pend.risco::before { background: var(--vermelho); }
  .pend-txt { display: flex; align-items: center; gap: var(--esp-4); min-width: 0; min-height: 40px; border: 0; background: transparent; text-align: left; cursor: pointer; padding: 0 var(--esp-2) 0 var(--esp-6); border-radius: 6px; font: inherit; color: inherit; }
  .pend-txt:hover { background: var(--hover); }
  .pend-ico { display: grid; place-items: center; flex: none; }
  .pend-ico .ic { margin: 0; }
  .pend.infecto .pend-ico { color: var(--azul); } .pend.aceite .pend-ico, .pend.conf .pend-ico, .pend.cad .pend-ico, .pend.alerta .pend-ico { color: var(--ambar); } .pend.risco .pend-ico { color: var(--vermelho); }
  .pend-txt b { flex: none; font-size: var(--fs-md); }
  .pend-resumo { flex: 1; min-width: 0; overflow-wrap: anywhere; /* texto clínico: quebra a linha, nunca corta */ font-size: var(--fs-md); color: var(--suave); }
  .pend-seta { display: grid; color: var(--suave); flex: none; transition: transform .15s; }
  .pend-seta .ic { margin: 0; }
  .pend.aberta .pend-seta { transform: rotate(90deg); }
  .pend-ok .btn { font-weight: 600; background: var(--primaria-f); color: var(--primaria); border-color: transparent; }
  .pend-ok .btn:hover { background: var(--primaria); color: var(--primaria-texto); }
  .pend-det { grid-column: 1 / -1; padding: 0 var(--esp-4) var(--esp-4) 35px; font-size: var(--fs-md); display: grid; gap: var(--esp-2); }
  .pend-det p { margin: 0; }
  .pend-outras { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
  .pend-det .lista-conf { margin-top: var(--esp-2); }

  /* card do antimicrobiano */
  .ac { position: relative; display: grid; gap: var(--esp-4); padding: var(--esp-5) var(--esp-6) var(--esp-5) var(--esp-7); border-left: 1px solid var(--borda); }
  .ac::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--outro); }
  .ac.c-reserva::before { background: var(--reserva); } .ac.c-estrategico::before { background: var(--estrategico); }
  .ac-l1 { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; min-width: 0; }
  .ac-id { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--esp-4); font-size: var(--fs-base); }
  .ac-nome { font-size: var(--fs-lg); font-weight: 700; }

  .ac-dir { display: inline-flex; align-items: center; gap: var(--esp-3); flex: none; }

  .btn-mini { color: var(--primaria); font-weight: 600; background: transparent; }
  .btn-mini .ic { margin-right: var(--esp-2); }
  .btn-mini:hover { background: var(--primaria-f); border-color: transparent; }
  .ac-abrir .ic { transition: transform .15s; }
  .ac-abrir[aria-expanded="true"] .ic { transform: rotate(90deg); }
  .ac-l2 { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: baseline; margin-top: calc(-1 * var(--esp-3)); }
  .ac-dose { font-size: var(--fs-md); font-weight: 600; }
  .ac-l2 .sub, .ac-l3 { font-size: var(--fs-sm); color: var(--suave); }
  .ac-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-6); min-height: 20px; }
  .ac-estr { border: 0; font: inherit; font-size: var(--fs-sm); border-radius: 999px; padding: 1px var(--esp-4); background: var(--outro-f); color: var(--outro); cursor: pointer; }
  span.ac-estr { cursor: default; }
  .ac-estr.PENDENTE { background: var(--ambar-f); color: var(--ambar); }
  .ac-estr.SIM { background: var(--verde-f); color: var(--verde); }
  button.ac-estr:hover { text-decoration: underline; }
  .chip-falta { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ambar); background: var(--ambar-f); border-radius: 999px; padding: 1px var(--esp-4);
                display: inline-flex; gap: var(--esp-2); align-items: center; }
  .chip-falta .ic { margin: 0; }
  .chip-falta:hover { text-decoration: underline; }

  /* grade de dias (aprazamento): um quadradinho por dia */
  /* antimicrobiano que veio da importação: só o ícone, discreto (o texto fica no title e no leitor de tela) */
  .selo-importado { display: inline-flex; align-items: center; margin-left: var(--esp-2); color: var(--suave); cursor: help; }
  .gd-rolagem { overflow-x: auto; padding-bottom: 2px; }
  .gd-grade { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(40px, 1fr); gap: 3px; min-width: min-content; padding-top: 14px; }
  .gd { position: relative; min-height: 44px; border: 0; padding: 0; border-radius: 6px; background: var(--fundo); cursor: pointer; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; font: inherit; color: inherit; }
  button.gd:hover { background: var(--hover); }
  .gd-p { width: 10px; height: 10px; border-radius: 50%; background: var(--marca-neutra); }
  .gd-n { font-size: var(--fs-2xs); line-height: 1; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
  .gd-d { font-size: 10px; line-height: 1; padding: 2px 0 3px; color: var(--suave); font-variant-numeric: tabular-nums; }
  .gd.alem .gd-d { color: var(--vermelho); }
  .gd.certo .gd-p { background: var(--verde); }
  .gd.conferir { background: var(--ambar-f); }
  /* "a conferir": anel âmbar pequeno com "!" — o fundo âmbar do dia já chama a atenção, o ícone não precisa gritar */
  .gd.conferir .gd-p { box-sizing: border-box; width: 12px; height: 12px; background: var(--superficie); border: 1.5px solid var(--marca-atencao); display: grid; place-items: center; }
  .gd.conferir .gd-p::after { content: "!"; font-size: 8px; font-weight: 800; color: var(--ambar); line-height: 1; }
  .gd.espera .gd-p { background: transparent; border: 2px dashed var(--marca-neutra); }
  .gd.futuro { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--borda); }
  .gd.futuro .gd-p { background: transparent; }
  .gd.alem:not(.futuro) { background: var(--vermelho-f); }
  .gd.alem .gd-n { color: var(--vermelho); font-weight: 700; }
  .gd.hoje { box-shadow: inset 0 0 0 2px var(--texto); }
  .gd.fimprev::after { content: ""; position: absolute; right: -3px; top: -12px; bottom: 0; border-right: 2px solid var(--texto); }
  .gd.sel { box-shadow: inset 0 0 0 2px var(--primaria); }
  .gd-mk { position: absolute; top: -14px; font-size: var(--fs-xs); line-height: 1; }
  .gd-mk.dose { color: var(--azul); } .gd-mk.SIM { color: var(--verde); } .gd-mk.PENDENTE { color: var(--ambar); } .gd-mk.NÃO { color: var(--vermelho); }
  .gd-mk + .gd-mk { top: -26px; }
  .ac-dia-det { border-radius: 8px; padding: var(--esp-4) var(--esp-5); background: var(--fundo); font-size: var(--fs-md); display: grid; gap: var(--esp-3); }
  .ac-dia-det.conferir { background: var(--ambar-f); }
  .add-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); }
  .ac-dia-det .lista-conf .conf-item { border-top-color: rgba(0,0,0,.08); }
  .ret-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-3); align-items: center; font-size: var(--fs-md); }
  .ac-det { border-top: 1px dashed var(--borda); padding-top: var(--esp-5); display: grid; gap: var(--esp-5); font-size: var(--fs-md); }
  .ac-sec ul { margin: var(--esp-2) 0 0; padding-left: 18px; }
  .rolagem-x { overflow-x: auto; }
  @media (prefers-reduced-motion: reduce) { .pend-seta, .ac-abrir .ic { transition: none; } }

  /* ---------- cartão do quadro: mesma organização do topo do painel ---------- */
  .cartao { padding: 5px var(--esp-4) 5px; }
  .cartao .linha1 { align-items: baseline; flex-wrap: wrap; gap: 0 var(--esp-3); }
  .cartao .leito { font-size: var(--fs-md); font-weight: 700; }

  .cartao .nome { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; margin-top: 1px; overflow-wrap: anywhere; }
  .cartao .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-3); font-size: var(--fs-xs); margin-top: 1px; }

  .cartao .chips { margin-top: var(--esp-2); gap: var(--esp-1); }

  .cartao-aviso { position: relative; display: flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-2); padding: 2px var(--esp-3);
                  border-radius: 5px; background: var(--ambar-f); border: 1px solid var(--ambar-borda); font-size: var(--fs-xs); min-width: 0; }
  .cartao-aviso .ic { margin: 0; flex: none; color: var(--ambar); }
  .cartao-aviso b { flex: none; font-size: var(--fs-xs); }
  .cartao-aviso.risco { background: var(--vermelho-f); border-color: var(--vermelho-borda); } .cartao-aviso.risco .ic { color: var(--vermelho); }
  .cartao-aviso.infecto { background: var(--azul-f); border-color: var(--azul-borda); } .cartao-aviso.infecto .ic { color: var(--azul); }
  .ca-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--suave); font-size: var(--fs-xs); }
  .cartao-aviso.risco .ca-txt { color: var(--vermelho); }

  /* sugestões de 1 toque no formulário (dose pela dispensação): cartõezinhos baixos */
  .sug-lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
  .sug-cartao { display: grid; gap: 0; text-align: left; border: 1px solid var(--borda-campo); background: var(--superficie); border-radius: 8px; padding: var(--esp-2) var(--esp-5);
                min-height: 40px; cursor: pointer; font: inherit; color: inherit; }
  .sug-cartao b { font-size: var(--fs-md); }
  .sug-cartao span { font-size: var(--fs-xs); color: var(--suave); }
  .sug-cartao:hover { background: var(--hover); }
  .sug-cartao[aria-pressed="true"] { border-color: var(--primaria); background: var(--primaria-f); box-shadow: inset 0 0 0 1px var(--primaria); }
  .sug-cartao[aria-pressed="true"] b::before { content: "✓ "; color: var(--primaria); }
  .sug-cartao.outra { border-style: dashed; }
  .sug-cartao.outra b { color: var(--primaria); }
  .sug-escolhida { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: var(--esp-3) 0 0; font-size: var(--fs-md); color: var(--verde); }
  .sug-escolhida .ic { margin: 0; }
  .sug-escolhida b { color: var(--texto); }
  .dialogo .link { border: 0; background: none; padding: 0 2px; color: var(--primaria); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--fs-md); }
  /* lista longa (Todos, 13 setores, 100+ cartões): o navegador pula o layout e a pintura dos cartões fora da tela até
     a rolagem chegar perto deles — o conteúdo continua no HTML (busca do navegador, leitor de tela). A altura reservada
     enquanto isso ("auto" lembra a real depois da 1ª vez) evita que a barra de rolagem pule. */
  /* (sem content-visibility nos cartões: com dezenas de cartões não há ganho, e o Chrome às vezes não os desenhava ao voltar do Revisar) */


  /* Estilo_Quadro.html — camada 6 (novo visual, PLANO_VISUAL.md). Vale com body.nv (farmácia e Infecto), por cima das
     5 camadas. Regras do novo visual:
     - cor só onde há sinal, sempre com ícone + texto; fundo e estrutura neutros;
     - camadas: página → raia (fundo mais escuro, sem borda) → cartão (o único com contorno);
     - raios: cartões e blocos 14px · internos 10px · botões, filtros e selos em pílula;
     - nenhum texto clínico cortado com "…" (quebra linha); selo e ação curta no canto ou na linha do dado;
     - a página não rola: rola cada área, com barra fina que só aparece ao passar o mouse. */

  /* ======================= estrutura (tokens centralizados em Estilo.html) ======================= */
  body.nv {
     /* a ronda rola dentro da própria área: a barra de progresso gruda no topo dela */
    font-family: var(--fonte); font-size: 13px; line-height: 1.5;
    height: 100vh; overflow: hidden; background: var(--fundo);
  }

  @media (prefers-reduced-motion: reduce) { body.nv { --mov: 0ms; } }
  .nv h1, .nv h2, .nv h3 { text-wrap: balance; }
  .nv button, .nv input, .nv select { touch-action: manipulation; }
  /* um conjunto de variáveis por sinal (ícones, filtros, raias) */
  .nv .s-risco { --c: var(--vermelho); --ic: var(--vermelho); --f: var(--vermelho-f); --b: var(--vermelho-borda); }
  .nv .s-atencao { --c: var(--ambar); --ic: var(--marca-atencao); --f: var(--ambar-f); --b: var(--ambar-borda); }
  .nv .s-info { --c: var(--azul); --ic: var(--azul); --f: var(--azul-f); --b: var(--azul-borda); }
  .nv .s-ok { --c: var(--verde); --ic: var(--verde); --f: var(--verde-f); --b: var(--verde-borda); }
  .nv .s-neutro { --c: var(--suave); --ic: var(--suave-2); --f: var(--superficie-2); --b: var(--borda); }

  /* ======================= casca: barra lateral + área ======================= */
  .nv .casca { display: grid; grid-template-columns: var(--trilho) minmax(0, 1fr); height: 100vh; }
  .nv nav.trilho { position: relative; height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--borda) transparent;
                      background: var(--superficie); border-right: 1px solid var(--borda); z-index: 6; }
  .nv .marca-linha { display: flex; align-items: center; gap: 10px; padding: 0 2px 8px; }
  /* marca do ecossistema Integra: o ícone do PGA no ladrilho da frente (body data-frente="FC"), o mesmo do cartão no portal */
  .nv .marca-ic { width: 36px; height: 36px; flex: none; border-radius: var(--r-bloco); display: grid; place-items: center; background: var(--frente-f); color: var(--frente); }
  .nv .marca-texto { display: grid; gap: 1px; min-width: 0; }
  .nv .marca-ecossistema { display: flex; align-items: center; font-size: 11.5px; color: var(--suave-2); white-space: nowrap; }
  .nv .marca-ecossistema b { font-weight: 600; }
  .nv .marca-ecossistema .eco-simbolo { flex: none; }
  .nv.trilho-recolhido .marca-ecossistema { display: none; }
  .nv .marca-ic .ic { margin: 0; }
  .nv .marca { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
  .nv .marca span { color: var(--suave-2); font-weight: 500; }
  .nv .busca-trilho { position: relative; display: block; margin-bottom: 8px; }
  .nv .busca-trilho > .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); margin: 0; color: var(--suave-2); pointer-events: none; }
  .nv #busca { width: 100%; flex: none; height: 36px; min-height: 36px; padding: 0 32px 0 34px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2);
                     font-size: 13px; transition: border-color var(--mov), box-shadow var(--mov), background-color var(--mov); }
  .nv #busca::placeholder { color: var(--suave-2); }
  .nv #busca:hover { border-color: var(--borda-hover); }
  .nv #busca:focus { outline: none; background: var(--superficie); border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-f); }
  .nv .busca-trilho kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/1 inherit; padding: 2px 5px; border-bottom-width: 1px; color: var(--suave-2); }
  .nv .item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px;
                    background: transparent; color: var(--suave); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--mov), color var(--mov), border-color var(--mov); }
  .nv .item:hover { background: var(--hover); color: var(--texto); }
  .nv .item[aria-pressed="true"] { background: var(--primaria-f); color: var(--texto); font-weight: 700; }
  .nv .item[aria-pressed="true"] > .ic { color: var(--primaria); }
  .nv .item .ic { margin: 0; }
  .nv .item .qtd { margin-left: auto; min-width: 0; padding: 0; background: none; font-size: 12px; font-weight: 700; color: var(--suave-2); font-variant-numeric: tabular-nums; line-height: 1; }
  .nv .item .qtd.pendente { color: var(--ambar); background: none; }
  .nv .item .qtd.feito { color: var(--verde); background: none; }
  /* visões (Pacientes / Revisar hoje): itens da barra, não mais o segmentado do topo */
  .nv .visoes { display: grid; gap: 2px; padding: 0; background: none; border-radius: 0; }
  .nv .visoes button { min-height: 36px; padding: 0 12px; border-radius: 999px; box-shadow: none; font-weight: 500; }
  .nv .visoes button[aria-pressed="true"] { background: var(--primaria-f); color: var(--texto); font-weight: 700; box-shadow: none; }
  /* setores: grade com contador */
  .nv .setores { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; }
  .nv .setores:empty { display: none; }
  .nv .setores .item { min-height: 32px; padding: 0 10px; gap: 6px; border-color: var(--borda); font-size: 12px; }
  .nv .setores .item:first-child { grid-column: 1 / -1; }
  .nv .setores .item[aria-pressed="true"] { border-color: var(--primaria); }
  .nv .setores .item .rot { overflow-wrap: anywhere; line-height: 1.2; }
  /* legenda dos ícones: só os tipos que aparecem agora; recolhe sozinha se a barra não couber na altura */
  .nv .legenda { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--linha); min-height: 0; }
  .nv .legenda > summary { display: flex; align-items: center; gap: 6px; padding: 4px 6px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--suave-2); border-radius: 8px; }
  .nv .legenda > summary::-webkit-details-marker { display: none; }
  .nv .legenda > summary:hover { color: var(--texto); }
  .nv .legenda > summary .ic { margin: 0; }
  .nv .legenda > summary .seta { margin-left: auto; transition: transform var(--mov); }
  .nv .legenda[open] > summary .seta { transform: rotate(90deg); }
  .nv .legenda ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
  .nv .legenda li { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 6px; font-size: 12px; color: var(--suave); line-height: 1.25; }
  .nv .legenda li .n { margin-left: auto; font-weight: 700; color: var(--suave-2); font-variant-numeric: tabular-nums; }
  .nv .legenda:not(:has(li)) { display: none; }
  .nv .so-mini, .nv .so-celular { display: none !important; }
  .nv nav.trilho > .trilho-pe { margin-top: auto; position: sticky; bottom: 0; background: var(--superficie); z-index: 10; flex-shrink: 0; display: grid; gap: 2px; padding-top: 8px; padding-bottom: 4px; border-top: 1px solid var(--linha); box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.04); }
  .nv .trilho-pe .item { min-height: 40px; font-size: 13px; }
  .nv .trilho-pe .recolher { color: var(--suave-2); }
  .nv .trilho-pe .recolher > .ic { transition: transform var(--mov); }
  .nv #btnMais[aria-expanded="true"] { background: var(--hover); color: var(--texto); }
  /* a camada 4 reordena o topo antigo (order) em telas médias: na barra lateral a ordem é a do HTML */
  .nv nav.trilho > *, .nv .topo-l1 > *, .nv .topo-l2 > * { order: 0 !important; }

  /* ======================= área: cabeçalho + quadro/ronda ======================= */
  .nv .area { min-width: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  .nv .topo { position: static; display: grid; gap: 12px; padding: 18px 20px 14px; background: transparent; border: 0; box-shadow: none; flex: none; flex-wrap: nowrap; }
  .nv .topo::after { display: none; }
  .nv .topo-l1, .nv .topo-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .nv .topo .espaco { flex: 1; }
  /* 1ª linha: título da visão com a contagem embaixo · o que fazer à direita. 2ª linha: filtros · ordem e Legenda à direita */
  .nv .titulo-bloco { display: grid; gap: 1px; min-width: 0; }
  .nv .titulo-visao { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
  .nv .ctx { color: var(--suave-2); font-size: 12.5px; line-height: 1.3; }
  .nv .ctx:empty { display: none; }
  .nv #btnNovo { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 13px; gap: 6px; }
  .nv #btnNovo .ic { margin: 0; }
  .nv[data-visao="ronda"] #btnNovo { display: none; } /* incluir não é tarefa da ronda: o lugar fica com as ações do dia */
  .nv .situacao-saidas { min-height: 40px; border-radius: 999px; }
  /* filtros: pílula neutra; cor só no ícone e no número; fundo colorido só quando ligado */
  .nv .filtros-sinal { display: flex; flex-wrap: wrap; gap: 8px; }
  .nv .filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie);
                      color: var(--suave); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color var(--mov), background-color var(--mov), color var(--mov); }
  .nv .filtro .ic { margin: 0; color: var(--ic); }
  .nv .filtro b { color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums; }
  .nv .filtro:hover { border-color: var(--borda-hover); color: var(--texto); }
  .nv .filtro.zero, .nv .filtro.zero b, .nv .filtro.zero .ic { color: var(--suave-2); }
  .nv .filtro[aria-pressed="true"] { background: var(--f); border-color: var(--b); color: var(--c); }
  .nv .filtro .x { display: none; }
  .nv .filtro[aria-pressed="true"] .x { display: inline; }
  /* filtro avançado: botão neutro na mesma linha dos rápidos; ligado, fica teal (ação) com o número de critérios */
  .nv .filtro-avancado { color: var(--texto); font-weight: 600; }
  .nv .filtro-avancado .ic { color: var(--suave); }
  .nv .filtro-avancado.ligado { background: var(--primaria-f); border-color: var(--primaria); color: var(--texto); }
  .nv .filtro-avancado.ligado .ic { color: var(--primaria); }
  .nv .filtro-avancado .n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--primaria); color: var(--primaria-texto); font-size: 11.5px; text-align: center; }
  .nv .menu-filtros { width: min(340px, calc(100vw - 16px)); padding: 6px; }
  .nv .menu-filtros .mf-tit { margin: 4px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--suave-2); }
  .nv .menu-filtros .mf-item { display: grid; grid-template-columns: 18px 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px;
                               border: 0; border-radius: var(--r-bloco); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
  .nv .menu-filtros .mf-item:hover, .nv .menu-filtros .mf-item:focus-visible { background: var(--hover); }
  .nv .menu-filtros .mf-item > .ic { margin: 0; color: var(--suave); }
  .nv .menu-filtros .mf-caixa { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--borda-campo); border-radius: 5px; background: var(--campo-fundo); }
  .nv .menu-filtros .mf-caixa .ic { margin: 0; }
  .nv .menu-filtros [aria-checked="true"] .mf-caixa { border-color: var(--primaria); background: var(--primaria); color: var(--primaria-texto); }
  .nv .menu-filtros [aria-checked="true"] > .ic { color: var(--primaria); }
  .nv .menu-filtros .mf-txt { display: grid; min-width: 0; }
  .nv .menu-filtros .mf-rot { font-size: 13px; font-weight: 600; }
  .nv .menu-filtros .mf-txt .sub { font-size: 11.5px; color: var(--suave-2); overflow-wrap: anywhere; }
  .nv .menu-filtros .mf-n { font-size: 12px; font-weight: 700; color: var(--suave-2); font-variant-numeric: tabular-nums; }
  .nv .menu-filtros .mf-limpar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 4px; padding: 0 10px; border-top: 1px solid var(--linha); border-radius: 0 0 var(--r-bloco) var(--r-bloco); color: var(--primaria); }
  .nv .menu-filtros .mf-limpar .ic { margin: 0; }
  .nv .topo .segmentado { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); }
  .nv .topo .segmentado button { border: 0; min-height: 34px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--suave); font: inherit; font-weight: 600; font-size: 12px; cursor: pointer;
                                       transition: background-color var(--mov), color var(--mov); }
  .nv .topo .segmentado button[aria-pressed="true"] { background: var(--texto); color: var(--superficie); }
  .nv .abas-raia { display: none; }
  .nv .dica-rolagem-ronda { display: none; }

  .nv #principal { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  /* position: relative prende os textos só para leitor de tela (absolute) na área que rola; sem isso esticam a página */
  .nv .ronda { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; width: 100%; padding: 0 20px 20px; }
  .nv .painel-corpo { position: relative; }

  /* ======================= quadro: raias que rolam sozinhas ======================= */
  .nv .quadro { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px; padding: 0 20px 16px; align-items: stretch; }
  .nv .quadro > .vazio-filtro, .nv .quadro > .falha-carga, .nv .quadro > .carregando { grid-column: 1 / -1; align-self: start; }
  .nv .coluna { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; background: var(--raia); border: 0; border-radius: 18px; box-shadow: none; }
  .nv .col-cad { --c: var(--ambar); --ic: var(--marca-atencao); --f: var(--ambar-f); --b: var(--ambar-borda); }
  .nv .col-acomp { --c: var(--azul); --ic: var(--azul); --f: var(--azul-f); --b: var(--azul-borda); }
  .nv .col-fech { --c: var(--verde); --ic: var(--verde); --f: var(--verde-f); --b: var(--verde-borda); }
  /* cabeçalho da raia: ícone num quadradinho pastel + nome + contador, fundo pastel bem translúcido */
  .nv .coluna-topo { position: static; display: flex; align-items: center; gap: 10px; min-height: 0; margin: 0 0 8px; padding: 12px 14px; flex: none;
                           background: color-mix(in srgb, var(--f) 40%, var(--raia)); border: 0; border-radius: 18px 18px 0 0; box-shadow: none; }
  .nv .coluna-topo h2 { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--texto); text-transform: none; }
  .nv .coluna-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--f); border: 1px solid var(--b); color: var(--ic); }
  .nv .coluna-topo h2 .qtd { margin-left: auto; min-width: 26px; padding: 1px 8px; border: 0; border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: 12px; font-weight: 800; text-align: center; }
  .nv .raia-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start;
                          padding: 2px 10px 14px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
  .nv .raia-acao { flex: none; padding: 6px 10px 12px; }
  .nv .raia-acao .btn { width: 100%; border-radius: 999px; }
  .nv .coluna-vazia { display: grid; justify-items: center; gap: 6px; padding: 26px 10px; margin: 0; border: 0; background: none; color: var(--suave-2); font-size: 12px; text-align: center; }
  .nv .coluna-vazia .ic { margin: 0; }
  .nv .subgrupo { margin: 6px 6px 0; font-size: 12px; font-weight: 700; color: var(--suave); }
  .nv .carregar { display: flex; justify-content: center; padding: 4px 0 2px; }
  .nv .carregar .btn { min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; color: var(--suave); border-color: var(--borda); background: var(--superficie); }
  .nv .carregar .btn:hover { color: var(--texto); border-color: var(--borda-hover); }
  .nv .carregar .btn .ic { margin: 0; }
  .nv .carregar .falta { color: var(--suave-2); font-weight: 500; }
  .nv .enviados { border-radius: var(--r-cartao); background: var(--superficie); box-shadow: var(--sombra); }
  .nv .enviados > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--suave); border-radius: var(--r-cartao); }
  .nv .enviados > summary::-webkit-details-marker { display: none; }
  .nv .enviados > summary:hover { color: var(--texto); }
  .nv .enviados > summary .ic { margin: 0; transition: transform var(--mov); }
  .nv .enviados[open] > summary .ic { transform: rotate(90deg); }
  .nv .enviados > summary .qtd { margin-left: auto; font-weight: 800; color: var(--texto); }
  .nv .env-lista { list-style: none; margin: 0; padding: 0 6px 8px; display: grid; }
  .nv .env-lista button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 7px 8px; border: 0; border-top: 1px solid var(--linha);
                                background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
  .nv .env-lista button:hover { background: var(--hover); }
  .nv .env-lista .lt { font-size: 12px; font-weight: 700; color: var(--suave); white-space: nowrap; }
  .nv .env-lista .nm { overflow-wrap: anywhere; font-weight: 600; }
  .nv .env-lista .dt { font-size: 12px; color: var(--suave-2); white-space: nowrap; }
  /* barra de rolagem discreta: fina e invisível até passar o mouse na área */
  .nv .raia-corpo, .nv .ronda, .nv .painel-corpo { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .nv .coluna:hover .raia-corpo, .nv .ronda:hover, .nv .painel-corpo:hover { scrollbar-color: var(--borda-hover) transparent; }
  .nv .raia-corpo::-webkit-scrollbar, .nv .ronda::-webkit-scrollbar, .nv .painel-corpo::-webkit-scrollbar { width: 6px; }
  .nv .raia-corpo::-webkit-scrollbar-thumb, .nv .ronda::-webkit-scrollbar-thumb, .nv .painel-corpo::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
  .nv .coluna:hover .raia-corpo::-webkit-scrollbar-thumb, .nv .ronda:hover::-webkit-scrollbar-thumb, .nv .painel-corpo:hover::-webkit-scrollbar-thumb { background: var(--borda-hover); }

  /* ======================= cartão compacto (o único elemento com contorno) ======================= */
  .nv .cartao { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 10px 12px;
                      background: var(--superficie); border: 1px solid var(--borda); border-left-width: 1px; border-radius: var(--r-cartao); box-shadow: var(--sombra); font: inherit; text-align: left;
                      transition: box-shadow var(--mov), border-color var(--mov), transform var(--mov); }
  .nv .cartao:hover { border-color: var(--borda-hover); box-shadow: var(--sombra-hover); transform: none; }
  .nv .cartao:active { transform: scale(.995); }
  /* urgente: só a borda, em vermelho pastel (o vermelho forte cansava a vista com muitos cartões urgentes) */
  .nv .cartao.p0 { border-color: var(--vermelho-borda); }
  .nv .cartao.p1, .nv .cartao.PRONTO_CARGA, .nv .cartao.CARREGADO { border-left-color: var(--borda); color: inherit; }
  .nv .cartao.p0.PRONTO_CARGA, .nv .cartao.p0.CARREGADO { border-left-color: var(--vermelho-borda); }
  .nv .cartao[aria-current="true"], .nv .cartao.aberto { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria); }
  /* sem content-visibility: ver Estilo_Painel (cartões sumiam ao trocar de visão dentro da moldura do Google) */
  .nv .c-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 22px; }
  .nv .c-l1 > .ic { margin: 0; color: var(--suave-2); }
  /* leito nunca quebra no meio; o selo/ícones descem para a linha de baixo quando a raia é estreita */
  .nv .c-leito { font-size: 12px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
  .nv .c-fora { display: inline-block; white-space: normal; font-weight: 600; color: var(--azul); }
  .nv .c-pront { margin-left: 2px; font-size: 12px; color: var(--suave-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nv .c-alertas { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  /* gravação do paciente indo ao servidor: ponto âmbar pulsando (só opacidade) até a resposta; o cartão continua clicável */
  /* no canto do cartão, dentro do respiro (o content-visibility corta o que passa da borda): não empurra nada e o cartão não muda de altura */
  .nv .c-salvando { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar);
                    animation: pulsoSalvando 1s ease-in-out infinite alternate; }
  @keyframes pulsoSalvando { from { opacity: 1; } to { opacity: .35; } }
  @media (prefers-reduced-motion: reduce) { .nv .c-salvando { animation: none; } }
  .nv .ai { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--f); color: var(--ic); border: 1px solid var(--b); }
  .nv .ai .ic { margin: 0; }
  /* ícone do alerta urgente: fundo pastel; a borda um pouco mais viva o separa dos alertas comuns */
  .nv .ai.forte { background: var(--vermelho-f); border-color: color-mix(in srgb, var(--vermelho) 45%, var(--vermelho-borda)); color: var(--vermelho); }
  .nv .c-l2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .nv .c-nome { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: break-word; }
  .nv .c-idade { font-size: 12px; color: var(--suave-2); }
  .nv .c-alergia { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--vermelho); }
  .nv .c-alergia .ic { margin: 0; }
  .nv .c-atms { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--linha); }
  .nv .c-atms:empty { display: none; }
  /* 3 colunas fixas: categoria · nome (com a dose embaixo se não couber) · dia à direita. Nada cai para linha própria e
     todos os cartões ficam alinhados; o nome quebra só no hífen ("Piperacilina-tazobactam") ou, sem jeito, na palavra */
  .nv .c-atm { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 7px; }
  .nv .c-atm .dia { justify-self: end; white-space: nowrap; }
  .nv .c-med { min-width: 0; overflow-wrap: break-word; font-weight: 700; line-height: 1.3; }
  /* dose: menor e discreta, junto do nome (não ocupa linha própria) */
  .nv .c-dose { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--suave-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .nv .c-atm.encerrado .c-med { color: var(--suave-2); font-weight: 600; text-decoration: line-through; }
  .nv .c-semAtm { font-size: 12px; color: var(--suave-2); }
  .nv .cat { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 1; }
  .nv .cat.RESERVA { background: var(--reserva-f); color: var(--reserva); border: 1px solid var(--reserva-borda); }
  .nv .cat.ESTRATÉGICO { background: var(--estrategico-f); color: var(--estrategico); border: 1px solid var(--estrategico-borda); }
  .nv .cat.OUTRO { visibility: hidden; }
  /* dia de terapia: número e previsão na mesma linha de base, colados; ícone centralizado à parte */
  .nv .dia { display: inline-flex; align-items: baseline; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--b); background: var(--f); color: var(--c);
                   font-size: 12px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nv .dia small { margin-left: 1px; font-size: 11px; font-weight: 600; opacity: .8; }
  .nv .dia .ic { align-self: center; margin: 0 3px 0 0; }
  .nv .dia.em-dia { --c: var(--texto); --f: var(--superficie); --b: var(--borda-hover); }
  .nv .dia.perto { --c: var(--ambar); --f: var(--ambar-f); --b: var(--ambar-borda); }
  .nv .dia.alem { --c: var(--vermelho); --f: var(--vermelho-f); --b: var(--vermelho-borda); }
  .nv .dia.sem-prev, .nv .dia.fim { --c: var(--suave-2); --f: transparent; --b: var(--borda); }
  .nv .selo-st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--b); background: var(--f); color: var(--c); font-size: 12px; font-weight: 700; white-space: nowrap; }
  .nv .selo-st .ic { margin: 0; }
  /* encerrados (busca): mesmo cartão */
  .nv .encerrados ul { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  /* ======================= painel do paciente ======================= */
  .nv .painel { width: min(var(--largura-painel), 100%); background: var(--fundo); border-left: 1px solid var(--borda); box-shadow: none; }
  .nv .painel.largo { width: min(1100px, 100%); box-shadow: -10px 0 30px rgba(16,24,40,.14); }
  .nv .painel-topo { padding: 14px 18px; background: var(--superficie); }
  .nv .painel-corpo { padding: 14px; gap: 12px; }
  .nv .painel-corpo > section, .nv .painel-corpo > details.bloco, .nv .painel-corpo > .bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra); padding: 12px 14px; }
  .nv .bloco { border-radius: var(--r-cartao); }
  .nv .pend-lista { border: 0; border-radius: 0; background: none; }
  .nv .pend { border-top-color: var(--linha); }
  /* "Precisa de você": o resumo quebra linha em vez de cortar com "…" */
  .nv .pend-resumo { white-space: normal; overflow: visible; text-overflow: clip; }
  .nv .pend-txt { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
  .nv .rot-secao { text-transform: none; letter-spacing: -.005em; font-size: 13px; font-weight: 800; color: var(--texto); }
  .nv .rot-secao .qtd { background: var(--ambar-f); color: var(--ambar); }
  .nv .btn { border-radius: 999px; }
  /* resposta ao clique no mesmo quadro (mouse e toque): o botão afunda de leve enquanto está pressionado */
  .nv .btn:not(:disabled):active { transform: scale(.97); transition: transform 60ms ease-out; }
  @media (prefers-reduced-motion: reduce) { .nv .btn:not(:disabled):active { transform: none; } }
  .nv .painel-rodape { padding: 12px 16px; }
  .nv .gd { border-radius: 8px; }
  .nv .cult-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .nv .cult-cab .cult-nao { margin-left: auto; }
  .nv .cult-germe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .nv .linha-tit { display: flex; align-items: center; gap: 8px; }
  .nv .linha-tit > :first-child { margin: 0; }
  .nv .linha-tit .btn { margin-left: auto; }

  /* painel enxuto e com respiro: seções separadas por 16px, linhas e fontes menores, nada repetido (PLANO_VISUAL.md, Q18–Q23) */
  .nv .painel-corpo { padding: 16px; gap: 16px; font-size: 12px; }
  .nv .painel-corpo > section, .nv .painel-corpo > details.bloco, .nv .painel-corpo > .bloco { padding: 14px 16px; }
  .nv .painel-titulo { font-size: 17px; }
  .nv .nav-paciente { border: 0; border-radius: 999px; gap: 2px; }
  .nv .nav-paciente .btn.icone { border: 0; border-radius: 50%; background: transparent; color: var(--suave); padding: 0; }
  .nv .nav-paciente .btn.icone:hover { background: var(--hover); color: var(--texto); }
  .nv .nav-posicao { font-size: 12px; padding: 0 2px; }
  .nv .pend-txt { min-height: 30px; gap: 8px; padding-left: 14px; font-size: 12px; }
  .nv .pend-txt b { font-size: 12px; }
  .nv .pend-resumo { font-size: 12px; }
  .nv .pend-ok .btn, .nv .pend .btn { min-height: 28px; padding: 0 10px; font-size: 12px; }
  .nv .pend .btn.ciente-icone { width: 32px; min-width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .nv .pend .btn.ciente-icone .ic { margin: 0; }
  .nv .pend-mais { margin-top: 6px; min-height: 28px; font-size: 12px; color: var(--suave); }
  .nv .pend-mais .ic { margin: 0 4px 0 0; }
  /* cada antimicrobiano num card próprio, separado da faixa do título ("Antimicrobianos" + botão de incluir) e dos vizinhos */
  .nv .secao-atms { gap: 10px; }
  .nv .secao-atms > .secao-titulo { padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--linha); }
  .nv .ac { gap: 8px; padding: 12px 14px 12px 16px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); }
  .nv .ac::before { display: block; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: 10px 0 0 10px; }
  .nv .atms-encerrados[open] { display: grid; gap: 10px; }
  .nv .ac-nome { font-size: 14px; font-weight: 700; }
  .nv .ac-dir { gap: 6px; }
  .nv .ac-dir .btn { min-height: 28px; font-size: 12px; }
  .nv .ac-l2 { margin-top: -4px; gap: 4px 6px; font-size: 12px; }
  .nv .ac-dose { font-size: 12px; font-weight: 700; }
  .nv .ac-l3 { gap: 4px 8px; min-height: 0; font-size: 12px; }
  .nv .ac-l3:empty { display: none; }
  .nv .ac-l3 .t-alerta { display: inline-flex; align-items: center; gap: 4px; }
  .nv .ac-estr { font-size: 12px; padding: 1px 9px; }
  /* grade de dias: número + data; quebra em linhas em vez de rolar de lado */
  .nv .gd-rolagem { overflow: visible; }
  /* todos os dias do mesmo tamanho (largura e altura fixas), alinhados em colunas iguais em qualquer card e largura de tela */
  .nv .gd-grade { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 50px); grid-auto-columns: auto; justify-content: start; min-width: 0; gap: 6px; padding-top: 14px; row-gap: 16px; }
  /* ícone, número e data em faixas próprias, com folga: o ícone nunca encosta no número */
  .nv .gd { box-sizing: border-box; width: 50px; height: 56px; min-height: 0; grid-template-rows: 14px auto auto; row-gap: 3px; padding: 6px 2px 0; align-content: start; border-radius: 10px; }
  .nv .gd-p { width: 7px; height: 7px; }
  .nv .gd-n { font-size: 12px; font-weight: 700; color: var(--texto); }
  .nv .gd-d { font-size: 11px; padding: 0; white-space: nowrap; }
  /* cobertura: selos ✓/✕ lado a lado (material, data e motivo no title e na seção Culturas) */
  .nv .ac-cult { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 12px; }
  .nv .ac-cult .cob { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie-2); cursor: help; }
  .nv .ac-cult .cob .ic { margin: 0; }
  .nv .ac-cult .cob-sit { margin: 0; font-weight: 700; }
  .nv .ac-cult .cob-germe { font-style: italic; color: var(--texto); }
  .nv .ac-cult .cob.ok { border-color: var(--verde-borda); background: var(--verde-f); color: var(--verde); }
  .nv .ac-cult .cob.nao { border-color: var(--vermelho-borda); background: var(--vermelho-f); color: var(--vermelho); }
  .nv .ac-cult .cob.avaliar { border-color: var(--ambar-borda); background: var(--ambar-f); color: var(--ambar); }
  .nv .painel-rodape { padding: 10px 16px; }
  .nv .painel-rodape .btn { min-height: 34px; font-size: 12px; }

  /* ======================= paciente em janela grande no centro, em 2 colunas (07/10/2026) =======================
     esquerda: "Precisa de você" e dados do paciente · direita: antimicrobianos (linha do tempo com espaço). Cada coluna rola sozinha. */
  .nv .pc-col { display: contents; } /* fora da janela, as seções seguem empilhadas como antes */
  .nv .pc-col > section, .nv .pc-col > details.bloco, .nv .pc-col > .bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao);
                     box-shadow: var(--sombra); padding: 14px 16px; }
  .nv .painel.janela { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
                       width: min(1240px, calc(100vw - 48px)); height: min(880px, calc(100vh - 40px));
                       border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(16, 24, 40, .28); }
  [data-tema="escuro"] .nv .painel.janela { box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }
  .nv .painel.janela .painel-topo { padding: 14px 20px; border-bottom: 1px solid var(--linha); }
  .nv .painel.janela .pt-nome { font-size: 20px; }
  .nv .painel.janela .painel-rodape { padding: 10px 20px; }
  .nv .veu { background: rgba(15, 23, 42, .42); }
  @media (min-width: 1000px) {
    .nv .painel.janela .painel-corpo:has(> .pc-col) { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
                       grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; padding: 16px 20px; overflow: hidden; }
    .nv .painel.janela .pc-col { display: grid; align-content: start; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
                       position: relative; padding: 0 4px 4px 0; scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .nv .painel.janela .pc-col:hover { scrollbar-color: var(--borda-hover) transparent; }
    .nv .painel.janela .pc-col::-webkit-scrollbar { width: 6px; }
    .nv .painel.janela .pc-col::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
    .nv .painel.janela .pc-col:hover::-webkit-scrollbar-thumb { background: var(--borda-hover); }
  }

  /* ======================= infecto (etapa 2): mesma casca; grade de cartões sem raias; janela do paciente por cima ======================= */
  .nv .marca-sub { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--suave-2); white-space: nowrap; }
  .nv .trilho-pe { margin-top: auto; display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--linha); }
  /* pé da barra: quem está conectado e a volta ao portal Integra (o link tem cara de item da barra) */
  .nv .trilho-pe .usuario { display: flex; align-items: center; gap: 10px; max-width: none; padding: 6px 12px; overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 12px; color: var(--suave-2); }
  .nv .trilho-pe .usuario .ic { margin: 0; flex: none; }
  .nv .trilho .eco-portal { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; justify-content: flex-start; gap: 10px; border: 1px solid transparent; border-radius: 999px;
                            background: transparent; color: var(--suave); font-size: 13px; font-weight: inherit; text-decoration: none; }
  .nv .trilho .eco-portal:hover { background: var(--hover); color: var(--texto); border-color: transparent; }
  .nv .trilho .eco-portal span { display: inline; }
  .nv .trilho .eco-portal .ic { margin: 0; color: var(--primaria); }
  .nv .visoes button[tabindex="-1"] { cursor: default; }
  .nv .cards-infecto { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                       gap: 12px; align-content: start; align-items: start; padding: 0 20px 20px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .nv .cards-infecto:hover { scrollbar-color: var(--borda-hover) transparent; }
  .nv .cards-infecto > .vazio-infecto, .nv .cards-infecto > .falha-carga, .nv .cards-infecto > .carregando { grid-column: 1 / -1; }
  .nv .cartao.card-infecto.p3 { background: var(--superficie-2); border-left-color: var(--borda); }
  .nv .cartao.card-infecto.p3 .c-nome { color: var(--suave); font-weight: 600; }
  .nv .popup-infecto { width: min(720px, calc(100% - 24px)); border-radius: 18px; background: var(--fundo); box-shadow: 0 20px 50px rgba(16,24,40,.25); }
  .nv .popup-topo { padding: 14px 18px; background: var(--superficie); border-bottom: 1px solid var(--borda); }
  .nv .popup-corpo { padding: 16px; display: grid; gap: 16px; font-size: 12px; scrollbar-width: thin; }
  .nv .popup-corpo > section, .nv .popup-corpo > details.bloco, .nv .popup-corpo > .bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra); padding: 14px 16px; margin: 0; }
  .nv .popup-corpo .secao-atms > .ac, .nv .popup-corpo .secao-atms > details .ac { padding: 8px 0 8px 14px; border: 0; border-top: 1px solid var(--linha); background: none; box-shadow: none; border-radius: 0; }
  .nv .atencao-infecto .cartao-aviso { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r-bloco); font-size: 12px; }
  .nv .cartao-aviso .ca-txt { white-space: normal; overflow: visible; text-overflow: clip; }
  .nv .form-comentario textarea, .nv .form-comentario select { border-radius: var(--r-bloco); }

  /* ======================= Revisar hoje (etapa 3, Q27–Q33): por paciente, 1 coluna; revisado recolhe no lugar ======================= */
  /* topo: progresso na linha do título; "Ocultar revisados" com os filtros; aceites, conferir e ⋯ à direita */
  .nv .progresso { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); white-space: nowrap; }
  .nv .progresso b { color: var(--texto); font-weight: 800; font-variant-numeric: tabular-nums; }
  .nv .progresso .barra { width: 84px; height: 6px; border-radius: 999px; background: var(--raia); overflow: hidden; }
  .nv .progresso .barra span { display: block; height: 100%; border-radius: inherit; background: var(--primaria); transform-origin: left; transition: transform var(--mov); }
  .nv .progresso.completo { color: var(--verde); font-weight: 700; }
  .nv .progresso.completo .barra span { background: var(--verde); }
  .nv .progresso .ic { margin: 0; }
  .nv .acoes-ronda { display: flex; align-items: center; gap: 6px; }
  .nv .acoes-ronda .btn, .nv .r-acoes .btn { display: inline-flex; align-items: center; justify-content: center; }
  .nv .acoes-ronda .btn.pequeno { min-height: 40px; padding: 0 14px; font-size: 12px; gap: 6px; }
  .nv .acoes-ronda .btn .ic { margin: 0; }
  .nv .acoes-ronda .qtd { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--ambar-f); color: var(--ambar); font-size: 12px; font-weight: 800; text-align: center; }
  .nv .acoes-ronda .qtd.zero { background: var(--superficie-2); color: var(--suave-2); }
  .nv .acoes-ronda .btn.icone { width: 40px; min-width: 40px; min-height: 40px; }

  .nv .r-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 920px; }
  .nv .r-pac { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra); }
  .nv .r-pac.urgente { border-color: var(--vermelho-borda); }
  .nv .r-cab { display: grid; gap: 2px; padding: 10px 12px 8px; }
  .nv .r-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 24px; }
  .nv .r-l1 > .ic { margin: 0; color: var(--suave-2); }
  /* canto do bloco: alergia (com o nome), infecto, dispensação a conferir e evolução */
  .nv .r-canto { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
  .nv .r-alergia { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 7px; border-radius: 7px; background: var(--vermelho-f); border: 1px solid var(--vermelho-borda);
                   color: var(--vermelho); font-size: 12px; font-weight: 700; }
  .nv .r-alergia .ic { margin: 0; }
  .nv button.ai { padding: 0; font: inherit; cursor: pointer; transition: border-color var(--mov), background-color var(--mov); }
  .nv button.ai:hover { border-color: var(--c); }
  .nv .ai.com-n { width: auto; display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; font-size: 12px; font-weight: 800; }
  .nv .r-l2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .nv .r-nome { min-height: 0; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3;
                text-align: left; cursor: pointer; overflow-wrap: break-word; }
  .nv .r-nome:hover { color: var(--primaria); text-decoration: underline; text-underline-offset: 3px; }
  .nv .r-motivo { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ambar); }
  .nv .r-motivo .ic { margin: 1px 0 0; color: var(--marca-atencao); }
  .nv .r-motivo.s-risco, .nv .r-motivo.s-risco .ic { color: var(--vermelho); }

  /* antimicrobiano: 2 linhas (nome, via · dose, D8/7 +1 | indicação · cultura · estratégias · aceite · motivo) + ações no canto */
  .nv .r-atms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
  .nv .r-atm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--linha); }
  .nv .r-atm:first-child { border-top: 0; }
  .nv .r-check { display: grid; place-items: center; width: 28px; height: 28px; margin: -2px 0; border-radius: 8px; cursor: pointer; }
  .nv .r-check:hover { background: var(--hover); }
  .nv .r-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--verde); cursor: pointer; }
  .nv .r-info { min-width: 0; display: grid; gap: 2px; }
  .nv .r-a1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .nv .r-med { font-weight: 700; overflow-wrap: break-word; }
  .nv .r-dose { font-size: 12px; color: var(--suave); }
  .nv .r-novo { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--azul); }
  .nv .r-novo .ic { margin: 0; }
  .nv .r-a1 .dia { margin-left: auto; }
  .nv .r-a2 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--suave-2); }
  .nv .r-a2 .sim { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: inherit; font-size: 12px; }
  .nv .r-a2 .sim .ic { margin: 0; }
  .nv .r-a2 .sim.estr { color: var(--estrategico); font-weight: 700; }
  .nv .r-a2 .sim.pendente { color: var(--ambar); font-weight: 700; }
  .nv .r-a2 .motivo { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--ambar); font-weight: 600; }
  .nv .r-a2 .motivo .ic { margin: 1px 0 0; color: var(--marca-atencao); }
  .nv .r-a2 .motivo.s-risco, .nv .r-a2 .motivo.s-risco .ic { color: var(--vermelho); }
  .nv .r-a2 .r-por { color: var(--verde); font-weight: 600; }
  .nv .r-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
  .nv .r-acoes .btn.pequeno { min-height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
  .nv .r-acoes .btn .ic { margin: 0; }
  .nv .r-acoes .btn.icone { width: 30px; min-width: 30px; min-height: 30px; padding: 0; }
  .nv .r-acoes .btn.sugestao { border-color: var(--azul-borda); background: var(--azul-f); color: var(--azul); }
  .nv .r-acoes .btn.sugestao:hover { border-color: var(--azul); }
  .nv .r-recolher .ic { transform: rotate(180deg); }
  /* revisado: uma linha verde (nome, dia, quem e hora) no mesmo lugar */
  .nv .r-atm.feito { padding-top: 6px; padding-bottom: 6px; background: color-mix(in srgb, var(--verde-f) 55%, var(--superficie)); }
  .nv .r-atm.feito:last-child { border-radius: 0 0 var(--r-cartao) var(--r-cartao); }
  .nv .r-atm.aberto { background: color-mix(in srgb, var(--verde-f) 30%, var(--superficie)); }
  .nv .r-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; min-height: 28px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  .nv .r-resumo .r-med { font-weight: 600; color: var(--suave); }
  .nv .r-quem { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--verde); white-space: nowrap; }
  .nv .r-quem .ic { margin: 0; }
  /* paciente com tudo revisado: uma linha */
  .nv .r-pac.todo-feito { box-shadow: none; background: color-mix(in srgb, var(--verde-f) 45%, var(--superficie)); border-color: var(--verde-borda); }
  .nv .r-resumo-pac { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; font: inherit; color: inherit;
                      text-align: left; cursor: pointer; border-radius: var(--r-cartao); transition: background-color var(--mov); }
  .nv .r-resumo-pac:hover { background: var(--hover); }
  .nv .r-resumo-pac > .ic { margin: 0; color: var(--suave-2); }
  .nv .r-nome-txt { font-weight: 600; color: var(--suave); overflow-wrap: break-word; }
  .nv .r-resumo-pac .r-quem { margin-left: auto; }
  .nv .r-rodape { max-width: 72ch; margin: 14px 0 0; font-size: 12px; color: var(--suave-2); }
  .nv .r-vazio { max-width: 920px; }
  @media print {
    .nv .r-acoes, .nv .r-canto button, .nv .r-rodape, .nv .r-recolher { display: none !important; }
    .nv .r-pac { box-shadow: none; break-inside: avoid; }
  }

  /* ======================= janelas (etapa 4, Q37–Q44 + ajuste compacto) =======================
     no centro (~880px), topo (título · contexto · X) e rodapé fixos, só o meio rola; grade de 6 colunas, campos de 32px;
     rolar só em último caso. */
  .nv .dialogo { width: min(880px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--borda); border-radius: 16px;
                 background: var(--superficie); box-shadow: 0 24px 60px rgba(16,24,40,.28); overflow: hidden; }
  .nv .dialogo.largo { width: min(1100px, calc(100% - 32px)); }
  .nv .dialogo::backdrop { background: rgba(15, 23, 42, .42); }
  [data-tema="escuro"] .nv .dialogo::backdrop { background: rgba(0, 0, 0, .6); }
  .nv .dialogo:not(.confirmacao) form { display: flex; flex-direction: column; max-height: calc(100vh - 34px); padding: 0; }
  .nv .dialogo-topo { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--linha); }
  .nv .dialogo-tit { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .nv .dialogo h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
  .nv .dialogo-ctx { font-size: 12px; color: var(--suave-2); overflow-wrap: anywhere; }
  .nv .dialogo-x { flex: none; width: 32px; min-width: 32px; min-height: 32px; margin-left: auto; }
  .nv .dialogo-x .ic { margin: 0; }
  .nv .dialogo-meio { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; padding: 10px 18px 12px;
                      scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .nv .dialogo-meio:hover { scrollbar-color: var(--borda-hover) transparent; }
  .nv #dialogoErro { margin: 10px 0 0; }
  .nv .dialogo:not(.confirmacao) .dialogo-acoes { flex: none; margin: 0; padding: 8px 12px 8px 18px; gap: 8px; border-top: 1px solid var(--linha); background: var(--superficie); }
  .nv .dialogo-acoes .btn { min-height: 32px; padding: 0 16px; }
  .nv .btn.perigo.dialogo-excluir { border-color: transparent; background: transparent; color: var(--vermelho); }
  .nv .btn.perigo.dialogo-excluir:hover { background: var(--vermelho-f); }

  /* grade de 6 colunas: cada campo ocupa --col colunas (padrão 3 = meia linha); o resto (seções, notas, listas próprias) a linha inteira */
  .nv .grade-form { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; }
  .nv .grade-form > * { grid-column: 1 / -1; min-width: 0; }
  .nv .grade-form > .campo { grid-column: span var(--col, 3); gap: 3px; }
  .nv .grade-form > .campo.largo { grid-column: 1 / -1; }
  .nv .campo label, .nv .campo .rotulo-campo { font-size: 12px; line-height: 1.25; }
  .nv .campo .ajuda, .nv .erro-campo { font-size: 11.5px; line-height: 1.3; }
  .nv .campo .ajuda:empty { display: none; }
  /* campo: 32px, cantos 8px, cinza-claro que fica branco no foco com anel verde (Q40) */
  .nv .campo input:not([type="checkbox"]):not([type="radio"]), .nv .campo select, .nv .campo textarea {
    min-height: 32px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie-2); color: var(--texto); font: inherit; font-size: 13px;
    transition: border-color var(--mov), box-shadow var(--mov), background-color var(--mov); }
  .nv .campo textarea { padding: 6px 10px; line-height: 1.45; }
  [data-tema="escuro"] .nv .campo input:not([type="checkbox"]):not([type="radio"]),
  [data-tema="escuro"] .nv .campo select, [data-tema="escuro"] .nv .campo textarea { border-color: var(--borda-campo); }
  .nv .campo input:not([type="checkbox"]):not([type="radio"]):hover, .nv .campo select:hover, .nv .campo textarea:hover { border-color: var(--borda-hover); }
  .nv .campo input:not([type="checkbox"]):not([type="radio"]):focus, .nv .campo select:focus, .nv .campo textarea:focus {
    outline: none; background-color: var(--superficie); border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-f); }
  .nv .campo [aria-invalid="true"] { border-color: var(--vermelho) !important; }
  /* opções de 1 toque: segmentado colado, a marcada em destaque (Q39) */
  .nv .dialogo .segmentado:not(.grade) { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 2px; margin: 0; padding: 2px;
                                         border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2); }
  .nv .dialogo .segmentado:not(.grade) label { min-height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--suave); font-size: 12px; font-weight: 600;
                                               transition: background-color var(--mov), color var(--mov), box-shadow var(--mov); }
  .nv .dialogo .segmentado:not(.grade) label:hover { background: transparent; color: var(--texto); }
  .nv .dialogo .segmentado:not(.grade) label:has(input:checked) { background: var(--superficie); color: var(--texto); font-weight: 700;
                                                                  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--borda-hover); }
  /* muitas opções (desfecho, medicamento seguinte): pílulas, a escolhida verde com ✓ */
  .nv .dialogo .segmentado.grade { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
  .nv .dialogo .segmentado.grade label { justify-content: flex-start; min-height: 28px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie);
                                         color: var(--suave); font-size: 12px; font-weight: 600; text-align: left; }
  .nv .dialogo .segmentado.grade label:hover { border-color: var(--borda-hover); background: var(--superficie); color: var(--texto); }
  .nv .dialogo .segmentado.grade label:has(input:checked) { border-color: var(--verde-borda); background: var(--verde-f); color: var(--verde); }
  .nv .dialogo .segmentado.grade label:has(input:checked) span::before { content: "✓ "; font-weight: 800; }
  .nv .dialogo .segmentado[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--vermelho); }
  /* valores rápidos: pílulas pequenas; em campo numérico ficam ao lado da caixa */
  .nv .dialogo .opcoes-rapidas { gap: 4px; }
  .nv .dialogo .opcoes-rapidas button { min-height: 24px; min-width: 0; padding: 0 9px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie);
                                        color: var(--suave); font-size: 12px; font-weight: 600; }
  .nv .dialogo .opcoes-rapidas button:hover { border-color: var(--borda-hover); background: var(--superficie); color: var(--texto); }
  .nv .dialogo .opcoes-rapidas button[aria-pressed="true"] { border-color: var(--verde-borda); background: var(--verde-f); color: var(--verde); }
  .nv .grade-form > .campo.com-rapidas { display: grid; grid-template-columns: minmax(64px, 96px) minmax(0, 1fr); align-items: center; column-gap: 8px; }
  .nv .campo.com-rapidas > label, .nv .campo.com-rapidas > .ajuda, .nv .campo.com-rapidas > .erro-campo { grid-column: 1 / -1; }
  /* sugestões de 1 toque (dose pela dispensação): pílula de uma linha, a escolhida verde com ✓ (Q43) */
  .nv .sug-lista { gap: 6px; }
  .nv .sug-cartao { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); }
  .nv .sug-cartao b { font-size: 12px; }
  .nv .sug-cartao span { font-size: 11.5px; color: var(--suave-2); }
  .nv .sug-cartao span:not(:empty)::before { content: "·"; margin-right: 6px; color: var(--borda-hover); }
  .nv .sug-cartao:hover { border-color: var(--borda-hover); background: var(--superficie); }
  .nv .sug-cartao[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-f); box-shadow: 0 0 0 1px var(--verde); }
  .nv .sug-cartao[aria-pressed="true"] b::before { color: var(--verde); }
  .nv .sug-cartao.outra { border-style: dashed; }
  .nv .sug-cartao.outra b { color: var(--texto); }
  /* seções: rótulo pequeno com linha fina; partes opcionais recolhidas numa caixa com o resumo ao lado (Q41) */
  .nv .secao-form { margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--linha); font-size: 11.5px; font-weight: 800; color: var(--suave-2); text-transform: uppercase; letter-spacing: .04em; }
  .nv button.secao-form { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; margin-top: 4px; padding: 4px 10px; border: 1px solid var(--borda);
                          border-radius: 10px; background: var(--superficie-2); color: var(--texto); font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: 0; }
  .nv button.secao-form:hover { background: var(--hover); }
  .nv button.secao-form::before { order: 3; margin-left: auto; width: 16px; height: 16px; color: var(--suave-2); transition: transform var(--mov); }
  .nv button.secao-form[aria-expanded="true"]::before { transform: rotate(90deg); }
  .nv .secao-resumo { font-size: 12px; font-weight: 400; color: var(--suave-2); overflow-wrap: anywhere; }
  .nv .secao-resumo:empty { display: none; }
  .nv .nota-form { padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
  .nv .nota-form.nota-risco { background: var(--ambar-f); color: var(--ambar); }
  .nv .desfechos-risco .opcao-obito { flex-basis: 100%; order: 1; margin-top: 12px; }
  .nv .desfechos-risco .opcao-fim-vida { flex-basis: 100%; order: 2; margin-top: 8px; }

  /* confirmação: janela pequena com ícone da cor do sinal; ação perigosa em vermelho sólido (Q42) */
  .nv .dialogo.confirmacao { width: min(420px, calc(100% - 32px)); }
  .nv .confirmacao form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 18px 14px; }
  .nv .conf-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--f); border: 1px solid var(--b); color: var(--ic); }
  .nv .conf-ic .ic { margin: 0; }
  .nv .confirmacao h2 { align-self: center; font-size: 16px; line-height: 1.35; }
  .nv .confirmacao .conf-texto { grid-column: 2; color: var(--suave); line-height: 1.5; white-space: pre-line; }
  .nv .confirmacao .dialogo-acoes { grid-column: 1 / -1; margin: 10px 0 0; padding: 0; border: 0; }
  .nv .btn.perigo-cheio { background: var(--vermelho); border-color: var(--vermelho); color: var(--vermelho-texto); }

  /* ======================= telas largas (etapa 5, Q45–Q52): painel largo por cima; abas, cartões de indicador, tabelas compactas ======================= */
  .nv .painel.largo .painel-corpo { padding: 16px 20px 20px; gap: 14px; }
  /* Indicadores: mês + abas numa faixa que fica no topo da área que rola (Q46) */
  .nv .indicadores-topo { position: sticky; top: -16px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -16px -20px 0; padding: 10px 20px;
                          background: var(--superficie); border-bottom: 1px solid var(--borda); }
  .nv .indicadores-topo label { font-size: 12px; font-weight: 600; color: var(--suave); }
  .nv .indicadores-topo input { min-height: 32px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); color: var(--texto); font: inherit; }
  .nv .indicadores-topo .espaco { flex: 1; }
  .nv .segmentado.abas-ind { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2); }
  .nv .abas-ind [role="tab"] { min-height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--suave); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
                               transition: background-color var(--mov), color var(--mov), box-shadow var(--mov); }
  .nv .abas-ind [role="tab"]:hover { color: var(--texto); }
  .nv .abas-ind [role="tab"][aria-selected="true"] { background: var(--superficie); color: var(--texto); font-weight: 700; box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--borda-hover); }
  .nv .ind-secao { display: grid; gap: 14px; align-content: start; align-self: start; }
  .nv .ind-secao[hidden] { display: none; }
  /* Tabelas: as menores lado a lado (rolar só em último caso); a dos 12 meses na largura toda */
  .nv #ind-tabelas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .nv #ind-tabelas > section.bloco:last-child { grid-column: 1 / -1; }
  .nv .titulo-grupo { margin: 0; font-size: 13px; font-weight: 800; }
  .nv .titulo-grupo .sub, .nv .ind-secao h3 .sub { font-size: 12px; font-weight: 500; color: var(--suave-2); }
  .nv .ind-secao > section.bloco { margin: 0; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra); }
  .nv .ind-secao > section.bloco:has(> .tiles) { padding: 0; background: none; border: 0; box-shadow: none; }
  .nv .ind-secao > section.bloco > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; font-size: 13px; font-weight: 800; }
  /* cartão de indicador: rótulo pequeno, número grande, barra com a marca da meta e selo dentro/fora (Q47) */
  .nv .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .nv .tile { display: grid; gap: 6px; align-content: start; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra); }
  .nv .tile .rot { font-size: 12px; font-weight: 600; color: var(--suave); }
  .nv #ind-uso .tile .rot { min-height: 5em; align-content: flex-start; }
  .nv .tile .valor { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--texto); }
  .nv .tile .valor { font-variant-numeric: tabular-nums; }
  .nv .coluna-topo h2 { flex-wrap: wrap; gap: 4px 6px; }
  .nv .col-cad .coluna-topo { padding-inline: 10px; }
  .nv .col-cad .coluna-topo h2 { font-size: 13px; }
  .nv .atencao-infecto .cartao-aviso.info { color: var(--azul); background: var(--azul-f); }
  .nv .atencao-infecto .cartao-aviso.info .ic { color: var(--azul); }
  html:not([data-tema="escuro"]) .nv .dialogo { border-color: transparent; }
  .nv .tile.bom .valor, .nv .tile.ruim .valor { color: var(--texto); }
  .nv .tile .meta { font-size: 12px; color: var(--suave-2); line-height: 1.4; }
  .nv .barra-meta { margin: 2px 0; height: 6px; border-radius: 999px; background: var(--raia); }
  .nv .barra-meta .bm-valor { border-radius: inherit; }
  .nv .st-meta { display: inline-flex; align-items: center; gap: 3px; margin-right: 2px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .nv .tile.bom .st-meta { color: var(--verde); background: var(--verde-f); border-color: var(--verde-borda); }
  .nv .tile.bom .st-meta::before { content: "✓"; }
  .nv .tile.ruim .st-meta { color: var(--vermelho); background: var(--vermelho-f); border-color: var(--vermelho-borda); }
  .nv .delta.melhorou { color: var(--verde); font-weight: 700; } .nv .delta.piorou { color: var(--vermelho); font-weight: 700; }
  /* tabelas compactas: ~32px por linha, divisória fina, números à direita, cabeçalho que fica no topo (Q48) */
  .nv table.tab { font-size: 12.5px; }
  .nv table.tab th, .nv table.tab td { height: 32px; padding: 4px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
  .nv table.tab th { position: sticky; top: 0; z-index: 1; height: auto; padding: 7px 10px; background: var(--superficie-2); font-size: 12px; font-weight: 700; color: var(--suave); white-space: nowrap; }
  .nv table.tab tr:last-child td { border-bottom: 0; }
  .nv table.tab tr:hover td { background: var(--hover); }
  .nv table.tab td.nw { white-space: nowrap; }
  .nv table.tab .sub { color: var(--suave-2); }
  .nv .tab-caixa { overflow: auto; max-height: 52vh; border: 1px solid var(--borda); border-radius: var(--r-bloco); }
  .nv .tab-carga input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primaria); vertical-align: middle; }
  .nv .carga-pend { color: var(--ambar); }

  /* Configurações: abas na vertical à esquerda, com ícone (Q46); preferências em linha (Q49) */
  .nv .config-grade { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
  .nv .config-grade .abas-config { position: sticky; top: 0; display: grid; gap: 2px; padding: 0; border: 0; overflow: visible; }
  .nv .abas-config [role="tab"] { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--suave);
                                  font-weight: 500; text-align: left; transition: background-color var(--mov), color var(--mov); }
  .nv .abas-config [role="tab"] .ic { margin: 0; flex: none; }
  .nv .abas-config [role="tab"]:hover { background: var(--hover); color: var(--texto); }
  .nv .abas-config [role="tab"][aria-selected="true"] { background: var(--primaria-f); color: var(--texto); font-weight: 700; border: 0; }
  .nv .abas-config [role="tab"][aria-selected="true"] .ic { color: var(--primaria); }
  .nv .secao-config { display: grid; gap: 14px; min-width: 0; }
  .nv .secao-config > section.bloco { margin: 0; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra); }
  .nv .nota-config { margin: 0; }
  .nv .secao-config > section.bloco.prefs { padding: 2px 18px; }
  .nv .pref { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 4px 20px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
  .nv .pref:first-child { border-top: 0; }
  .nv .pref-rot { font-size: 13px; font-weight: 700; }
  .nv .pref-exp { grid-column: 2; margin: 0; font-size: 12px; color: var(--suave-2); }
  .nv .pref select { justify-self: start; min-height: 32px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); color: var(--texto); font: inherit; }
  .nv .pref .segmentado { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2); }
  .nv .pref .segmentado label { min-height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--suave); font-size: 12px; font-weight: 600; }
  .nv .pref .segmentado label:hover { background: transparent; color: var(--texto); }
  .nv .pref .segmentado label:has(input:checked) { background: var(--superficie); color: var(--texto); font-weight: 700; box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--borda-hover); }

  /* Conferência: bloco por paciente como no Revisar hoje, uma linha por item com as ações no canto (Q50) */
  .nv .conf-topo .sub { margin: 0; }
  .nv .painel-corpo > section.conf-paciente { padding: 0; }
  .nv .conf-paciente h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 10px 12px 8px; font-size: inherit; font-weight: inherit; }
  .nv .conf-paciente h3 > .ic { margin: 0; color: var(--suave-2); }
  .nv .conf-nome { font-size: 14px; font-weight: 700; }
  .nv .conf-desf { font-size: 12px; color: var(--suave-2); }
  .nv .conf-paciente h3 .btn { margin-left: auto; min-height: 28px; padding: 0 10px; font-size: 12px; }
  .nv .conf-paciente .lista-conf { border-top: 1px solid var(--linha); }
  .nv .conf-paciente .conf-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 12px; border-top: 1px solid var(--linha); font-size: 12.5px; }
  .nv .conf-paciente .conf-item:first-child { border-top: 0; }
  .nv .conf-paciente .conf-tipo { display: inline; margin-right: 8px; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; color: var(--ambar); }
  .nv .conf-paciente .conf-item.alta .conf-tipo { color: var(--vermelho); background: none; }
  .nv .conf-paciente .conf-item .acoes { gap: 4px; }
  .nv .conf-paciente .conf-item .acoes .btn { min-height: 28px; padding: 0 10px; font-size: 12px; }

  /* ======================= barra recolhida pelo botão "Recolher menu" (tela de computador): só ícones ======================= */
  @media (min-width: 861px) {
    body.nv.trilho-recolhido .casca { grid-template-columns: var(--trilho-mini) minmax(0, 1fr); }
    .nv.trilho-recolhido nav.trilho { padding: 16px 10px 12px; align-items: center; }
    .nv.trilho-recolhido nav.trilho .rot, .nv.trilho-recolhido .marca, .nv.trilho-recolhido .busca-trilho, .nv.trilho-recolhido .setores,
    .nv.trilho-recolhido .legenda, .nv.trilho-recolhido .visoes .qtd { display: none; }
    .nv.trilho-recolhido .so-mini { display: flex !important; }
    .nv.trilho-recolhido .marca-linha { flex-direction: column; padding: 0 0 8px; }
    .nv.trilho-recolhido .item, .nv.trilho-recolhido .visoes button { width: 42px; justify-content: center; padding: 0; }
    .nv.trilho-recolhido .trilho-pe .usuario { width: 42px; justify-content: center; padding: 6px 0; }
    .nv.trilho-recolhido .trilho .eco-portal { width: 42px; justify-content: center; padding: 0; }
    .nv.trilho-recolhido .visoes, .nv.trilho-recolhido .trilho-pe { justify-items: center; }
    .nv.trilho-recolhido .trilho-pe { width: 100%; }
    .nv.trilho-recolhido .trilho-pe .recolher > .ic { transform: rotate(180deg); }
  }
  /* com o paciente aberto a barra já fica só em ícones: o botão de recolher não tem o que fazer ali */
  .nv.com-painel #btnRecolher { display: none; }

  /* ======================= painel aberto em tela larga: barra lateral recolhida em ícones ======================= */
  @media (min-width: 1100px) {
    body.nv.com-painel .casca { grid-template-columns: var(--trilho-mini) minmax(0, 1fr); }
    body.nv.com-painel .area { margin-right: min(var(--largura-painel), 100%); }
    body.nv.com-painel .quadro, body.nv.com-painel .ronda { margin-right: 0; }
    body.nv.com-painel .quadro { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
    .nv.com-painel nav.trilho { padding: 16px 10px 12px; align-items: center; }
    .nv.com-painel nav.trilho .rot, .nv.com-painel .marca, .nv.com-painel .busca-trilho, .nv.com-painel .setores,
    .nv.com-painel .legenda, .nv.com-painel .visoes .qtd { display: none; }
    .nv.com-painel .so-mini { display: flex !important; }
    .nv.com-painel .marca-linha { flex-direction: column; padding: 0 0 8px; }
    .nv.com-painel .item, .nv.com-painel .visoes button { width: 42px; justify-content: center; padding: 0; }
    .nv.com-painel .visoes { justify-items: center; }
  }

  /* ======================= celular: gaveta, abas por raia, painel em tela cheia ======================= */
  @media (max-width: 860px) {
    .nv #btnRecolher { display: none; }
    .nv .casca { grid-template-columns: minmax(0, 1fr); }
    .nv nav.trilho { position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); z-index: 30; transform: translateX(-102%); transition: transform var(--mov); box-shadow: 10px 0 30px rgba(16,24,40,.18); }
    .nv.gaveta-aberta nav.trilho { transform: none; }
    .nv .so-celular { display: inline-flex !important; }
    .nv .topo { padding: 8px 14px; gap: 6px; }
    .nv .topo-l1 { flex-wrap: nowrap; gap: 8px; }
    .nv .topo-l1 .situacao-saidas { white-space: nowrap; padding-inline: 8px; font-size: 12px; }
    .nv .topo-l1 .situacao-saidas .saidas-data { display: none; }
    .nv .topo-l2 { min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: thin; }
    .nv .topo-l2 > *, .nv .topo-l2 .filtros-sinal { flex: none; flex-wrap: nowrap; }
    .nv .topo-l2 button { white-space: nowrap; }
    /* ronda no celular: título e progresso numa linha; embaixo, o aviso de atraso (se houver) e as ações do dia numa faixa que rola de lado */
    .nv[data-visao="ronda"] .topo-l1 { flex-wrap: wrap; }
    .nv[data-visao="ronda"] .topo-l1 > .espaco { flex: 1 0 100%; height: 0; }
    .nv[data-visao="ronda"] .progresso .barra { width: 40px; }
    .nv[data-visao="ronda"] .topo-l1 .acoes-ronda { flex: 1 1 0; min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .nv .acoes-ronda > * { flex: none; }
    .nv[data-visao="ronda"] .dica-rolagem-ronda { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; color: var(--suave); font-size: 12px; }
    .nv .dica-rolagem-ronda .ic { margin: 0; }
    .nv .titulo-visao { font-size: 18px; }
    .nv .ctx, .nv .topo-l2 .espaco, .nv .topo .ordem { display: none; }
    /* ronda no celular: filtros e ações numa faixa com rolagem lateral; ações do antimicrobiano descem para a 3ª linha */
    .nv[data-visao="ronda"] .topo-l2 { scrollbar-width: thin; }
    .nv[data-visao="ronda"] .topo-l2 > *, .nv[data-visao="ronda"] .filtros-sinal { flex: none; flex-wrap: nowrap; }
    .nv .r-atm:not(.feito) { grid-template-columns: auto minmax(0, 1fr); }
    .nv .r-atm:not(.feito) .r-acoes { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; }
    .nv .r-rodape .dica-teclado { display: none; }
    .nv[data-visao="ronda"] #principal { padding-bottom: 0; }
    /* janelas: tela cheia, uma coluna, rodapé embaixo (a confirmação continua pequena) */
    .nv .dialogo:not(.confirmacao), .nv .dialogo.largo { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
    .nv .dialogo:not(.confirmacao) form { height: 100%; max-height: 100%; min-height: 0; }
    .nv .dialogo-meio { padding: 10px 16px 14px; }
    .nv .grade-form > .campo, .nv .grade-form > .campo.largo { grid-column: 1 / -1; }
    /* telas largas: abas das configurações viram uma faixa que rola de lado; preferência em uma coluna */
    .nv .config-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .nv .config-grade .abas-config { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
    .nv .config-grade .abas-config [role="tab"] { flex: none; }
    .nv .pref { grid-template-columns: minmax(0, 1fr); } .nv .pref-exp { grid-column: 1; }
    .nv .conf-paciente .conf-item { grid-template-columns: minmax(0, 1fr); }
    .nv #ind-tabelas { grid-template-columns: minmax(0, 1fr); }
    .nv .painel.largo .painel-corpo { padding: 16px 14px 20px; }
    .nv .indicadores-topo { margin: -16px -14px 0; padding: 10px 14px; }
    .nv .dialogo:not(.confirmacao) .dialogo-acoes { position: static; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } /* o "+" flutuante não aparece na ronda */
    .nv #btnNovo .rot { display: none; }
    .nv #btnNovo { width: 40px; padding: 0; justify-content: center; }
    .nv[data-visao="quadro"] .abas-raia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--raia); }
    .nv .abas-raia button { display: flex; justify-content: center; align-items: baseline; gap: 5px; min-height: 40px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--suave);
                                  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
    .nv .abas-raia button b { font-size: 14px; font-weight: 800; color: var(--texto); }
    .nv .abas-raia button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
    .nv .quadro { grid-template-columns: minmax(0, 1fr); padding: 0 14px 12px; }
    .nv .quadro > .coluna:not(.ativa) { display: none; }
    .nv .coluna { background: transparent; }
    .nv .coluna-topo { display: none; }
    .nv .raia-corpo { padding: 0 2px 14px; }
    .nv .painel { width: 100%; border: 0; }
    .nv .painel.janela { inset: 0; transform: none; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .nv .ronda { padding: 0 14px 14px; }
    /* regras antigas do celular (camada 4) que não valem na gaveta */
    .nv .visoes { margin-left: 0; order: 0; }
    .nv .visoes button { width: 100%; justify-content: flex-start; padding: 0 12px; }
    body.nv .marca span { display: inline; }
    /* "+" flutuante (camada 4) continua no celular; aqui só o formato em pílula */
    .nv #btnNovo { border-radius: 999px; }
  }
  @media (max-width: 480px) {
    .nv .pend { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px; gap: 6px; }
    .nv .pend-txt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px; padding: 0; }
    .nv .pend-txt .pend-resumo { grid-column: 1 / -1; grid-row: 2; white-space: normal; overflow: visible; }
    .nv .pend-txt .pend-seta { grid-column: 3; grid-row: 1; }
    .nv .pend-ok { display: flex; justify-content: flex-end; align-self: center; }
    .nv .pend:has(.pend-ok .btn:not(.ciente-icone)) { grid-template-columns: minmax(0, 1fr); }
    .nv .pend-det { padding: 4px 0; }
  }
  /* Última camada: os seletores compactos acima não podem diminuir alvos de toque. */
  @media (pointer: coarse) {
    .nv .item, .nv .filtro, .nv .btn, .nv .btn.pequeno, .nv .pend-ok .btn,
    .nv .r-acoes .btn.pequeno, .nv .acoes-ronda .btn.pequeno, .nv .ac-dir .btn,
    .nv .visoes button, .nv .nav-paciente .btn.icone, .nv .painel-rodape .btn,
    .nv .abas-raia button, .nv .situacao-saidas, .nv .pend-txt,
    .nv .dialogo .segmentado:not(.grade) label, .nv .dialogo .segmentado.grade label,
    .nv .topo .segmentado button { min-height: 44px; min-width: 44px; }
    .nv .btn.icone, .nv .r-acoes .btn.icone, .nv .acoes-ronda .btn.icone,
    .nv .nav-paciente .btn.icone { min-width: 44px; width: 44px; min-height: 44px; }
    .nv #btnNovo { min-height: 44px; min-width: 44px; }
    .nv .pend .btn.ciente-icone { min-width: 44px; width: 44px; height: 44px; }
  }

  /* ======================= janela do paciente compacta (12/11/2026) =======================
     Ficha à esquerda (identificação, dados rápidos, "Precisa de você" recolhível) e os antimicrobianos à direita, um embaixo do
     outro e recolhidos. Escala única: controles de 32/40/44 px, ícones 14/16/18 px, espaços em múltiplos de 4.
     Afinado para 1366 × 768 com zoom de 90% (≈ 1518 × 730 px de área útil); abaixo de 900 px vira uma coluna só. */
  .nv { --pc-ficha: clamp(340px, 27vw, 400px); }

  /* situação da importação, sempre no topo da tela inicial */
  .nv .situacao-saidas { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; line-height: 1; font-weight: 600; }
  .nv .situacao-saidas .ic { margin: 0; display: block; }
  .nv .situacao-saidas.em-dia { background: var(--verde-f); color: var(--verde); border-color: var(--verde-borda); }
  .nv .situacao-saidas.em-dia:hover { border-color: var(--verde); }
  .nv .situacao-saidas.atrasada { background: var(--vermelho); color: var(--vermelho-texto); border-color: var(--vermelho); }
  .nv .saidas-ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
  .nv .saidas-ponto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: saidas-pulso 2.6s cubic-bezier(.32,.72,0,1) infinite; }
  .nv .situacao-saidas.atrasada .saidas-ponto::after { animation-duration: 1.4s; }
  @keyframes saidas-pulso { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .nv .saidas-ponto::after { animation: none; } }

  /* botões da janela: ícone em bloco, sempre no centro exato */
  .nv .painel.janela .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
  .nv .painel.janela .btn .ic, .nv .painel.janela .painel-rodape .btn .ic { display: block; margin: 0; }
  .nv .painel.janela .btn.icone { gap: 0; padding: 0; width: 40px; min-width: 40px; height: 40px; min-height: 40px; }

  @media (min-width: 901px) {
    /* casca: a identificação é o topo da coluna da ficha; ‹ › e ✕ ficam no canto, sobre a coluna dos antimicrobianos */
    .nv .painel.janela:has(.pc-col) { display: grid; grid-template-columns: var(--pc-ficha) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
      width: min(1320px, calc(100vw - 32px)); height: min(900px, calc(100vh - 32px)); background: var(--superficie); }
    .nv .painel.janela:has(.pc-col) .painel-topo { display: contents; }
    .nv .painel.janela:has(.pc-col) .painel-titulo { grid-column: 1; grid-row: 1; padding: 18px 18px 6px; background: var(--superficie-2); border-right: 1px solid var(--borda); }
    .nv .painel.janela:has(.pc-col) .painel-topo-acoes { position: absolute; top: 10px; right: 12px; z-index: 3; gap: 2px; }
    .nv .painel.janela .painel-corpo:has(> .pc-col) { display: contents; }
    .nv .painel.janela .pc-col { display: grid; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .nv .painel.janela .pc-lado { grid-column: 1; grid-row: 2; gap: 12px; padding: 6px 18px 16px; background: var(--superficie-2); border-right: 1px solid var(--borda); }
    .nv .painel.janela .pc-principal { grid-column: 2; grid-row: 1 / 3; gap: 0; padding: 0 20px 16px; }
    .nv .painel.janela .painel-rodape { grid-column: 1 / -1; grid-row: 3; }
    .nv .painel.janela .painel-corpo.atualizando .pc-col { filter: grayscale(15%); pointer-events: none; }
  }

  /* tamanhos fixos dos ícones (o .ic da base segue a fonte) */
  .nv .ac-seta .ic, .nv .pc-seta .ic, .nv .sa-acoes .ic, .nv .ac-sec-t .ic, .nv .ac-conf .ic, .nv .pc-sinal .ic, .nv .ac-falta-linha .ic { width: 14px; height: 14px; }
  .nv .ac-ie .ic, .nv .ac-vazio .ic { width: 16px; height: 16px; }
  .nv .ac-dobra-cab .ic { width: 12px; height: 12px; }
  .nv .ac-falta .ic, .nv .ac-auto .ic { width: 13px; height: 13px; }
  .nv .situacao-saidas .ic { width: 14px; height: 14px; }
  .nv .painel.janela .painel-rodape .btn .ic { width: 16px; height: 16px; }

  /* identificação */
  .nv .painel.janela .pt-local { font-size: 13px; font-weight: 600; gap: 4px 10px; align-items: center; }
  .nv .painel.janela .pt-pront { font-size: 12px; }
  .nv .painel.janela .pt-nome { font-size: clamp(20px, .9vw + 10px, 24px); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 4px 0 2px; }
  .nv .painel.janela .pt-alergia { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
    background: var(--vermelho-f); color: var(--vermelho); border: 1px solid var(--vermelho-borda); }
  .nv .painel.janela .pt-alergia .ic { margin: 0; }
  .nv .painel.janela .painel-titulo small { font-size: 13px; margin-top: 4px; }

  /* coluna da ficha: seções planas, separadas por linha fina */
  .nv .painel.janela .pc-lado > section, .nv .painel.janela .pc-lado > details.bloco, .nv .painel.janela .pc-lado > .bloco {
    background: transparent; border: 0; border-top: 1px solid var(--borda); border-radius: 0; box-shadow: none; padding: 12px 0 0; }
  .nv .ficha-rapida { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; margin: 0 -8px; }
  .nv .ficha-rapida .fr { display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: auto auto; column-gap: 4px; align-items: center; min-width: 0;
    padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; color: inherit; }
  .nv .ficha-rapida button.fr { cursor: pointer; }
  .nv .ficha-rapida button.fr:hover { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borda); }
  .nv .ficha-rapida .fr-k { grid-column: 1; font-size: 12px; color: var(--suave); line-height: 1.2; }
  .nv .ficha-rapida .fr-v { grid-column: 1; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nv .ficha-rapida .fr .ic { grid-column: 2; grid-row: 1 / 3; margin: 0; width: 14px; height: 14px; color: var(--primaria); opacity: 0; transition: opacity var(--mov); }
  .nv .ficha-rapida .fr:hover .ic, .nv .ficha-rapida .fr:focus-visible .ic { opacity: 1; }
  .nv .ficha-rapida .fr.falta .fr-k, .nv .ficha-rapida .fr.falta .fr-v { color: var(--ambar); }

  /* "Precisa de você": cabeçalho que recolhe; recolhido, mostra os sinais */
  .nv .pc-cab-h { margin: 0; }
  .nv .pc-cab { display: flex; align-items: center; gap: 8px; width: calc(100% + 16px); min-height: 36px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--texto); cursor: pointer; text-align: left; }
  .nv .pc-cab:hover { background: var(--hover); }
  .nv .pc-seta { display: grid; place-items: center; color: var(--suave); transition: transform 220ms var(--curva); }
  .nv .pc-seta .ic { margin: 0; display: block; }
  .nv .pc-cab[aria-expanded="true"] .pc-seta { transform: rotate(90deg); }
  .nv .pc-cab .qtd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; background: var(--ambar-f); color: var(--ambar); }
  .nv .pc-resumo { margin-left: auto; display: flex; gap: 10px; font-size: 12px; }
  .nv .pc-sinal { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
  .nv .pc-sinal .ic { margin: 0; display: block; }
  .nv .pc-sinal.risco { color: var(--vermelho); } .nv .pc-sinal.atencao { color: var(--ambar); }
  .nv .painel.janela .precisa .pend-lista { margin-top: 4px; }
  .nv .painel.janela .pend-txt { min-height: 36px; align-items: center; }
  .nv .painel.janela .pend-resumo { font-size: 13px; line-height: 1.35; }
  .nv .painel.janela .pend-ok .btn { min-height: 32px; height: 32px; }
  .nv .painel.janela .pend .btn.ciente-icone { width: 32px; min-width: 32px; padding: 0; }

  /* coluna dos antimicrobianos */
  .nv .painel.janela .pc-principal > .secao-atms { background: none; border: 0; box-shadow: none; padding: 0; gap: 6px; }
  .nv .painel.janela .secao-atms > .secao-titulo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 60px; margin: 0 -20px 6px; padding: 10px 196px 10px 20px;
    background: var(--superficie); border-bottom: 1px solid var(--linha); }
  .nv .painel.janela .secao-titulo h3 { font-size: 16px; font-weight: 700; }
  .nv .sa-cont { font-size: 13px; color: var(--suave); white-space: nowrap; }
  .nv .sa-acoes { margin-left: auto; display: flex; gap: 4px; align-items: center; }
  .nv .sa-acoes [aria-expanded="true"] .ic { transform: rotate(180deg); }
  .nv .sa-grupo { margin: 10px 4px 2px; font-size: 12px; font-weight: 600; color: var(--suave); }

  /* cartão do antimicrobiano: uma linha recolhida */
  .nv .painel .ac { display: block; padding: 0; gap: 0; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: none;
    transition: border-color var(--mov), box-shadow var(--mov); }
  .nv .painel .ac::before { display: none; }
  .nv .painel .ac:hover { border-color: var(--borda-hover); }
  .nv .painel .ac.aberto { border-color: var(--borda-hover); box-shadow: var(--sombra-hover); }
  .nv .painel .ac.enc { background: var(--superficie-2); }
  .nv .ac-cab { display: grid; grid-template-columns: 14px minmax(0, 1fr) 44px 36px 84px; column-gap: 12px; align-items: center; width: 100%; min-height: 52px;
    padding: 6px 16px; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  .nv .ac-seta { display: grid; place-items: center; color: var(--suave); transition: transform 220ms var(--curva); }
  .nv .ac-seta .ic { margin: 0; display: block; }
  .nv .ac-cab[aria-expanded="true"] .ac-seta { transform: rotate(90deg); color: var(--texto); }
  .nv .ac-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; margin: 0; }
  .nv .painel .ac-nome { font-size: 15px; font-weight: 700; }
  .nv .painel .ac-dose { font-size: 14px; font-weight: 600; color: var(--primaria); white-space: nowrap; }
  .nv .painel .ac-dose.sem { color: var(--ambar); }
  .nv .painel .ac.enc .ac-nome, .nv .painel .ac.enc .ac-dose { color: var(--suave); font-weight: 600; }
  .nv .ac-cat { align-self: center; font-size: 10.5px; font-weight: 700; line-height: 1.2; padding: 2px 6px; border-radius: 4px; }
  .nv .ac-cat.reserva { background: var(--vermelho-f); color: var(--vermelho); }
  .nv .ac-cat.estrategico { background: var(--ambar-f); color: var(--ambar); }
  .nv .ac-falta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ambar); }
  .nv .ac-falta .ic { margin: 0; }
  .nv .ac-conf { justify-self: center; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ambar); line-height: 1; }
  .nv .ac-conf .ic { margin: 0; display: block; }
  .nv .ac-ie { justify-self: center; position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--borda-campo); }
  .nv .ac-ie .ic { margin: 0; display: block; }
  .nv .ac-ie.tem { background: var(--verde-f); color: var(--verde); }
  .nv .ac-ie.aguarda { background: var(--azul-f); color: var(--azul); }
  .nv .ac-ie-n { position: absolute; top: -3px; right: -4px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--suave); color: var(--superficie); box-shadow: 0 0 0 2px var(--superficie); font-size: 10px; font-weight: 800; line-height: 1; }
  .nv .ac-ie.tem .ac-ie-n { background: var(--verde); } .nv .ac-ie.aguarda .ac-ie-n { background: var(--azul); }
  .nv .ac-dd { display: grid; justify-items: end; gap: 6px; }
  .nv .ac-d { font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .nv .ac-d small { font-size: 12px; font-weight: 600; color: var(--suave); }
  .nv .ac-dd.alem .ac-d { color: var(--vermelho); }
  .nv .ac-barra { position: relative; width: 100%; max-width: 72px; height: 4px; border-radius: 2px; background: var(--raia); overflow: hidden; }
  .nv .ac-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--primaria); }
  .nv .ac-dd.alem .ac-barra i { background: var(--vermelho); }
  .nv .ac.enc .ac-barra i { background: var(--borda-campo); }

  /* cartão aberto: dias, estratégias, cultura e o que fica recolhido */
  .nv .ac-corpo { display: grid; gap: 12px; padding: 0 16px 14px 42px; }
  .nv .ac-sec-t { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--suave); }
  .nv .ac-sec-t .btn { margin-left: auto; }
  .nv .ac-sec-sub { font-weight: 500; }
  .nv .ac-sec-sub::before { content: "· "; }
  .nv .ac-vazio { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px dashed var(--borda-hover); border-radius: 8px; color: var(--suave); font-size: 13px; }
  .nv .ac-vazio .ic { margin: 0; }
  .nv .ac-corpo .estrategia { width: 100%; margin: 0 0 4px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 13px; }
  .nv .ac-corpo .estrategia:hover { border-color: var(--borda-hover); }
  .nv .ac-falta-linha { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 8px; background: var(--ambar-f); color: var(--ambar); font-size: 13px; }
  .nv .ac-falta-linha .ic { margin: 0; }
  .nv .ac-falta-linha .btn { margin-left: auto; }
  .nv .ac-dobra { border-top: 1px solid var(--linha); padding-top: 4px; }
  .nv .ac-dobra-cab { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 12px; color: var(--suave); cursor: pointer; line-height: 1; }
  .nv .ac-dobra-cab:hover { background: var(--hover); color: var(--texto); }
  .nv .ac-dobra-cab .ic { margin: 0; display: block; transition: transform var(--mov); }
  .nv .ac-dobra-cab[aria-expanded="true"] .ic:first-child { transform: rotate(90deg); }
  .nv .ac-dobra-cab b { color: var(--ambar); }
  .nv .ac-auto { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--suave); }
  .nv .ac-dobra .lista-conf, .nv .ac-dobra .ac-det { margin-top: 6px; }
  .nv .painel .ac-det { border-top: 0; padding-top: 0; font-size: 13px; }

  /* dias de uso: bolinha com o número e a data embaixo; quebra a linha em vez de rolar de lado */
  .nv .ac .gd-rolagem { overflow: visible; padding: 0; }
  .nv .ac .gd-grade { display: flex; flex-wrap: wrap; gap: 16px 2px; min-width: 0; padding-top: 12px; }
  .nv .ac .gd { width: 36px; min-height: 0; display: grid; grid-template-rows: auto auto; justify-items: center; gap: 3px; padding: 0; border-radius: 8px; background: none; box-shadow: none; }
  .nv .ac button.gd:hover { background: none; }
  .nv .ac button.gd:hover .gd-n { box-shadow: 0 0 0 2px var(--borda-hover); }
  .nv .ac .gd-p { display: none; }
  .nv .ac .gd-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--suave);
    background: var(--superficie-2); border: 1.5px solid transparent; transition: box-shadow var(--mov); }
  .nv .ac .gd-d { padding: 0; font-size: 10.5px; }
  .nv .ac .gd.certo .gd-n { background: var(--verde-f); color: var(--verde); }
  .nv .ac .gd.conferir { background: none; }
  .nv .ac .gd.conferir .gd-n { background: var(--superficie); border-color: var(--marca-atencao); color: var(--ambar); }
  .nv .ac .gd.espera .gd-n { background: var(--superficie); border: 1.5px dashed var(--primaria); color: var(--primaria); }
  .nv .ac .gd.futuro { box-shadow: none; }
  .nv .ac .gd.futuro .gd-n { background: none; color: var(--borda-campo); font-weight: 500; }
  .nv .ac .gd.futuro .gd-d { opacity: .65; }
  .nv .ac .gd.alem:not(.futuro) { background: none; }
  .nv .ac .gd.alem .gd-n { border-color: var(--vermelho); color: var(--vermelho); }
  .nv .ac .gd.hoje { box-shadow: none; }
  .nv .ac .gd.hoje .gd-d { color: var(--primaria); font-weight: 700; }
  .nv .ac .gd.sel { box-shadow: none; }
  .nv .ac .gd.sel .gd-n { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto); }
  .nv .ac .gd.fimprev::after { right: -2px; top: -10px; bottom: 14px; border-right-width: 1.5px; border-right-color: var(--suave-2); }
  .nv .ac .gd-mk { top: -13px; font-size: 10px; }
  .nv .ac .gd-mk + .gd-mk { top: -13px; transform: translateX(8px); }
  .nv .ac .ac-dia-det { margin-top: 10px; }

  /* janela estreita (tablet, ou zoom alto): uma coluna, a ficha em cima */
  @media (max-width: 900px) {
    .nv .painel.janela .pc-lado { display: grid; gap: 12px; }
    .nv .painel.janela .pc-principal { display: grid; gap: 6px; }
    .nv .ac-cab { grid-template-columns: 14px minmax(0, 1fr) auto auto auto; column-gap: 8px; padding-inline: 12px; }
    .nv .ac-id { flex-direction: column; align-items: flex-start; }
    .nv .ac-barra { display: none; }
    .nv .ac-corpo { padding-left: 12px; padding-right: 12px; }
    .nv .painel.janela .secao-atms > .secao-titulo { position: static; margin: 0 0 6px; padding: 0; border: 0; min-height: 44px; }
    .nv .sa-cont, .nv .sa-rot { display: none; }
  }

  /* linha do "Precisa de você": título e resumo juntos; na janela, título em cima e resumo numa linha só (o inteiro aparece ao abrir) */
  .nv .pend-textos { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px var(--esp-4); }
  .nv .pend-inteiro { display: none; }
  .nv .painel.janela .pend { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 2px 0; border-top-color: var(--linha); }
  .nv .painel.janela .pend::before { display: none; }
  .nv .painel.janela .pend-txt { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; padding: 4px 6px; }
  .nv .painel.janela .pend-ico .ic { width: 16px; height: 16px; display: block; }
  .nv .painel.janela .pend-textos { display: grid; gap: 1px; }
  .nv .painel.janela .pend-textos b { font-size: 13px; line-height: 1.25; }
  .nv .painel.janela .pend-resumo { font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .nv .painel.janela .pend-seta { display: none; }
  .nv .painel.janela .pend-det { padding: 0 6px 8px 32px; font-size: 13px; }
  .nv .painel.janela .pend-inteiro { display: block; margin: 0; color: var(--texto); }

  /* editar / excluir o antimicrobiano: ícones no canto do primeiro título do cartão aberto */
  .nv .ac-ferr { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .nv .ac-ferr + .btn { margin-left: 6px; }
  .nv .painel.janela .ac-ferr .btn.icone { width: 32px; min-width: 32px; height: 32px; min-height: 32px; color: var(--suave); }
  .nv .painel.janela .ac-ferr .btn.icone .ic { width: 16px; height: 16px; }
  .nv .painel.janela .ac-ferr .btn.icone:hover { color: var(--primaria); background: var(--primaria-f); }
  .nv .painel.janela .ac-ferr .ac-excluir:hover { color: var(--vermelho); background: var(--vermelho-f); }
  .nv .ac-ferr .ac-auto { margin: 0 6px 0 0; }


  /* pequena também no celular (lá os outros diálogos ocupam a tela toda) */
  .nv .dialogo.sobre:not(.confirmacao) { width: min(400px, calc(100% - 32px)); height: fit-content; max-height: calc(100vh - 32px); margin: auto; border-radius: 16px; }
  .nv .dialogo.sobre:not(.confirmacao) form { display: grid; justify-items: center; align-content: start; gap: 8px; height: auto; min-height: 0; max-height: none;
    padding: 28px 24px 20px; text-align: center; }
  .sobre .marca-ic { width: 48px; height: 48px; margin-bottom: 8px; }
  .sobre h2 { margin: 0; font-size: 17px; }
  .sobre p { margin: 0; color: var(--suave); font-size: 13.5px; }
  .sobre .sobre-autora { width: 100%; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--linha); }
  .sobre .sobre-autora b { display: block; color: var(--texto); font-size: 15px; font-weight: 700; }
  .sobre .btn { margin-top: 12px; min-height: 44px; height: auto; padding: 0 24px; }
  .nv .trilho-pe .sobre-link { justify-self: start; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--suave-2);
    font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .nv .trilho-pe .sobre-link:hover { color: var(--primaria); }


  .nv .dialogo.legenda-modal {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    border-radius: 18px; padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .22);
    border: 1px solid var(--borda);
    background: var(--superficie);
  }
  .nv .dialogo.legenda-modal form {
    display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden; padding: 0;
  }
  .nv .dlg-legenda-topo {
    display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px;
    border-bottom: 1px solid var(--linha);
  }
  .nv .dlg-legenda-ico {
    width: 36px; height: 36px; border-radius: 10px; background: var(--primaria-f); color: var(--primaria);
    display: grid; place-items: center; flex: none;
  }
  .nv .dlg-legenda-ico .ic { margin: 0; }
  .nv .dlg-legenda-tit { flex: 1; min-width: 0; }
  .nv .dlg-legenda-tit h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--texto); letter-spacing: -.01em; }
  .nv .dlg-legenda-tit p { margin: 3px 0 0; font-size: 12px; color: var(--suave); line-height: 1.35; }
  .nv .dlg-legenda-corpo { flex: 1; overflow-y: auto; padding: 16px 22px; min-height: 100px; }
  .nv .lista-legenda-grade {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px;
  }
  .nv .lista-legenda-grade li {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px;
    font-size: 12.5px; font-weight: 600; color: var(--texto);
  }
  .nv .lista-legenda-grade li .ai { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; }
  .nv .lista-legenda-grade li .rot-legenda { flex: 1; min-width: 0; line-height: 1.25; }
  .nv .lista-legenda-grade li .n {
    margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--superficie);
    color: var(--suave); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    border: 1px solid var(--borda);
  }
  .nv .dlg-legenda-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 22px; border-top: 1px solid var(--linha); background: var(--superficie-2);
  }
  .nv .dlg-legenda-dica { font-size: 12px; color: var(--suave-2); }
  .nv .btn-legenda-topo {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--borda); background: var(--superficie);
    color: var(--suave); font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: border-color var(--mov), background-color var(--mov), color var(--mov);
  }
  .nv .btn-legenda-topo:hover {
    border-color: var(--borda-hover); color: var(--texto); background: var(--hover);
  }
  .nv .btn-legenda-topo .ic { margin: 0; color: var(--suave-2); }
  .nv .btn-legenda-topo:hover .ic { color: var(--texto); }
  .nv .btn-recolher-topo {
    width: 28px; height: 28px; min-width: 28px; min-height: 28px;
    border-radius: 8px; border: 1px solid var(--borda);
    background: var(--superficie); color: var(--suave-2);
    display: grid; place-items: center; cursor: pointer;
    margin-left: auto; padding: 0; flex: none;
    transition: border-color var(--mov), background-color var(--mov), color var(--mov), transform var(--mov);
  }
  .nv .btn-recolher-topo:hover {
    background: var(--superficie-2); color: var(--texto); border-color: var(--borda-hover);
  }
  .nv .btn-recolher-topo .ic { margin: 0; }
  .nv.trilho-recolhido .btn-recolher-topo { margin-left: 0; transform: rotate(180deg); }
  @media (pointer: coarse) {
    .nv .btn-legenda-topo { min-height: 44px; }
    .nv .btn-recolher-topo { min-height: 36px; min-width: 36px; }
  }


  /* Doses.html — base de doses usuais e ajuste renal (tela cheia), igual na tela da farmácia e na do infectologista.
     Só tokens de Estilo.html; as classes daqui começam com dz-. */
  .dz-tela { width: min(1100px, calc(100vw - 32px)); max-width: none; height: calc(100vh - 32px); max-height: none; margin: auto; padding: 0;
    border: 1px solid var(--borda); box-sizing: border-box;
    border-radius: var(--raio); background: var(--fundo); color: var(--texto); box-shadow: var(--sombra-lg); }
  .dz-tela::backdrop { background: rgba(15, 23, 42, .45); }
  .dz-casca { display: grid; grid-template-rows: auto auto 1fr; height: 100%; min-height: 0; }
  .dz-topo { display: flex; gap: var(--esp-6); align-items: flex-start; padding: var(--esp-8) var(--esp-9) var(--esp-5); background: var(--superficie);
    border-bottom: 1px solid var(--borda); }
  .dz-topo h2 { margin: 0; font-size: var(--fs-2xl); }
  .dz-topo p { margin: var(--esp-2) 0 0; color: var(--suave); font-size: var(--fs-md); max-width: 72ch; }
  .dz-topo .dz-esp { flex: 1; }
  .dz-barra { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; padding: var(--esp-5) var(--esp-9); background: var(--superficie);
    border-bottom: 1px solid var(--borda); }
  .dz-filtro { border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; padding: var(--esp-3) var(--esp-6); cursor: pointer;
    font-size: var(--fs-md); color: var(--texto); }
  .dz-filtro b { font-variant-numeric: tabular-nums; margin-left: var(--esp-2); }
  .dz-filtro[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
  .dz-busca { flex: 1 1 200px; min-width: 0; border: 1px solid var(--borda-campo); border-radius: 8px; padding: var(--esp-4) var(--esp-6);
    background: var(--campo-fundo); color: var(--texto); font: inherit; }
  .dz-status { font-size: var(--fs-md); color: var(--suave); min-height: 1.2em; }
  .dz-status.erro { color: var(--vermelho); font-weight: 600; }
  .dz-corpo { overflow: auto; padding: var(--esp-8) var(--esp-9) var(--esp-9); min-height: 0; }
  .dz-grupo { margin-bottom: var(--esp-9); }
  .dz-grupo > h3 { font-size: var(--fs-lg); margin: 0 0 var(--esp-4); color: var(--suave); letter-spacing: .02em; }
  .dz-esq { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--marca-neutra); border-radius: var(--r-bloco);
    padding: var(--esp-7) var(--esp-8); margin-bottom: var(--esp-5); display: grid; gap: var(--esp-5); min-width: 0; }
  .dz-esq.s-VALIDADO { border-left-color: var(--verde); }
  .dz-esq.s-AGUARDANDO { border-left-color: var(--marca-atencao); }
  .dz-esq.s-DEVOLVIDO { border-left-color: var(--vermelho); }
  .dz-cab { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-6); align-items: baseline; }
  .dz-cab h4 { margin: 0; font-size: var(--fs-xl); }
  .dz-cab .dz-via { color: var(--suave); font-size: var(--fs-md); }
  .dz-selo { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px var(--esp-4); border-radius: 4px;
    background: var(--outro-f); color: var(--outro); white-space: nowrap; }
  .dz-selo.VALIDADO { background: var(--verde-f); color: var(--verde); }
  .dz-selo.AGUARDANDO { background: var(--ambar-f); color: var(--ambar); }
  .dz-selo.DEVOLVIDO { background: var(--vermelho-f); color: var(--vermelho); }
  .dz-selo.fda-DIVERGE { background: var(--vermelho-f); color: var(--vermelho); }
  .dz-selo.fda-CONFERE { background: var(--azul-f); color: var(--azul); }
  .dz-rol { overflow-x: auto; }
  .dz-tab { border-collapse: collapse; width: 100%; font-size: var(--fs-base); }
  .dz-tab th { text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 0 var(--esp-6) var(--esp-3) 0; }
  .dz-tab td { border-top: 1px solid var(--linha); padding: var(--esp-3) var(--esp-6) var(--esp-3) 0; vertical-align: top; }
  .dz-tab .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dz-tab tr.normal td { color: var(--suave); }
  .dz-tab small { display: block; color: var(--suave); }
  .dz-meta { display: grid; gap: var(--esp-2); font-size: var(--fs-md); color: var(--suave); }
  .dz-meta strong { color: var(--texto); }
  .dz-fda { font-size: var(--fs-md); padding: var(--esp-4) var(--esp-6); border-radius: 8px; background: var(--vermelho-f); color: var(--texto); }
  .dz-devolvido { font-size: var(--fs-md); padding: var(--esp-4) var(--esp-6); border-radius: 8px; background: var(--vermelho-f); border: 1px solid var(--vermelho-borda); }
  .dz-vigente { font-size: var(--fs-md); }
  .dz-vigente summary { cursor: pointer; color: var(--suave); }
  .dz-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; }
  .dz-acoes .dz-dica { color: var(--suave); font-size: var(--fs-md); }
  .dz-decisao { display: grid; gap: var(--esp-4); padding: var(--esp-6); border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); }
  .dz-decisao textarea, .dz-form textarea, .dz-form input, .dz-form select, .dz-faixas input, .dz-faixas select {
    font: inherit; font-size: var(--fs-base); border: 1px solid var(--borda-campo); border-radius: 6px; padding: var(--esp-3) var(--esp-4);
    background: var(--campo-fundo); color: var(--texto); min-width: 0; box-sizing: border-box; }
  .dz-decisao textarea, .dz-form textarea { width: 100%; min-height: 3.5em; resize: vertical; }
  .dz-hist { font-size: var(--fs-md); }
  .dz-hist ol { margin: var(--esp-4) 0 0; padding-left: var(--esp-9); display: grid; gap: var(--esp-3); }
  .dz-vazio { color: var(--suave); text-align: center; padding: var(--esp-9) 0; }
  .dz-form { display: grid; gap: var(--esp-7); max-width: 980px; }
  .dz-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esp-6); }
  .dz-campo { display: grid; gap: var(--esp-2); min-width: 0; align-content: start; }
  .dz-campo label, .dz-rot { font-size: var(--fs-md); font-weight: 600; }
  .dz-campo .dz-ajuda { font-size: var(--fs-xs); color: var(--suave); }
  .dz-campo.largo { grid-column: 1 / -1; }
  .dz-faixas { overflow-x: auto; }
  .dz-faixas table { border-collapse: collapse; min-width: 760px; width: 100%; }
  .dz-faixas th { text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 0 var(--esp-3) var(--esp-3) 0; }
  .dz-faixas td { padding: var(--esp-2) var(--esp-3) var(--esp-2) 0; }
  .dz-faixas input.n { width: 5.5em; }
  .dz-faixas input.d { width: 7em; }
  .dz-faixas input.nota { width: 100%; min-width: 12em; }
  .dz-erros { color: var(--vermelho); font-size: var(--fs-md); }
  .dz-erros ul { margin: var(--esp-2) 0 0; padding-left: var(--esp-9); }
  .dz-rodape { display: flex; flex-wrap: wrap; gap: var(--esp-4); justify-content: flex-end; position: sticky; bottom: calc(-1 * var(--esp-9));
    padding: var(--esp-6) 0; background: var(--fundo); border-top: 1px solid var(--borda); }
  @media (max-width: 700px) {
    .dz-tela { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
    .dz-topo, .dz-barra { padding-inline: var(--esp-8); }
    .dz-corpo { padding-inline: var(--esp-8); }
  }

/* Só no Netlify (gerar.js junta ao fim do CSS das telas): caixa de login e o "Sair". Usa os tokens de Estilo.html. */
/* fundo opaco: com a sessão vencida, os pacientes da cópia da aba não ficam à mostra atrás da caixa */
#pgaLogin { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--fundo, #f3f5f7); }
#pgaLogin[hidden] { display: none; }
.pga-login-caixa { width: min(380px, 100%); background: var(--superficie, #fff); color: var(--texto, #111827);
  border: 1px solid var(--borda, #e1e5ea); border-radius: 14px; padding: 24px; display: grid; gap: 14px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.12); }
.pga-login-caixa h2 { margin: 0; font-size: 1.25rem; }
.pga-login-caixa p { margin: 0; color: var(--suave, #4b5563); }
.pga-login-caixa label { display: grid; gap: 6px; }
.pga-login-caixa input { min-height: 44px; padding: 0 12px; border: 1px solid var(--borda, #e1e5ea); border-radius: 10px; font: inherit; }
#pgaLoginBotao { display: grid; gap: 10px; min-height: 44px; }
.pga-login-erro { color: var(--risco, #b91c1c) !important; }
/* infecto (sem o menu ⋯): o Sair fica junto da conta, sem a explicação (vai no title) */
.pga-sair-solto { margin-left: 8px; min-height: 32px; }
.pga-sair-solto .sub { display: none; }