/* ══════════════════════════════════════════════════
  FORMS
══════════════════════════════════════════════════ */

.form__grid {
	display: grid;
	gap: 1em;
  margin: 0;
}

.credisur__blue__card {
	position: relative;
	box-shadow: 0px 2px 15px rgb(101 213 255 / 30%);
	padding: 1em;
	border-radius: 8px;
	background: var(--very-light-lightblue);
}

.credisur__white__card {
  position: relative;
	box-shadow: 0px 2px 15px rgba(137, 173, 185, 0.3);
	padding: 2em 1em 1em;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
}

.credisur__blue__card .section__title,
.credisur__white__card .section__title {
	display: flex;
  /* text-shadow: -2px 0 #5acbff47; */
  font-size: 1.2em;
  padding: 8px 20px;
  background: transparent;
  color: #484849;
  border-radius: 50px;
  justify-content: center;
  font-family: inherit;
  font-weight: bold;
}

.sub__span {
  font-size: 0.85em;
}

.small__text {
	font-size: 0.75em;
	text-align: center;
}

.radio__li {
  border: solid 2px lightgray;
  border-radius: 0.5em;
  background: white;
  padding: 1em;
  display: grid;
  grid-template-columns: 1.25em 5em 1fr;
  gap: 0.5em;
  font-weight: normal;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.radio__li:has(input[type="radio"]:checked){
  background: var(--lighter-blue-50);
  border-color: var(--lighter-blue);
}

.radio__li b{
  padding-left: 1.25em;
}

.credisur__field__control input:focus,
.credisur__field__control select:focus,
.btn__multiple__credisur:focus,
.btn__info__credisur:focus {
    border-radius: .5rem!important;
    outline: none!important;
    border: 3px solid #21d5ed!important;
  	box-shadow: 0 0 0 3px rgb(101 213 255 / 12%)!important;
}

.credisur__field__btn__container {
  display: flex;
  gap: 0.5em;
}

.credisur__field__btn__container button,
.credisur__field__btn__container input[type="button"],
.credisur__field__btn__container input[type="submit"],
.credisur__field__btn__container input[type="reset"] {
  flex: 1;
}

.credisur__back__arrow {
	background: white;
	color: var(--darker-blue);
  padding: 0.25em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  position: absolute;
  top: 1em;
  left: 1em;
	cursor: pointer;
}

.credisur__field__multiple {
  display: flex;
  gap: 0.5em;
}

.credisur__field__multiple > .btn__multiple__credisur {
  flex: 1;
  border-radius: 0.5em;
  border: solid 2px lightgray;
  background: white;
  padding: 0.5em;
}

.credisur__field__multiple > .btn__multiple__credisur.selected {
  border-color: var(--darker-blue);
  color: var(--darker-blue-150);
  background: var(--lighter-blue-50);
}

.slide__buttons {
  --columns: 2;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
  background: #E8F0FE;
  padding: 0.25em 0.35em;
  border-radius: .5rem;
  overflow: hidden;
}


.slider {
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.35em;
  width: calc((100% - 0.7em) / 2); /* padding horizontal */
  background: white;
  border-radius: .5rem;
  box-shadow: 0px 1px 1px rgb(0 0 0 / 15%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

/* Para activar el movimiento del slider hay que usar este codigo con el tipo referido:
    .slide__buttons[data-active="pagos"] .slider {
      transform: translateX(100%);
    }
*/

.slide__buttons .credisur__slide__button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 0.65rem .35rem 1.65rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  font-weight: 400;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
  width: 100%;
  cursor: pointer;
  background: transparent;
  z-index: 1;
}

.credisur__slide__button:hover {
  color: var(--darker-blue);
}



/* ══════════════════════════════════════════════════
  BIG INFO CARD
══════════════════════════════════════════════════ */
.credisur__big__info__card {
  background: white;
  box-shadow: 0px 1px 3px rgb(0 0 0 / 15%);
  border-radius: 0.75em;
  display: grid;
  gap: 0.15em;
  grid-template-columns: 15em 6em;
  padding: 0.5em;
}

.info__comercio__fecha {
  display: grid;
  grid-template-columns: 3em 1fr;
  gap: 0.5em;
  align-items: center;
}

.info__comercio__fecha .credisur__info__icon {
  align-self: center;
  padding: 0.5em;
  width: 3em;
  height: 3em;
  background: coral;
  border-radius: 0.5em;
}

.info__titulo > :first-child {
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.15em;
}

.info__comercio__importe {
  align-self: center;
}

.info__comercio__importe :first-child {
  font-weight: bold;
}

.credisur__big__info__card .link {
  grid-column: span 2;
  justify-self: end;
  color: #01829f;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  border-top: solid 1px rgba(211, 211, 211, 0.452);
  margin-top: 0.5em;
  padding-top: 0.5em;
}

.credisur__big__info__card .link .lucide__small{
  padding: 0.3em;
  stroke-width: 4;
}


/* ══════════════════════════════════════════════════
  CREDISUR CHECKBOX CARD
══════════════════════════════════════════════════ */
.credisur__checkbox__card {
  background: white;
  box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 15%);
  border-radius: 0.75em;
  display: grid;
  gap: 0.5em;
  grid-template-columns: 15em 1em;
  padding: 1em;
  margin: auto;
  justify-self: center;
  cursor: pointer;
}

.credisur__checkbox__card *:not(input, .info__icon, .active__input){
  pointer-events: none;
}

.credisur__checkbox__card:hover {
  box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 35%);
}

