<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Certificación Suficiencia en {{idioma}}</title>

    <style>
        @font-face {
            font-family: 'TrajanProBold';
            src: url({#asset trajanpro-bold.ttf @encoding=dataURI}) format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        @font-face {
            font-family: 'MontserratBold';
            src: url({#asset montserrat-bold.ttf @encoding=dataURI}) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'MontserratExtraBold';
            src: url({#asset montserrat-extrabold.ttf @encoding=dataURI}) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Montserrat-light';
            src: url({#asset montserrat-light.ttf @encoding=dataURI}) format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {
            font-family: 'SegoeBlack';
            src: url({#asset segoe-ui-black.ttf @encoding=dataURI}) format('truetype');
            font-weight: normal;
            font-style: normal;
        }        

        /* ================= CONFIGURACIÓN DE PÁGINA ================= */

        @page {
            size: A4 portrait;
            margin: 0.8cm 0.6cm 2.4cm 0.6cm;
        }

        body {
            font-family: "Times New Roman", Times, serif;
            font-size: 12pt;
            line-height: 1.6;
            color: #000;
        }

        .header-container {
            position: relative;
            width: 100%;
            height: 155px;
        }

        .header-left {
            position: absolute;
            top: 0;
            left: 0;
        }

        .header-left img {
            height: 115px;
        }

        .certificado-wrapper {
            position: absolute;
            top: 0;
            right: 0;
        }

        .certificado-container {
            position: relative;
            width: 265px;
            padding: 30px 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .marco-superior {
            position: absolute;
            top: 0;
            right: 30px;
            width: 82%;
            height: 15px;
            margin-top: 10px;
            border-top: 3px solid #FFCA00;
            border-left: 3px solid #FFCA00;
            border-right: 3px solid #FFCA00;
            border-radius: 40px 40px 0 0;
        }

        .marco-inferior {
            position: absolute;
            left: 12px;
            width: 75px;
            height: 73px;
            margin-top: -2.2px;
            border-left: 3px solid #FFCA00;
            border-bottom: 3px solid #FFCA00;
        }

        .titulo-verde {
            margin: 0;
            font-size: 24px;
            line-height: 1;
            text-align: right;
            letter-spacing: 0.3px;
            color: #0b6b3a;
            font-family: 'Montserrat-light';
        }

        .titulo-negro {
            margin: 0;
            font-size: 27px;
            line-height: 1.2;
            text-align: right;
            font-weight: 900;
            color: #1c1c1c;
            font-family: 'MontserratExtraBold';
        }

        .header-line {
            height: 4px;
            margin-top: -25px;
            background: #007C3E;
        }

        .estructura-superior {
            position: relative;
            width: 100%;
            height: 240px;
        }

        .linea-vertical {
            position: absolute;
            top: 0;
            left: 17%;
            width: 1.5px;
            height: 172%;
            background: #007C3E;
        }

        .bloque-gris {
            position: absolute;
            top: 0;
            left: 24%;
            width: 76%;
            height: 55%;
            background: #d7d8d8;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px;
        }

        .banner-institucional {
            position: relative;
            width: 100%;
            height: 188px;
            background: #d7d8d8;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px;
            margin-bottom: 1.5cm;
        }

        .banner-contenido {
            padding-top: 30px;
            text-align: center;
        }

        .escudo-banner {
            height: 60px;
            margin-top: -8px;
        }

        .fuente-bell {
            margin-top: -4px;
            font-size: 13px;
            line-height: 1;
            text-align: center;
            font-weight: bold;
            color: #212121;
            font-family: "Bell MT", Georgia, serif;
        }

        .fundada {
            margin-top: 2px;
            font-size: 8px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: -0.02em;
            font-family: "Century Gothic", AppleGothic, sans-serif;
        }

        .titulo-documento {
            margin-top: 24px;
            font-size: 17px;
            text-align: center;
            letter-spacing: 0.02em;
            font-family: 'SegoeBlack';
        }

        .contenido {
            margin-top: -1.8cm;
            margin-left: 26%;
            width: 74%;
            text-align: justify;
        }
        
        .contenido strong {
            font-family: "Arial Black", Arial, Helvetica, sans-serif;
            font-weight: bold;
        }
        
        /* ====== TIPOGRAFÍA DEL DOCUMENTO ====== */

        .titulo-certificacion {
            font-family: 'TrajanProBold', serif;
            font-size: 22pt;
            color: #0b6b3a;
            text-align: left;
            margin-top: 110px;
            margin-bottom: 30px;
        }

        .cuerpo-texto {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11pt;
            text-align: justify;
            line-height: 0.5cm;
        }

        .noBox {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9pt;
            font-weight: bold;
            color: #888;
            border: 1px dashed #bbb;
            box-sizing: border-box;
        }

        .qr-wrapper {
            position: relative;
            width: 2.19cm;
            height: 2.19cm;
        }

        .qr-img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .qr-fixed {
            position: fixed;
            left: 0.5cm;
            /* margen real izquierdo */
            top: 48%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .qr-wrapper span {
            position: absolute;
            width: 14px;
            height: 14px;
            border-style: solid;
            border-color: #007C3E;
        }

        /* Esquinas */

        .qr-tl {
            top: -11px;
            left: -11px;
            border-width: 1px 0 0 1px;
        }

        .qr-tr {
            top: -11px;
            right: -11px;
            border-width: 1px 1px 0 0;
        }

        .qr-bl {
            bottom: -11px;
            left: -11px;
            border-width: 0 0 1px 1px;
        }

        .qr-br {
            bottom: -11px;
            right: -11px;
            border-width: 0 1px 1px 0;
        }
        
        .qr-texto-validacion {
            margin-top: 20px;
            width: 2.5cm;
        
            font-family: Arial, sans-serif;
            font-size: 9px;
            font-weight: bold;
            line-height: 1.3;
            color: #4a4a4a;
        
            text-align: center;
        
            margin-left: 44%;
            transform: translateX(-50%);
        }
        .tabla-suficiencia {
            width: 99%;
            border-collapse: collapse;
            margin-top: 50px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 9pt;
        }

        .tabla-suficiencia thead th {
            position: relative;
            background: #bdbdbd;
            font-weight: bold;
            font-family: "Arial Black", Arial, sans-serif;
            font-size: 9pt;
            padding: 1px 4px;
            text-align: center;
            border: none;
            border-top: 3.9px solid #999;
            border-bottom: 1px solid #999;
        }
        
        .tabla-suficiencia thead th + th::before {
            content: "";
            position: absolute;
            left: -1.5px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 3px;
            background: #ffffff;
        }
        
        .tabla-suficiencia tbody td {
            padding: 1px 3px; /* Reduce el padding para hacer las filas más compactas */
            border: 1px solid #999;
            font-size: 10pt;
            line-height: 0.6;
        }
        
        
        .tabla-suficiencia tbody td:nth-child(1),
        .tabla-suficiencia tbody td:nth-child(3),
        .tabla-suficiencia tbody td:nth-child(4),
        .tabla-suficiencia tbody td:nth-child(5),
        .tabla-suficiencia tbody td:nth-child(6),
        .tabla-suficiencia tbody td:nth-child(7),        
        .tabla-suficiencia tbody td:nth-child(8) {
            text-align: center;
        }
        
        .bloque-final {
            margin-top: -30px;
            position: relative;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11pt;
        }

        .texto-consta {
            text-align: justify;
            width: 100%;
        }

        .certifico-wrapper {
            position: absolute;
            right: 0;
            top: 85px;
            text-align: right;
            width: 50%;
            overflow: visible;
        }

        .linea-certifico {
            height: 1.5px;
            width: 34%;
            margin: 0 0 8px auto;
            background: #0b6b3a;
        }

        .texto-certifico {
            font-family: 'TrajanProBold', serif;
            font-size: 12pt;
        }

        .fecha-impresion {
            display: inline-block;
            white-space: nowrap;
            overflow: visible;
            font-style: italic;
            font-size: 9pt;
            margin-top: 6px;
        }
    </style>
</head>

<body>
    <!-- HEADER -->
    <header class="header-container">

        <div class="header-left">
            <img src="{#asset escudo_nacional_2.png @encoding=dataURI}" alt="Escudo Nacional">
        </div>

        <div class="certificado-wrapper">
            <div class="certificado-container">

                <div class="marco-superior"></div>
                <div class="marco-inferior"></div>

                <div class="titulo-verde">
                    CERTIFICADO DE
                </div>

                <div class="titulo-negro">
                    SUFICIENCIA DE {{extraerIdioma idioma}}
                </div>

            </div>
        </div>

    </header>

    <div class="header-line"></div>

    <div class="estructura-superior">
        <div class="linea-vertical"></div>
        <div class="bloque-gris">
            <div class="banner-institucional">
                <div class="banner-contenido">
                    <img src="{#asset escudo_utm_3.png @encoding=dataURI}" class="escudo-banner">
                    <div class="fuente-bell">
                        <div>
                            <span style="font-size: 16px; font-weight: bold;">U</span>NIVERSIDAD</div>
                        <span style="font-size: 16px; font-weight: bold;">T</span>ÉCNICA DE
                        <span style="font-size: 16px; font-weight: bold;">M</span>ANABÍ

                    </div>
                    <div class="fundada">
                        <span>Fundada en 1952</span>
                    </div>
                    <div class="titulo-documento">
                        <span>INSTITUTO DE LENGUAS MODERNAS</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="contenido-wrapper">


        <div class="qr-fixed">

            <div class="qr-wrapper">

                {{#if qr_texto}}
                <img class="qr-img" src="{{qr_texto}}" alt="QR">
                <span class="qr-tl"></span>
                <span class="qr-tr"></span>
                <span class="qr-bl"></span>
                <span class="qr-br"></span>
                {{else}}
                <div class="noBox">SIN QR</div>
                {{/if}}
            </div>
            <div class="qr-texto-validacion">
                Escanee este código para verificar la autenticidad del documento
            </div>
        </div>
        <div class="contenido cuerpo-texto">

            <div class="titulo-certificacion">
                Certifico que:
            </div>

            <p>
                <strong>{{estudiante_nombres}}</strong>, con cédula de ciudadanía N°
                <strong>{{estudiante_cedula}}</strong>, registra en la Universidad Técnica de Manabí las siguientes calificaciones para obtención de
                <strong>SUFICIENCIA {{idioma}}</strong> con referencia al Marco Común Europeo:
            </p>
        </div>
    </div>

    <table class="tabla-suficiencia">
        <colgroup>
            <col style="width:4%;">
            <col style="width:34%;">
            <col style="width:7%;">
            <col style="width:12%;">
            <col style="width:12%;">
            <col style="width:10%;">
            <col style="width:8%;">
            <col style="width:14%;">
        </colgroup>
        <thead>
            <tr>
                <th>N.°</th>
                <th>SUFICIENCIA</th>
                <th>NIVEL M.C.E.</th>
                <th>HORAS POR NIVEL</th>
                <th>HORAS ACUMULADAS</th>
                <th>CALIFICACIÓN</th>
                <th>TIPO</th>
                <th>OBSERVACIÓN</th>
            </tr>
        </thead>
        <tbody>
            {{#each suficiencias}}
            <tr>
                <td style="font-weight: bold;">
                    {{no}}
                </td>
                <td>
                    <p>
                        <span style="font-weight: bold;">{{nombre}}</span><br>
                        <!-- <span style="font-size:6.3px;">{{periodo}}</span> -->
                    </p>
                </td>
                <td style="font-weight: bold;">{{nivel}}</td>
                <td>{{horas_nivel}}</td>
                <td>{{horas_acumuladas}}</td>
                <td>{{calificacion}}</td>
                <td style="font-weight: bold;">{{tipo}}</td>
                <td style="font-weight: bold; line-height: 1.1; text-align: center; word-break: keep-all;"" class="{{estado_clase}}">{{estado}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <div class="bloque-final">
        <div class="certifico-wrapper">
            <div class="linea-certifico"></div>
            <div class="texto-certifico">
                LO CERTIFICO
            </div>
            <div class="fecha-impresion">
                Fecha de impresión: {{fecha_actual}} Hora: {{hora_actual}}
            </div>
        </div>

    </div>
</body>

</html>