<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">

    <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: 'TrajanProRegular';
            src: url({#asset TrajanPro-Regular.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-size: 12pt;
            line-height: 1.6;
            color: #000;
        }

        .header-container {
            position: relative;
            width: 100%;
            height: 120px;
        }

        .header-left {
            position: absolute;
            top: 0;
            left: 0;
        }

        .header-left img {
            height: 85px;
        }

        .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: 80%;
            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: 17px;
            width: 50px;
            height: 41px;
            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: 186%;
            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: 72px;
            margin-bottom: 28px;
        }

        .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;
        }
        
        /* Esquinas */

        .qr-tl {
            top: -11px;
            left: -11px;
            border-width: 1.3px 0 0 1.3px;
        }

        .qr-tr {
            top: -11px;
            right: -11px;
            border-width: 1.3px 1.3px 0 0;
        }

        .qr-bl {
            bottom: -11px;
            left: -11px;
            border-width: 0 0 1.3px 1.3px;
        }

        .qr-br {
            bottom: -11px;
            right: -11px;
            border-width: 0 1.3px 1.3px 0;
        }        

        .qr-img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .qr-fixed {
            position: fixed;
            left: 0.5cm;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .qr-wrapper span {
            position: absolute;
            width: 14px;
            height: 14px;
            border-style: solid;
            border-color: #007C3E;
        }
        /* ================= TABLA ASIGNATURAS ================= */

        .tabla-asignaturas {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
        }
        
        /* ================= TABLA ASIGNATURAS ================= */
        
        .tabla-asignaturas {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
        }
        
        .tabla-asignaturas thead:first-of-type {
            background: transparent;
            border: none;
        }
        
        .tabla-asignaturas thead:first-of-type th {
            padding: 3.5px 8px;
            text-align: center;
            border: none; /* Eliminar bordes */
        }
        
        /* Segundo thead con los estilos y bordes originales */
        .tabla-asignaturas thead.second-header {
            background: #e7e7e8;
            font-weight: bold;
            font-family: "Arial Black", Arial, sans-serif;
            font-size: 9pt;
            padding: 3.5px 8px;
            text-align: center;
            border-top: 3.9px solid #999;
            border-bottom: 1px solid #999;
        }
        
        .tabla-asignaturas thead.second-header th {
            position: relative;
        }
        
        .tabla-asignaturas thead.second-header th + th::before {
            content: "";
            position: absolute;
            left: -1.5px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 5px;
            background: #ffffff;
        }
        
        .tabla-asignaturas tbody td {
            padding: 3px 6px;
            border: 1px solid #999;
            font-size: 9pt;
        }
        
        .tabla-asignaturas tbody td:nth-child(1),
        .tabla-asignaturas tbody td:nth-child(3),
        .tabla-asignaturas tbody td:nth-child(4),
        .tabla-asignaturas tbody td:nth-child(5),
        .tabla-asignaturas tbody td:nth-child(6),
        .tabla-asignaturas tbody td:nth-child(7) {
            text-align: center;
        }
        
        /* ================= TOTALES ================= */
        tfoot td {
            font-weight: bold;
            padding: 5px;
            border-top: 3.9px solid #999;
            border-bottom: 3.9px solid #999;
            position: relative;
        }
        
        tfoot tr:first-child td:nth-child(5),
        tfoot tr:first-child td:nth-child(6) {
            background: #e7e7e8;
            text-align: center;
            border-left: none;
            border-right: none;
        }
        
        tfoot tr:first-child td:nth-child(5)::after {
            content: "";
            position: absolute;
            right: -2.4px;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: white;
            z-index: 1; 
        }
        
        tfoot tr:last-child td {
            background: transparent !important;
            border: none !important;
            font-weight: normal;
            font-size: 8pt;
            text-align: center;    
            padding-top: 2px;
        }

        /* ================= BLOQUE CRÉDITOS ================= */

        .resumen-creditos {
            margin-top: 10px;
            border: 1px solid #999;
            border-top-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
            padding: 5px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11pt;
        }

        .credito-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 10pt;
        }

        .credito-valor {
            margin-left: 10px;
            min-width: 15px;
            text-align: center;
            padding: 6px 12px;
            border: 1px solid #666;
            font-weight: bold;
            font-size: 13pt;
        }

        .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: 1px;
        }
    </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">
                    PROMOCIÓN
                </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>{{facultad_estudio}}</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>
        <!-- CONTENIDO -->
        <div class="contenido cuerpo-texto">

            <div class="titulo-certificacion">
                Certifico que:
            </div>

            <p>
                {{tratamientoEstudiante estudiante_genero}}
                <strong>{{estudiante_nombres}}</strong>, con cédula de ciudadanía N°
                <strong>{{estudiante_cedula}}</strong>, estudiante de
                <strong>{{semestre_estudio}}</strong> paralelo
                <strong>"{{paralelo_estudio}}"</strong> de la carrera de
                <strong>{{carrera_estudio}}</strong>, de la facultad de
                {{facultad_estudio}}, Universidad Técnica de Manabí, 
                con el número de matrícula {{matricula_estudio}}, obtuvo las siguientes calificaciones en el periodo académico 
                <strong>"{{periodo_academico_estudio}}"</strong>, según constan en el libro de registro de notas a mi cargo.
            </p>

            <p>
                El detalle de las calificaciones es el siguiente:
            </p>
        </div>
    </div>
    <table class="tabla-asignaturas">
        <colgroup>
            <col style="width:5%;">
            <col style="width:34%;">
            <col style="width:11%;">
            <col style="width:7%;">
            <col style="width:10%;">
            <col style="width:12%;">
            <col style="width:14%;">
        </colgroup>
        <!-- Primer thead sin estilos ni bordes -->
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th style="font-weight: normal;font-size: 8pt;">(a)</th>
                <th style="font-weight: normal;font-size: 8pt;">(b)</th>
                <th style="font-weight: normal;font-size: 8pt;">(a*b)</th>
                <th></th>
            </tr>
        </thead>
    
        <!-- Segundo thead con los estilos y bordes originales -->
        <thead class="second-header">
            <tr>
                <th>N.°</th>
                <th>ASIGNATURA</th>
                <th>NIVEL</th>
                <th>NOTAS</th>
                <th># CRED.</th>
                <th>NOT. *CRED.</th>
                <th>OBSERVACIÓN</th>
            </tr>
        </thead>
        <tbody>
            {{#each calificaciones.materias}}
        
            {{#unless (esNoCurricular asignatura)}}
            <tr>
                <td>{{no}}</td>
                <td>{{asignatura}}</td>
                <td><strong>{{nivel}}</strong></td>
                <td>{{nota}}</td>
                <td>{{cred}}</td>
                <td>{{multiply nota cred}}</td>
                <td>{{verificarAcreditacion nota}}</td>
            </tr>
            {{/unless}}
        
            {{/each}}
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td style="text-align: center;">TOTALES</td>
                <td>{{sumaCreditos calificaciones.materias 'cred'}}</td>
                <td>{{multiplicaNotaCreditos calificaciones.materias 'nota' 'cred'}}</td>                
                <td></td>
            </tr>
            <tr>
                <td style="text-align: right;" colspan="3"><strong>PROMEDIO PONDERADO DEL CICLO ACADÉMICO ((d)/(c)):<strong></td>
                 <td style="text-align: left;">
                    {{divide 
                        (multiplicaNotaCreditos calificaciones.materias 'nota' 'cred')
                        (sumaCreditos calificaciones.materias 'cred')
                    }}
                </td>
                <td>(c)</td>
                <td>(d)</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
    <table class="tabla-asignaturas">

        <colgroup>
            <col style="width:5%;">
            <col style="width:34%;">
            <col style="width:11%;">
            <col style="width:7%;">
            <col style="width:10%;">
            <col style="width:12%;">
            <col style="width:14%;">
        </colgroup>
    
        <tbody>
    
            {{#each calificaciones.materias}}
    
            {{#if (esNoCurricular asignatura)}}
            <tr>
                <td>{{no}}</td>
                <td colspan="2">{{asignatura}}</td>
                <td ><strong>{{nivel}}</strong></td>
                
                <td>{{cred}}</td>
                <td></td>
                <td>{{verificarAcreditacion nota}}</td>
            </tr>
            {{/if}}
    
            {{/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>