@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap');

 .row {
    justify-content: center;
    margin-bottom: 2rem !important;
 }

 .col-md-12 {
    margin-top: 2rem !important;
 }

 .card-completo {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
 }

 .card-imagen img {
     padding-bottom: 2rem;
     width: 100%;
     height: auto;
 }

 .card-imagen img:hover {
     transform: scale(1.07);
     transition: all 0.2s ease-out;
 }

 .card-plain {
     border-radius: 0.5rem !important;
     width: 100% !important;
 }

 .card-header {
     border-top-left-radius: 2rem !important;
     border-top-right-radius: 2rem !important;
 }

 .card-body {
     border-bottom-left-radius: 2rem !important;
     border-bottom-right-radius: 2rem !important;
 }

 .card-plain,
 .card-header,
 .card-body {
     background: rgba(255, 255, 255, 0.173) !important;
     backdrop-filter: blur(4px) !important;
 }

 .cuenta {
     padding-top: 3rem;
 }

 .cuenta a,
 .remember-forgot a {
     color: #0F6C71 !important;
     font-weight: bold;
 }

 .remember-forgot input {
     border: 1px solid #0F6C71 !important;
     border-radius: 50% !important;
 }

 .remember-forgot label {
     color: #0F6C71 !important;
     font-weight: bold;
     margin: 0;
 }

 .card-cuerpo-header img {
     width: 100%;
     padding-bottom: 2rem;
 }

 .imagen-cuerpo {
     background-image: url(./img/registro1.jpg);
     background-size: auto;
     background-position: right;
     background-repeat: no-repeat;
 }


 .imagen-cuerpo-text {
     padding-right: 7rem;
 }

 .card-text,
 .imagen-cuerpo-text {
     color: #0F6C71 !important;
     font-family: 'Baloo 2', cursive;
     font-size: 3rem
 }

 .remember-forgot {
     display: flex;
     justify-content: space-evenly;
     padding-bottom: 2rem;
     width: 100%;
 }

 .card-cuerpo {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .input-email,
 .input-password {
     font-family: 'Font Awesome 5 Free';
     font-weight: 700;
 }

 .input-email input,
 .input-password input {
     padding-left: 1.5rem;
     border-radius: 25px;
     width: 100%;
     border: 3px solid #26C4C3;
 }


 .btn-ingresar {
     color: white;
     font-size: 1.5rem;
     border-radius: 25px;
     width: 50% !important;
     height: 50% !important;
     background: #0F6C71;
     font-family: 'Baloo 2', cursive;
 }

 ::placeholder {
     color: #808080;
 }

 .footer,
 .navbar {
     display: none;
 }

 /* ICONO SELECT */
 /* select documento */
 select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;

 }

 .rotate {
     transform: rotate(180deg);
     transition: transform .3s;
 }

 .fa-chevron-down {
     transition: transform .3s;
     pointer-events: none;
 }

 #grupo__selectTipoDoc,
 #grupo__selectVives,
 #grupo__selectMotivo,
 #grupo__selectAyuda,
 #estadoR,
 #provinciaR,
 #distritoR,
 #grupo__genero,
 #pais,
 #selectPais,
 #grupo__provincia,
 #grupo__distrito {
     position: relative;
 }

 /*.fa-chevron-down {
    pointer-events: none;
    
  }*/

 .letra-select {
     padding-right: 40px;
 }

 /* select genero */
 .rotate {
     transform: rotate(180deg);
     transition: transform .3s;
 }

 #grupo__genero {
     position: relative;
 }

 /* selec pais */
 .rotate2 {
     transform: rotate(180deg);
     transition: transform .3s;
 }

 #pais {
     position: relative;
 }

 /* select estado */
 .rotate3 {
     transform: rotate(180deg);
     transition: transform .3s;
 }

 #estadoR {
     position: relative;
 }

 /* select provincia */
 .rotate4 {
     transform: rotate(180deg);
     transition: transform .3s;
 }

 #provinciaR {
     position: relative;
 }

 /* select distrito */
 .rotate5 {
     transform: rotate(180deg);
     transition: transform .3s;
 }

 #distritoR {
     position: relative;
 }

 /* FIN ICONO SELECT */
 @media (max-width: 393px) {

     .input-email,
     .input-password {
         border: 0;
     }

     .card-cuerpo-header img {
         padding-top: 1.5rem;
     }

     .card-text {
         font-size: 1.5rem
     }

     .cuenta {
         font-size: 0.8rem;
         padding-top: 1.3rem !important;
     }

     .card-formulario,
     .card-cuerpo-header {
         display: flex;
         flex-wrap: wrap;
         justify-content: center !important;
     }

     .input-ingresar {
         width: 100% !important;
     }

     #ingresar01 {
         margin: 0 !important;
         font-size: 0.9rem !important;
     }

     button[type="submit"] {
         height: 50% !important;
         width: 50% !important;
     }

     .remember-forgot a,
     .remember-forgot label,
     .remember-forgot input {
         font-size: 0.8rem;
     }

 }

 @media (min-width: 394px) and (max-width: 570px) {
     .card-cuerpo-header img {
         padding-top: 1.5rem;
     }

     .remember-forgot a,
     .remember-forgot label,
     .remember-forgot input {
         font-size: 1rem;
     }

     .card-text {
         font-size: 1.8rem
     }

     .cuenta {
         padding-top: 1.3rem;
     }

     .input-email,
     .input-password {
         border: 0;
     }

     .card-formulario {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
     }

     .btn-ingresar {
         width: 100% !important;
     }
 }

 @media (min-width: 571px) and (max-width: 768px) {
     .card-completo {
         height: 100%;
     }

     .imagen-cuerpo-text,
     .card-text {
         font-size: 1.8rem;
     }

     .remember-forgot a,
     .remember-forgot label,
     .remember-forgot input,
     .cuenta {
         font-size: 0.7rem;
     }
 }

 @media (min-width: 769px) {
     .card-completo {
         height: 100%;
     }
 }

 @media (max-width: 993px) {
     #card1 {
         margin-top: 0 !important;
     }
 }

 .registro {
     /* background-image:url(./img/registro1.svg); */
     background: url('../../img/fondo_registro.png') no-repeat center center fixed;
     background-size: cover;
 }



 .rotate {
     transform: rotate(180deg);
     transition: transform 0.5s ease-in-out;
 }

 .tam_red {
     margin: 0 20px 0 20px;
 }

 .contentPage {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
 }

 .card-register {
     max-width: 100% !important;
 }

 .card-body {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
 }

 .column {
     flex: 1;
     padding: 10px;
     max-width: 50%;
     /* Asegura que cada columna ocupe el 50% del ancho */
     box-sizing: border-box;
     /* Incluye el padding en el ancho total */
 }

 .seccion1 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
 }

 .texto-registrar {
     margin-top: 0px;
 }

 .registro h5 {
     text-align: center;
     color: #26C4C3;
 }

 .form-control-lg {
     border-radius: 15px;
     width: 100%;
     border: 1.5px solid #CCCCCC;
     font-size: 16px;
 }

 input[type="text"] {
     padding-left: 1.5rem;
     border-radius: 25px;
     height: 43px;
     width: 100%;
     border: 3px solid #26c4c3;
     background-color: #fff;
     border-radius: 15px;
     width: 100%;
     border: 1.5px solid #CCCCCC;
     font-size: 16px;
 }

 .terminos-condiciones {
     color: #808080;
     font-size: 16px;
 }

 .terminos-condiciones span {
     color: #3DA4A3;
 }

 .form-check:not(.form-switch) .form-check-input[type='checkbox'] {
     border: 1.5px solid #808080;
     border-radius: 0px;
 }

 #toLogin {
     color: #26C4C3;
     text-decoration: none;
     background-color: transparent;
 }

 @media (max-width: 768px) {
     .seccion1 {
         flex-direction: column;
     }

     .registro #card1 {
         margin: 5rem auto !important;
     }

     .column {
         max-width: 100%;
     }

     .mb-3 {
         border-right: none;
     }

     .registro {
         background-position: 78%;
     }

     .form-check {
         margin: auto 10px;
     }

     .terminos-condiciones {
         font-size: 15px;
         width: 95%;
         margin: auto 5px;
     }

 }

 label {
     color: #147A7F;
     font-size: 15px;
 }

 #pass-registro:valid {
     color: #076e74;
 }

 .grupo__select {
     position: relative;
 }

 .grupo__select i {
     top: 2rem !important;
 }

 #cmbDepartamento,
 #cmbProvincia,
 #cmbDistrito {
     background-image: none;
 }


 .celular-registrar {
     width: 20%;
 }

 .prefijo {
     flex: 1;
     margin-right: 0px;
 }

 .container-phone div {
     display: flex !important;
     flex-wrap: wrap;
     justify-content: start;
 }

 .prefijo input {
     padding-left: 1rem;
 }

 .page-header{
    background-image: url('../../img/disenioIniciarSesion.png');
    background-size: initial;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    height: auto;
 }

 /* .card-header y .card-body se usa en muchos lugares, por eso solo dentro de registro es diferente*/

 .registro #card1 {
     padding: 1rem;
     background: rgba(255, 255, 255, 0.8) !important;
     backdrop-filter: blur(4px) !important;
     width: min(100%, 850px) !important;
 }

 .registro h2 {
     text-align: center;
 }

 .registro .card-header,
 .registro .card-body {
     background: none !important;
     backdrop-filter: none !important;
     padding: 0;

 }

 .registro .btn-primary {

     margin: 0 !important;
 }


 @media (min-width: 768px) {

     .md-flex-nowrap {

         flex-wrap: nowrap !important;
     }
 }

 @media (min-width: 992px) {
     .lg-flex-nowrap {

         flex-wrap: nowrap !important;
     }
 }

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 4rem;
    border: 1px solid #d1d1d1;
    border-radius: 16px;
    background-color: white;
    font-weight: 500;
    color: #5f6368;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    outline: none;
}

.google-btn img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.google-btn:hover {
    background-color: #f8f8f8;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}

.google-btn:active {
    background-color: #eaeaea;
}

label:not(.terminos-condiciones)::after {
    content: "*";
    color: red;
}