Documentos de Comisión


<style>
/* custom.css - estilo aplicado sobre Bootstrap */

/* Fondo + overlay */
html, body {
    height: 100%;
}
body {
    background: url('/static/img/background.png') center center no-repeat fixed;
    background-size: cover;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 3rem;
    position: relative;
    z-index: 0;
}

/* overlay degradado */
body::before {
    content: '';
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%);
    pointer-events: none;
}

/* Main container (aplica a tu .container.mt-4 actual) */
.container.mt-4 {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    padding: 2rem;
    margin: 2rem auto 4rem auto;
    backdrop-filter: blur(10px);
    min-height: auto;
    width: 90%;
    max-width: 1200px;
    position: relative;
    z-index: 1; /* para quedar por encima del overlay */
}

/* Título de página */
.container.mt-4 h2.mb-0 {
    color: #333;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 2.1rem;
    text-align: left;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding-left: 0;
    margin-bottom: 1rem;
}
.breadcrumb .breadcrumb-item.active {
    color: rgba(0,0,0,0.6);
    font-weight: 600;
}

/* Card de filtros (adaptado a .card) */
.card.shadow-sm.mb-4 {
    border-radius: 15px;
    overflow: hidden;
    border: 0;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.card-header.bg-light {
    background: rgba(102, 126, 234, 0.06) !important;
    border-bottom: 1px solid rgba(102,126,234,0.12);
    font-weight: 600;
    color: #333;
}

/* Filtro: card-body */
.card-body form .form-control,
.card-body form .form-select {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Botón buscar */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 6px 18px rgba(118,75,162,0.14);
    border-radius: 10px;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    transform: translateY(-1px);
}

/* Tabla */
.table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 0.6rem;
}
.table thead .table-dark th {
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: 0;
    font-weight: 700;
    border-radius: 8px;
}
.table tbody tr {
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.04);
}
.table tbody tr td {
    vertical-align: middle;
    border: 0;
    padding: 1rem;
}

/* Links de descarga */
.table a {
    color: #4a4a4a;
    text-decoration: none;
}
.table a:hover {
    text-decoration: underline;
    color: #2c2c2c;
}

/* Card individual estilo "precandidato" (puede usarse para filas o tarjetas) */
.precandidato-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    border-left: 5px solid;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.precandidato-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Badges de corporación (si usas) */
.corporacion-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 0.5rem;
}
.badge-presidencia {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.badge-senado {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
}
.badge-camara {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

/* Stats section - se puede usar en cabecera si se requiere */
.stats-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}
.stat-item {
    display: inline-block;
    margin: 0 1rem;
    padding: 1rem;
}
.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #667eea;
}

/* Pagination */
.pagination .page-link {
    border-radius: 8px;
    border: 0;
    margin: 0 0.2rem;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(102,126,234,0.12);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .container.mt-4 {
        padding: 1rem;
        width: 95%;
    }
    .container.mt-4 h2.mb-0 {
        font-size: 1.5rem;
    }
    .table tbody tr td {
        padding: 0.6rem;
        font-size: 0.95rem;
    }
}