.credisur__checkbox__card:has(input[type="radio"]:checked) {
  box-shadow: 0px 0px 2px 1px var(--darker-blue);
}

.credisur__checkbox__card .credisur__info__icon {
  align-self: start;
  background-color: var(--very-light-lightblue);
  color: var(--darker-blue);
}

.credisur__checkbox__card .lucide__edit {
  width: 1.25em;
  margin-left: -4px;
}



/* ══════════════════════════════════════════════════
  CREDISUR GLOW CARD
══════════════════════════════════════════════════ */
.credisur__blue__glow__card {
  display: grid;
  grid-template-columns: 2em 1fr;
  align-items: center;
  border-radius: 0.5em;
  background: linear-gradient(90deg, var(--darker-blue), var(--lighter-blue));
  justify-items: start;
  color: white;
  padding: 0.75em;
  gap: 0 0.75em;
}

.blue__glow__icon {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  background: var(--lighter-blue);
  padding: 0.15em;
  border-radius: 0.5em;
}

.blue__glow__important {
  font-size: 2em;
}

/* ══════════════════════════════════════════════════
  CREDISUR BUTTON ROW
══════════════════════════════════════════════════ */
.credisur__requisitos__row {
  padding: 0.5em 1em;
  display: flex;
  gap: 0.5em;
  border-top: solid 2px white;
  align-items: center;
  text-align: left;
  background: white;
  cursor: pointer;
}

.bg-green {
  background-color: #ccfbcc !important;
  --state-color: #1F8F5F;/*green;*/
  cursor: default;
}

.bg-red {
  background-color: #fde6e8 !important;
  --state-color: #C73A3A/*red*/;
}

.bg-red:hover {
  animation: mini-grow 0.2s ease-in
}

.credisur__requisitos__title {
  border-top-left-radius: 0.75em;
  border-top-right-radius: 0.75em;
  padding: 0.5em 1em;
  text-align: center;
  font-weight: bold;
  margin: auto;
  background-color: #66d6ff40;
}

.credisur__requisitos__row .lucide {
  color: var(--state-color);
  stroke-width: 3px;
}
  
.credisur__requisitos__row.is__first {
  border-top-left-radius: 0.75em;
  border-top-right-radius: 0.75em;
}

.credisur__requisitos__row:last-child {
  border-bottom-left-radius: 0.75em;
  border-bottom-right-radius: 0.75em;
}

.credisur__requisitos__row :last-child {
  margin-left: auto;
  color: var(--state-color);
  font-weight: bold;
}

