/* Mesma paleta dos relatórios e do portal: grafite, âmbar e papel. */
:root {
  --marca: #1B1F27;
  --marca-forte: #5A6171;
  --destaque: #E8A33D;
  --destaque-escuro: #C77F1E;
  --fundo: #F3F1EA;
  --cartao: #FBFAF7;
  --borda: #E4E0D6;
  --texto: #1B1F27;
  --texto-suave: #5B6270;
  --verde: #3E8F5C;  --verde-tinta: #EAF5EE;
  --vermelho: #D14848; --vermelho-tinta: #FBE9E9;
  --ambar-tinta: #FBEBD3;
  --cinza-tinta: #E9EBEE;
  --papel-tinta: #EFEBDF;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; background:var(--fundo); color:var(--texto); }
:focus-visible { outline:2px solid var(--destaque); outline-offset:2px; }

.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.75rem; padding:.75rem 1.5rem; background:var(--cartao); border-bottom:1px solid var(--borda); }
.topbar h1 { margin:0; margin-right:auto; font-size:1.25rem; font-weight:800; letter-spacing:-.02em; color:var(--marca); }
.voltar { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:8px; background:var(--fundo); color:var(--marca); font-weight:600; text-decoration:none; border:1px solid var(--borda); }
.voltar[hidden] { display:none; }
.voltar:hover { border-color:var(--destaque); }
.voltar svg { width:20px; height:20px; }

main { max-width:900px; margin:1.5rem auto; padding:0 1rem 5rem; }
.filtros { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
input, select, textarea { padding:.55rem .7rem; border:1px solid var(--borda); border-radius:8px; background:var(--cartao); color:var(--texto); font:inherit; width:100%; }
.filtros select { width:auto; }

.btn { background:var(--marca); color:#fff; border:0; padding:.55rem 1rem; border-radius:8px; cursor:pointer; font:inherit; font-weight:600; }
.btn:hover { background:var(--marca-forte); }
.btn-sec { background:var(--papel-tinta); color:var(--marca); }
.btn-sec:hover { background:var(--borda); }

.card { background:var(--cartao); border:1px solid var(--borda); border-radius:16px; padding:1rem 1.25rem; margin-bottom:.75rem; box-shadow:0 1px 2px rgba(20,10,40,.06); transition:border-color .2s, box-shadow .2s; }
.card { cursor:pointer; }
.card:hover { border-color:var(--destaque); box-shadow:0 8px 24px -8px rgba(20,10,40,.15); }
.card h3 { margin:0 0 .25rem; font-size:1rem; font-weight:700; color:var(--marca); }
.card small { color:var(--texto-suave); }
.card p { margin:.5rem 0 0; color:var(--texto); font-size:.95rem; }
.id { font-weight:700; color:var(--destaque-escuro); margin-right:.5rem; }

.tag { display:inline-block; padding:.1rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; background:var(--cinza-tinta); color:var(--marca-forte); margin:.4rem .25rem 0 0; }
.tag.alta { background:var(--vermelho-tinta); color:var(--vermelho); }
.tag.media { background:var(--ambar-tinta); color:var(--destaque-escuro); }
.tag.baixa { background:var(--cinza-tinta); color:var(--marca-forte); }
.tag.st-resolvido { background:var(--verde-tinta); color:var(--verde); }
.tag.st-em_andamento { background:var(--ambar-tinta); color:var(--destaque-escuro); }
.vazio { text-align:center; color:var(--texto-suave); padding:2rem; }

dialog { border:1px solid var(--borda); border-radius:16px; padding:1.5rem; width:min(480px, 92vw); background:var(--cartao); color:var(--texto); }
dialog::backdrop { background:rgba(27,31,39,.45); }
dialog h2 { margin:0 0 .5rem; color:var(--marca); }
dialog label { display:block; margin:.75rem 0; font-size:.9rem; font-weight:600; color:var(--texto-suave); }
dialog label input, dialog label select, dialog label textarea { margin-top:.3rem; font-weight:400; }
.acoes { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }

.paginacao { position:fixed; right:1.25rem; bottom:1.25rem; display:flex; gap:.5rem; z-index:10; }
.seta { width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--borda); background:var(--cartao); color:var(--marca); font-size:1.5rem; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(20,10,40,.15); }
.seta:hover { background:var(--destaque); color:var(--marca); border-color:var(--destaque); }

#dlg-detalhe h2 { margin:.25rem 0 0; font-size:1.25rem; }
.det-topo { display:flex; justify-content:space-between; align-items:center; }
.det-x { border:0; background:transparent; font-size:1.75rem; line-height:1; color:var(--texto-suave); cursor:pointer; }
.det-x:hover { color:var(--marca); }
.det-info { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:1rem 0; padding:.75rem; background:var(--fundo); border-radius:12px; }
.det-info dt { font-size:.75rem; font-weight:600; color:var(--texto-suave); }
.det-info dd { margin:.15rem 0 0; font-weight:600; }
.det-sub { margin:0; font-size:.85rem; color:var(--texto-suave); }
#det-descricao { margin:.4rem 0 0; white-space:pre-wrap; }