<!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 landscape;
            margin: 0cm 0.6cm 2.4cm 0.6cm;
        }
        body {
            font-size: 12pt;
            line-height: 1.6;
            color: #000;
        }
        /* ================= HEADER ================= */
        .header-container {
            position: relative;
            width: 100%;
            height: 120px;
        }
        .header-left {
            position: absolute;
            height: 80px; /* o el alto que quieres para el header */
        }
        .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 */
        }
        .text-container {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
            text-transform: uppercase;
            align-items: flex-start;
            text-align: left;
        }
        .fuente-bell {
            font-size: 16px;
            color: #000;
            font-family: 'TrajanProBold';
        }
        .cap-letter {
            font-size: 22px;
            font-weight: bold;
        }
        .fundada {
            font-size: 10px;
            text-transform: none;
            font-weight: bold;
            margin-top: 2px;
        }
        .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: 65%;
            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: 57px;
            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;
        }
        /* ================= 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 ================= */
        .utm-card-wrapper {
            display: flex;
            gap: 15px;
            max-width: 1000px;
            padding-top: 0px;
            justify-content: center;
            margin: 0 auto;
            font-family: "Arial Black", Arial, sans-serif;
        }
        /* 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;
        }
        /* Fondo gris solo para la mitad izquierda de la sección derecha */
        .utm-card-side {
            flex: 1;
            flex-direction: column;
            /* Cambiamos 150px por 180px para que sea más ancho */
            background: linear-gradient(to right, #e0e0e0 160px, white 160px);
            padding: 10px 0;
            border-left: 1px solid #1a7b43;
            /* Opcional: para separar del card izquierdo */
            box-shadow: inset 2.5px 0px 0px 0px #1a7b43,
                /* Línea izquierda */
                inset 0px -2.5px 0px 0px #1a7b43,
                /* Línea inferior */
                inset -2.5px 0px 0px 0px #1a7b43;
            /* Línea derecha */
            border: none;/
        }
        .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: 140px;
            /* Mismo ancho que el gradiente */
            min-width: 120px;
            max-width: 120px;
            padding: 2px 10px;
            display: inline-block;
            box-sizing: border-box;
            /* Para que el padding no altere el ancho */
        }
        /* Etiquetas de la derecha (ajustadas al fondo gris de 150px) */
        .utm-card-tag-side {
            font-weight: bold;
            width: 160px;
            /* Debe ser igual al valor del linear-gradient */
            min-width: 160px;
            /* Evita que se encoja */
            padding: 2px 10px;
            display: inline-block;
            box-sizing: border-box;
        }
        .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: 85px;
            height: 85px;
            margin: 0 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .qr-img {
            width: 70px;
            height: 70px;
            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-details-group {
            flex-grow: 1;
            align-self: stretch;
            /* Esto hace que el fondo gris cubra todo el alto disponible */
            background: linear-gradient(to right, #e0e0e0 120px, white 120px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Centra las filas de texto verticalmente dentro del bloque */
            padding: 10px 0;
            /* Padding solo arriba y abajo para que no se vea apretado el texto */
        }
        /* ================= TABLA LEYENDA ================= */
        .tabla-leyenda {
            width: 60%;
            /* Reducido de 100% a 60% */
            border-collapse: collapse;
            margin-top: 20px;
            margin-left: auto;
            /* Centrar horizontalmente */
            margin-right: auto;
            /* Centrar horizontalmente */
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
        }
        .tabla-leyenda thead:first-of-type {
            background: transparent;
            border: none;
        }
        .tabla-leyenda thead:first-of-type th {
            padding: 3.5px 8px;
            text-align: center;
            border: none;
        }
        .tabla-leyenda 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-leyenda thead.second-header th {
            position: relative;
            padding: 3.5px 8px;
        }
        .tabla-leyenda thead.second-header th+th::before {
            content: "";
            position: absolute;
            left: -1.5px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 5px;
            background: #ffffff;
        }
        .tabla-leyenda tbody td {
            padding: 3px 6px;
            border: 1px solid #999;
            font-size: 9pt;
        }
        .tabla-leyenda tbody td:first-child {
            text-align: center;
            font-weight: bold;
            width: 25%;
            /* Primera columna más angosta */
        }
        .tabla-leyenda tbody td:last-child {
            text-align: left;
            width: 75%;
            /* Segunda columna más ancha para la descripción larga */
        }
        .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-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;
        }

        /* 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;
        }        
    </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="certificado-wrapper">
            <div class="certificado-container">
                <div class="marco-superior"></div>
                <div class="marco-inferior"></div>
                <div class="titulo-verde">HORARIO DE</div>
                <div class="titulo-negro">CLASES</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-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="utm-card-details-group">
                <div class="utm-card-data-row"><span class="utm-card-tag">Período:</span> <span
                        class="utm-card-text-val">{{periodo}}</span></div>
                <div class="utm-card-data-row"><span class="utm-card-tag utm-card-bg-green">Facultad:</span> <span
                        class="utm-card-text-val utm-card-bold">{{facultad}}</span></div>
                <div class="utm-card-data-row"><span class="utm-card-tag utm-card-bg-yellow">Carrera:</span> <span
                        class="utm-card-text-val utm-card-bold">{{carrera}}</span></div>
                <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">Estudiante:</span> <span
                        class="utm-card-text-val">{{estudiante}}</span></div>
            </div>
        </div>
        <div class="utm-card-section utm-card-side">
            <div class="utm-card-data-row"><span class="utm-card-tag-side">Nivel:</span> <span
                    class="utm-card-text-val">{{nivel}}</span></div>
            <div class="utm-card-data-row"><span class="utm-card-tag-side">Código de matrícula:</span> <span
                    class="utm-card-text-val">{{codigoMatricula}}</span></div>
            <div class="utm-card-data-row"><span class="utm-card-tag-side">Créditos tomados:</span> <span
                    class="utm-card-text-val">{{creditosTomados}}</span></div>
            <div class="utm-card-data-row"><span class="utm-card-tag-side">Fecha de impresión:</span> <span
                    class="utm-card-text-val">{{fechaImpresion}} {{horaImpresion}}</span></div>
            <div class="utm-card-data-row"><span class="utm-card-tag-side">Cédula:</span> <span
                    class="utm-card-text-val">{{cedula}}</span></div>
        </div>
    </div>
    <!-- ================= TABLA ================= -->
    <table class="tabla-asignaturas">
        <colgroup>
            <col style="width:26%;"> <!-- ASIGNATURA -->
            <col style="width:5%;">  <!-- NIVEL -->
            <col style="width:5%;">  <!-- PARAL. -->
            <col style="width:4%;">  <!-- CREDI. -->
            <col style="width:15%;"> <!-- DOCENTE -->
            <col style="width:13%;"> <!-- DEPARTAMENTO DOCENTE -->
            <col style="width:32%;"> <!-- HORARIO Y AMBIENTE -->
        </colgroup>
        <thead class="second-header">
            <tr>
                <th>ASIGNATURA</th>
                <th>NIVEL</th>
                <th>PARAL.</th>
                <th>CREDI.</th>
                <th>DOCENTE</th>
                <th>DEPARTAMENTO DOCENTE</th>
                <th>HORARIO Y AMBIENTE</th>
            </tr>
        </thead>
        <tbody>
            {{#each asignaturas}}
            <tr>
                <td>{{asignatura}}</td>
                <td style="text-align: center;">{{nivel}}</td>
                <td style="text-align: center;"><strong>"{{paralelo}}"</strong></td>
                <td style="text-align: center;">{{creditos}}</td>
                <td>{{docente}}</td>
                <td>{{#if departamentoDocente}}{{departamentoDocente}}{{else}}—{{/if}}</td>
                <td>{{{tipo}}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <table class="tabla-leyenda">
        <colgroup>
            <col style="width:15%;"> <!-- LEYENDA -->
            <col style="width:85%;"> <!-- DESCRIPCIÓN -->
        </colgroup>
        <thead class="second-header">
            <tr>
                <th>LEYENDA</th>
                <th>DESCRIPCIÓN</th>
            </tr>
        </thead>
        <tbody>
            {{#each leyenda}}
            <tr>
                <td><strong>{{clave}}</strong></td>
                <td>{{descripcion}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</body>
</html>