.mensaje__info {
  border-radius: 1em;
  border: solid 1px rgba(252, 232, 152);
  box-shadow: 0px 0px 5px 1px rgba(252, 232, 152);
  background: rgba(254, 252, 244);
  color: rgba(168, 125, 133);
  font-size: 0.8em;
  font-weight: bold;
  padding: 1.5em;
  text-align: center;
}

.green__info__card {
  border-radius: 1em;
  border: solid 1px rgba(152, 252, 178, 0.9);
  box-shadow: 0px 0px 5px 1px rgba(152, 252, 178, 0.9);
  background: rgba(244, 254, 248, 1);
  color: rgba(70, 130, 90, 1);
  font-size: 0.8em;
  padding: 1.5em;
  text-align: left;
  display: grid;
  gap: 0.25em 1em;
  grid-template-columns: 2em 1fr;
  justify-content: start;
  justify-items: start;
}

.yellow__info__card {
  border-radius: 1em;
  border: solid 1px rgba(252, 232, 152);
  box-shadow: 0px 0px 5px 1px rgba(252, 232, 152);
  background: rgba(254, 252, 244);
  color: rgba(168, 125, 133);
  font-size: 0.8em;
  padding: 1.5em;
  text-align: left;
  display: grid;
  gap: 0.25em 1em;
  grid-template-columns: 2em 1fr;
  justify-content: start;
  justify-items: start;
}

.green__info__card .lucide__icon,
.yellow__info__card .lucide__icon{
  grid-row: span 2;
}

.credisur__link {
  color: var(--darker-blue);
  font-weight: bold;
}

.credisur__link:hover {
  color: var(--lighter-blue);
}

.no__btn {
  background: transparent!important;
  border: none!important;
  margin: auto;
  width: fit-content;
}



/* ══════════════════════════════════════════════════
  MODULOS
══════════════════════════════════════════════════ */
#left-menu {
  box-shadow: none!important;
}

#left-menu .link__block {
  background-color: rgb(101 213 255 / 10%);
  background-color: var(--very-light-lightblue);
  border-color: transparent;
}

#left-menu .link__block .footer-btn {
  display: block;
  background-color: transparent;
  border-color: transparent;
  color: #195776;
  font-size: 12px;
}

.link__block {
  background: #eaf5fb;
  background: var(--very-light-lightblue);
  padding: 0.15em 0.3em;
  border-radius: 0.5em;
  border: solid 1px #e0dbd1;
  box-shadow: 0 0 12px -2px #00aaff59;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: 0.35s transform;
}

.link__block:hover {
  transform: scale(1.1);
}

.link__block i {
  color: #195776;
}

.link__block .footer-btn {
    min-width: 5em;
    text-align: center;
}

