/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./assets/src/css/solicitud-cda/page-solicitud-cda.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
#solicitud-cda {
  background-color: #f5f7fb;
  min-height: 75vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 193px;
  padding-bottom: 193px;
  padding-right: 15px;
  padding-left: 15px;
  font-family: "telefonica";
}

#solicitud-cda .aling-card-1 {
  display: flex;
  align-items: center;
  justify-self: center;
  justify-content: center;
}

#solicitud-cda .container {
  width: 100%;
}

/* Títulos */
#solicitud-cda #títuloPrincipal .h3-title {
  color: var(--color-azul-movistar) !important;
  font-size: clamp(30px, 4vw, 45px);
  margin-bottom: 5px;
}

#solicitud-cda #títuloPrincipal p {
  color: var(--color-azul-oscuro-movistar) !important;
  font-size: clamp(12px, 2vw, 16px);
}

#solicitud-cda .mb-3 {
  margin-bottom: 1rem;
}

#solicitud-cda .mb-4 {
  margin-bottom: 1.5rem;
}

#solicitud-cda .mb-1 {
  margin-bottom: 0.25rem;
}

/* Tarjeta de datos del cliente */
#solicitud-cda .card-main {
  height: 167px;
  background: var(--color-blanco-movistar);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgb(0 0 0/20%);
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: 57.5px;
  padding-right: 57.5px;
  padding-top: 34px;
  padding-bottom: 34px;
  margin: 0 auto;
}

#solicitud-cda .avatar-circle {
  width: clamp(40px, 8vw, 70px);
  height: clamp(40px, 8vw, 70px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-azul-oscuro-movistar);
  color: var(--color-azul-movistar);
  font-size: clamp(18.29px, 4vw, 32px);
  flex-shrink: 0;
}

#solicitud-cda .card-name {
  color: var(--color-azul-oscuro-movistar);
  margin-bottom: 0.25rem;
  font-size: clamp(14px, 2vw, 24px);
}

#solicitud-cda .card-sub {
  font-size: 0.9rem;
  color: var(--color-gris-digital-movistar);
  font-size: clamp(10px, 2vw, 16px);
}

#solicitud-cda .card-label {
  font-size: clamp(10px, 2vw, 14px);
  color: var(--color-gris-digital-movistar);
  margin-bottom: 4px;
}

#solicitud-cda .line-height-1 {
  line-height: 1;
}

#solicitud-cda .card-value {
  font-size: clamp(14px, 2vw, 24px);
  color: var(--color-azul-oscuro-movistar);
}

#solicitud-cda #direccionUser {
  margin-top: 5px;
}

#solicitud-cda .card-label-direccion {
  font-size: clamp(10px, 2vw, 14px);
  color: var(--color-gris-digital-movistar);
  /* margin-top: 5px; */
  margin-bottom: 5px;
}

#solicitud-cda .card-value-direccion {
  font-size: clamp(13px, 2vw, 18px);
  color: var(--color-azul-oscuro-movistar);
}

#solicitud-cda .small {
  font-size: 0.9rem;
  color: var(--color-azul-movistar);
  margin-bottom: 0.25rem;
}

#solicitud-cda .text-muted {
  font-size: clamp(10px, 2vw, 16px);
  color: var(--color-gris-digital-movistar) !important;
}

/* Sección de texto */
#solicitud-cda .section-title {
  text-align: center;
  color: var(--color-azul-oscuro-movistar);
  font-size: 0.95rem;
  margin-bottom: 15px;
  margin-top: 15px;
}

#solicitud-cda .section-title-bold {
  font-family: "telefonica";
  font-weight: 500;
  text-align: center;
  color: var(--color-azul-oscuro-movistar);
  font-size: 24px;
  margin-bottom: 15px;
  margin-top: 5px;
}

#solicitud-cda .section-title a#cdaModal {
  font-family: "telefonica";
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  color: var(--color-azul-oscuro-movistar);
  font-size: 18px;
  margin-bottom: 15px;
  margin-top: 15px;
}

#solicitud-cda .section-title a#cdaModal:hover {
  color: var(--color-azul-digital-movistar);
}

/* Formulario */
#solicitud-cda form {
  width: 100%;
  max-width: 100%;
}

