// Ruta amigable para la página de ayuda ahora en el array de rutas


<br />
<b>Warning</b>:  session_start(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>2</b><br />
<br />
<b>Notice</b>:  session_start(): A session had already been started - ignoring in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>2</b><br />
</div>
<script>
// --- PING DE SESIÓN AUTOMÁTICO ---
</script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gráfico de Activos por Año (mejorado)
        var ctxAnios = document.getElementById('graficaAnios').getContext('2d');
        var labelsAnios = [];
        var dataAnios = [];
        new Chart(ctxAnios, {
            type: 'line',
            data: {
                labels: labelsAnios,
                datasets: [{
                    label: 'Activos',
                    data: dataAnios,
                    backgroundColor: 'rgba(123,30,58,0.15)',
                    borderColor: '#7B1E3A',
                    borderWidth: 2,
                    pointBackgroundColor: '#c0392b',
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            color: '#7B1E3A',
                            font: { weight: 'bold', size: 13 }
                        }
                    },
                    tooltip: {
                        enabled: true,
                        backgroundColor: '#fff',
                        titleColor: '#7B1E3A',
                        bodyColor: '#7B1E3A',
                        borderColor: '#c0392b',
                        borderWidth: 1,
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 13 },
                        callbacks: {
                            label: function(context) {
                                return ' Activos: ' + context.parsed.y + ' en ' + context.label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { color: '#7B1E3A', font: { weight: 'bold' } }
                    },
                    x: {
                        ticks: { color: '#7B1E3A', font: { weight: 'bold' } }
                    }
                }
            }
        });

        // Gráfico de Activos por Estado (mejorado)
        var ctxBarEstados = document.getElementById('graficaBarEstados').getContext('2d');
        var labelsBarEstados = [null,"1","2","3"];
        var dataBarEstados = [3,12,2,2];
        var coloresEstados = ['#ffc107', '#198754', '#dc3545', '#0d6efd', '#7B1E3A', '#27ae60', '#f7c873', '#c0392b', '#0dcaf0', '#6f42c1'];
        new Chart(ctxBarEstados, {
            type: 'bar',
            data: {
                labels: labelsBarEstados,
                datasets: [{
                    label: 'Activos',
                    data: dataBarEstados,
                    backgroundColor: coloresEstados.slice(0, labelsBarEstados.length),
                    borderRadius: 8,
                    borderWidth: 1.5
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            color: '#7B1E3A',
                            font: { weight: 'bold', size: 13 }
                        }
                    },
                    tooltip: {
                        enabled: true,
                        backgroundColor: '#fff',
                        titleColor: '#7B1E3A',
                        bodyColor: '#7B1E3A',
                        borderColor: '#c0392b',
                        borderWidth: 1,
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 13 },
                        callbacks: {
                            label: function(context) {
                                return ' ' + context.label + ': ' + context.parsed.y + ' activos';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { color: '#7B1E3A', font: { weight: 'bold' } }
                    },
                    x: {
                        ticks: { color: '#7B1E3A', font: { weight: 'bold' } }
                    }
                }
            }
        });
    });
    </script>
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>169</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>169</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>170</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>170</b><br />
<!DOCTYPE html>
<html>
<head>
    <title>Inicio - Sistema de Activos</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet">
    <style>
    body { font-family: 'Montserrat', Arial, sans-serif; background: #f8f9fa; }
    .dashboard-card { min-height: 50px; padding: 0.3rem 0.15rem; border-radius: 10px; }
    .dashboard-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.15rem; }
    .dashboard-value { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.05rem; }
    .dashboard-icon { font-size: 1.1rem; margin-bottom: 0.05rem; }
    .dashboard-table th, .dashboard-table td { font-size: 0.8rem; padding: 0.15rem 0.2rem; }
    .dashboard-table th { background: #f7f7f7; font-weight: 600; }
    .dashboard-table { margin-bottom: 0; }
    .dashboard-chart { height: 50px !important; }
    .dashboard-summary span { font-size: 0.85rem; font-weight: 600; }
    .dashboard-user { font-size: 0.85rem; color: #7B1E3A; font-weight: 500; }
    .dashboard-container { max-width: 1100px; margin: 0 auto; }
    </style>
</head>
<body>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<style>
    .navbar {
        background: #7B1E3A;
        box-shadow: 0 4px 16px #cfa3b5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        height: 38px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        transition: height 0.2s, padding 0.2s;
        font-size: 0.82rem; /* Más pequeño */
    }
    .navbar-logo {
        display: flex;
        align-items: center;
        font-size: 0.90rem; /* Más pequeño */
        color: #fff;
        font-weight: 700;
        letter-spacing: 1px;
    }
    .navbar-logo span {
        font-size:1.05rem;margin-right:6px;
    }
    .navbar-menu {
        display: flex;
        gap: 14px;
    }
    .navbar-menu a {
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        font-size: 0.82rem; /* Más pequeño */
        padding: 3px 8px;
        border-radius: 8px;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .navbar-menu a:hover {
        background: #fff;
        color: #7B1E3A;
        box-shadow: 0 2px 8px #cfa3b5;
    }
    .navbar-menu .logout {
        background: #fff;
        color: #7B1E3A;
        font-weight: bold;
        box-shadow: 0 2px 8px #cfa3b5;
    }
    .navbar-menu .logout:hover {
        background: #A8324A;
        color: #fff;
    }
    .navbar-menu .dropdown {
        position: relative;
        display: inline-block;
    }
    .navbar-menu .dropdown-toggle {
        cursor: pointer;
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        font-size: 0.82rem; /* Más pequeño */
        padding: 3px 8px;
        border-radius: 8px;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .navbar-menu .dropdown-toggle:hover {
        background: #fff;
        color: #7B1E3A;
        box-shadow: 0 2px 8px #cfa3b5;
    }
    .navbar-menu .dropdown-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 140px;
        background: #fff;
        color: #7B1E3A;
        border-radius: 8px;
        box-shadow: 0 2px 8px #cfa3b5;
        z-index: 1000;
        padding: 4px 0;
    }
    .navbar-menu .dropdown-menu .dropdown-item {
        color: #7B1E3A;
        padding: 3px 10px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem; /* Más pequeño */
        border-bottom: 1px solid #f1f2f6;
        background: none;
        transition: background 0.2s, color 0.2s;
    }
    .navbar-menu .dropdown-menu .dropdown-item:last-child {
        border-bottom: none;
    }
    .navbar-menu .dropdown-menu .dropdown-item:hover {
        background: #f1f2f6;
        color: #A8324A;
    }
    .navbar-menu .dropdown.show .dropdown-menu {
        display: block;
    }
    .navbar-toggler {
        display: none;
        background: #fff;
        border: none;
        color: #7B1E3A;
        font-size: 2rem;
        padding: 8px 12px;
        border-radius: 8px;
        margin-left: 12px;
    }
    @media (max-width: 900px) {
        .navbar {
            padding: 0 8px;
        }
        .navbar-menu {
            position: absolute;
            top: 48px;
            left: 0;
            width: 100%;
            background: linear-gradient(90deg,#7B1E3A 80%,#cfa3b5 100%);
            flex-direction: column;
            gap: 0;
            display: none;
            box-shadow: 0 8px 32px rgba(123,30,58,0.12);
            z-index: 9999;
            animation: slideDown 0.3s ease;
            backdrop-filter: blur(2px);
            background-color: rgba(123,30,58,0.97);
        }
        .navbar-menu.show {
            display: flex;
        }
        .navbar-menu a {
            padding: 16px 24px;
            border-radius: 0;
            border-bottom: 1px solid #cfa3b5;
            font-size: 1.15rem;
            display: flex;
            align-items: center;
            gap: 12px;
            background: transparent;
            transition: background 0.2s, color 0.2s;
        }
        .navbar-menu a:hover {
            background: rgba(255,255,255,0.12);
            color: #fff;
        }
        .navbar-toggler {
            display: block;
            border: 2px solid #fff;
            background: #7B1E3A;
            color: #fff;
            font-size: 2rem;
            padding: 8px 12px;
            border-radius: 8px;
            margin-left: 12px;
            box-shadow: 0 2px 8px #cfa3b5;
        }
        @keyframes slideDown {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
    }
</style>
<style>
@media (min-width: 901px) {
    .content {
        margin-top: 56px !important;
    }
}
</style>
<div class="navbar">
    <div class="navbar-logo">
        <span>&#128188;</span> Activos
    </div>
    <button class="navbar-toggler" id="menuToggle" aria-label="Menú">
        <span>&#9776;</span>
    </button>
    <div class="navbar-menu" id="menuNav">
        <a href="/home"><i class="bi bi-house-door-fill"></i> Inicio</a>
                <div class="dropdown">
            <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-box-seam"></i> Activos</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="/activos/"> <i class="bi bi-list-ul"></i> Lista de Activos</a>

                
                                                                                                            </div>
        </div>
                                    
    <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-person-circle"></i> Usuario</a>
        <div class="dropdown-menu">
                        <a class="dropdown-item" href="/perfil"><i class="bi bi-person-circle"></i> Perfil</a>
            <a class="dropdown-item" href="/ayuda"><i class="bi bi-question-circle"></i> Ayuda</a>
            <a class="dropdown-item logout" href="/logout"><i class="bi bi-box-arrow-right"></i> Cerrar sesión</a>
        </div>
    </div>
    </div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const menuToggle = document.getElementById('menuToggle');
    const menuNav = document.getElementById('menuNav');
    menuToggle.addEventListener('click', function() {
        menuNav.classList.toggle('show');
    });
    window.addEventListener('resize', function() {
        if(window.innerWidth > 900) menuNav.classList.remove('show');
    });
    // Dropdown toggling
    document.querySelectorAll('.navbar-menu .dropdown-toggle').forEach(function(toggle) {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            var parent = toggle.parentElement;
            parent.classList.toggle('show');
            // Cerrar otros dropdowns
            document.querySelectorAll('.navbar-menu .dropdown').forEach(function(drop) {
                if (drop !== parent) drop.classList.remove('show');
            });
        });
    });
    // Cerrar dropdowns al hacer click fuera
    document.addEventListener('click', function(e) {
        document.querySelectorAll('.navbar-menu .dropdown').forEach(function(drop) {
            if (!drop.contains(e.target)) drop.classList.remove('show');
        });
    });
</script>

    <div style="height: 40px;"></div>
    <!-- Sección de Circulares Recientes (Colapsable) -->
    <div class="row mb-4 justify-content-center">
        <div class="col-12 col-lg-8">
            <div class="card border-0 shadow-lg bg-white rounded-4 animate__animated animate__fadeInDown">
                <div class="card-body py-4 px-3">
                    <div class="d-flex align-items-center mb-3 justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="me-2" style="font-size:2.1rem;color:#7B1E3A;">
                                <i class="bi bi-megaphone-fill"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-0" style="color:#7B1E3A;letter-spacing:0.5px;">Circulares Recientes</h5>
                        </div>
                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#circularesCollapse" aria-expanded="false" aria-controls="circularesCollapse" style="font-weight:600;">
                            <span>Ver circulares</span>
                            <i class="bi bi-chevron-down"></i>
                        </button>
                    </div>
                    <div class="collapse" id="circularesCollapse">
                        <div class="mb-3">
                            <div class="row g-2 align-items-end">
                                <div class="col-12 col-md-7">
                                    <label for="buscador-circular" class="form-label mb-1" style="color:#7B1E3A;font-weight:600;font-size:0.98rem;">Buscar circular</label>
                                    <input type="text" id="buscador-circular" class="form-control form-control-sm" placeholder="Nombre o palabra clave...">
                                </div>
                                <div class="col-6 col-md-3">
                                    <label for="filtro-fecha-circular" class="form-label mb-1" style="color:#7B1E3A;font-weight:600;font-size:0.98rem;">Filtrar por fecha</label>
                                    <input type="date" id="filtro-fecha-circular" class="form-control form-control-sm">
                                </div>
                                <div class="col-6 col-md-2 d-grid">
                                    <button class="btn btn-outline-secondary btn-sm" id="limpiar-filtros-circular" type="button">Limpiar</button>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3" id="contenedor-circulares-recientes">
                                                        <div class="col-12 col-md-4 item-circular" data-nombre="circular ci-01-2024.pdf" data-fecha="<br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
<br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
2026-03-19">
                                <div class="card border-0 shadow-sm h-100 bg-light rounded-3">
                                    <div class="card-body d-flex flex-column justify-content-between p-3">
                                        <div class="mb-2">
                                            <div class="d-flex align-items-center mb-1">
                                                <i class="bi bi-file-earmark-text" style="color:#c0392b;font-size:1.5rem;"></i>
                                                <span class="ms-2 fw-semibold text-truncate" style="max-width:120px;color:#7B1E3A;" title="Circular CI-01-2024.pdf">
                                                    Circular CI-01-2024.pdf                                                </span>
                                            </div>
                                            <div class="small text-muted" style="color:#7B1E3A!important;">
                                                <i class="bi bi-calendar2-week"></i> <br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
19/03/2026 15:03                                            </div>
                                        </div>
                                        <div class="mt-2 text-end">
                                            <a href="/public/ver_circular.php?id=3" target="_blank" class="btn btn-sm fw-bold" style="background:#7B1E3A;color:#fff;letter-spacing:0.5px;">
                                                <i class="bi bi-eye"></i> Ver
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                        <div class="col-12 col-md-4 item-circular" data-nombre="circular procedimiento de compras.pdf" data-fecha="<br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
<br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>351</b><br />
2026-03-19">
                                <div class="card border-0 shadow-sm h-100 bg-light rounded-3">
                                    <div class="card-body d-flex flex-column justify-content-between p-3">
                                        <div class="mb-2">
                                            <div class="d-flex align-items-center mb-1">
                                                <i class="bi bi-file-earmark-text" style="color:#c0392b;font-size:1.5rem;"></i>
                                                <span class="ms-2 fw-semibold text-truncate" style="max-width:120px;color:#7B1E3A;" title="Circular Procedimiento de Compras.pdf">
                                                    Circular Procedimiento de Compras.pdf                                                </span>
                                            </div>
                                            <div class="small text-muted" style="color:#7B1E3A!important;">
                                                <i class="bi bi-calendar2-week"></i> <br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  strtotime(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  date(): Invalid date.timezone value ''America/Bogota'', we selected the timezone 'UTC' for now. in <b>/home6/movilcoc/bodegas.movilco.co/views/home.php</b> on line <b>362</b><br />
19/03/2026 13:15                                            </div>
                                        </div>
                                        <div class="mt-2 text-end">
                                            <a href="/public/ver_circular.php?id=2" target="_blank" class="btn btn-sm fw-bold" style="background:#7B1E3A;color:#fff;letter-spacing:0.5px;">
                                                <i class="bi bi-eye"></i> Ver
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    // Filtro y buscador de circulares recientes
    document.addEventListener('DOMContentLoaded', function() {
        var buscador = document.getElementById('buscador-circular');
        var filtroFecha = document.getElementById('filtro-fecha-circular');
        var limpiarBtn = document.getElementById('limpiar-filtros-circular');
        var items = document.querySelectorAll('.item-circular');
        function filtrarCirculares() {
            var texto = buscador.value.trim().toLowerCase();
            var fecha = filtroFecha.value;
            items.forEach(function(item) {
                var nombre = item.getAttribute('data-nombre');
                var fechaItem = item.getAttribute('data-fecha');
                var visible = true;
                if (texto && !nombre.includes(texto)) visible = false;
                if (fecha && fecha !== fechaItem) visible = false;
                item.style.display = visible ? '' : 'none';
            });
        }
        if (buscador) buscador.addEventListener('input', filtrarCirculares);
        if (filtroFecha) filtroFecha.addEventListener('change', filtrarCirculares);
        if (limpiarBtn) limpiarBtn.addEventListener('click', function() {
            buscador.value = '';
            filtroFecha.value = '';
            filtrarCirculares();
        });
    });
    </script>


                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="row mb-4">
            <div class="col-12 text-center">
                <div class="card border-0 shadow-sm bg-white rounded-4 mx-auto" style="max-width:900px;">
                    <div class="card-body p-3">
                        <h6 class="card-title text-center mb-2 fw-bold" style="color:#7B1E3A; font-size:1.1rem; letter-spacing:0.5px;">Bienvenidos</h6>
                        <div style="font-size:1.15rem;color:#c0392b;font-weight:500;">
                            Usuario: <b>Usuario</b>                        </div>
                    </div>
                </div>
            </div>
        </div>

    <div class="dashboard-container mt-2">




    </div>
    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script>
    // Filtro y buscador de circulares recientes
    document.addEventListener('DOMContentLoaded', function() {
        var buscador = document.getElementById('buscador-circular');
        var filtroFecha = document.getElementById('filtro-fecha-circular');
        var limpiarBtn = document.getElementById('limpiar-filtros-circular');
        var items = document.querySelectorAll('.item-circular');
        function filtrarCirculares() {
            var texto = buscador.value.trim().toLowerCase();
            var fecha = filtroFecha.value;
            items.forEach(function(item) {
                var nombre = item.getAttribute('data-nombre');
                var fechaItem = item.getAttribute('data-fecha');
                var visible = true;
                if (texto && !nombre.includes(texto)) visible = false;
                if (fecha && fecha !== fechaItem) visible = false;
                item.style.display = visible ? '' : 'none';
            });
        }
        if (buscador) buscador.addEventListener('input', filtrarCirculares);
        if (filtroFecha) filtroFecha.addEventListener('change', filtrarCirculares);
        if (limpiarBtn) limpiarBtn.addEventListener('click', function() {
            buscador.value = '';
            filtroFecha.value = '';
            filtrarCirculares();
        });
    });
    </script>
</body>
<style>
    html, body {
        overflow-x: hidden !important;
    }
</style>
</html>