:root {
  --fundo: #f4f6f8;
  --painel: #ffffff;
  --borda: #d9dee4;
  --texto: #1d2733;
  --texto2: #5b6775;
  --destaque: #0b6bcb;
  --perigo: #c62828;

  /* cores das situações (iguais em todas as telas) */
  --s-aguardando: #607080;
  --s-emsala: #1565c0;
  --s-anestesia: #6a1b9a;
  --s-cirurgia: #c62828;
  --s-finalizando: #00796b;
  --s-limpeza: #e65100;
  --s-concluida: #2e7d32;
  --s-suspensa: #e67e22;
  --s-livre: #2e7d32;
  --s-aguardpac: #9c7400;
  --s-encerrada: #455a64;
  --s-manutencao: #795548;
  --s-cancelada: #8d3a3a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); font-size: 15px; }
button, input, select, textarea { font: inherit; }
a { color: var(--destaque); }

.s-aguardando { --cor: var(--s-aguardando); }
.s-emsala { --cor: var(--s-emsala); }
.s-anestesia { --cor: var(--s-anestesia); }
.s-cirurgia { --cor: var(--s-cirurgia); }
.s-finalizando { --cor: var(--s-finalizando); }
.s-limpeza { --cor: var(--s-limpeza); }
.s-concluida { --cor: var(--s-concluida); }
.s-suspensa { --cor: var(--s-suspensa); }
.s-livre { --cor: var(--s-livre); }
.s-aguardpac { --cor: var(--s-aguardpac); }
.s-encerrada { --cor: var(--s-encerrada); }
.s-manutencao { --cor: var(--s-manutencao); }
.s-cancelada { --cor: var(--s-cancelada); }

/* bolinha com a cor da especialidade ou do convênio */
.ponto { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--pc); margin-right: .35em; vertical-align: baseline; flex-shrink: 0; }
.chip { display: inline-block; padding: 0 7px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 600; background: var(--pc, #607080); white-space: nowrap; }

.selo.urg { background: #b71c1c; letter-spacing: .04em; }
.selo.encx { background: #b26a00; letter-spacing: .04em; }
.selo.not { background: #283593; letter-spacing: .04em; }
.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--cor); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- barra superior (controle e relatórios) ---------- */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: #12263a; color: #fff; position: sticky; top: 0; z-index: 20; }
.topo h1 { font-size: 18px; margin: 0 8px 0 0; font-weight: 700; letter-spacing: .3px; }
.topo nav { display: flex; gap: 4px; }
.topo nav a { color: #cfe0f1; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.topo nav a.voltar { border: 1px solid rgba(255,255,255,.3); margin-right: 6px; color: #fff; white-space: nowrap; }
.topo nav a.ativo, .topo nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.topo .espaco { flex: 1; }
.conexao { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #2e7d32; }
.conexao.off { background: var(--perigo); }

.btn { border: 1px solid var(--borda); background: #fff; color: var(--texto); padding: 7px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #9fb0c2; }
.btn.prim { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.btn.acao { background: var(--cor); border-color: var(--cor); color: #fff; font-weight: 600; min-width: 150px; }
.btn.peq { padding: 4px 8px; font-size: 13px; }
.btn.perigo { color: var(--perigo); }
.btn:disabled { opacity: .5; cursor: default; }
.topo .btn { border-color: rgba(255,255,255,.3); }
input[type=date], input[type=text], input[type=time], input[type=datetime-local], input[type=number], select, textarea { border: 1px solid var(--borda); border-radius: 6px; padding: 6px 8px; background: #fff; color: var(--texto); }

main { padding: 16px; max-width: 1700px; margin: 0 auto; }
.aviso { padding: 10px 14px; border-radius: 8px; background: #fff8e1; border: 1px solid #ffe082; margin-bottom: 12px; }
.vazio { text-align: center; padding: 40px 16px; color: var(--texto2); }

/* ---------- controle ---------- */
.sala-bloco { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.sala-cab { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-left: 6px solid var(--cor); background: #fafbfc; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.sala-cab h2 { font-size: 17px; margin: 0; }
.btn-ocultar { border: 0; background: none; cursor: pointer; color: var(--destaque); font-size: 12px; padding: 4px 2px; width: 18px; }
.sala-cab .info { color: var(--texto2); font-size: 13px; }
.caso { display: grid; grid-template-columns: 20px 58px minmax(220px, 1.6fr) minmax(0, 3.4fr) auto; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid #eef1f4; align-items: center; }
.caso:last-child { border-bottom: 0; }
.caso.atual { background: #f2f8ff; }
.caso.s-suspensa .proc, .caso.s-suspensa .hora-prev, .caso.s-cancelada .proc, .caso.s-cancelada .hora-prev { text-decoration: line-through; color: var(--texto2); }
.caso .hora-prev { font-weight: 700; font-size: 16px; }
.caso .proc { font-weight: 600; }
/* procedimento clicável: abre e fecha os detalhes */
.proc-btn { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.proc-btn .seta { color: var(--destaque); font-size: 9px; width: 10px; flex-shrink: 0; position: relative; top: -1px; }
.proc-btn:hover b { color: var(--destaque); text-decoration: underline; }
.proc-btn b { font-weight: 600; }
/* linha recolhida */
.caso.compacto { grid-template-columns: 20px 58px minmax(380px, 1fr) clamp(100px, 9vw, 170px) clamp(100px, 11vw, 210px) 220px; padding: 5px 14px; gap: 4px 12px; font-size: 14px; }
.caso.compacto .hora-prev { font-size: 14px; }
/* recolhida: cirurgia com largura fixa (o que passar vira "…") e o paciente sempre começando na mesma coluna */
.caso.compacto .proc-btn { min-width: 0; }
.caso.compacto .proc-btn .txt { display: grid; grid-template-columns: var(--larg-proc, clamp(170px, 17vw, 360px)) minmax(0, 1fr); gap: 12px; align-items: baseline; min-width: 0; width: 100%; }
.caso.compacto .proc-btn .proc-nome, .caso.compacto .proc-btn .pac { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.caso.compacto .proc-btn .pac { margin-left: 0; display: flex; align-items: baseline; gap: 5px; }
/* paciente: se faltar espaço, encurta o nome; selos, idade e convênio sempre inteiros */
.caso.compacto .proc-btn .pac > * { flex-shrink: 0; }
.caso.compacto .proc-btn .pac .nome-pac { flex-shrink: 1; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caso.compacto .proc-btn .pac .idade { color: var(--texto2); }
.caso.compacto .pac { font-size: 12px; margin-left: 4px; }
.caso.compacto .eq { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caso.compacto .ult { font-size: 12px; color: var(--texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caso .res { color: var(--texto2); font-size: 11px; }
.caso.compacto .ult b { color: var(--texto); }
.caso.compacto .acoes-c { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.btn.acao-c { background: var(--cor); border-color: var(--cor); color: #fff; font-weight: 600; }
/* fora da vez (não é a próxima da sala): contorno só, para não competir com a da vez */
.btn.acao-c.fora-vez { background: transparent; color: var(--cor); }
/* concluída, suspensa e cancelada ficam apagadas (o selo da situação continua forte nas suspensas/canceladas, para ver o porquê) */
.caso.s-concluida > :not(.acoes):not(.acoes-c):not(.marca),
.caso.s-suspensa > :not(.acoes):not(.acoes-c):not(.marca), .caso.s-cancelada > :not(.acoes):not(.acoes-c):not(.marca) { opacity: .5; }
.caso.s-concluida .proc-btn b, .caso.s-concluida .pac, .caso.s-suspensa .proc-btn b, .caso.s-suspensa .pac, .caso.s-cancelada .proc-btn b, .caso.s-cancelada .pac { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(29, 39, 51, .45); }
.caso.compacto.s-suspensa .proc-btn b, .caso.compacto.s-suspensa .hora-prev, .caso.compacto.s-cancelada .proc-btn b, .caso.compacto.s-cancelada .hora-prev { text-decoration: line-through; color: var(--texto2); }
.caso .pac { color: var(--texto2); font-size: 13px; }
.caso .obs { color: #8a5a00; font-size: 12px; }
.caso label.campo { display: flex; flex-direction: column; font-size: 11px; color: var(--texto2); gap: 2px; }
.caso label.campo input, .caso label.campo select { width: 100%; }
/* cirurgião, anestesista, residente e circulante: menores e sempre lado a lado */
.equipe-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.equipe-campos select { font-size: 12px; padding: 3px 4px; }
.caso.sel { background: #fff8e1; }
.caso.sel.atual { background: #fff3cd; }
.marca { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--destaque); }
.caso .acoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.caso .acoes .linha { display: flex; gap: 6px; justify-content: flex-end; }
.tempos { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; }
.tempos button { border: 1px dashed var(--borda); background: transparent; border-radius: 5px; padding: 2px 7px; cursor: pointer; color: var(--texto2); }
.tempos button.feito { border-style: solid; background: #eef3f8; color: var(--texto); }
.tempos button b { font-weight: 700; }
.tempos .dur { color: var(--texto2); padding: 3px 4px; }

.sala-cab .circ-sala { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto2); margin-left: auto; }
.sala-cab .circ-sala input, .sala-cab .circ-sala select { width: 190px; }
.sala-cab .alerta { color: var(--perigo); font-weight: 600; font-size: 13px; }
.sala-cab .manut-motivo { color: var(--s-manutencao); font-weight: 600; font-size: 13px; cursor: pointer; }
.barra-sel { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px auto 0; width: fit-content; max-width: 100%;
  background: #12263a; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.barra-sel[hidden] { display: none; }
.sala-bloco.alvo { outline: 3px dashed var(--destaque); outline-offset: -3px; }
.caso .pega { cursor: grab; color: #9aa7b4; font-size: 15px; user-select: none; padding: 0 2px; }
.caso .ordem { display: flex; gap: 2px; margin-top: 4px; }
.caso .ordem button { border: 1px solid var(--borda); background: #fff; border-radius: 4px; padding: 0 6px; cursor: pointer; font-size: 12px; line-height: 18px; color: var(--texto2); }
.caso .ordem button:disabled { visibility: hidden; }
.caso .hora-prev .ontem { display: block; font-size: 11px; font-weight: 400; color: var(--texto2); }

/* submenu do controle (filtros e visualização), abaixo do cabeçalho */
.submenu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 7px 16px; background: #e6ecf2; border-bottom: 1px solid var(--borda); font-size: 13px; color: var(--texto2); }
.submenu label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.submenu .sep { width: 1px; height: 20px; background: #c5ced8; }
.submenu .grupo { display: flex; align-items: center; gap: 4px; }
.submenu .grupo .btn { margin-left: 2px; }
.submenu .espaco { flex: 1; }
/* informação do dia: ocupa o que sobra da linha e corta com "…" (texto inteiro ao passar o mouse) */
.submenu #infoDia { font-size: 12px; flex: 1 1 160px; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 7px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; color: var(--texto2); }
.seg button + button { border-left: 1px solid var(--borda); }
.seg button.ativo { background: var(--destaque); color: #fff; font-weight: 600; }
.filtro-salas { position: relative; }
.painel-salas { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 8px 6px; min-width: 190px; display: flex; flex-direction: column; }
.painel-salas label { padding: 5px 8px; border-radius: 5px; color: var(--texto); font-size: 14px; }
.painel-salas label:hover { background: #f2f6fa; }
.painel-salas label.todas { border-bottom: 1px solid #eef1f4; margin-bottom: 4px; padding-bottom: 8px; }

/* tabela de revisão da importação */
#dlgImportar { width: min(1280px, calc(100vw - 24px)); }
.revisao { border-collapse: collapse; width: 100%; font-size: 13px; }
.revisao th { text-align: left; font-size: 11px; color: var(--texto2); padding: 4px; position: sticky; top: -14px; background: #fff; }
.revisao td { padding: 2px 3px; border-top: 1px solid #eef1f4; }
.revisao input:not([type=checkbox]), .revisao select { width: 100%; border: 1px solid transparent; border-radius: 4px; padding: 3px 5px; background: transparent; font-size: 13px; }
.revisao input:not([type=checkbox]):hover, .revisao input:not([type=checkbox]):focus, .revisao select:hover, .revisao select:focus { border-color: var(--borda); background: #fff; }
.revisao select.falta { background: #fff8e1; border-color: #ffe082; }
.revisao tr.marcada td { background: #fff8e1; }
/* preencher várias linhas da importação de uma vez */
.lote-imp { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; padding: 8px 10px; margin-bottom: 8px; background: #eef3f8; border: 1px solid var(--borda); border-radius: 8px; }
.lote-imp label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--texto2); }
.lote-imp select { min-width: 200px; }
.lote-imp b { flex-basis: 100%; font-size: 13px; }
.revisao td.ql input { width: 70px; }
.revisao input.falta { background: #fff8e1; border-color: #ffe082; }
.revisao input.erro { background: #ffebee; border-color: #ef9a9a; }
.revisao tr.fora td { opacity: .45; text-decoration: line-through; }
.revisao .c-sala { width: 92px; } .revisao .c-hora { width: 92px; } .revisao .c-inc { width: 30px; text-align: center; }

@media (max-width: 1000px) {
  .caso { grid-template-columns: 20px 52px 1fr; }
  .caso > .equipe-campos, .caso .acoes { grid-column: 3 / -1; }
  .sala-cab .circ-sala { margin-left: 0; width: 100%; }
  .sala-cab .circ-sala input, .sala-cab .circ-sala select { flex: 1; }
  .tempos { grid-column: 1 / -1; }
  .caso.compacto { grid-template-columns: 20px 52px 1fr; }
  .caso.compacto .eq { grid-column: 3; display: inline; }
  .caso.compacto .ult { display: none; }
  .caso.compacto .acoes-c { grid-column: 3; justify-content: flex-start; }
}

dialog { border: 0; border-radius: 12px; padding: 0; width: min(760px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(10, 20, 30, .55); }
dialog .cab { padding: 14px 18px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 17px; }
dialog .corpo { padding: 14px 18px; max-height: 70vh; overflow: auto; }
dialog .rodape { padding: 12px 18px; border-top: 1px solid var(--borda); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.grade label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texto2); }
.grade label.largo { grid-column: 1 / -1; }
.grade label input, .grade label select, .grade label textarea { color: var(--texto); }
.sub { font-weight: 700; margin: 16px 0 8px; font-size: 14px; }
.tempo-campo { display: flex; gap: 4px; }
.tempo-campo input { flex: 1; min-width: 0; }
.lista-resumo { margin: 4px 0 10px; padding-left: 20px; font-size: 13px; }

/* ---------- relatórios ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.filtros label { display: flex; flex-direction: column; font-size: 12px; color: var(--texto2); gap: 3px; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.indicador { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.indicador .rot { font-size: 12px; color: var(--texto2); min-height: 30px; }
.indicador .val { font-size: 26px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.indicador .det { font-size: 12px; color: var(--texto2); }
.abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -1px; }
.abas button { border: 1px solid var(--borda); border-bottom: 0; background: #e9edf1; padding: 7px 14px; border-radius: 8px 8px 0 0; cursor: pointer; }
.abas button.ativo { background: var(--painel); font-weight: 600; }
.tabela-caixa { background: var(--painel); border: 1px solid var(--borda); border-radius: 0 10px 10px 10px; overflow: auto; }
table.dados { border-collapse: collapse; width: 100%; font-size: 14px; }
table.dados th, table.dados td { padding: 7px 10px; border-bottom: 1px solid #eef1f4; text-align: left; white-space: nowrap; }
table.dados th { background: #f6f8fa; font-size: 12px; color: var(--texto2); position: sticky; top: 0; cursor: pointer; user-select: none; }
table.dados td.num, table.dados th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dados tr:hover td { background: #f7fafc; }

@media print {
  .topo, .barra-usuario, .barra-pagina, .submenu, .filtros .btn, .abas { display: none; }
  main { padding: 0; }
}
details summary { cursor: pointer; margin: 4px 0; }

/* janela de confirmação da própria página */
.dlg-pergunta { width: min(460px, calc(100vw - 32px)); }
.dlg-pergunta .msg { white-space: pre-line; margin: 4px 0; font-size: 15px; line-height: 1.45; }
.btn.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; }

/* só visualização (demais médicos e circulantes): o Controle aparece sem os botões de alterar */
.so-leitura #btnImportar, .so-leitura #btnNovo, .so-leitura #btnLote, .so-leitura .lanc .marca, .so-leitura #rotSelTodas, .so-leitura #barraSel, .so-leitura #btnExemplo,
.so-leitura .marca, .so-leitura .pega, .so-leitura .caso .ordem, .so-leitura .acoes button, .so-leitura .acoes-c button,
.so-leitura .sala-cab button[data-manut] { display: none !important; }
.so-leitura .tempos button, .so-leitura .manut-motivo { pointer-events: none; }
.so-leitura .caso select, .so-leitura .sala-cab select { background: #f6f8fa; color: var(--texto); opacity: 1; }

/* quem está usando, no cabeçalho */
/* faixa fina acima do cabeçalho, à direita: conexão, nome e Sair */
.barra-usuario { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px 16px; background: #0a1724; color: #cfe0f1; font-size: 13px; }
.barra-usuario .usuario { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra-usuario .usuario > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-usuario .conexao, .barra-usuario .btn { white-space: nowrap; flex: 0 0 auto; }
.barra-usuario .usuario i { color: #ffcc80; font-style: normal; }
.barra-usuario .btn { padding: 2px 10px; font-size: 12px; }
.barra-usuario .conexao { color: #fff; font-size: 11px; padding: 2px 8px; }
.barra-usuario .rede { color: #cfe0f1; font-size: 11px; white-space: nowrap; }
.barra-usuario .rede[hidden] { display: none; }
.barra-usuario .salvo { color: #a5d6a7; }
/* botões da página logo abaixo do cabeçalho (data, importar, nova cirurgia...) */
.barra-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--borda); font-size: 14px; }
.barra-pagina a.btn { text-decoration: none; }
.barra-pagina label { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--texto2); font-size: 13px; }
.barra-pagina .seta-dia { padding: 4px 9px; }
.imp-destino { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #eef3f8; border: 1px solid #c9d6e3; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.imp-destino label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.barra-pagina .sep { width: 1px; height: 22px; background: var(--borda); }

/* bloqueio por inatividade: cobre a tela inteira (esconde os dados) até digitarem um PIN */
dialog.bloqueio { width: min(360px, calc(100vw - 32px)); padding: 28px 26px 20px; text-align: center; }
dialog.bloqueio::backdrop { background: rgba(18, 38, 58, .97); backdrop-filter: blur(6px); }
dialog.bloqueio .cadeado { font-size: 40px; }
dialog.bloqueio h2 { margin: 6px 0 4px; font-size: 20px; }
dialog.bloqueio p { margin: 0 0 16px; color: var(--texto2); font-size: 14px; }
dialog.bloqueio .pin { width: 100%; font-size: 28px; letter-spacing: .5em; text-align: center; padding: 10px; border: 2px solid var(--borda); border-radius: 10px; }
dialog.bloqueio .pin:focus { outline: none; border-color: var(--destaque); }
dialog.bloqueio .erro { color: var(--perigo); font-size: 14px; min-height: 20px; margin: 8px 0; }
dialog.bloqueio .btn.prim { width: 100%; padding: 11px; font-size: 16px; font-weight: 600; }
dialog.bloqueio .link-sair { margin-top: 12px; border: 0; background: none; color: var(--texto2); cursor: pointer; text-decoration: underline; font-size: 13px; }

/* ---------- celular: tudo cabe na largura da tela, sem zoom ---------- */
img, canvas { max-width: 100%; }
@media (max-width: 760px) {
  body { font-size: 14px; }
  /* campo com letra menor que 16px faz o iPhone dar zoom ao tocar */
  input, select, textarea { font-size: 16px !important; }
  .topo { padding: 8px 10px; gap: 6px 8px; }
  .topo h1 { font-size: 14px; flex-basis: 100%; margin: 0; }
  .topo nav { flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .topo nav a { padding: 5px 8px; white-space: nowrap; }
  .topo .espaco { display: none; }
  .barra-usuario { padding: 4px 10px; font-size: 12px; }
  .barra-pagina { padding: 8px; }
  .barra-pagina .sep { display: none; }
  main { padding: 10px 8px; }
  dialog { width: calc(100vw - 12px) !important; max-width: none; }
  dialog .cab { padding: 12px; font-size: 16px; }
  dialog .corpo { padding: 12px; max-height: calc(100dvh - 150px); }
  dialog .rodape { padding: 10px 12px; }
  .grade { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .tabela-caixa { overflow-x: auto; }
  .filtros { gap: 8px; }
  .filtros label { flex: 1 1 140px; }
  .filtros label input, .filtros label select { width: 100%; }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .indicador { padding: 10px; }
  .indicador .val { font-size: 20px; }
  .abas { overflow-x: auto; flex-wrap: nowrap; }
  .abas button { white-space: nowrap; }
  .submenu { padding: 6px 8px; gap: 6px 10px; }
  .submenu .sep { display: none; }
  .barra-sel { width: calc(100% - 8px); justify-content: center; }
  .sala-cab { padding: 8px 10px; gap: 6px 8px; }
  .caso { padding: 8px 10px; }
  .equipe-campos { grid-template-columns: 1fr 1fr; }
  /* linha recolhida: o nome do procedimento quebra em vez de cortar */
  .caso.compacto .proc-btn .txt { display: block; white-space: normal; }
  .caso.compacto .proc-btn .proc-nome, .caso.compacto .proc-btn .pac { white-space: normal; }
  .caso.compacto .proc-btn .pac { display: block; }
  .caso.compacto .proc-btn .pac .nome-pac { white-space: normal; }
  .caso.compacto .acoes-c { flex-wrap: wrap; }
  .lote-imp select { min-width: 0; width: 100%; }
  .lote-imp label { flex: 1 1 140px; }
}

/* classificação para os indicadores e selos extras */
.selo.local { background: #00838f; }
.selo.reab { background: #5d4037; }
.cl-linha { border: 0; background: none; padding: 0; margin-top: 2px; font: inherit; font-size: 12px; color: var(--texto2); cursor: pointer; text-align: left; }
.cl-linha:hover { color: var(--destaque); text-decoration: underline; }
.falta-cl { color: #a06800; background: #fff3cd; border-radius: 4px; padding: 0 4px; }
.motivos-aus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.motivos-aus .btn { white-space: normal; text-align: left; padding: 10px; }

/* ---------- controle em quadro: uma coluna por sala, cartões arrastáveis ---------- */
/* todas as salas cabem na largura da tela: as colunas dividem o espaço (no celular, rolam para o lado) */
#lista.quadro { display: flex; gap: 8px; align-items: flex-start; }
.quadro .sala-bloco.coluna { flex: 1 1 0; min-width: 0; margin: 0; background: #eef2f6; border-top: 4px solid var(--cor); }
.quadro .sala-bloco.coluna.oculta { flex: 1 1 0; } /* recolhida ocupa a mesma largura das abertas */
.quadro .sala-cab { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; border-left: 0; }
.quadro .sala-cab .col-linha { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.quadro .sala-cab h2 { white-space: nowrap; }
.quadro .sala-cab .selo { font-size: 11px; padding: 1px 7px; }
.quadro .sala-cab h2 { font-size: 16px; }
.quadro .sala-cab .info { margin-left: auto; font-size: 12px; }
.quadro .sala-cab select { flex: 1; min-width: 0; font-size: 13px; padding: 3px 5px; }
.quadro .sala-cab .alerta, .quadro .sala-cab .manut-motivo { font-size: 12px; }
.col-casos { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-height: 40px; }
.col-vazia { color: var(--texto2); font-size: 12px; text-align: center; padding: 12px 4px; border: 1px dashed var(--borda); border-radius: 8px; }
.col-feitas { display: block; width: 100%; border: 0; border-top: 1px solid var(--borda); background: none; padding: 7px 10px; text-align: left; font: inherit; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto2); cursor: pointer; }
.col-feitas:hover { color: var(--destaque); }
.cartao { overflow-wrap: anywhere; min-width: 0; background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--cor); border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cartao.movel { cursor: grab; }
.cartao.movel:active { cursor: grabbing; }
.cartao.arrastando, .caso.arrastando { opacity: .4; }
.caso[draggable="true"], .cartao[draggable="true"] { cursor: grab; }
.caso[draggable="true"]:active { cursor: grabbing; }
.cartao.atual { box-shadow: 0 0 0 2px var(--cor); background: #f7fbff; }
.cartao.sel { background: #fff8e1; }
.cartao .c-topo { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cartao .c-hora { font-size: 15px; }
.cartao .ontem { font-size: 11px; color: var(--texto2); }
.cartao .c-editar { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--texto2); font-size: 14px; padding: 0 2px; }
.cartao .c-editar:hover { color: var(--destaque); }
.cartao .c-proc b { font-size: 13px; text-transform: uppercase; line-height: 1.25; }
.cartao .pac { font-size: 12px; color: var(--texto2); }
.cartao .eq { font-size: 12px; color: var(--texto2); }
.cartao .res { font-size: 11px; }
.cartao .obs { color: #8a5a00; font-size: 12px; }
.cartao .tempos { font-size: 11px; }
.cartao .c-mais { display: flex; flex-wrap: wrap; gap: 4px; }
.cartao .c-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.cartao .c-acoes .acao-c { margin-left: auto; }
.cartao.mini { padding: 4px 8px; }
.cartao.mini .proc-btn { font-size: 12px; display: block; }
.cartao.mini .proc-btn span { color: var(--texto2); }
.cartao.mini .mini-pac { display: block; font-style: normal; font-size: 11px; color: #0b4f7c; margin-top: 1px; }
.cartao.s-concluida .c-proc b, .cartao.s-concluida .pac, .cartao.mini.s-concluida .proc-btn span { text-decoration: line-through; text-decoration-thickness: 1px; }
.cartao.s-suspensa .c-proc b, .cartao.s-cancelada .c-proc b, .cartao.mini.s-suspensa .proc-btn span, .cartao.mini.s-cancelada .proc-btn span { text-decoration: line-through; color: var(--texto2); }
.so-leitura .cartao button[data-marcar], .so-leitura .cartao .c-editar, .so-leitura .cartao .c-mais, .so-leitura .cartao .marca { display: none; }
/* aviso depois de arrastar para outra sala */
.aviso-mov { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px; background: #12263a; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: 14px; max-width: calc(100vw - 24px); }
.aviso-mov[hidden] { display: none; }
@media (max-width: 760px) {
  .quadro .sala-bloco.coluna { flex: 0 0 82vw; }
  #lista.quadro { overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
  .quadro .sala-bloco.coluna { scroll-snap-align: start; }
}

/* data digitada que não existe (ex.: 31/02) */
input.data-invalida { border-color: var(--perigo) !important; background: #ffebee !important; }

/* preenchimento pelo teclado: a opção em que o Tab parou fica contornada */
form label:has(> input[type=radio]:focus-visible), form label:has(> input[type=checkbox]:focus-visible),
dialog label:has(> input[type=radio]:focus-visible), dialog label:has(> input[type=checkbox]:focus-visible) {
  outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: 6px; background: #eef5fc;
}

/* barra de seleção do Controle: concluir as selecionadas */
.barra-sel .concluir-sel { background: #2e7d32; border-color: #2e7d32; color: #fff; font-weight: 600; }

/* arrastar na mesma sala: linha azul onde a cirurgia vai entrar */
#lista .alvo-antes { box-shadow: 0 -3px 0 var(--destaque); }
#lista .alvo-depois { box-shadow: 0 3px 0 var(--destaque); }

/* listas de escolha iguais em todos os navegadores: o Safari desenha setas para cima e para baixo (parecem rolagem); aqui fica uma seta só */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23607080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 10px 6px;
  padding-right: 22px !important;
}
select:not([multiple]):not([size]):disabled { opacity: .7; }

/* aviso de servidor demorando (sessao.js) */
.faixa-demora { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 24px); width: 640px;
  background: #fff8e1; color: #5d4300; border: 1px solid #f0d58a; border-radius: 10px; padding: 10px 14px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.faixa-demora button { margin-left: 8px; font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 6px; border: 1px solid #c9a227; background: #fff; cursor: pointer; }

/* Controle: faixa com os dados do Painel (totais e cor de cada sala) */
.resumo-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; }
.resumo-dia:empty { display: none; }
.rd-totais { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--texto2); }
.rd-totais b { color: var(--texto); font-size: 16px; }
.rd-salas { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-sala { background: var(--cor); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rd-sala.clara { color: #1a1300; }
/* nome do paciente em destaque */
/* nome do paciente: etiqueta azul-clara com filete à esquerda (a cirurgia fica em negrito simples) */
.nome-pac { color: #0b4f7c; background: #e5f2fb; border-left: 3px solid #2b8fd0; padding: 0 6px; border-radius: 3px; font-weight: 600; font-size: 1.04em; letter-spacing: .01em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.caso.compacto .pac .nome-pac { font-size: 13px; }
/* lápis de editar sempre à mão (lista e cartão) */
.c-editar { border: 0; background: none; cursor: pointer; color: var(--texto2); font-size: 15px; padding: 2px 4px; line-height: 1; }
.c-editar:hover { color: var(--destaque); }
/* equipe ao abrir o cartão do quadro */
.cartao-equipe { grid-template-columns: 1fr 1fr; margin-top: 4px; }
.cartao-equipe .campo { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--texto2); }
.cartao-equipe select { width: 100%; font-size: 12px; padding: 3px 4px; }
.campo-dlg { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texto2); margin-top: 8px; }
.campo-dlg select { font-size: 15px; padding: 7px 8px; }

/* sugestões enquanto digita (js/sugere.js) */
.sugestoes { position: absolute; z-index: 40; background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
  max-height: 260px; overflow-y: auto; min-width: 260px; margin-top: 2px; }
.sugestoes[hidden] { display: none; }
.sugestoes button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; font: inherit; font-size: 14px; cursor: pointer; }
.sugestoes button:hover, .sugestoes button.marcado { background: #e8f1fb; }
label:has(> .sugestoes), span:has(> .sugestoes) { position: relative; }
.sugestoes { left: 0; right: 0; top: 100%; } /* sempre abaixo do campo (em label flex a posição "natural" caía por cima) */

/* mais de um cirurgião (js/multi.js) */
.multi-sel { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.multi-sel .multi-item { display: inline-flex; align-items: center; gap: 2px; flex: 1 1 140px; min-width: 0; }
.multi-sel select { flex: 1; min-width: 0; }
.multi-sel button { border: 1px solid var(--borda, #cfd8e3); background: #fff; border-radius: 6px; cursor: pointer; line-height: 1; padding: 5px 8px; font-size: 13px; color: var(--texto2); }
.multi-sel button:hover { color: var(--destaque, #1565c0); border-color: currentColor; }

/* totais do Controle: cada número abre a lista daquele filtro */
.resumo-dia { position: relative; }
.rd-totais button.rd-n { border: 1px solid transparent; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; padding: 3px 8px; }
.rd-totais button.rd-n:hover:not(:disabled), .rd-totais button.rd-n.aberto { background: #fff; border-color: var(--borda); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.rd-totais button.rd-n:disabled { cursor: default; opacity: .6; }
.rd-lista { position: absolute; z-index: 40; left: 0; top: 100%; margin-top: 4px; width: min(760px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 10px 12px; }
.rd-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rd-sala { font-size: 12px; font-weight: 800; color: var(--texto2); letter-spacing: .05em; margin: 10px 0 4px; border-bottom: 1px solid var(--borda); padding-bottom: 2px; }
.rd-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit;
  padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.rd-item:hover { background: #f2f6fa; }
.rd-h { font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-txt small { color: var(--texto2); font-size: 12px; }
.rd-txt .rd-motivo { color: #b26a00; font-weight: 600; }
#lista .piscar { animation: piscaCaso 1.1s ease-in-out 2; }
@keyframes piscaCaso { 50% { box-shadow: 0 0 0 3px var(--destaque); } }

/* Controle: busca de cirurgia (paciente, procedimento, cirurgião) */
.busca-caso { position: relative; flex: 1 1 240px; max-width: 360px; }
.busca-caso input { width: 100%; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.busca-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); max-height: min(60vh, 420px); overflow: auto; min-width: 280px; }
.busca-res button { display: flex; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid #eef1f4; background: none; cursor: pointer; font: inherit; color: var(--texto); }
.busca-res button:hover, .busca-res button:focus-visible { background: #eef5fc; }
.busca-res .br-hora { flex: none; width: 54px; font-weight: 700; display: flex; flex-direction: column; font-size: 14px; }
.busca-res .br-hora small { font-weight: 400; color: var(--texto2); font-size: 11px; }
.busca-res .br-txt { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.busca-res .br-txt span { color: var(--texto); }
.busca-res .br-txt small { color: var(--texto2); font-size: 12px; }
.busca-res .br-vazio { padding: 12px; color: var(--texto2); font-size: 13px; }
.barra-pagina .botoes-pagina { display: contents; }

/* celular: barra do Controle compacta (data e busca em cima; botões numa fileira que rola de lado) e janela da cirurgia sem sair da tela */
@media (max-width: 760px) {
  .barra-pagina { gap: 6px; }
  .barra-pagina input[type=date] { flex: 1; min-width: 0; }
  .busca-caso { flex: 1 1 100%; max-width: none; order: 5; }
  .barra-pagina .botoes-pagina { display: flex; gap: 6px; order: 6; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .barra-pagina .botoes-pagina::-webkit-scrollbar { display: none; }
  .barra-pagina .botoes-pagina .btn { flex: none; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .submenu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 12px; }
  .submenu::-webkit-scrollbar { display: none; }
  .submenu > * { flex: none; }
  .submenu .btn { white-space: nowrap; }
  .resumo-dia { gap: 4px 12px; font-size: 12px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade label > input, .grade label > select, .grade label > textarea, .tempo-campo input { width: 100%; min-width: 0; }
  .grade label > span:has(> input[type=checkbox]) { white-space: normal; }
  #dlgCaso .tempo-campo .btn { padding: 4px 6px; font-size: 12px; }
  #dlgCaso .corpo { overflow-x: hidden; }
}

/* Controle: atalhos da anestesia ("＋ Ficha" e "APA"), pequenos, também na cirurgia recolhida */
.atalhos { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.mini-ac { display: inline-block; padding: 1px 6px; border: 1px solid #b8c7d6; border-radius: 6px; background: #fff; color: #1565c0; font-size: 11px; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.mini-ac:hover { background: #eef5fc; }
.mini-ac.apa { color: #2e7d32; border-color: #a5d6a7; }
.cartao.mini { display: flex; align-items: center; gap: 4px; }
.cartao.mini .proc-btn { flex: 1; min-width: 0; }
.apa-menu { position: relative; display: inline-block; }
.apa-menu > summary { list-style: none; cursor: pointer; }
.apa-menu > summary::-webkit-details-marker { display: none; }
.apa-opcoes { position: absolute; right: 0; top: calc(100% + 3px); z-index: 30; display: flex; flex-direction: column; min-width: 140px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.15); overflow: hidden; }
.apa-opcoes a { padding: 7px 10px; font-size: 13px; color: var(--texto); text-decoration: none; white-space: nowrap; }
.apa-opcoes a:hover { background: #eef5fc; }
.mini-ac.ficha-feita { color: #6a1b9a; border-color: #ce93d8; }

/* Controle, linha recolhida (computador): colunas iguais em todas as linhas (alinhadas), em proporção;
   a coluna das ações tem só o espaço do que aparece (calculado em controle.html: --acoes-cols / --acoes-larg) */
@media (min-width: 761px) {
  .caso.compacto { grid-template-columns: 20px 68px minmax(320px, 1fr) clamp(90px, 8vw, 160px) clamp(100px, 10vw, 200px) var(--acoes-larg, 200px); column-gap: 10px; }
  .caso.compacto .hora-prev { display: flex; align-items: center; gap: 4px; }
  .caso.compacto .hora-prev .c-editar { padding: 0 2px; }
  .caso.compacto .proc-btn .txt { grid-template-columns: minmax(140px, 1fr) minmax(0, 1.55fr); gap: 10px; }
  /* paciente: selos (URG/ENC/NOT) · nome · idade · convênio */
  .caso.compacto .proc-btn .pac { display: grid; grid-template-columns: 38px minmax(90px, 1.45fr) 34px minmax(64px, 1fr); gap: 6px; align-items: baseline; }
  .caso.compacto .proc-btn .pac .selos-pac { display: flex; gap: 2px; overflow: hidden; }
  .caso.compacto .proc-btn .pac .selos-pac .selo { margin: 0; }
  .caso.compacto .proc-btn .pac .conv-pac { overflow: hidden; min-width: 0; display: flex; }
  .caso.compacto .proc-btn .pac .conv-pac .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* ações: situação · botão da vez · Ficha / APA · ✎ */
  .caso.compacto .acoes-c { display: grid; grid-template-columns: var(--acoes-cols, 86px 104px); gap: 4px; justify-content: end; justify-items: start; }
  .caso.compacto .acoes-c .slot-acao[hidden] { display: block; visibility: hidden; }
  .caso.compacto .acoes-c .atalhos { display: grid; grid-template-columns: var(--atalho-cols, 60px 32px); gap: 4px; justify-items: start; }
  .caso.compacto .acoes-c .mini-ac { padding: 1px 5px; }
  .caso.compacto .acoes-c .slot-acao .acao-c { white-space: nowrap; max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
  /* letra um pouco menor: cabe mais de cada nome */
  .caso.compacto { font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
  .caso.compacto .hora-prev { font-size: 13px; }
  .caso.compacto .proc-btn .proc-nome { font-size: 13px; }
  .caso.compacto .pac .nome-pac { font-size: 12px; }
  .caso.compacto .eq { font-size: 12px; }
  .caso.compacto .acoes-c .selo, .caso.compacto .acoes-c .acao-c { font-size: 11.5px; }
}
}
.atalhos, .atalhos * { text-decoration: none !important; }