#formulator-container {
    margin: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
  }
  .formulator-group {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 1.5em;
    margin-bottom: 2em;
  }
  .sub-toolbar {
    margin-bottom: 1.25em;
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
  }
  .sub-toolbar .sub-btn {
    background: linear-gradient(180deg, #fafafa, #ececec);
    border: 1px solid #d1d1d1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 0.6em 1.2em;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
  }
  .sub-toolbar .sub-btn:not(.active):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: linear-gradient(180deg, #fdfdfd, #e5e5e5);
  }
  .sub-toolbar .sub-btn.active {
    background: linear-gradient(90deg, #0073aa, #005177);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .sections { display: block; }
  .section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 2em;
  }
  .section .col {
    flex: none;
    width: calc(50% - 1em);
    background: #fafafa;
    padding: 1em;
    border: 1px solid #ececec;
    border-radius: 6px;
  }
  
/* Reordenamiento: Borrower | Co-Borrower (fila 1), Mailing L | Mailing R (fila 2) */
.section .col:nth-child(1){order:1;}
.section .col:nth-child(3){order:2;}
.section .col:nth-child(2){order:3;}
.section .col:nth-child(4){order:4;}
@media (max-width:768px){
  .section{flex-direction:column;}
  .section .col{width:100%;}
}
.col h4 {
  margin:0 0 1em;
  font-size:1.1em;
  color:#222;
  border-bottom:2px solid #8b0101;
  padding-bottom:0.25em;
}

/* Deja un espacio extra tras el h4 */
.col h4 {
    margin-bottom: 1.5em;  /* ajusta este valor al espacio que quieras */
  }
  

/* ————————————————————————————— */
/* Aquí arranca la magia de label+campo */
/* ————————————————————————————— */
/* Cada par label+campo irá dentro de un .form-row */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.75em;
  }
  /* El label ocupa 30%, el campo 70% */
  .form-row label {
    flex: 0 0 140px;   
    margin: 0 1em 0 0;
    font-weight: 400;
    font-size: 12px;
    text-align: right;
  }
  .form-row .field {
    flex: 1;
  }
  /* Inputs, selects y textarea dentro de .field */
.form-row .field input[type="text"],
.form-row .field input[type="email"],
.form-row .field select,
.form-row .field textarea {
  width: 100%;
  padding: 0.6em;
  border: 1px solid #636363;
  border-radius: 4px;
  font-size: 0.95em;
  box-sizing: border-box;
  margin: 0;
  color: #000000;
}

  /* Tres inputs de Full Name en línea */
  .form-row.fullname .field {
    display: flex;
    gap: 0.5em;
  }
  .form-row.fullname .field input {
    flex: 1;
  }
  /* Botón guardar */
  .save-btn {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 0.75em 1.5em;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 1em;
  }
  .save-btn:hover {
    background-color: #005177;
  }
  
  
     /* Botón guardar global */
  #global-save-btn {
    position: fixed;
    bottom: 25%;
    left: 3.5%;
    width: 50px !important;
    height: 50px !important;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50% !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease-in-out !important;
    padding: 0px !important;
  }
  #global-save-btn:hover {
    background-color: #005177;
  }

/* contenedor para pares de filas en linea */
.form-row-pair {
    display: flex;
    gap: 1em;           /* espacio entre los dos form-row */
  }
  .form-row-pair .form-row {
    flex: 1;            /* cada uno ocupa 50% del ancho disponible */
    margin-bottom: 0.75em;
  }
  
  
  /* ———————————————————————— */
/* Alinear .form-row como .form-row-pair */
/* ———————————————————————— */
.col > .form-row,
.col > .form-row-pair {
  /* Ocupa ambas columnas del grid de la .col */
  grid-column: 1 / -1;
  
}

/* ———————————————————————— */
/* Estilos para las Tabs (pestañas) */
/* ———————————————————————— */

