/* CityReport - Nuevo reporte */

.new-report-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  background:
    radial-gradient(900px 300px at 8% -8%, rgba(14, 165, 233, .16), transparent 62%),
    radial-gradient(700px 260px at 94% 0%, rgba(34, 197, 94, .12), transparent 60%),
    rgba(255, 255, 255, .94);
  animation: nrEnter .38s ease both;
}

.new-report-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #154965, #0ea5e9, #22c55e);
}

.new-report-form {
  animation: nrFormEnter .42s ease both;
}

.new-report-form .form-grid {
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 250, 252, .72)),
    radial-gradient(420px 140px at 10% 0%, rgba(14, 165, 233, .10), transparent 70%);
  box-shadow: 0 16px 36px rgba(2, 6, 23, .07);
}

.new-report-form label {
  color: #154965;
  font-size: .84rem;
  font-weight: 950;
  letter-spacing: .02em;
}

.new-report-form .form-control {
  min-height: 46px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, .38);
  background-color: rgba(255, 255, 255, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.new-report-form textarea.form-control {
  min-height: 132px;
}

.new-report-form .form-control:focus {
  border-color: rgba(14, 165, 233, .65);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .13);
}

.new-report-form input[type="file"].form-control {
  padding: .65rem;
  cursor: pointer;
}

.new-report-form .hint {
  margin-top: 8px;
  color: #64748b;
  font-size: .88rem;
  font-weight: 800;
}

.map-pick-wrap {
  border-color: rgba(148, 163, 184, .24) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .86));
  position: relative;
}

.map-pick-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

#pickMap {
  min-height: 360px;
}

.map-tools {
  margin-top: 12px !important;
}

.chip {
  border-color: rgba(14, 165, 233, .22) !important;
  background: rgba(14, 165, 233, .09) !important;
  color: #154965 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.map-pick-hint {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(248, 250, 252, .86);
  border: 1px solid rgba(226, 232, 240, .86);
}

.new-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.report-msg {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .25);
  font-weight: 850;
}

.report-msg--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.report-msg--ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.report-msg--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}

@keyframes nrEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nrFormEnter {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
  .new-report-panel {
    padding: 1rem;
  }

  .new-report-actions {
    flex-direction: column;
  }

  .new-report-actions .btn {
    justify-content: center;
  }

  #pickMap {
    min-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-report-panel,
  .new-report-form {
    animation: none !important;
  }
}