/* ==========================================================================
   03. COMPONENTES Y CAMPOS (SOBRESCRIBIENDO JETFORMBUILDER)
   ========================================================================== */

/* ── 1. Etiquetas de los campos (Labels: "FECHA", "OBRA", "CLIENTE") ── */
.jet-form-builder__label {
  display: block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gris);
  margin-bottom: 2px;
}

/* ── 2. Campos de entrada (Inputs y Selects "estilo línea") ── */
.jet-form-builder__field {
  display: block; width: 100%; min-width: 0; min-height: 44px;
  padding: 6px 0;
  font-size: 16px; font-weight: 500; color: var(--tinta);
  font-variant-numeric: tabular-nums;
  background: transparent; 
  border: 0; 
  border-bottom: 0.75px solid var(--linea); /* El borde fino inferior */
  border-radius: 0; outline: none;
  transition: box-shadow 120ms var(--curva);
}

/* ── REPARACIÓN GLOBAL SELECT2 (CAJA Y DESPLEGABLE FLOTANTE) ── */

/* 1. Destruir cualquier restricción de ancho de Gutenberg al contenedor */
.jet-form-builder-row:has(.select2),
.jet-form-builder__field-wrap:has(.select2) {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* 2. Forzar al Select2 a ocupar todo ese 100% disponible */
span.select2.select2-container {
  width: 100% !important;
  min-width: 100% !important;
  display: block !important;
}

/* 3. Estilo minimalista de la línea inferior */
.select2-container .select2-selection--single {
  border: 0 !important;
  border-bottom: 0.75px solid var(--linea) !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container .select2-selection__rendered {
  padding-left: 0 !important;
  font-size: 16px !important;
  color: var(--tinta) !important;
  width: 100% !important;
}

/* 4. Arreglo del menú flotante de opciones */
.select2-container .select2-dropdown {
  min-width: 100% !important;
  width: auto !important;
  border: 1px solid var(--linea) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  background: #ffffff !important;
  z-index: 99999 !important;
}

/* 5. Arreglo de la caja de búsqueda interna (El cuadrado blanco feo) */

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--linea) !important;
  border-radius: 4px !important;
  padding: 6px !important;
  outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--amarillo) !important;
}

/* 6. Limpieza de la lista y el efecto amarillo (Hover) */
.select2-container .select2-results__options {
  padding: 0 !important;
  margin: 0 !important;
}
.select2-container .select2-results__option {
  padding: 12px 16px !important;
  font-size: 15px !important;
  color: var(--tinta) !important;
  background: transparent !important;
}
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option:hover,
.select2-container .select2-results__option[aria-selected="true"] {
  background-color: var(--amarillo) !important;
  color: var(--tinta) !important;
}

/* El efecto al tocar un campo (Foco amarillo) */
.jet-form-builder__field:focus { 
  box-shadow: inset 0 -2px 0 var(--amarillo); 
}

/* Estilo para los placeholders (textos de ejemplo) */
.jet-form-builder__field::placeholder { 
  color: var(--vacio); 
  opacity: 1; 
}


/* 4. Arreglo del menú flotante de opciones (Fuera del formulario) */
body > .select2-container--open {
  min-width: 320px !important; /* Ancho mínimo forzado para que no se comprima */
  width: max-content !important; /* Si el nombre de la obra es muy largo, crecerá para adaptarse */
}

.select2-container .select2-dropdown {
  width: 100% !important;
  border: 1px solid var(--linea) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  background: #ffffff !important;
  z-index: 99999 !important;
}


/* ── FUERZA BRUTA PARA EL ANCHO DEL MENÚ DESPLEGABLE SELECT2 ── */