/* ══════════════════════════════════════════════════════
  LOADING
═════════════════════════════════════════════════════════ */
.lucide__loading {
  width: 2.25em;
  height: 2.25em;
  color: var(--darker-blue);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.lucide__spin {
  animation: spin 1s linear infinite;
}












/* ══════════════════════════════════════════════════════
  POP UP (Clientes)
═════════════════════════════════════════════════════════ */
/* .credisur__pop.pop__up {
  font-family: 'Inter';
  position: relative;
  padding: 0.8em;
  border-radius: 1em;
  background-color: white;
  box-shadow: 0 1px 6px 0 #20212447;
  max-width: 24em;
  margin-inline: 1em;
}

div.credisur__pop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1em;
  background: linear-gradient(90deg, var(--darker-blue), var(--lighter-blue));
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

.credisur__pop .close__pop {
  content: "X";
  position: absolute;
  top: 1.5em;
  right: 1.25em;
  font-size: 1em;
  width: 1.5em;
  height: 1.5em;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  border-radius: 40em;
  background: lightgray;
  color: white;
  align-items: center;
  justify-content: center;
}

.pop__up__bg {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: rgb(211 211 211 / 50%);
  z-index: 2;
}

.pop__up {
  position: relative;
  padding: 0.8em;
  border-radius: 0.25em;
  background-color: #0b809c;
  box-shadow: var(--box-shadow);
  max-width: 600px;
  margin-inline: 1em;
}

.pop__up .icon__container {
  display: grid;
  justify-items: center;
  margin-top: 0.5em;
}

#msg__info {
  background-color: white;
  padding: 0.5em;
  border-radius: 0.25rem;
  font-size: 0.9em;
  text-align: center;
}

#msg__info .msg__title {
  padding: 0.3em 0.5em;
  border-radius: 0.25rem;
  width: fit-content;
  margin: auto;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 1.2em;
  text-transform: uppercase;
}

#msg__info .msg__subtitle {
  padding-inline: 1em;
}

#msg__info .msg__grid {
  display: grid;
  gap: 0.5em;
}

#msg__info .msg__div {
  display: flex;
  align-items: center;
  background: #e7f1fd;
  text-align: left;
  border-radius: 8px;
  padding: 1em;
}

.pop__up .btn__grid {
  display: grid;
  margin-top: 1em;
}

.lucide__alert {
  width: 2.25em;
  height: 2.25em;
  color: orange;
  background: #fbf099;
  border-radius: 0.5em;
  padding: 0.25em;
  margin-top: 0.5em;
}

.close__pop {
  content: "X";
  position: absolute;
  top: 1.7em;
  right: 1.6em;
  font-size: 0.6em;
  font-weight: bold;
  cursor: pointer;
  padding: 0.1em 0.4em 0em;
  border-radius: 0.25em;
  background: red;
  color: white; 
} */

/* ══════════════════════════════════════════════════════
  POP UP --> Se abre con openClosePopUp() de components.js
═════════════════════════════════════════════════════════ */
/* div.pop-up {
  font-family: 'Inter', 'Open Sans';
  position: relative;
  padding: 0.8em;
  border-radius: 1em;
  background-color: white;
  box-shadow: 0 1px 6px 0 #20212447;
  max-width: 26em;
  margin-inline: 1em;
}

div.pop-up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1em;
  background: linear-gradient(90deg, #00afd7, #65d5ff);
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

.pop-up-bg {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: rgb(211 211 211 / 50%);
  z-index: 2;
}

.pop-up {
  position: relative;
  padding: 0.8em;
  border-radius: 0.25em;
  background-color: #0b809c;
  box-shadow: var(--box-shadow);
  max-width: 600px;
  margin-inline: 1em;
}

#msg-info {
  background-color: white;
  padding: 0.5em;
  border-radius: 0.25rem;
  font-size: 0.9em;
  text-align: center;
}

#msg-info .msg-title {
  padding: 0.3em 0.5em;
  border-radius: 0.25rem;
  width: fit-content;
  margin: auto;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 1.25em;
}

#msg-info .msg-subtitle {
  padding-inline: 1em;
}

#msg-info .msg-grid {
  display: grid;
  gap: 0.5em;
}

#msg-info .msg-div {
  display: flex;
  align-items: center;
  background: #e7f1fd;
  text-align: left;
  border-radius: 8px;
  padding: 1em;
}

.closing__in {
  margin-bottom: -1.25em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

div.pop-up .btn__info__credisur {
  max-width: none;
  cursor: pointer;
  width: auto;
}

div.pop-up .pop-lucide {
  margin-top: 1.5em;
  justify-self: center;
}

div.pop-up .lucide-pop {
  width: 3em;
  height: 3em;
  border-radius: 50em;
  background: var(--lighter-blue-50);
  padding: 0.35em;
  color: var(--darker-blue);
  border: solid 1px var(--darker-blue);
  outline: solid 1px var(--lighter-blue-50);
  outline-offset: 0.35em;
}

.close__pop {
  content: "X";
  position: absolute;
  top: 1.7em;
  right: 1.6em;
  font-size: 0.6em;
  font-weight: bold;
  cursor: pointer;
  padding: 0.1em 0.4em 0em;
  border-radius: 0.25em;
  background: red;
  color: white;
} */