#solicitud-cda .form-label {
  font-weight: 500;
  color: var(--color-azul-movistar);
  margin-bottom: 8px;
  display: block;
  font-size: 0.95rem;
}

#solicitud-cda .mb-3,
#solicitud-cda .mb-4 {
  margin-bottom: 24px;
}

#solicitud-cda .form-floating {
  width: 100%;
  max-width: 425px !important;
  height: 56px;
}

#solicitud-cda .form-control {
  border: 1px solid var(--color-gris-3-movistar);
  border-radius: 5px;
  font-size: 1rem;
  background: var(--color-blanco-movistar);
  color: var(--color-gris-digital-movistar) !important;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
  padding-left: 20px;
  padding-right: 20px;
}

#solicitud-cda #correo {
  color: var(--color-gris-4-movistar);
}

#solicitud-cda #correo:focus {
  background-color: #fff;
  border: 1px solid var(--color-gris-3-movistar);
}

#solicitud-cda .form-control:focus {
  border-color: var(--color-azul-movistar) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.form-floating > .label-custom,
.label-custom {
  color: var(--color-azul-movistar);
  padding-left: 20px;
  padding-right: 20px;
}

#solicitud-cda .form-control:focus {
  border-color: var(--color-gris-3-movistar) !important;
  box-shadow: none;
  outline: none;
}

/* Contenedor de botones */
#solicitud-cda .d-flex.justify-content-center {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-direction: column;
}

label#numeroCDA-error {
  color: #f00;
}

/* Botones */
#solicitud-cda .btn {
  width: 240px;
  height: 44px;
  font-size: 14px;
  padding: 12px 40px;
  border-radius: 5px;
  font-family: "telefonica";
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
}

#solicitud-cda .btn:focus {
  outline: none;
}

#solicitud-cda .btn-outline-primary-custom {
  background: var(--color-blanco-movistar);
  color: var(--color-azul-movistar);
  border: 1.5px solid var(--color-azul-movistar);
}

#solicitud-cda .btn-outline-primary-custom:hover {
  background: #f0f8ff;
}

#solicitud-cda .btn-primary-custom {
  background: var(--color-azul-digital-movistar);
  color: var(--color-blanco-movistar);
  border: none;
}

#solicitud-cda .btn-primary-custom:hover {
  background: var(--color-azul-movistar);
}

#solicitud-cda #containerCheckbox {
  margin-bottom: 30px;
}

#procesandoSolicitud {
  width: 240px;
  height: 44px;
  font-size: 14px;
  padding: 12px 40px;
  border-radius: 5px;
  font-family: "telefonica";
  border: none;
  transition: all 0.2s;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
  background: var(--color-azul-digital-movistar);
  color: var(--color-blanco-movistar);
  border: none;
}

/* Estilos del checkbox */
#solicitud-cda .form-check-input {
  border: 2px solid var(--color-gris-3-movistar) !important;
  /* Gris 4 */
  width: 1.25rem;
  height: 1.25rem;
}

#solicitud-cda .form-check-input:checked {
  background-color: var(--color-azul-digital-movistar) !important;
  border-color: var(--color-azul-digital-movistar) !important;
}

#solicitud-cda .form-check-label {
  font-size: 14px !important;
  color: var(--color-azul-oscuro-movistar) !important;
  /* Azul oscuro */
  margin-left: 0.5rem;
  margin-bottom: 0;
}

#solicitud-cda .form-check-input:focus {
  border-color: var(--color-azul-digital-movistar) !important;
  box-shadow: none;
  outline: 0;
}

#solicitud-cda .form-check-input:not(:checked) {
  border-color: var(--color-gris-3-movistar) !important;
}

/* Clases de espaciado */
#solicitud-cda .gap-3 {
  gap: 1rem;
}

#solicitud-cda .gap-4 {
  gap: 1.5rem;
}

#solicitud-cda .ms-md-4 {
  margin-left: 1.5rem;
}

#solicitud-cda .ms-md-4 {
  margin-left: 1.5rem;
}

#solicitud-cda .d-flex {
  display: flex;
  align-items: center;
}

#solicitud-cda .flex-grow-1 {
  flex-grow: 1;
}

#solicitud-cda .flex-column {
  flex-direction: column;
}

#solicitud-cda .flex-md-row {
  flex-direction: row;
}

