<!-- BEGIN: main -->
<table class="table horario w-100" cellpadding="0" cellspacing="0">
    <thead class="">
        <tr>
            <th class="dia0">Hora</th>
            <!-- BEGIN: header --><th class="dia{ID_DIA}">{DIA}</th><!-- END: header -->
        </tr>
    </thead>
    <tbody>
        <!-- BEGIN: hora_row -->
        <tr>
            <!-- BEGIN: hora --><td class="horaGral dia0" rowspan="{FRACCIONES}">{HORA}:00</td><!-- END: hora -->
            <!-- BEGIN: td -->
                <!-- BEGIN: td_horario -->
                <td class="clase dia{ID_DIA}" rowspan="{DURACION_SIZE}">
                    <div class="bloque clase" style="height: {ALTO_DIV}px">
                    <!-- BEGIN: hora --><p class="hora">{HORA_I} - {HORA_F}</p><!-- END: hora -->
                    <!-- BEGIN: texto --><p class="materia">{MATERIA}</p><!-- END: texto -->
                    <!-- BEGIN: grupo --><p class="grupo">Grupo: {GRUPO}</p><!-- END: grupo -->
                    <p class="salon">Salón: {SALON}</p>
                </td><!-- END: td_horario -->
                <!-- BEGIN: td_bloque -->
                <td class="bloque {BLOQUE} dia{ID_DIA}" rowspan="{DURACION_SIZE}">
                    <div class="{CLASE}" style="height: {ALTO_DIV}px">
                    <!-- BEGIN: hora --><p class="hora">{HORA_I} - {HORA_F}</p><!-- END: hora -->
                </td><!-- END: td_bloque -->
                <!-- BEGIN: td_vacio --><td class="dia{ID_DIA}"></td><!-- END: td_vacio -->
            <!-- END: td -->
        </tr><!-- END: hora_row -->
    </tbody>
</table>
<!-- BEGIN: submaterias_block -->
<!-- BEGIN: materia --><h4 class="text-center mt-3">{MATERIA}</h4><!-- END: materia -->
<table class="table tabla-submaterias table-striped table-responsive w-auto" cellpadding="0" cellspacing="0" align="center">
    <thead>
        <tr>
            <th>SUBMATERIA</th>
            <th>DÍA</th>
            <th>SALÓN</th>
            <th>PROFESOR</th>
        </tr>
    </thead>
    <!-- BEGIN: row -->
    <tr>
        <!-- BEGIN: submateria -->
        <td>{SUBMATERIA}</td>
        <td class="text-center">{DIA}</td>
        <td class="text-center">{SALON_SUB}</td>
        <td>
            <ul>
            {PROFESOR_SUB}
            </ul>
        </td><!-- END: submateria -->
    </tr><!-- END: row -->
</table><!-- END: submaterias_block -->
<div class="d-flex flex-row justify-content-around align-items-center w-100">
    <div class="d-inline-flex flex-row justify-content-start align-items-center">
        <div class="cuadro atencion mr-2"></div><label>Atención al área</label>
    </div>
    <div class="d-inline-flex flex-row justify-content-start align-items-center">
        <div class="cuadro gestion mr-2"></div><label>Gestión</label>
    </div>
    <div class="d-inline-flex flex-row justify-content-start align-items-center">
        <div class="cuadro clase mr-2"></div><label>Docencia</label>
    </div>
</div>
<!-- END: main -->