/* =============================================
   REGISTRO — registro.css
   Roller Pingüinos — diseño alineado al sitio principal
   ============================================= */

:root {
  --yellow:      #FFB612;
  --yellow-dim:  #e6a20e;
  --yellow-glow: rgba(255,182,18,0.18);
  --dark:        #101820;
  --dark-2:      #161f29;
  --dark-3:      #1e2a38;
  --dark-border: rgba(255,255,255,0.08);
  --white:       #ffffff;
  --gray:        #8899aa;
  --gray-light:  #ccd6e0;
  --font:        'Outfit', sans-serif;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 20px 60px rgba(0,0,0,0.5);
  --transition:  all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--dark);
  color: var(--white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

/* ── Fondo ──────────────────────────────────── */
.rp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--dark);
}

.rp-bg__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.rp-bg__glow--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,182,18,0.12) 0%, transparent 70%);
  top: -150px; left: -150px;
}
.rp-bg__glow--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,182,18,0.07) 0%, transparent 70%);
  bottom: -100px; right: -100px;
}
.rp-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Volver ─────────────────────────────────── */
.rp-back {
  position: fixed;
  top: 20px; left: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dark-border);
  transition: var(--transition);
}
.rp-back:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

/* ── Wrapper ────────────────────────────────── */
.rp-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  padding: 24px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* ── Logo ───────────────────────────────────── */
.rp-logo img {
  height: 52px;
  object-fit: contain;
  transition: opacity 0.2s;
}
.rp-logo:hover img { opacity: 0.85; }

/* ── Encabezado ─────────────────────────────── */
.rp-header {
  text-align: center;
}
.rp-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rp-header p {
  font-size: 0.875rem;
  color: var(--gray);
  margin-top: 6px;
}

/* ── Tarjeta ────────────────────────────────── */
.rp-card {
  width: 100%;
  background: var(--dark-2);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Barra de progreso ──────────────────────── */
.rp-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-progress__track {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.rp-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--yellow-dim), var(--yellow));
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.hidden { display: none !important; }
.rp-progress__label {
  font-size: 0.72rem;
  color: var(--gray);
  text-align: right;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Step ───────────────────────────────────── */
.rp-step {
  display: none;
  flex-direction: column;
  gap: 20px;
  animation: fadeUp 0.3s ease both;
}
.rp-step.active { display: flex; }

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

/* Cabecera del step */
.rp-step__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rp-step__icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--yellow-glow);
  border: 1px solid rgba(255,182,18,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--yellow);
}
.rp-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.rp-step__sub {
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 3px;
}

/* ── Grid de campos ─────────────────────────── */
.rp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Campo ──────────────────────────────────── */
.rp-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;   /* evita que el grid cell se expanda */
}
.rp-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-light, #ccd6e0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rp-req { color: var(--yellow); margin-left: 2px; }

/* Input con ícono */
.rp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;   /* corta cualquier hijo que desborde */
  min-width: 0;
}
.rp-input-wrap > i {
  position: absolute;
  left: 13px;
  font-size: 0.8rem;
  color: var(--gray);
  pointer-events: none;
  transition: color 0.2s;
}
.rp-input-wrap input,
.rp-input-wrap select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.875rem;
  padding: 10px 14px 10px 38px;
  outline: none;
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.rp-input-wrap input::placeholder { color: rgba(255,255,255,0.2); }
.rp-input-wrap input:focus,
.rp-input-wrap select:focus {
  border-color: var(--yellow);
  background: rgba(255,182,18,0.05);
  box-shadow: 0 0 0 3px rgba(255,182,18,0.1);
}
.rp-input-wrap:focus-within > i { color: var(--yellow); }
.rp-input-wrap select option { background: var(--dark-2); }

/* input date — forzar color en placeholder nativo */
.rp-input-wrap input[type="date"]::-webkit-datetime-edit-text,
.rp-input-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.rp-input-wrap input[type="date"]::-webkit-datetime-edit-day-field,
.rp-input-wrap input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--white);
}
.rp-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.4);
  cursor: pointer;
}