#solicitud-cda #formSolicitudCDA #containerCDA {
  margin-bottom: 0px;
}

/* Dejar arriba el label SIEMPRE */
#solicitud-cda #formSolicitudCDA .form-floating > label {
  opacity: 1 !important;
  font-size: 14px !important;
  transform: scale(0.85) translateY(-0.3rem) translateX(0.15rem) !important;
}

#solicitud-cda #formSolicitudCDA .form-floating > .form-control::-moz-placeholder {
  opacity: 1 !important;
  color: var(--color-gris-4-movistar) !important;
  position: absolute !important;
  top: 25px !important;
}

#solicitud-cda #formSolicitudCDA .form-floating > .form-control::placeholder {
  opacity: 1 !important;
  color: var(--color-gris-4-movistar) !important;
  position: absolute !important;
  top: 25px !important;
}

#solicitud-cda #formSolicitudCDA .form-floating > .form-control:focus::-moz-placeholder {
  opacity: 1 !important;
  color: var(--color-gris-4-movistar) !important;
  position: absolute !important;
  top: 25px !important;
}

#solicitud-cda #formSolicitudCDA .form-floating > .form-control:focus::placeholder {
  opacity: 1 !important;
  color: var(--color-gris-4-movistar) !important;
  position: absolute !important;
  top: 25px !important;
}

#solicitud-cda .card-main {
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
}

/* Estilos del Modal Personalizado */
#tarjetaCDA .modal-activar-custom {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#tarjetaCDA div#títuloPrincipal {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-family: "telefonica";
}

#tarjetaCDA .row.títuloPrincipalInfo {
  width: clamp(264px, 60vw, 385.62px);
}

#tarjetaCDA .row.títuloPrincipalInfo p {
  color: var(--color-blanco-movistar);
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info1 {
  font-size: clamp(14px, 2vw, 16px);
  margin-top: clamp(20px, 2vw, 25.9px);
  margin-bottom: clamp(7.68px, 1vw, 12.55px) !important;
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info2 {
  margin-top: clamp(16.27px, 2vw, 25.81px);
  margin-bottom: clamp(2.94px, 1vw, 4.8px) !important;
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info3 {
  margin-top: 0px;
  margin-bottom: 0px !important;
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info4 {
  margin-top: clamp(2.94px, 1vw, 4.8px);
  margin-bottom: clamp(16.27px, 2vw, 25.81px) !important;
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info2,
#tarjetaCDA .row.títuloPrincipalInfo p.text-info3 {
  font-family: "telefonicaLight" !important;
  font-size: clamp(12.29px, 2vw, 20.08px);
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info4 {
  font-family: "telefonica" !important;
  color: #0099FF;
  font-weight: bold;
  font-size: clamp(12.29px, 2vw, 20.08px);
}

#tarjetaCDA .row.títuloPrincipalInfo p.text-info5 {
  font-size: clamp(14px, 2vw, 16px);
  margin-top: clamp(16.27px, 2vw, 25.81px);
  margin-bottom: clamp(10.25px, 2vw, 16.27px) !important;
}

#tarjetaCDA .row.títuloPrincipalInfo .col-12 {
  width: clamp(236.15px, 23vw, 100%);
  padding: 0px;
  margin: 0;
}

#tarjetaCDA .modal-activar-custom .modal-body {
  padding: 45.57px 46.77px;
}

#tarjetaCDA .modal-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: var(--color-azul-claro-movistar);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tarjetaCDA .modal-icon i {
  font-size: 40px;
  color: var(--color-blanco-movistar);
}

#tarjetaCDA .modal-title-custom {
  font-size: 28px;
  color: var(--color-azul-movistar);
  margin-bottom: 10px;
  font-weight: bold;
  font-family: "telefonica";
}

#tarjetaCDA .modal-text-custom {
  font-size: 16px;
  color: var(--color-azul-oscuro-movistar);
  margin-bottom: 15px;
  font-weight: 500;
}

#tarjetaCDA .modal-description {
  font-size: 14px;
  color: var(--color-gris-digital-movistar);
  margin-bottom: 25px;
  line-height: 1.5;
}

#tarjetaCDA .modal-link {
  color: var(--color-azul-digital-movistar);
  text-decoration: none;
  font-weight: 500;
}

