.icon {
          width: 2rem;
          height: 2rem;
        }
        
        .icon i {
          font-size: 1rem;
        }
        
        .icon-shape {
          
          padding: 7px;
          text-align: center;
          border-radius: 50%;
          align-items: center;
          justify-content: center;
        }
        
        .icon-shape i {
          font-size: 1rem;
        }
        
        .mensaje-seguridad{
            margin-bottom:10px;
        }
        
        .ocultar{
            display:none;
        }

        .mensaje-seguidad-texto{
            color:white;
            font-weight: 400;
            background-color:#31b2c7;
            margin-bottom:20px;
            padding:10px;
            font-size:12px;
            border-radius:15px;
            
        }


@media (max-width: 600px) {
  
    
    
    
    #card-credito{
      display:none;
    }
    
    #card-debito{
      display:none;
    }
    
    
    #card-liquidacion{
      display:none;
    }
    
    #card-guia{
      display:none;
    }
    
    .mensaje-seguridad{
        display:none;
    }
    
    .mensaje-seguidad-texto{
        display:none;
    }
  
}


@media (max-width: 800px) {
  body {
    background-color: #87ceeb;
  }
}

@media (max-width: 1200px) {
  #cabeceraImprenta {
     display:none;
  }
}



/*********************************************
*   ESTILOS PARA EL CODIGO PIN
*********************************************/

.pin-code{ 
  padding: 0; 
  margin: 0 auto; 
  display: flex;
  justify-content:center;
  
} 
 
.pin-code input { 
  border: none; 
  text-align: center; 
  width: 38px;
  height:38px;
  font-size: 26px; 
  background-color: #AEF3FF;
  margin-right:5px;
} 



.pin-code input:focus { 
  border: 1px solid #573D8B;
  outline:none;
} 


.pin-code input::-webkit-outer-spin-button,
.pin-code input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*********************************************
*   ESTILOS PARA EL VENTANA POPUP DE ANUNCIO
*********************************************/

.popup{
          background-color: #ffffff;
          border: 1px solid #0051ff;
          
          box-shadow: 0 30px 58px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
          display:none;
          width: 480px;
          padding: 10px 10px;
          transform: translate(-50%,-50%);
          position: fixed;
          top: 50%;
          left: 50%;
          border-radius: 8px;
          font-family: "PT Sans",sans-serif;
          text-align: center;
      }
      .popup-anuncio{
          display: flex;
          margin:10px;
          background-color: transparent;
          font-size: 11px;
          color: #050252;
          border: none;    
          
      }
      
      .popup #popup-close{
          display: block;
          margin:  0 0 20px auto;
          background-color: transparent;
          font-size: 30px;
          color: #ffffff;
          background: #03549a;
          border-radius: 100%;
          width: 40px;
          height: 40px;
          border: none;
          outline: none;
          cursor: pointer;
      }
      .popup h2{
        margin-top: -20px;
        font-size: 17px;
        font-family: 'Bitter';
        font-weight: bold;
        line-height: 20px;
      }
      .popup p{
          font-size: 15px;
          /*font-family: 'Bitter';*/
          text-align: justify;
          font-weight: 500;
          margin: 20px 0;
          line-height: 25px;
      }
      .textoPublicidad{
        font-size: 15px;
        /*font-family: 'Bitter';*/
        text-align: justify;

      }
      .videoPublicidad{
        max-height: 450px;
      }

      #ocultarPublicacion{
          display: block;
          width: 150px;
          position: relative;
          margin: 10px auto;
          text-align: center;
          background-color: #0f72e5;
          border-radius: 20px;
          color: #ffffff;
          text-decoration: none;
          padding: 8px 0;
          border-color: #0074f9;
      }

      .bannerInformativoPlan {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff51f;
        color: #080808;
        text-align: center;
        
        overflow: hidden;
        z-index:100;
      }
      
      /* Estilos para la letra del banner */
      .bannerInformativoPlan-movimiento {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        animation: moveBanner 10s linear infinite; /* Definimos la animación */
      }

    /* Animación que hace que la letra "P" se desplace horizontalmente */
    @keyframes moveBanner {
      from {
          transform: translateX(100%); /* Posición inicial (desplazada 100% hacia la derecha) */
      }
      to {
          transform: translateX(-100%); /* Posición final (desplazada 100% hacia la izquierda) */
      }
    }


    @media (max-width: 600px) {
      .popup {
          width: calc(100% - 20px); /* Hace que el modal ocupe casi todo el ancho de la pantalla, dejando un pequeño margen */
          box-shadow: none; /* Opcional: quita la sombra para un look más limpio en pantallas pequeñas */
      }
  
      .popup p, .popup h2 {
          /* Ajusta el tamaño del texto para que sea legible en pantallas pequeñas */
          font-size: 12px;
      }
  
      .popup #popup-close {
          /* Ajustes para el botón de cerrar para que no sea demasiado grande en pantallas pequeñas */
          font-size: 24px;
          width: 30px;
          height: 30px;
      }
      .videoPublicidad{
        max-height: 320px;
      }
      .textoPublicidad{
        font-size: 14px;
      }
  }