/* Error */
.rp-field.has-error .rp-input-wrap input,
.rp-field.has-error .rp-input-wrap select {
  border-color: #ff5a5a;
  background: rgba(255,90,90,0.05);
}
.rp-field.has-error .rp-input-wrap > i { color: #ff5a5a; }
.rp-error-msg {
  font-size: 0.72rem;
  color: #ff7a7a;
  display: none;
}
.rp-field.has-error .rp-error-msg { display: block; }

/* ── Reglamento ─────────────────────────────── */
.rp-reglamento {
  max-height: 280px;
  overflow-y: auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--gray-light, #ccd6e0);
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) transparent;
}
.rp-reglamento::-webkit-scrollbar { width: 4px; }
.rp-reglamento::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 99px; }
.rp-regl-titulo {
  color: var(--yellow);
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rp-reglamento h4 {
  color: var(--white);
  font-size: 0.82rem;
  margin: 14px 0 6px;
}
.rp-reglamento p {
  margin-bottom: 8px;
}
.rp-regl-subtitulo {
  text-align: center;
  color: var(--gray);
  font-size: 0.8rem;
  margin-bottom: 12px;
}
.rp-regl-lista {
  padding-left: 16px;
  line-height: 2;
}

/* ── Checkbox ────────────────────────────────── */
.rp-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.rp-check input[type="checkbox"] { display: none; }
.rp-check__box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  margin-top: 1px;
}
.rp-check__box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
  margin-top: -2px;
}
.rp-check input:checked ~ .rp-check__box {
  background: var(--yellow);
  border-color: var(--yellow);
}
.rp-check input:checked ~ .rp-check__box::after {
  transform: rotate(-45deg) scale(1);
}
.rp-check__text {
  font-size: 0.82rem;
  color: var(--gray-light, #ccd6e0);
  line-height: 1.5;
}
.rp-check.has-error .rp-check__box {
  border-color: #ff5a5a;
}

/* ── Foto del alumno ────────────────────────── */
.rp-foto-wrap {
  cursor: pointer;
  user-select: none;
  gap: 0;
  overflow: hidden;
  min-width: 0;
}
.rp-foto-wrap:hover {
  border-color: var(--yellow);
  background: rgba(255,182,18,0.06);
}
/* el ícono ya está posicionado absolute por .rp-input-wrap > i */
.rp-foto-label {
  flex: 1;
  min-width: 0;          /* permite que flex trunce el texto */
  font-size: 0.875rem;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 8px 10px 38px;
}
.rp-foto-label.has-file {
  color: var(--white);
}
.rp-foto-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  margin-right: 8px;
}
.rp-foto-remove {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,90,90,0.15);
  color: #ff7a7a;
  border: 1px solid rgba(255,90,90,0.25);
  cursor: pointer;
  font-size: 0.65rem;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  margin-right: 8px;
}
/* Respetar hidden — solo mostrar via JS con display:flex */
.rp-foto-remove[hidden] { display: none !important; }
.rp-foto-remove:not([hidden]) { display: flex; }
.rp-foto-remove:hover { background: rgba(255,90,90,0.3); }

.rp-foto-thumb[hidden] { display: none !important; }

/* Campo que ocupa las 2 columnas */
.rp-field--full { grid-column: 1 / -1; }

/* Fecha: 3 selects en fila */
.rp-fecha-wrap {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: 8px;
}

/* Textarea */
.rp-textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.875rem;
  padding: 10px 14px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: var(--transition);
}
.rp-textarea::placeholder { color: rgba(255,255,255,0.2); }
.rp-textarea:focus {
  border-color: var(--yellow);
  background: rgba(255,182,18,0.05);
  box-shadow: 0 0 0 3px rgba(255,182,18,0.1);
}

/* ── Acciones ───────────────────────────────── */
.rp-actions {
  display: flex;
  justify-content: flex-end;
}
.rp-actions--split {
  justify-content: space-between;
}

.rp-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--gray-light, #ccd6e0);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: var(--transition);
}
.rp-btn-back:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  transform: translateY(-1px);
}

.rp-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.02em;
}
.rp-btn-next:hover {
  background: var(--yellow-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,182,18,0.25);
}
.rp-btn-next:active { transform: translateY(0); box-shadow: none; }

/* ── Planes ─────────────────────────────────── */
.rp-planes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rp-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 14px;
  background: var(--dark-3, #1e2a38);
  border: 2px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  position: relative;
}
.rp-plan:hover {
  border-color: rgba(255,182,18,0.4);
  background: rgba(255,182,18,0.04);
}
.rp-plan:has(input:checked) {
  border-color: var(--yellow);
  background: rgba(255,182,18,0.07);
  box-shadow: 0 0 0 1px var(--yellow);
}
.rp-plan img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}
.rp-plan__precio {
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.rp-plan__nombre {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.rp-plan__desc {
  font-size: 0.75rem;
  color: var(--gray);
}
.rp-plan-error {
  font-size: 0.78rem;
  color: #ff7a7a;
  text-align: center;
}

/* ── Firma Digital ──────────────────────────── */
.rp-firma-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rp-firma-canvas {
  width: 100%;
  height: 200px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  border: 2px dashed rgba(255,182,18,0.4);
  cursor: crosshair;
  display: block;
  touch-action: none;
}
.rp-firma-canvas.has-error {
  border-color: #ff5a5a;
}
.rp-firma-hint {
  font-size: 0.72rem;
  color: var(--gray);
  text-align: center;
}
.rp-btn-limpiar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.05);
  color: var(--gray-light, #ccd6e0);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: var(--transition);
}
.rp-btn-limpiar:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

/* ── Carrito de pago (step 8) ────────────────── */
.rp-cart {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}

.rp-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 16px;
}