#tarjetaCDA .modal-link:hover {
  text-decoration: underline;
}

/* ---- */
#tarjetaCDA .modal-footer-text {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-gris-1-movistar);
}

#tarjetaCDA .modal-checkbox-link {
  text-decoration: none;
  color: var(--color-gris-digital-movistar);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

#tarjetaCDA .modal-checkbox-link:hover {
  color: var(--color-azul-digital-movistar);
}

#tarjetaCDA .modal-checkbox-link i {
  font-size: 16px;
}

/* Modal fade fade transparente */
#tarjetaCDA.modal {
  z-index: 9999 !important;
  background-color: transparent !important;
}

#tarjetaCDA .modal-dialog {
  width: clamp(326px, 90vw, 750px) !important;
  max-width: none !important;
}

#tarjetaCDA .modal-content {
  background-color: var(--color-azul-movistar);
  height: clamp(414px, auto, 350px) !important;
  display: flex;
  color: var(--color-blanco-movistar) !important;
  flex-direction: column;
  justify-content: center;
}

.modal-backdrop.fade {
  display: none !important;
}

#tarjetaCDA.fade {
  background-color: hsla(0, 0%, 0%, 0.6) !important;
}

#tarjetaCDA.show {
  background-color: hsla(0, 0%, 0%, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#tarjetaCDA .modal-dialog {
  width: clamp(326px, 90vw, 573px) !important;
  height: clamp(326px, 90vw, 697px) !important;
  max-width: none !important;
  margin: auto !important;
}

/* modal info*/
#activar-thankyou #títuloPrincipal .h3-title {
  color: var(--color-blanco-movistar) !important;
  font-family: "telefonica";
  font-weight: 500;
  font-size: clamp(20px, 4vw, 31.79px);
  margin-bottom: 5px;
}

#activar-thankyou #títuloPrincipal p {
  /* font-size: clamp(12.29px, 2vw, 16px) */
}

#activar-thankyou .títuloPrincipalInfocard {
  text-align: center;
  color: #fff;
  background-color: #404040;
  border-radius: 8.36px;
}

/* modal btn*/
#tarjetaCDA .btn {
  align-items: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  font-family: telefonica;
  font-size: 14px;
  gap: 8px;
  height: 44px;
  justify-content: center;
  min-width: 160px;
  padding: 12px 40px;
  transition: all 0.2s;
  width: 240px;
  margin-top: 25.1px;
}

#tarjetaCDA .btn:focus {
  outline: none;
}

#tarjetaCDA .btn-outline-primary-custom {
  background: var(--color-blanco-movistar);
  border: 1.5px solid var(--color-azul-movistar);
  color: var(--color-azul-movistar);
}

#tarjetaCDA .btn-outline-primary-custom:hover {
  background: #f0f8ff;
}

#tarjetaCDA .btn-primary-custom {
  background: var(--color-blanco-movistar);
  border: none;
  color: var(--color-azul-digital-movistar);
}

#tarjetaCDA .btn-primary-custom:hover {
  color: var(--color-azul-claro-movistar);
}

/* Responsive */
@media (max-width: 992px) {
  #solicitud-cda .card-main {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  #solicitud-cda .d-flex.flex-md-row {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #solicitud-cda {
    padding: 20px 15px;
  }
  #solicitud-cda .d-flex.justify-content-center {
    flex-direction: column;
  }
  /* #solicitud-cda .btn {
      width: 100%;
      min-width: auto;
  } */
  #solicitud-cda .h3 {
    font-size: 1.5rem;
  }
  #tarjetaCDA .modal-activar-custom .modal-body {
    padding: 19.48px 37.37px 32.21px 37.37px;
  }
  #solicitud-cda {
    padding-top: 143px;
    padding-bottom: 222px;
  }
}
@media (max-width: 480px) {
  #solicitud-cda .aling-card-1 {
    justify-content: center;
    align-items: flex-start;
  }
  #solicitud-cda .fechaUser {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #solicitud-cda .order-2 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  #solicitud-cda #direccionUser {
    margin-top: 0px !important;
  }
  #solicitud-cda .card-main {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 300px;
  }
  #solicitud-cda .form-floating {
    max-width: 300px !important;
  }
}

/*# sourceMappingURL=page-solicitud-cda.bundle.css.map*/