/* Contenedor de pestañas */
#tabs-bar {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ddd;
    margin-bottom: 1em;
  }
  
  /* Lista de pestañas */
  #tabs-list {
    display: flex;
    gap: 0.5em;
  }
  
  /* Botones de pestaña */
  .tab-btn {
    background: transparent;
    border: none;
    padding: 0.6em 1em;
    font-size: 0.95em;
    font-weight: 600;
    color: #8f0000;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: background 0.2s, color 0.2s;
  }
  
  /* Hover en pestañas */
  .tab-btn:hover {
    background: #f2f2f2;
    color: #333;
  }
  
  /* Estado activo */
  .tab-btn.active {
    background: #b10000;
    border: 2px solid #810000;
    border-bottom: none;
    color: #ffffff;
    position: relative;
    top: 2px;
    font-weight: 800;
  }
  
  /* Icono “+” al final */
  #add-group {
    margin-left: auto; /* empuja el + al extremo derecho */
    margin-bottom: 0.5em;
    background: transparent;
    border: none;
    color: #aa0000;
    transition: color 0.2s;
  }
  #add-group:hover {
    color: #5f0101;
  }
  
/* mi grisito */
.form-colorcin {
  background-color: #d5d5d5;
  padding: 25px;
  margin-bottom: 10px;
}

.new-emp { 
  margin-left: auto;
  font-size: 12px;
  padding: 10px;
}

.new-re { 
  margin-left: auto;
  font-size: 12px;
  padding: 10px;
}

/* ───────────────────────────────────────────── */
/* Hacer inputs, selects y datepickers más compactos */
/* ───────────────────────────────────────────── */
.form-row {
  margin-bottom: 0.5em;    /* menos espacio entre filas */
}

.form-row label {
  font-size: 0.9em;        /* etiquetas un poco más pequeñas */
  margin-right: 0.5em;     /* menos separación etiqueta–campo */
}

.form-row .field input,
.form-row .field select,
.form-row .field textarea {
  padding: 0.4em 0.5em;     /* menos alto que antes */
  font-size: 0.9em;         /* texto ligeramente más pequeño */
  line-height: 1.2;         /* reduce altura de línea */
}

/* Ajuste especial para inputs de fecha (flatpickr) */
.flatpickr-input {
  padding: 0.4em 0.5em;
  font-size: 0.9em;
  line-height: 1.2;
}

/* Textareas un poco más cortos */
.form-row .field textarea {
  min-height: 3em;
}



/* Opcional: agrupar .fullname para que tenga menos gap vertical */
.form-row.fullname .field {
  gap: 0.4em;
}

.section-title {
  background: #7c0000;
    color: #ffffff;
    padding: 10px;
    font-size: 18px;
}


/*el formulario 3*/

/* —————————————————————————— */
/* Estilos para Questionnaire (section-2) */
/* —————————————————————————— */
.formulator-group .section-2 h2 {
  color: #0057B8;            /* azul corporativo */
  font-size: 1.3em;          /* un poco más grande */
  margin: 1em 0 0.5em;       /* espacio arriba y abajo */
  padding-bottom: 0.25em;
  text-align: left;
}

.formulator-group .section-2 h3 {
  color: #000000;               /* gris oscuro */
  font-size: 1.25em;
  margin: 0.75em 0 0.4em;
  font-weight: 600;
}

.formulator-group .section-2 h4 {
  color: #222;               /* casi negro */
  font-size: 1.1em;
  margin: 0.5em 0 0.3em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formulator-group .section-2 p {
  color: #000000;               /* casi negro */
  font-size: 0.9em;
  margin: 0.5em 0 0.3em;
  letter-spacing: 0.5px;
}

/*pruebas*/

/* ———————————————— */
/* Questionnaire layout */
/* ———————————————— */
.formulator-group .section-2 .form-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  border-radius: 4px;
}



/* Label ocupa ~40%, campo ~60% */
.formulator-group .section-2 .form-row label {
  flex: 0 0 60%;
  font-weight: 600;
}
.formulator-group .section-2 .form-row .field {
  flex: 1;
}

/* Inputs compactos */
.formulator-group .section-2 .form-row .field input[type="text"] {
  width: 100%;
  height: 1.6em;
  padding: 0.3em;
  box-sizing: border-box;
}

/* Checkboxes ligeramente más grandes */
.formulator-group .section-2 .form-row .field input[type="checkbox"] {
  transform: scale(1.1);
  margin-right: 0.3em;
}

/* ————————————————————————————————————— */
/* Questionnaire: pares sin separación y fondo alterno */
/* ————————————————————————————————————— */
.formulator-group .section-2 .questionnaire-rows > * {
  margin-bottom: 0;  /* elimina gap interno */
  border-radius: 0;
}

