html {
    /* background-color: #01568E; */
    /* background-image: url(../img/bg-azul.jpg) no-repeat fixed; */
    color: #636b6f;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    height: 100vh;
    margin: 0;
}


.fondo{
    line-height: 1;
    color: #777;
    font: 12px/20px "Open Sans", Helvetica, Arial, sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url("../imagenes/campus_sf.jpg") ;
    background-repeat: no-repeat;
    background-position: center center;

}

.fondo_sistema{
    line-height: 1;
	color: #777;
	font: 12px/20px "Open Sans", Helvetica, Arial, sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: fixed;
    background-position: center center;
    

}




#fondo_sistema{
background-color: white;

}

/* #header-bar-middle-r span {
    font-size: 26pt;
    text-transform: uppercase;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #fff;
    position: relative;
    top: 18px;
    left: 107px;
    text-shadow: 3px 4px 4px rgba(0, 0, 0, 1);
    
} */

#header-bar-middle-r img {
    height: 92px;
    width: auto;
    margin-top: 10px;
    margin-left: 25%;
} 

@media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    
    .header-right {
      float: none;
    }
    
  }
  






/* #header-bar-middle-l {
    float: left;
    width: 440px;
    height: 80px;
    margin-top: 10px;
    border-right: 2px solid white;
}

#header-bar-middle-l img {
    height: 92px;
    width: auto;
    margin-top: 10px;
    margin-left: 25%;
} */

.footer {
         /* position: absolute; */
         /* bottom: 0; */
         width: 100%;
         /* Set the fixed height of the footer here */
         /* height: 60px; */
         /* line-height: 60px;  */
         background-color: #e7eaec;
  }

.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.content {
    text-align: center;
}

.title {
    font-size: 84px;
}

.links > a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.m-b-md {
    margin-bottom: 30px;
}

/* LOGIN JEAN */

.main-content{
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 5px 5px rgba(0,0,0,.4);
	margin: 5em auto;
	display: flex;
}
.company__info{
	background-color: #008080;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
}

@media screen and (max-width: 640px) {
	.main-content{width: 90%;}
	.company__info{
		display: none;
	}
	.login_form{
		border-top-left-radius:20px;
		border-bottom-left-radius:20px;
	}
}
@media screen and (min-width: 642px) and (max-width:800px){
	.main-content{width: 70%;}
}
.row > h2{
	color:#008080;
}
.login_form{
	background-color: #fff;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
}
form{
	padding: 0 2em;
}
.form__input{
	width: 100%;
	border:0px solid transparent;
	border-radius: 0;
	border-bottom: 1px solid #aaa;
	padding: 1em .5em .5em;
	padding-left: 2em;
	outline:none;
	margin:1.5em auto;
	transition: all .5s ease;
}
.form__input:focus{
	border-bottom-color: #212677;
	box-shadow: 0 0 5px rgba(0,80,80,.4); 
	border-radius: 4px;
}


#btn_login{
	transition: all .5s ease;
	width: 50%;
	/* border-radius: 30px; */
	color:#212677;
	font-weight: 600;
	background-color: #fff;
	/* border: 1px solid #212677; */
	margin-top: 1.5em;
	margin-bottom: 1em;
}

#btn_siguiente_pagar{
	transition: all .5s ease;
	/* width: 50%; */
	/* border-radius: 30px; */
	color:#212677;
	font-weight: 600;
	background-color: #fff;
	/* border: 1px solid #212677; */
	margin-top: 1.5em;
	margin-bottom: 1em;
}

#btn_siguiente_gratuidad{
	transition: all .5s ease;
	/* width: 50%; */
	/* border-radius: 30px; */
	color:#212677;
	font-weight: 600;
	background-color: #fff;
	/* border: 1px solid #212677; */
	margin-top: 1.5em;
	margin-bottom: 1em;
}

#btn_pagar{
	transition: all .5s ease;
	/* width: 50%; */
	/* border-radius: 30px; */
	color:#212677;
	font-weight: 600;
	background-color: #fff;
	/* border: 1px solid #212677; */
	margin-top: 1.5em;
	margin-bottom: 1em;
}

#btn_prev_next{
	transition: all .5s ease;
	/* width: 50%; */
	/* border-radius: 30px; */
	color:#212677;
	font-weight: 600;
	background-color: #fff;
	/* border: 1px solid #212677; */
	margin-top: 1.5em;
	margin-bottom: 1em;
}

#btn_next{
	transition: all .5s ease;
	/* width: 50%; */
	/* border-radius: 30px; */
	color:#212677;
	font-weight: 600;
	background-color: #fff;
	/* border: 1px solid #212677; */
	margin-top: 1.5em;
	margin-bottom: 1em;
}

