<!doctype html>
<html lang="es" data-bs-theme="light" style="height: 100%;overflow: auto;">

<head>
    <meta charset="utf-8">
    <title>Concurso Docente</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{{ env('APP_URL') }}css/bootstrap.min.css" media="all">

    <!-- FontAwesome CSS - Solo un enlace para evitar conflictos -->
    <link href="{{ env('APP_URL') }}css/fontawesome/fontawesome-all.min.css" rel="stylesheet" type="text/css" />

    <!-- Otros CSS -->
    <link rel="stylesheet" type="text/css" href="{{ env('APP_URL') }}css/form.css" media="print">
    <link href="{{ env('APP_URL') }}css/formulario.css" rel="stylesheet" type="text/css">
    <link href="{{ env('APP_URL') }}css/fileinput/fileinput.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ env('APP_URL') }}css/bootstrap-multiselect/bootstrap-multiselect.css" rel="stylesheet"
        type="text/css" />
    <link href="{{ env('APP_URL') }}css/bootstrap-typeahead/style.css" rel="stylesheet" type="text/css" />
    <!-- jQuery UI CSS removido - ya no se usa jQuery UI -->
    <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
    <link rel="stylesheet" type="text/css" href="{{ env('APP_URL') }}/css/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="{{ env('APP_URL') }}css/jquery.datetimepicker.css" />

    <!-- Favicon y Kit UNAL -->
    <link rel="icon" type="image/x-icon" href="https://gestionapp.medellin.unal.edu.co/cdn/assets/favicon.ico">
    <!-- Kit UNAL CSS -->
    <link rel="stylesheet" href="https://gestionapp.medellin.unal.edu.co/cdn/kitUnal/12112024/css/kitUnal.min.css">
    <link rel="stylesheet" href="https://gestionapp.medellin.unal.edu.co/cdn/kitUnal/12112024/css/themes/main.min.css">
    <!-- Flatpickr y Tom-select CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link
        href='https://fonts.googleapis.com/css2?family=Ancizar+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'
        rel='stylesheet'>

    <!-- Material Symbols para iconos del footer -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <!-- Scripts -->
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <!-- jQuery removido - reemplazado por JavaScript vanilla -->
    <!-- <script src="{{ env('APP_URL') }}js/jquery-1.12.4.js" type="text/javascript"></script> -->
    <!-- <script src="{{ env('APP_URL') }}js/jquery-ui.js" type="text/javascript"></script> -->
    <script src="{{ env('APP_URL') }}js/unal.js" type="text/javascript"></script>
    <!-- Plugins que requieren jQuery - comentados -->
    <!-- <script src="{{ env('APP_URL') }}js/fileupload/fileinput.min.js" type="text/javascript"></script> -->
    <!-- <script src="{{ env('APP_URL') }}js/fileupload/fileinput_locale_es.js" type="text/javascript"></script> -->
    <!-- <script src="{{ env('APP_URL') }}js/jquery.datetimepicker.full.js"></script> -->
    <!-- <script src="{{ env('APP_URL') }}js/bootstrap-typeahead/typeahead.bundle.min.js" type="text/javascript"></script> -->
    <!-- <script src="{{ env('APP_URL') }}js/bootstrap-multiselect/bootstrap-multiselect.js" type="text/javascript"></script> -->
    <!-- Bootstrap JS for collapse functionality -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


        <title>{{env('APP_NAME')}}</title>
    </head>

    <body>
        <div class="wrapper">
            <header class="m-0">
                <div class="section-icon">
                    <div class="banner-container">
                        <a href="https://unal.edu.co/" target="_blank" rel="noopener" class="icon-link">
                            <img src="https://gestionapp.medellin.unal.edu.co/cdn/assets/images/logo_unal_circle.png"
                                alt="Escudo de UNAL" mime="image/png" name="coat-of-arms.png" type="image">
                        </a>
                    </div>
                </div>

                <div id="divider-top"></div>

                <div id="section-menu-middle">
                    <div class="padded-container">
                        <p id="name-aplication">Concurso Docente</p>
                    </div>
                </div>
            </header>

            <main class="detalle">
                @yield('content')
            </main>

            <footer>
                <p class="copyright">© Copyright 2025 - Algunos Derechos Reservados</p>
                <div class="info-help">
                    <p class="dependency">Facultad de Ingeniería - Sede Bogotá</p>
                    <div class="vr"></div>
                    <a class="help-link" href="https://gestionservicios.unal.edu.co/asmscustomer/index.html#/" target="_blank">
                        <span class="material-symbols-outlined icon">contact_support</span>
                        <span class="text-decoration-underline">¿Necesitas ayuda?</span>
                    </a>
                </div>
                <div class="more-info">
                    <p>Versión 2025</p>
                    <div class="vr"></div>
                    <p><a class="link-neutral-100" href="https://legal.unal.edu.co/rlunal/home/doc.jsp?d_i=93798"
                            target="_blank">Tratamiento de Datos Personales</a></p>
                </div>
            </footer>
        </div>
        
        <!-- Flatpickr y Tom-select deben incluirse antes de kitUnal.js -->
        <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
        <script src="https://gestionapp.medellin.unal.edu.co/cdn/kitUnal/12112024/js/kitUnal.bundle.min.js"></script>
        
        <!-- Validación global de archivos PDF -->
        <script>
            (function() {
                // Configuración de validación
                var FILE_VALIDATION_CONFIG = {
                    maxSize: 9 * 1024 * 1024, // 9MB en bytes
                    allowedExtensions: ['pdf'],
                    allowedMimeTypes: ['application/pdf']
                };

                // Función de validación de archivos
                function validatePDFFile(file) {
                    var errors = [];
                    
                    // Validar extensión
                    var fileName = file.name.toLowerCase();
                    var fileExtension = fileName.split('.').pop();
                    if (!FILE_VALIDATION_CONFIG.allowedExtensions.includes(fileExtension)) {
                        errors.push('El archivo debe estar en formato PDF.');
                    }
                    
                    // Validar tipo MIME
                    if (file.type && !FILE_VALIDATION_CONFIG.allowedMimeTypes.includes(file.type)) {
                        // Solo validar MIME si está disponible
                        if (file.type !== '') {
                            errors.push('El archivo debe estar en formato PDF.');
                        }
                    }
                    
                    // Validar tamaño
                    if (file.size > FILE_VALIDATION_CONFIG.maxSize) {
                        var sizeInMB = (FILE_VALIDATION_CONFIG.maxSize / (1024 * 1024)).toFixed(0);
                        errors.push('El archivo no puede tener un tamaño superior a ' + sizeInMB + 'MB.');
                    }
                    
                    return errors;
                }

                // Función para mostrar errores
                function showFileError(inputElement, errors) {
                    // Remover errores previos
                    var existingError = inputElement.closest('.form-group, .input-group').querySelector('.file-error-message');
                    if (existingError) {
                        existingError.remove();
                    }
                    
                    if (errors.length > 0) {
                        var errorDiv = document.createElement('div');
                        errorDiv.className = 'file-error-message';
                        errorDiv.style.color = '#d9534f';
                        errorDiv.style.marginTop = '5px';
                        errorDiv.style.fontSize = '0.9em';
                        errorDiv.innerHTML = '<strong>Error:</strong> ' + errors.join(' ');
                        
                        // Insertar después del input o en el contenedor
                        var container = inputElement.closest('.form-group, .input-group') || inputElement.parentElement;
                        container.appendChild(errorDiv);
                        
                        // Limpiar el input
                        inputElement.value = '';
                        
                        return false;
                    }
                    return true;
                }

                // Función para validar input de archivo
                function setupFileValidation(inputElement) {
                    // Solo aplicar a inputs que acepten PDF (no doc/docx)
                    var acceptAttr = inputElement.getAttribute('accept');
                    if (acceptAttr && !acceptAttr.includes('pdf') && acceptAttr.includes('doc')) {
                        return; // No aplicar validación PDF a documentos Word
                    }

                    inputElement.addEventListener('change', function(e) {
                        if (this.files && this.files[0]) {
                            var file = this.files[0];
                            var errors = validatePDFFile(file);
                            
                            if (!showFileError(this, errors)) {
                                // Deshabilitar submit si existe
                                var form = this.closest('form');
                                if (form) {
                                    var submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
                                    if (submitBtn) {
                                        submitBtn.disabled = true;
                                    }
                                }
                            } else {
                                // Habilitar submit si existe
                                var form = this.closest('form');
                                if (form) {
                                    var submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
                                    if (submitBtn) {
                                        submitBtn.disabled = false;
                                    }
                                }
                            }
                        }
                    });
                }

                // Inicializar validación cuando el DOM esté listo
                function initFileValidation() {
                    // Buscar todos los inputs de archivo que no usen fileinput (que ya tiene su propia validación)
                    var fileInputs = document.querySelectorAll('input[type="file"]:not(.file-input, [data-krajee-fileinput])');
                    
                    fileInputs.forEach(function(input) {
                        // Verificar si tiene atributo accept que incluya pdf o no tenga accept (aplicar por defecto)
                        var acceptAttr = input.getAttribute('accept');
                        if (!acceptAttr || acceptAttr.includes('pdf')) {
                            setupFileValidation(input);
                        }
                    });
                }

                // Ejecutar cuando el DOM esté listo
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', initFileValidation);
                } else {
                    initFileValidation();
                }
            })();
        </script>
    </body>
