:root {
  --bs-blue-light: #B4D4F1;
  --bs-grey-input-amount: #e0e0e0;
  --bs-danger-custom: #c91b4f;
}

/* View Transitions */
@view-transition {
  navigation: auto;
}

/*Altura mínima del contenido*/
main {
  min-height: calc(100vh - 215px - 110px);
  margin-top: 20px;
}

@media (max-width: 1200px) {
  main {
    margin-top: 20px;
  }
}

@media (max-width: 992px) {
  main {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  main {
    margin-top: 0px;
  }
}

@media (max-width: 442px) {
  main {
    margin-top: 0px;
  }
}

@media (max-width: 365px) {
  .container {
    margin-top: 20px;
  }
}

.container {
  max-width:  1140px;
}


.disabled-link {
  pointer-events: none;
  color: gray;
  text-decoration: none;
  cursor: default;
}

.text-justify {
  text-align: justify;
}

/* Botones personalizados */
.btn-violet {
  background-color: var(--bs-violet);
  color: var(--bs-white);
}

.btn-violet:is(:hover, :active, :checked, :focus) {
  background-color: var(--bs-principal);
  color: var(--bs-white);
}

.btn-outline-principal {
  color: var(--bs-principal);
  border-color: var(--bs-principal);
}

.btn-outline-principal:is(:hover, :active, :checked, :focus),
.btn-check:checked + .btn-outline-principal,
.btn-check:active + .btn-outline-principal,
.btn-outline-principal:active,
.btn-outline-principal.active,
.show > .btn-outline-principal.dropdown-toggle {
  background-color: var(--bs-violet);
  border-color: var(--bs-violet);
  color: var(--bs-white);
}

/* Alerts */
.alert-principal {
  background-color: var(--bs-principal);
  color: var(--bs-white);
}

/* Punteros */
.cursor-pointer {
  cursor: pointer;
}

/* Links */
.link-principal {
  color: var(--bs-principal);
  text-decoration: underline;
}

.link-principal:is(:hover, :active) {
  color: var(--bs-violet);
  opacity: 0.9;
}

/* Textos */
.text-principal {
  color: var(--bs-principal) !important;
}

.fs-7 {
  font-size: 0.95em;
}

/* Colores */
.text-danger-custom {
  color: var(--bs-danger-custom);
}

/* Input para ingresar un monto */
.amount-wrapper {
  position: relative;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 5px;
  overflow: hidden;
}

.amount-wrapper input {
  border: none;
  border-bottom: 5px solid var(--bs-principal);
  background: var(--bs-grey-input-amount);
  padding: 10px 15px 5px 35px;
  height: 55px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  box-sizing: border-box;
  font-size: 2em;
  text-align: center;
}

.amount-wrapper:focus-within {
  border: 4px solid #9D1D96;
}

.amount-wrapper .prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #1b2a4a;
  font-size: 35px;
  font-weight: bold;
}

/*Responsive de la clase amount-wrapper*/
.amount-wrapper-sm {
}

.amount-wrapper-sm input {
  height: auto !important;
  padding: 5px 10px 5px 35px;
  font-size: 1.3em !important;
}

.amount-wrapper-sm .prefix {
  font-size: 1.7em !important;
}

/* Borders */
.border-black {
  border-color: var(--bs-black-rgb) !important;
}

.border-bottom-danger {
  border-color: var(--bs-danger-custom) !important;
}


@media only screen and (max-width: 992px) {
  .w-md-75 {
    width: 75% !important;
  }
}

@media only screen and (max-width: 767px) {

  .w-sm-100 {
    width: 100% !important;
  }

}