#btn_siguiente_pagar:hover, #btn_siguiente:focus{
	background-color: #e2eaf3;
	color:#212677;
}

#btn_pagar:hover, #btn_siguiente:focus{
	background-color: #e2eaf3;
	color:#212677;
}


#btn_siguiente_gratuidad:hover, #btn_siguiente:focus{
	background-color: #e2eaf3;
	color:#212677;
}

#btn_prev_next:hover, #btn_prev_next:focus{
	background-color: #e2eaf3;
	color:#212677;
}

#btn_login:hover, #btn_login:focus{
	background-color: #e2eaf3;
	color:#212677;
}


#placeholder_numero_tarjeta {
    margin-left: -36px;
  } 
  
  #placeholder_numero_tarjeta_login_dos {
      margin-left: -52px;
    } 
  
  
  
  #alertas_login_rut {
      margin-left: -197px;
    } 
  
  #alertas_login_num_tarj {
  margin-left: -143px;
  } 
  
  #alertas_logindos_rut {
      margin-left: -252px;
    } 
  
  #alertas_logindos_num_tarj {
  margin-left: -118px;
  } 
  
  #fondo_login {
      /* -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-image: url("../imagenes/fondo_login.jpg") ;
      background-repeat: no-repeat;
      background-position: center center;
      padding: 34px; */ 
      /* background: rgba(0,131,192,1);
      background: -moz-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
      background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,131,192,1)), color-stop(54%, rgba(0,77,147,1)), color-stop(100%, rgba(0,77,147,1)));
      background: -webkit-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
      background: -o-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
      background: -ms-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
      background: linear-gradient(to right, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0083c0', endColorstr='#004d93', GradientType=1 ); */
      padding: 34px;
      background-color: #585b5c;
  } 
  
  
  
  #POST_CERT_WEB {
      margin-top: 5px;
  } 
  
  
  
  #titulo_login span {
      font-size: 23pt;
      text-transform: uppercase;
      font-family: "Open Sans", Helvetica, Arial, sans-serif;
      color: #fff;
      position: relative;
      top: -2px;
      left: 5px;
      /* text-shadow: 3px 4px 4px rgba(0, 0, 0, 1); */
  }

/* TOOLTIP JEAN  */



.mt-100 {
    margin-top: 150px;
    margin-left: 200px
}



h5 {
    color: #fff
}

.card-block {
    margin-top: 10px;
}

.mytooltip {
    display: inline;
    position: relative;
    z-index: 999
}

.mytooltip .tooltip-item {
    background: rgba(106, 106, 117, 0.1);
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    padding: 2px 10px;
    /* background-color: transparent; */
    border-radius: calc(1rem - 1px) calc(1rem - 1px);
}

.mytooltip .tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 360px;
    left: 50%;
    margin: 0 0 20px -180px;
    bottom: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    background: #2b2b2b;
    opacity: 0;
    cursor: default;
    pointer-events: none
}

.mytooltip .tooltip-content::after {
    content: '';
    top: 100%;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: #2a3035 transparent transparent;
    border-width: 10px;
    margin-left: -10px
}

.mytooltip .tooltip-content img {
    position: relative;
    height: 189px;
    display: block;
    float: left;
    margin-right: 1em
}

.mytooltip .tooltip-item::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 20px;
    bottom: 100%;
    left: 50%;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.mytooltip:hover .tooltip-item::after {
    pointer-events: auto
}

.mytooltip:hover .tooltip-content {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg)
}

.mytooltip:hover .tooltip-content2 {
    opacity: 1;
    font-size: 18px
}

.mytooltip .tooltip-text {
    font-size: 14px;
    line-height: 24px;
    display: block;
    padding: 1.31em 1.21em -0.79em 0;
    color: #fff;
    margin-left: 10px;
   
} q



/* EFECTO MENU CERRAR SESION NAVBAR */

