/* ConnectSus UPA · visual "direção C" (cores e letras da Connectar).
   Fontes servidas pelo próprio sistema (licença SIL OFL 1.1, em static/fontes/LICENCAS.txt). */

@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fontes/montserrat-latin-700-normal.1c0792ac34ef.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("../fontes/montserrat-latin-800-normal.9e624ca74fb3.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fontes/atkinson-hyperlegible-latin-400-normal.f1f8a8210104.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("../fontes/atkinson-hyperlegible-latin-700-normal.13a58e05dfd2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fontes/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }

:root {
  --azul: #145CC0;          /* azul Connectar: botões, links, menu ativo */
  --azul-escuro: #0F4A9E;   /* títulos, hover */
  --azul-ceu: #3AA3EB;      /* só detalhes e foco */
  --azul-claro: #E6EFFB;    /* item ativo, fundos suaves */
  --laranja: #E8A460;       /* destaque pontual da marca */
  --texto: #172033;
  --texto-suave: #55607A;
  --borda: #DCE3EE;
  --borda-campo: #7D8AA3;  /* 3,4:1 sobre branco: o contorno do campo precisa ser visível */
  --fundo: #F3F6FB;
  --branco: #FFFFFF;
  --erro: #B42318;  --erro-fundo: #FDE7E7;
  --ok: #1B5E20;    --ok-fundo: #E3F4E5;
  --alerta: #7A3E00; --alerta-fundo: #FCEBDC;
  --raio: 12px;
  --fonte-titulo: "Montserrat", "Segoe UI", sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --fonte-numero: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte-texto); font-size: 16px; line-height: 1.45; color: var(--texto); background: var(--fundo); }
a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }
/* Foco com contraste de pelo menos 3:1 sobre branco e sobre o fundo. */
:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: 2px; }

.pular { position: absolute; left: -9999px; top: 8px; background: var(--azul); color: var(--branco); padding: 10px 16px; border-radius: 8px; z-index: 10; }
.pular:focus { left: 8px; }