/* deja separación solo tras cada detalle */
.formulator-group .section-2 .questionnaire-rows > .questionnaire-detail {
  margin-bottom: 1em;
}

/* pares OSCUROS: hijos 2/3, 6/7, 10/11… */
.formulator-group .section-2 .questionnaire-rows > *:nth-child(4n+3),
.formulator-group .section-2 .questionnaire-rows > *:nth-child(4n+4) {
  background: #ababab;
  padding: 0.3em 0.3em;
}

/* pares CLAROS: hijos 4/5, 8/9, 12/13… */
.formulator-group .section-2 .questionnaire-rows > *:nth-child(4n+5),
.formulator-group .section-2 .questionnaire-rows > *:nth-child(4n+6) {
  background: #a6afaf;
  padding: 0.3em 0.3em;
}

/* el primer hijo (child 1) queda sin fondo */
.questionnaire-rows {
  background: #e9e9e9;
  margin: auto;
  padding: 10px 20px;
}

/*penultimo #3*/

/* ————————————————————————————— */
/* Provided Through: columna única + dos columnas alineadas izquierda */
/* ————————————————————————————— */
.formulator-group .section-2 .provided-wrapper {
  background: #e9e9e9;
  padding: 1em;
  margin-bottom: 0.7em;
}

/* Primer checkbox full-width, texto alineado a la izquierda */
.provided-single {
  display: flex;
  margin-bottom: 0.75em;
}
.provided-single label {
  flex: 1;
  text-align: left;
}

/* Los siguientes en dos columnas */
.provided-pair {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1em;
}

/* Cada checkbox ocupa la mitad y se alinea a la izquierda */
.provided-checkbox {
  flex: 0 0 50%;
}
.provided-checkbox label {
  display: block;
  text-align: left;
}

/* ——————————————————————————————— */
/* Primera opción “provided-single” sin salto de línea */
/* ——————————————————————————————— */
.formulator-group .section-2 .provided-single label {
  white-space: nowrap;       /* impide saltos */
 
  text-overflow: ellipsis;   /* opcional: añade "…" al final */
}

/*----inicia otro---*/

/* Contenedor gris para Demographic Information */
.formulator-group .section-2 .demographic-wrapper {
  background: #e9e9e9;
  padding: 1em;
  margin-bottom: 0.7em;
}

/* Ajustes para el h3 dentro de .llegandora */
.formulator-group .section-2 .demographic-wrapper .llegandora h3 {
  color: #000;         /* negro puro */
  font-size: 1em;    /* ajústalo a tu gusto */
  font-weight: 600;    /* un poco más grueso si quieres */
  margin-bottom: 0.5em;
}

/* Military Service wrapper */
.formulator-group .section-2 .military-wrapper {
  background: #e9e9e9;
  padding: 1em;
  border-radius: 6px;
  margin-bottom: 1.5em;
}

.pasadenaas {
  text-align: end;
}

/*formulario #4 */

.real-estate-grid {
  display: grid !important;
  /* four equal‐width columns */
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  background: #d0d0d0;
  padding: 1em;
  border-radius: 4px;

  /* force all grid items (your .grid-col elements) to align at the top */
  align-items: start;
}

.real-estate-grid .grid-col {
  /* undo any flex‐centering you removed */
  flex-direction: column;
  justify-content: flex-start;  /* push everything to the top of the column */
}

/* column headers stay at the top */
.real-estate-grid .grid-col h5 {
  margin-bottom: 0.5em;
  font-size: 0.7em;
}

/* ensure each checkbox line starts at left */
.real-estate-grid .grid-col label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}
.real-estate-grid .grid-col input[type="checkbox"] {
  margin-right: 0.5em;
  transform: scale(1.1);
}

.real-estate-bottom-right {
  background: #d0d0d0;
  border: solid 0.1em;
  border-color: #434343;
  padding: 0.5em 0.8em !important;
}


/* make numbered titles and their hr span the full row */
.formulator-group .section .section-title,
.formulator-group .section hr {
  flex: 0 0 100%;    /* occupy 100% of the flex line */
  width: 100%;       /* just in case */
  margin: 0;         /* remove any default margins that might shift it */
}

/* optional: give a bit of breathing room */
.formulator-group .section .section-title {
  margin-bottom: 0.5em;
  margin-top: 0.8em;
}