body { 
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .header {
   
    width: 100%;
    border-bottom: 3px solid white;
    background: transparent url("../imagenes/bg-header.jpg") no-repeat top center;
        background-size: auto;
    background-size: cover;
  }
  
  .header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px; 
    line-height: 25px;
    border-radius: 4px;
  }
  
  .header a.logo {
    font-size: 25px;
    font-weight: bold;
  }
  
  
  
 
  
  .header a.active {
    background-color: dodgerblue;
    color: white;
  }
  
  .header-right {
    float: right;
  }
  
  #header-bar-middle-r img {
      /* height: 92px; */
      width: auto;
      margin-top: 10px;
      margin-left: 25%;
  } 
  
  #header-bar-middle-r span {
      font-size: 26pt;
      text-transform: uppercase;
      font-family: "Open Sans", Helvetica, Arial, sans-serif;
      color: #fff;
      position: relative;
      top: 62px;
      left: 128px;
      text-shadow: 3px 4px 4px rgba(0, 0, 0, 1);
      background-size: auto;
  }
  
  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    
    .header-right {
      float: none;
    }




  }


  @media screen and (max-width: 700px) {

    #text_icons{
        display: none;
    }


  }
  
  @media screen and (max-width: 990px) {
      #header-bar-middle-r span {
           display : none;
      }
      #btn_toggler{
        margin-top: 48px;
      }
    
  }

  @media screen and (max-width: 800px) {
    #iconos_redes{
        display: none;
      }

      #btn_toggler{
        margin-top: 48px;
      }
  
}

  #btn_cerrar_sesion {
    background-color: transparent; 
    color: white; 
    font-size: 12px; 
    margin-top: 58px;
} 


  #viewDiv,.container2
	{
        height: 600px;
        width:100%;
        margin:0;
        padding:0;
        margin:0;
        font-family: "Open Sans";
    }

    .spinner-border {
      display: block;
      width: 6rem;
      height: 6rem;
      /* vertical-align: text-bottom; */
      border: .25em solid rgb(255, 255, 255);
      border-right-color: transparent;
      border-radius: 50%;
      animation: spinner-border .75s linear infinite;
      margin: 0 auto;
      margin-top: 20%;
    }
    @keyframes spinner-border {
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    .background-spinner{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1040;
      width: 100vw;
      height: 100vh;
      z-index:999999 !important;
      display: none;
      text-align: center;
      background: rgba(0,0,0,0.5);
    }


  /* CSS MANTENEDOR_TARJETA.BLADE */

   .pago-container {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .card-tarjeta-css {
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        color: white;
        width: 330px;
        padding: 20px;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        position: relative;
        text-align: left;
        transition: transform 0.3s ease;
        
    }

    .pago-container > div {
    align-self: flex-start;
}

    .card-tarjeta-css:hover {
        transform: scale(1.02);
    }

    .tarjeta-header {
        font-size: 1.2rem;
        margin-bottom: 20px;
        font-weight: bold;
        text-align: center;
    }

    .tarjeta-chip {
        width: 40px;
        height: 30px;
        background-color: gold;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .tarjeta-numero {
        font-size: 1.6rem;
        letter-spacing: 4px;
        font-weight: 600;
    }

    /* Caja moderna de pago */
    .pago-box-modern {
        width: 300px;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        text-align: left;
        transition: all 0.3s ease-in-out;
    }
    .pago-box-modern:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }

    .titulo-icono {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 1.8rem;
        font-weight: 600;
        color: #2d3436;
        font-family: 'Nunito', sans-serif;
        margin-bottom: 15px;
    }

    .titulo-icono i {
        font-size: 2rem;
        color: #007bff;
    }



    .linea-decorativa {
        width: 60px;
        height: 4px;
        background: #007bff;
        border-radius: 3px;
    }

    .metodo-pago-header {
        padding-bottom: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #e3e3e3;
    }

    .pago-box-modern {
        width: 300px;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        text-align: left;
        padding: 24px;
        transition: all 0.3s ease-in-out;
    }

    .pago-box-modern h5 {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 1rem;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 0.5rem;
    }

    .pago-box-modern .mb-3 {
        margin-bottom: 1.5rem !important;
    }
    .linea-separadora {
        width: 100px;
        height: 3px;
        background-color: #007bff;
        margin: 10px auto 0 auto;
        border-radius: 3px;
    }
.alert-sm {
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
    margin: 1rem auto;
    max-width: 480px;

    
}
#resumen-pago .alert {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    margin-top: 1rem;
}

/* CSS METODOS_PAGO.BLADE */

.metodos-pago-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}

.metodo-box {
    width: 250px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metodo-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.metodo-btn {
    border: none;
    background: none;
    padding: 20px;
    cursor: pointer;
    width: 100%;
}

.metodo-btn img {
    width: 180px;
    height: auto;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.metodo-btn:hover img,
.metodo-btn:active img,
.metodo-btn:focus img {
    transform: scale(1.08);
}


/* RESPONSIVO PARA MÓVILES */
@media (max-width: 576px) {
    .metodos-pago-container {
        flex-direction: column;
        align-items: center;
    }

    .metodo-box {
        width: 90%;
        max-width: 300px;
    }

    .metodo-btn img {
        width: 150px;
    }
}