:root{--brand:#8A1538;--brand-hover:#6f0f2c}
.bonita-gc-wrap{max-width:720px;margin:16px auto;padding:8px}
.bonita-gc-wrap h3{margin:6px 0 10px}
.bonita-gc-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.bonita-gc-form .row{grid-template-columns:1fr}}

/* --- ESTILOS DE ETIQUETA FLOTANTE (REEMPLAZA AL LABEL ORIGINAL) --- */
.bonita-gc-form .form-field {
  position: relative;
  margin: 16px 0 8px;
}
.bonita-gc-form input,
.bonita-gc-form textarea,
.bonita-gc-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d5d8e0;
  border-radius: 10px;
  background: #fff; /* Fondo sólido para tapar la etiqueta */
  box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
}
/* Posición de la etiqueta flotante */
.bonita-gc-form .form-field label {
  position: absolute;
  top: 10px;
  left: 12px;
  font-weight: 700;
  color: #64748b;
  pointer-events: none; /* Permite hacer clic "a través" de la etiqueta */
  transition: all 0.2s ease-out;
  background: #fff; /* Para que la etiqueta flotante tape el borde */
  padding: 0 4px;
}
/* Mueve la etiqueta si el input está enfocado O si no está vacío */
.bonita-gc-form input:focus + label,
.bonita-gc-form input:not(:placeholder-shown) + label,
.bonita-gc-form textarea:focus + label,
.bonita-gc-form textarea:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: var(--brand); /* Color de marca al flotar */
}
/* *** CORRECCIÓN: Selector simple para forzar el flote en 'date' *** */
.bonita-gc-form input[type="date"] + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
}
/* --- FIN DE ESTILOS FLOTANTES --- */

.choices{display:flex;gap:12px;flex-wrap:wrap}
.chip{border:1.5px solid #d5d8e0;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer;background:#fff;color:#111}
.chip.selected{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn{border:none;border-radius:10px;padding:10px 16px;font-weight:800;background:var(--brand);color:#fff;cursor:pointer;opacity:1}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn:hover{background:var(--brand-hover)}
.btn.primary{background:var(--brand);color:#fff}
.actions{margin-top:10px;display:flex;gap:10px}
.gc-errors{margin-top:10px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;padding:10px;border-radius:8px}
.hint,.help{color:#64748b;font-size:13px;margin:6px 0}
.err{display:block;color:#b91c1c;font-size:12px;margin-top:4px;min-height:14px}

/* --- ESTILOS PARA EL STEPPER --- */
.bonita-gc-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  text-align: center;
}
.step-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #94a3b8; /* Color gris */
  font-weight: 700;
  font-size: 14px;
  width: 80px;
}
.step-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9; /* Fondo gris claro */
  color: #94a3b8;
  margin-bottom: 6px;
  border: 2px solid #f1f5f9;
  font-weight: 800;
}
.step-item.active {
  color: var(--brand); /* Color de tu marca */
}
.step-item.active span {
  background: #fff;
  border-color: var(--brand); /* Borde de tu marca */
  color: var(--brand);
}
.step-divider {
  flex-grow: 1;
  height: 2px;
  background: #f1f5f9; /* Línea divisoria gris */
  margin: 16px 4px 0;
}

/* --- ESTILOS DE FOCO Y ERROR --- */
.bonita-gc-form input:focus, .bonita-gc-form textarea:focus, .bonita-gc-form select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(138, 21, 56, 0.1); /* Sombra suave con tu color de marca */
  outline: none; /* Quitar el feo borde azul de Chrome */
}
.bonita-gc-form input.is-invalid, .bonita-gc-form textarea.is-invalid {
  border-color: #b91c1c; /* Rojo de error */
  background: #fef2f2; /* Fondo rojo muy claro */
}

/* --- ESTILO BOTÓN SECUNDARIO --- */
.btn.btn-secondary {
  background: #fff;
  color: #475569; /* Un gris oscuro */
  border: 1.5px solid #d5d8e0; /* Borde gris claro */
}
.btn.btn-secondary:hover {
  background: #f8fafc; /* Un fondo gris muy claro al pasar el mouse */
  color: #1e293b;
}