/**
 * form-premium-tokens.css
 * 
 * Sobrescribe colores hardcoded de form-premium.css con tokens de DESIGN.md
 * Mantiene forma de forma-premium.css pero aplica paleta consistente
 * 
 * Incluir DESPUÉS de form-premium.css en frontend.libraries.yml
 */

/* =========================================================================
   FORM CONTROLS — reemplazar borders y focus con tokens
   ========================================================================= */

.form-control,
.form-select,
.form-control-camp,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

.form-control:focus,
.form-select:focus,
.form-control-camp:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--green-brand);
  box-shadow: var(--shadow-focus);
  background: var(--bg-hover);
}

.form-control::placeholder,
.form-control-camp::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/* =========================================================================
   CARDS EN FORMULARIOS
   ========================================================================= */

.checkout-card,
.form-card,
.list-group-item {
  border-color: var(--border);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

.checkout-card:hover,
.form-card:hover,
.list-group-item:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--green-brand);
}

.checkout-card.selected,
.form-card.selected,
.list-group-item.selected {
  border-color: var(--green-brand);
  background: linear-gradient(135deg, var(--bg-hover), var(--green-bg));
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15);
}

/* =========================================================================
   BOTONES EN FORMULARIOS
   ========================================================================= */

.btn-primary-camp,
.btn-camp-primary,
.form-submit-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--green-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-body);
}

.btn-primary-camp:hover,
.btn-camp-primary:hover,
.form-submit-primary:hover {
  box-shadow: var(--shadow-cta-hover);
  transform: var(--hover-lift);
}

.btn-green,
.btn-camp-secondary {
  background: var(--green-brand);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.btn-green:hover,
.btn-camp-secondary:hover {
  background: var(--green-light);
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

/* =========================================================================
   CHECKBOXES Y RADIOS (accordions, steps)
   ========================================================================= */

.accordion-step-form-enabled .accordion-button::before {
  background: var(--green-brand);
  color: white;
}

.accordion-step-form-prev .accordion-button::before,
.accordion-step-form-completed .accordion-button::before {
  background: var(--green-brand);
  color: white;
}

.accordion-button:not(.collapsed) {
  background: var(--green-bg);
  color: var(--text);
  border-color: var(--green-brand);
}

/* =========================================================================
   TÍTULOS Y TEXTO EN FORMULARIOS
   ========================================================================= */

.form-title,
.form-heading {
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
}

.form-label,
label {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-body);
}

.form-text,
.form-helper {
  color: var(--text-sec);
  font-size: 0.875rem;
}

.form-error,
.invalid-feedback {
  color: var(--red-urgency);
  font-size: 0.875rem;
}

/* =========================================================================
   BANNERS Y ALERTAS EN FORMULARIOS
   ========================================================================= */

.alert-info {
  background: var(--green-bg);
  border: 1px solid var(--green-light);
  color: var(--green-dark);
}

.alert-warning {
  background: linear-gradient(90deg, rgba(192, 57, 43, 0.05), rgba(231, 76, 60, 0.05));
  border: 1px solid var(--red-urgency);
  color: var(--red-urgency);
}

.alert-success {
  background: var(--green-bg);
  border: 1px solid var(--green-light);
  color: var(--green-dark);
}

/* =========================================================================
   OVERRIDE DE form-premium.css HARDCODED COLORS
   ========================================================================= */

/* Reemplazo de #2D5016 (green-dark) */
.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.left {
  color: var(--green-dark);
}

/* Reemplazo de #8BA841 (green-brand) */
.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.right {
  color: var(--green-brand);
}

/* Reemplazo de #777 (text-muted) */
.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg .description {
  color: var(--text-muted);
}

/* Reemplazo de #e8e8e8 (border) */
.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg,
.checkout-card,
.form-card {
  border-color: var(--border);
}

/* Reemplazo de #fff (bg) */
.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg,
.checkout-card,
.form-card {
  background: var(--bg);
}

/* =========================================================================
   RESPONSIVE TOKENS
   ========================================================================= */

@media (max-width: 768px) {
  .form-control,
  .form-select,
  .form-control-camp {
    font-size: 1rem; /* prevenir zoom en iOS */
  }

  .btn-primary-camp,
  .btn-camp-primary {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
  }
}

@media (min-width: 992px) {
  .form-control-camp {
    min-height: 44px;
  }
}