:root {
  --fundo: #f4f6f9;
  --painel: #ffffff;
  --borda: #dde2ea;
  --texto: #1b2230;
  --suave: #5f6b7d;
  --primaria: #1f3b66;
  --primaria-clara: #e7eef8;
  --acento: #2f7de1;
  --ok: #1d8a4e;
  --ok-fundo: #e5f5ec;
  --alerta: #b7791f;
  --alerta-fundo: #fdf3e1;
  --perigo: #c53030;
  --perigo-fundo: #fdeaea;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f141b;
    --painel: #171e28;
    --borda: #2a3442;
    --texto: #e3e8ef;
    --suave: #93a0b3;
    --primaria: #8fb4ec;
    --primaria-clara: #1d2a3d;
    --acento: #5b9cf0;
    --ok: #5fd197;
    --ok-fundo: #133325;
    --alerta: #f0b85a;
    --alerta-fundo: #3a2c12;
    --perigo: #f08080;
    --perigo-fundo: #3d1a1a;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 13px; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }

#topo { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 52px; background: var(--painel); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: 700; font-size: 17px; color: var(--primaria); text-decoration: none; letter-spacing: -.01em; }
.marca span { color: var(--acento); }
#menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
#menu a { padding: 6px 12px; border-radius: 6px; color: var(--suave); text-decoration: none; white-space: nowrap; }
#menu a.ativo, #menu a:hover { background: var(--primaria-clara); color: var(--primaria); }
.usuario { display: flex; gap: 12px; align-items: center; color: var(--suave); white-space: nowrap; }

main { max-width: 1400px; margin: 0 auto; padding: 20px; }
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sub { color: var(--suave); margin: 0; }

.painel { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; box-shadow: var(--sombra); }
.grade { display: grid; gap: 16px; }
.duas { grid-template-columns: minmax(320px, 420px) 1fr; }
@media (max-width: 960px) { .duas { grid-template-columns: 1fr; } }

button, .btn { font: inherit; border: 1px solid var(--borda); background: var(--painel); color: var(--texto); padding: 7px 14px; border-radius: 7px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button:hover, .btn:hover { border-color: var(--acento); }
button.pri, .btn.pri { background: var(--primaria); border-color: var(--primaria); color: #fff; }
@media (prefers-color-scheme: dark) { button.pri, .btn.pri { color: #0f141b; } }
button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
button.perigo { color: var(--perigo); }
button.link { border: 0; background: none; color: var(--acento); padding: 0; }
button:disabled { opacity: .55; cursor: default; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input, select, textarea { font: inherit; color: var(--texto); background: var(--painel); border: 1px solid var(--borda); border-radius: 7px; padding: 7px 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--acento) 40%, transparent); border-color: var(--acento); }
textarea { resize: vertical; line-height: 1.5; }
label { display: block; font-size: 12px; color: var(--suave); margin-bottom: 10px; }
label > input, label > select, label > textarea { margin-top: 3px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }
.campos .largo { grid-column: 1 / -1; }
input[type=checkbox] { width: auto; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 12px; flex-wrap: wrap; }
.abas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--suave); padding: 8px 12px; }
.abas button.ativo { color: var(--primaria); border-bottom-color: var(--acento); font-weight: 600; }
.filtros { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filtros input { max-width: 320px; }
.filtros select { max-width: 160px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--suave); }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: var(--primaria-clara); }
.tabela-rolagem { overflow-x: auto; }
.vazio { text-align: center; color: var(--suave); padding: 40px 10px; }

.etiqueta { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--primaria-clara); color: var(--primaria); white-space: nowrap; }
.etiqueta.pendente { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.em_laudo { background: var(--primaria-clara); color: var(--acento); }
.etiqueta.laudado { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.aguardando_imagens, .etiqueta.cancelado { background: var(--fundo); color: var(--suave); }
.etiqueta.urgente { background: var(--perigo-fundo); color: var(--perigo); }

.series { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.serie { border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: #000; position: relative; }
.serie img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.serie .legenda { background: var(--painel); font-size: 11.5px; padding: 4px 6px; color: var(--suave); display: flex; justify-content: space-between; gap: 4px; align-items: center; }
.serie.chave { outline: 3px solid var(--acento); }

.editor textarea { min-height: 90px; }
.editor textarea[name=achados] { min-height: 220px; }
.salvo { font-size: 12px; color: var(--suave); }
.frases { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.frases button { text-align: left; font-size: 12.5px; padding: 5px 8px; display: block; width: 100%; }
details { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; }

.soltar { border: 2px dashed var(--borda); border-radius: 10px; padding: 24px; text-align: center; color: var(--suave); }
.soltar.sobre { border-color: var(--acento); background: var(--primaria-clara); }
.progresso { height: 8px; background: var(--fundo); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progresso div { height: 100%; background: var(--acento); width: 0; transition: width .2s; }

.info dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.info dt { color: var(--suave); }
.info dd { margin: 0; }

dialog { border: 1px solid var(--borda); border-radius: 12px; padding: 20px; background: var(--painel); color: var(--texto); width: min(520px, 92vw); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }

#aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--fundo); padding: 10px 18px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; z-index: 20; }
#aviso.mostrar { opacity: 1; }
#aviso.erro { background: var(--perigo); color: #fff; }

.login { max-width: 360px; margin: 10vh auto; }
.login .marca { display: block; font-size: 26px; text-align: center; margin-bottom: 20px; }

/* Páginas públicas (link de compartilhamento / verificação) */
body.publica { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 28px; max-width: 560px; width: 100%; box-shadow: var(--sombra); }
.cartao .btn { margin: 6px 6px 0 0; }
.cartao .btn:not(.sec) { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.cartao table th { width: 140px; }
.cartao code { word-break: break-all; font-size: 11px; }
.ok { color: var(--ok); font-weight: 600; }
.aviso { color: var(--alerta); }

/* Chat do exame */
.chat-lista { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.msg { max-width: 85%; padding: 8px 10px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--borda); align-self: flex-start; }
.msg.minha { align-self: flex-end; background: var(--primaria-clara); border-color: transparent; }
.msg-cab { font-size: 11.5px; color: var(--suave); margin-bottom: 2px; }
.msg-texto { white-space: pre-wrap; word-wrap: break-word; }
.etiqueta.msg-nova { background: var(--acento); color: #fff; }

/* Autocadastro */
.cadastro { max-width: 620px; margin: 4vh auto; }
.cadastro .marca { display: block; font-size: 24px; text-align: center; margin-bottom: 8px; }
.cadastro h1 { text-align: center; }
.cadastro > .sub { text-align: center; margin-bottom: 14px; }
#topo[hidden] { display: none; }