:root{
  --ink:#0f172a;
  --muted:#64748b;
  --brand:#2563eb;
  --brand2:#38bdf8;
  --card:#ffffff;
  --soft:#f6f8ff;
}

body{
  background:#0b1220;
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.bg-soft{
  position:fixed; inset:-200px;
  background:
    radial-gradient(850px 420px at 20% 12%, rgba(37,99,235,.24), transparent 60%),
    radial-gradient(700px 380px at 80% 22%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 540px at 50% 85%, rgba(168,85,247,.15), transparent 55%);
  z-index:-1;
}

.brand-dot{
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(56,189,248,1));
  box-shadow: 0 14px 40px rgba(37,99,235,.25);
}

.card-hero{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}

.notice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:16px;
  background: #fff7ed;
  border: 1px solid rgba(251,146,60,.25);
}

.notice-icon{
  width:28px; height:28px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(251,146,60,.22);
  color:#9a3412;
  font-weight:800;
}

.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
}
.btn-primary:hover{ filter:brightness(.96); }

.modal-modern{
  background: rgba(255,255,255,.98);
}

.modal-modern-header{
  padding:18px 20px;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(56,189,248,1));
  color:#fff;
}

.modal-title{
  font-weight:800;
  letter-spacing:.2px;
}

.modal-close{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  flex: 0 0 auto; /* evita que se “mueva” al centro */
}

.modal-modern-body{
  padding:18px 20px 20px;
  background: linear-gradient(180deg, #ffffff, var(--soft));
}

.section-card{
  background: var(--card);
  border-radius:18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  padding:16px;
}

.section-title{
  font-weight:800;
  color: var(--ink);
  margin-bottom:12px;
}

.req{
  color:#ef4444;
  font-weight:800;
}

.form-control, .form-select{
  border-radius:14px;
  border: 1px solid rgba(15,23,42,.14);
}

.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.12);
}

.form-text{
  color: var(--muted) !important;
}

.invalid-feedback{
  font-weight:600;
}