/* 1. Forzar el contenedor flotante a tener un ancho decente siempre */
.select2-container .select2-dropdown {
  width: max-content !important; 
  min-width: 300px !important; /* Ancho mínimo forzado para que no se colapse */
  max-width: 95vw !important; /* Para que no se salga por los lados en móviles pequeños */
  border: 1px solid var(--linea) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* 2. Forzar a la caja de búsqueda interna a ocupar ese nuevo espacio */
.select2-search--dropdown {
  display: block !important;
  width: 100% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

.select2-search--dropdown .select2-search__field {
  width: 100% !important;
  min-width: 300px !important; /* Forzamos también el input */
  box-sizing: border-box !important;
  border: 1px solid var(--linea) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}


/* ── 5. Tarjetas (Cajas Blancas) y Secciones ── */
.seccion { padding: 20px 16px 8px; display: flex; flex-direction: column; gap: 6px; }
.seccion-linea { display: flex; align-items: baseline; gap: 8px; }
.seccion-num { font-size: 12px; font-weight: 700; color: var(--amarillo); letter-spacing: 0.06em; }
.seccion-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta); }
.seccion-raya { width: 40px; height: 3px; background: var(--amarillo); }

.tarjeta { background: var(--blanco); border: 0.75px solid var(--linea); margin: 0 16px; }
.tarjeta--form { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 10px; }

/* ── 6. Píldora [AUTO] (Ajustado al HTML de JetFormBuilder) ── */

/* Apuntamos al contenedor padre que tiene dentro nuestro input .campo-auto */
.jet-form-builder__field-wrap:has(.campo-auto) {
  position: relative !important;
}

/* Le inyectamos la píldora al contenedor padre */
.jet-form-builder__field-wrap:has(.campo-auto)::after {
  content: "AUTO" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 1px 5px !important;
  font-size: 9px !important; 
  font-weight: 700 !important; 
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--amarillo-pulsado) !important;
  border: 1px solid var(--amarillo) !important;
  border-radius: 2px !important;
  background: var(--blanco) !important;
  pointer-events: none !important;
}

/* Forzar el estilo gris y discontinuo directamente en el input */
input.campo-auto, 
input.campo-auto::placeholder {
  color: var(--vacio) !important;
  border-bottom-style: dashed !important;
  padding-right: 42px !important; /* Hueco para la píldora */
  opacity: 1 !important;
}

/* ── 7. Barra Inferior Fija (Siguiente, Anterior y ENVIAR) ── */

/* Congelamos abajo los contenedores de navegación y de envío final */
.jet-form-builder__next-page-wrap,
.jet-form-builder-page-break__buttons,
.jet-form-builder__submit-wrap {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 480px !important;
  display: flex !important;
  gap: 10px !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
  background: var(--blanco) !important;
  border-top: 1.5px solid var(--linea) !important;
  box-shadow: var(--sombra-barra) !important;
  z-index: 99 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Estilo del botón PRINCIPAL (Siguiente y ENVIAR PARTE) */
button.jet-form-builder__next-page,
.jet-form-builder-page-break__buttons .jet-form-builder__action-button--next,
button.jet-form-builder__action-button[type="submit"] {
  flex: 1.5 !important;
  width: 100% !important;
  min-height: 48px !important; 
  padding: 0 12px !important;
  font-size: 13px !important; 
  font-weight: 700 !important; 
  letter-spacing: 0.08em !important; 
  text-transform: uppercase !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--amarillo) !important; 
  color: var(--tinta) !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background 160ms var(--curva) !important;
}

button.jet-form-builder__next-page:hover,
button.jet-form-builder__next-page:active,
.jet-form-builder-page-break__buttons .jet-form-builder__action-button--next:hover,
.jet-form-builder-page-break__buttons .jet-form-builder__action-button--next:active,
button.jet-form-builder__action-button[type="submit"]:hover,
button.jet-form-builder__action-button[type="submit"]:active {
  background: var(--amarillo-pulsado) !important;
}

