:root{
  --rp-negro:#070304;
  --rp-crema:#F2EFE8;
  --rp-naranja:#EF795C;
  --rp-rojo:#E52819;
}
.reportar-overlay{
  position:fixed; inset:0;
  background:rgba(7,3,4,.75);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center; justify-content:center;
  z-index:99999;
  padding:20px;
  opacity:0;
  transition:opacity .25s ease;
}
.reportar-overlay.is-open{ display:flex; opacity:1; }

.reportar-modal{
  background:#FFFFFF;
  color:var(--rp-negro);
  width:100%; max-width:560px;
  border-radius:16px;
  padding:32px 28px 24px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.96);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
  max-height:90vh; overflow-y:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.reportar-overlay.is-open .reportar-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

.reportar-close{
  position:absolute; top:12px; right:14px;
  width:36px; height:36px;
  border:none; background:transparent;
  font-size:28px; line-height:1;
  color:var(--rp-negro);
  cursor:pointer; border-radius:50%;
  transition:background .2s, color .2s;
}
.reportar-close:hover{ background:var(--rp-rojo); color:var(--rp-crema); }

.reportar-header h2{
  margin:0 0 6px;
  font-size:24px; font-weight:700;
  color:var(--rp-negro);
}
.reportar-header p{
  margin:0 0 20px;
  font-size:14px; color:#555;
}

.reportar-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.reportar-field{ display:flex; flex-direction:column; }
.reportar-field--full{ grid-column:1 / -1; }
.reportar-field label{
  font-size:13px; font-weight:600;
  margin-bottom:6px; color:var(--rp-negro);
}
.reportar-field input,
.reportar-field textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid #d9d5cc;
  border-radius:8px;
  background:#fff;
  font-size:14px; color:var(--rp-negro);
  font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
  box-sizing:border-box;
}
.reportar-field input:focus,
.reportar-field textarea:focus{
  outline:none;
  border-color:var(--rp-naranja);
  box-shadow:0 0 0 3px rgba(239,121,92,.2);
}
.reportar-field textarea{ resize:vertical; min-height:70px; }

.reportar-actions{ margin-top:20px; }
.reportar-submit{
  width:100%;
  padding:13px 20px;
  background:#070304;
  color:#F2EFE8;
  border:none; border-radius:10px;
  font-size:15px; font-weight:700;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background .25s, transform .1s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-transform:uppercase;
}
.reportar-submit:hover{ background:#333; }
.reportar-submit:active{ transform:scale(.98); }
.reportar-submit:disabled{ opacity:.6; cursor:not-allowed; }

.reportar-msg{
  margin:12px 0 0;
  font-size:14px; text-align:center; min-height:20px;
}
.reportar-msg.is-ok{ color:#0a7d2c; }
.reportar-msg.is-error{ color:var(--rp-rojo); }

@media (max-width:520px){
  .reportar-grid{ grid-template-columns:1fr; }
  .reportar-modal{ padding:26px 20px 20px; }
  .reportar-header h2{ font-size:20px; }
}