<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <style>
        @font-face {
            font-family: 'MontserratExtraBold';
            src: url({#asset montserrat-extrabold.ttf @encoding=dataURI}) format('truetype');
            font-weight: bold;
            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: 'TrajanProBold';
            src: url({#asset trajanpro-bold.ttf @encoding=dataURI}) format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        /* ================= CONFIGURACIÓN DE PÁGINA ================= */

        @page {
            size: A4 portrait;
            margin: 1.2cm 0.6cm 2.4cm 0.6cm;
        }

        body {
            font-size: 12pt;
            line-height: 1.6;
            color: #000;
        }

        /* ================= HEADER ================= */

        .header-container {
            position: relative;
            width: 100%;
            height: 119px;
        }

        .header-left {
            position: absolute;
            height: 80px;
            /* o el alto que quieres para el header */
        }

        .header-center {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .header-center img {
            height: 90px;
            width: auto;
            display: block;
        }

        .banner-container {
            display: flex;
            align-items: center;
            height: 100%;
            /* ocupa todo el alto del header */
            margin-left: -60px;
        }

        .escudo-banner {
            height: 190px;
            /* baja un poco el tamaño */
            width: auto;
            /* mantiene proporción */
            display: block;
            /* evita espacios raros */
        }

        .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: 76%;
            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: 28px;
            width: 18px;
            height: 37px;
            margin-top: -2.2px;
            border-left: 3px solid #FFCA00;
            border-bottom: 3px solid #FFCA00;
        }

        .titulo-verde {
            margin: 0;
            font-size: 21px;
            line-height: 1;
            text-align: right;
            letter-spacing: 0.3px;
            color: #0b6b3a;
            font-family: 'Montserrat-light';
        }

        .titulo-negro {
            margin: 0;
            font-size: 24px;
            line-height: 1.2;
            text-align: right;
            font-weight: 900;
            color: #1c1c1c;
            font-family: 'MontserratExtraBold';
        }

        .header-line {
            height: 4px;
            margin-top: -25px;
            background: #007C3E;
        }

        /* ================= TABLA ASIGNATURAS ================= */

        .tabla-asignaturas {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 9pt;
        }

        .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;
        }

        .tabla-asignaturas thead.second-header {
            background: #e7e7e8;
            font-weight: bold;
            font-family: "Arial Black", Arial, sans-serif;
            font-size: 8pt;
            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: 8pt;
        }

        /* ================= TOTALES ================= */

        tfoot td {
            font-weight: bold;
            padding: 5px;
            border-top: 3.9px solid #999;
            border-bottom: 3.9px solid #999;
        }

        tfoot td:nth-child(5),
        tfoot td:nth-child(6) {
            background: #e7e7e8;
            border-right: 3.9px solid #ffffff;
            text-align: center;
        }

        /* ================= NUEVOS ================= */

        /* Sección Base */

        .utm-card-section {
            display: flex;
            border: 2.5px solid #1a7b43;
            border-top: none;
            border-bottom-right-radius: 50px;
            overflow: hidden;
            /* Importante para que el fondo no se salga de la curva */
        }

        /* Fondo gris para la sección izquierda completo */

        .utm-card-main {
            flex: 2;
            background-color: white;
            /* Fondo blanco base */
            padding: 0px;
            margin-right: 20px;
            display: flex;
            align-items: center;
        }

        .utm-card-data-row {
            display: flex;
            align-items: center;
            margin-bottom: 2px;
            /* Reducido de 6px a 2px */
            font-size: 14px;
            /* Un poquito más pequeño ayuda a compactar */
            line-height: 1.2;
            /* Controla el espacio interno de la línea */
        }

        /* Etiquetas de la izquierda */

        .utm-card-tag {
            font-weight: bold;
            width: 120px;
            padding: 2px 10px;
            display: inline-block;
            box-sizing: border-box;
            /* Para que el padding no altere el ancho */
        }

        .utm-card-text-val {
            padding-left: 10px;
            color: #333;
        }

        .utm-card-bold {
            font-weight: bold;
        }

        /* Colores de Facultad y Carrera */

        .utm-card-bg-green {
            background-color: #1a7b43;
            color: white;
        }

        .utm-card-bg-yellow {
            background-color: #f9c200;
            color: black;
        }

        /* Estilos para el QR y el texto "PRUEBA" */

        /* Contenedor del QR sin bordes */

        .utm-card-qr-container {
            position: relative;
            width: 65px;
            height: 65px;
            margin: 0 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .qr-img {
            width: 50px;
            height: 50px;
            display: block;
        }

        .corner {
            position: absolute;
            width: 12px;
            height: 12px;
            border: 1.5px solid #1a7b43;
        }

        .top-left {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
        }

        .top-right {
            top: 0;
            right: 0;
            border-left: none;
            border-bottom: none;
        }

        .bottom-left {
            bottom: 0;
            left: 0;
            border-right: none;
            border-top: none;
        }

        .bottom-right {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
        }

        .noBox {
            font-size: 8pt;
            font-weight: bold;
            color: #888;
            border: 1px dashed #bbb;
            padding: 10px;
            text-align: center;
        }

        .utm-card-wrapper {
            display: flex;
            gap: 15px;
            max-width: 570px;
            height: 120px;
            padding-top: 0px;
            justify-content: center;
            margin: 0 auto;
            font-family: "Arial Black", Arial, sans-serif;
        }

        .utm-card-details-group {
            height: 120px;
            background: linear-gradient(to right, #e0e0e0 120px, white 120px);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .utm-card-qr-column {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .qr-texto-validacion {
            margin-top: 5px;
            width: 2cm;
            font-family: Arial, sans-serif;
            font-size: 7px;
            font-weight: bold;
            line-height: 1.3;
            color: #4a4a4a;
            text-align: center;
        }

        .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;
        }
    </style>
</head>

<body>
    <!-- ================= HEADER ================= -->
    <header class="header-container">
        <div class="header-left">
            <div class="banner-container">
                <img src="{#asset logo_utm_hd.png @encoding=dataURI}" class="escudo-banner">
            </div>
        </div>
        <div class="header-center">
            <img src="{#asset Logo ILM - UTM@3x-8.png @encoding=dataURI}" alt="Logo central">
        </div>
        <div class="certificado-wrapper">
            <div class="certificado-container">
                <div class="marco-superior"></div>
                <div class="marco-inferior"></div>
                <div class="titulo-verde">ACTA DE</div>
                <div class="titulo-negro">CALIFICACIONES</div>
            </div>
        </div>
    </header>
    <div class="header-line"></div>
    <div class="utm-card-wrapper">
        <div class="utm-card-section utm-card-main">

            <div class="utm-card-qr-column">

                <div class="utm-card-qr-container">
                    <div class="corner top-left"></div>
                    <div class="corner top-right"></div>
                    <div class="corner bottom-left"></div>
                    <div class="corner bottom-right"></div>

                    {{#if qr_texto}}
                    <img class="qr-img" src="{{qr_texto}}" alt="QR"> {{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=".utm-card-wrapper">
                <div class="utm-card-details-group">
                    <div class="utm-card-data-row">
                        <span class="utm-card-tag">Malla:</span>
                        <span class="utm-card-text-val">{{malla}}</span>
                    </div>
                    <div class="utm-card-data-row">
                        <span class="utm-card-tag utm-card-bg-green">Responsable:</span>
                        <span class="utm-card-text-val utm-card-bold">{{responsable}}</span>
                    </div>
                    <div class="utm-card-data-row">
                        <span class="utm-card-tag utm-card-bg-yellow">Fecha:</span>
                        <span class="utm-card-text-val utm-card-bold">{{fecha}}</span>
                    </div>
                    <div class="utm-card-data-row">
                        <span class="utm-card-tag">Tipo:</span>
                        <span class="utm-card-text-val">{{tipo}}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- ================= TABLA ================= -->
    <table class="tabla-asignaturas">
        <colgroup>
            <col style="width:5%;">
            <col style="width:12%;">
            <col style="width:38%;">
            <col style="width:8%;">
            <col style="width:22%;">
            <col style="width:15%;">
        </colgroup>
        <thead class="second-header">
            <tr>
                <th>NO.</th>
                <th>CÉDULA</th>
                <th>NOMBRES</th>
                <th>CALIFICACIONES</th>
                <th>NIVEL</th>
                <th>DESCRIPCIÓN</th>
            </tr>
        </thead>
        <tbody>
            {{#each acta}}
            <tr>
                <td style="text-align: center;">
                    <strong>{{numero}}</strong>
                </td>
                <td style="text-align: center;">{{cedula}}</td>
                <td>{{nombres}}</td>
                <td style="text-align: center;">{{nota}}</td>
                <td style="text-align: center;">{{materia}}</td>
                <td style="text-align: center;">{{observacion}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</body>

</html>