/* Paleta Catppuccin Mocha — mesma do tema escuro do desktop (DARK_THEME). */
:root {
  --base: #1e1e2e;
  --mantle: #181825;
  --surface: #313244;
  --surface-alto: #45475a;
  --texto: #cdd6f4;
  --subtexto: #a6adc8;
  --azul: #89b4fa;
  --verde: #a6e3a1;
  --vermelho: #f38ba8;
  --amarelo: #f9e2af;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--base);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--mantle);
  border-bottom: 1px solid var(--surface);
}

.topo-titulo strong { font-size: 17px; }
.topo-titulo .sub { display: block; color: var(--subtexto); font-size: 13px; }

.sessao { display: flex; align-items: center; gap: 12px; }
.sessao-nome { font-weight: 600; }
.sessao-email { color: var(--subtexto); font-size: 13px; }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

.cartao {
  background: var(--mantle);
  border: 1px solid var(--surface);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

.cartao-login { max-width: 460px; margin: 48px auto; }
.cartao h1 { margin-top: 0; font-size: 20px; }
.cartao h2 { margin-top: 0; font-size: 16px; }
.cartao h3 { font-size: 14px; color: var(--subtexto); margin-bottom: 8px; }

.colunas { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .colunas { grid-template-columns: 1fr; } }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros label { display: flex; align-items: center; gap: 6px; color: var(--subtexto); font-size: 14px; }
.filtro-texto { flex: 1; min-width: 180px; }
.filtro-texto input { width: 100%; }

input[type="date"], input[type="search"], input[type="text"],
input[type="number"], input[type="file"] {
  background: var(--surface);
  border: 1px solid var(--surface-alto);
  color: var(--texto);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
}
input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

.botao {
  background: var(--azul);
  color: var(--mantle);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.botao:hover:not(:disabled) { filter: brightness(1.1); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
.botao-fantasma { background: var(--surface); color: var(--texto); }
/* Botão de alternância que está ligado — hoje só o aviso de fim de plantão. Só
   o texto ("Avisos ligados") não distingue bem o estado num canto da barra de
   filtros; a borda é o que faz o ligado ser visto sem ser lido. */
.botao-fantasma.ativo {
  border-color: var(--verde);
  color: var(--verde);
}
.botao-largo { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 12px; }

.lista-radiologistas { list-style: none; padding: 0; margin: 0; }
.lista-radiologistas li { margin-bottom: 8px; }
.lista-radiologistas .botao-largo { margin-top: 0; }

.opcao-lembrar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--subtexto);
  font-size: 14px;
  cursor: pointer;
}

.dica { color: var(--subtexto); font-size: 13px; }
.status { color: var(--subtexto); font-size: 14px; margin: 12px 0 0; min-height: 20px; }

.alerta { border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.alerta-erro { background: rgba(243, 139, 168, 0.15); color: var(--vermelho); }
.alerta-ok { background: rgba(166, 227, 161, 0.15); color: var(--verde); }

.abas { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--surface); }
.aba {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--subtexto);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 12px;
  margin-bottom: -1px;
  cursor: pointer;
}
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--texto); border-bottom-color: var(--azul); }

.aviso-substituicao { color: var(--amarelo); font-size: 13px; margin: 0 0 12px; }
#aviso-substituicao { margin: 8px 0 0; }
.item-fila .aviso-substituicao { margin: 0; }

.tabela-wrapper { max-height: 60vh; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--surface); }
th { position: sticky; top: 0; background: var(--mantle); color: var(--subtexto); font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface); }
tbody tr.selecionada { background: rgba(137, 180, 250, 0.18); }
tbody a { color: var(--azul); }

/* Ações de imagens (⬇️ baixar, 🔬 RadiAnt) — coluna estreita, emoji sem
   sublinhado de link para não parecer texto. */
td.acoes-imagens { white-space: nowrap; width: 1%; }
.bt-imagem {
  display: inline-block;
  padding: 2px 4px;
  text-decoration: none;
  border-radius: 4px;
  line-height: 1;
  /* O ⬇️ é link e o 🔬 é botão (precisa pedir o bilhete antes de abrir): os
     dois têm que parecer a mesma coisa. */
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bt-imagem:hover { background: var(--surface-alto); }
.sem-imagens { color: var(--subtexto); }

/* Faixas da cota: números estreitos com os rótulos entre eles, para a linha ser
   lida como uma frase — "até 5 urgências → 5 eletivos". */
.faixa-cota { display: flex; align-items: center; gap: 8px; }
.campo-numero { width: 80px; }

.linha-filtros { margin-top: 10px; }
.caixa { cursor: pointer; user-select: none; }
.linha-filtros select {
  background: var(--surface);
  border: 1px solid var(--surface-alto);
  color: var(--texto);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
}

/* Linha do fim de plantão — separada dos filtros de busca porque não filtra
   nada: monta a fila de eletivos da cota. */
.linha-plantao {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface);
}
.rotulo-plantao { color: var(--subtexto); font-size: 14px; font-weight: 600; }
.linha-plantao select {
  background: var(--surface);
  border: 1px solid var(--surface-alto);
  color: var(--texto);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
}
#resumo-plantao { margin-left: 4px; }