/* Helpers: colores por estado (útil para filas/etiquetas) */
.tr-border-presidencia { border-left: 5px solid #667eea !important; }
.tr-border-senado { border-left: 5px solid #764ba2 !important; }
.tr-border-camara { border-left: 5px solid #f093fb !important; }
</style>
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Documentos de Comisión</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0"><i class="bi bi-folder-fill me-2"></i> Documentos de Comisión</h2>
    </div>

    
<!--
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="bi bi-funnel-fill me-2"></i> Filtrar y Buscar Documentos</h5>
        </div>
        <div class="card-body">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-md-5">
                    <label for="id_q" class="form-label visually-hidden">Buscar</label>
                    <input type="text" name="q" id="id_q" class="form-control" placeholder="Buscar por nombre, aprobador, etc." value="">
                </div>
                <div class="col-md-4">
                    <label for="id_estado" class="form-label visually-hidden">Estado</label>
                    <select name="estado" id="id_estado" class="form-select">
                        <option value="">Todos los Estados</option>
                        
                            <option value="PENDIENTE" >Pendiente de Revisión</option>
                        
                            <option value="APROBADO" >Aprobado</option>
                        
                            <option value="RECHAZADO" >Rechazado</option>
                        
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100"><i class="bi bi-search me-2"></i>Buscar y Filtrar</button>
                </div>
            </form>
        </div>
    </div>
-->
    
        <div class="table-responsive">
            <table class="table table-striped table-hover align-middle">
                <thead class="table-dark">
                    <tr>
                        <th scope="col">Nombre</th>
                        <th scope="col">Subido El</th>
                        <th scope="col">Accion</th>
                    </tr>
                </thead>
                <tbody>
                    
                    <tr>
                        <td>Subsanación acta final</td>
                        <td>19 Sep 2025 09:08</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/Subsanacion_Acta_Final.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Alcance al Acta Comité Nacional de Etica y Garantías</td>
                        <td>18 Sep 2025 21:58</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ALCANCE_AL_ACTA_COMITE_NACIONAL_DEL_16092025.docx_1.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Acta Comité Nacional de ética y Garantías electorales</td>
                        <td>17 Sep 2025 15:04</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_COMIT%C3%89_NACIONAL_%C3%89TICA_Y_GARANT%C3%8DAS_PH_.docx_1.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA COMITÉ REGIONAL DE ÉTICA Y GARANTÍAS ELECTORALES DEL PACTO HISTÓRICO, CIRCUNSCRIPCIÓN PACÍFICO Y SUROCCIDENTE (VALLE DEL CAUCA, CAUCA, NARIÑO Y CHOCO)</td>
                        <td>16 Sep 2025 23:04</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/Acta_Comite_Regional_Pacifico_y_Suroccidente_-_15-09-2025.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Acta cámara de representantes Nororiente</td>
                        <td>16 Sep 2025 16:23</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_FINAL_COMITE_ETICA_Y_GARANTIAS_ELECTORALES_NORORIENTE-PACTO_HIS_sHOQY40.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA COMITE NORORIENTE</td>
                        <td>16 Sep 2025 15:57</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_FINAL_COMITE_ETICA_Y_GARANTIAS_ELECTORALES_NORORIENTE-PACTO_HISTORICO.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA COMITE REGIONAL SUR COLOMBIANO DE ETICA</td>
                        <td>16 Sep 2025 14:05</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_COMITE_REGIONAL_SUR_COLOMBIANO_DE_ETICA.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA DEL COMITÉ REGIONAL AMAZONIA DE ÉTICA Y GARANTÍAS ELECTORALES.</td>
                        <td>15 Sep 2025 23:50</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_DEL_COMIT%C3%89_REGIONAL_AMAZONIA_DE_%C3%89TICA_Y_GARANT%C3%8DAS_ELECTORALES..pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>COMITÉ DE ÉTICA Y GARANTÍAS ELECTORALES ANTIOQUIA- EJE CAFETERO PACTO HISTÓRICO.</td>
                        <td>15 Sep 2025 22:48</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/Acta_del_comite_de_etica_y_garantias_electorales_PH_15092025_ACTA_DOS.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA COMISIÓN REGION CENTRO DE ETICA</td>
                        <td>15 Sep 2025 20:32</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_COMISI%C3%93N_REGION_CENTRO_DE_ETICA.docx.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Acta comité circunscripción exterior</td>
                        <td>15 Sep 2025 20:19</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/Acta_y_Anexos_Comit%C3%A9_de_%C3%89tica_y_Garant%C3%ADas_Curul_Internacional.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA COMITÉ DE ÉTICA REGIONAL CARIBE</td>
                        <td>15 Sep 2025 17:56</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_COMITE__DE_ETICA_REGIONAL_CARIBE_PACTO.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>ACTA DE COMITE DE EJEMPLO</td>
                        <td>15 Sep 2025 08:33</td>
                        <td>
                            <p><strong>Archivo:</strong> <a href="/media/documentos_comision/ACTA_COMITE__EJEMPLO.pdf" target="_blank"><i class="bi bi-box-arrow-up-right me-1"></i> Descargar</a></p>
                        </td>
                    </tr>
                    
                </tbody>
            </table>
        </div>

        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                

                <li class="page-item disabled"><span class="page-link">Página 1 de 1</span></li>

                
            </ul>
        </nav>

    
</div>