body {font-family: 'Open Sans', sans-serif !important;}

div.container.box {padding: 2rem;min-height: 70vh;}
.hidden {opacity: 0;}
.visible-xs {display: none;}
h1 {margin: 1em 0;text-transform: unset;}

.enlace-certificado {border-radius: 0.3em;margin: 1em 0;}
.enlace-certificado a {display: inline-block;position: relative;background-color: #f0f0f0;padding: 1.2em 2em 1.2em 1em;color: black;font-size: 15px;/*font-weight: bold;*/line-height: 1.2;border-left: 3px solid #563d7c;border-radius: 0.2em;}
.enlace-certificado a i {position:absolute;left:1rem;top:50%;transform:translateY(-50%);display: none;}
.enlace-certificado a:hover {background-color: #e0e0e0;}
.enlace-certificado a:active {background-color: #dadada;}
.enlace-certificado a span {display: block;/* margin-left: 0.5em; */}
.enlace-certificado span.listado-nombre {margin-bottom: 0.2em;display: inline;margin-left: 0.3em;}
.enlace-certificado div.listado-fecha {font-size:0.9em;color: #563d7c;font-weight: bold;padding: 0.2em 0;}

.certificado-img {display: block;width:100%;position: relative;}
.certificado-img img {display: block;width:100%;}
.certificado-img .texto {position: absolute;top: 36%;left: 35%;z-index: 1;font-size: 2.1em;white-space: nowrap;}
.certificado-img .texto br {content: "";display: block;margin-bottom: 15px;}
.certificado-img #qr {position:absolute;bottom:1cm;right:1cm;}
.certificado-img #qr img {width:auto;width:4cm;border: 1px solid #ccc;}

hr {border-top-color: #888;}

.volver {font-weight: bold;}

@media screen and (max-width:768px){
    body {font-size: 5px;}
    .container {width:100%;max-width: unset;}
    p,a,label {font-size: 2.5em;}
    .certificado-img .texto p {font-size: inherit;margin-bottom: 1em;}
    .visible-xs {display: block;}
    .hidden-xs {display: none;}
    .certificado-img #qr {bottom:10px;right:10px;}
    .certificado-img #qr img {width:auto;width:50px;}
    #imprimirButton {display: none;}
    footer {display:none;}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    body {font-size:10px;}
    p,a {/* font-size: 1.5em; */}
}

@media print {
    @page {
        size: A4 landscape;
        margin: 0.5cm;
    }
    
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    
    .certificado-img {
        width: 100%;
        height: 100vh;
        page-break-inside: avoid;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .certificado-img img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    
    .certificado-img .texto {
        font-size: 18pt;
        left: 35%;
        top: 36%;
    }

    .no-print {
        display: none !important;
    }
}