/* Topo */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding: 0 20px; background: var(--branco); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--fonte-titulo); font-weight: 800; font-size: 17px; color: var(--azul); }
.marca img { flex: none; }
.unidade { padding: 7px 12px; border: 1px solid var(--borda); border-radius: 10px; font-size: 14px; color: #3B4660; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.usuario .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: var(--branco); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.usuario .quem { display: flex; flex-direction: column; line-height: 1.2; }
.usuario .quem span { color: var(--texto-suave); }
.usuario .botao { white-space: nowrap; }

/* Corpo: menu de ícones + conteúdo */
.corpo { display: flex; min-height: calc(100vh - 61px); }
.trilho { flex: 0 0 84px; background: var(--branco); border-right: 1px solid var(--borda); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; }
.trilho a { width: 68px; min-height: 56px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: #3B4660; font-size: 11px; text-align: center; line-height: 1.1; padding: 6px 2px; }
.trilho a:hover { background: var(--fundo); color: var(--azul-escuro); }
.trilho a[aria-current="page"] { background: var(--azul-claro); color: var(--azul-escuro); font-weight: 700; box-shadow: inset 3px 0 0 var(--azul); }
.trilho svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conteudo { flex: 1; min-width: 0; padding: 22px 26px 40px; }
.conteudo > .largura { max-width: 1180px; }

.rodape { text-align: center; font-size: 13px; color: var(--texto-suave); padding: 18px; }

/* Títulos */
h1 { font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; color: var(--azul-escuro); margin: 0 0 6px; letter-spacing: -0.2px; }
h2 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; margin: 0 0 12px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 18px; }
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cabecalho-pagina .subtitulo { margin: 0; }

/* Cartões e grades */
.cartao { display: block; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; margin-bottom: 16px; color: inherit; }
a.cartao { text-decoration: none; }
a.cartao:hover { border-color: var(--azul); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ocupa-2 { grid-column: span 2; }
.ocupa-tudo { grid-column: 1 / -1; }

/* Formulários */
label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
input, select, textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--borda-campo); border-radius: 10px; font: inherit; color: var(--texto); background: var(--branco); }
textarea { padding: 10px 14px; min-height: 90px; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); outline: 2px solid var(--azul-escuro); outline-offset: 1px; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; vertical-align: middle; margin: 0 8px 0 0; }
.campo-check label { display: flex; align-items: center; min-height: 48px; margin: 0; }
.campo-numero, input[name=cpf], input[name=cns], input[name=cep] { font-family: var(--fonte-numero); }
fieldset { border: 1px solid var(--borda); border-radius: 16px; background: var(--branco); padding: 18px 20px 20px; margin: 0 0 16px; }
form { counter-reset: secao; }
legend { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; padding: 0 8px; display: flex; align-items: center; gap: 10px; counter-increment: secao; }
/* Número da seção (o leitor de tela lê junto: "1 Identificação"). */
legend::before { content: counter(secao); width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: var(--branco); display: inline-grid; place-items: center; font-size: 14px; }
.dica { font-size: 14px; color: var(--texto-suave); margin-top: 4px; }
.lista-faltas { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.selo-ok { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ok-fundo); color: var(--ok); }
.faixa-pendencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.faixa-pendencia p { margin: 0; }
.tabela-estoque input[type=number] { width: 90px; }
.tabela-empilha select { min-width: 13em; }
@media (max-width: 720px) {
  /* Na tela de resposta cada item vira um bloco com rótulos: melhor para digitar no celular. */
  .tabela-empilha { display: block; overflow: visible; }
  .tabela-empilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-empilha tbody, .tabela-empilha tr, .tabela-empilha th, .tabela-empilha td { display: block; }
  .tabela-empilha tr { padding: 10px 0; border-bottom: 1px solid var(--borda); }
  .tabela-empilha td, .tabela-empilha th[scope=row] { border: 0; padding: 4px 0; }
  .tabela-empilha td[data-rotulo]::before { content: attr(data-rotulo); display: inline-block; min-width: 110px; color: var(--texto-suave); font-size: 13px; }
  .tabela-empilha select, .tabela-empilha input[type=number] { min-height: 44px; }
  .tabela-empilha td[data-rotulo=""]::before { content: none; }
}
.errorlist { color: var(--erro); margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.campo-com-erro input, .campo-com-erro select, .campo-com-erro textarea { border-color: var(--erro); border-width: 2px; }
/* Campo marcado inválido pelo servidor ou pelo JS (aria-invalid): o mesmo realce do erro, com fundo leve. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); border-width: 2px; background-color: var(--erro-fundo); }
input[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible { outline: 3px solid var(--erro); outline-offset: 1px; }

.busca-grande { position: relative; }
.busca-grande input { min-height: 58px; padding-left: 50px; font-size: 19px; border: 2px solid var(--azul); border-radius: 14px; }
.busca-grande svg { position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; stroke: var(--azul); fill: none; stroke-width: 2.4; }

/* Botões */
button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--azul); color: var(--branco); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
button:hover, .botao:hover { background: var(--azul-escuro); color: var(--branco); }
.botao.secundario, button.secundario { background: var(--branco); color: var(--azul); border: 2px solid var(--azul); }
.botao.secundario:hover, button.secundario:hover { background: var(--azul-claro); color: var(--azul-escuro); }
.botao.perigo, button.perigo { background: var(--branco); color: var(--erro); border: 2px solid var(--erro); }
.botao.pequeno, button.pequeno { min-height: 40px; padding: 0 14px; font-size: 14px; }
button.link { min-height: 0; padding: 0; background: none; color: var(--azul); font-weight: 700; text-decoration: underline; }
button.link:hover { background: none; color: var(--azul-escuro); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.acoes-fixas { position: sticky; bottom: 0; padding: 14px 0; background: var(--fundo); justify-content: flex-end; }
form.inline { display: inline; }
.largura-total { width: 100%; }
.espaco-acima { margin-top: 14px; }

/* Etiquetas e avisos */
.etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--azul-claro); color: var(--azul-escuro); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.erro { background: var(--erro-fundo); color: #9A1B1B; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; background: var(--azul-claro); color: var(--azul-escuro); }
.aviso-success { background: var(--ok-fundo); color: var(--ok); }
.aviso-error { background: var(--erro-fundo); color: var(--erro); }
.aviso-warning { background: var(--alerta-fundo); color: var(--alerta); }

/* Listas (resultados da busca, fila) */
.lista { background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; }
.lista-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.lista-topo h2 { margin: 0; font-size: 17px; }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 20px; border-bottom: 1px solid #EDF1F7; }
.item:last-child { border-bottom: 0; }
.item .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--azul-claro); color: var(--azul-escuro); display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 800; flex: none; }
.item .principal { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item .nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--texto); text-decoration: none; }
.item .nome:hover { color: var(--azul); }
.item .detalhes { font-size: 14px; color: var(--texto-suave); }
.item .tempo { font-family: var(--fonte-numero); font-size: 18px; color: var(--texto-suave); }
.item.espera-longa { background: #FFF4F4; box-shadow: inset 4px 0 0 #C62828; }
.item.espera-longa .tempo { color: #9A1B1B; }
.vazio { padding: 22px 20px; color: var(--texto-suave); }

/* Cores da classificação de risco: as do protocolo, sempre com o nome escrito */
.cor-risco { display: inline-block; min-width: 110px; padding: 6px 10px; border-radius: 10px; font-weight: 700; font-size: 13px; text-align: center; flex: none; }
.cor-vermelho { background: #C62828; color: #FFFFFF; }
.cor-laranja { background: #C2410C; color: #FFFFFF; }
.cor-amarelo { background: #F2C200; color: #2B2200; }
.cor-verde { background: #2E7D32; color: #FFFFFF; }
.cor-azul { background: #FFFFFF; color: #0B3D91; border: 3px solid #1E63D6; }
.cor-branco { background: #FFFFFF; color: var(--texto); border: 2px dashed var(--borda-campo); }
.rotulo { font-weight: 700; margin: 0 0 4px; }
#aviso-idade:empty { padding: 0; margin: 0; background: none; }
.calculado { font-family: var(--fonte-numero); margin: 8px 0 0; }
[hidden] { display: none !important; }
.escolha-cor { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.escolha-cor label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 12px; cursor: pointer; margin: 0; font-weight: 700; }
.escolha-cor input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.escolha-cor label:has(input:checked) { outline: 3px solid var(--azul-escuro); outline-offset: 2px; }
/* Depois de escolhida a cor, as outras esmaecem e a marcada ganha um sinal de certo. */
.escolha-cor:has(input:checked) label:not(:has(input:checked)) { opacity: .55; }
.campo-com-erro .escolha-cor label { box-shadow: 0 0 0 2px var(--erro); }
.escolha-cor label:has(input:checked)::after { content: "\2713"; font-size: 18px; margin-left: 4px; }
.sinais { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Faixa do paciente */
.faixa-paciente { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 16px 20px; margin-bottom: 16px; }
.faixa-paciente .quem { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; }
.faixa-paciente .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--azul-claro); color: var(--azul-escuro); display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 800; flex: none; }
.faixa-paciente .nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 20px; text-transform: uppercase; margin: 0; color: var(--texto); }
.faixa-paciente .sub { font-size: 14px; color: var(--texto-suave); }

.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; margin: 0; }
.dados div { min-width: 0; }
.dados dt { font-size: 13px; color: var(--texto-suave); margin-bottom: 2px; }
.dados dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Login e telas sem menu */
.tela-sozinha { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; background: var(--fundo); }
.tela-sozinha .cartao { width: 100%; max-width: 420px; padding: 28px; box-shadow: 0 10px 30px rgba(20, 92, 192, .08); }
.tela-sozinha .marca { justify-content: center; font-size: 22px; margin-bottom: 4px; }
.tela-sozinha .unidade-nome { text-align: center; color: var(--texto-suave); margin: 0 0 22px; }
.centro { max-width: 460px; margin: 20px auto; }
.qr svg { width: 220px; height: 220px; }

.so-celular { display: none; }

/* Tela pequena (celular e tablet em pé): o menu vira barra no rodapé */
@media (max-width: 720px) {
  .corpo { flex-direction: column-reverse; }
  .trilho { flex: none; flex-direction: row; justify-content: space-around; position: sticky; bottom: 0; border-right: 0; border-top: 1px solid var(--borda); padding: 6px 0; z-index: 5; }
  /* Perfil com muitos itens (enfermagem tem 9): o menu rola dentro dele, a página não ganha rolagem lateral. */
  .trilho { overflow-x: auto; justify-content: flex-start; }
  .trilho a { flex: 1 0 60px; width: auto; }
  .conteudo { padding: 16px; }
  .ocupa-2 { grid-column: auto; }
  .usuario .quem { display: none; }
  /* A barra Cancelar/Salvar fica acima do menu de rodapé, não atrás dele. */
  .acoes-fixas { bottom: 70px; z-index: 6; }
  .conteudo .lista-medicamentos { scroll-margin-bottom: 170px; }
  /* Topo numa linha só: sobra tela para o formulário e a fila. */
  .topo { flex-wrap: nowrap; min-height: 0; max-height: 56px; padding: 6px 12px; gap: 8px; }
  .topo .unidade, .usuario .avatar, .so-largo { display: none; }
  .so-celular { display: inline; }
  .marca { font-size: 15px; gap: 6px; min-width: 0; }
  .usuario { gap: 6px; }
  /* O avatar com a inicial não informa nada e gasta uma linha no celular. */
  .item .avatar, .faixa-paciente .avatar { display: none; }
  .faixa-paciente .nome { font-size: 17px; }
}

/* Tela da triagem: formulário com o histórico do paciente ao lado (aba recolhível no celular) */
.com-lateral { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.com-lateral > aside { order: -1; }
@media (min-width: 1200px) {
  .com-lateral { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .com-lateral > aside { order: 2; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
}
.historico { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; }
.historico summary { font-family: var(--fonte-titulo); font-weight: 700; cursor: pointer; min-height: 32px; }
.historico-item { border-top: 1px solid var(--borda); padding: 10px 0; }
.historico-item p { margin: 4px 0; }
.historico-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cor-risco.pequeno { font-size: 12px; padding: 2px 8px; }
@media (min-width: 700px) { .antecedente { grid-template-columns: 220px minmax(0, 1fr); } }
fieldset.sub { border: 0; padding: 0; margin: 0; background: none; }
fieldset.sub > legend { font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0; margin: 0 0 8px; counter-increment: none; }
fieldset.sub > legend::before { content: none; display: none; }
/* Conferência do carrinho: uma linha compacta por item, rádio pequeno ao lado do texto (o input global tem 100%). */
fieldset.linha-conferencia input[type=radio] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; }
fieldset.linha-conferencia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-width: 0; padding: 10px 16px; margin: 0 0 10px; }
fieldset.linha-conferencia > legend { font-family: inherit; font-size: 1rem; padding: 0 6px; counter-increment: none; }
fieldset.linha-conferencia > legend::before { content: none; display: none; }
fieldset.linha-conferencia label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
fieldset.linha-conferencia input[type=number] { width: 90px; }
.escolha-marcar { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0; list-style: none; }
.escolha-marcar label { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-weight: 400; }
.escolha-marcar input { width: 20px; height: 20px; min-height: 0; margin: 0; }

/* Atendimento médico */
.lista-cid { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.lista-cid button { width: 100%; justify-content: flex-start; text-align: left; }
/* Ao abrir, a lista rola para a vista acima da barra fixa (Emitir e imprimir); ver medicamentos.js. */
.lista-medicamentos { scroll-margin-bottom: 96px; }
.texto-livre { white-space: normal; }
form.inline { display: inline; }

/* Régua da dor (EVA 0 a 10, static/js/triagem.js). Uma cor por faixa de FAIXAS_DOR, na mesma ordem:
   azul (sem dor) até vermelho (dor máxima). A cor nunca é a única informação: há número, rótulo e carinha. */
.regua-dor { --cor-dor: #9AA5B8; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); max-width: 560px; }
.regua-dor[data-faixa="0"] { --cor-dor: #2F80ED; }
.regua-dor[data-faixa="1"] { --cor-dor: #2E9E4F; }
.regua-dor[data-faixa="2"] { --cor-dor: #8DBF2E; }
.regua-dor[data-faixa="3"] { --cor-dor: #F2C230; }
.regua-dor[data-faixa="4"] { --cor-dor: #F08A24; }
.regua-dor[data-faixa="5"] { --cor-dor: #D63B2F; }
.regua-dor-topo { display: flex; justify-content: space-between; align-items: center; }
.regua-dor-topo label { font-weight: 700; }
.regua-dor-corpo { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.regua-dor-trilho { flex: 1; }
/* Aparência própria (trilho e botão): sem ela cada navegador pinta parte da régua do seu jeito. */
.regua-dor-trilho input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0;
  cursor: pointer; background: transparent; border: 0; padding: 0; box-shadow: none; }
.regua-dor-trilho input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
  margin-top: -7px; border-radius: 50%; background: var(--cor-dor); border: 3px solid var(--branco); box-shadow: 0 0 0 1px var(--texto-suave); }
.regua-dor-trilho input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cor-dor);
  border: 3px solid var(--branco); box-shadow: 0 0 0 1px var(--texto-suave); }
.regua-dor-trilho input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #2F80ED 0 5%, #2E9E4F 5% 25%, #8DBF2E 25% 45%, #F2C230 45% 65%, #F08A24 65% 85%, #D63B2F 85%); }
.regua-dor-trilho input[type="range"]::-moz-range-track { height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #2F80ED 0 5%, #2E9E4F 5% 25%, #8DBF2E 25% 45%, #F2C230 45% 65%, #F08A24 65% 85%, #D63B2F 85%); }
.regua-dor[data-faixa="vazia"] .regua-dor-trilho input[type="range"] { opacity: .45; }
.regua-dor-numero { min-width: 2.2em; text-align: right; font-family: var(--fonte-numero); font-size: 28px; font-weight: 500; }
.regua-dor-carinha svg { display: block; }
.regua-dor-carinha .rosto { fill: var(--cor-dor); }
.regua-dor-carinha .olho { fill: var(--texto); }
.regua-dor-carinha .traco { fill: none; stroke: var(--texto); stroke-width: 2.2; stroke-linecap: round; }
/* Mesma largura do trilho: carinha (44px) + espaço à esquerda; número (2.2em de 28px) + espaço à direita. */
.regua-dor-marcas { display: flex; justify-content: space-between; margin: 2px 82px 0 60px; font-size: 13px; color: var(--texto-suave); }
/* Celular: carinha e número em cima, régua com a largura toda embaixo (área de toque maior). */
@media (max-width: 520px) {
  .regua-dor-corpo { flex-wrap: wrap; justify-content: space-between; }
  .regua-dor-trilho { order: 3; flex: 1 1 100%; }
  .regua-dor-trilho input[type="range"] { height: 44px; }
  .regua-dor-marcas { margin: 0 4px; }
}

/* Início por perfil em três faixas: números do plantão, painel principal em largura total e os secundários
   lado a lado (apps/core/paineis.py). No celular a ordem é a mesma, uma coluna só. */
.inicio { display: grid; gap: 18px; }
.inicio-secundarios { display: grid; gap: 18px; }
@media (min-width: 1100px) { .inicio-secundarios { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; } }
/* Números do plantão: régua de uma linha só ao lado da saudação (nunca quebra em duas). O texto dos alertas e as
   cores de risco vão na linha de detalhe embaixo. Abaixo de 1100 px a régua desce para baixo da saudação; abaixo de
   768 px não aparece (decisão de 31/10/2026: no celular a fila vem logo depois da saudação). */
.cabecalho-inicio { flex-wrap: nowrap; align-items: flex-start; gap: 16px 28px; }
.cabecalho-inicio .saudacao { flex: 0 1 auto; max-width: 32%; padding-top: 4px; }
.cabecalho-inicio .numeros-plantao { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1099px) { .cabecalho-inicio { flex-direction: column; align-items: stretch; } }
.agora-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--texto-suave); }
.agora-topo h2 { margin: 0; font-family: var(--fonte-texto); font-weight: 700; font-size: 14px; color: var(--texto); }
.agora-topo .hora { font-family: var(--fonte-numero); }
.numeros-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.numeros-lista > li { flex: 1 1 0; min-width: 0; display: flex; }
.numeros-lista > li + li { border-left: 1px solid var(--borda); }
.numero-plantao { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 10px 9px; color: var(--texto); text-decoration: none; }
a.numero-plantao:hover { background: var(--azul-claro); color: var(--texto); }
a.numero-plantao:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: -3px; }
.numero-plantao .valor { display: flex; align-items: center; gap: 5px; }
.numero-plantao .numero { font-family: var(--fonte-numero); font-size: 26px; font-weight: 500; line-height: 1.1; color: var(--azul-escuro); }
.numero-plantao .rotulo { color: var(--texto-suave); font-size: 13px; line-height: 1.2; hyphens: auto; overflow-wrap: break-word; }
.numero-plantao.zerado .numero { color: #8A94A8; }
.numero-plantao.em-alerta { box-shadow: inset 0 -5px 0 var(--erro); }
.numero-plantao.em-alerta .numero, .numero-plantao.em-alerta .icone-alerta { color: var(--erro); }
.numero-plantao.em-alerta .rotulo { color: var(--texto); font-weight: 700; }
.icone-alerta { flex: 0 0 auto; width: 18px; height: 18px; }
.numero-plantao .icone-alerta { width: 22px; height: 22px; }
.detalhe { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; line-height: 1.3; }
.detalhe li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.detalhe .aviso-numero { display: inline-flex; align-items: center; gap: 6px; color: var(--erro); font-weight: 700; text-decoration: none; }
.detalhe a.aviso-numero:hover { text-decoration: underline; }
.detalhe .sem-alerta { color: var(--ok); font-weight: 700; }
.detalhe .cores-titulo { color: var(--texto-suave); }
.painel .detalhe .cor-risco { min-width: 0; padding: 1px 7px; font-size: 12.5px; border-radius: 6px; }
@media (max-width: 767px) { .cabecalho-inicio .numeros-plantao { display: none; } }
.painel-colunas { display: grid; gap: 16px; }
@media (min-width: 900px) { .painel-colunas { grid-template-columns: 1fr 1fr; } }
.painel-colunas h3 { margin: 0; font-size: 15px; }
.painel-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.painel-topo h2 { margin: 0; }
.painel .lista { margin-top: 0; }
.contagens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.contagens li { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--fundo); }
.contagens .numero { display: block; font-family: var(--fonte-numero); font-size: 32px; font-weight: 500; color: var(--azul-escuro); }
.contagens .rotulo { color: var(--texto-suave); font-size: 14px; }
/* Filas nos painéis do início, compactas para caber mais pacientes na coluna estreita.
   As telas completas de fila continuam com o tamanho normal. Botões com pelo menos 32px (toque). */
.painel .painel-topo h2 { font-size: 17px; }
.painel .item { gap: 4px 10px; padding: 8px 12px; }
.painel .item .avatar { display: none; }
.painel .item .principal { flex-basis: 160px; gap: 1px; }
.painel .item .nome { font-size: 14px; }
.painel .item .detalhes { font-size: 12.5px; }
.painel .item .tempo { font-size: 14px; }
.painel .cor-risco { min-width: 72px; padding: 3px 8px; font-size: 12px; border-radius: 8px; }
.painel .botao.pequeno, .painel button.pequeno { min-height: 32px; padding: 0 10px; font-size: 13px; }
.painel .vazio { padding: 10px 12px; font-size: 14px; }
.painel h2.espaco-acima { font-size: 15px; margin-top: 12px; }

/* Texto só para leitor de tela (rótulos de campos compactos). */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mapa de leitos da observação (apps/observacao). Tempo: azul até o alerta, amarelo até o limite, vermelho acima.
   A cor nunca é a única informação: o tempo está escrito. */
.contadores-obs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.contadores-obs li { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; }
.contadores-obs .numero { display: block; font-family: var(--fonte-numero); font-size: 28px; font-weight: 500; color: var(--azul-escuro); }
.contadores-obs .rotulo { font-size: 14px; color: var(--texto-suave); }
.mapa-corpo { display: grid; gap: 18px; }
@media (min-width: 1100px) { .mapa-corpo { grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); align-items: start; } }
.mapa-lado { display: grid; gap: 14px; }
.setor-obs { margin-bottom: 16px; }
.setor-obs h2 { font-size: 17px; margin: 0 0 8px; }
.leitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.leito { border: 1px solid var(--borda); border-top: 4px solid var(--borda); border-radius: 10px; padding: 10px; background: var(--branco); display: flex; flex-direction: column; gap: 2px; min-height: 96px; }
.leito-livre { border-top-color: #2E9E4F; }
.leito-ocupado { border-top-color: var(--azul); }
.leito-bloqueado { border-top-color: #7D8AA3; background: #F1F3F7; }
.leito-id { font-size: 13px; color: var(--texto-suave); font-weight: 700; }
.leito-paciente { font-family: var(--fonte-titulo); font-weight: 800; font-size: 14px; text-transform: uppercase; }
.leito-situacao { margin-top: auto; font-weight: 700; color: var(--texto-suave); }
.leito-livre .leito-situacao { color: var(--ok); }
.leito-tempo { margin-top: auto; font-family: var(--fonte-numero); font-size: 20px; font-weight: 500; }
.tempo-ok { color: #1F5FBF; }
.tempo-atencao { color: #8A5A00; }
.tempo-espera { color: var(--texto-suave); }
.tempo-critico { color: var(--erro); }
.leito-acao { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.leito-acao select { min-height: 32px; font-size: 13px; padding: 2px 6px; flex: 1 1 90px; }
.leito-acao button { min-height: 32px; font-size: 13px; padding: 0 10px; }
.item-obs { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #EDF1F7; }
.item-obs:last-child { border-bottom: 0; }

/* TV da observação (segunda tela, tela cheia). Fundo escuro, letras grandes para ver de longe. */
.tv { min-height: 100vh; padding: 16px 20px; background: #0E1626; color: #F2F5FA; }
.tv .dica, .tv .rotulo { color: #B5C0D3; }
.tv-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.tv-topo h1 { margin: 0; font-size: 28px; color: #FFFFFF; }
.tv-topo .marca { color: #FFFFFF; }
.tv-topo .unidade { margin-left: auto; color: #B5C0D3; }
.tv-faixa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tv-modo { border: 1px solid #5B6B85; border-radius: 999px; padding: 2px 12px; font-size: 14px; }
.tv-modo.completo { border-color: #E8A460; color: #E8A460; }
.tv-hora { font-family: var(--fonte-numero); font-size: 34px; }
.tv .contadores-obs li, .tv .cartao, .tv .leito { background: #16213A; border-color: #26324D; color: #F2F5FA; }
.tv .contadores-obs .numero { color: #FFFFFF; }
.tv .leito-livre { border-top-color: #2E9E4F; background: #12261D; }
.tv .leito-bloqueado { background: #1F2532; }
.tv .leito-livre .leito-situacao { color: #6FD39A; }
.tv .leito-id { color: #B5C0D3; }
.tv .tempo-ok { color: #7FB2FF; }
.tv .tempo-atencao { color: #F2C230; }
.tv .tempo-espera { color: #9AA6B2; }
.tv .tempo-critico { color: #FF7A6E; }
.tv .item-obs { border-bottom-color: #26324D; }
.tv-corpo { display: grid; gap: 16px; }
@media (min-width: 1100px) { .tv-corpo { grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); align-items: start; } }
.tv-numero-grande { font-family: var(--fonte-numero); font-size: 40px; margin: 4px 0; }
.indicadores-obs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.indicadores-obs .numero { display: block; font-family: var(--fonte-numero); font-size: 24px; }
.tv-indicadores svg { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.barra-entrada { fill: #4F8EF7; }
.barra-saida { fill: #E8A460; }
.barra-mes { fill: #4F8EF7; }
.tv svg text { fill: #B5C0D3; font-size: 13px; }
/* TV compacta: tudo numa tela (1366x768 ou maior), sem rolar. */
.tv { padding: 10px 16px; }
.tv-topo { margin-bottom: 6px; }
.tv-topo h1 { font-size: 24px; }
.tv-topo .marca { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-weight: 800; white-space: nowrap; }
.tv .contadores-obs { gap: 8px; margin-bottom: 10px; }
.tv .contadores-obs li { padding: 8px 12px; }
.tv .contadores-obs .numero { font-size: 26px; }
.tv .setor-obs { margin-bottom: 8px; }
.tv .setor-obs h2 { font-size: 16px; margin-bottom: 4px; }
.tv .leitos { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.tv .leito { min-height: 70px; padding: 6px 8px; }
.tv .leito-tempo { font-size: 18px; }
.tv .mapa-lado { gap: 8px; }
.tv .cartao { padding: 10px 12px; }
.tv .cartao h2 { font-size: 16px; margin: 0 0 4px; }
.tv .item-obs { padding: 4px 0; }
.tv-numero-grande { font-size: 32px; }
.tv .indicadores-obs .numero { font-size: 20px; }
.tv-indicadores { margin-top: 10px; }
.tv .indicadores-obs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv-graficos { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.tv-indicadores svg[data-grafico="dia"] { height: 90px; }
.tv-indicadores svg[data-grafico="meses"] { height: 90px; }
/* TV no estilo do painel antigo da UPA: faixa colorida no topo, cartões com borda de cor,
   leito ocupado com fundo na cor do tempo, alertas numa linha e legenda no rodapé. */
.tv { position: relative; border-top: 6px solid transparent; border-image: linear-gradient(90deg, #E53935 0 20%, #43A047 20% 40%, #FB8C00 40% 60%, #1E88E5 60% 80%, #FDD835 80% 100%) 1; }
.tv-topo h1 { font-size: 28px; }
.tv-painel .tv-faixa { position: absolute; top: 14px; right: 130px; gap: 18px; margin: 0; }
.tv-modo.completo { border-color: #F2C230; color: #F2C230; }
.tv .contadores-obs li { border-left: 4px solid #5B9BFF; border-radius: 10px; }
.tv .contadores-obs li:nth-child(3) { border-left-color: #2E9E4F; }
.tv .contadores-obs li:nth-child(4) { border-left-color: #5B6B85; }
.tv .contadores-obs li:nth-child(5) { border-left-color: #7D8AA3; }
.tv .contadores-obs .numero { font-size: 34px; font-weight: 700; }
.tv .setor-obs h2 { font-weight: 700; }
.tv .setor-obs h2 .dica { font-weight: 400; margin-left: 8px; }
.tv .leitos { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.tv .leito { min-height: 96px; border-top-width: 3px; }
.tv .leito-paciente { font-size: 13px; }
.tv .leito-tempo { font-size: 22px; font-weight: 700; }
.tv .leito-livre .leito-situacao { margin-top: auto; }
.tv .faixa-tempo-ok { border-top-color: #5B9BFF; background: #16213A; }
.tv .faixa-tempo-atencao { border-top-color: #F2C230; background: #2A2416; }
.tv .faixa-tempo-critico { border-top-color: #FF5A5A; background: #2A1620; }
.tv .faixa-tempo-critico .leito-tempo { color: #FF5A5A; }
.tv-alerta { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
.tv-alerta-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tv-alerta-tempo { font-family: var(--fonte-numero); font-weight: 700; white-space: nowrap; }
.tv-rodape { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: #B5C0D3; }
.tv-legenda span { margin-left: 10px; }
.tv-legenda span:first-child { margin-left: 0; }
.tv-topo .unidade { margin-left: 4px; font-size: 14px; }
.tv-topo [data-tela-cheia] { margin-left: auto; }
.tv .tv-corpo, .tv .mapa-lado, .tv .cartao, .tv .mapa-setores { min-width: 0; }
.tv .leito { min-height: 84px; }
.tv .leito-tempo { font-size: 20px; white-space: nowrap; }
.tv .leito-paciente { font-size: 12px; line-height: 1.2; }
.tv .leito .dica { font-size: 11px; line-height: 1.2; }
.tv .mapa-lado .tv-indicadores { margin-top: 0; }
.tv .mapa-lado .indicadores-obs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
.tv .mapa-lado .indicadores-obs .numero { font-size: 18px; }
.tv .mapa-lado .indicadores-obs .rotulo { font-size: 12px; }
.tv .mapa-lado .tv-graficos { grid-template-columns: 1fr; gap: 4px; }
.tv .mapa-lado .tv-indicadores svg[data-grafico] { height: 60px; }
/* Tela baixa (1366x768): os gráficos saem para tudo caber sem rolar; os números do mês ficam. */
@media (max-height: 820px) { .tv .tv-graficos { display: none; } }
.etiqueta-surem { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #FFF4D6; color: #6B4A00; }
.tv .etiqueta-surem { background: #3A3016; color: #F2C230; font-size: 11px; }

/* Condutas: solicitação de exames em colunas; quadro de medicações em tabela compacta. */
.escolha-colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
.escolha-colunas label { min-height: 40px; }
.quadro-prescricao { width: 100%; border-collapse: collapse; margin: 16px 0 0; font-size: 15px; }
.quadro-prescricao .cabecalho-item th { padding: 10px 12px; background: var(--azul-claro); color: var(--texto); font-size: 15px; font-weight: 400; border-radius: 10px 10px 0 0; }
.quadro-prescricao .cabecalho-item .medicamento { display: block; }
.quadro-prescricao .cabecalho-item .acao-compacta { margin-top: 6px; }
.quadro-prescricao th { text-align: left; font-size: 13px; color: var(--texto-suave); font-weight: 600; padding: 6px 12px; border-bottom: 1px solid var(--borda); }
.quadro-prescricao td { padding: 8px 12px; border-bottom: 1px solid #EDF1F7; vertical-align: middle; }
.quadro-prescricao td:first-child { white-space: nowrap; width: 1%; }
.estado-dose { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; background: #EDF1F7; }
.estado-atrasada { background: #FDE2E1; color: #8A1C1C; font-weight: 700; }
.estado-administrada { background: #DDF3E4; color: #1D5E33; }
.estado-nao_administrada { background: #FFF1D6; color: #7A4B00; }
.estado-cancelada, .estado-nao_checada { color: var(--texto-suave); }
.checagem { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.acao-compacta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.acao-compacta select, .acao-compacta input[type="text"] { min-height: 40px; padding: 4px 8px; font-size: 14px; width: auto; max-width: 180px; }
.acao-compacta button { min-height: 40px; padding: 4px 12px; }
@media (max-width: 640px) {
  .quadro-prescricao, .quadro-prescricao thead, .quadro-prescricao tbody, .quadro-prescricao tr, .quadro-prescricao td, .quadro-prescricao th { display: block; width: 100%; }
  .quadro-prescricao thead tr:not(.cabecalho-item) { display: none; }
  .quadro-prescricao td { border-bottom: 0; padding: 4px 12px; }
  .quadro-prescricao tbody tr { border-bottom: 1px solid var(--borda); padding: 6px 0; }
  .acao-compacta select, .acao-compacta input[type="text"] { max-width: none; flex: 1 1 160px; }
}


.hora-roda { display: inline-flex; align-items: center; gap: 2px; }
.hora-roda select { width: auto; min-width: 0; }

/* Evolução de enfermagem (observação, fase 4) */
.etiqueta-pendencia { display: inline-block; align-self: flex-start; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #FDE7E4; color: #8A1F11; }
.tv .etiqueta-pendencia { background: #3D1C18; color: #FF9A8A; font-size: 11px; }
.pendencia { border-left: 4px solid #D9534F; padding: 8px 12px; margin-bottom: 10px; background: #FFF7F6; border-radius: 8px; }
.anotacao { border-top: 1px solid var(--borda); padding: 10px 0; }
.anotacao:first-of-type { border-top: 0; }
.anotacao p { margin: 0 0 4px; }
.anotacao-corrigida { color: var(--texto-suave); }
.sinais-vitais { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 4px 0; font-size: 14px; }
/* Como na triagem, sem o número da seção (a tela tem vários formulários). */
.anotacao-sinais > legend { counter-increment: none; }
.anotacao-sinais > legend::before { content: none; display: none; }
details.corrigir { margin-top: 6px; }
details.corrigir summary { cursor: pointer; font-size: 14px; }

/* Farmácia (fase 1) */
.abas-farmacia { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tabela-estoque { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-estoque th, .tabela-estoque td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-estoque th { font-weight: 700; color: var(--texto-suave); }
/* No celular a tabela rola dentro do cartão, em vez de empurrar a página para o lado. */
@media (max-width: 720px) {
  .tabela-estoque { display: block; overflow-x: auto; }
  .formulario select, .formulario input, .formulario textarea { max-width: 100%; }
}
.selo-alerta { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #FDE7E4; color: #8A1F11; }
.lote-farmacia { border-top: 1px solid var(--borda); padding: 10px 0; }
.lote-farmacia:first-of-type { border-top: 0; }
.lote-vencido { background: #FFF7F6; }
.acoes-lote { display: flex; flex-wrap: wrap; gap: 8px; }
.faixa-vencidos h2 { color: #8A1F11; }
.lista-sem-item { columns: 2; font-size: 14px; }
.espaco-abaixo { margin-bottom: 14px; }

/* Filas: cor do protocolo na borda da linha; o atraso fica só no tempo (avaliação do designer, 26/10/2026). */
.item[class*="linha-cor-"] { box-shadow: inset 6px 0 0 var(--cor-linha, transparent); }
.linha-cor-vermelho { --cor-linha: #C62828; }
.linha-cor-laranja { --cor-linha: #C2410C; }
.linha-cor-amarelo { --cor-linha: #F2C200; }
.linha-cor-verde { --cor-linha: #2E7D32; }
.linha-cor-azul { --cor-linha: #1E63D6; }
.linha-cor-branco { --cor-linha: #B8C2D3; }
.item .tempo.atrasado { color: #9A1B1B; font-weight: 700; }
.item .tempo.atrasado::before { content: "\26A0  "; }
.fila-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.resumo-erros { border: 2px solid var(--erro); background: var(--erro-fundo); color: var(--erro); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.resumo-erros ul { margin: 4px 0 0; padding-left: 18px; }
.resumo-erros a { color: var(--erro); font-weight: 700; }
.resumo-erros:focus { outline: 3px solid var(--azul-escuro); outline-offset: 2px; }

/* Farmácia, fase 2: dispensação e relatório */
.dispensacao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.dispensacao-topo h2 { margin: 0; font-size: 17px; }
.item-prescrito { border-top: 1px solid var(--borda); padding: 10px 0; }
.item-prescrito p { margin: 0 0 4px; }
section.item-prescrito { border-top: 1px solid var(--borda); padding: 16px 20px; }
.acoes-dispensacao { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.acoes-dispensacao input[type="number"] { width: 90px; }
.lista-dispensacoes { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.lista-dispensacoes li { margin-bottom: 6px; }
.rolagem-horizontal { overflow-x: auto; }
.tabela-relatorio th, .tabela-relatorio td { padding: 4px 6px; white-space: nowrap; }
.tabela-relatorio tbody th { position: sticky; left: 0; background: var(--branco); text-align: left; }

/* Registro de notificação A/B (fase 4a): o número do talão é o que importa. */
input[name=numero].campo-numero { font-family: var(--fonte-numero); letter-spacing: .04em; text-transform: uppercase; }
.registro-notificacao { border-left: 4px solid var(--azul); }
.numero-notificacao { font-family: var(--fonte-numero); font-size: 32px; font-weight: 700; color: var(--azul-escuro); margin: 0 0 16px; }

/* Farmácia 4b: receita do controlado na dispensação e pendências do chefe. */
.receita-controle { border-left: 4px solid var(--azul); background: var(--fundo); border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 8px 0; }
.receita-saldo { font-family: var(--fonte-numero); font-size: 20px; color: var(--azul-escuro); }
.livro-pendencia { border-left: 4px solid var(--alerta); }
/* Farmácia 4b: livro de controlados. Saldo em coluna mono à direita; transferência interna esmaecida. */
.livro-tabela .num { text-align: right; font-family: var(--fonte-numero); white-space: nowrap; }
.livro-tabela .num-data { font-family: var(--fonte-numero); white-space: nowrap; }
.livro-saldo { background: var(--fundo); }
.livro-saldo .num { font-weight: 700; color: var(--azul-escuro); }
.livro-interna td { color: var(--texto-suave); font-style: italic; }

/* Farmácia 4c: uso do carrinho na checagem e topo do cartão de pendências */
.checagem [data-uso-carrinho], .checagem [data-item-feito] { max-width: 260px; }
/* Procedimentos na conduta: grupos lado a lado; no celular, um embaixo do outro. */
.grupos-procedimento { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; }
.grupos-procedimento fieldset.sub > legend { font-size: 14px; color: var(--texto-suave); margin-bottom: 2px; }
@media (max-width: 640px) { .acao-compacta select[data-uso-carrinho] { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; } }
.pendencia-paciente-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }

/* Farmácia 4d.
   Livro de controlados: régua dos 12 meses e fechamento mensal. O estado está sempre escrito; a cor só reforça. */
.meses-livro { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.mes-livro { display: flex; flex-direction: column; gap: 1px; min-height: 64px; height: 100%; padding: 8px 8px 7px; border: 1px solid var(--borda); border-top: 4px solid var(--borda); border-radius: 10px; background: var(--branco); color: var(--texto); text-decoration: none; line-height: 1.2; }
a.mes-livro:hover { border-color: var(--azul); }
.mes-livro .mes-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; }
.mes-livro .mes-ano { font-size: 12px; color: var(--texto-suave); }
.mes-livro .mes-estado { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.mes-livro.fechado { border-top-color: var(--ok); }
.mes-livro.fechado .mes-estado { color: var(--ok); }
.mes-livro.fechado .mes-estado::before { content: "\2713  "; }
.mes-livro.a-fechar { border-top-color: var(--laranja); background: var(--alerta-fundo); }
.mes-livro.a-fechar .mes-estado, .mes-livro.reaberto .mes-estado { color: var(--alerta); }
.mes-livro.reaberto { border-top-color: var(--laranja); }
.mes-livro.em-curso { border-top-color: var(--azul); }
.mes-livro.em-curso .mes-estado { color: var(--azul-escuro); }
.mes-livro.sem-livro { background: var(--fundo); border-style: dashed; border-top-style: solid; }
.mes-livro[aria-current="page"] { border-color: var(--azul-escuro); box-shadow: 0 0 0 2px var(--azul-escuro); }
@media (max-width: 1100px) { .meses-livro { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 520px) { .meses-livro { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mes-livro { min-height: 58px; } }
/* Faixa do mês escolhido: nome do mês, selo e as ações do chefe. */
.faixa-mes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.faixa-mes h2 { margin: 0; font-size: 20px; }
.faixa-mes .faixa-mes-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.faixa-mes p { margin: 4px 0 0; }
.cartao.fechar-mes { border-left: 4px solid var(--azul); }
.cartao.fechar-mes .campo-check { margin: 14px 0 4px; padding: 4px 12px; border: 1px solid var(--borda-campo); border-radius: 10px; background: var(--fundo); }
.cartao.fechar-mes .campo-check label { font-size: 16px; }
.livro-fechado-aviso { border-left: 4px solid var(--ok); background: var(--ok-fundo); color: var(--ok); }
details.reabrir-mes { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 10px; }
details.reabrir-mes summary { cursor: pointer; font-weight: 700; color: var(--erro); min-height: 44px; display: flex; align-items: center; }

/* TV de chamada da sala de espera (apps/chamadas, layout escolhido pelo Everton em 31/10/2026: opção 3).
   Tamanhos em vh: a TV é 16:9 e o layout fica do mesmo tamanho em 1920x1080 e 1366x768. */
.tvc {
  --tvc-fundo: #0E1626;
  --tvc-cartao: #16213A;
  --tvc-borda: #26324D;
  --tvc-texto: #F2F5FA;
  --tvc-suave: #B5C0D3;      /* 8,9:1 sobre --tvc-cartao */
  --tvc-chamada: #145CC0;    /* azul Connectar: fundo da chamada atual, branco por cima 6,1:1 */
  --tvc-chamada-rotulo: #DCE8FA;
  --tvc-destaque: #F2C230;   /* amarelo do painel: só chamada nova e aviso de som */
  --tvc-erro: #FF7A6E;
  --tvc-espaco: 1.6vh;
  height: 100vh; overflow: hidden; padding: 1.6vh 1.8vw 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--tvc-espaco);
  font-size: 2.4vh;
}

/* Topo: marca, unidade, título e hora */
/* Posição fixa no grid: a faixa de estado divide a linha 1 com o topo sem criar coluna nova. */
.tvc > .tvc-topo { grid-row: 1; grid-column: 1 / -1; }
.tvc > .tvc-corpo { grid-row: 2; grid-column: 1 / -1; }
.tvc > .tvc-rodape { grid-row: 3; grid-column: 1 / -1; }
.tvc-topo { display: flex; align-items: center; gap: 1.4vw; min-height: 6vh; }
.tvc-topo .marca { color: #FFFFFF; font-size: 2.4vh; white-space: nowrap; }
.tvc-topo h1 { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 3.2vh; color: #FFFFFF; }
.tvc-unidade { color: var(--tvc-suave); font-size: 2.2vh; border: 1px solid #3A4866; border-radius: 10px; padding: 0.5vh 0.9vw; white-space: nowrap; }
.tvc-hora { margin-left: auto; font-family: var(--fonte-numero); font-size: 4.6vh; line-height: 1; color: #FFFFFF; }

/* Faixas de estado. Aparecem só quando há problema, por cima do título no topo (a hora continua à vista).
   Não empurram nada: o layout das chamadas fica igual com ou sem faixa. */
.tvc-avisos { grid-row: 1; grid-column: 1 / -1; align-self: center; width: calc(100% - 13vw); z-index: 1; }
.tvc-aviso { display: flex; align-items: center; gap: 1vw; min-height: 6.4vh; margin: 0; padding: 0.8vh 1.4vw; border-radius: 12px; font-size: 2.8vh; font-weight: 700; border: 0; width: 100%; text-align: left; font-family: var(--fonte-texto); }
.tvc-aviso[hidden] { display: none; }
.tvc-aviso-icone { flex: none; width: 3.4vh; height: 3.4vh; }
.tvc-aviso-som { background: var(--tvc-destaque); color: #1A1300; cursor: pointer; }
.tvc-aviso-conexao { background: #3A1418; color: #FFE1DD; box-shadow: inset 0.6vw 0 0 var(--tvc-erro); }
.tvc-aviso-voz { background: #2A2416; color: #FFF3CF; box-shadow: inset 0.6vw 0 0 var(--tvc-destaque); }
.tvc-aviso small { font-weight: 400; font-size: 2.2vh; opacity: 0.9; margin-left: auto; }

/* Chamada atual: o ponto focal. Fundo azul, nome enorme, local logo abaixo. */
.tvc-atual { position: relative; background: var(--tvc-chamada); color: #FFFFFF; border-radius: 18px; padding: 2.2vh 2vw; display: flex; flex-direction: column; justify-content: center; gap: 1.2vh; min-width: 0; overflow: hidden; }
.tvc-atual-rotulo { margin: 0; flex: none; display: flex; align-items: center; gap: 1vw; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.4vh; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tvc-chamada-rotulo); }
.tvc-vez { font-family: var(--fonte-texto); letter-spacing: 0; text-transform: none; font-size: 2.2vh; border: 2px solid var(--tvc-chamada-rotulo); border-radius: 999px; padding: 0.2vh 0.8vw; }
.tvc-nova-selo { display: none; font-family: var(--fonte-texto); letter-spacing: 0; text-transform: none; font-size: 2.4vh; background: var(--tvc-destaque); color: #1A1300; border-radius: 999px; padding: 0.3vh 0.9vw; }
/* Nome: nunca corta no meio da tela. Até 2 linhas; o servidor manda a classe de tamanho pelo número de letras. */
.tvc-nome { flex: none; margin: 0; font-family: var(--fonte-texto); font-weight: 700; font-size: 10vh; line-height: 1.04; overflow-wrap: anywhere; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tvc-nome-medio .tvc-nome { font-size: 8.2vh; }
.tvc-nome-longo .tvc-nome { font-size: 6.8vh; }
.tvc-local { flex: none; margin: 0; display: flex; align-items: center; gap: 1.2vw; padding-top: 1.2vh; border-top: 2px solid rgba(255, 255, 255, 0.28); min-width: 0; }
.tvc-local-seta { flex: none; width: 5.4vh; height: 5.4vh; }
.tvc-local-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 6.4vh; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tvc-senha { display: none; } /* fase 2: senha da recepção. Lugar reservado, não aparece nesta fase. */

/* Chamada nova: anel amarelo pulsando por alguns segundos (o JS tira a classe depois de 10 s). */
.tvc-atual.tvc-nova { box-shadow: 0 0 0 0.9vh var(--tvc-destaque); animation: tvc-pulsar 1.1s ease-in-out 0s 6 alternate; }
.tvc-atual.tvc-nova .tvc-nova-selo { display: inline-block; }
.tvc-atual.tvc-nova .tvc-nome, .tvc-atual.tvc-nova .tvc-local { animation: tvc-entrar 0.5s ease-out both; }
@keyframes tvc-pulsar { from { box-shadow: 0 0 0 0.4vh var(--tvc-destaque); background-color: var(--tvc-chamada); } to { box-shadow: 0 0 0 1.4vh var(--tvc-destaque); background-color: #1C6BDA; } }
@keyframes tvc-entrar { from { opacity: 0; transform: translateY(2vh); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Sem pulso nem entrada: o anel fica parado o mesmo tempo. */
  .tvc-atual.tvc-nova, .tvc-atual.tvc-nova .tvc-nome, .tvc-atual.tvc-nova .tvc-local { animation: none; }
}

/* Histórico: as outras chamadas dos últimos 10 minutos. Nome numa linha com reticências; a hora em número tabular. */
.tvc-historico { background: var(--tvc-cartao); border: 1px solid var(--tvc-borda); border-radius: 16px; padding: 1.4vh 1.4vw; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tvc-historico h2 { margin: 0 0 0.8vh; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.2vh; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tvc-suave); }
.tvc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 0; }
/* Colunas: [senha, fase 2, largura 0 agora] nome, local, hora */
.tvc-item { --tvc-col-senha: 0; display: grid; grid-template-columns: var(--tvc-col-senha) minmax(0, 1fr) auto auto; column-gap: 1.4vw; align-items: baseline; padding: 1vh 0; border-top: 1px solid var(--tvc-borda); }
.tvc-item:first-child { border-top: 0; }
.tvc-item-nome { font-weight: 700; font-size: 3.4vh; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvc-item-local { font-size: 2.6vh; line-height: 1.3; color: var(--tvc-suave); white-space: nowrap; }
.tvc-item-hora { font-family: var(--fonte-numero); font-size: 2.6vh; color: var(--tvc-suave); }
.tvc-hist-vazio { margin: auto 0; font-size: 2.8vh; color: var(--tvc-suave); text-align: center; }

/* Vídeo institucional (pasta da TV). Sempre 16:9; o som dele para durante a chamada (chamada_tv.js). */
.tvc-midia { position: relative; background: #000000; border-radius: 16px; overflow: hidden; display: grid; place-items: center; min-height: 0; min-width: 0; }
.tvc-midia video { width: 100%; height: 100%; object-fit: contain; }
.tvc-midia-unidade { margin: 0; padding: 2vh; font-family: var(--fonte-titulo); font-weight: 800; font-size: 5vh; color: #FFFFFF; text-align: center; }

/* Rodapé: avisos da unidade (cadastrados no admin) rolando. */
.tvc-rodape { display: flex; align-items: stretch; margin: 0 -1.8vw; background: var(--tvc-cartao); border-top: 2px solid var(--tvc-borda); height: 6.4vh; overflow: hidden; }
.tvc-rodape-rotulo { flex: none; display: flex; align-items: center; padding: 0 1.4vw; background: var(--laranja); color: #1A1300; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.3vh; letter-spacing: 0.06em; text-transform: uppercase; }
.tvc-rodape-trilho { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.tvc-rodape-texto { display: flex; gap: 4vw; white-space: nowrap; padding-left: 2vw; font-size: 2.9vh; animation: tvc-rolar 60s linear infinite; }
.tvc-rodape-texto span::before { content: "•"; color: var(--laranja); margin-right: 1.2vw; }
@keyframes tvc-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* Parado: o JS (chamada_tv.js) troca o aviso visível a cada 8 s, sem movimento. */
  .tvc-rodape-texto { animation: none; }
  .tvc-rodape-texto span:not(:first-child) { display: none; }
}

/* Estado vazio: nenhuma chamada nos últimos 10 minutos. */
.tvc-vazio { background: var(--tvc-cartao); border: 1px solid var(--tvc-borda); border-radius: 18px; padding: 2.4vh 2.4vw; display: flex; flex-direction: column; justify-content: center; }
.tvc-vazio p { margin: 0; }
.tvc-vazio .tvc-vazio-titulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 6vh; line-height: 1.1; color: #FFFFFF; }
.tvc-vazio .tvc-vazio-texto { margin-top: 1.4vh; font-size: 3.2vh; color: var(--tvc-suave); }

/* Sem conexão: a hora para e fica apagada; o resto continua com o último dado recebido. */
.tvc-desconectada .tvc-hora { color: var(--tvc-erro); }

/* Mídia da pasta do servidor: vídeo, ou imagens em carrossel (o JS troca a .tvc-slide-ativo), ou a logo. */
.tvc-midia img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tvc-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.tvc-slide.tvc-slide-ativo { opacity: 1; }
.tvc-midia-logo { width: 60%; background: #FFFFFF; border-radius: 12px; padding: 2vh; }
.tvc-item .tvc-vez { margin-left: 0.6vw; font-size: 2vh; border-color: var(--tvc-suave); }
/* ---------- Opção 3 (mistura, recomendada): chamada em faixa larga em cima; vídeo e histórico lado a lado embaixo ---------- */
/* O painel (chamada atual e anteriores) é trocado a cada 3 s; com display: contents os filhos dele entram no grid
   ao lado do vídeo, que fica fora do painel para não recomeçar. */
.tvc-op3 .tvc-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 35vh minmax(0, 1fr);
  grid-template-areas: "atual atual" "midia historico"; gap: var(--tvc-espaco) 1.4vw; min-height: 0; padding-bottom: var(--tvc-espaco); }
.tvc-chamadas { display: contents; }
.tvc-chamadas > .dica { grid-area: atual; color: var(--tvc-suave); }
.tvc-op3 .tvc-atual, .tvc-op3 .tvc-vazio { grid-area: atual; }
.tvc-op3 .tvc-historico { grid-area: historico; }
.tvc-op3 .tvc-midia { grid-area: midia; height: 100%; aspect-ratio: 16 / 9; }
.tvc-op3 .tvc-atual { padding: 2.4vh 2.4vw; }
.tvc-op3 .tvc-nome { font-size: 11vh; }
.tvc-op3 .tvc-nome-medio .tvc-nome { font-size: 9vh; }
.tvc-op3 .tvc-nome-longo .tvc-nome { font-size: 7.6vh; }
.tvc-op3 .tvc-local-nome { font-size: 7vh; }
.tvc-op3 .tvc-item { grid-template-columns: var(--tvc-col-senha) minmax(0, 1fr) auto; grid-template-areas: "s n h" "s l l"; row-gap: 0.2vh; padding: 0.8vh 0; }
.tvc-op3 .tvc-item-nome { grid-area: n; }
.tvc-op3 .tvc-item-local { grid-area: l; }
.tvc-op3 .tvc-item-hora { grid-area: h; }


/* Vídeos da TV (tela de controle da recepção, apps/chamadas; direção A aprovada pelo Everton em 31/10/2026). */

.ctv { display: grid; gap: 16px; }
.ctv .cartao { margin: 0; }
.ctv h2 { margin: 0; }
.ctv-rotulo { margin: 0 0 8px; font-family: var(--fonte-texto); font-size: 14px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.ctv-icone { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cartão "TV agora": fonte + controles. É o ponto focal: borda azul em cima. */
.ctv-agora { border-top: 4px solid var(--azul); display: grid; gap: 18px; }
.ctv-agora-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ctv-situacao { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.ctv-situacao::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.ctv-situacao.pausado::before { background: var(--texto-suave); border-radius: 2px; }
.ctv-situacao.na-pasta::before { background: var(--laranja); }

/* Fonte: dois botões grandes, um clique. aria-pressed marca a ativa. */
.ctv-fontes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctv-fontes form { display: contents; }
button.ctv-fonte { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; justify-items: start; gap: 2px 12px;
  min-height: 76px; padding: 12px 16px; text-align: left; background: var(--branco); color: var(--texto); border: 2px solid var(--borda-campo); border-radius: 14px; font-weight: 400; }
button.ctv-fonte:hover { background: var(--azul-claro); color: var(--texto); border-color: var(--azul); }
button.ctv-fonte .ctv-icone { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--azul); }
.ctv-fonte-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ctv-fonte-dica { font-size: 14px; color: var(--texto-suave); }
.ctv-fonte-selo { display: none; font-family: var(--fonte-texto); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--azul); color: var(--branco); }
button.ctv-fonte[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); box-shadow: inset 0 0 0 1px var(--azul); }
button.ctv-fonte[aria-pressed="true"] .ctv-fonte-selo { display: inline-block; }
button.ctv-fonte[aria-pressed="true"] .ctv-fonte-nome::before { content: "\2713"; color: var(--azul); }
/* Escolhido YouTube, mas a TV caiu para a pasta: o botão fica com o selo laranja. */
button.ctv-fonte.caiu { border-color: var(--laranja); background: var(--alerta-fundo); box-shadow: none; }
button.ctv-fonte.caiu .ctv-fonte-selo { display: inline-block; background: var(--alerta); }

/* Aviso de queda: amarelo de alerta, ação logo ao lado. */
.ctv-queda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 12px; background: var(--alerta-fundo); color: var(--alerta); border-left: 4px solid var(--laranja); }
.ctv-queda p { margin: 0; flex: 1 1 300px; }
.ctv-queda b { color: #5A2E00; }
.ctv-queda button { flex: none; }

/* Controles */
.ctv-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ctv-controles > form > button { min-width: 168px; }
button:disabled, button[aria-disabled="true"] { background: #EDF1F7; color: #6B7790; border-color: #C9D2E0; cursor: not-allowed; }
.ctv-volume { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 4px 6px 4px 14px; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo); }
.ctv-volume-rotulo { font-weight: 700; font-size: 14px; white-space: nowrap; }
.ctv-volume button { width: 48px; min-width: 48px; padding: 0; font-size: 24px; line-height: 1; }
.ctv-volume output { min-width: 3.6em; text-align: center; font-family: var(--fonte-numero); font-size: 22px; font-weight: 500; color: var(--azul-escuro); }
.ctv-barra { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.ctv-barra i { width: 5px; border-radius: 2px; background: #C9D2E0; }
.ctv-barra i:nth-child(1) { height: 30%; } .ctv-barra i:nth-child(2) { height: 37%; } .ctv-barra i:nth-child(3) { height: 44%; } .ctv-barra i:nth-child(4) { height: 51%; } .ctv-barra i:nth-child(5) { height: 58%; }
.ctv-barra i:nth-child(6) { height: 65%; } .ctv-barra i:nth-child(7) { height: 72%; } .ctv-barra i:nth-child(8) { height: 79%; } .ctv-barra i:nth-child(9) { height: 86%; } .ctv-barra i:nth-child(10) { height: 100%; }
.ctv-barra i.cheio { background: var(--azul); }
.ctv-nota { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.ctv-nota .ctv-icone { width: 18px; height: 18px; margin-top: 1px; color: var(--azul); }

/* Lista do YouTube */
.ctv-lista { padding: 0; }
.ctv-lista-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 16px 20px 0; }
.ctv-lista-topo + .dica { margin: 4px 20px 0; }
.ctv-adicionar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; margin: 14px 20px 0; padding: 14px 16px; border-radius: 12px; background: var(--fundo); border: 1px solid var(--borda); }
.ctv-adicionar label { margin-bottom: 4px; }
.ctv-adicionar label span { font-weight: 400; color: var(--texto-suave); }
.ctv-adicionar button { margin-top: 25px; }
.ctv-adicionar .errorlist { list-style: none; padding: 0; display: flex; gap: 6px; align-items: flex-start; font-weight: 700; }
.ctv-adicionar .errorlist::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--erro); color: var(--branco); font-size: 12px; }
.ctv-adicionar .dica { margin: 4px 0 0; }

.ctv-itens { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--borda); }
.ctv-item { display: grid; grid-template-columns: 28px 52px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px 14px; padding: 12px 20px; border-bottom: 1px solid #EDF1F7; }
.ctv-item:last-child { border-bottom: 0; }
.ctv-ordem { font-family: var(--fonte-numero); font-size: 18px; color: var(--texto-suave); text-align: right; }
/* "Miniatura" sem imagem do YouTube: ícone do tipo num quadro 16:9. */
.ctv-mini { width: 52px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul-escuro); }
.ctv-mini .ctv-icone { width: 20px; height: 20px; }
.ctv-mini.playlist { background: #FCEBDC; color: var(--alerta); }
.ctv-item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctv-item-nome { font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ctv-item-nome.so-id { font-family: var(--fonte-numero); font-weight: 500; }
.ctv-item-detalhe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--texto-suave); }
.ctv-item-detalhe .etiqueta { padding: 1px 8px; font-size: 12px; }
.ctv-item-detalhe .etiqueta.playlist { background: var(--alerta-fundo); color: var(--alerta); }
.ctv-item-detalhe code { font-family: var(--fonte-numero); font-size: 13px; }

/* Chave ligado/desligado: botão com role="switch"; o texto escrito diz o estado (a cor só reforça). */
button.ctv-chave { min-height: 44px; min-width: 132px; padding: 0 12px 0 8px; gap: 10px; justify-content: flex-start; background: var(--branco); color: var(--texto); border: 1px solid var(--borda-campo); font-size: 14px; }
button.ctv-chave:hover { background: var(--fundo); color: var(--texto); }
.ctv-chave-trilho { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #8A94A8; flex: none; }
.ctv-chave-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--branco); }
button.ctv-chave[aria-checked="true"] .ctv-chave-trilho { background: var(--ok); }
button.ctv-chave[aria-checked="true"] .ctv-chave-trilho::after { left: 19px; }
button.ctv-chave[aria-checked="true"] { color: var(--ok); }

.ctv-mover { display: flex; gap: 4px; }
button.ctv-icone-botao { width: 44px; min-width: 44px; min-height: 44px; padding: 0; background: var(--branco); color: var(--azul); border: 1px solid var(--borda-campo); border-radius: 10px; }
button.ctv-icone-botao:hover { background: var(--azul-claro); color: var(--azul-escuro); }
button.ctv-icone-botao:disabled { background: transparent; color: #B5BECD; border-color: #E4E9F1; }

/* Remover com confirmação sem JS nem rota nova: <details> abre a pergunta e o botão de POST. */
.ctv-remover { position: relative; }
.ctv-remover > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--erro); border: 1px solid var(--borda-campo); background: var(--branco); cursor: pointer; }
.ctv-remover > summary::-webkit-details-marker { display: none; }
.ctv-remover > summary:hover { background: var(--erro-fundo); border-color: var(--erro); }
.ctv-remover[open] > summary { background: var(--erro-fundo); border-color: var(--erro); }
.ctv-confirma { position: absolute; right: 0; top: 52px; z-index: 3; width: 290px; padding: 14px 16px; border-radius: 12px; background: var(--branco); border: 2px solid var(--erro); box-shadow: 0 10px 30px rgba(23, 32, 51, .16); }
.ctv-confirma p { margin: 0 0 10px; }
.ctv-confirma .acoes { margin: 0; }

/* Item desligado: continua na lista, esmaecido, e diz que não passa. */
.ctv-item.desligado .ctv-mini { background: #EDF1F7; color: #8A94A8; }
.ctv-item.desligado .ctv-item-nome { color: var(--texto-suave); font-weight: 400; }
.ctv-nao-passa { font-weight: 700; color: var(--texto-suave); }

/* Lista vazia: orientação no lugar da lista. */
.ctv-vazia { display: flex; gap: 14px; align-items: flex-start; margin: 14px 20px 20px; padding: 18px; border: 2px dashed var(--borda); border-radius: 12px; }
.ctv-vazia .ctv-icone { width: 36px; height: 36px; color: var(--azul); }
.ctv-vazia p { margin: 0 0 4px; }
.ctv-vazia p:first-of-type { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; }
.ctv-lista > .ctv-itens:last-child { margin-bottom: 0; }

/* Histórico (só coordenação e ADM): quando | quem | o que mudou */
.ctv-historico h2 { font-size: 18px; }
.ctv-historico > .dica { margin: 4px 0 0; }
.ctv-historico-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.ctv-historico-lista li { display: grid; grid-template-columns: 9.5em minmax(0, 12em) minmax(0, 1fr); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--borda-suave); }
.ctv-historico-lista li:last-child { border-bottom: 0; }
.ctv-historico-lista time { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ctv-historico-lista span { overflow-wrap: anywhere; }
.ctv-historico-quem { font-weight: 700; }

/* Orientação curta */
.ctv-orientacao { background: var(--fundo); border-style: dashed; }
.ctv-orientacao h2 { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ctv-orientacao ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Largo: "TV agora" em duas colunas (fonte | controles). */
@media (min-width: 1000px) {
  .ctv-agora-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; }
  .ctv-controles-bloco { border-left: 1px solid var(--borda); padding-left: 24px; }
  .ctv-volume { margin-left: 0; }
}
@media (max-width: 999px) { .ctv-agora-corpo { display: grid; gap: 18px; } }

/* Celular */
@media (max-width: 720px) {
  .ctv .cartao { padding: 16px; }
  .ctv-lista { padding: 0; }
  .ctv-fontes { gap: 8px; }
  button.ctv-fonte { grid-template-columns: 1fr; padding: 10px 12px; min-height: 92px; align-content: start; }
  button.ctv-fonte .ctv-icone { grid-row: auto; width: 24px; height: 24px; }
  .ctv-fonte-nome { font-size: 15px; }
  .ctv-fonte-dica { font-size: 13px; }
  .ctv-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ctv-controles > form > button { min-width: 0; padding: 0 10px; white-space: nowrap; }
  .ctv-volume { grid-column: 1 / -1; margin: 0; flex-wrap: wrap; justify-content: space-between; gap: 6px 8px; padding: 8px 10px; }
  .ctv-volume-rotulo { flex: 1 1 100%; }
  .ctv-lista-topo { padding: 14px 16px 0; }
  .ctv-lista-topo + .dica { margin: 4px 16px 0; }
  .ctv-adicionar { grid-template-columns: 1fr; margin: 12px 12px 0; padding: 12px; }
  .ctv-adicionar button { margin-top: 0; width: 100%; }
  .ctv-item { grid-template-columns: 22px 44px minmax(0, 1fr); padding: 12px 12px 12px 8px; gap: 8px 10px; }
  .ctv-mini { width: 44px; height: 32px; }
  .ctv-item-acoes { grid-column: 1 / -1; padding-left: 4px; }
  .ctv-ordem { align-self: start; padding-top: 6px; }
  .ctv-mini { align-self: start; }
  .ctv-item .ctv-chave { min-width: 0; }
  .ctv-confirma { width: min(290px, calc(100vw - 48px)); }
  .ctv-vazia { margin: 12px 12px 16px; padding: 14px; }
  .ctv-queda button { width: 100%; }
  .ctv-historico-lista li { grid-template-columns: auto minmax(0, 1fr); }
  .ctv-historico-lista li > span:last-child { grid-column: 1 / -1; }
}
/* No largo as ações ficam em colunas da grade do item; no celular, numa linha embaixo do nome. */
.ctv-item-acoes { display: contents; }
@media (max-width: 720px) {
  .ctv-item-acoes { display: flex; align-items: center; gap: 6px; }
  .ctv-item-acoes .ctv-mover { margin-left: auto; }
}


/* Tema claro da TV de chamada (escolhido na tela "Vídeos da TV"; o escuro é o padrão). Parte A: as cores fixas do
   bloco .tvc viram variáveis com os valores de hoje. Parte B: .tvc-tema-claro só troca as variáveis. */

/* ---------- A. Escuro: cores fixas viram variáveis (mesmos valores de hoje) ---------- */
.tvc {
  --tvc-forte: #FFFFFF;            /* marca, título, hora, título do vazio */
  --tvc-borda-forte: #3A4866;      /* contorno da unidade no topo */
  --tvc-chamada-pulso: #1C6BDA;    /* fundo da faixa no pico do pulso */
  --tvc-anel-contorno: transparent;/* no escuro o anel amarelo já se destaca sozinho */
  --tvc-erro-fundo: #3A1418;
  --tvc-erro-texto: #FFE1DD;
  --tvc-voz-fundo: #2A2416;
  --tvc-voz-texto: #FFF3CF;
  --tvc-voz-barra: var(--tvc-destaque);
  --tvc-midia-fundo: #000000;
  background: var(--tvc-fundo);    /* hoje vem de .tv; passa a vir do tema */
  color: var(--tvc-texto);
}
.tvc-topo .marca, .tvc-topo h1, .tvc-hora, .tvc-midia-unidade, .tvc-vazio .tvc-vazio-titulo { color: var(--tvc-forte); }
.tvc-unidade { border-color: var(--tvc-borda-forte); }
.tvc-aviso-conexao { background: var(--tvc-erro-fundo); color: var(--tvc-erro-texto); }
.tvc-aviso-voz { background: var(--tvc-voz-fundo); color: var(--tvc-voz-texto); box-shadow: inset 0.6vw 0 0 var(--tvc-voz-barra); }
.tvc-midia { background: var(--tvc-midia-fundo); }
.tvc-desconectada .tvc-hora { color: var(--tvc-erro); }  /* repete a regra de hoje para vencer a de cima */
/* Anel da chamada nova: amarelo e, por fora, um contorno fino (só aparece no claro). */
.tvc-atual.tvc-nova { box-shadow: 0 0 0 0.9vh var(--tvc-destaque), 0 0 0 1.3vh var(--tvc-anel-contorno); }
@keyframes tvc-pulsar {
  from { box-shadow: 0 0 0 0.4vh var(--tvc-destaque), 0 0 0 0.8vh var(--tvc-anel-contorno); background-color: var(--tvc-chamada); }
  to   { box-shadow: 0 0 0 1.4vh var(--tvc-destaque), 0 0 0 1.8vh var(--tvc-anel-contorno); background-color: var(--tvc-chamada-pulso); }
}

/* ---------- B. Tema claro: só variáveis ---------- */
/* Contraste medido (WCAG): nome e local na faixa 8,4:1; rótulo da faixa 6,8:1; histórico nome 18:1,
   local e hora 9,3:1; rodapé 18:1; título e hora do topo 15,5:1; avisos 8,7 a 11:1; hora sem conexão 5,6:1. */
.tvc.tvc-tema-claro {
  --tvc-fundo: #E9EEF5;            /* cinza azulado claro: menos brilho que branco puro na sala */
  --tvc-cartao: #FFFFFF;
  --tvc-borda: #B4C0D2;
  --tvc-borda-forte: #7D8AA3;      /* 3,4:1 sobre o fundo */
  --tvc-texto: #0E1626;            /* o fundo do escuro vira o texto do claro */
  --tvc-forte: #0E1626;
  --tvc-suave: #3B4760;            /* 9,3:1 sobre branco, 8:1 sobre o fundo */
  --tvc-chamada: #0F4A9E;          /* azul escuro Connectar: branco por cima 8,4:1; faixa contra o fundo 7,2:1 */
  --tvc-chamada-pulso: #145CC0;    /* branco por cima 6,3:1 no pico do pulso */
  --tvc-chamada-rotulo: #DCE8FA;   /* 6,8:1 sobre a faixa */
  --tvc-destaque: #F2C230;         /* mesmo amarelo: selo e aviso de som (texto #1A1300, 11:1) */
  --tvc-anel-contorno: #7A5600;    /* amarelo sobre fundo claro dá só 1,4:1; o contorno âmbar dá 5,7:1 */
  --tvc-erro: #B42318;             /* hora sem conexão, 5,6:1 */
  --tvc-erro-fundo: #FDE3E0;
  --tvc-erro-texto: #7A1A10;       /* 8,7:1 */
  --tvc-voz-fundo: #FFF1C9;
  --tvc-voz-texto: #4A3500;        /* 10,4:1 */
  --tvc-voz-barra: #A67A00;
  --tvc-midia-fundo: var(--tvc-cartao);
}
/* Única regra extra do claro: a mídia ganha borda, senão o cartão branco some no fundo claro (1,2:1). */
.tvc.tvc-tema-claro .tvc-midia { border: 1px solid var(--tvc-borda); }

/* YouTube na TV: um iframe por item, sem receber toque (o toque cai na .tvc-midia e libera o som da chamada). */
.tvc-youtube { position: absolute; inset: 0; z-index: 1; }  /* por cima dos slides da pasta */
.tvc-youtube[hidden] { display: none; }
.tvc-youtube iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.ctv-form-botao { display: contents; }
.ctv-tema-rotulo { margin-top: 16px; }
.ctv-temas { display: flex; flex-wrap: wrap; gap: 8px; }
.ctv-temas button[aria-pressed="true"] { background: var(--azul); color: #FFFFFF; border-color: var(--azul); }

/* ---------- Cores da UPA 24h (manual de identidade visual v2.0, fev. 2015, item 1.05; aprovado pelo Everton em
   31/10/2026). Azul 7462C primária, texto no preto da marca, estados derivados de 355C/116C/485C (texto escurecido,
   fundo a 20% nas etiquetas e a 10% nas faixas grandes), amarelo 116C só como destaque gráfico (nunca texto).
   As cores da classificação de risco não mudam: só viram token. A fonte do manual (Frutiger) é paga e não foi usada. */
:root {
  /* Marca (valores RGB do manual) */
  --azul: #005099;          /* Pantone 7462C: botões, links, menu ativo. Branco por cima 8,1:1 */
  --azul-escuro: #00407A;   /* 7462C com 20% de preto: títulos, hover, foco. 10,4:1 sobre branco */
  --azul-ceu: #6696C2;      /* 7462C a 60%: só detalhe e gráfico (3,1:1, nunca texto) */
  --azul-claro: #E6EEF5;    /* 7462C a 10%: hover e fundos grandes */
  --azul-20: #CCDCEB;       /* 7462C a 20% (saturação prevista): item ativo, etiqueta, avatar */
  --amarelo: #FAC000;       /* Pantone 116C: só destaque gráfico, nunca texto (1,7:1 sobre branco) */
  --laranja: var(--amarelo);/* nome antigo; trocar os usos por --amarelo e apagar */
  --preto-marca: #151109;   /* Process Black C */

  --texto: #151109;         /* preto da marca: 18,8:1 sobre branco */
  --texto-medio: #3B4660;   /* antes solto em .unidade e .trilho a */
  --texto-suave: #55607A;   /* mantido: 6,3:1 sobre branco, 5,8:1 sobre o fundo */
  --borda: #DCE3EE;
  --borda-suave: #EDF1F7;   /* antes solto nas linhas de lista */
  --borda-campo: #7D8AA3;
  --fundo: #F3F6FB;
  --branco: #FFFFFF;

  /* Estados: texto escuro derivado + fundo na saturação de 20% */
  --erro: #A60000;  --erro-fundo: #F6CCCC;    /* 485C -20% preto; 5,5:1 sobre o fundo 20%, 8,0:1 sobre branco */
  --ok: #005F18;    --ok-fundo: #CCE7D3;      /* 355C -30% preto; 6,0:1 sobre o fundo 20% */
  --alerta: #644D00; --alerta-fundo: #FEF2CC; /* 116C -60% preto; 7,2:1 sobre o fundo 20% */

  /* Classificação de risco: valores de hoje, sem mudança. Só viram token. */
  --risco-vermelho: #C62828;
  --risco-laranja: #C2410C;
  --risco-amarelo: #F2C200;
  --risco-verde: #2E7D32;
  --risco-azul: #1E63D6;  --risco-azul-texto: #0B3D91;
  --risco-branco-linha: #B8C2D3;
}

/* ---------- Cores fixas que viram token ---------- */
.unidade, .trilho a { color: var(--texto-medio); }
.trilho a[aria-current="page"] { background: var(--azul-20); }
.usuario .avatar { background: var(--azul); }
.item, .item-obs, .quadro-prescricao td { border-bottom-color: var(--borda-suave); }
.item .avatar, .faixa-paciente .avatar { background: var(--azul-20); }
.etiqueta { background: var(--azul-20); }
.etiqueta.erro { color: var(--erro); }
.item.espera-longa { background: var(--erro-fundo); box-shadow: inset 4px 0 0 var(--erro); }
.item.espera-longa .tempo, .item .tempo.atrasado { color: var(--erro); }
.tela-sozinha .cartao { box-shadow: 0 10px 30px rgba(0, 80, 153, .08); }
.tempo-ok { color: var(--azul); }
.tempo-atencao { color: var(--alerta); }
.etiqueta-surem, .estado-nao_administrada { background: var(--alerta-fundo); color: var(--alerta); }
.estado-atrasada, .etiqueta-pendencia, .selo-alerta { background: var(--erro-fundo); color: var(--erro); }
.estado-administrada { background: var(--ok-fundo); color: var(--ok); }
.pendencia { border-left-color: var(--erro); background: var(--erro-fundo); }
.faixa-vencidos h2 { color: var(--erro); }
.ctv-temas button[aria-pressed="true"] { color: var(--branco); }

/* Risco: as mesmas cores de hoje, agora por token */
.cor-vermelho { background: var(--risco-vermelho); }
.cor-laranja { background: var(--risco-laranja); }
.cor-amarelo { background: var(--risco-amarelo); }
.cor-verde { background: var(--risco-verde); }
.cor-azul { color: var(--risco-azul-texto); border-color: var(--risco-azul); }
.linha-cor-vermelho { --cor-linha: var(--risco-vermelho); }
.linha-cor-laranja { --cor-linha: var(--risco-laranja); }
.linha-cor-amarelo { --cor-linha: var(--risco-amarelo); }
.linha-cor-verde { --cor-linha: var(--risco-verde); }
.linha-cor-azul { --cor-linha: var(--risco-azul); }
.linha-cor-branco { --cor-linha: var(--risco-branco-linha); }

/* Logo do ConnectSus (templates/componentes/marca.html): colorida no fundo claro, branca na TV escura. */
.marca-logo { display: block; width: auto; max-width: 100%; }
.tvc-topo .marca-logo { height: 4.6vh; }
.tvc .marca-clara, .tvc.tvc-tema-claro .marca-escura { display: none; }
.tvc.tvc-tema-claro .marca-clara { display: flex; }

/* Faixa colorida no topo das TVs: lembrava as cores de risco. Vira uma faixa só, azul. */
.tv { border-image: none; border-top-color: var(--azul); }

/* ---------- TV de chamada, escura ---------- */
.tvc {
  --tvc-fundo: #00182E;          /* 7462C com 70% de preto */
  --tvc-cartao: #0A2747;
  --tvc-borda: #1E3F66;
  --tvc-borda-forte: #4D6E94;    /* 3,4:1 sobre o fundo */
  --tvc-texto: #F2F5FA;          /* 13,8:1 sobre o cartão */
  --tvc-suave: #CCDCEB;          /* 7462C a 20%: 10,8:1 sobre o cartão */
  --tvc-chamada: #005099;        /* 7462C puro: branco por cima 8,1:1 */
  --tvc-chamada-pulso: #3373AD;  /* 7462C a 80%: branco 5,0:1 no pico */
  --tvc-chamada-rotulo: #CCDCEB; /* 5,8:1 sobre a faixa */
  --tvc-destaque: #FAC000;       /* 116C: anel e selo de chamada nova, aviso de som (texto preto 11,3:1) */
  --tvc-erro: #EC9999;           /* 485C a 40%: hora sem conexão, 8,2:1 sobre o fundo */
  --tvc-voz-fundo: #2A2410;
  --tvc-voz-texto: #FEF2CC;
}
.tvc-atual { outline: 2px solid #3373AD; outline-offset: -2px; } /* a faixa azul fica 2,2:1 contra o fundo: o contorno separa */
.tvc-aviso-som, .tvc-nova-selo, .tvc-rodape-rotulo { color: var(--preto-marca); }
.tvc-rodape-rotulo { background: var(--amarelo); }
.tvc-rodape-texto span::before { color: var(--amarelo); }

/* ---------- TV de chamada, clara ---------- */
.tvc.tvc-tema-claro {
  --tvc-fundo: #E6EEF5;          /* 7462C a 10% */
  --tvc-cartao: #FFFFFF;
  --tvc-borda: #99B9D6;          /* 7462C a 40% */
  --tvc-borda-forte: #6696C2;
  --tvc-texto: #151109;          /* 16:1 sobre o fundo */
  --tvc-forte: #151109;
  --tvc-suave: #44413A;          /* preto a 80%: 10,2:1 sobre branco */
  --tvc-chamada: #005099;        /* branco 8,1:1; faixa contra o fundo 6,9:1 */
  --tvc-chamada-pulso: #00407A;
  --tvc-chamada-rotulo: #CCDCEB;
  --tvc-destaque: #FAC000;
  --tvc-anel-contorno: #7D6000;  /* amarelo puro some no claro (1,4:1); o contorno dá 5,1:1 */
  --tvc-erro: #A60000;           /* 6,8:1 */
  --tvc-erro-fundo: #F6CCCC;
  --tvc-erro-texto: #680000;     /* 9,1:1 */
  --tvc-voz-fundo: #FEF2CC;
  --tvc-voz-texto: #4B3A00;      /* 9,9:1 */
  --tvc-voz-barra: #967300;
}
.tvc.tvc-tema-claro .tvc-atual { outline: 0; }

/* Faixas grandes de aviso com fundo a 10% (mais suave); o tom de 20% fica nas etiquetas pequenas. */
:root { --erro-fundo-suave: #FAE6E6; --ok-fundo-suave: #E6F3E9; --alerta-fundo-suave: #FFF9E6; }
.aviso-success { background: var(--ok-fundo-suave); }
.aviso-error, .resumo-erros { background: var(--erro-fundo-suave); }
.aviso-warning { background: var(--alerta-fundo-suave); }

/* Logo da UPA 24h (arquivo oficial enviado pelo Everton em 31/10/2026; não alterar cor nem proporção). Só sobre fundo
   branco: no topo e no login direto; na TV, dentro de um quadro branco. */
.logo-upa { display: block; height: 36px; width: auto; }
.logo-upa-grande { height: 64px; margin: 0 auto 12px; }
.tvc-logo-upa { display: inline-flex; align-items: center; padding: 0.5vh 0.8vw; background: #FFFFFF; border-radius: 10px; }
.tvc-logo-upa img { display: block; height: 4.6vh; width: auto; }
@media (max-width: 720px) {
  .topo .logo-upa { height: 28px; flex: none; }
  /* Tela estreita: a logo do sistema encolhe, não passa por cima da logo da UPA. */
  .topo .marca { min-width: 0; flex: 0 1 auto; }
  .topo .marca-logo { height: 26px; object-fit: contain; object-position: left center; }
}
/* Áreas grandes de estado também no tom suave (10%); o de 20% fica para etiquetas pequenas. */
.item.espera-longa, .pendencia { background: var(--erro-fundo-suave); }
.mes-livro.a-fechar, .ctv-queda { background: var(--alerta-fundo-suave); }
.mes-livro.a-fechar { border-top-color: var(--alerta); }
.ctv-queda { border-left-color: var(--alerta); }
.ctv-queda b { color: var(--alerta); }
.livro-fechado-aviso { background: var(--ok-fundo-suave); }
/* Gráfico da TV da observação na paleta da marca. */
.barra-entrada, .barra-mes { fill: var(--azul-ceu); }
.barra-saida { fill: var(--amarelo); }

/* Eletrocardiograma na tela de medicações: um pedido por linha, com o feito ou o botão. */
.lista-simples { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-simples li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--borda-suave); }

/* Aviso da sessão parada (static/js/sessao_parada.js): fica por cima de tudo, no canto. */
.sessao-parada { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: 360px; display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.sessao-parada p { margin: 0; }

/* Base de treinamento (templates/componentes/faixa_treino.html): aparece na tela e no papel. */
.faixa-treino { background: #ffd400; color: #000; font-weight: 700; text-align: center; letter-spacing: .04em; padding: 6px 12px; border-bottom: 3px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Prontuário do leito (templates/observacao/prontuario.html): a faixa do paciente presa no topo e a alergia em destaque. */
.faixa-prontuario { position: sticky; top: 0; z-index: 5; }
.faixa-prontuario .alergia { color: var(--erro, #b00020); font-weight: 700; }
.abas-prontuario { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--borda, #d0d7de); margin: 8px 0 12px; }
.abas-prontuario a { padding: 10px 14px; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.abas-prontuario a[aria-selected="true"], .abas-prontuario a[aria-current="true"] { border-bottom-color: currentColor; font-weight: 700; }
/* "a definir" (máximo da farmácia) dentro da célula numérica: mesma fonte do texto e sem quebrar. */
.campo-numero .dica { font-family: var(--fonte-texto); white-space: nowrap; }
.contador-aba { background: var(--erro, #b00020); color: #fff; border-radius: 999px; padding: 0 8px; font-size: .85em; }
.avisos-leito { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.avisos-leito a { font-size: .9em; }
/* Celular: botões de checagem e de ação do Prontuário com 44 px de toque (achado do qa-navegador, 04/11/2026). */
@media (max-width: 600px) {
  #aba-conteudo button, #aba-conteudo .botao { min-height: 44px; }
}

/* Farmácia v1.0.5: barra de 7 atalhos com ícone, sub-abas de Relatórios e impressão dos relatórios pela própria tela. */
.barra-farmacia { display: block; margin: 0 0 18px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); }
.barra-farmacia ul { list-style: none; margin: 0; padding: 0 6px; display: flex; gap: 2px; }
.barra-farmacia li.gestao { margin-left: auto; }
.barra-farmacia li.gestao + li.gestao { margin-left: 0; }
.barra-farmacia a { position: relative; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px;
  color: var(--texto-medio); text-decoration: none; font-weight: 700; font-size: 15px; border-bottom: 3px solid transparent; white-space: nowrap; }
.barra-farmacia a:hover { color: var(--azul-escuro); background: var(--azul-claro); }
.barra-farmacia a[aria-current="page"] { color: var(--azul-escuro); border-bottom-color: var(--azul); background: var(--azul-claro); }
.barra-farmacia a:focus-visible { outline-offset: -3px; }
.barra-farmacia svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .barra-farmacia ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; gap: 4px; }
  .barra-farmacia li.gestao { margin-left: 0; }
  .barra-farmacia a { flex-direction: column; justify-content: center; gap: 3px; min-height: 60px; padding: 4px 2px; font-size: 12.5px; border-radius: 8px 8px 0 0; text-align: center; white-space: normal; }
}
.subabas { display: flex; align-items: flex-end; gap: 4px 2px; border-bottom: 2px solid var(--borda); margin: 0 0 12px; overflow-x: auto; overflow-y: hidden; }
.subabas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--texto-medio); text-decoration: none; font-weight: 700; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.subabas a[aria-current="page"] { color: var(--azul-escuro); border-bottom-color: var(--azul); }
.subabas a:hover { color: var(--azul-escuro); }
.acoes-relatorio { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.acoes-relatorio button { min-height: 44px; }
.so-impressao { display: none; }
@page deitada { size: A4 landscape; margin: 10mm; }
@media print {
  /* Fora dos relatórios a impressão segue como sempre (avisos ficam no papel). */
  .nao-imprime { display: none !important; }
  .so-impressao { display: block; font: 10pt/1.3 Arial, Helvetica, sans-serif; }
  body.relatorio-imprimivel { background: #FFFFFF; color: #000; }
  body.relatorio-imprimivel .topo, body.relatorio-imprimivel .trilho, body.relatorio-imprimivel .rodape,
  body.relatorio-imprimivel .barra-farmacia, body.relatorio-imprimivel .subabas, body.relatorio-imprimivel .acoes-relatorio,
  body.relatorio-imprimivel .faixa-treino, body.relatorio-imprimivel .pular,
  body.relatorio-imprimivel .conteudo form.acao-compacta, body.relatorio-imprimivel .cabecalho-pagina .acoes,
  body.relatorio-imprimivel .aviso { display: none !important; }
  body.relatorio-imprimivel .corpo { display: block; min-height: 0; }
  body.relatorio-imprimivel .conteudo { padding: 0; }
  body.relatorio-imprimivel .conteudo > .largura { max-width: none; }
  /* No papel o título sai no cabeçalho único (cabecalho_impressao.css): o da tela não se repete. */
  body.relatorio-imprimivel .cabecalho-pagina { display: none; }
  body.relatorio-imprimivel .so-impressao { margin-bottom: 3mm; font: 9pt/1.3 Arial, Helvetica, sans-serif; }
  body.relatorio-imprimivel .so-impressao .doc-titulo { margin-bottom: 1.5mm; }
  body.relatorio-imprimivel .cab-papel-meta { display: flex; justify-content: space-between; gap: 6mm; margin: 0;
    border-bottom: 1.5px solid #000; padding-bottom: 1.5mm; }
  body.relatorio-imprimivel .cartao { border: 0; padding: 0; margin: 0 0 4mm; border-radius: 0; box-shadow: none; }
  body.relatorio-imprimivel .rolagem-horizontal { overflow: visible; }
  body.relatorio-imprimivel .tabela-estoque { font-size: 8.5pt; }
  body.relatorio-imprimivel .tabela-estoque th, body.relatorio-imprimivel .tabela-estoque td { border: 1px solid #000; padding: 1mm 1.5mm; color: #000; }
  body.relatorio-imprimivel .tabela-estoque thead { display: table-header-group; }
  body.relatorio-imprimivel .tabela-estoque tr { break-inside: avoid; }
  body.relatorio-imprimivel .etiqueta { background: none !important; color: #000 !important; border: 1px solid #000; padding: 0 4px; }
  body.relatorio-imprimivel .impressao-paisagem { page: deitada; }
  body.relatorio-imprimivel .impressao-paisagem .tabela-relatorio { font-size: 6.5pt; }
  body.relatorio-imprimivel a { color: #000; text-decoration: none; }
}

/* Farmácia v1.0.5: cartões de Locais (templates/farmacia/_cartao_local.html) e o filtro por tipo (Locais e Pendências).
   Estado sempre escrito (tipo, frase, selo); a cor só reforça. Toque de 44 px no filtro e nos botões. */
.filtro-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.filtro-tipos a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 2px solid var(--borda-campo);
  border-radius: 999px; background: var(--branco); color: var(--texto); text-decoration: none; font-weight: 700; font-size: 15px; }
.filtro-tipos a:hover { border-color: var(--azul); color: var(--azul-escuro); }
.filtro-tipos a[aria-current="true"] { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.filtro-tipos .contador { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: var(--erro); color: var(--branco); font-family: var(--fonte-numero); font-size: 13px; font-weight: 500; }
.filtro-tipos .contador.zerado { background: var(--borda); color: var(--texto-suave); }
/* Em Locais o número só conta, não é pendência: fica neutro (em Pendências continua vermelho). */
.filtro-tipos[aria-label="Tipos de local"] .contador { background: var(--azul-20); color: var(--azul-escuro); }
.filtro-tipos a[aria-current="true"] .contador { background: var(--branco); color: var(--azul-escuro); }
@media (max-width: 720px) {
  .filtro-tipos { display: grid; grid-template-columns: 1fr 1fr; }
  .filtro-tipos a { display: flex; justify-content: space-between; min-height: 52px; padding: 4px 12px; border-radius: 12px; font-size: 14px; line-height: 1.2; }
}
.grade-locais { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cartao-local { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px; }
.cartao-local.com-pendencia { box-shadow: inset 4px 0 0 var(--erro); }
.cartao-local.inativo { background: var(--fundo); }
.tipo-local { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px 3px 8px; border-radius: 8px;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--texto-medio); font-size: 13px; font-weight: 700; }
.tipo-local svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cartao-local h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; color: var(--texto); }
.cartao-local h3 a { color: inherit; text-decoration: none; }
.cartao-local h3 a:hover { color: var(--azul); text-decoration: underline; }
.cartao-local .onde { margin: -6px 0 0; font-size: 14px; color: var(--texto-suave); }
.efeito-local { margin: 0; font-size: 14px; color: var(--texto-medio); max-width: 60ch; }
.numeros-local { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--borda-suave); }
.numeros-local dt { font-size: 13px; color: var(--texto-suave); }
.numeros-local dd { margin: 0; font-family: var(--fonte-numero); font-size: 18px; font-weight: 500; color: var(--azul-escuro); font-variant-numeric: tabular-nums; }
.numeros-local dd.texto { font-family: var(--fonte-texto); font-size: 15px; font-weight: 700; color: var(--texto); }
.cartao-local .selos { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao-local .selos .selo-alerta { margin-left: 0; }
.selo-neutro { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--borda); color: var(--texto-medio); }
.cartao-local .acoes { margin-top: auto; padding-top: 4px; }
.cartao-local .acoes .botao { min-height: 44px; }
.vazio-locais p { margin: 0; }
@media (max-width: 720px) {
  .grade-locais { grid-template-columns: 1fr; }
  .cartao-local .acoes .botao { flex: 1 1 auto; }
}

/* Farmácia v1.0.5, acertos do qa-navegador: contador da barra em vermelho (cinza quando zero) e a etiqueta de
   estoque na lista da busca da prescrição em linha própria, sem espremer o botão. */
.barra-farmacia .contador { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--erro); color: var(--branco); font-size: 13px; font-weight: 700; }
.barra-farmacia .contador.zerado { background: var(--borda); color: var(--texto-suave); }
.lista-cid button .etiqueta { display: block; width: max-content; margin-top: 4px; white-space: nowrap; }

/* v1.0.5: busca nas listas grandes e cor da sala na borda do leito (o nome da sala continua escrito). */
.filtro-select { display: block; width: 100%; margin: 0 0 4px; min-height: 40px; }
.leito.sala-vermelho { border-top-color: var(--risco-vermelho, #C62828); }
.leito.sala-laranja { border-top-color: var(--risco-laranja, #EF6C00); }
.leito.sala-amarelo { border-top-color: var(--risco-amarelo, #F9A825); }
.leito.sala-verde { border-top-color: var(--risco-verde, #2E7D32); }
.leito.sala-azul { border-top-color: var(--risco-azul, #1565C0); }

/* v1.0.6: cartões ocupados do mapa com as partes na mesma posição dos vizinhos da fileira (achado do qa-navegador,
   print 13). Leito, nome (reserva 2 linhas), idade e tempo descem do topo; situação, condutas e avisos logo abaixo;
   as ações formam o rodapé, preso embaixo. Só no mapa: a TV (_tv.html) não tem .mapa-leitos. */
.mapa-leitos .leito-ocupado .leito-paciente { line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.mapa-leitos .leito-ocupado .leito-tempo { margin-top: 4px; line-height: 1.2; white-space: nowrap; }
.mapa-leitos .leito-ocupado .leito-situacao { margin-top: 2px; }
.mapa-leitos .leito-ocupado > .leito-acao { margin-top: auto; padding-top: 8px; }
.mapa-leitos .leito-ocupado > .leito-acao ~ .leito-acao { margin-top: 6px; padding-top: 0; }

/* ---------- Notificação SINAN (parte A; maquete aprovada em 05/11/2026, notas-sinan/design_sinan.md) ----------
   Só tokens que já existem. Amarelo 116C (--amarelo) só como barra gráfica; o texto de pendência fica em --alerta.
   Sigilo: o nome do agravo só aparece dentro da ficha; listas, selos e filas mostram só o Nº ou o selo. */

/* Número do campo como no papel: quadradinho mono. Cinza = vem do cadastro; azul = preencher aqui. */
.num-ficha { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 4px; border: 1.5px solid var(--texto-medio);
  border-radius: 4px; background: var(--branco); color: var(--texto-medio); font-family: var(--fonte-numero); font-size: 12.5px; font-weight: 500;
  line-height: 1; font-variant-numeric: tabular-nums; flex: none; }

/* Selo das filas e do início: sem o nome do agravo. Texto escrito, ícone só reforça. */
.selo-notificacao { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 7px; border-radius: 999px; background: var(--alerta-fundo);
  color: var(--alerta); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: inset 3px 0 0 var(--amarelo); }
.selo-notificacao svg, .icone-notificacao, .abrir-notificacao > summary svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* "Possível notificação" (triagem): barra amarela à esquerda. */
.aviso-notificacao { background: var(--alerta-fundo-suave); color: var(--texto); border-radius: 12px; padding: 14px 16px; box-shadow: inset 6px 0 0 var(--amarelo); margin: 0 0 14px; }
.aviso-notificacao .titulo-aviso { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; color: var(--alerta); }
.aviso-notificacao .titulo-aviso svg { width: 20px; height: 20px; }
.aviso-notificacao p { margin: 0 0 8px; }

/* Opções de agravo: cartões de toque largo (52 px), um por linha no celular. */
.escolha-agravo { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.escolha-agravo label { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 8px 14px; border: 1.5px solid var(--borda-campo);
  border-radius: 12px; background: var(--branco); font-weight: 700; cursor: pointer; }
.escolha-agravo label:hover { border-color: var(--azul); }
.escolha-agravo input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; }
.escolha-agravo label:has(input:checked) { border: 2px solid var(--azul); background: var(--azul-claro); }
.escolha-agravo .cid { margin-left: auto; font-family: var(--fonte-numero); font-weight: 500; font-size: 14px; color: var(--texto-suave); }
.escolha-agravo .nao-caso { font-weight: 400; color: var(--texto-medio); }
.busca-agravo { margin-top: 10px; }
.busca-agravo .vazio { padding: 8px 0 0; }

/* Topo da ficha: agravo (ponto focal) e o que falta, com link para o campo. Barra: amarela a confirmar,
   verde confirmada, cinza descartada. */
.ficha-cabeca { display: grid; gap: 10px 24px; align-items: start; box-shadow: inset 6px 0 0 var(--amarelo); }
.ficha-cabeca.confirmada { box-shadow: inset 6px 0 0 var(--ok); }
.ficha-cabeca.descartada { box-shadow: inset 6px 0 0 var(--borda-campo); }
@media (min-width: 900px) { .ficha-cabeca { grid-template-columns: minmax(16rem, 1fr) fit-content(22rem); } }
.ficha-cabeca .rotulo-agravo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; color: var(--texto-suave); }
.agravo-nome { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--texto); }
.agravo-nome .cid { font-family: var(--fonte-numero); font-weight: 500; font-size: 17px; color: var(--texto-suave); white-space: nowrap; }
.ficha-cabeca .quem-abriu { margin: 4px 0 0; font-size: 14px; color: var(--texto-suave); }
.ficha-cabeca details { margin-top: 8px; }
.ficha-cabeca details > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--azul); font-weight: 700; text-decoration: underline; cursor: pointer; }
.progresso-ficha { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--fundo); font-size: 14px; min-width: 240px; }
.progresso-ficha strong { display: block; font-size: 15px; }
.progresso-ficha ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.progresso-ficha a { display: inline-flex; align-items: center; padding: 6px 0; gap: 6px; min-height: 44px; font-weight: 700; }
.progresso-ficha .trava { font-weight: 400; font-size: 13px; color: var(--alerta); }
.progresso-ficha.completo strong { color: var(--ok); }

/* Blocos na ordem do papel: a legenda mostra a faixa de campos, sem o contador de seção do sistema. */
fieldset.ficha-bloco > legend { counter-increment: none; }
fieldset.ficha-bloco > legend::before { content: none; display: none; }
/* Raio-X: a legenda das caixas do número não é passo numerado (o contador mostrava "0"). */
fieldset.registro-pedidos > legend::before { content: none; display: none; }
fieldset.ficha-bloco > legend .faixa { font-family: var(--fonte-numero); font-weight: 500; font-size: 13px; color: var(--texto-suave); }
.grade-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; }
.grade-ficha .largo { grid-column: span 2; }
.grade-ficha .inteiro { grid-column: 1 / -1; }
.campo-ficha { min-width: 0; scroll-margin-top: 16px; }
.campo-ficha > label, .campo-ficha > .rotulo-ficha, .campo-ficha legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.campo-ficha .obrig { font-weight: 400; font-size: 13px; color: var(--texto-suave); }
.campo-ficha.vem-pronto { padding: 8px 12px 10px; border-radius: 10px; background: var(--fundo); }
.campo-ficha.vem-pronto > .rotulo-ficha { font-weight: 400; font-size: 13px; color: var(--texto-suave); margin-bottom: 4px; }
.campo-ficha.vem-pronto .num-ficha { border-color: var(--borda-campo); color: var(--texto-suave); background: transparent; }
.campo-ficha .valor { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.campo-ficha .valor.numero { font-family: var(--fonte-numero); font-weight: 500; }
.campo-ficha .valor.vazio-ficha { font-weight: 400; color: var(--texto-suave); font-style: italic; }
.campo-ficha .valor.falta { color: var(--erro); font-style: normal; font-weight: 700; }
.campo-ficha .origem { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texto-suave); }
.campo-ficha.preencher .num-ficha { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-escuro); }
.campo-ficha.preencher input, .campo-ficha.preencher select, .campo-ficha.preencher textarea { width: 100%; }
.campo-ficha fieldset.sub { min-width: 0; }
.campo-ficha .escolha-marcar label { min-height: 44px; }
.pagina-2 { background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; margin: 0 0 16px; }
.pagina-2 > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; padding: 10px 20px; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; }
.pagina-2 > summary .dica { font-family: var(--fonte-texto); font-weight: 400; margin: 0; }
.pagina-2 > div { padding: 0 20px 20px; }
.notificante { margin: 0; }
.notificante-titulo .dica { font-weight: 400; }

/* Decisão do médico (topo da ficha) e bloco da notificação no atendimento médico */
.bloco-notificacao { box-shadow: inset 6px 0 0 var(--amarelo); }
.bloco-notificacao.confirmada { box-shadow: inset 6px 0 0 var(--ok); }
.bloco-notificacao.descartada { box-shadow: inset 6px 0 0 var(--borda-campo); }
.bloco-notificacao h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bloco-notificacao .agravo-nome { font-size: 19px; }
.bloco-notificacao p { margin: 0 0 10px; }
.bloco-notificacao form { margin: 0; }
.bloco-notificacao .descartar { margin: 0; }
.bloco-notificacao .acoes > details[open] { flex-basis: 100%; }
.bloco-notificacao .descartar > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--erro);
  border-radius: 12px; color: var(--erro); font-weight: 700; cursor: pointer; list-style: none; }
.bloco-notificacao .descartar > summary::-webkit-details-marker { display: none; }
.bloco-notificacao .descartar[open] > summary { margin-bottom: 10px; }
.bloco-notificacao .porque-nao { margin: 6px 0 0; font-size: 14px; color: var(--alerta); }
.trava-desfecho { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--alerta); background: var(--alerta-fundo-suave); }
.trava-desfecho .titulo-aviso { margin: 0 0 6px; font-weight: 700; color: var(--alerta); display: flex; gap: 8px; align-items: center; }
.sugestao-cid { margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: var(--alerta-fundo-suave); box-shadow: inset 4px 0 0 var(--amarelo); }
.sugestao-cid label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; min-height: 44px; }
.sugestao-cid input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; }

/* Notificações do faturamento e da coordenação */
.contagens li.contagem-erro { box-shadow: inset 0 -4px 0 var(--erro); }
.contagens li.contagem-erro .numero { color: var(--erro); }
.tabela-notificacoes { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela-notificacoes th, .tabela-notificacoes td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-notificacoes thead th { font-size: 13px; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.tabela-notificacoes .num { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-notificacoes .paciente { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 14px; }
.tabela-notificacoes .num .etiqueta { font-family: var(--fonte-texto); }
.tabela-notificacoes tr.atrasada { background: var(--erro-fundo-suave); }
.tabela-notificacoes tr.atrasada td:first-child { box-shadow: inset 4px 0 0 var(--erro); }
.tabela-notificacoes input[type=checkbox] { margin: 0; }
.marcar-linha { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; cursor: pointer; }
.tabela-notificacoes .acoes { margin: 0; flex-wrap: nowrap; }
.prazo { font-family: var(--fonte-numero); white-space: nowrap; }
.barra-lote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 20px; border-bottom: 1px solid var(--borda); }
.barra-lote p { margin: 0; }
.barra-lote .acoes { margin: 0; }
.barra-lote form { margin: 0; }
.confirma-entrega { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--azul); background: var(--azul-claro); }
.confirma-entrega p { margin: 0 0 8px; }
.confirma-entrega .numeros { margin: 0 0 8px; padding-left: 18px; font-family: var(--fonte-numero); }
@media (max-width: 720px) {
  .grade-ficha { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grade-ficha .largo, .grade-ficha .preencher, .grade-ficha .inteiro { grid-column: 1 / -1; }
  .agravo-nome { font-size: 19px; }
  .progresso-ficha { min-width: 0; }
  .bloco-notificacao .acoes > *, .pagina-2 .botao { flex: 1 1 auto; }
  .bloco-notificacao .acoes > form > button { width: 100%; }
  .botao.pequeno, button.pequeno { min-height: 44px; }
  .tabela-notificacoes.tabela-empilha tr { padding: 10px 14px; }
  .tabela-notificacoes.tabela-empilha td { border: 0; padding: 3px 0; }
  .tabela-notificacoes.tabela-empilha td[data-rotulo]::before { min-width: 96px; font-family: var(--fonte-texto); font-weight: 400; text-transform: none; }
  .tabela-notificacoes.tabela-empilha tr.atrasada { box-shadow: inset 4px 0 0 var(--erro); }
  .tabela-notificacoes.tabela-empilha tr.atrasada td:first-child { box-shadow: none; }
  .tabela-notificacoes .acoes { flex-wrap: wrap; }
  .tabela-notificacoes .acoes > * { flex: 1 1 auto; }
  .tabela-notificacoes input[type=checkbox] { width: 28px; height: 28px; }
  .barra-lote { padding: 12px 14px; }
  .barra-lote .acoes, .barra-lote .acoes > *, .barra-lote .acoes > form > button { width: 100%; }
}

/* Registro do raio-X (templates/radiologia/exame.html e _previa_dicom.html): o técnico digita o número do exame,
   marca os raio-X que ele cobre, confere no computador do raio-X e registra. */
.registro-campos { display: grid; gap: 16px 24px; grid-template-columns: minmax(220px, 320px) 1fr; align-items: start; }
.registro-numero input { font-size: 20px; letter-spacing: 0.5px; }
.registro-pedidos { margin: 0; padding: 12px 16px 14px; }
.registro-pedidos legend { font-size: 15px; counter-increment: none; }
.opcoes-raiox { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.opcao-raiox label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; margin: 0; font-weight: 400; cursor: pointer; }
.opcao-raiox .dica { margin: 0; }
.opcao-raiox.com-numero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding-left: 30px; color: var(--texto-suave); }
#previa-dicom:empty { display: none; }
.previa-dicom { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--borda); border-left: 6px solid var(--azul); border-radius: var(--raio); background: var(--fundo); }
.previa-dicom p { margin: 0 0 8px; }
.previa-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; }
.previa-confere { border-left-color: var(--ok); background: var(--ok-fundo); }
.previa-diferente, .previa-fora_do_ar, .previa-nao_encontrada, .previa-sem_imagens { border-left-color: #B86A1E; background: var(--alerta-fundo); }
.previa-varias, .previa-invalido { border-left-color: var(--erro); background: var(--erro-fundo); color: var(--erro); }
.previa-dicom .aviso { margin: 0 0 10px; background: var(--branco); }
.comparar-nomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.comparar-nomes > div { background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; }
.comparar-nomes dt { font-size: 13px; color: var(--texto-suave); font-weight: 700; }
.comparar-nomes dd { margin: 2px 0 0; font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.previa-diferente .comparar-nomes > div { border-color: #B86A1E; }
.previa-registrar .campo-check label { font-weight: 700; }
.numero-dicom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--fonte-numero); font-size: 18px; font-weight: 500; }
.numero-errado .numero-dicom, .numero-errado .detalhes { color: var(--texto-suave); }
.numero-errado .detalhes.motivo-errado { color: var(--erro); }
.links-imagem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-imagem { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .registro-campos { grid-template-columns: 1fr; }
  .numero-registrado .acao-compacta, .numero-registrado > .botao { flex: 1 1 100%; }
}

/* Visualizador do raio-X (templates/radiologia/visualizador.html, static/js/visualizador_raiox.js). Fundo escuro
   neutro para ler a imagem; a barra age no lado ativo (borda azul). Medida em amarelo, que aparece sobre o cinza. */
body.visualizador {
  --vis-fundo: #0B0F17; --vis-painel: #151B27; --vis-controle: #212A3A; --vis-borda: #34405A;
  --vis-texto: #E8ECF3; --vis-suave: #AAB4C6; --vis-ativo: #3AA3EB; --vis-medida: #FFD54A;
  height: 100vh; margin: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--vis-fundo); color: var(--vis-texto);
}
body.visualizador :focus-visible { outline: 3px solid var(--vis-ativo); outline-offset: 2px; }
body.visualizador button { min-height: 40px; padding: 0 14px; font-size: 14px; background: var(--vis-controle); color: var(--vis-texto); border: 1px solid var(--vis-borda); border-radius: 10px; }
body.visualizador button:hover { background: #2C3850; color: var(--vis-texto); }
body.visualizador button[aria-pressed="true"] { background: var(--azul); border-color: var(--vis-ativo); color: #FFFFFF; }
body.visualizador button[aria-disabled="true"], body.visualizador button:disabled { opacity: 0.45; cursor: not-allowed; }
.vis-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px 14px; background: var(--vis-painel); border-bottom: 1px solid var(--vis-borda); }
.vis-paciente { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.vis-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.vis-nascimento { color: var(--vis-suave); font-size: 14px; }
.vis-comparar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.vis-comparar-rotulo { color: var(--vis-suave); }
.vis-comparar a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--vis-borda); border-radius: 999px; color: var(--vis-texto); text-decoration: none; }
.vis-comparar a:hover { border-color: var(--vis-ativo); color: var(--vis-texto); }
.vis-comparar a[aria-current="true"] { background: var(--azul); border-color: var(--vis-ativo); }
.vis-comparar a.vis-parar { border-style: dashed; }
.vis-topo-acoes { margin-left: auto; display: flex; gap: 8px; }
.vis-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 8px 14px; background: var(--vis-painel); border-bottom: 1px solid var(--vis-borda); }
.vis-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vis-zoom { min-width: 3.5em; text-align: center; font-family: var(--fonte-numero); }
.vis-faixa { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--vis-suave); }
.vis-faixa input[type=range] { width: 120px; min-height: 32px; padding: 0; border: 0; background: transparent; accent-color: var(--vis-ativo); box-shadow: none; }
.vis-dica { margin: 0; font-size: 13px; color: var(--vis-suave); }
.vis-dica:empty { display: none; }
.vis-atalhos { margin-left: auto; position: relative; font-size: 13px; color: var(--vis-suave); }
.vis-atalhos summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.vis-atalhos ul { position: absolute; right: 0; z-index: 5; margin: 4px 0 0; padding: 10px 14px 10px 28px; min-width: 260px; background: var(--vis-controle); border: 1px solid var(--vis-borda); border-radius: 10px; }
.vis-atalhos kbd { font-family: var(--fonte-numero); padding: 0 5px; border: 1px solid var(--vis-borda); border-radius: 4px; }
.vis-lados { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px; }
.vis-lados.comparando { grid-template-columns: 1fr 1fr; }
.vis-lado { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 2px solid transparent; border-radius: 12px; background: #000; overflow: hidden; }
.vis-lados.comparando .vis-lado { border-color: var(--vis-borda); }
.vis-lados.comparando .vis-lado.ativo { border-color: var(--vis-ativo); }
.vis-lado-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; background: var(--vis-painel); font-size: 14px; }
.vis-rotulo { padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: 0.6px; }
.vis-rotulo-atual { background: var(--azul); color: #FFFFFF; }
.vis-rotulo-anterior { border: 1px solid var(--vis-suave); color: var(--vis-texto); }
.vis-pedidos { color: var(--vis-suave); }
.vis-palco { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.vis-palco.arrastando { cursor: grabbing; }
.vis-palco.medindo { cursor: crosshair; }
.vis-camada { position: absolute; left: 50%; top: 50%; transform-origin: center center; }
.vis-camada img { display: block; width: 100%; height: 100%; max-width: none; }
.vis-camada img[hidden] { display: none; }
.vis-medida { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vis-medida-linha { stroke: var(--vis-medida); stroke-width: 2; }
.vis-medida-ponto { fill: var(--vis-medida); stroke: #000000; stroke-width: 1; }
.vis-carregando { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--vis-suave); }
.vis-carregando[hidden] { display: none; }
.vis-lado-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 52px; padding: 6px 10px; background: var(--vis-painel); }
.vis-imagens { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-imagens button { min-width: 44px; min-height: 44px; padding: 0; font-family: var(--fonte-numero); }
.vis-resultado { margin-left: auto; font-family: var(--fonte-numero); font-size: 16px; color: var(--vis-medida); }
.vis-sem-imagem { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 24px; text-align: center; color: var(--vis-suave); }
.vis-sem-imagem p { margin: 0; max-width: 46ch; }
.vis-sem-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; color: var(--vis-texto); }
@media (max-width: 900px) {
  .vis-lados.comparando { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  body.visualizador button { min-height: 44px; }
}
/* Visualizador no tablet (toque): alvos de 44 px nos botões de zoom, nas faixas e em Atalhos. */
@media (pointer: coarse) {
  .vis-faixa input[type=range], .vis-atalhos summary { min-height: 44px; }
  .visualizador button { min-width: 44px; min-height: 44px; }
}

/* Triagem conduzida (tela A aprovada pelo Everton em 07/11/2026): lista do protocolo da unidade, da cor mais grave
   para a mais leve. Cada linha é um alvo de 48 px com a cor do protocolo na borda; a marcada fica azul.
   As cores das bordas são as da classificação (.cor-risco), não da marca. Comportamento em static/js/triagem.js. */
.campo-fluxograma { max-width: 560px; }
.disc-status { margin: 8px 0 0; }
.disc-status:empty { display: none; }
.disc-status-erro { padding: 10px 14px; border-radius: 10px; background: var(--erro-fundo); color: var(--erro); font-weight: 700; }
#discriminadores[aria-busy="true"] { opacity: .5; }
#discriminadores:not(:empty) { margin-top: 14px; }
.lista-protocolo > .dica { margin: 0 0 10px; }
.lista-discriminadores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.grupo-cor { margin: 10px 0 0; }
.grupo-cor:first-child { margin-top: 0; }
.discriminador { --cor-item: var(--borda-campo); }
.cor-item-vermelho { --cor-item: #C62828; }
.cor-item-laranja { --cor-item: #C2410C; }
.cor-item-amarelo { --cor-item: #F2C200; }
.cor-item-verde { --cor-item: #2E7D32; }
.cor-item-azul { --cor-item: #1E63D6; }
.discriminador > label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--borda); border-left: 6px solid var(--cor-item); border-radius: 10px; background: var(--branco); font-weight: 400; font-size: 16px; cursor: pointer; }
.discriminador > label:hover { border-color: var(--azul); border-left-color: var(--cor-item); }
.discriminador input[type=radio] { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--azul); }
/* Palavra inteira: o texto quebra só entre palavras e a caixa cresce na altura (no celular cortava no meio). */
.discriminador .texto { overflow-wrap: normal; word-break: normal; hyphens: none; }
.discriminador > label:has(input:checked) { background: var(--azul-claro); border-color: var(--azul); border-left-color: var(--cor-item); box-shadow: inset 0 0 0 1px var(--azul); }
.discriminador > label:has(input:checked) .texto { font-weight: 700; color: var(--azul-escuro); }
.discriminador > label:has(input:focus-visible) { outline: 3px solid var(--azul-escuro); outline-offset: 2px; }
.discriminador-explica { margin: 2px 0 4px 20px; font-size: 14px; }
.discriminador-explica summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--azul); font-weight: 700; cursor: pointer; }
.discriminador-explica p { margin: 0 0 6px; padding: 8px 12px; border-left: 3px solid var(--borda); color: var(--texto-suave); max-width: 70ch; }
.nenhum-se-aplica { margin-top: 8px; }
.nenhum-se-aplica > label { grid-template-columns: 22px minmax(0, 1fr); border-style: dashed; border-left: 1px dashed var(--borda-campo); }
.nenhum-se-aplica > label:hover, .nenhum-se-aplica > label:has(input:checked) { border-left-color: var(--azul); }
.campo-digitado { margin-top: 14px; max-width: 860px; }
/* Sugestão da cor: logo acima das cores, onde a decisão é tomada. Diferente da escolhida: tom de alerta. */
.cor-sugerida { margin: 8px 0 12px; padding: 10px 14px; border-left: 4px solid var(--azul); border-radius: 8px; background: var(--azul-claro); color: var(--azul-escuro); font-weight: 700; }
.cor-sugerida:empty { display: none; }
.cor-sugerida.diverge { border-left-color: var(--alerta); background: var(--alerta-fundo); color: var(--alerta); }
.marca-sugerida { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; background: var(--branco); color: var(--texto); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.dica-justificativa { color: var(--alerta); font-weight: 700; }
/* Retorno em 48 h (topo da tela) e alerta do fluxograma marcado pela coordenação (dentro da lista). */
.aviso-retorno { border-left: 5px solid var(--alerta); font-weight: 700; }
.protocolo-retorno { border-left: 5px solid var(--erro); font-weight: 700; margin-top: 0; }
@media (pointer: coarse) {
  .discriminador > label { min-height: 52px; }
}
/* Celular: a cor desce para a linha de baixo e o texto fica com a largura toda. */
@media (max-width: 520px) {
  .discriminador > label { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; }
  .discriminador > label > .cor-risco { grid-column: 2; justify-self: start; min-width: 0; }
}

/* ===== Protocolo da unidade e indicador da classificação (triagem conduzida, 07/11/2026) ===== */
.tabela-estoque td.num, .tabela-estoque th.num { text-align: right; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
.tabela-matriz { border-collapse: collapse; font-size: 15px; }
.tabela-matriz caption { text-align: left; color: var(--texto-suave); padding-bottom: 8px; }
.tabela-matriz th, .tabela-matriz td { padding: 8px 12px; border: 1px solid var(--borda); text-align: center; }
.tabela-matriz td { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
.tabela-matriz td.diagonal { background: var(--azul-claro); font-weight: 700; color: var(--azul-escuro); }
.tabela-matriz td.zero { color: var(--texto-suave); }
.escolha-marcar.colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.escolha-marcar.alvo-44 label { min-height: 44px; display: flex; align-items: center; gap: 8px; }

/* Alertas do paciente (08/11/2026): alergia em vermelho, precaução em amarelo; o texto diz o que é (não só a cor). */
.selo-paciente { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.selo-alergia { background: var(--erro-fundo); color: var(--erro); box-shadow: inset 3px 0 0 var(--erro); }
.selo-precaucao { background: var(--alerta-fundo); color: var(--alerta); box-shadow: inset 3px 0 0 var(--amarelo); }
.selos-paciente { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.historico-alertas li { border-top: 1px solid var(--borda); padding: 8px 0; list-style: none; }

/* Pedido de transferência aberto há as horas do alerta ou mais (mapa, 08/11/2026). */
.selo-transferencia-vencida { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--erro-fundo); color: var(--erro); }

/* TVs abertas pela recepção (tela Vídeos da TV, v1.0.14) */
.ctv-telas h2 { font-size: 18px; }
.ctv-telas > .dica { margin: 4px 0 12px; }
.ctv-telas-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.ctv-telas-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--borda-suave); }
.ctv-telas-lista li:last-child { border-bottom: 0; }
.ctv-telas-sinal { color: var(--texto-suave); }
.ctv-telas-lista form { margin-left: auto; }
/* TV aberta por chave, desligada ou vencida: mesmo visual do aviso de conexão */
.tvc-aviso-desligada { background: var(--tvc-erro-fundo); color: var(--tvc-erro-texto); box-shadow: inset 0.6vw 0 0 var(--tvc-erro); }

/* Fila de quem aguarda resultado (Resultados de exames, recepção, 10/11/2026) */
.lista-fila-resultados { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-fila-resultados > li { border-bottom: 1px solid var(--borda-suave); padding-bottom: 12px; }
.lista-fila-resultados > li:last-child { border-bottom: 0; }

/* Pedidos de compra da farmácia (10/11/2026, maquete em notas-v1014/maquete_pedido). Só tokens que já existem. */
.pedido-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 18px; margin: 0 0 16px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: inset 6px 0 0 var(--amarelo); }
.pedido-faixa.fechado { box-shadow: inset 6px 0 0 var(--azul); }
.pedido-faixa .pedido-numero { font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; color: var(--azul-escuro); margin: 0; }
.pedido-faixa .pedido-numero span { font-family: var(--fonte-numero); font-weight: 500; }
.pedido-situacao { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.pedido-situacao.rascunho { background: var(--alerta-fundo); color: var(--alerta); }
.pedido-situacao.fechado { background: var(--azul-20); color: var(--azul-escuro); }
.pedido-situacao.cancelado { background: var(--erro-fundo-suave); color: var(--erro); }
.pedido-situacao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pedido-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--texto-suave); }
.pedido-meta b { color: var(--texto); font-weight: 700; }
.pedido-faixa .acoes { margin: 0 0 0 auto; }
.pedido-acrescentar h2 { font-size: 17px; margin-bottom: 10px; }
.pedido-acrescentar .subabas { margin-bottom: 12px; }
.pedido-linha-nova { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 12px; align-items: end; }
.pedido-linha-nova p { margin: 0; }
.pedido-linha-nova input[type=number] { font-family: var(--fonte-numero); text-align: right; }
@media (max-width: 720px) { .pedido-linha-nova { grid-template-columns: 1fr; } .pedido-linha-nova button { width: 100%; } }
.pedido-tabela td.num input { width: 130px; text-align: right; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; min-height: 40px; }
.pedido-tabela td.num { width: 1%; white-space: nowrap; }
.pedido-tabela td.acao { width: 1%; text-align: right; }
button.link.pedido-tirar { min-height: 44px; padding: 0 8px; color: var(--erro); font-size: 14px; }
button.link.pedido-tirar:hover { color: var(--erro); background: var(--erro-fundo-suave); }
.pedido-tabela tr.alterada td { background: var(--alerta-fundo-suave); }
.pedido-tabela .sugerido { color: var(--texto-suave); }
.pedido-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 14px; }
.pedido-rodape p, .pedido-rodape .acoes { margin: 0; }
.pedido-total { font-weight: 700; }
.pedido-total span { font-family: var(--fonte-numero); }
.pedidos-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.pedidos-topo .acoes, .pedidos-topo .dica { margin: 0; }
.tabela-estoque td.numero-pedido a { font-family: var(--fonte-numero); font-weight: 700; font-size: 15px; }
.tabela-estoque td.data { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-estoque td.acao { text-align: right; }

/* ===== Paciente não identificado e junção de fichas (v1.0.14, maquete em notas-v1014/maquete_nao_identificado). Só tokens que já existem. ===== */
/* A marca da identidade provisória é a BORDA TRACEJADA: no selo, no avatar e na faixa do paciente. Não usa vermelho
   (alerta clínico), nem amarelo (só gráfico), nem cor de risco. O texto "Não identificado" sempre aparece; o
   tracejado só reforça e sobrevive a cópia sem cor. */
.selo-nao-identificado { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px; border: 1.5px dashed var(--texto);
  border-radius: 999px; background: var(--branco); color: var(--texto); font-family: var(--fonte-texto); font-size: 12px; font-weight: 700;
  line-height: 1.5; text-transform: none; white-space: nowrap; vertical-align: middle; }
.selo-nao-identificado svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.avatar.provisorio { background: var(--branco) !important; border: 2px dashed var(--texto-suave); color: var(--texto-suave); }
.faixa-paciente.provisorio { border: 1.5px dashed var(--borda-campo); }
/* "~40 anos": o til é a idade estimada; o leitor de tela ouve "idade estimada". */
.idade-estimada { font-weight: 700; color: var(--texto); white-space: nowrap; }
.sem-chamada { font-size: 13px; color: var(--texto-suave); white-space: nowrap; }

/* Aviso do provisório (ficha e formulário): mesmo tracejado, com o caminho escrito (juntar ou completar). */
.aviso-provisorio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 18px; margin: 0 0 16px;
  border: 1.5px dashed var(--borda-campo); border-radius: var(--raio); background: var(--branco); }
.aviso-provisorio p { margin: 0; flex: 1 1 340px; }
.aviso-provisorio .acoes { margin: 0; }

/* Janela do provisório (sexo e idade). */
dialog.dialogo { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 64, 122, .25); }
dialog.dialogo::backdrop { background: rgba(21, 17, 9, .45); }
dialog.dialogo h2 { font-size: 20px; color: var(--azul-escuro); margin-bottom: 4px; }
dialog.dialogo .acoes { justify-content: flex-end; margin-top: 18px; }
.escolha-segmentada { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha-segmentada label { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 16px; border: 2px solid var(--borda-campo);
  border-radius: 12px; font-size: 16px; cursor: pointer; background: var(--branco); }
.escolha-segmentada input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.escolha-segmentada label:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-escuro); }
.escolha-segmentada label:has(input:focus-visible) { outline: 3px solid var(--azul-escuro); outline-offset: 2px; }
.campo-idade { display: flex; align-items: center; gap: 10px; max-width: 220px; }
.campo-idade input { font-family: var(--fonte-numero); font-size: 20px; text-align: right; }
.nome-gerado { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--fundo); font-size: 14px; }
.nome-gerado b { display: block; font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 15px; color: var(--texto); }

/* Juntar: tabela lado a lado. Linha diferente leva o texto "diferente" (não só cor). */
.passos-juntar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; color: var(--texto-suave); }
.passos-juntar li { display: flex; align-items: center; gap: 8px; }
.passos-juntar li span { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; border: 2px solid var(--borda-campo); font-weight: 700; font-size: 13px; }
.passos-juntar li[aria-current="step"] { color: var(--azul-escuro); font-weight: 700; }
.passos-juntar li[aria-current="step"] span { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.comparar-rolagem { overflow-x: auto; }
table.comparar { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
table.comparar th, table.comparar td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda-suave); }
table.comparar thead th { vertical-align: bottom; border-bottom: 2px solid var(--borda); }
table.comparar tbody th { width: 170px; font-size: 14px; font-weight: 400; color: var(--texto-suave); }
table.comparar td { width: 40%; font-weight: 700; overflow-wrap: anywhere; }
table.comparar td.vazio-campo { font-weight: 400; color: var(--texto-suave); }
table.comparar tr.diferente td, table.comparar tr.diferente th { background: var(--alerta-fundo-suave); }
.marca-diferente { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--alerta); }
/* Coluna que fica e coluna que sai: escrito no topo; a coluna que fica ganha o contorno azul. */
table.comparar .col-fica { box-shadow: inset 3px 0 0 var(--azul), inset -3px 0 0 var(--azul); }
table.comparar thead .col-fica { box-shadow: inset 3px 0 0 var(--azul), inset -3px 0 0 var(--azul), inset 0 3px 0 var(--azul); }
table.comparar tbody tr:last-child .col-fica { box-shadow: inset 3px 0 0 var(--azul), inset -3px 0 0 var(--azul), inset 0 -3px 0 var(--azul); }
table.comparar .col-sai { color: var(--texto-suave); }
.cab-ficha { display: flex; flex-direction: column; gap: 6px; }
.cab-ficha .num { font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px; color: var(--azul-escuro); }
.papel-ficha { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.papel-ficha.fica { background: var(--azul); color: var(--branco); }
.papel-ficha.sai { background: var(--fundo); color: var(--texto); border: 1px solid var(--borda-campo); }
.escolher-fica { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; border: 2px solid var(--borda-campo); border-radius: 10px; font-size: 14px; cursor: pointer; background: var(--branco); }
.escolher-fica input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.escolher-fica:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-escuro); }
/* O que vai acontecer: lista numerada, frases curtas, números em fonte de número. */
.vai-acontecer { border-left: 6px solid var(--azul); }
.vai-acontecer ol { margin: 0; padding-left: 22px; max-width: 80ch; }
.vai-acontecer li { margin-bottom: 6px; }
.vai-acontecer .n { font-family: var(--fonte-numero); font-weight: 500; }
.confirmar-mesma { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 14px 0 0; padding: 4px 14px; border: 2px solid var(--borda-campo); border-radius: 12px; font-size: 16px; cursor: pointer; }
.confirmar-mesma:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }

/* Ficha juntada e separar. */
.etiqueta-origem { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--azul-20); color: var(--azul-escuro); }
.juncoes li { align-items: flex-start; }
.juncoes .quando { font-family: var(--fonte-numero); font-size: 14px; }
.lista-separar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.lista-separar h3 { font-family: var(--fonte-titulo); font-size: 16px; margin: 0 0 6px; }
.contador-motivo { font-family: var(--fonte-numero); font-size: 13px; }

@media (max-width: 720px) { .aviso-provisorio .acoes, .aviso-provisorio .acoes .botao { width: 100%; } }

/* Devolução do paciente (v1.0.14): selos de estado na dose e no procedimento anulado. Texto sempre escrito. */
.selo-devolucao { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--azul-20); color: var(--azul-escuro); }
.selo-devolucao-pendente { background: var(--alerta-fundo); color: var(--alerta); }
.selo-devolucao-recusada { background: var(--erro-fundo-suave); color: var(--erro); }
.devolver-dose { margin-top: 4px; }

/* Procedimentos (v1.0.14): material em linhas próprias, abaixo do "Marcar como feito"; no celular nada passa do
   cartão (achado do qa-navegador, aba Exames e procedimentos a 375 px). */
.material-procedimento, .material-livre { flex: 1 1 100%; min-width: 0; }
.material-procedimento .linha-material, .material-livre .linha-material { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 6px; }
.material-procedimento .linha-material > *, .material-livre .linha-material > * { min-width: 0; }
.material-procedimento .linha-material input:not([type="number"]), .material-livre .linha-material input:not([type="number"]) { flex: 1 1 0; min-width: 0; width: auto; }
.material-procedimento .linha-material select, .material-livre .linha-material select { flex: 1 1 auto; min-width: 0; max-width: 360px; }
.material-procedimento .linha-material input[type="number"], .material-livre .linha-material input[type="number"] { flex: 0 0 6em; width: 6em; min-height: 40px; }
@media (max-width: 640px) {
  /* A coluna implícita do grid crescia pelo min-content do formulário e o cartão passava da tela. */
  [data-procedimentos] .lista-simples { grid-template-columns: minmax(0, 1fr); }
  [data-procedimentos] .lista-simples li { min-width: 0; }
  [data-procedimentos] .lista-simples li > div { flex: 1 1 100%; min-width: 0; }
  [data-procedimentos] .dica, [data-procedimentos] .estado-dose { overflow-wrap: anywhere; }
  [data-procedimentos] .checagem > form.acao-compacta { display: flex; width: 100%; min-width: 0; }
  [data-procedimentos] .acao-compacta input[type="number"] { min-width: 0; max-width: 100%; }
  .material-procedimento .linha-material, .material-livre .linha-material { flex-wrap: wrap; }
  .material-procedimento .linha-material input:not([type="number"]), .material-livre .linha-material input:not([type="number"]) { flex: 1 1 100%; }
  .material-procedimento .linha-material select, .material-livre .linha-material select { flex: 1 1 0; max-width: 100%; }
}

/* Comparação de fichas no celular: o campo em cima e as duas fichas lado a lado, sem rolagem que esconda a que fica. */
@media (max-width: 640px) {
  table.comparar { min-width: 0; }
  table.comparar, table.comparar thead, table.comparar tbody { display: block; }
  table.comparar tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  table.comparar thead th:first-child { display: none; }
  table.comparar th, table.comparar td { padding: 8px 10px; }
  table.comparar tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; border-bottom: 0; }
  table.comparar td { width: auto; }
}

/* ---------- Pedido externo (v1.0.15; maquete aprovada pelo Everton em 11/11/2026, notas-v1015) ----------
   Marca: selo de contorno azul com o ícone de papel entrando. Não usa vermelho (alergia e erro), amarelo (pendência),
   tracejado (não identificado) nem cor de risco. O texto "Pedido externo" sempre aparece. Só tokens que já existem. */
.selo-pedido-externo { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; border: 1.5px solid var(--azul); border-radius: 999px;
  background: var(--branco); color: var(--azul-escuro); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
/* Do tamanho do texto, nunca esticado pela coluna flex ou pela grade em volta (fila médica, radiologia). */
.selo-pedido-externo { width: max-content; max-width: 100%; flex: none; }
.selo-pedido-externo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.quem-pediu-externo { display: block; color: var(--azul-escuro); font-size: 14px; overflow-wrap: anywhere; }

/* Triagem: a escolha da rota, logo abaixo da cor. O triagem.js mostra só em branco administrativo, azul e verde. */
.rota-pedido-externo { margin-top: 16px; padding: 14px 16px; border: 2px solid var(--borda-campo); border-radius: 14px; background: var(--branco); }
.rota-pedido-externo:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.rota-pedido-externo > label { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 17px; cursor: pointer; min-height: 44px; }
.rota-pedido-externo > label input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; }
.rota-pedido-externo ul { margin: 10px 0 0 34px; padding-left: 18px; font-size: 14px; color: var(--texto); max-width: 72ch; }
.rota-pedido-externo li { margin-bottom: 3px; }
.rota-fechada { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--fundo); color: var(--texto-suave); font-size: 14px; }

/* Transcrição: o papel à esquerda, fixo na rolagem; os campos à direita. No celular, o papel vem em cima. */
.transcrever { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.transcrever > * { min-width: 0; }
@media (min-width: 1000px) {
  .transcrever { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .transcrever > .papel-pedido { position: sticky; top: 70px; }
}
.papel-pedido { background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 14px; }
.papel-pedido h2 { font-size: 16px; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.papel-pedido .lista-simples { margin: 0; padding-left: 18px; }
.papel-enviar { display: grid; place-items: center; gap: 8px; min-height: 180px; padding: 20px; border: 2px dashed var(--borda-campo); border-radius: 12px; text-align: center; }
.papel-enviar input[type=file] { min-height: 0; padding: 10px; }
.papel-enviar svg { width: 36px; height: 36px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Alergia: no topo do formulário, com confirmação. Mesmo vermelho do selo de alergia. */
.alergia-conferir { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--erro-fundo-suave); box-shadow: inset 6px 0 0 var(--erro); }
.alergia-conferir .titulo { margin: 0 0 4px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px; color: var(--erro); overflow-wrap: anywhere; }
.alergia-conferir .campo-check label { font-size: 16px; gap: 10px; }
.alergia-conferir .campo-check input, .declaracao input { width: 22px; height: 22px; min-height: 0; }

/* Cada item do pedido: um bloco com o tipo escrito e o ícone. */
.item-pedido { border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px 16px; margin: 0 0 14px; background: var(--branco); min-width: 0; }
.item-pedido-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.item-pedido-topo h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.item-pedido-topo h3 svg { width: 20px; height: 20px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item-pedido-topo .acoes { margin: 0 0 0 auto; }
.item-pedido .grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.acrescentar-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acrescentar-item .rotulo { margin: 0 6px 0 0; }

/* Declaração e destino: caixas grandes de confirmação. */
.declaracao { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; margin: 0; padding: 12px 14px; border: 2px solid var(--borda-campo); border-radius: 12px; font-size: 16px; font-weight: 400; cursor: pointer; background: var(--branco); }
.declaracao input { margin: 1px 0 0; flex: none; }
.declaracao:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.escolha-destino { display: grid; gap: 10px; }
.escolha-destino label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 2px solid var(--borda-campo); border-radius: 12px; font-weight: 400; cursor: pointer; background: var(--branco); }
.escolha-destino label b { display: block; }
.escolha-destino input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; }
.escolha-destino label:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.escolha-segmentada { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha-segmentada label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 2px solid var(--borda-campo); border-radius: 10px; font-weight: 400; cursor: pointer; background: var(--branco); }
.escolha-segmentada input { width: 18px; height: 18px; min-height: 0; margin: 0; }
.escolha-segmentada label:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }

/* Lista "Procedimentos externos": o que falta, sempre escrito. Feito = verde; a fazer = barra amarela; não feito = cinza. */
.tarefas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tarefa { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 8px; font-size: 14px; background: var(--fundo); color: var(--texto); overflow-wrap: anywhere; }
.tarefa b { font-weight: 700; }
.tarefa .num { white-space: nowrap; font-family: var(--fonte-numero); font-weight: 500; }
.tarefa.a-fazer { background: var(--alerta-fundo-suave); box-shadow: inset 3px 0 0 var(--amarelo); }
.tarefa.a-fazer .estado { color: var(--alerta); font-weight: 700; }
.tarefa.feita { background: var(--ok-fundo-suave); }
.tarefa.feita .estado { color: var(--ok); font-weight: 700; }
.tarefa.nao-feita .estado { color: var(--texto-suave); font-weight: 700; }
.falta-liberar { font-size: 14px; color: var(--alerta); font-weight: 700; margin: 4px 0 0; }
.pronto-liberar { font-size: 14px; color: var(--ok); font-weight: 700; margin: 4px 0 0; }
.item .principal { min-width: 0; }
.item .lado-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.item.pronto { box-shadow: inset 4px 0 0 var(--ok); }
.encaminhar-aberto { flex: 1 1 100%; min-width: 0; padding: 14px 16px; border-radius: 12px; background: var(--fundo); }

/* Passos do ECG: feito, cópia, entrega. O número, o texto e o ícone dizem o estado, não só a cor. */
.passos-proc { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.passo-proc { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--branco); }
.passo-proc .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 2px solid var(--borda-campo); background: var(--branco); }
.passo-proc.feito .n { background: var(--ok); border-color: var(--ok); color: var(--branco); }
.passo-proc.agora { border: 2px solid var(--azul); }
.passo-proc.agora .n { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.passo-proc h3 { margin: 3px 0 2px; font-family: var(--fonte-titulo); font-size: 16px; }
.passo-proc p { margin: 0; }
.passo-proc > div { min-width: 0; }
.anexo-feito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-radius: 10px; background: var(--fundo); font-size: 14px; }

/* Bloco do pedido externo nas telas e entrega registrada. */
.bloco-pedido-externo { padding: 14px 16px; border: 1.5px solid var(--azul); border-radius: 14px; background: var(--branco); margin-bottom: 14px; }
.bloco-pedido-externo .quem-pediu { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.bloco-pedido-externo.anulado { border-style: dashed; color: var(--texto-suave); }
.entrega-registrada { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--ok-fundo-suave); font-size: 14px; }

/* Configurações: chave com a situação escrita ao lado do nome. */
.chave { padding: 16px 0; border-top: 1px solid var(--borda); }
.chave:first-of-type { border-top: 0; padding-top: 4px; }
.chave-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.chave-topo h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 16px; }
.chave .campo-check label { font-size: 16px; gap: 10px; }
.chave .campo-check input { width: 22px; height: 22px; min-height: 0; }
.chave .aviso { margin: 10px 0; }
.aceite-medico { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--fundo); }
.aceite-medico.aceito { background: var(--ok-fundo-suave); }

@media (max-width: 720px) {
  .item .lado-acoes { margin-left: 0; width: 100%; }
  .item .lado-acoes > * { flex: 1 1 auto; }
  .item-pedido-topo .acoes { margin-left: 0; }
}

/* Correções do pedido externo (11/11/2026). Foto do papel com Aumentar e Girar (N4): a moldura rola quando aumenta. */
.papel-moldura { max-height: 70vh; overflow: auto; border-radius: 10px; background: #5E6470; overscroll-behavior: contain; }
.papel-moldura img { display: block; width: 100%; max-width: none; height: auto; transform-origin: center center; transition: transform .2s ease; }
.papel-ferramentas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.papel-pdf { margin: 0; padding: 12px; border-radius: 10px; background: var(--fundo); }
.papel-pedido > .dica { margin: 10px 0 0; }
/* "Não aceitar este item" (aceite parcial): o motivo aparece só com a caixa marcada; o item fica tracejado. */
.item-pedido-topo .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.nao-aceitar { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 14px; cursor: pointer; min-height: 44px; }
.nao-aceitar input { width: 18px; height: 18px; min-height: 0; margin: 0; }
.nao-aceitar-motivo { display: none; margin: 0 0 12px; }
.item-pedido:has(.nao-aceitar input:checked) { border-style: dashed; background: var(--fundo); }
.item-pedido:has(.nao-aceitar input:checked) .nao-aceitar-motivo { display: block; }
.item-pedido.recusado { border: 2px solid var(--erro); }
.item-pedido [data-erro-item] { margin: 0 0 12px; }
.item-pedido [data-erro-item] p { margin: 0; }
.prazo-receita { font-size: 14px; margin: 6px 0 0; }
.prazo-receita b { font-family: var(--fonte-numero); font-weight: 500; }
/* N11: "Quem recebeu" não quebra; o selo da cor (branco longo) não empurra a lista. */
.passos-proc fieldset legend, [data-entrega-externa] fieldset legend { white-space: nowrap; }
.lista-externos .item > .cor-risco { width: 110px; white-space: normal; overflow-wrap: anywhere; }
.bloco-pedido-externo-medico .bloco-pedido-externo + .bloco-pedido-externo { border-top: 1px solid var(--borda); padding-top: 10px; }

/* ===== Kit de materiais (v1.0.16): maquete aprovada pelo Everton em 12/11/2026 (notas-materiais/maquete_kit). =====
   Princípio: o kit aparece pronto, em uma linha de pastilhas. Certo = 1 clique, como hoje.
   Mudar é exceção e abre as linhas editáveis no próprio lugar. O que mudou do kit leva a palavra "kit: N", não só cor. */

/* Célula da checagem com kit: hora, material, botões e o "não administrado" abaixo de uma linha fina. */
.checagem-kit { display: grid; gap: 8px; min-width: 0; }
.checagem-kit .linha-hora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.checagem-kit .linha-hora select { width: auto; min-height: 40px; padding: 4px 8px; font-size: 14px; }
.checagem-kit .botoes-checar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.checagem-kit .nao-adm { padding-top: 8px; border-top: 1px solid var(--borda-suave); display: grid; gap: 6px; }

/* Caixa do material: fundo da página, para separar do resto da linha sem gritar. */
.material-dose { min-width: 0; padding: 8px 12px 10px; border-radius: 12px; background: var(--fundo); border: 1px solid var(--borda); }
.material-dose.mudou { border-color: var(--amarelo); box-shadow: inset 4px 0 0 var(--amarelo); }
.material-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.material-topo .titulo { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.material-topo .situacao { font-size: 13px; color: var(--texto-suave); }
.material-dose.mudou .material-topo .situacao { color: var(--alerta); font-weight: 700; }
.material-topo button.link { margin-left: auto; min-height: 32px; font-size: 14px; }
.material-pastilhas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; }
.material-pastilhas li { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 10px; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); font-size: 14px; }
.material-pastilhas .qtd, .linha-kit .qtd-kit, .num { font-family: var(--fonte-numero); font-weight: 500; font-variant-numeric: tabular-nums; }
.material-pastilhas .origem { font-size: 12px; color: var(--azul-escuro); font-weight: 700; }
.material-pastilhas li.alterada { background: var(--alerta-fundo-suave); border-color: var(--amarelo); }
.material-pastilhas li.alterada .origem { color: var(--alerta); }
.material-pastilhas .vazia { color: var(--texto-suave); font-style: italic; border-style: dashed; }
/* Unidade do item (K21): a mesma em todas as linhas (kit, punção, acréscimo e perda), discreta. */
.material-pastilhas .un, .linha-kit .un, .perda-linha .un { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }

/* Linhas editáveis: nome à esquerda, contador no meio, tirar à direita. Alvos de 40 px (44 no celular). */
.linhas-kit { list-style: none; margin: 8px 0 0; padding: 0; }
.linha-kit { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--borda); }
.linha-kit .nome { min-width: 0; overflow-wrap: anywhere; }
.linha-kit .nome small { display: block; font-size: 12px; color: var(--texto-suave); }
.linha-kit.alterada .nome small { color: var(--alerta); font-weight: 700; }
.contador-qtd { justify-self: start; display: inline-flex; align-items: stretch; border: 1px solid var(--borda-campo); border-radius: 10px; overflow: hidden; background: var(--branco); }
.contador-qtd button { min-height: 40px; width: 40px; padding: 0; border-radius: 0; background: var(--branco); color: var(--azul); font-size: 20px; line-height: 1; }
.contador-qtd button:hover { background: var(--azul-claro); color: var(--azul-escuro); }
.contador-qtd input { width: 3.4em; min-height: 40px; padding: 0; border: 0; border-left: 1px solid var(--borda); border-right: 1px solid var(--borda); border-radius: 0; text-align: center; font-family: var(--fonte-numero); }
.contador-qtd input:focus { box-shadow: none; outline-offset: -3px; }
button.tirar { min-height: 40px; padding: 0 10px; background: none; color: var(--erro); font-size: 14px; text-decoration: underline; }
button.tirar:hover { background: var(--erro-fundo-suave); color: var(--erro); }
.acrescentar-material { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: end; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borda-campo); }
.acrescentar-material label { font-size: 13px; margin: 0 0 2px; }
.acrescentar-material select, .acrescentar-material input[type=number] { min-height: 40px; font-size: 14px; }
.acrescentar-material input[type=number] { width: 5.5em; font-family: var(--fonte-numero); }
.acrescentar-material .filtro-select { font-size: 14px; }
.rodape-linhas { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; font-size: 14px; }

/* "Puncionei acesso novo": caixa grande, só na via EV. Marcada fica azul, como as outras confirmações. */
.acesso-novo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 4px 12px; border: 2px solid var(--borda-campo); border-radius: 10px; background: var(--branco); font-size: 15px; cursor: pointer; }
.acesso-novo input { margin: 0; }
.acesso-novo:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.acesso-novo .dica { margin: 0; font-size: 13px; }
.acesso-novo .rotulo-acesso { white-space: nowrap; font-weight: 700; }

/* "Material perdido" dentro do "Não administrado": fechado por padrão (o botão vem de .revelar). */
details.material-perdido .perda-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--borda); }
details.material-perdido .perda-linha label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; min-height: 40px; flex: 1 1 200px; }
details.material-perdido select { min-height: 40px; max-width: 100%; }

/* Material gravado na dose: frase simples; o que faltou ganha selo escrito. */
.material-gravado { display: block; margin-top: 4px; font-size: 14px; color: var(--texto-suave); }
.selo-falta-material { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--alerta-fundo); color: var(--alerta); }

/* Cadastro de kits: lista à esquerda, edição à direita (no celular, um embaixo do outro). */
.kits-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .kits-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.filtro-tipos[aria-label="Tipos de kit"] .contador { background: var(--azul-20); color: var(--azul-escuro); }  /* contagem, não pendência: sem vermelho */
.lista-kits { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-kits a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--texto); border: 1px solid transparent; }
.lista-kits a:hover { background: var(--azul-claro); }
.lista-kits a[aria-current="true"] { background: var(--azul-claro); border-color: var(--azul); box-shadow: inset 4px 0 0 var(--azul); }
.lista-kits .chave { font-weight: 700; }
.lista-kits .resumo { grid-column: 1 / -1; font-size: 13px; color: var(--texto-suave); }
.lista-kits .via { font-family: var(--fonte-numero); font-size: 13px; color: var(--azul-escuro); }
.lista-kits li + li { border-top: 1px solid var(--borda-suave); }
.chave-kit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 4px; }
.chave-kit h2 { margin: 0; }
.procurar-kit input { width: 100%; min-height: 44px; }
/* "Para que é o kit" (K23, maquete): radios pequenos, alinhados ao rótulo. */
.campo-radio label { gap: 8px; font-weight: 400; }
.campo-radio input[type=radio] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; }
.historico-kit { list-style: none; margin: 8px 0 0; padding: 0; }
.historico-kit li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--borda-suave); font-size: 14px; }
.historico-kit .quando { font-family: var(--fonte-numero); color: var(--texto-suave); }
.historico-kit .de-para { font-family: var(--fonte-numero); }

/* Relatório kit x usado: diferença com sinal e palavra; barrinha só reforça. */
.dif { font-family: var(--fonte-numero); white-space: nowrap; }
.dif.mais { color: var(--alerta); font-weight: 700; }
.dif.menos { color: var(--azul-escuro); font-weight: 700; }
.barra-alterado { display: inline-block; vertical-align: middle; width: 70px; height: 8px; border-radius: 4px; background: var(--borda); margin-right: 6px; overflow: hidden; }
.barra-alterado i { display: block; height: 100%; background: var(--azul-ceu); }
.tabela-estoque td.num, .tabela-estoque th.num { text-align: right; white-space: nowrap; }
.filtros-relatorio { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 0 0 14px; }
.filtros-relatorio > div { min-width: 160px; }
.filtros-relatorio label { font-size: 13px; }
.filtros-relatorio select { min-height: 44px; }
/* Detalhe por item do kit (K23): abre ao clicar no nome do kit. */
details.detalhe-kit > summary { cursor: pointer; color: var(--azul-escuro); }
details.detalhe-kit[open] > summary { margin-bottom: 6px; }
.tabela-detalhe-kit { width: 100%; font-size: 13px; font-weight: 400; border-collapse: collapse; }
.tabela-detalhe-kit th, .tabela-detalhe-kit td { padding: 2px 8px 2px 0; border-top: 1px solid var(--borda-suave); text-align: left; }
.tabela-detalhe-kit .num { text-align: right; }

/* Cadastro do material com tamanho e calibre: "Aparece como" mostra o nome que vai para as listas. */
.aparece-como { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--azul-claro); font-size: 15px; }
.aparece-como b { font-family: var(--fonte-titulo); }

@media (max-width: 720px) {
  .checagem-kit .botoes-checar > button { flex: 1 1 100%; min-height: 48px; }
  .contador-qtd button { min-height: 44px; width: 44px; }
  .contador-qtd input { min-height: 44px; }
  button.tirar { min-height: 44px; }
  .linha-kit { grid-template-columns: auto auto minmax(0, 1fr); }
  .linha-kit .nome { grid-column: 1 / -1; }
  .linha-kit button.tirar { justify-self: end; }
  .acrescentar-material { grid-template-columns: minmax(0, 1fr) auto; }
  .acrescentar-material > div:first-child { grid-column: 1 / -1; }
  .acrescentar-material select, .acrescentar-material input[type=number], .acrescentar-material button { min-height: 44px; }
  .acesso-novo { width: 100%; flex-wrap: wrap; row-gap: 0; }
  .acesso-novo .dica { flex-basis: 100%; padding-left: 28px; }
  .material-topo button.link { min-height: 44px; }
  .checagem-kit .nao-adm .acao-compacta { display: flex; width: 100%; }
  .checagem-kit .nao-adm .acao-compacta input[type=text] { flex: 1 1 100%; max-width: 100%; min-height: 44px; }
  .checagem-kit .nao-adm .acao-compacta button { flex: 1 1 100%; min-height: 44px; }
  /* No celular o quadro de medicações vira blocos: previsto e situação em cima, a checagem embaixo. */
  .quadro-prescricao, .quadro-prescricao thead, .quadro-prescricao tbody, .quadro-prescricao tr, .quadro-prescricao th, .quadro-prescricao td { display: block; width: auto; }
  .quadro-prescricao thead tr:not(.cabecalho-item) { display: none; }
  .quadro-prescricao td:first-child { width: auto; padding-bottom: 0; border-bottom: 0; }
  .quadro-prescricao td:nth-child(2) { padding-top: 2px; border-bottom: 0; }
  .historico-kit li { grid-template-columns: minmax(0, 1fr); }
}
/* Ajustes do sistema para o kit: espaço curto e o bloco aberto depois do erro. */
.espaco-acima-pequeno { margin-top: 8px; }
.material-dose.aberto { border-color: var(--azul); }
.checagem-kit .material-dose[hidden] { display: none; }
.selo-falta-material[data-falta-material] { margin: 4px 0 0; }

/* Itens da farmácia: cadastro dividido em medicamento e material (13/11/2026), lado a lado no computador. */
.cadastro-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.cadastro-itens > .cartao { margin: 0; min-width: 0; }

/* Catálogo de medicamentos (Farmácia › Itens › Medicamentos, 13/11/2026). */
.busca-medicamentos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.busca-medicamentos input[type="search"] { flex: 1 1 12rem; min-width: 0; }
.dados-medicamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 8px 16px; margin: 12px 0; }
.dados-medicamento dt { font-size: .85em; color: var(--texto-suave, #555); }
.dados-medicamento dd { margin: 0; }
.campos-receita > legend::before { content: none; display: none; }
.historico-medicamento { list-style: none; padding: 0; margin: 8px 0 0; }
.historico-medicamento li { padding: 6px 0; border-bottom: 1px solid var(--borda, #e3e6ea); }
.historico-medicamento time { color: var(--texto-suave, #555); margin-right: 6px; }
[aria-labelledby="novo-medicamento"] summary { cursor: pointer; list-style: revert; }
[aria-labelledby="novo-medicamento"] summary h2 { display: inline; }
[aria-labelledby="novo-medicamento"] fieldset label, [aria-labelledby="med-aberto-titulo"] fieldset label { display: block; margin: 6px 0; }

/* Painel revelado (13/11/2026): o campo só aparece depois de clicar no botão, e clicar no botão não grava nada.
   Funciona sem JavaScript: <details> com o <summary> estilizado como botão, sem o triângulo. A enfermagem estava
   lendo o campo aberto ao lado do "Administrado" como se fosse parte dele. */
.revelar { margin: 0; min-width: 0; }
.revelar > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 2px solid var(--azul); border-radius: var(--raio);
  background: var(--branco); color: var(--azul);
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 700; line-height: 1.2;
  cursor: pointer; list-style: none;
}
.revelar > summary::-webkit-details-marker { display: none; }
.revelar > summary:hover { background: var(--azul-claro); color: var(--azul-escuro); }
.revelar[open] > summary { background: var(--azul-claro); color: var(--azul-escuro); border-style: dashed; margin-bottom: 8px; }
.revelar-painel { display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: var(--raio); background: var(--fundo); border: 1px solid var(--borda); box-shadow: inset 4px 0 0 var(--azul); }
.revelar-painel > .dica { margin: 0; }
.revelar-campo { display: grid; gap: 4px; }
.revelar-campo label { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.revelar-campo input[type="text"], .revelar-campo input[type="number"], .revelar-campo select { min-height: 40px; max-width: 360px; }
.revelar-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Exceção (carrinho de emergência): mesma forma, tom de alerta. Nunca vermelho: não é erro. */
.revelar.excecao > summary { border-color: var(--alerta); color: var(--alerta); }
.revelar.excecao > summary:hover, .revelar.excecao[open] > summary { background: var(--alerta-fundo); color: var(--alerta); }
.revelar.excecao .revelar-painel { background: var(--alerta-fundo); border-color: var(--alerta); box-shadow: inset 4px 0 0 var(--alerta); }
/* Na linha da dose o painel ocupa a linha inteira, embaixo da ação primária. */
.checagem > .revelar, .checagem > form > .revelar, .acao-compacta > .revelar { flex: 1 1 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda-suave); }
.revelar-painel > .revelar { margin-top: 2px; }
@media (max-width: 720px) {
  .revelar > summary { min-height: 44px; width: 100%; }
  .revelar-campo input[type="text"], .revelar-campo input[type="number"], .revelar-campo select { min-height: 44px; max-width: none; width: 100%; }
  .revelar-acoes > button { flex: 1 1 100%; min-height: 44px; }
}