/* Estilo del botón SECUNDARIO (Anterior) */
.jet-form-builder-page-break__buttons .jet-form-builder__action-button--prev,
button.jet-form-builder__prev-page {
  flex: 1 !important;
  min-height: 48px !important; 
  font-size: 13px !important; 
  font-weight: 700 !important; 
  letter-spacing: 0.08em !important; 
  text-transform: uppercase !important;
  background: var(--blanco) !important; 
  color: var(--tinta) !important;
  border: 1.5px solid var(--tinta) !important; 
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ── 8. Ocultar la barra de progreso nativa de JFB ── */
div[class*="jet-form-builder-progress"] {
  display: none !important;
}

/* ── 9. El aniquilador de botones fantasma ── */
/* Si JFB marca una página como oculta, forzamos que sus botones fijos también desaparezcan */
.jet-form-builder-page--hidden .jet-form-builder__next-page-wrap,
.jet-form-builder-page--hidden .jet-form-builder-page-break__buttons {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── 10. REPETIDOR: Tarjetas y Títulos Automáticos ── */
.jet-form-builder-repeater {
  padding: 16px 16px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.jet-form-builder-repeater__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  counter-reset: trabajador;
  width: 100% !important;
}

/* La Tarjeta Blanca */
.jet-form-builder-repeater__row {
  background: var(--blanco) !important;
  border: 0.75px solid var(--linea) !important;
  padding: 44px 14px 16px !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  counter-increment: trabajador;
}

/* Título "01 TRABAJADOR" */
.jet-form-builder-repeater__row::before {
  content: "0" counter(trabajador) "\00a0\00a0TRABAJADOR";
  position: absolute !important;
  top: 16px !important;
  left: 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--amarillo) !important;
  letter-spacing: 0.1em !important;
}

/* Botón X de eliminar */
.jet-form-builder-repeater__row-remove button {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--gris) !important; 
  font-size: 18px !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

/* ── 11. REJILLAS Y CAMPOS (Fila 1 y Fila 2) ── */
/* ── Fila 1: Nombre | Función | RP ── */
/* ── 11. REJILLAS Y CAMPOS (Fila 1 y Fila 2) ── */
/* ── Fila 1: Nombre | Función | RP ── */
.fila-trabajador .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 1. ELIMINAR MÁRGENES NATIVOS y empujar hacia el fondo */
.fila-trabajador .jet-form-builder-row {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Ocultamos CONTENEDOR completo de etiquetas nativas para no ocupar espacio invisible */
.fila-trabajador .jet-form-builder__label { 
  display: none !important; 
}

/* 2. Forzamos a que Select2 y el Select nativo (Función) midan exactamente 30px */
.fila-trabajador select,
.fila-trabajador .select2-container { 
  width: 100% !important; 
  max-width: 100% !important; 
  height: 30px !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 3. Estilos de la caja interna de Select2 (Nombre) */
.fila-trabajador .select2-container--default .select2-selection--single {
  height: 30px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--linea) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Estilo del Select nativo (Función) */
.fila-trabajador select {
  padding: 0 2px !important;
  font-size: 13px !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--linea) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Truncado de nombres largos en Select2 */
.fila-trabajador .select2-selection__rendered { 
  overflow: hidden !important; 
  text-overflow: ellipsis !important; 
  white-space: nowrap !important; 
  padding-right: 12px !important; 
}

/* Botón RP Cuadrado */
.field-type-checkbox-field:has(.campo-rp) { margin: 0 !important; padding: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; }
.field-type-checkbox-field:has(.campo-rp) input[type="checkbox"], .field-type-checkbox-field:has(.campo-rp) span { display: none !important; }
.field-type-checkbox-field:has(.campo-rp) label { margin: 0 !important; padding: 0 !important; display: block !important; width: 32px !important; height: 32px !important; }
.field-type-checkbox-field:has(.campo-rp) label::before { content: "RP" !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: #f0f0f0 !important; color: var(--gris) !important; font-size: 11px !important; font-weight: bold !important; border: 1px solid var(--linea) !important; border-radius: 2px !important; cursor: pointer !important; box-sizing: border-box !important; }
.field-type-checkbox-field:has(.campo-rp) label:has(input:checked)::before { background: var(--amarillo) !important; color: var(--tinta) !important; border-color: var(--amarillo) !important; }

/* ── FILA 2: LAS 4 HORAS ── */

.fila-horas {
  grid-column: 1 / -1 !important; /* 🔥 LA LÍNEA MÁGICA: Obliga a ocupar todas las columnas del grid superior */
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 16px !important;
}

.fila-horas .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
}

.fila-horas .jet-form-builder-row {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Machacamos cualquier ancho en línea que JFB intente imponer */
.fila-horas .jet-form-builder__field-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── ETIQUETAS M·ENT, M·SAL, T·ENT, T·SAL ── */
.fila-horas .jet-form-builder__label {
  margin-bottom: 4px !important;
  display: block !important;
}
.fila-horas .jet-form-builder__label-text { 
  display: none !important; /* Oculta el texto original "Entrada/Salida" */
}

/* Inyectamos las nuevas etiquetas encima de cada campo */
.field-type-select-field:has(.hora-ment) .jet-form-builder__label::before { content: "M·ENT" !important; font-size: 10px !important; font-weight: 700 !important; color: var(--gris) !important; letter-spacing: 0.5px !important;}
.field-type-select-field:has(.hora-msal) .jet-form-builder__label::before { content: "M·SAL" !important; font-size: 10px !important; font-weight: 700 !important; color: var(--gris) !important; letter-spacing: 0.5px !important;}
.field-type-select-field:has(.hora-tent) .jet-form-builder__label::before { content: "T·ENT" !important; font-size: 10px !important; font-weight: 700 !important; color: var(--gris) !important; letter-spacing: 0.5px !important;}
.field-type-select-field:has(.hora-tsal) .jet-form-builder__label::before { content: "T·SAL" !important; font-size: 10px !important; font-weight: 700 !important; color: var(--gris) !important; letter-spacing: 0.5px !important;}

/* Inputs estilo minimalista con línea inferior */
.fila-trabajador select, .fila-horas select { padding: 6px 2px !important; font-size: 13px !important; border: 0 !important; border-bottom: 1.5px solid var(--linea) !important; border-radius: 0 !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; }
.fila-trabajador .select2-container--default .select2-selection--single { border: 0 !important; border-bottom: 1.5px solid var(--linea) !important; border-radius: 0 !important; background: transparent !important; height: 30px !important; }


/* ── 12. CAMPOS OCULTOS Y TOTAL FLOTANTE ── */
.oculto {
  display: none !important;
}

/* FIX: Usamos las clases específicas de text-field o number-field para NO atrapar al Repetidor entero */
.field-type-text-field:has(.campo-total),
.field-type-number-field:has(.campo-total) {
  position: absolute !important;
  top: 15px !important; 
  right: 40px !important; 
  width: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
}

/* Si existiera la etiqueta nativa, la ocultamos */
.field-type-text-field:has(.campo-total) .jet-form-builder__label,
.field-type-number-field:has(.campo-total) .jet-form-builder__label { 
  display: none !important; 
}

/* Estilos aplicados DIRECTAMENTE al input */
.campo-total {
  background: transparent !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tinta) !important;
  text-align: right !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important; /* Lo hace intocable, solo lectura */
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Magia para ocultar las flechas por si alguna vez vuelve a ser número */
.campo-total::-webkit-inner-spin-button, 
.campo-total::-webkit-outer-spin-button { 
  -webkit-appearance: none !important; 
  margin: 0 !important; 
}
input[type="number"].campo-total {
  -moz-appearance: textfield !important;
  appearance: none !important;
}

/* Botón + AÑADIR TRABAJADOR */
.jet-form-builder-repeater__add,
.jet-form-builder-repeater__new {
  width: 100% !important; 
  margin-top: 16px !important; 
  margin-bottom: 32px !important;
  background: transparent !important; 
  border: 1.5px dashed var(--gris) !important;
  color: var(--tinta) !important; 
  padding: 14px !important;
  font-size: 12px !important; 
  font-weight: 700 !important; 
  letter-spacing: 0.1em !important; 
  text-transform: uppercase !important; 
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* ── 13. NUEVA ESTRUCTURA: FUNCIÓN + RP ── */
.fila-funcion-rp .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: 1fr 32px !important;
  gap: 12px !important;
  align-items: end !important;
  width: 100% !important;
  margin-bottom: 15px !important;
}
.fila-funcion-rp .jet-form-builder-row { margin: 0 !important; }

/* ── 14. DESPLAZAMIENTO (PÍLDORAS) ── */
/* 1. Ocultar el botón circular real */
input.campo-rol-pildoras {
  display: none !important;
}
/* 2. Forzar alineación horizontal (anula el flex-col nativo de JFB) */
.field-type-radio-field:has(.campo-rol-pildoras) .jet-form-builder__fields-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
}
/* 3. Que cada opción ocupe la mitad del ancho */
.field-type-radio-field:has(.campo-rol-pildoras) .jet-form-builder__field-wrap {
  flex: 1 !important;
  margin: 0 !important;
}
/* 4. Diseñar la Píldora (Label) */
.field-type-radio-field:has(.campo-rol-pildoras) label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--linea) !important;
  border-radius: 25px !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
/* 5. Matar el circulito de radio y pseudo-elementos nativos de JFB */
.field-type-radio-field:has(.campo-rol-pildoras) label span::before,
.field-type-radio-field:has(.campo-rol-pildoras) label span::after {
  display: none !important;
}
/* 6. Formato del texto dentro de la píldora */
.field-type-radio-field:has(.campo-rol-pildoras) label span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gris) !important;
  padding: 0 !important;
}
/* 7. ESTADO SELECCIONADO (Activo) */
.field-type-radio-field:has(.campo-rol-pildoras) label:has(input:checked) {
  background-color: var(--amarillo) !important;
  border-color: var(--amarillo) !important;
}
.field-type-radio-field:has(.campo-rol-pildoras) label:has(input:checked) span {
  color: var(--tinta) !important;
}

