/* Custom CSS */
    .navbar-brand {
      margin-right: auto;
    }
    .navbar-nav {
      margin-left: auto;
    }
    .certificado-img {
      height: auto;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .visor {
     background-color: #f4f5fa;
       /* Altura del visor */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .visor p {
      color: white;
      font-size: 24px;
    }
    .visorclass{
            background: #f4f5fa;
            padding-top:20px !important;
            padding-bottom:20px !important;
    }
    .shareclass{
        margin-bottom: 60px;
    }
    .font13{
        font-size: 13px !important;
    }
    .navbar{
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
    }
    
    @media (min-width: 963px){
      .logoclass{
        height:35px !important;
        }  
      .certificado-img {
        max-width: 70%;
        }
      .overlay{
        max-width: 70%; 
        margin-left: 15%;
        }
       .verificador-img{
           margin-top:45px;
           width:65%;
       }
    }
    @media (max-width: 962px){
      .logoclass{
        height:25px !important;
        margin-top:-5px;
        }  
      .certificado-img {
        max-width: 100%;
        }
      .overlay{
        max-width: 100%; 
      }
      .verificador-img{
           width:80%;
       }
    }
      .logo-container {
        position: relative;
      }
      .padding-none{
        padding: 0px;
      }
      .share{
            color: #fff !important;
        background-color: #37397a !important;
        border-radius: 6px;
        padding: 20px;
            margin-top: 50px;
      }
      .detalles{    margin-top: 50px;}
      .row{
        margin:0px !important;
      }
      .icono-share{
            text-align: center;
      }
      .btn-share{
            width: 100%;
        margin-top: 20px;
        padding: 10px;
        background: white;
        color: #000;
        border-color: white;
      }
      
      .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%; /* Asegúrate de que el overlay ocupe toda la altura del contenedor */
            background-color: #000; /* Fondo opcional para visualización */
            display: block;
            justify-content: center; /* Centra el contenido horizontalmente */
            align-items: center; /* Centra el contenido verticalmente */
            flex-direction: column; /* Mantiene los elementos en columna */
            text-align: center; /* Asegúrate de que el texto también esté centrado */
        }

    
    .loading-text {
        color: white;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .loading-img {
        margin-bottom: 5px;
    }
    .loading-img img{
        width:50%;
        border-radius: 10px;
    }
    .loading-dots {
        color: white;
        font-size: 45px;
        margin-top: -20px;
        animation: loading-animation 1s infinite;
    }
    @keyframes loading-animation {
        0% { opacity: 0.2; }
        20% { opacity: 0.4; }
        40% { opacity: 0.6; }
        60% { opacity: 0.8; }
        80% { opacity: 1; }
        100% { opacity: 0.2; }
    }
    .descargar{
        
    }
    
    #canvas-container {
          width: 100%;
          max-width: 1000px;
          margin: 0 auto;
    }
    canvas {
          width: 100%;
          height: auto;
          display: block;
          background-color: black;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .url-copy-inline {
        display: inline-block; 
        max-width: 100%;
        word-wrap: break-word;
    }
    
    .url-text {
        display: inline-flex;
        align-items: center;
        gap: 4px; /* separa el texto del icono */
        word-break: break-all; /* permite cortes de URL */
    }
    
    .copy-icon {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        color: black;
    }
    
    @media (min-width: 768px) {
        #loaderGif {
            width: 450px !important;
        }
    }
    @media (max-width: 767px) {
        #loaderGif {
            width: 150px !important;
        }
    }