.rp-cart-item__info { flex: 1; min-width: 0; }

.rp-cart-item__nombre {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rp-cart-item__nombre i { color: var(--yellow); font-size: 0.85rem; }

.rp-cart-item__desc {
  color: var(--gray);
  font-size: 0.8rem;
  margin-bottom: 5px;
}

.rp-cart-item__fecha {
  font-size: 0.78rem;
  color: var(--gray);
}
.rp-cart-item__fecha strong { color: var(--white); }

.rp-cart-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.rp-cart-item__precio {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--yellow);
  white-space: nowrap;
}
.rp-cart-item__precio small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gray);
  margin-left: 2px;
}

.rp-cart-sep {
  height: 1px;
  background: var(--dark-border);
  margin: 0 16px;
}

/* ── Toggle online / presencial ─────────────── */
.rp-pago-toggle {
  display: flex;
  gap: 6px;
}

.rp-pago-opt { cursor: pointer; }

.rp-pago-opt input[type="radio"] { display: none; }

.rp-pago-opt span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--gray);
  transition: var(--transition);
  white-space: nowrap;
}

.rp-pago-opt input:checked + span {
  background: rgba(255,182,18,0.1);
  border-color: rgba(255,182,18,0.4);
  color: var(--yellow);
}

@media (max-width: 480px) {
  .rp-cart-item { flex-direction: column; }
  .rp-cart-item__side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* ── Stripe Card Element ─────────────────────── */
.rp-card-form {
  margin: 20px 0 4px;
  padding: 20px;
  background: rgba(255,182,18,0.04);
  border: 1px solid rgba(255,182,18,0.2);
  border-radius: 12px;
}
.rp-card-form__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yellow);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.rp-card-element {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px;
  transition: border-color 0.2s;
}
.rp-card-element--focused {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,182,18,0.15);
}
.rp-card-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 8px;
  min-height: 18px;
}

/* ── CURP status ─────────────────────────────── */
.rp-curp-status {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--gray);
  pointer-events: none;
  transition: color 0.2s;
}
.rp-curp-status--ok      { color: #22c55e; }
.rp-curp-status--error   { color: #ef4444; }
.rp-curp-status--loading { color: var(--yellow); }

.rp-curp-msg {
  display: block;
  font-size: 0.75rem;
  margin-top: 5px;
  padding-left: 2px;
  min-height: 1rem;
}
.rp-curp-msg--ok    { color: #22c55e; }
.rp-curp-msg--error { color: #ef4444; }

/* ── Acciones columna ───────────────────────── */
.rp-actions--col {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.rp-actions--col .rp-btn-next,
.rp-actions--col .rp-btn-back,
.rp-actions--col .rp-btn-pdf {
  width: 100%;
  justify-content: center;
}

/* ── Botón PDF ───────────────────────────────── */
.rp-btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,182,18,0.08);
  color: var(--yellow);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,182,18,0.25);
  cursor: pointer;
  transition: var(--transition);
}
.rp-btn-pdf:hover {
  background: rgba(255,182,18,0.15);
  border-color: rgba(255,182,18,0.5);
}

/* ── Resumen de pago (step 8) ───────────────── */
.rp-resumen {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.rp-resumen-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  gap: 12px;
}
.rp-resumen-row:not(:last-child) {
  border-bottom: 1px solid var(--dark-border);
}
.rp-resumen-row--highlight {
  background: rgba(255,182,18,0.06);
}
.rp-resumen-label {
  color: var(--gray);
  font-size: 0.82rem;
  flex-shrink: 0;
}
.rp-resumen-value {
  font-weight: 600;
  font-size: 0.88rem;
  text-align: right;
  color: var(--white);
}
.rp-resumen-row--highlight .rp-resumen-value {
  color: var(--yellow);
}
.rp-resumen-nota {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray);
  font-size: 0.78rem;
  margin-bottom: 24px;
}
.rp-resumen-nota i { color: var(--yellow); font-size: 0.85rem; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 520px) {
  .rp-card { padding: 24px 16px 20px; }
  .rp-grid { grid-template-columns: 1fr; }
  .rp-header h1 { font-size: 1.3rem; }
}