</html>

<style>
    .wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
</style>

<!-- TEMPORAL STYLES -->
<style>
    *:root {
        --bs-primary-40: #677d29;
        --bs-primary-40-text: #ffffff;
        --bs-neutral-100: #ffffff;
        --bs-neutral: #3d4041;
        --bs-neutral-0-rgb: 0, 0, 0;
    }

    header {
        position: relative;
        width: 100%;
        z-index: 15;
        font-size: 16px;
        ;
        margin-bottom: var(--bs-header-margin-bottom);
        --bs-header-bg: var(--bs-primary-40);
        --bs-header-color: var(--bs-primary-40-text);
        --bs-header-top-bg: var(--bs-neutral);
        --bs-header-padding-x-left: calc(var(--bs-header-icon-padding-x) + var(--bs-header-icon-width) + var(--bs-header-padding-x));
        --bs-header-icon-width: 6.25em;
    }

    header {
        --bs-header-icon-padding-x: 0.5em;
    }

    header {
        --bs-header-padding-x: 1.25em;
    }

    header {
        --bs-header-padding-y: calc(1.3em + 0.6vw);
    }

    @media (min-width: 1200px) {
        header {
            --bs-header-padding-y: 1.75em;
        }
    }

    header {
        --bs-header-border-radius: 2.5em;
    }

    header {
        --bs-header-margin-bottom: calc(1.305em + 0.66vw);
    }

    @media (min-width: 1200px) {
        header {
            --bs-header-margin-bottom: 1.8em;
        }
    }

    header {
        --bs-header-top-height: 0.5em;
    }

    @media (min-width: 576px) {
        header {
            --bs-header-icon-padding-x: 1em;
        }
    }

    @media (min-width: 768px) {
        header {
            --bs-header-icon-padding-x: 2em;
        }
    }

    @media (min-width: 992px) {
        header {
            --bs-header-icon-padding-x: 2.5em;
        }
    }

    @media (min-width: 1200px) {
        header {
            --bs-header-icon-padding-x: 3em;
        }
    }

    header .padded-container {
        padding-left: var(--bs-header-padding-x-left);
        padding-right: var(--bs-header-padding-x);
        width: -webkit-fill-available;
    }

    header .section-icon {
        margin-left: var(--bs-header-icon-padding-x);
    }

    header .section-icon .banner-container {
        position: absolute;
        top: 0;
        z-index: 10000;
    }

    header .section-icon .banner-container .icon-link {
        background-color: var(--bs-neutral-100);
        border-radius: 0 0 50% 50%;
        display: flex;
        font-size: 0;
        line-height: 0;
        padding-top: 0;
        transition: width 0.1s ease-in 0s;
        width: var(--bs-header-icon-width);
        box-shadow: rgba(var(--bs-neutral-0-rgb), 0.3) 0px 2px 3px 0px, rgba(var(--bs-neutral-0-rgb), 0.15) 0px 6px 10px 4px;
        position: relative;
        font-size: 16px;
    }

    header .section-icon .banner-container .icon-link img {
        width: 100%;
    }

    header #divider-top {
        background-color: var(--bs-header-top-bg);
        height: var(--bs-header-top-height);
    }

    header #section-menu-middle {
        background-color: var(--bs-header-bg);
        color: var(--bs-header-color);
        padding-top: var(--bs-header-padding-y);
        padding-bottom: var(--bs-header-padding-y);
        border-bottom-right-radius: var(--bs-header-border-radius);
        display: flex;
        align-items: center;
    }

    header #section-menu-middle #name-aplication {
        margin: 0;
        text-decoration: none;
        line-height: 24px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    header #section-menu-middle #name-aplication {
        font-size: 1em;
    }
