:root {
   /**Colors**/
   --ancho-desktop-forms-modal: 360px;
   --ancho-mobile-forms-modal: 100%;
 }


 /* OCULTAR SPINNER / THROBBER DE AJAX */
 .ajax-progress,
 .ajax-progress-throbber {
   display: none !important;
 }



 /* MODAL – CONTENEDOR GENERAL */
 .ui-dialog {
   border: none !important;
   border-radius: 14px !important;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
   max-width: 640px !important;
   width: 92% !important;
 }

 /* Permitir scroll en modales de webforms */
 .ui-dialog {
   max-height: 90vh !important;
 }

 .ui-dialog-content {
   max-height: calc(90vh - 100px) !important;
   overflow-y: auto !important;
   overflow-x: hidden !important;
 }

 .ui-dialog form {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .ui-dialog form .js-webform-type-processed-text {
   text-align: center;
 }


 .ui-dialog form label {
   font-size: 16px;
   color: black !important;
   font-family: var(--stelae-font-family-regular);
   pointer-events: none;
 }


 .ui-dialog form .js-webform-type-processed-text h1 {
   font-size: 24px;
   color: var(--stelae-sodalite-blue);
   font-family: var(--stelae-font-family-bold);
 }

 .ui-dialog form .js-webform-type-processed-text p {
   font-size: 16px;
   color: black;
   font-family: var(--stelae-font-family-regular);
 }

 .ui-dialog form .js-webform-type-textfield {
   width: var(--ancho-desktop-forms-modal);
 }

 .ui-dialog form .radios--wrapper {
   width: 340px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-bottom: 5px !important;
 }

 .ui-dialog form .radios--wrapper legend span {
   font-size: 16px;
   font-family: var(--stelae-font-family-regular);
   color: black !important;
 }

 .ui-dialog a {
   color: black !important;
 }

 .traslado-leer-mas {
   pointer-events: initial;
 }

 .ui-dialog .webform-submission-form p {
   font-size: 14px;
   color: black;
   margin-bottom: 24px;
   font-family: var(--stelae-font-family-regular);
 }

 .form-item-acepto-los-terminos-y-las-politicas-de-privacidad {
   margin-bottom: 3rem !important;
 }

 form a {
   font-weight: 600;
 }

 .ui-dialog form .radios--wrapper .fieldset-wrapper .js-webform-radios {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ancho-desktop-forms-modal);
   gap: 36px;
 }


 .ui-dialog form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   margin: 0rem;
 }

 .ui-dialog form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio input {
   margin: 0rem;
   padding: 1.4rem;
 }

 .ui-dialog form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio input:checked {
   background-color: white;
   border: 6px solid var(--green-apple);
   padding: 1.4rem;
 }

 .ui-dialog form .js-webform-type-textarea {
   width: var(--ancho-desktop-forms-modal);
   margin-bottom: 2rem;
 }


 .ui-dialog form .js-webform-type-textarea label {
   width: var(--ancho-desktop-forms-modal);
 }


 .ui-dialog form .js-webform-type-checkbox {
   width: var(--ancho-desktop-forms-modal);
 }

 .ui-dialog form .js-webform-type-checkbox input {
   width: 44px;
   height: 44px;
 }

 .ui-dialog form .js-form-wrapper {
   width: var(--ancho-desktop-forms-modal);
   display: flex;
   align-self: center;
 }

 .ui-dialog .button {
   background-color: var(--stelae-sodalite-blue) !important;
   font-family: var(--stelae-font-family-bold) !important;
   border: none !important;
   color: var(--stelae-white) !important;
   padding: 16px 40px !important;
   text-align: center !important;
   text-decoration: none !important;
   font-size: 16px !important;
   width: 100% !important;
   cursor: pointer !important;
   height: 44px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   border-radius: 0 !important;
   background-image: none !important;
 }

 /* CONFIRMACIÓN MODAL */
 .webform-confirmation .webform-confirmation__message {
   font-family: var(--stelae-font-family-regular);
   color: var(--stelae-sodalite-blue);
   font-size: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }


 .webform-confirmation .webform-confirmation__message p {
   text-align: center;
   margin-bottom: 12px;
   font-size: 16px;
 }

 .webform-confirmation__message h2 {
   font-family: var(--stelae-font-family-bold);
   color: var(--stelae-sodalite-blue);
   font-size: 24px;
   margin-bottom: 16px;
 }

 .webform-confirmation .webform-confirmation__message span {
   text-decoration: underline;
   font-family: var(--stelae-font-family-bold);
 }

 .webform-confirmation .webform-confirmation__message #webform-confirmation-atention {
   margin-bottom: 0px;
 }

 /* MOBILE L */
 @media (max-width: 480px) {
   .ui-dialog {
     width: 100% !important;
     max-width: 100% !important;
     height: 100vh !important;
     max-height: 100vh !important;
     margin: 0 !important;
     top: 0 !important;
     left: 0 !important;
     position: fixed !important;
   }

   .ui-dialog-content {
     max-height: calc(100vh - 60px) !important;
     height: calc(100vh - 60px) !important;
     width: 100% !important;
   }

   .ui-dialog-titlebar {
     border-radius: 0 !important;
   }

   .ui-dialog #drupal-modal {
     max-height: 100% !important;
   }

   .ui-dialog form .js-webform-type-processed-text h1 {
     width: 64%;
     justify-self: center;
   }

   .ui-dialog form .js-webform-type-processed-text p {
     width: 100% !important;
     justify-self: center;
   }

   .ui-dialog .js-webform-type-telefono-custom {
     width: 355px;
   }

   .ui-dialog form .telefono-intl-input {
     width: 355px;
   }

   .ui-dialog form .js-form-wrapper {
     width: 350px;
   }

   .ui-dialog form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio {
     width: 100px;
   }

   form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio {
     width: 100px;
   }

   .ui-dialog form .js-webform-type-textarea {
     width: 350px;
   }

   .ui-dialog form .js-webform-type-checkbox {
     width: 360px;
   }

 }

 /* MOBILE M */
 @media (max-width: 394px) {}


 /* MOBILE S */
 @media (max-width: 361px) {

   .ui-dialog form .js-webform-type-textfield {
     width: 330px;
   }

   .ui-dialog .js-webform-type-telefono-custom {
     width: 325px;
   }

   .ui-dialog form .telefono-intl-input {
     width: 325px;
   }

   .ui-dialog form .js-form-wrapper {
     width: 320px;
   }

   .ui-dialog form .js-webform-type-textarea {
     width: 320px !important;
   }

   .ui-dialog form .js-webform-type-checkbox {
     width: 325px !important;
   }

 }


 /* FORMULARIOS */

 .form-control {
   margin-top: 5px;
   color: var(--spanish-grey);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding: 8px;
   gap: 8px;
   background: var(--steale-terciary-button-hover);
   border: 1px solid var(--steale-medium-medium-blue);
   border-radius: 4px;
   height: 44px;
 }

 .form-select {
   border-radius: 5px;
   border: 1px;
   margin-top: 5px;
   background-image: url("../img/keyboard_arrow_down.svg") !important;
   background: var(--steale-terciary-button-hover);
   background-size: 20px 20px !important;
   color: var(--stelae-sodalite-blue);
   border: 1px solid var(--steale-medium-medium-blue);
   background-repeat: no-repeat;
   background-position: right .75rem center;
   height: 44px;
 }

 .form-select.is-valid:focus, .was-validated .form-select:valid:focus, .form-select.is-valid, .was-validated .form-select:valid {
   border: 1px solid var(--steale-medium-medium-blue) !important;
   box-shadow: none;
 }

 .form-select.is-valid,
 .was-validated .form-select:valid {
   border-color: var(--green-apple);
 }

 .webform-submission-form label {
   color: var(--stelae-sodalite-blue) !important;
   font-family: var(--stelae-font-family-regular);
   font-size: 16px;
   width: 100%;
   /* display: contents; */
 }

 .form-check-input:checked {
   background-color: var(--green-apple);
   border-color: var(--green-apple);
 }

 input.form-radio.form-check-input {
   height: 4px;
   margin-top: 8px;
   padding-top: 16px;
 }

 .form-check-input:checked[type="radio"] {
   background-image: url("../img/Ellipse.svg") !important;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 60% 60%;
   border: none;
 }

 .form-check-input {
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4) !important;
   border: none;
 }


 form .radios--wrapper {
   width: 340px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-bottom: 5px !important;
 }

 form .radios--wrapper legend span {
   font-size: 16px;
   font-family: var(--stelae-font-family-regular);
 }

 form .radios--wrapper .fieldset-wrapper .js-webform-radios {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ancho-desktop-forms-modal);
   gap: 36px;
 }


 form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   margin: 0rem;
 }

 form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio input {
   margin: 0rem;
   padding: 0rem;
 }

 form .radios--wrapper .fieldset-wrapper .js-webform-radios .js-webform-type-radio input:checked {
   background-color: white;
   border: 6px solid var(--green-apple);
 }

 .texto-completo {
   display: none;
 }

 .toggle-texto strong {
   cursor: pointer;
   color: black;
   font-family: var(--stelae-font-family-bold);
 }



 /*FORMULARIO CONTACTO*/

 .block-views-blockpaquetes-block-3 {
   border: none !important;
 }

 .block-views-blockpaquetes-block-3 .views-view-responsive-grid {
   --views-responsive-grid--column-count: 1 !important;
 }

 .ui-dialog .button.disabled{
  background-color: var(--spanish-grey) !important;
    border: none !important;
    color: var(--stelae-sodalite-blue) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    background-image: none;
    border-radius: initial;
 }

  .ui-dialog .button:hover{
  background-color: var(--spanish-grey) !important;
    border: none !important;
    color: var(--stelae-sodalite-blue) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    background-image: none;
    border-radius: initial;
 }

 



 /* Eliminar padding extra que añade jQuery UI */
 .ui-widget.ui-widget-content {
   padding: 0 !important;
   top: 88px;
   z-index: 9999;
 }

 /************************************************
 * OVERLAY / FONDO OSCURO
 ************************************************/
 .ui-widget-overlay {
   background: rgba(0, 0, 0, 0.6);
 }

 /************************************************
 * BARRA SUPERIOR DEL MODAL
 ************************************************/
 .ui-dialog-titlebar {
   background: white !important;
   border: none !important;
   padding: 16px 20px !important;
   display: flex !important;
   justify-content: flex-end !important;
   border-radius: 14px 14px 0 0;
 }

 /* Ocultar título del modal (Webform ya trae el suyo) */
 .ui-dialog-title {
   display: none !important;
 }

 /************************************************
 * BOTÓN CERRAR (X)
 ************************************************/
 .ui-dialog-titlebar-close {
   background: transparent !important;
   border: none !important;
   width: 32px !important;
   height: 32px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin: 0 !important;
   padding: 0 !important;
 }

 .ui-dialog .ui-dialog-titlebar-close {
   right: 0rem !important;
   position: relative !important;
   background-image: url(../img/close.png) !important;
   background-repeat: no-repeat !important;
 }



 /* Icono personalizado de cerrar */
 .ui-button .ui-icon {
   /* background-image: url("/themes/custom/stelae_bootstrap/img/close.png") !important; */
   background-image: none !important;
   background-size: 18px 18px;
   background-position: center;
   background-repeat: no-repeat;
 }

 /************************************************
 * CONTENIDO DEL MODAL
 ************************************************/
 .ui-dialog-content {
   padding: 10px 24px 30px !important;
 }

 /************************************************
 * WEBFORM – ESTRUCTURA GENERAL
 ************************************************/
 .webform-submission-form {
   font-family: inherit;
 }

 /************************************************
 * TÍTULO Y TEXTO INTRODUCTORIO
 ************************************************/
 .webform-submission-form h2,
 .webform-submission-form h3 {
   text-align: center;
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .webform-submission-form p {
   font-size: 14px;
   color: var(--stelae-sodalite-blue);
   margin-bottom: 24px;
 }

 /************************************************
 * CAMPOS DEL FORMULARIO
 ************************************************/
 .webform-submission-form .form-item {
   margin-bottom: 16px;
 }

 .iti--separate-dial-code .iti__selected-flag {
   background-color: transparent !important;
 }

 /************************************************
 * RADIOS (Sí / No)
 ************************************************/
 .webform-submission-form .form-radios {
   display: flex;
   gap: 24px;
 }

 .webform-submission-form .form-radios label {
   font-weight: 500;
 }

 /************************************************
 * CHECKBOX
 ************************************************/
 .form-check-input.is-valid:checked,
 .was-validated .form-check-input:valid:checked {
   background-color: rgb(42, 150, 100);
   background-color: #49B280;
   width: 44px;
   height: 44px;
 }

 .form-check .form-check-input {
   margin-left: 0rem;
 }

 .form-check {
   min-height: 1.5rem;
   padding-left: 0rem;
   margin-bottom: .125rem;
   display: flex;
   gap: 10px;
   display: flex;
   margin-bottom: 2rem !important;
 }

 .form-item-acepto-los-terminos-y-las-politicas-de-privacidad {
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: .5rem;
   /* separación checkbox - label */
 }

 /* Checkbox */
 .form-item-acepto-los-terminos-y-las-politicas-de-privacidad .privacity-conditions>input.form-check-input {
   grid-column: 1;
   grid-row: 1;
   margin-top: .25rem;
   /* alinea visualmente con label */
 }

 /* Label pegada al input */
 .form-item-acepto-los-terminos-y-las-politicas-de-privacidad>label.form-check-label {
   grid-column: 2;
   grid-row: 1;
   margin: 0;
   /* elimina espacios extra */
   display: inline-block;
 }



 /* Error abajo, ancho completo */
 .form-item-acepto-los-terminos-y-las-politicas-de-privacidad>.invalid-feedback {
   grid-column: 1 / -1;
   margin-top: .25rem;
 }



 form small {
   color: var(--stelae-sodalite-blue);
   font-family: var(--stelae-font-family-regular);
   width: 100%;
 }


 .iti__flag {
   display: none;
 }

 .form-control {
   color: var(--stelae-sodalite-blue);
 }

 #edit-telefono-avanzado-number {
   width: 100% !important;
 }

 .iti {
   width: 100% !important;
 }

 #edit-flexbox-01>div:nth-child(2)>div>div>div {
   width: 100% !important;
 }

 .form-check-label{
  font-size: 14px !important;
 }

 .form-check-input.is-invalid~.form-check-label,
 .was-validated .form-check-input:invalid~.form-check-label {
   width: 100%;
 }

 .iti__arrow {
   margin-left: 6px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 6px solid var(--stelae-sodalite-blue);
 }


 /************************************************
 * BOTÓN ENVIAR
 ************************************************/


 /************************************************
 * RESPONSIVE – MÓVIL
 ************************************************/
 /* MOBILE L */
 @media (max-width: 480px) {

   .form-check {
     justify-content: flex-start;
     width: 100%;
   }

   form small {
     width: 100%;
   }


 }

 /* MOBILE M */
 @media (max-width: 394px) {
   /* form small {
     width: 325px;
   } */
 }

 /* MOBILE S */
 @media (max-width: 361px) {
   /* form small {
     width: 300px;
   } */
 }