.col.left h4 {
  display: flex;
  justify-content: space-between; /* “Borrower” a la izquierda, span a la derecha */
  align-items: center;
  width: 100%;                    /* para que ocupe todo el ancho posible */
}
.borrower-display {
  white-space: nowrap;
  margin-left: 1rem;
  font-weight: normal;
}

.col.right h4 {
  display: flex;
  justify-content: space-between; /* texto a la izq, span a la der */
  align-items: center;
  width: 100%;
}
.coborrower-display {
  white-space: nowrap;
  margin-left: 1rem;
  font-weight: normal;
}

.azulitito h3 {
  color: rgb(7, 21, 212);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 5px 0;
}

.cuadititos {
  display: flex;
  justify-content: flex-end; /* alinea todo a la derecha */
  gap: 5px; /* separación uniforme */
  flex-wrap: nowrap; /* evita que se vayan a otra línea */
}

.cuadititos label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.cuadititos input[type="checkbox"] {
  margin-right: 4px; /* espacio entre checkbox y texto */
}

.prev-address-box{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:12px;
  margin:10px 0;
}

.remove-prev {
  background:#b60012 !important;
  padding: 5px 10px !important;
}

.prev-address-box .btn-remove-prev:hover{
  background:#810511;
  padding: 5px 10px;
}

/*GIF CARD CSS*/ 
/* === GIFT LETTER DETAILS FORM === */
.section-gift-letter {
  padding: 20px 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: 'Inter', Arial, sans-serif;
  color: #222;
}

/* Encabezados */
.section-gift-letter h4.section-title {
  font-size: 1.3em;
  font-weight: 600;
  color: #1b1b1b;
  margin-bottom: 15px;
}


/* Estado de foco */
.gld-input:focus,
.gld-select:focus {
  border-color: #0066ff;
  box-shadow: 0 0 4px rgba(0,102,255,0.3);
  outline: none;
  background: #fff;
  color: #000000 !important;
}

/* Labels */
.section-gift-letter label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #000000 !important;
}

/* Inputs en la misma línea */
.section-gift-letter .row-inline {
  display: flex;
  gap: 10px;
  align-items: center;
}
.section-gift-letter .row-inline > div {
  flex: 1;
}

/* Checkboxes */
.section-gift-letter .checkbox-group {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 15px 0;
}
.section-gift-letter .checkbox-group label {
  font-weight: 500;
  color: #000000 !important;
}
.section-gift-letter input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 8px;
  accent-color: #0066ff !important;
}

/* Ajuste para el texto “Bank Details” */
.section-gift-letter .bank-details-title {
  font-weight: 600;
  color: #000000;
  margin: 20px 0 10px;
  font-size: 1.1em;
}

/* Campo de moneda */
.section-gift-letter input.an-money {
  text-align: right;
  font-weight: 600;
  color: #000;
}

/* Responsivo */
@media (max-width: 768px) {
  .section-gift-letter .row-inline {
    flex-direction: column;
  }
}


/* Gift Letter: inputs y selects propios */
.gld-input,
 .gld-select,
.section-gift-letter input.gld-input,
.section-gift-letter select.gld-select,
.section-gift-letter input.gld-input:focus,
.section-gift-letter select.gld-select:focus {
  color: #000 !important;
  background: #fff;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  outline: none;
}

.section-gift-letter .gld-input::placeholder {
  color: #555;
  opacity: 1;
}

/* Asegura el texto negro incluso si un tema intenta override con -webkit-text-fill-color */
.section-gift-letter .gld-input,
.section-gift-letter .gld-select {
  -webkit-text-fill-color: #000;
}



/* Contenedor de la animación */
.gld-cardgift {
  width: 280px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gld-float 3s ease-in-out infinite;
  flex-shrink: 0;
  margin-top: 100px;
  margin-left: 50px;
 
}

/* Imagen GIF */
.gld-cardgift .gld-gif {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* Movimiento flotante */
@keyframes gld-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Estructura de la envoltura */
.gld-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

/* Responsivo */
@media (max-width: 768px) {
  .gld-wrap {
    flex-direction: column;
    align-items: center;
  }
  .gld-cardgift {
    margin-top: 20px;
  }
}


.section-4{
    display: flex;
    gap: 0.5em 2em;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }