/* Webform executive_check — Configuración > CSS/JS > CSS personalizado
   Se apoya en los estilos del tema (tarjeta gris, encabezado azul, inputs)
   y solo cambia lo necesario para el diseño nuevo. */

.webform-submission-executive-check-form [data-drupal-selector="edit-container"] {
  --azul-label: #002f87;
  --rojo: #e3262f;

  position: relative;
  display: grid;
  grid-template-columns: 38% 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 0 7%; /* el margen lateral que el tema ponía en cada campo */
}

/* Todo ocupa el ancho completo... */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

/* El encabezado sí va de borde a borde (8.14% = 7% del contenedor) */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > #edit-processed-text {
  margin-left: -8.14% !important;
  margin-right: -8.14% !important;
}

/* ...excepto estas parejas, que van lado a lado */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-pais,
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-tipo-de-documento {
  grid-column: 1;
}

.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-phone-number,
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-numero-de-documento {
  grid-column: 2;
}

/* Orden: "Tipo de chequeo" queda antes de T&C y del botón */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-t-c {
  order: 2;
}

.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-actions {
  order: 3;
}

/* ---------- Encabezado e intro (processed_text) ---------- */
.webform-submission-executive-check-form #edit-processed-text h2 {
  padding: 20px 16px;
  background: linear-gradient(180deg, #2e72a8 0%, #1d5f94 100%);
  border-radius: 18px 18px 0 0;
  font-family: "Figtree Bold 700", sans-serif;
  font-size: 20px;
}

.webform-submission-executive-check-form #edit-processed-text p {
  margin-top: 16px;
  font-family: "Figtree Bold 700", sans-serif;
  font-size: 14px;
  color: #222;
}

/* ---------- Labels y asterisco ---------- */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] .js-form-item > label {
  font-family: "Figtree Bold 700", sans-serif;
  font-size: 14px;
  color: var(--azul-label);
  white-space: nowrap;
}

.webform-submission-executive-check-form [data-drupal-selector="edit-container"] label.form-required::after {
  margin-left: 3px;
  color: var(--rojo) !important;
  vertical-align: baseline !important;
}

/* ---------- Inputs y selects ---------- */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] .form-control,
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] .form-select {
  font-size: 14px;
  border-color: #cfcfcf;
  border-radius: 6px;
  text-overflow: ellipsis;
}

/* ---------- Textos de ayuda ---------- */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] .description {
  display: block;
  margin-top: 6px;
  font-family: "Figtree SemiBold 600", sans-serif;
  font-size: 11px;
  color: var(--azul-label) !important;
}

/* La ayuda del celular arranca debajo de "País", como en el diseño */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-pais,
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-phone-number {
  position: static;
  margin-bottom: 36px !important;
}

.webform-submission-executive-check-form .form-item-phone-number .description {
  position: absolute;
  left: 7%;
  right: 7%;
}

/* ---------- T&C: checkbox en tarjeta blanca ---------- */
.webform-submission-executive-check-form [data-drupal-selector="edit-container"] > .form-item-t-c {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 22px;
  padding: 16px 14px;
  background: #fff;
  border-radius: 8px;
}

.webform-submission-executive-check-form .form-item-t-c .form-check-input {
  flex: 0 0 auto;
  float: none;
  width: 20px;
  height: 20px;
  margin: 0;
}

.webform-submission-executive-check-form .form-item-t-c .description {
  margin: 0 !important;
  font-family: "Figtree Regular", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5;
}

.webform-submission-executive-check-form .form-item-t-c .description a {
  color: var(--azul-label);
  text-decoration: underline;
}