.bloque-descrip-register-operador {
  margin-top: 50px;
  margin-bottom: 50px;
}

.formulario-operador-contenedor h2,
.formulario-operador-contenedor .h2 {
  font-size: 2em;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  color: #000;
  text-rendering: optimizeLegibility;
  text-align: left;
  margin-bottom: 25px;
}

/* === FORMULARIO REGISTRO OPERADOR === */
.formulario-operador-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  position: relative;
  border-top: 2px solid #000;
  padding-top: 50px; /* sustituye margin-top de columnas */
}

/* Columnas principales */
.formulario-operador-contenedor > .left-container-form-operadores,
.formulario-operador-contenedor > .right-container-form-operadores {
  width: 48%;
  box-sizing: border-box;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
}

/* Línea divisoria vertical centrada */
.formulario-operador-contenedor::before {
  content: '';
  position: absolute;
  top: 50px; /* alineado con inicio de las columnas */
  bottom: 250px; /* termina antes de los botones */
  left: 50%;
  transform: translateX(-0.5px);
  width: 2px;
  background-color: #000;
  pointer-events: none;
}

/* Campos ocultos y botones debajo */
.formulario-operador-contenedor > input[type='hidden'],
.formulario-operador-contenedor > .form-actions,
.formulario-operador-contenedor > .url-textfield {
  flex-basis: 100%;
}

.formulario-operador-contenedor > .form-actions {
  text-align: center;
  margin-bottom: 50px;
}

.formulario-operador-contenedor > .form-actions input[type='submit'] {
  padding: 15px 35px 15px 35px !important;
}

.formulario-operador-contenedor .tyc-container-form-operadores {
  display: flex;
  flex-direction: column;
  width: 50%;
  text-align: center;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.formulario-operador-contenedor .webform-flex .form-item-website {
  margin: 0 0 1.07527rem;
}
.left-container-form-operadores .webform-flex--1 {
  flex: none;
}
.formulario-operador-contenedor .webform-flex .form-item-website input {
  padding-bottom: 0px;
  margin-bottom: 2px;
}
.formulario-operador-contenedor .webform-flex .form-item-website .description .webform-element-description {
  font-size: 12px;
  font-weight: bold;
}

.formulario-operador-contenedor .webform-flex .form-item-city-operador .description .webform-element-description {
  font-size: 12px;
  font-weight: bold;
}

.user-form .form-item .description {
  font-size: 12px;
  font-weight: bold;
}

.user-form .field--name-field-pagina-web-operador .form-item-field-pagina-web-operador-0-value input {
  margin: 0px;
}
.user-form .field--name-field-pagina-web-operador {
  margin: 0 0 1.07527rem;
}
.formulario-operador-contenedor .webform-flex .form-item-city-operador .webform-multiple-add {
  margin-top: 10px;
}

.user-form .field--name-field-ciudades-operador .js-form-item.form-item {
  display: flex;
  flex-direction: column;
}
.user-form .field--name-field-ciudades-operador .tabledrag-toggle-weight-wrapper {
  display: none;
  order: 1;
}
.user-form .field--name-field-ciudades-operador .tableresponsive-toggle-columns {
  order: 2;
}
.user-form .field--name-field-ciudades-operador #field-ciudades-operador-values {
  order: 3;
}
.user-form .field--name-field-ciudades-operador .clearfix {
  order: 5;
}
.user-form .form-item .description {
  order: 6;
}

.user-form .field--name-field-ciudades-operador .js-form-item.form-item input.form-autocomplete {
  background-image: url(https://colombia.travel/core/themes/stable/images/core/throbber-inactive.png) !important;
  background-repeat: no-repeat;
  background-position: 100% center;
}

.user-form .field--name-field-ciudades-operador #field-ciudades-operador-values h4.label {
  display: block;
  margin: 0;
  font-size: 0.94086rem;
  font-weight: normal;
  line-height: 1.8;
  background-color: transparent;
  color: #3b444f;
  font-family: 'Poppins', sans-serif;
}
/*Estilo Formulario Edicion rol operador*/

#date-empresa-operador,
#date-contacto-operador {
  width: 48%;
  box-sizing: border-box;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
}

.user-form .layout__region.layout__region--content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  position: relative;
}

#block-saludousuario {
  display: none;
}

.user-logged-in.path-user .row.columnas-main {
  padding: 0px;
}

#block-navegacionprincipal ul.menu li:nth-child(2) {
  display: none !important;
}

