:root {
  --fundo: #f3f5f8; --cartao: #fff; --texto: #1b2430; --suave: #5d6b7c; --borda: #d3dae3;
  --marca: #123a5c; --marca-texto: #fff; --ok: #1d7a46; --alerta: #9a6400; --perigo: #b3261e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #11161d; --cartao: #1a212b; --texto: #e6ebf1; --suave: #9aa7b6; --borda: #2e3947;
          --marca: #5b9bd5; --marca-texto: #0b1622; --ok: #5cc98a; --alerta: #e0a93a; --perigo: #ff8a80; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }

.topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: #123a5c; color: #fff; }
.topo h1 { flex: 1; margin: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .icone { color: #fff; border-color: transparent; background: transparent; font-size: 1.4rem; }
.rede { font-size: .75rem; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.15); }
.rede.off { background: #b3261e; }

button, .botao { font: inherit; min-height: 44px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
                 border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); display: inline-flex; align-items: center; justify-content: center; }
button:disabled { opacity: .5; cursor: default; }
.primario { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); font-weight: 600; }
.perigo { color: var(--perigo); border-color: var(--perigo); background: transparent; }
.largo { width: 100%; }
.icone { min-width: 44px; padding: 0; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.lista { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.lista li { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.item { display: grid; gap: 2px; text-align: left; justify-content: stretch; border: 0; padding: 0; background: none; }
.item span, .item small { color: var(--suave); }
.selo { justify-self: start; font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; border: 1px solid currentColor; color: var(--suave); }
.selo.enviado { color: var(--ok); }
.selo.fila, .selo.enviando { color: var(--alerta); }
.selo.erro, .selo.laudo-erro { color: var(--perigo); }
.selo.laudo-gerado, .selo.laudo-emitido { color: var(--ok); }
.selo.laudo-gerando { color: var(--alerta); }

.status { display: grid; gap: 8px; margin-bottom: 12px; }
.status:empty { display: none; }
.erro { color: var(--perigo); margin: 0; }
.dica { color: var(--suave); margin: 0; font-size: .9rem; }
.avisos { margin: 0; padding: 10px 10px 10px 28px; border-left: 4px solid var(--alerta); background: var(--cartao); border-radius: 6px; }

details { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 12px; }
summary { padding: 14px 16px; font-weight: 600; cursor: pointer; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 4px 16px 16px; }
.campos > .largo, .campos > fieldset { grid-column: 1 / -1; }
.campo { display: grid; gap: 4px; }
.campo > span, .foto > span, fieldset label span { font-size: .85rem; color: var(--suave); }
.obrig { color: var(--perigo); }
input, select, textarea { font: inherit; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 8px;
                          border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px 12px; display: grid; gap: 10px; margin: 0; }
legend { font-weight: 600; padding: 0 4px; }
.linha { display: grid; grid-template-columns: 1fr 44px; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--borda); }
.linha > :not(button) { grid-column: 1; }
.linha > button { grid-column: 2; grid-row: 1; }
.grade-medicoes { display: grid; grid-template-columns: 1.5em repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.grade-medicoes input { min-width: 0; padding: 8px 2px; text-align: center; }
.grade-medicoes .cab { text-align: center; font-weight: 600; color: var(--suave); }

.foto { display: grid; gap: 6px; align-content: start; }
.foto img, .sem-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda); }
.sem-foto { display: grid; place-items: center; color: var(--suave); background: var(--fundo); }
.extra { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin-bottom: 12px; }
.extra img { width: 110px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.extra div { display: grid; gap: 6px; align-content: start; }
.previa { padding: 10px 12px; border-radius: 8px; background: var(--fundo); }
.previa p { margin: 0 0 4px; }

.acoes { display: grid; gap: 12px; margin-top: 8px; }
dialog { border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); color: var(--texto); width: min(420px, calc(100% - 32px)); }
dialog h2 { margin-top: 0; }
dialog label { display: grid; gap: 4px; margin-bottom: 10px; }
menu { padding: 0; margin: 16px 0 0; display: flex; justify-content: flex-end; }

.filtros { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 600px) { .filtros { grid-template-columns: 2fr 1fr 1fr; } }