/* Delfos · tokens do design.md §9 (escuro por padrão, claro junto) */
:root {
  --fundo: #15181C; --superficie: #1E2328; --superficie-2: #252B31;
  --texto: #E6E9EC; --texto-fraco: #9AA3AC; --borda: #2C333A;
  --marinho: #1B2A41; --cobre: #B87333; --terroso: #8A7A6D;
  --ok: #5E9B7A; --atencao: #C29A4A; --erro: #B5615A;
  --raio: 6px;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --fundo: #F4F5F6; --superficie: #FFFFFF; --superficie-2: #EEF0F2;
  --texto: #1A1D21; --texto-fraco: #5A636C; --borda: #DCE0E4;
  --marinho: #1B2A41; --cobre: #9A5E28; --terroso: #8A7A6D;
  --ok: #3F7A5A; --atencao: #8F6B22; --erro: #9A4740;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cobre); }
[hidden] { display: none !important; }

/* ---- estrutura ---- */
.topo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--marinho); color: #E6E9EC;
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: baseline; gap: 10px; }
.marca b { font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.marca span { font-size: 13px; color: #B7C0C9; }
.topo .quem { margin-left: auto; font-size: 14px; color: #C9D1D9; }
.topo button.leve { color: #E6E9EC; border-color: #3A4A63; }

.passos { display: flex; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--borda); overflow-x: auto; background: var(--superficie); }
.passo { flex: 1 0 auto; min-width: 120px; padding: 6px 10px; border-top: 3px solid var(--borda); font-size: 13px; color: var(--texto-fraco); }
.passo b { display: block; font-weight: 600; }
.passo.feito { border-top-color: var(--terroso); color: var(--texto); }
.passo.atual { border-top-color: var(--cobre); color: var(--texto); }

.grade { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; padding: 20px; max-width: 1280px; margin: 0 auto; }
.lado { display: flex; flex-direction: column; gap: 16px; }
.centro { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.cartao h2, .cartao h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-fraco); margin: 0 0 6px; }
.cartao.ato { border-left: 3px solid var(--cobre); }
.fraco { color: var(--texto-fraco); font-size: 14px; }
.pequeno { font-size: 13px; }

/* ---- abas ---- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); }
.aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--texto-fraco); font-weight: 500; }
.aba[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--cobre); }
.aba-caso { display: none; }

/* ---- controles ---- */
button { cursor: pointer; }
.botao { background: var(--cobre); color: #fff; border: 0; border-radius: var(--raio); padding: 10px 16px; font-weight: 600; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.leve { background: transparent; border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 12px; }
label { display: block; font-size: 14px; color: var(--texto-fraco); margin: 10px 0 4px; }
input[type=text], input[type=password], input[list], select, textarea {
  width: 100%; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--cobre); outline-offset: 1px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--borda); background: var(--superficie-2); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip[aria-pressed="true"] { border-color: var(--cobre); background: color-mix(in srgb, var(--cobre) 18%, transparent); }

.linha { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.linha > * { flex: 1 1 200px; }
.linha > .botao { flex: 0 0 auto; }

.aviso { padding: 10px 12px; border-radius: var(--raio); background: color-mix(in srgb, var(--atencao) 15%, transparent); border: 1px solid color-mix(in srgb, var(--atencao) 40%, transparent); font-size: 14px; }
.erro { color: var(--erro); font-size: 14px; min-height: 1.2em; }

/* ---- conversa ---- */
.feed { display: flex; flex-direction: column; gap: 12px; max-height: 58vh; overflow-y: auto; padding-right: 4px; }
.troca { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.troca .p { padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.troca .r { padding: 10px 14px; white-space: pre-wrap; }
.meta { font-size: 12px; color: var(--texto-fraco); margin-bottom: 2px; }
.meta .para { color: var(--cobre); }
.digitando { font-size: 14px; color: var(--texto-fraco); }

/* ---- exames ---- */
.exame { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; background: var(--superficie); }
.exame ul { margin: 6px 0 0; padding-left: 18px; }
.exame li { margin: 4px 0; }
.exame .nome { font-weight: 600; }

/* ---- registro ---- */
.prof-linha { border-top: 1px solid var(--borda); padding: 12px 0; }
.prof-linha:first-child { border-top: 0; }
.prof-linha h4 { margin: 0 0 4px; font-size: 14px; }
.prof-linha .grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.salvo { font-size: 12px; color: var(--ok); }

/* ---- tabela ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-weight: 600; color: var(--texto-fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.destaque { color: var(--cobre); font-weight: 600; }
.rolar { overflow-x: auto; }

/* ---- entrada ---- */
.entrada { max-width: 460px; margin: 8vh auto; padding: 0 16px; }
.entrada h1 { font-size: 34px; font-weight: 600; margin: 0; letter-spacing: .02em; }
.entrada .sub { color: var(--texto-fraco); margin: 4px 0 24px; }
.entrada .nota { font-size: 13px; color: var(--texto-fraco); margin-top: 16px; }

/* ---- barras (pesquisa) ---- */
.barra { display: grid; grid-template-columns: 170px 1fr 64px; gap: 10px; align-items: center; font-size: 14px; margin: 6px 0; }
.barra .trilho { height: 10px; background: var(--superficie-2); border-radius: 2px; }
.barra .cheio { height: 10px; background: var(--marinho); border-radius: 2px; }
:root:not([data-tema="claro"]) .barra .cheio { background: #4A6385; }

/* ---- modo prontuário ---- */
.prontuario { max-width: 880px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.frentes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.frente { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; font-size: 14px; }
.frente[aria-pressed="true"] { border-top-color: var(--cobre); background: var(--superficie-2); }
.cabeca-frente h2 { margin: 0; font-size: 22px; font-weight: 600; }
.cabeca-frente p { margin: 2px 0 0; }
.documento { background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--terroso); border-radius: var(--raio); padding: 14px 18px; margin-top: 12px; }
.documento header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); padding-bottom: 8px; margin-bottom: 8px; }
.documento h3 { margin: 0; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.documento .data { font-size: 13px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.documento .texto p { margin: 6px 0; }
.documento .texto ul, .documento .texto ol { margin: 6px 0; padding-left: 22px; }
.documento .texto li { margin: 3px 0; }
@media (max-width: 860px) { .frentes { grid-template-columns: 1fr 1fr; } }
@media print { .topo, .frentes { display: none; } .documento { break-inside: avoid; } }

@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr; padding: 12px 16px; }
  .lado { display: none; }
  .lado.mostrar { display: flex; }
  .aba-caso { display: inline-block; }
  .prof-linha .grade2 { grid-template-columns: 1fr; }
  .feed { max-height: none; }
  .barra { grid-template-columns: 110px 1fr 60px; }
}

/* ---- profissões fora do grupo, no registro ---- */
details.outras { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 8px; }
details.outras summary { cursor: pointer; color: var(--texto-fraco); font-size: 14px; padding: 6px 0; }

/* ---- votação (sábado) ---- */
.votos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.voto { text-align: left; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; font-size: 16px; }
.voto[aria-pressed="true"] { border-color: var(--cobre); background: color-mix(in srgb, var(--cobre) 18%, transparent); font-weight: 600; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proposta { border-top: 1px solid var(--borda); padding: 12px 0; }
.proposta:first-child { border-top: 0; }
.proposta p { margin: 4px 0; font-size: 14px; }
@media (max-width: 860px) { .lado-a-lado { grid-template-columns: 1fr; } }