.user-logged-in.path-user #date-empresa-operador legend span,
.user-logged-in.path-user #date-contacto-operador legend span {
  font-size: 2em;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  color: #000;
  text-rendering: optimizeLegibility;
  text-align: left;
  margin-bottom: 25px;
}

#block-navegacionprincipal ul.menu li.is-active a {
  padding: 1rem 0.5rem !important;
  color: #3b444f;
  text-transform: uppercase;
  background-color: #fff;
  color: #e60f4b;
  border-bottom: 4px solid #e60f4b;
}
.user-logged-in.path-user .form-actions {
  text-align: center;
}
.user-logged-in.path-user .form-actions input[type='submit'] {
  margin-top: 50px;
  padding: 15px 35px 15px 35px !important;
}

.bloque-descrip-register-operador h2 {
  margin-top: 50px;
}

.bloque-descrip-register-operador .container-content-tipo {
  background-color: #fafafa;
  padding: 25px;
  border-radius: 15px 15px 0px 0px;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 60px;
  border-bottom: 1px solid #d9d9d9;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  gap: 50px;
  width: 50%;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .title {
  color: #000;
  font-size: 19px;
  text-transform: uppercase;
  font-weight: bold;
  width: 50%;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .title.encabezado-operador {
  color: #000073;
  text-align: center;
}
.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns.encabezado-operador {
  font-size: 19px;
  text-transform: uppercase;
  font-weight: bold;
  width: 50%;
  color: #000073;
  text-align: center;
  justify-content: center;
  margin-left: 25%;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo:nth-child(1) {
  border: none;
}
.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns .creat-new a {
  background-color: #000073;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
}

.bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns .see-contents a {
  background-color: #e60f4b;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
}

.none-content-operador {
  padding: 50px;
  text-align: center;
}

.none-content-operador p {
  font-size: 20px;
  font-weight: bold;
}
.none-content-operador a {
  background-color: #e60f4b;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
}
.none-content-operador a:hover {
  background-color: #000073;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
}

.container-btn-tnk {
  text-align: center;
}

.container-btn-tnk a {
  width: 150px;
  max-width: 150px;
  padding: 1em;
  background-color: #e60f4b;
  border-radius: 6px;
  color: white;
  display: inline-block;
  text-align: center;
}
.container-btn-tnk a:hover {
  background: #0a244f;
  color: white;
}

.tipos-content-operador-nodos {
  margin-top: 50px;
}

.tipos-content-operador-nodos header h2 {
  color: #000;
  font-size: 36px;
  font-weight: bold;
}
.tipos-content-operador-nodos header .short-intro-operador {
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-top: 40px;
}

.tipos-content-operador-nodos header .option-btn .back-link-operador a {
  background-color: #e60f4b;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
  font-weight: bold;
  display: flex !important;
  gap: 3px;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.tipos-content-operador-nodos header .option-btn .load-new-content a {
  background-color: #2251b9;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
  font-weight: bold;
}

.tipos-content-operador-nodos header .option-btn {
  display: flex;
  justify-content: space-between; /* izq - der */
  align-items: center;
  gap: 1rem; /* opcional: espacio entre ellos */
}

.tipos-content-operador-nodos header .option-btn .back-link-operador a,
.tipos-content-operador-nodos header .option-btn .load-new-content a {
  display: inline-block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-radius: 6px;
}

.tipos-content-operador-nodos header .description-operador-conte {
  font-size: 15px;
  text-align: justify;
  margin-top: 40px;
}

/*Estilos item nodos operador*/

.tipos-content-operador-nodos .operador-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px dashed #ddd;
  margin-bottom: 50px;
  margin-top: 50px;
}

.tipos-content-operador-nodos .operador-row .col.title {
  flex: 1 1 auto;
  font-size: 22px;
  line-height: 1.2;
  max-width: 359px;
}
.tipos-content-operador-nodos .operador-row .col.title strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tipos-content-operador-nodos .operador-row .col.status {
  flex: 0 0 260px;
  text-align: left;
}

.tipos-content-operador-nodos .operador-row .col.actions {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.tipos-content-operador-nodos .estatus {
  font-style: italic;
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tipos-content-operador-nodos .estatus.ok {
  color: #b3b3b3;
} /* mismo tono del mockup */
.tipos-content-operador-nodos .estatus.pending {
  color: #b3b3b3;
} /* ajusta si quieres otro color */

.tipos-content-operador-nodos .act {
  font-weight: 600;
  text-decoration: none;
}
.tipos-content-operador-nodos .act.preview {
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tipos-content-operador-nodos .act.edit {
  color: #2251b9;
} /* azul del mockup */
.tipos-content-operador-nodos .act.translate {
  color: #333;
}
.tipos-content-operador-nodos .act.translate.disabled {
  color: #d0d0d0;
  pointer-events: none;
  cursor: default;
}
.tipos-content-operador-nodos .act.delete {
  color: #e60f4b;
} /* rojo eliminar */

.tipos-content-operador-nodos .sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #9a9a9a;
  margin: 0 6px;
}

.tipos-content-operador-nodos .ico-eye {
  width: 22px;
  height: 22px;
  fill: #6b6b6b;
  display: inline-block;
}

.bloque-descrip-edit-operador h2 {
  color: #000;
  font-size: 36px;
  font-weight: bold;
  margin-top: 50px;
}

.bloque-descrip-edit-operador .description-operador-conte {
  font-size: 15px;
  text-align: justify;
  margin-top: 40px;
}

.bloque-descrip-edit-operador .container-content-tipo .item-row-tipo .items-btns .see-contents {
  width: 31%;
  margin-bottom: 50px;
  margin-top: 50px;
}
.bloque-descrip-edit-operador .container-content-tipo .item-row-tipo .items-btns .see-contents a {
  background-color: #e60f4b;
  color: #fff;
  padding: 10px 15px 10px 15px !important;
  border-radius: 10px;
  font-weight: bold;
  display: flex !important;
  gap: 3px;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.itinerarios-custom-form {
  padding: 10px 20px 9px 20px;
  background: #fafafa;
  margin-bottom: 50px;
}
.itinerarios-custom-form .form-item,
.itinerarios-custom-form .field--type-image {
  margin-top: 30px;
}

.itinerarios-custom-form .form-item label {
  font-weight: bold;
  font-size: 18px;
}
.itinerarios-custom-form .form-item .description {
  font-size: 12px;
  font-weight: bold;
}
.itinerarios-custom-form .form-item .vertical-tabs {
  display: none;
}
.webform-confirmation__message,
.webform-confirmation__back {
  display: none;
}

/*******************************************************
 *  FORMULARIO: EDICIÓN DE OPERADOR (USER EDIT)
 *  Layout en dos columnas con FieldGroup
 *******************************************************/

/* --- Contenedor general del formulario --- */
.user-form .layout__region.layout__region--content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  position: relative;
}

.itinerarios-custom-form .form-item textarea {
  background-color: #fff;
}

.itinerarios-custom-form #edit-body-0-format {
  display: none;
}

/* --- Columns (Fieldsets principales) --- */
.user-form #date-empresa-operador,
.user-form #date-contacto-operador {
  width: 48%;
  box-sizing: border-box;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
}

/* --- Legends (títulos de los grupos) --- */
.user-form fieldset legend .fieldset-legend {
  font-size: 2em;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #000;
  display: block;
  margin-bottom: 25px;
}

/* --- Elementos internos de cada fieldset --- */
.user-form .field-group-fieldset .field--type-string,
.user-form .field-group-fieldset .field--type-list-string,
.user-form .field-group-fieldset .field--type-string-long,
.user-form .field-group-fieldset .field--type-image,
.user-form .field-group-fieldset .field--type-telephone,
.user-form .field-group-fieldset .field--type-entity-reference {
  width: 100%;
  margin-bottom: 20px;
}

/* --- Inputs generales --- */
.user-form input.form-text,
.user-form input.form-tel,
.user-form select.form-select,
.user-form textarea.form-textarea {
  width: 100%;
  box-sizing: border-box;
}

/*******************************************************
 *  ESTILOS ESPECÍFICOS POR TIPO DE WIDGET
 *******************************************************/

/* --- Imagen del logo de empresa --- */
.user-form .form-managed-file img {
  max-width: 120px;
  border-radius: 6px;
}

/* --- Descriptions (debajo de inputs) --- */
.user-form .form-item .description {
  font-size: 12px;
  font-weight: bold;
  margin-top: 6px;
}

/* --- Autocomplete input (ciudades) --- */
.user-form .field--name-field-ciudades-operador .form-autocomplete {
  width: 100%;
  padding-right: 35px !important;
  background-position: 98% center;
}

/* --- Tabla de ciudades --- */
.user-form .field--name-field-ciudades-operador table {
  width: 100%;
  margin-top: 15px;
}

.user-form .field--name-field-ciudades-operador h4.label {
  display: block;
  margin: 0;
  font-size: 0.94rem;
  font-weight: normal;
  background-color: transparent;
  color: #3b444f;
  font-family: 'Poppins', sans-serif;
}

/* --- Botón Añadir otro elemento --- */
.user-form .field-add-more-submit {
  margin-top: 10px;
}

/*******************************************************
 *  FORM ACTIONS
 *******************************************************/
.user-form .form-actions {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}

.user-form .form-actions input[type='submit'] {
  padding: 15px 35px !important;
  font-size: 16px;
}
/* === CONTENEDOR PRINCIPAL DEL FORM === */
#rol-operador-fields > .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

/* === LOS DOS FIELDSETS INTERNOS (COLUMNA IZQ Y DER) === */
#date-empresa-operador,
#date-contacto-operador {
  width: 48%;
  box-sizing: border-box;
  padding: 0 1rem;
}

/* === TITULOS DE GRUPO === */
#date-empresa-operador legend .fieldset-legend,
#date-contacto-operador legend .fieldset-legend {
  font-size: 2em;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin-bottom: 25px;
}

/* === RESPONSIVE: EN MÓVIL SE APILAN === */
@media (max-width: 768px) {
  #rol-operador-fields > .fieldset-wrapper {
    flex-direction: column;
    gap: 1rem;
  }

  #date-empresa-operador,
  #date-contacto-operador {
    width: 100%;
    padding: 0;
  }
  #data-tyc-operador .js-form-item.form-item {
    display: flex;
  }
}
.select2-container--default .select2-selection--multiple {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #e60f4b !important;
  margin: 0 0 1.07527rem !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #404041;
  background-color: #fbfbfb;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: none !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  display: none;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-bottom: 1px solid #e60f4b !important;
  margin: 0 0 1.07527rem !important;
}
@media (min-width: 769px) and (max-width: 1050px) {
  .formulario-operador-contenedor::before {
    bottom: auto;
    height: 77%;
  }
  .formulario-operador-contenedor .tyc-container-form-operadores {
    width: 80%;
    align-items: center;
  }
}
.select2-results__group {
  background-color: #ddd;
}

