/* Maquetación genérica para el subform del campo field_efs_client (paragraph EFS).
 * Coloca los campos del grupo "group_efs" en formato tabla a dos columnas.
 *
 * Se selecciona por prefijo/substring del id para que sea independiente del
 * delta del widget, del tipo de widget (paragraphs "subform" o inline entity
 * form "inline-entity-form") y del sufijo aleatorio que añade Drupal al id.
 *   ej: edit-field-efs-client-widget-entities-0-form-inline-entity-form-group-efs--aIUUd_mmkR0
 */

/* Contenedor del grupo: rejilla a dos columnas. */
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .details-wrapper,
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .claro-details__wrapper,
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .fieldset-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gin-spacing-xs, 8px) var(--gin-spacing-l, 24px);
  align-items: start;
}

/* Cada campo se comporta como una fila de tabla: etiqueta | valor. */
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .details-wrapper > .form-item,
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .claro-details__wrapper > .form-item,
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .fieldset-wrapper > .form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gin-spacing-s, 12px);
  margin: 0;
  padding: var(--gin-spacing-xs, 8px) var(--gin-spacing-s, 12px);
  border-bottom: 1px solid var(--gin-border-color-layer2, #e0e0e0);
}

/* Etiqueta del campo: columna izquierda flexible. */
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] .form-item > label,
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] .form-item > .form-item__label {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

/* Valor del campo: columna derecha de ancho fijo. */
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] .form-item input,
.gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] .form-item .form-element {
  flex: 0 0 auto;
  width: 120px;
  max-width: 45%;
  text-align: right;
}

/* En pantallas estrechas, una sola columna. */
@media (max-width: 768px) {
  .gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .details-wrapper,
  .gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .claro-details__wrapper,
  .gin--edit-form [id^="edit-field-efs-client"][id*="group-efs"] > .fieldset-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}