/* ── 15. ESTRUCTURA Y LÓGICA DE MATRÍCULA Y HORAS VIAJE ── */

/* 1. Oculto por defecto (hasta que se pulse una píldora) */
div.fila-datos-viaje {
  display: none !important; 
}

/* 2. Mostrar el bloque entero si CUALQUIER píldora está marcada */
.jet-form-builder-repeater__row:has(input.campo-rol-pildoras:checked) div.fila-datos-viaje {
  display: block !important; 
}

/* 3. Cuadrícula por defecto (Conductor: Matrícula + Horas) */
div.fila-datos-viaje .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: 1fr 100px !important;
  gap: 15px !important;
  margin-top: 15px !important;
  align-items: end !important; 
}

/* 4. Mutación de la cuadrícula si el marcado es Acompañante */
.jet-form-builder-repeater__row:has(input.campo-rol-pildoras[value="acompanante"]:checked) div.fila-datos-viaje .wp-block-group__inner-container {
  grid-template-columns: 100px !important; 
  justify-content: end !important; 
}

/* 5. Ocultar el input de Matrícula si el marcado es Acompañante */
.jet-form-builder-repeater__row:has(input.campo-rol-pildoras[value="acompanante"]:checked) div.fila-datos-viaje .field-type-text-field {
  display: none !important; 
}

