/* ========== BASE (adaptado para Fondo Familiar) ========== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0b1220;
  --card:#0f1a33;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:rgba(255,255,255,.10);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  --primary:#2563eb;
  --primary-dark:#1d4ed8;

  --wise:#00B9FF;
  --spark:#d71920;
  --skrill:#862165;
  --paypal:#003087;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  background: radial-gradient(1000px 500px at 20% 10%, rgba(37,99,235,.25), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(0,185,255,.18), transparent 55%),
              var(--bg);
  color: var(--text);
  min-height:100vh;
}

.app-shell{
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 14px 14px 20px;
}

.app-header{
  padding: 12px 6px 14px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.brand-logo{
  width:44px;
  height:44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
}

.brand-title{
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.1;
}

.brand-subtitle{
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.main-content{
  width:100%;
}

.app-card{
  background: rgba(15,26,51,.86);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.title{
  text-align:center;
  font-size: 18px;
  font-weight: 800;
}

.subtitle{
  text-align:center;
  color: var(--muted);
  font-size: 13px;
}

.sep{
  border:0;
  border-top:1px solid var(--border);
  margin: 14px 0;
}

/* ========== BOTONES DE PAGO ========== */
.pay-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.pay-btn{
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.pay-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.pay-badge{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
}

.pay-text{
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.pay-wise .pay-badge{ border-color: rgba(0,185,255,.45); color: #bfefff; }
.pay-wise{ box-shadow: 0 0 0 1px rgba(0,185,255,.15) inset; }

.pay-sparkasse .pay-badge{ border-color: rgba(215,25,32,.55); color: #ffd0d0; }
.pay-sparkasse{ box-shadow: 0 0 0 1px rgba(215,25,32,.14) inset; }

.pay-skrill .pay-badge{ border-color: rgba(134,33,101,.55); color: #ffd7f0; }
.pay-skrill{ box-shadow: 0 0 0 1px rgba(134,33,101,.14) inset; }

.pay-paypal .pay-badge{ border-color: rgba(0,48,135,.55); color: #cfe1ff; }
.pay-paypal{ box-shadow: 0 0 0 1px rgba(0,48,135,.14) inset; }

.pay-btn.disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* ========== FORM ========== */
.form-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.form-control, .form-select{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}

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

.form-text{
  color: rgba(229,231,235,.7) !important;
  font-size: 12px;
}

.preview{
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
}

.preview img{
  width:100%;
  display:block;
  max-height: 260px;
  object-fit: cover;
}

.hidden{display:none !important}

.app-submit{
  border-radius: 14px !important;
  padding: 14px !important;
  font-weight: 800 !important;
}

/* Footer */
.footer{
  margin-top: 14px;
  text-align:center;
  color: rgba(229,231,235,.65);
  font-size: 12px;
}
.pay-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.pay-icon{
  width:28px;
  height:28px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 4px;
}