:root{
  --rdi-primary: #F25C92; /* color de botones */
  --rdi-primary-weak: #ffd9e7;
  --rdi-text: #444;
  --rdi-muted: #8a8a8a;
  --rdi-danger: #c0392b;
  --rdi-success: #2ecc71;
  --rdi-radius-pill: 9999px;
}

.rdi-login{
  font-family: "Natom Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex; align-items:center; justify-content:center;
  padding: 32px 16px;
  background: transparent; /* limpio */
}

.rdi-card{
  width:100%;
  max-width: 420px;
  background: #fff;
  border-radius: 28px;
  padding: 24px;
  border: 1px solid #f1f1f1; /* sin sombra rosa */
  box-shadow: none;          /* sin sombra */
}

.rdi-sub{margin:0; color:var(--rdi-muted); font-size:14px}

.rdi-label{
  display:block; margin:16px 0 8px; color:var(--rdi-primary); font-weight:700;
}

.rdi-input-wrap{ position: relative; }
.rdi-input{
  width:100%; font-size:16px; padding:14px 16px;
  border:1.5px solid #e8e8e8; border-radius: 12px;
  outline:none; color:var(--rdi-text); background:#fff;
  transition: border-color .15s ease;
}
.rdi-input::placeholder{ color:#bfbfbf; }

.rdi-input:focus{
  border-color: var(--rdi-primary);
  box-shadow: none; /* sin glow rosa */
}

.rdi-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:14px 18px; border-radius: 22px;
  border:2px solid transparent; cursor:pointer; font-weight:800;
  transition: transform .06s ease, filter .18s ease, background .18s;
}
.rdi-btn:active{ transform: translateY(1px); }
.rdi-btn:disabled{opacity:.6; cursor: not-allowed}

.rdi-btn-primary{
  background: var(--rdi-primary);
  color:#fff; border-color: var(--rdi-primary);
}
.rdi-btn-primary:hover{ filter:brightness(1.05) }

.rdi-btn-outline{
  background:#fff; color:var(--rdi-primary); border-color: var(--rdi-primary);
}
.rdi-btn-outline:hover{ background:#fff5fa }

.rdi-btn-text{
  background: transparent; color: var(--rdi-primary); border-color: transparent;
  padding-left: 0; padding-right:0;
}
.rdi-btn-text:hover{ text-decoration: underline; }

.rdi-full{ width:100%; margin-top:14px }

.rdi-or{
  text-align:center; color:#c986a8; margin:14px 0 4px; font-weight:700;
}

.rdi-legend{
  color:#888; font-size:14px; margin:8px 0 8px;
}

.rdi-otp-controls{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px
}

.rdi-otp-input{
  letter-spacing: 6px; text-align: center; font-weight: 800;
}

.rdi-msg{
  margin-top:10px; font-size:14px;
}
.rdi-msg.error{ color: var(--rdi-danger) }
.rdi-msg.success{ color: var(--rdi-success) }

/* Spinner para botones */
.rdi-spinner{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.5);
  border-top-color:#fff; border-radius:50%;
  animation: rdi-spin 1s linear infinite;
}
.rdi-btn-outline .rdi-spinner{
  border-color: rgba(242,92,146,.35);
  border-top-color: var(--rdi-primary);
}
@keyframes rdi-spin { to { transform: rotate(360deg) } }

@media (max-width: 480px){
  .rdi-card{ padding:18px; border-radius:22px }
  .rdi-input{ padding:12px 14px }
  .rdi-btn{ padding:12px 16px; border-radius:20px }
}