/* Estructura interna de los campos */
div.fila-datos-viaje .jet-form-builder-row { 
  margin: 0 !important; 
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
div.fila-datos-viaje .jet-form-builder__label {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 10.5px !important; 
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gris) !important;
}
div.fila-datos-viaje .jet-form-builder__field-wrap {
  width: 100% !important;
}

/* ── TARJETAS BLANCAS PARA PÁGINAS FINALES (DESCRIPCIÓN Y OBSERVACIONES) ── */


/* 1. La tarjeta contenedora */
.field-type-textarea-field {

  background: var(--blanco) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 4px !important;
  padding: 24px !important; 
  margin-top: 15px !important; 
  margin-bottom: 24px !important; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 2. Forzar que el contenedor interno respete el padding de la tarjeta */
.field-type-textarea-field .jet-form-builder__field-wrap {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

}

/* 3. Estilizar la caja interna del textarea */
.field-type-textarea-field textarea.jet-form-builder__field {
  width: 100% !important;
  max-width: 100% !important; /* Clave para que no rompa por los lados */
  min-height: 120px !important;
  background: #FAFAFA !important;
  border: 1px solid var(--linea) !important;
  border-radius: 4px !important;
  padding: 12px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: var(--tinta) !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 4. Asegurar que las etiquetas (labels) mantengan la línea estética */
.field-type-textarea-field .jet-form-builder__label {
  margin-bottom: 8px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.field-type-textarea-field .jet-form-builder__label-text {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gris) !important;
}

.textarea-fin{
	display:block !important;
	margin:50px !important;
    padding:20px !important;	
	background-color:red !important;
	margin:auto !important;
	margin: 0 !important;
	display:flex !important;
	
}