/*******************************************************
 *  MOBILE RESPONSIVE
 *******************************************************/
@media (max-width: 768px) {
  /* Quitar columnas → todo en una sola */
  .user-form #date-empresa-operador,
  .user-form #date-contacto-operador {
    width: 100%;
    padding: 0;
  }

  .user-form .layout__region.layout__region--content {
    padding-top: 0;
  }

  /* Autocomplete full width */
  .user-form .field--name-field-ciudades-operador .form-autocomplete {
    width: 100%;
  }
}

/* En móviles, ponerlos uno debajo del otro */
@media (max-width: 600px) {
  .option-btn {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- MÓVIL --- */
@media (max-width: 768px) {
  .formulario-operador-contenedor {
    flex-direction: column;
    padding-top: 0;
  }

  .formulario-operador-contenedor::before {
    display: none;
  }

  .formulario-operador-contenedor > .left-container-form-operadores,
  .formulario-operador-contenedor > .right-container-form-operadores {
    width: 100%;
    padding: 0;
  }

  .formulario-operador-contenedor .tyc-container-form-operadores {
    width: 100%;
  }
  .formulario-operador-contenedor .tyc-container-form-operadores .js-form-item.form-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
  }
  #date-empresa-operador,
  #date-contacto-operador {
    width: 100%;
  }
  .user-form .layout__region.layout__region--content {
    padding-top: 0px;
  }
  .bloque-descrip-register-operador .container-content-tipo {
    padding: 5px;
  }
  .bloque-descrip-register-operador .container-content-tipo .item-row-tipo {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .bloque-descrip-register-operador .container-content-tipo .item-row-tipo .title.encabezado-operador {
    width: 100%;
  }
  .bloque-descrip-register-operador .container-content-tipo .item-row-tipo .title {
    width: 100%;
  }
  .bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns.encabezado-operador {
    width: 100%;
    margin-left: 0%;
    text-align: center;
    gap: 0;
  }
  .bloque-descrip-register-operador .container-content-tipo .item-row-tipo .items-btns {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 30px;
  }
}