/* Painel de escolha dos eletivos. A lista rola dentro de si em vez de esticar a
   página: a fila atrasada às vezes passa de trinta linhas, e o botão de
   vincular precisa continuar visível sem rolar até o fim. */
.painel-eletivos {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--surface-alto);
  border-radius: 8px;
  background: var(--surface);
}
.cabecalho-eletivos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.lista-eletivos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow: auto;
  margin-bottom: 12px;
}
.item-eletivo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--subtexto);
}
.item-eletivo:hover { background: var(--surface-alto); }
/* Marcado ganha texto cheio; desmarcado fica apagado. A leitura de relance
   precisa ser "o que eu estou levando", não "o que existe". */
.item-eletivo.marcado { color: var(--texto); }

.na-cota { color: var(--verde); }
.abaixo-da-cota { color: var(--subtexto); }
.acima-da-cota { color: var(--vermelho); }

.contador { color: var(--subtexto); font-weight: 400; }
.vazio { color: var(--subtexto); font-size: 14px; }

.mascaras { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.mascaras label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }

.acoes { display: flex; gap: 8px; margin-top: 12px; }
.acoes .botao { flex: 1; }

.fila { display: flex; flex-direction: column; gap: 8px; }

.item-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--base);
  border: 1px solid var(--surface);
  border-left: 3px solid var(--surface-alto);
  border-radius: 6px;
  padding: 10px 12px;
}
.item-fila.gerando { border-left-color: var(--amarelo); }
.item-fila.concluido { border-left-color: var(--verde); }
.item-fila.erro { border-left-color: var(--vermelho); }

.item-fila-info { flex: 1; min-width: 0; }
.item-fila-nome { font-weight: 600; font-size: 14px; }
.item-fila-mascaras { color: var(--subtexto); font-size: 13px; }
.item-fila-status { font-size: 13px; white-space: nowrap; }
.item-fila.concluido .item-fila-status { color: var(--verde); }
.item-fila.erro .item-fila-status { color: var(--vermelho); }
.item-fila-status a { color: var(--azul); }

.bt-remover {
  background: none;
  border: none;
  color: var(--subtexto);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.bt-remover:hover { color: var(--vermelho); }

/* ---- Página "Minha pasta" ---- */

.formulario { display: grid; gap: 10px; max-width: 520px; }
.formulario label { display: grid; grid-template-columns: 130px 1fr; align-items: center;
                    gap: 10px; color: var(--subtexto); font-size: 14px; }
.formulario input { min-width: 0; }

#form-paciente { border-top: 1px solid var(--surface); margin-top: 12px; padding-top: 12px; }
#form-paciente .dica { margin-top: 0; }

.assinatura { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.assinatura-controles { display: grid; gap: 10px; align-content: start; }
.assinatura-controles .acoes { margin-top: 0; }
.campo-largura { display: grid; gap: 4px; color: var(--subtexto); font-size: 14px; }

/* Fundo claro de propósito: a assinatura é traço escuro em PNG transparente, e
   no tema escuro do resto da página ela simplesmente sumiria. */
.assinatura-previa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 110px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--surface-alto);
  border-radius: 6px;
}
.assinatura-previa img { max-width: 320px; max-height: 140px; }
.assinatura-previa .dica { color: #6c6f85; }

.lista-editavel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.item-editavel {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--base);
  border: 1px solid var(--surface);
  border-radius: 6px;
  padding: 6px 10px;
}
.item-editavel a { color: var(--azul); font-size: 13px; }
.item-editavel .campo-nome { flex: 1; min-width: 0; }
.item-editavel .nome-fixo { font-size: 14px; }

.setas { display: flex; flex-direction: column; }
.bt-seta {
  background: none;
  border: none;
  color: var(--subtexto);
  font-size: 10px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
}
.bt-seta:hover:not(:disabled) { color: var(--azul); }
.bt-seta:disabled { opacity: 0.25; cursor: default; }

.cartao code { background: var(--surface); border-radius: 4px; padding: 1px 4px; font-size: 13px; }

tbody tr.na-fila { opacity: 0.5; }
tbody tr.na-fila td:first-child::before { content: '• '; color: var(--azul); }

#paciente-selecionado.preenchido { font-size: 14px; }
#paciente-selecionado .nome-paciente { font-weight: 600; font-size: 15px; display: block; }
#resultado { margin-top: 12px; }
#resultado a { color: var(--azul); }