/* JG Inscripciones — public/css/form.css */

.jgins-stepper {
  --ro: #CE1126; --ro-d: #A50D1E; --ro-l: #FDECEA;
  --ma: #1B2A4A; --ma-l: #E8EDF5;
  --cr: #F7F3EE;
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1A1A1A;
}

/* ── Stepper header ── */
.jgins-stepper-header {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 2rem;
}
.jgins-stepper-header::before {
  content: '';
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  height: 1.5px;
  background: #E5DDD2;
  z-index: 0;
}
.jgins-step-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 1;
  padding: 0 8px;
  transition: opacity .2s;
}
.jgins-step-tab.inactive { opacity: .4; }
.jgins-step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  border: 2px solid #E5DDD2;
  background: #fff;
  color: #7A7A7A;
  transition: all .2s;
}
.jgins-step-tab.active .jgins-step-circle { background: var(--ro); border-color: var(--ro); color: #fff; }
.jgins-step-tab.done   .jgins-step-circle { background: var(--ma); border-color: var(--ma); color: #fff; }
.jgins-step-label { font-size: 12px; font-weight: 500; color: #7A7A7A; text-align: center; line-height: 1.3; }
.jgins-step-tab.active .jgins-step-label { color: var(--ro); }
.jgins-step-tab.done   .jgins-step-label { color: var(--ma); }

/* ── Panels ── */
.jgins-panel { display: none; }
.jgins-panel.active { display: block; }

/* ── Typography ── */
.jgins-eyebrow {
  font-size: 10.5px; font-weight: 500; color: var(--ro);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .4rem;
  display: flex; align-items: center; gap: .4rem;
}
.jgins-eyebrow::before { content: ''; width: 12px; height: 2px; background: var(--ro); }
.jgins-panel-title { font-family: 'Merriweather', Georgia, serif; font-size: 17px; font-weight: 700; color: var(--ma); margin-bottom: 1.25rem; }

/* ── Form ── */
.jgins-form-section-title {
  font-size: 11px; font-weight: 600; color: #7A7A7A;
  text-transform: uppercase; letter-spacing: .1em;
  padding-bottom: .5rem; border-bottom: 1.5px solid var(--ma-l);
  margin-bottom: .85rem; margin-top: 1.25rem;
}
.jgins-form-section-title:first-of-type { margin-top: 0; }

.jgins-grid-1 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.jgins-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.jgins-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.jgins-mb     { margin-bottom: 12px; }

.jgins-fg { display: flex; flex-direction: column; gap: 4px; }
.jgins-fg label { font-size: 11.5px; font-weight: 500; color: #475569; letter-spacing: .03em; }
.jgins-req { color: var(--ro); }

.jgins-fg input,
.jgins-fg select,
.jgins-fg textarea {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #1A1A1A;
  background: #fff;
  width: 100%;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.jgins-fg input:focus,
.jgins-fg select:focus,
.jgins-fg textarea:focus {
  border-color: var(--ro);
  box-shadow: 0 0 0 2px rgba(206,17,38,.1);
}
.jgins-fg input.has-error,
.jgins-fg select.has-error,
.jgins-fg textarea.has-error { border-color: var(--ro) !important; }
.jgins-fg textarea { resize: vertical; min-height: 80px; }
.jgins-hint { font-size: 11px; color: #7A7A7A; margin-top: 2px; }

.jgins-radio-group { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 4px; }
.jgins-radio-opt { display: flex; align-items: center; gap: .4rem; font-size: 13px; color: #3D3D3D; cursor: pointer; }
.jgins-radio-opt input { width: auto; }

/* ── Callouts ── */
.jgins-callout {
  border-radius: 0 6px 6px 0;
  padding: .7rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 12.5px;
}
.jgins-callout--error   { background: var(--ro-l); border-left: 3px solid var(--ro); color: var(--ma); }
.jgins-callout--success { background: #EAF4EE; border-left: 3px solid #166534; color: #166534; }
.jgins-callout--navy    { background: var(--ma-l); border-left: 3px solid var(--ma); color: var(--ma); }

/* ── Deadline strip ── */
.jgins-deadline-strip {
  background: var(--ro-l); border: 1px solid rgba(206,17,38,.22);
  border-radius: 7px; padding: .7rem 1rem;
  font-size: 12.5px; color: var(--ma);
  margin-bottom: 1.25rem;
}

/* ── Pricing grid ── */
.jgins-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .85rem; margin-bottom: 1.5rem; }
.jgins-p-card {
  background: #fff; border: 1px solid #E5DDD2;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s;
}
.jgins-p-card--ext  { border: 2px solid #0C447C; }
.jgins-p-card.highlighted { box-shadow: 0 0 0 3px var(--ro); }
.jgins-p-top  { background: var(--ma); padding: .9rem 1rem; }
.jgins-p-top--ext { background: #0C447C; }
.jgins-p-cat  { font-size: 10px; font-weight: 500; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.jgins-p-name { font-size: 12.5px; font-weight: 500; color: #fff; line-height: 1.35; margin-bottom: .5rem; }
.jgins-p-amount { font-size: 20px; font-weight: 500; color: #fff; font-family: 'Source Code Pro', monospace; }
.jgins-p-cur { font-size: 11px; font-weight: 400; margin-right: 2px; }
.jgins-p-body { padding: .75rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0; }
.jgins-p-tier {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .28rem 0; border-bottom: 1px solid #F0F0F0;
  font-size: 11.5px; color: #7A7A7A;
}
.jgins-p-tier:last-of-type { border-bottom: none; margin-bottom: .7rem; }
.jgins-promo { color: var(--ro); font-weight: 500; font-family: 'Source Code Pro', monospace; font-size: 12px; }

/* ── Billing section ── */
.jgins-billing {
  margin: 1.5rem 0 1.25rem;
  border: 1px solid #E5DDD2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px -14px rgba(27,42,74,.35);
}
.jgins-billing-head {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(100deg, var(--ma) 0%, #2D4270 100%);
  color: #fff;
  padding: .8rem 1.15rem;
}
.jgins-billing-head__icon { font-size: 18px; line-height: 1; }
.jgins-billing-head__title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.jgins-billing-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: #E5DDD2;
}
.jgins-b-card {
  background: #fff; padding: 1.05rem 1.15rem;
  position: relative; transition: background .18s;
}
.jgins-b-card::before {
  content: ''; position: absolute; left: 0; top: 1.05rem; bottom: 1.05rem;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--ro);
  opacity: .85;
}
.jgins-b-card:hover { background: var(--cr); }
.jgins-b-title {
  font-size: 13px; font-weight: 700; color: var(--ma);
  margin-bottom: .35rem; padding-left: .55rem;
}
.jgins-b-text  { font-size: 12px; color: #3D3D3D; line-height: 1.55; padding-left: .55rem; }
.jgins-b-text a { color: var(--ro); text-decoration: none; font-weight: 600; }
.jgins-b-text a:hover { text-decoration: underline; }

/* ── Instructivo de pago (exterior) ── */
.jgins-instructivo {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(100deg, #EAF1FB 0%, #F4F8FE 100%);
  border: 1.5px solid #0C447C;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 20px -14px rgba(12,68,124,.6);
}
.jgins-instructivo__icon { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.jgins-instructivo__body { flex: 1; min-width: 0; }
.jgins-instructivo__title { font-size: 14px; font-weight: 700; color: #0C447C; margin-bottom: .35rem; }
.jgins-instructivo__text  { margin: 0; font-size: 12.5px; color: #3D3D3D; line-height: 1.55; }
.jgins-instructivo__text a { color: #0C447C; font-weight: 600; text-decoration: underline; }
.jgins-instructivo__nota {
  margin-top: .55rem; padding-top: .55rem;
  border-top: 1px solid rgba(12,68,124,.2);
}
.jgins-instructivo__nota p { margin: 0 0 .4rem; font-size: 11.5px; color: #3D3D3D; line-height: 1.5; }
.jgins-instructivo__nota p:last-child { margin-bottom: 0; }
.jgins-instructivo__nota a { color: #0C447C; font-weight: 600; text-decoration: underline; }
.jgins-instructivo__btn { align-self: center; }
.jgins-instructivo__btn {
  background: #0C447C; color: #fff; flex-shrink: 0; white-space: nowrap;
  font-weight: 600;
}
.jgins-instructivo__btn:hover { background: #083460; color: #fff; }

/* ── Buttons ── */
.jgins-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: .62rem 1.4rem; border-radius: 5px;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .18s, color .18s;
}
.jgins-btn--primary  { background: var(--ro); color: #fff; }
.jgins-btn--primary:hover { background: var(--ro-d); color: #fff; }
.jgins-btn--pay      { background: var(--ma); color: #fff; margin-top: auto; justify-content: center; }
.jgins-btn--pay:hover { background: #2D4270; color: #fff; }
.jgins-btn--pay-ext  { background: #0C447C; }
.jgins-btn--pay-ext:hover { background: #083460; }
.jgins-btn--outline  { background: transparent; color: var(--ma); border: 1.5px solid var(--ma); }
.jgins-btn--outline:hover { background: var(--ma); color: #fff; }
.jgins-btn:disabled  { opacity: .6; cursor: not-allowed; }

.jgins-submit-row { display: flex; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #E5DDD2; }
.jgins-nav-row    { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #E5DDD2; }

/* ── Tarjeta deshabilitada (categoría no elegida) ── */
.jgins-p-card--disabled { opacity: .5; filter: grayscale(.55); transition: opacity .2s, filter .2s; }
.jgins-p-card--disabled .jgins-btn--pay {
  pointer-events: none; cursor: not-allowed;
  background: #9AA3B0; color: #fff;
}
.jgins-p-card--disabled .jgins-btn--pay::after { content: ' (no disponible)'; font-weight: 400; font-size: 11px; }

/* ── Highlighted card (selected tipo) ── */
.jgins-p-card.highlighted .jgins-p-top { position: relative; }
.jgins-p-card.highlighted .jgins-p-top::after {
  content: '▼ Tu categoría';
  position: absolute; top: 8px; right: 10px;
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.8);
  letter-spacing: .05em;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .jgins-grid-2, .jgins-grid-3 { grid-template-columns: 1fr; }
  .jgins-pricing-grid, .jgins-billing-grid { grid-template-columns: 1fr; }
  .jgins-nav-row { flex-direction: column; gap: .75rem; }
  .jgins-btn--outline { width: 100%; justify-content: center; }
  .jgins-instructivo { flex-direction: column; align-items: flex-start; text-align: left; }
  .jgins-instructivo__btn { width: 100%; justify-content: center; }
}

/* ── Radio option con precio ── */
.jgins-radio-price {
  font-size: 11px;
  font-weight: 500;
  color: var(--ro);
  background: var(--ro-l);
  border: 1px solid rgba(206,17,38,.2);
  border-radius: 3px;
  padding: 1px 7px;
  margin-left: 4px;
  font-family: 'Source Code Pro', monospace;
}

/* ══ Pantalla de confirmación ══ */
.jgins-confirmacion {
  text-align: center;
  padding: 1rem 0 2rem;
  max-width: 580px;
  margin: 0 auto;
}
.jgins-confirmacion__icono {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #EAF4EE;
  color: #166534;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
  border: 2px solid #166534;
}
.jgins-confirmacion__titulo {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ma);
  margin-bottom: .45rem;
}
.jgins-confirmacion__sub {
  font-size: 14px;
  color: #3D3D3D;
  margin-bottom: 1.5rem;
}

/* Aviso pago pendiente */
.jgins-confirmacion__aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #FDECEA;
  border: 1px solid rgba(206,17,38,.2);
  border-left: 4px solid var(--ro);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.1rem;
  margin-bottom: 1.75rem;
  text-align: left;
}
.jgins-confirmacion__aviso-icon {
  font-size: 20px;
  color: var(--ro);
  flex-shrink: 0;
  line-height: 1.3;
}
.jgins-confirmacion__aviso p {
  font-size: 13px;
  color: #3D3D3D;
  margin: .35rem 0 0;
  line-height: 1.55;
}
.jgins-confirmacion__aviso strong {
  color: var(--ma);
  font-size: 13.5px;
}

/* Pasos visuales */
.jgins-confirmacion__pasos {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 2rem;
  padding: 1.25rem 1rem;
  background: var(--cr);
  border-radius: 10px;
  border: 1px solid #E5DDD2;
}
.jgins-confirmacion__paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 .5rem;
}
.jgins-confirmacion__paso-linea {
  width: 40px;
  height: 2px;
  background: #E5DDD2;
  flex-shrink: 0;
  margin-top: 18px;
}
.jgins-confirmacion__paso-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jgins-confirmacion__paso-num--done {
  background: #166534;
  color: #fff;
  border: 2px solid #166534;
}
.jgins-confirmacion__paso-num--pending {
  background: #fff;
  color: #7A7A7A;
  border: 2px solid #E5DDD2;
}
.jgins-confirmacion__paso-titulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ma);
}
.jgins-confirmacion__paso-desc {
  font-size: 11.5px;
  color: #7A7A7A;
  line-height: 1.4;
}

/* Acciones */
.jgins-confirmacion__acciones {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 500px) {
  .jgins-confirmacion__pasos { flex-direction: column; align-items: center; gap: 8px; }
  .jgins-confirmacion__paso-linea { width: 2px; height: 24px; margin: 0; }
  .jgins-confirmacion__paso { flex-direction: row; text-align: left; }
}

/* ══ Bloque éxito + aviso pago (arriba del paso 2) ══ */
.jgins-exito-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #EAF4EE;
  border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: .85rem;
}
.jgins-exito-box__check {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #166534;
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jgins-exito-box__titulo {
  font-size: 14px;
  font-weight: 600;
  color: #166534;
  margin-bottom: .2rem;
}
.jgins-exito-box__sub {
  font-size: 13px;
  color: #3D3D3D;
  line-height: 1.5;
}

.jgins-aviso-pago {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #FDECEA;
  border-left: 4px solid var(--ro);
  border-radius: 0 7px 7px 0;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 13px;
}
.jgins-aviso-pago__icon {
  font-size: 18px;
  color: var(--ro);
  flex-shrink: 0;
  line-height: 1.35;
}
.jgins-aviso-pago strong {
  color: var(--ma);
  display: block;
  margin-bottom: .25rem;
  font-size: 13.5px;
}
.jgins-aviso-pago p {
  margin: 0;
  color: #3D3D3D;
  line-height: 1.5;
}

/* ── Badge gratuito en el radio ── */
.jgins-radio-price--free {
  background: #EAF4EE;
  border-color: rgba(22,101,52,.25);
  color: #166534;
  font-family: var(--font-sans, inherit);
  font-size: 11px;
}

/* ── Aviso inscripción gratuita ── */
.jgins-aviso-gratuito {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #EAF4EE;
  border-left: 4px solid #166534;
  border-radius: 0 7px 7px 0;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 13px;
}
.jgins-aviso-gratuito__icon {
  font-size: 18px;
  color: #166534;
  flex-shrink: 0;
  line-height: 1.35;
}
.jgins-aviso-gratuito strong {
  color: #166534;
  display: block;
  margin-bottom: .25rem;
  font-size: 13.5px;
}
.jgins-aviso-gratuito p {
  margin: 0;
  color: #3D3D3D;
  line-height: 1.5;
}