</style>

<style>
    footer {
        background-color: var(--bs-primary-40);
        color: var(--bs-primary-40-text);
        padding: var(--bs-footer-padding-y) var(--bs-footer-padding-x);
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: var(--bs-footer-gap);
        font-size: 16px;
        --bs-footer-more-info-font-size: 14px;
        --bs-footer-padding-x: 1em;
        --bs-footer-padding-y: 0.75em;
        --bs-footer-gap: 0.75em;
        --bs-footer-help-link-gap: 0.5em;
    }

    footer p {
        text-align: center;
    }

    @media (min-width: 1200px) {
        footer {
            justify-content: space-between;
            flex-direction: row;
        }

        footer p {
            text-align: start;
        }

        footer :last-child {
            text-align: end;
        }
    }

    footer a {
        color: var(--bs-primary-40-text) !important;
        text-decoration: none;
        font-weight: 700;
    }

    footer a:hover {
        color: var(--bs-primary-90);
    }

    footer .more-info {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--bs-footer-gap);
    }

    footer .more-info {
        font-size: var(--bs-footer-more-info-font-size);
    }

    @media (min-width: 1200px) {
        footer .more-info {
            display: block;
        }

        footer .more-info * {
            text-align: end !important;
        }
    }

    footer .more-info :first-child {
        text-align: end;
    }

    footer .more-info :last-child {
        text-align: start;
    }

    footer .more-info .vr {
        display: block;
    }

    footer p {
        margin: 0;
        line-height: 1.25;
    }

    @media (min-width: 1200px) {
        footer .more-info .vr {
            display: none;
        }
    }

    footer .more-info>p {
        width: 100%;
    }

    footer>* {
        width: -webkit-fill-available;
    }

    footer .info-help {
        display: flex;
        justify-content: center;
        gap: var(--bs-footer-gap);
    }

    footer .info-help .dependency {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 44.6666666667dvw;
        line-height: inherit;
    }

    footer .info-help .help-link {
        display: flex;
        gap: var(--bs-footer-help-link-gap);
    }

    footer .info-help .help-link a {
        text-decoration: none !important;
    }

    footer .info-help .help-link .icon {
        font-size: 24px !important;
    }

    footer .vr {
        --bs-vr-bg: var(--bs-neutral-100);
    }
</style>

<style>
    .body {
        display: flex;
        flex-direction: column;
        height: auto;
        flex-grow: 1;
        min-height: 100%;
    }

    .vr {
        --bs-vr-bg: var(--bs-neutral-80);
        width: var(--bs-vr-width);
        min-height: 1em;
        display: inline-block;
        align-self: stretch;
        background-color: var(--bs-vr-bg, inherent);
    }

    .vr {
        --bs-vr-width: 0.0625rem;
    }

    .vr-md {
        --bs-vr-width: 0.125rem;
    }

    .vr-lg {
        --bs-vr-width: 0.1875rem;
    }
</style>