/* 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.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("../fontes/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fontes/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("../fontes/atkinson-hyperlegible-latin-700-normal.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.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; }

.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; }
.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] { max-width: 260px; }
@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"] { border-bottom-color: currentColor; font-weight: 700; }
.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; }
  body.relatorio-imprimivel .cabecalho-pagina .subtitulo { display: none; }
  body.relatorio-imprimivel .so-impressao { display: grid; grid-template-columns: auto 1fr auto; gap: 4mm; align-items: center;
    border-bottom: 1.5px solid #000; padding-bottom: 2mm; margin-bottom: 3mm; font: 9pt/1.3 Arial, Helvetica, sans-serif; }
  body.relatorio-imprimivel .so-impressao strong { font-size: 12pt; }
  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-left: 6px solid var(--risco-vermelho, #C62828); }
.leito.sala-laranja { border-left: 6px solid var(--risco-laranja, #EF6C00); }
.leito.sala-amarelo { border-left: 6px solid var(--risco-amarelo, #F9A825); }
.leito.sala-verde { border-left: 6px solid var(--risco-verde, #2E7D32); }
.leito.sala-azul { border-left: 6px solid var(--risco-azul, #1565C0); }