/* --------------------------- Acordeón base ------------------------------- */
.accordion-item {
  margin-bottom: 10px;
}

.accordion-item .col-md-4,
.accordion-item .col-md-6 {
  padding-right: 0 !important;
}

.accordion-item.modal-calc__block:not(.accordion-open) {
  padding-bottom: 0;
  margin-bottom: 0;
}

.accordion-item.modal-calc__block:not(.accordion-open) .accordion-content {
  overflow: hidden;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 15px;
  cursor: pointer;
  font-weight: bold;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 50px;
}

.accordion-icon {
  transition: transform 0.25s ease-in-out;
  transform: rotate(180deg);
}
.accordion-open .accordion-icon {
  transform: rotate(0);
}

.accordion-content {
  height: 0;
  transition: height 0.25s ease-in-out;
  padding: 0 15px;
  background-color: #fff;
  overflow: visible;
}

.accordion-open .accordion-content {
  padding: 15px;
}
.accordion-open .accordion-content:not(.table-content) {
  padding: 15px 15px 15px 0;
}

#monthlyFeeDetails,
#extraordinaryPayments,
#extraordinaryPayments .accordion-content {
  padding-bottom: 0px;
}

#extraordinaryPayments .table-responsive {
  border: 0 !important;
  margin-bottom: 0 !important;
}

#extraordinaryPayments table th {
  text-align: left;
}

#extraordinaryPayments table td {
  background-color: inherit !important;
}

#extraordinaryPayments .col-md-6 {
  padding-left: 0;
}

#extraordinaryPayments .table-responsive .form-control:not(.checkbox-control) {
  min-width: 210px;
}

#extraordinaryPayments input[type="checkbox"]:checked::before {
  transform: translateX(-5px);
}

/* --------------------- Utilidades y micro-ajustes ------------------------ */
.col-xs-12 {
  padding-inline: 0 !important;
}
#monthlyFeeDetails,
#extraordinaryPayments,
.accordion-item:not(.accordion-open) {
  padding-top: 0 !important;
}

.fs-14 {
  font-size: 14px;
} /* por seguridad si no viene del theme */
.fw-bold {
  font-weight: 700 !important;
}
.mt-3 {
  margin-top: 1.5rem;
}
.sm-mt-3 {
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .sm-mt-3 {
    margin-top: -10px;
  }

  .md-pl-3 {
    padding-left: 1.5rem !important;
  }
}

/* --------------------------- Info box ----------------------------------- */
.info-box {
  color: var(--dark-blue);
  padding: 16px;
  background-color: #f0f2f7;
  font-size: 18px;
  margin-bottom: 30px;
}
.info-box a {
  text-decoration: underline;
  color: var(--light-blue);
  font-weight: bold;
}

/* === Radios Sí / No – estilo BPD (igual al mock) ======================= */
.modal-calc .radio-group {
  display: flex;
  align-items: center;
  gap: 32px; /* separa “Sí” y “No” */
  padding-top: 6px;
}

.modal-calc .radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--dark-blue);
  font-size: 16px;
  line-height: 1;
  margin: 0;
}

/* reset del radio nativo para dibujar el nuestro */
.modal-calc .radio input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--dark-blue); /* aro exterior azul oscuro */
  border-radius: 50%;
  background: #fff; /* fondo blanco como en el mock */
  display: grid;
  place-items: center;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* el punto celeste y el aro blanco interior */
.modal-calc .radio input[type="radio"]::after,
.modal-calc .radio input[type="radio"]::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s ease;
}

/* aro blanco interior para crear el “anillo” del diseño */
.modal-calc .radio input[type="radio"]::before {
  width: 14px;
  height: 14px;
  background: #fff;
}

/* punto celeste */
.modal-calc .radio input[type="radio"]::after {
  width: 20px;
  height: 20px;
  background: var(--light-blue); /* #00c1d5 */
}

/* estado seleccionado: muestra aro blanco + punto celeste */
.modal-calc .radio input[type="radio"]:checked::before,
.modal-calc .radio input[type="radio"]:checked::after {
  transform: scale(1);
}

/* accesibilidad: foco visible */
.modal-calc .radio input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 193, 213, 0.35);
}

/* estado deshabilitado (por si acaso) */
.modal-calc .radio input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------------- Toggle CON/SIN garantía -------------------------- */
/* Por defecto ocultamos lo exclusivo de garantía */
.mortgage-only {
  display: none;
}

.non-mortgage-only {
  display: block;
}

/* Mostrar cuando el radio "Sí" está activo (navegadores con :has) */
form:has(#hasMortgageYes:checked) .mortgage-only {
  display: block;
}

form:has(#hasMortgageYes:checked) .non-mortgage-only {
  display: none;
}

/* Si el bloque oculto es un acordeón completo, garantizamos su display */
form:has(#hasMortgageYes:checked) .mortgage-only.accordion-item {
  display: block;
}

/* Fallback para navegadores sin :has(): añade la clase .is-mortgage al <form> vía JS */
form.is-mortgage .mortgage-only {
  display: block;
}

/* ----------------------- Nice Select (si se usa) ------------------------- */
/* dropdown de cuotas */
#installments + .nice-select {
  width: 100%;
}

/* dropdown de fecha (extraordinarios) */
select.extraordinary_date {
  position: absolute;
  right: 500px;
  pointer-events: none;
  opacity: 0 !important;
}

.nice-select.extraordinary_date.disabled {
  background-color: var(--bg-gray);
  border: 1px solid var(--border-gray) !important;
}
.nice-select.extraordinary_date.disabled:after {
  content: "";
  background-image: none;
}

/* contenido actual del nice-select sin barra visible */
.nice-select .current {
  font-size: 16px;
  width: calc(100% - 24px);
  display: inline-block;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nice-select .current::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* ------------------------- Botones/links -------------------------------- */
.calc__btns-layout {
  justify-content: space-between;
  max-width: 470px;
  margin-inline: auto;
}

/* Sombras de hover coherentes con theme */
.calc__hovered_orange:hover {
  background-color: var(--medium-orange);
}
.calc__hovered_blue:hover {
  background-color: var(--medium-blue);
}

/* ------------------------ Accesibilidad visual --------------------------- */
/* Ayuda a distinguir inputs de sólo lectura frente a editables (refuerza el theme) */
.form-control.form-control--disabled::placeholder {
  color: var(--label-gray);
}
#formPersonalLoan .with-currency::placeholder {
  color: var(--label-gray);
}


#modalClose {
  visibility: hidden;
}