/* denunciar.css – visual clean, tipografia fina e discreta */
:root{
  --den-txt: var(--txt, #111827);
  --den-muted: var(--muted, #6b7280);
  --den-line: var(--line, #e5e7eb);
  --den-bg: var(--card, #fff);
  --den-primary: var(--primary, #3b82f6);
}

/* onde o botão é injetado no cabeçalho do card */
.den-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}

/* Botão “Denunciar” – pequeno, leve e neutro */
.den-btn{
  -webkit-tap-highlight-color: transparent;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--den-line);
  background:#fff;
  color:#374151;
  font:400 .86rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* ~12px, fina */
  letter-spacing:.01em;
  text-transform:none;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:background .12s ease, border-color .12s ease, color .12s ease, transform .02s ease;
}
.den-btn:active{ transform:translateY(1px); }
.den-btn:hover{ background:#f9fafb; }
.den-btn svg{ width:14px; height:14px; display:block; }

/* estado após denunciar */
.den-btn.is-on,
.den-btn:disabled{
  background:#f3f4f6;
  color:#6b7280;
  border-color:#e5e7eb;
  cursor:default;
  box-shadow:none;
}

/* ===== Modal ===== */
.den-modal-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(17,24,39,.40);
  display:grid; place-items:center;
  padding:16px;
}
.den-modal{
  width:100%; max-width:520px;
  background:var(--den-bg);
  color:var(--den-txt);
  border:1px solid var(--den-line);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(16,24,40,.18);
  padding:14px 14px 12px 14px;
}

/* Cabeçalho do modal */
.den-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.den-ic{
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center;
  background:#f3f4f6; color:#111827; border:1px solid var(--den-line);
  flex:0 0 auto;
}
.den-ic svg{ width:18px; height:18px; }

.den-title-wrap h3{
  margin:0 0 2px 0;
  font-weight:600; font-size:1rem; /* ~14px */
}
.den-sub{
  color:var(--den-muted);
  font-size:.86rem; /* ~12px */
}

/* Formulário */
.den-form{ margin-top:8px; }
.den-reasons{
  display:grid; gap:6px; margin:0 0 10px 0; border:0; padding:0;
}
.den-opt{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:10px;
  border:1px solid transparent;
  font-weight:400; font-size:.92rem; /* ~13px */
}
.den-opt:hover{ background:#f9fafb; border-color:var(--den-line); }
.den-opt input{ width:16px; height:16px; }

.den-extra{ display:block; margin:2px 0 10px 0; }
.den-extra-lb{
  font-size:.86rem; color:var(--den-muted); margin-bottom:4px;
}
.den-extra textarea{
  width:100%; resize:vertical; min-height:64px; max-height:180px;
  border:1px solid var(--den-line);
  border-radius:10px; padding:8px;
  font:400 .94rem/1.35 inherit; /* ~13px */
}

/* Ações do modal */
.den-actions-row{
  display:flex; justify-content:flex-end; gap:8px; margin-top:6px;
}
.den-btn-cancel,
.den-btn-send{
  height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--den-line);
  font:500 .9rem/1.1 inherit; /* ~13px */
  cursor:pointer; background:#fff;
}
.den-btn-cancel:hover{ background:#f9fafb; }
.den-btn-send{
  background:var(--den-primary); color:#fff; border-color:var(--den-primary);
  box-shadow:0 2px 8px rgba(59,130,246,.20);
}
.den-btn-send:hover{ filter:brightness(.98); }

/* micro feedback */
.den-toast{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(10px);
  background:#111827; color:#fff; border-radius:10px;
  font:500 .9rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:8px 12px; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:10000;
}
.den-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* tremidinha suave quando não escolher motivo */
@keyframes den-shake-kf{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.den-shake{ animation: den-shake-kf .45s; }